Interactive Design GCD60904/Project 1

Project 1: Prototyping

24/05/2024 -04/06/2024 (Week 4 - Week 6)

Shao Han/ 0369187

Interaction Design/Bachelor of Design in Creative Media

Project 1: Prototyping

TABLE OF CONTENTS

1. Instructions
2. Lectures
3. Exercises
4. Reflections

INSTRUCTIONS

LECTURE

WEEK 5

This talk is about making digital resumes (CVs) and how to design them well using prototype software like Figma.

Extra Markup

ID attribute

• Every HTML element can carry the ID attribute
• It is used to uniquely identify the element from other elements on the page
• It is important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique)
• Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page

Class attribute

• Every HTML element can also carry a class attribute.
• Sometimes you will want a way to identify several elements as being different from the other elements on the page
• The class attribute on any elements can share the same value or name

ID and Class attribute

• By default, using these attributes does not affect the presentation of an element.

• It will only change their appearance if there is a CSS rule that indicates it should be displayed differently

Block elements

• Some elements will always appear to start on a new line in the browser window

• It is know as block level elements

Inline elements

• Some elements will always appear to continue on the same line as their neighbouring elements

• It is know as inline elements

Introducing CSS

• CSS allows you to create rules that specify how the content of an element should appear

CSS Style Rules with HTML Elements

• CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed.

• A CSS rule contains two parts: a selector and a declaration

fig1.1 HTML Elements,Week 5 (24/5/2024)

CSS Properties Affect how Elements are Displayed

• CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value,separated by a colon.

fig1.2 CSS Properties Affect how Elements are Displayed,Week 5 (24/5/2024)

Project 1: Prototype design

Target

In the first part of the assignment, you will focus on creating a UI design prototype for your digital resume or curriculum vitae (CV) using prototyping software such as Figma. A UI design prototype will demonstrate the layout, visual elements, and user interface interactions of your digital resume.

Require

1. Content and structure

Content preparation: Include personal details, education, work experience, skills, projects and other relevant sections.

Sequence and Hierarchy: Determine the sequence and hierarchy of parts based on their importance and relevance.

2. Layout and visual design

Design Layout: Use your chosen prototyping software to define the placement of different parts and their flow.

Visual Consistency: Apply a consistent visual design using typography, color palette, and appropriate spacing.

3. Departments and Organizations

Logical Sections: Organize your resume into logical sections such as "Profile," "Education," "Experience," "Skills," "Projects," and "Contact."

Prioritize: Prioritize sections based on their relevance and importance to your target position.

4. Visual elements

Enhance visual appeal: Include relevant images, icons, or placeholders that match the content and enhance the visual appeal of your digital resume.

Research and Sketching

initial research

To get inspiration and ideas, I start by exploring Pinterest. I specifically searched for “online digital resume” and also looked at the portfolio landing page. This helps me understand current trends and best practices in digital resume design.

Key findings from Pinterest

• Clean and minimalist design: Many digital resumes feature a clean, minimalist layout that focuses on readability and simplicity.
• Use of visual elements: Use icons, images, and subtle graphics to enhance visual appeal without making the content appear overly complex.
• Consistent fonts: Consistent use of fonts helps maintain a professional and unified look.
• Color Matching: Using a limited and coordinated color palette helps create a visual design that is not distracting.
• Section Hierarchy: An effective resume clearly prioritizes sections, allowing the viewer to find key information quickly.

EXERCISE

I searched some resume templates on the website and selected two as references for the resumes I designed. Their designs are simple and clear, and they are very suitable for reference.

fig1.1 Resume Templates,Week 5 (24/5/2024)

This is a draft that I designed according to my resume, and then I will use the software to complete it.

fig1.2 Draft,Week 5 (24/5/2024)

At the same time, in order to make my resume more clear and intuitive, I went to look for some concise logos, which also added some fun to my resume.

fig1.3 Concise Logos,Week 5 (24/5/2024)

In order to ensure the uniformity of letters and icons, I set some guides and make sure that the size of the text is adjusted and the position of the icon is appropriate. I set the text size in the numerical range of 10-12 and the icon size in 10*10. Make them unified and beautiful.

fig1.4 Guides,Week 5 (24/5/2024)

Then I used several colors to fill my blank resume so that it is no longer monotonous. These colors are the main color of my resume. The main reason I choose pink is that I like pink.

fig1.5 Colors,

Week 5 (24/5/2024)

After adding the information, my resume is finished.

fig1.6 Finished,Week 5 (24/5/2024)

The teacher liked my concise design, but the sides of the page were too compact, and it was better to have the distance between 50px, so I revised my resume.

fig1.7 Proposal,Week 5 (24/5/2024)

fig1.8 Modification Process,Week 5 (24/5/2024)

I finished the final resume design.

fig1.9 Final,Week 5 (24/5/2024)

REFLECTION

Client encounter is the center of web plan. 

When planning a web page, it is vital to guarantee that the route is obvious and the data structure is sensible. Clients ought to be able to discover the data they require rapidly without having to perform complex operations or tap on numerous pages. 

I have found that by disentangling route menus and utilizing clear visual prompts, clients can browse the location more effectively. 

Visual plan not as it were decides the aesthetics of the site, but moreover influences the user's to begin with impression and passionate involvement. Choosing the correct color conspire, textual style and picture can improve the allure of the site. For case, utilizing steady colors and styles can upgrade brand acknowledgment whereas keeping the page clean and proficient. 

When designing web pages, I realized the significance of availability. You'll offer assistance clients make way better utilize of the location by adding alternative content, utilizing high-contrast color matches, and movable text style sizes. 

For the most part talking, web plan could be a multi-level prepare, which needs both imagination and innovation. Through think about and hone, I profoundly get it the significance of client involvement and visual plan.