Interactive Design | Project 2 : Working Web Page

25/06/2024 / Week 10

Eng Yan Ling

Bachelor's Degree in Creative Media (Hons) - (Taylor's University)

Interactive Design | Project 2 : Working Web Page

TABLE CONTENT

<span id="LIST"></span>

1. Instructions

2. Project Requirements

3. Project

4. Quick Links

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1UkhqnbQ7tgLrsvt2G92NyKarGMaPcPJm/preview" width="640" height="480" allow="autoplay"></iframe>
PROJECT REQUIREMENTS
The objective of this assignment is to transform the static prototype from Project 1 into a fully functional and interactive web page. Apply your knowledge of web layout class to create a working website that closely aligns with original prototype. Review static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype. Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify, update e-portfolio with all the processes documented in the blog, and submit the link as a submission.
PROJECT
Ideation : Project 1 Blog
Color Palette Extracted
Figure 2.1 Prototype Color Palette (Week 10, 25/06/2024)

Typography - Sans Serif Fonts
Information Hierarchy
Figure 2.2 Information Hierarchy (Week 6, 28/05/2024)

PROJECT 2 : WORKING WEB PAGE
Constructing Web Page
Fonts used : 
(Source : Google Fonts)
Heading - https://fonts.google.com/share?selection.family=Bebas+Neue|Rokkitt:ital,wght@0,100..900;1,100..900
Text - https://fonts.google.com/share?selection.family=Rokkitt:ital,wght@0,100..900;1,100..900

Figure 2.3 Navigation Bar (Week 10, 25/06/2024)

At the very top of the web consist of the navigation bar to navigate around the web, each section directs to the respective destination stated below :
1. Home - Top (Digital Animation)
2. About - About Me
3. More - Working Experience
4. Contact - Where to find me?
Hover & visited style is applied to the navigation bar and the contents are centered aligned.

Figure 2.4 Section 1 - General Info (Week 10, 25/06/2024)

The first section of the web is divided into 2 columns to maintain the idea of my prototype where display: flex is used on 2 groups of div. As shown in my prototype, all the information is insert into the web accordingly applying mostly ul/ol li. For the "skills", alternate points are divided into two classes. "light" & "dark" with different colors applied. 
Learn More redirects user to my Interactive Design Exercises blog.

Icon codes used :
1. Email - &#128231;
2. Phone - &#9742;

Information Hierarchy:
Name - <h1>
Course Name - <h2>
Section Heading - <h3>
Name of School/Work/Positions - <b>
Locations (Work, School) - <u>
Duration/Month - <i> + color
Others - <p>

Figure 2.5 Softwares <p> (Week 10, 25/06/2024)

Using the same method to create multiple columns, the "softwares" applies display: flex with 4 contents in row/class. Image are inserted and the padding/margin are adjusted to the suitable size. This class group is classified under a separate group from Section 1&2 as the style that applies will not accommodate the desired outcome for "softwares".

Figure 2.6 Language Proficiency (Week 10, 25/06/2024)

Language Proficiency with display: flex applied. The reason behind a different display of the language proficiency is due to the limited knowledge I have obtained throughout this module and to accommodate a similar style, each language with its contents are center-aligned and spaced-evenly. Paddings are adjusted to ensure a suitable and neat outcome of the language proficiency.

Information Hierarchy:
Heading - <h3>
Language - <h4>
Text - <p>
Figure 2.7 Section 2 - Continued list of Section 1 (Week 10, 25/06/2024)

Section 2 is a continued section of Section 1 with more information such as certificates & volunteering information.

Information Hierarchy:
Section Heading - <h3>
Year - <h4>
Name of Awards/Certificate/Volunteering - <b>
Duration/Month - <i> + color

Figure 2.8 Form (Week 10, 25/06/2024)

Before the footer section, I have also included a form for users to drop a message along with their name and email address. All items in the form are center-aligned.

Figure 2.9 Contact (Week 10, 25/06/2024)

In the footer section of my web page consists of  2 parts that are center-aligned.
1. Where to find me?/Contact
2. Copyright Information (Code - &#169;)

Contact consist of my social media & interactive design labels to my blogs with an image above to make the section more interesting than just plain text.

Information Hierarchy:
Heading - <h3>
Text - <p>

Preview

Figure 2.10 Ipad vs Mobile Preview (Week 10, 25/06/2024)

FINAL PROJECT 2 SUBMISSION
Netlify Link :

Overview of Working Web Page

Figure 2.11 FINAL WEB PAGE OVERVIEW (Week 10, 25/06/2024)
QUICK LINKS
Blogs

Exercises : Click Here
Project 1 : Click Here
Final Project : Click Here

Comments

Post a Comment

Popular posts from this blog

Information Design / Final Project

Image
  03/03/2025 - 17/03/2024 / Week 5 - Week 7 Eng Yan Ling Bachelor's Degree in Creative Media (Hons) - (Taylor's University) Information Design / Final Project TABLE CONTENT <span id="LIST"></span> 1.  MIB 2. Progress     2.1 FLIP Presentation     2.2 Infographic Animation 3. Feedback 4. Reflection 5. Quick Links MIB PROGRESSION FLIP PRESENTATION Project Requirements TIME FRAME:  WEEK 01 - WEEK 07 DEADLINE:  WEEK 07 INSTRUCTION: Based on FLIP group topic research, produce a basic video animation. DESCRIPTION:  Using a processed design framework, you will now produce an infographic report to present the given information to a ‘target audience’ with the purpose of: 1. Creating awareness (such as Global Warming, Recycle, etc.) 2. Explaining a process (such as "how to" video) 3. Defining a concept (such as "What is Fast Fashion", "What is Color Wheel", etc.) Any time based media and softw...
Read more

Information Design / Exercises

Image
03/02/2025 - 03/03/2024 / Week 1 - Week 5 Eng Yan Ling Bachelor's Degree in Creative Media (Hons) - (Taylor's University) Information Design / Exercises TABLE CONTENT <span id="LIST"></span> 1.  MIB 2.  Lecture 3.  Exercise     3.1 Exercise 1 : Quantifiable Information     3.2 Exercise 2 : L.A.T.C.H Infographic Poster 4. Feedback 5. Reflection 6. Quick Links MIB LECTURE W1 - 10/02/2025 L.A.T.C.H Theory List of Infographic informational - written list info, numbering - data → visualize info a visual cannot entirely convey its message statistical infographic pie chart, bar graph, etc how to deliver message/set of info to your audience? how-to infographic step-by-step process timeline infographic movement from one point to another numbering → organic/linear/circular? comparison infographic map/location infographic flowchart infographic sequence of different step and action planning ...
Read more

Sonic Design / Exercises (Audio Fundamentals)

Image
21/04/2025 -  xx/05/25 / Week 1 - Week x Eng Yan Ling Bachelor's Degree in Creative Media (Hons) - (Taylor's University) Sonic Design / Exercises (Audio Fundamentals) TABLE CONTENT <span id="LIST"></span> 1.  Instructions 2.  Lecture 3.  Exercises     3.1 Exercise 1     3.2 Exercise 2     3.3 Exercise 3     3.4 Exercise 4 4.  Feedback 5.  Quick Links INSTRUCTION LECTURE Week 1 - 21/04/2025 Week 1 : Sound Fundamentals Reflection : Reflecting on the lecture videos from this week, I have learned and gain a solid understanding on the fundamentals in sound design in terms of its terminologies, transmission and how we process and identify sound from production to propagation to perception. Besides that, I have also learned the properties of sound in identifying its frequency/pitch, loudness, space and more. All in all, this week's lecture has opened new fields that I am...
Read more