Interactive Design // Project 2
03/04/2023 - // Week 1 - Week 14
Hasnol Rafiq Bin Hasnol Raduan / 0356767
Information Design / Bachelor of Design (Hons) in Creative Media / Taylor's Design School
Information Design / Bachelor of Design (Hons) in Creative Media / Taylor's Design School
INSTRUCTIONS
Task:
Our objective for this assignment is to transform our static prototype from
Project 1 into a fully functional and interactive web page. We will apply our
knowledge of web layout class to create a working website that closely aligns
with our original prototype.
Redesign:
Figure 1 - Redesign of Project 1
Audience was one of the primary factors that influenced my decision to
redesign my automobile website. Initially, I envisioned my website as a
complement to the original Lingscar.com, with a focus on flamboyant colors and
whimsical elements. Upon further consideration, I realized that my true target
audience consisted of car enthusiasts, automotive professionals, and
prospective purchasers seeking accurate and current information. It became
clear that a more sophisticated and professional design would resound with
this audience more effectively.
Effective web design is centered around the user experience. I realized that
the bright and childlike design, while visually enticing, was not conducive to
a seamless browsing experience. By adopting a more professional and
streamlined appearance, I intended to streamline the user experience, improve
legibility, and provide a clear information hierarchy. In the end, this would
make it simpler for visitors to locate relevant content and experience a more
engaging interaction with the website.
Coding:
 |
| Figure 2 - Header |
The specified code begins with the HTML document's standard structure. It contains a doctype declaration (<!DOCTYPE html>) and an initial <html> element, which designates English as the document's language.
In the head> section, external resources and metadata are defined. The following set of <link> tags pertain to importing external typefaces using Google typefaces. These identifiers initiate a connection to the font server and link to the selected font families, "Righteous" and "Oswald." The imported fonts will be utilized in the CSS styles that follow. Moving on to the <style> section, the code defines several CSS principles that influence the visual aspect of the webpage.
Figure 3 - Style.css
 |
| Figure 4 - Body |
The <header> tag identifies the header section comprising brand elements and primary navigation. The code includes an anchor element and heading level 1 for the website's interactive logo, with the andor class applied for potential formatting effects. The <nav> element defines the navigation menu's container, whereas the <ul> tag with the damn class represents an unordered list that can be designed or customized using CSS. The navigation links for the "ABOUT" and "CONTACT US" pages are composed of <a>, <div>, and <li> elements with the appropriate classes for formatting. Moreover, social media icons for Twitter and Facebook are embedded using the <img> element with the appropriate classes. The conclusion emphasizes the significance of understanding and experimenting with HTML and CSS in order to create visually enticing headings that align with design objectives, enhance usability, and establish a strong brand.
 |
| Figure 5 - Section |
The <section> element for designating the section, the div> container, image embedding, the construction of horizontal lines, paragraphs for essential information and testimonials, and navigation controls. By comprehending the HTML elements and classes used in this code, UI/UX students can structure and present website content effectively. Additionally, they can employ CSS properties to modify the section's appearance and improve the overall user experience.
 |
| Figure 6 - <br> |
The HTML tag br> represents a line break. It is a self-closing tag, so no closing tag is necessary. br> creates a line break or a new line within the content when used in HTML code. It is commonly used to force content onto a new line by vertically separating text or elements.
 |
| Figure 7 - Final Webpage (https://hasnolrafiq-0356767-project2.netlify.app/) |
This project gave me the opportunity to utilise my knowledge of HTML and CSS to create a visually enticing and user-friendly website. By analysing the code and design decisions, I have gained a greater appreciation for the significance of structure, aesthetics, and user experience in web design. It has given me a solid foundation in web design and piqued my interest in exploring further. I'm eager to continue refining my web design skills, experimenting with new techniques, and stretching the limits of what I can create.
As I continue to learn and develop as a web designer, I look forward to investigating more advanced techniques and incorporating additional technologies to create websites that are even more engaging and interactive.
.jpg)
Comments
Post a Comment