LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / INTERACTIVE DESIGN
Exercises: HTML Document Development & HTML, CSS Document Development, CSS Layout Model
Our task is to evaluate two websites and identify areas of improvement based on the link given by Mr. Shamsul Hamimi. We were required to create a short report, limited to 500 words, and include screenshots of different website sections for explanation. This report summarizes our findings and recommendations using Google Slides.
I chose websites from different categories to explore their varied purposes and user engagement strategies, allowing me to have a better understanding of web design.
Website 01 Progress
https://www.oceanhealthindex.org/?authuser=0
The website dimensions are 1899px in width and 2860px in height. For
font selection, I selected Arial Bold, Black, and Regular, as I found that
Arial's characteristics closely matched the font used in the existing website.
As I couldn't find the logo in white, I utilized the shape tool in Illustrator
to recreate it, mirroring the appearance of the original logo. Besides, I
placed the full-size screenshot of the chosen website next to the artboard I
used so that it was easier for me to analyze and replicate. This also allowed
for a more convenient comparison of layout, fonts, font sizes, and colors.
Figure 1.1, 1.2, 1.3 Progress screenshot.
Compare
|
| Figure 2.1 Final replication 01- compare. |
Screen's Viewport
Figure 2.2, 2.3 Final replication 01- screen viewport.
|
| Figure 2.4 Final replication 01- fullscreen. |
Website 02 Progress
https://banditrunning.com/
The website's dimensions are 1899px in width and 4321px in height. I
utilized Bricolage Grotesque Regular and Medium fonts for text, as they
closely resembled the font used in the existing website. However, for
numbers, I chose the Acumin Variable Concept Medium and Regular fonts due
to the distinct differences between Bricolage Grotesque and the original
page's number font. To facilitate the analysis and replication process, I
placed the full-size screenshot of the chosen website alongside the
artboard I used.
Figure 3.1, 3.2 Progress screenshot.
Final Web Replication 02
Compare
|
| Figure 4.1 Final replication 02- compare. |
Screen's Viewport
Figure 4.2, 4.3, 4.4, 4.5 Final replication 02- screen viewport.
|
| Figure 4.6 Final replication 02- fullscreen. |
I've decided to select the Italian Meatballs recipe for my recipe card design. To begin, I've created a dedicated folder on my laptop and initiated the process by generating a new file in Adobe Dreamweaver, which I saved as 'index.html.' Following that, I created a separate CSS file, saving it as 'style.css,' and subsequently linked the 'style.css' file to the 'index.html' file I created earlier.
|
| Figure 5.1 Progress screenshot. |
|
| Figure 5.2 Progress screenshot. |
|
| Figure 5.3 Progress screenshot. |
I also carefully deliberated on the color scheme I wished to employ in the design of this recipe card. Ultimately, I opted for a monochromatic palette centered around a rich maroon color, complemented by a background hue resembling floral white. This particular color scheme was discovered on Colorhunt, and I made some adjustments based on my design preferences.
|
| Figure 5.4 Progress screenshot. |
As I'm not highly experienced with HTML and CSS coding, I turned to Google whenever I encountered challenges during the design process. Additionally, I sought assistance from my brother to teach me some specific code elements that were essential for achieving the desired webpage design within the scope of my abilities. Rather than taking shortcuts or resorting to copying, I viewed this assistance as a way to enhance my coding skills and gain a deeper understanding of HTML and CSS."
|
| Figure 5.5 Progress screenshot. |
Attempt 01
https://liewxiaohui-ex3-recipecard.netlify.app/
 |
| Figure 5.6 Attempt 01. |
https://liewxiaohui-ex3recipecard.netlify.app/
 |
| Figure 6.0 Final recipe card. |
Week 07
Mr. Shamsul Hamimi commented on the overall design of the recipe card. He noted that the color scheme, font family, and font size were all well-executed and aligned with the design. However, he suggested removing the navigation bar, as it wasn't necessary for a recipe card. I took this feedback into account and made the appropriate changes to enhance the design.
REFLECTIONS
Throughout these three exercises, I've experienced significant growth in my understanding of website structure and design skills. Using Adobe Illustrator to replicate websites has provided me with valuable insights into web design. Additionally, I've acquired new skills in using HTML and CSS code to create and style websites, which was a completely new experience for me.
While I've made progress, I recognize the need for more practice to become truly proficient in HTML and CSS. Currently, I often refer back to my notes to refresh my memory on various code elements. HTML and CSS present a challenge due to the multitude of elements that require understanding and memorization. Nevertheless, I'm committed to improving my skills in these areas through continued practice and learning.
Comments
Post a Comment