Interactive Design - Task 1 Prototype Design

Week 5-Week 6

JIN RONG / 0361701
Interactive Design / Bachelor of Design (Hons) in Creative Media
Part 1 Prototype Design – Digital Resume/CV

---

INSTRUCTIONS

---

LECTURES

Week 5

Dreamweaver：

Create a new page: File → New, if available → Link HTML.

Define/manage website: File Panel ->Manage Sites ->New Sites ->Named Sites ->Find Folder (create a new folder every time the project is launched) ->Save. Always define a website by clicking on "Manage Website"

Insert window: new paragraph, image, table, etc. "Div" is used to create a website with a layout that is universal without any content block elements in HTML files. The attributes in HTML tags have no meaning unless they contain an ID or class.

Do not use any special characters, only lowercase letters can be used when naming files.

ID and Class attributes:

ID attribute:

Each HTML has a unique ID element. One HTML tag

The ID name Class property on:

Having the same name on several HTML tags

There can be multiple class names on top, but spaces are required

Separate these name blocks and inline elements:

Block element: Some elements start the browser window from a new line. The block level elements are<h1>,<p>,<ul>,<li>

Inline element: The element is displayed on the same line as adjacent elements. The embedded elements are<b>,<i>,<em>,<a>,<img>

The display property can be changed from block to inline or inline block< Ul>is a block element that you can change to an inline element to create a navigation menu.

CSS (Cascading Style Sheet)

Allow you to create rules to specify how element content is displayed.

This defaults to a white background with black Times New Roman text. [HTML All Use<>, CSS uses {} {property: value; all style brackets

Declaration CSS rules inside

It consists of two parts: selector and declaration.

Selectors: Elements to which rules apply. For example,<p>,<h1>, # id (ID uses topic tag #),. class (class uses period.). You can group selectors. For example, h1 in a row H2 and H3 will use the same style

Declaration: Properties and values. Attributes are the rules that need to be changed (font family, font style, decoration, etc.); This value depends on the attribute (font size). The property and value must be separated by a colon and end with a semicolon. There can be multiple attributes and values in parentheses.

There are different ways to style CSS:

The first method is that the style="...">in the main body of<h1 is only applicable to this specific h1, not all other h1.

The second method is to use global styles, so the rules will control the entire document. You must type the header section. In the HEAD section,<style type="text/css"></style>

Class exercises

---

Part 1 Prototype Design – Digital Resume/CV

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.

Requirement:

Content and structure:

-Prepare a resume for your content, including personal details, education level, work experience, skills, projects, and other relevant sections.

-Decide to associate based on its importance, order of parts, and hierarchical structure.

Layout and visual design:

-Design your layout using the digital resume of the selected prototype software. Define the positions of different parts and how they will flow together.

-Use layout, color palettes, and appropriate spacing.

Department and organization:

-Organize your resume into logical sections, such as "personal information", "education", "experience", "skills", "projects", and "connections".

-Prioritize certain sections based on their relevance and importance to your position

Visual elements:

-Merge relevant images, icons, or placeholders aligned with content to enhance the visual appeal of your digital resume.

Prototype demonstration:

-The process of updating your electronic portfolio explanation and presentation tasks

Review criteria:

-The clarity and effectiveness elements of UI design, layout, and visual effects.

-Selected layout, color palette, and imaging.

EXERCISE 

I first searched for some works on the website as references.

Reference website link：https://www.pinterest.com/

I have designed three types of layout drafts

draft 1

draft 2

draft 3

I think the third draft is okay, so I chose to make the third draft

Selected colors

FINAL

FEEDBACK

Overall pretty good, there's too little information available

I reorganize my information.

FINAL