Week 01 - Week 04
Ahmad Firas Bin Ahmad Fisal | 0345121
Interactive Design (GCD60904) | Bachelor of Design (Hons) in Creative Media
Exercises: HTML Document Development & HTML, CSS Document Development, CSS Layout Model
INSTRUCTIONS
Lecture Notes
Project 01: Prototype Design
Project 02: Working Web Page
Final Project: Design, Exploration, and Application
Exercise 1: Web Analysis
- To analyse an existing web and identify areas for improvement. This exercise
is to help us develop our critical thinking skills and gain insights into web
design best practices.
Exercise 2: Replicate A Website
- We are required to pick 2 websites out of the given choices and to
replicate those websites with only Adobe Photoshop or/and Adobe Illustrator.
This is to make us acquainted with web design and to develop an
understanding of its structure.
Font Used: Schibsted Grotesk from
Google Fonts and Janson Text LT Std.
Final Design Outcome: Website #1 - Morgan Stanley
|
| Figure 1.2 - Morgan Stanley (Replica) |
Design Processes:
Figures 1.2.1, 1.2.2, and 1.2.3 are showing the outline version of the
Morgan Stanley replica I've created by using Adobe Illustrator.
|
| Figure 1.2.1 - Outline #1 |
|
|
Figure 1.2.2 - Outline #2 |
|
|
Figure 1.2.3 - Outline #3 |
The magnifying glass to represent the search button logo was also created by using the Ellipse tool and the Rectangle tool before they were combined with the Pathfinder. The arrow pointing downward was also created by using the Rectangle tool but was altered by the Direct Selection tool. Similarly in Figure 1.2.4, the same small downward arrow but with a few tweaks to make it a full-sized arrow were the end products created by using the mentioned tools.
|
|
Figure 1.2.4 - Magnifying Glass and Downward Arrow outlines |
|
|
Figure 1.2.4 - Arrows outline |
These icons were downloaded online and the reason I chose this design is because it resembles closely with the one from the original website. It is then Image Traced and Expanded so that it could be resized without losing its quality.
|
|
Figure 1.2.5 - Social Media Icons |
Final Design Outcome: Website #2 - People by Wagepoint
These four icons and also the Graphical Elements in Figure 1.3.2 and 1.3.3 were manually created as well by using multiple tools like the Rectangle, Ellipse, Direct Selection, Curvature Tool and others.
The logo that looks like a stickman was created manually with Pen Tool, Ellipse Tool and Rectangle Tool. Tracing it over the original photo helps with the visual construction of the logo.
Social Media Icons on this 2nd Website is the same as the one in the 1st except for the Blog Icon. Since the original images of the icon do not have a Blog. I decided to create my own with a single 'W' letter and to put it with the circle-shaped outline and the colour is changed to grey to blend it with the other icons.
This Live Chat button was made manually as well and the chat bubble icon was taken from the icon found in Figure 1.3.2 it is essentially the same but with minor tweaking to make it look concise to be put in the circle.
|
| Figure 1.3 - People by Wagepoint (Replica) |
Design Processes:
Figure 1.3.1 shows the final outcome in an outline of the 2nd website
that I've replicated using Adobe Illustrator. I find it easier to do after
completing the 1st website beforehand. It feels more natural to create those
boxes, trace those social media icons, and many more.
|
| Figure 1.3.1 - Outline #1 |
These four icons and also the Graphical Elements in Figure 1.3.2 and 1.3.3 were manually created as well by using multiple tools like the Rectangle, Ellipse, Direct Selection, Curvature Tool and others.
|
|
Figure 1.3.2 - Icons |
|
|
Figure 1.3.3 - Graphical Elements |
The logo that looks like a stickman was created manually with Pen Tool, Ellipse Tool and Rectangle Tool. Tracing it over the original photo helps with the visual construction of the logo.
|
|
Figure 1.3.4 - Logo Making |
Social Media Icons on this 2nd Website is the same as the one in the 1st except for the Blog Icon. Since the original images of the icon do not have a Blog. I decided to create my own with a single 'W' letter and to put it with the circle-shaped outline and the colour is changed to grey to blend it with the other icons.
|
|
Figure 1.3.5 - Social Media Icons and Logo |
This Live Chat button was made manually as well and the chat bubble icon was taken from the icon found in Figure 1.3.2 it is essentially the same but with minor tweaking to make it look concise to be put in the circle.
|
|
Figure 1.3.6 - "Live Chat" Button |
Exercise 3: HTML and CSS Document Development
Software used: Visual Studio Code and Netlify
Link to my first webpage:
My Profile Page
In this exercise, we will create a personal profile page using HTML. The
goal of this exercise is to help us practice our HTML skills and create a
webpage that showcases our personal interests.
Instructions
1. Include a name, a photo, a brief bio, and some personal interests.
2. Use HTML tags to structure our content as taught in the lecture video. We
should use tags like headings (h1,h2,etc.) and paragraphs (p) to make your
content more readable.
3. Add lists (ul or ol) to showcase our interests. For example, we could
create a list of our favourite books, movies, or hobbies.
4. Add links (a) to our profile page. We could link to our social media
profiles or to other websites that we find interesting.
5. Include an image (img) on our profile page, This could be a picture of
ourselves or something that represents our interests.
6. Once we have completed our profile page, we can publish it online using a
free hosting service like GitHub Pages or Netlify. This will give us a
chance to see our webpage live on the web and share it with others.
After watching the lecture video for the steps to create our Profile Page, I
reapplied the same steps but with my own details in there.
Ensuring that I got the filing stage right is essential because it will be a
hassle for us to reorder after we have done our coding.
|
The lecture video mentioned that we have a certain number of HTML
elements to show that we have the knowledge to code the respective
information mentioned in the instructions.
|
|
|
|
|
Exercise 4: CSS Layout
For this exercise, we are required to create a responsive grid layout
for a website based on the content provided (text and images).
Task Requirements:
- The grid should be visually appealing and functional across different
screen sizes, allowing for optimal viewing on both desktop and mobile
devices.
- Consider different link styles to enhance usability and aesthetics
- You may want to explore media queries to ensure that your website is
responsive and different link styles to improve the usability and
aesthetic of the website.
- Upon completing the task, upload the exercise to Netlify and submit the link.
After downloading the images provided, I organised the images in a folder for this particular exercise.
 |
Folders are created based on the date and exercise. Inside the folder, there are three main files, which are the index.html, style_content.css and images. These steps are very important as they might affect whether the final outcome can be uploaded to the Internet or not.
Further planning:
Wireframing:
- include the images and steps you've done.
1. Creation of HTML Script
PDF attached is the whole script for my HTML.
HTML Script
I used the HTML validator/checker website that was provided to us to check for any major or minor errors.
 |
| HTML Validator |
2. Creation of CSS Script
I linked my CSS script to the HTML script by using an <link> element
taught to us from the videos provided for the exercise.
After linking it, I begin my styling for the layout design
CSS Script
FINAL SUBMISSION:
Netlify Link:
Exercise 04: Layout Design
REFLECTION
This reflection will be written as a whole of the exercises. These exercises given to us are great for the use of checking our knowledge progress checkpoints. However, the detachment between doing our assigned tasks with the class in itself demotivated me in learning more. Not denying that up to Exercise 04, I could say that I have a foundational knowledge of HTML. However, it is very weak as I still do not know the functions of certain commands. It is almost self-explanatory that if HTML is at that level, CSS could be just in the same position if not below that. Most of my learning is forced to be done individually outside of the classroom, using countless hours of watching youtube tutorials.
Comments
Post a Comment