Interactive Design / Project 01 Prototype Design

on
15 / 05 / 2024 — 28 / 05 / 2024 (Week 04 — Week 06)

Kim Seoyoon/ 0357755

GCD 60904 / Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Project 01

Table of content



LECTURES

Week 4 / The Web and Language

Week 4 Lecture Slides

In week 4, we were taught basic knowledge of HTML language and learned about how the web works.

For in-class activity, we used text edit software on Mac to type in HTML. Before beginning, we were instructed to switch the document to a plain text on-text edit.

format >  switch to plain text > wrap to window > uncheck tick > save into html.lesson folder

<!DOCTYPE html>
<html></html>

Week 5 / ID and Class Attribute

Week 5 Lecture Slides

Week 6 / ID and Class Attribute

In week 6, we had a recap session of what we had done ourselves in the previous week which was to generate an HTML code to create a timetable and a contact form using Adobe Dreamweaver.

Fig 1.1 Making the timetable using HTML, Week 6

Mr Shamsul also gave us an in-class activity where we used ID and class attributes to colour the cell background in the timetable that we had created before. 


Fig 1.2 Code of class Attribute, Week 6

Fig 1.3 Code of class Attribute, Week 6


Fig 1.4 Cell background colour activity result, Week 6

Week 7 / CSS Selector


Week 7 Slides

INSTRUCTIONS

Module Information Booklet

PROJECT 01

Part 1: Prototype Design — Digital Resume / CV (20%)


Task Instruction 
In this first part of the assignment, we were instructed to create a UI design prototype for our digital resume/ curriculum vitae (CV) using prototyping software such as Adobe XD or Figma. 
The UI design prototype includes showcasing the layout, visual elements, and user interface interactions of my digital resume. 


Evaluation Criteria:
  • Clarity and effectiveness of the UI design, layout, and visual elements.
  • Appropriateness of the chosen typography, colour palette, and imagery

1. Content and Structure
To begin with the project, I sorted out my content information into the given sections according to the hierarchy based on its importance:
  • Personal details 
  • Education
  • Personal Skills
  • Technical Skills (Adobe Creative tools)
  • Projects
  • Other (Contacts/ links)

2. Layout and Visual Design
Before creating my CV, I sketched out several drafts of overall layouts.


Fig 1.1 Finalized Layouts, Week 5

I decided to go with layout #5 and further refined the layout details on Adobe XD.

For colour schemes, I mainly used the colour blue as my text information. Below is my colour scheme chart with its hex code.

Fig 2.1 Finalized Layouts, Week 5



3. Designing on Adobe XD
I used Adobe XD to digitize the chosen sketch that I picked. 


Fig 3.1 Finalized Layouts, Week 5


4. Prototyping on Adobe XD
After designing the layout with detailed information according to each section, I moved onto the prototyping stage where I added some transitions and links to each button and necessary sections.


Fig 4.1  Prototyping, Week 5


Final Outcome of CV

Fig 5.1  Final CV Layout Design, Week 6


FEEDBACK

Week 04

Specific Feedback: Do not bold headings when typing in HTML as headings are already bold.

Use lowercase when naming files in HTML.

Each attribute needs to be separated with space.

Comments

Post a Comment