Interactive Design - Project 1

14/5/2024-  28/5/2023（week5-week6）

Yang Jiayi/0369288

Interactive Design / Bachelor of Design (Honours) in Creative Media       

Project 1：Prototyping

---

TABLE OF CONTENTS

1. Instructions

2.  Lectures

3. Exercises

4. Feedback

5. Reflection

---

1. Instructions

---

2.  Lectures

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

• Eg: you might want to assign one paragraph within the page a different style from all of the other paragraphs

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

Block elements

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

• It is know as block level elements

• Example: <h1>, <p>, <ul> and <li>

Inline elements

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

• It is know as inline elements

• Example: <b>, <i>, <em>, <a> and <img>

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

  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 CSS

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

CSS Color

• Set Background color on text

• Set color on text

• Set border color

CSS Background

• Set background color

• Set background image

• Set background repeat

• Set background attachment

• Background shorthand

CSS Text Formatting

• Text Color

• Text Alignment

• Text Decoration

• Text Transformation

• Text Spacing

• text-indent

• letter-spacing

• word-spacing

• Text Shadow

CSS Fonts

• Best Web Safe Fonts for HTML and CSS

• The following list are the best web safe fonts for HTML and CSS:

• Arial (sans-serif)

• Verdana (sans-serif)

• Tahoma (sans-serif)

• Trebuchet MS (sans-serif)

• Times New Roman (serif)

• Georgia (serif)

• Garamond (serif)

• Courier New (monospace)

• Brush Script MT (cursive)

---

3. Exercises

In this 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 Adobe XD or Figma. The UI design prototype will showcase the layout, visual elements, and user interface interactions of your digital resume.

Requirements:

1. Content and Structure:

• Prepare the content for your resume,
  including personal details, education, work experience, skills,
  projects, and other relevant sections.
• Decide on the order and hierarchy of
  sections based on their importance and relevance.

2. Layout and Visual Design:

• Design the layout of your digital resume using the chosen prototyping software. Define the placement of different sections and how they will flow together.
• Apply a consistent visual design using typography, color palette, and appropriate spacing.

3. Sections and Organization:

• Organize your resume into logical sections, such as "Profile," "Education," "Experience," "Skills," "Projects," and "Contact."
• Prioritize sections based on their relevance and significance to the position you're targeting

4. Visual Elements:

• Incorporate relevant images, icons, or placeholders that align with the content and enhance the visual appeal of your digital resume.

5. Prototype Presentation:

• Update your e-portfolio explaining and showcasing the processes of the task

Evaluation Criteria:

Your UI design prototype assignment will be evaluated based on the following criteria:

• Clarity and effectiveness of the UI design, layout, and visual elements.
• Appropriateness of the chosen typography, color palette, and imagery.

This is my first time using Figma. I looked for a resume template online. Here is a reference to the template I was looking for. It will give me some inspiration.

fig1.3 Resume reference

fig1.4 Resume reference

I start a draft

fig1.5 resume draft

In order to enhance the aesthetics of the resume, I found small icons on alibabaicon to enhance the visual appeal of the digital resume.

fig1.6 Visual Elements

By establishing reference lines to ensure that the icons are in one column, I usually size the icons to 30×30, but I need to zoom out to see the overall effect. Even at this size, some icons will look larger than others, so I Manually reduce the size appropriately.

fig1.7 reference line

fig1.8 overall effect

The effect I wanted was gentle and cute, so I chose warm pink as the main color.

fig1.9 my main color

fig2.0 Resume final design

---

4.Feedback

The teacher gave me feedback that I looked good overall, but the font I chose looked too childish and did not look very serious. Because the resume should follow simplicity and look formal, so I wanted to change my overall font. , and added some content. It seems that the blank space cannot be too large.