Interaction Design - Project 1: Prototyping
May 24, 2024 - (Week 5 - Week 9 )
linchenyi/ 0367008
Interaction Design/Bachelor of Design in Creative Media
Project 1: Prototyping
1. INSTRUCTIONS
2.LECTURE
Week 5
This talk explores prototyping for digital resumes (CVs), focusing on how to create effective user interface (UI) design prototypes through the use of prototyping software such as Figma. Lecture contents include:
The importance of digital resumes and their role in the modern job search process.
Basic functions and usage techniques of prototyping software.
The steps to create a UI design prototype, including content preparation, layout design, visual design and organizational structure.
Week 6
This week we covered an introduction to CSS.
CSS (Cascading Style Sheets) allows you to create rules that specify how elements on a web page appear. For example, you can set the background color of a page, the font and color of a paragraph, or the style of a heading.
CSS Style Rules for HTML
1. Elements
CSS controls how HTML elements appear by applying rules to them.
CSS rules consist of two parts: a selector and a declaration.
2. Selectors
The selector tells which element the rule applies to.
For example:
css
Copy code
p {
font-family: Arial;
}
This means that all <p> elements use the Arial font.
The same rule can be applied to multiple elements if the element names are separated by commas:
css
Copy code
h1, h2, h3 {
font-family: Arial;
color: yellow;
}
This means that all <h1>, <h2>, and <h3> elements use the Arial font and the color is yellow.
3. Declarations
Declarations tell how to style the element referenced in the selector.
Declarations are inside curly braces and consist of an attribute and a value, separated by a colon.
4. Attributes and Values
Attributes specify the aspect of an element to be changed, such as color, font, width, etc.
The value specifies the setting used by the attribute. For example:
css
Copy code
color: yellow;
How to use CSS
1. <link> element
The <link> element is used in an HTML document to tell the browser where to find the CSS file.
It is an empty element that is located inside the <head> element and uses three attributes:
href: Specifies the path to the CSS file.
type: Specifies the document type, which should be text/css.
rel: Specifies the relationship between the HTML page and the linked file, and the value should be stylesheet.
Example
html
Copy code
<head>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
This indicates that the browser will load the styles.css file to style the page.
My Life html page links:
Final html code screenshot pdf:
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.
I referred to other people's resumes and color schemes
Fig 1.1 Resume, color scheme, week 5I looked at other people's resume color schemes and made the following improvements to my resume to make it more visually appealing and professional:
Choose a primary color:
I chose a primary color as the base color of my resume
Use secondary colors:
To add depth and visual appeal, I chose one or two secondary colors. These colors coordinate with the primary color and are usually used to highlight important information, such as headings, dividers, and key content.
Fig 1.2 Resume Preparation Process, week 5
Keep it simple:
I made sure the color scheme was not too complex to avoid distraction. I usually used no more than three colors: one primary color and two secondary colors to keep the overall simplicity and consistency.
Background and text contrast:
Make sure there is enough contrast between the background color and the text color to improve readability.
Fig 1.3 Resume Preparation Process, week 5
.png)
Fig 1.4 My final resume, png, week 5
6.REFLECTION
Experience
Learning HTML and CSS systematically in weekly classes has enabled me to gain a deep understanding of the process of building a website. Through hands-on and detailed explanations, I have mastered the basics and applied them in my own HTML coding.
Observation
When using Figma and Dreamweaver, I found them both very intuitive and easy to use. HTML and CSS are the cornerstones of website development. HTML is used to create the basic structure and content of a web page, while CSS is used to control the appearance and layout of a web page. Mastering these two technologies is the first step into the field of web development.
Discovery
During this project, I realized how important it is to have well-structured and semantic HTML code. Mastering HTML and CSS enhances your understanding of how a web page works. This not only helps to write better code, but also helps me find and solve web page problems faster.
评论
发表评论