INTERACTIVE DESIGN - PROJECT 2

April 24, 2024

GU QIANKUAN/ 0369385
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
PROJECT 2 : Working Webpage
Part 2: Final Design - Creating a Digital Resume/CV

Table of Content

1. LECTURES

2. INSTRUCTIONS

3. PROCESS

i. FINAL

4. FEEDBACK

5. REFLECTION

LECTURES

Display Property

Importance: Controls the layout of elements.

Default Values:

- Block: Elements start on a new line and stretch out (e.g., `<div>`).
- Inline: Elements stay within the line (e.g., `<span>`).

Customising Display:

Override default values to fit specific design needs.
Example: Making `<li>` elements inline for horizontal menus.

Other Display Types:
- Inline-block
- Flex
- Grid

Box Model in CSS

- HTML Elements as Containers: Elements like `<body>`, `<p>`, `<div>`, etc., act as containers or boxes.Layers in Box Model:

Padding: Space inside the element, around the content.
Border: Line surrounding the padding and content.
Margin: Space outside the border, separating elements.

Flexbox

Purpose: Create responsive and efficient web layouts.
Dependence: Relies on understanding the Box Model for manipulating element positioning and spacing.
Key Concepts:
- Flex Container: Parent element with display: flex.
- Flex Items: Children of the flex container.
Important Properties:
- display: flex: Establishes a flex container.
- flex-direction: Defines direction (row, column).
- justify-content: Aligns items along the main axis (start, end, center, space-between, space-around).
- align-items: Aligns items along the cross axis (stretch, center, start, end).

INSTRUCTIONS

Week 6

In the second part of the assignment, we will develop the final visual design of your digital resume or curriculum vitae (CV) from the UI design prototype created in Part 1. We will focus on refining the visual aesthetics, enhancing user interface interactions, and ensuring a polished user experience.

1. UI Design Prototype Review:

Review feedback on your initial UI design prototype and make necessary improvements.

2. Visual Design Refinement:

Finalise the visual elements, including fonts, colors, and images, to match your personal brand and resume tone.
Polish the design for a cohesive and professional look.

3. User Interface Interactions Enhancement:

Add advanced interactions like animations and smooth transitions to your UI design.
Ensure these interactions improve user engagement and provide a great user experience.

4. Technical Implementation:

Develop the final design using HTML and CSS, reflecting the refined UI design.

5. Presentation and Documentation:

Update your e-portfolio to explain and showcase the steps and processes of this task.

PROCESS

1. Initial Setup and Figma Mockup Translation

Tools Used: Figma (for mockup), VS Code (for coding), Google Fonts, Dreamweaver.
Assets: Profile image, application icons, flow image, business card image.
Objective: Convert a Figma mockup into a fully functional, responsive HTML and CSS webpage using Dreamweaver.

Translating Figma Mockup to HTML:

Extracted visual elements from the Figma mockup including layout structure, images, text content, and colour schemes.
Created an index.html file and a style.css file.

Here is the prototype I have done from Project 1:

Progression on HTML code:

Here is the outcome of the HTML code while I haven't applied any CSS code.

Outcome fro HTML code

After I finished HTML code, I proceeded with CSS code. I have inputed the box-sizing property first, along with the scrolling element and the font that I have gotten the embed code from google font.

First, I started with the navigation bar which is located at the top of the web page. I have applied what I have learned during the class, such as transition for hover effect. Throughout the class, I also learned how to locate the navigation bar always on top of the web page while I scrolling through any part of the web page.

Here is the result of the CSS code, I added the hover effect to change the colour and font size of the text, so that the text will enlarge while hover on top of it, same goes to the search button.

Here is the outcome of introduction of the web page with the background added.

I recently decided to improve the user experience of my website by adding interactive elements to the navigation bar. This update includes links to my Instagram and WhatsApp, making it easier for visitors to connect with me on these platforms. Here’s a brief overview of what I did.

HTML Structure: I started by updating the HTML structure of my

avigation bar to include new links for Instagram and WhatsApp. Here’s a snippet of the code I used:

Next, I updated the CSS to style the new links, ensuring they fit seamlessly with the existing design of the navigation bar.

Final Outcome for HTML and CSS code:

Final Outcome for Project 2: Working Web Page

Final Web Page Link: https://kuankuanresume.netlify.app/https://kuankuanresume.netlify.app/

搜索此博客

GU QIANKUAN(0369385)

INTERACTIVE DESIGN - PROJECT 2