Interactive Design - PROJECT 1&2: PROTOTYPE DESIGN

 18/9/2023 - 2/10/2023 / Week  1 - Week 9

Amirah Akbar Ali/ 0361001

Interactive Design / Bachelor of Design in Creative Media 

Project 1 / Prototype Design

Lecture

Week 4:

HTML (Hyper Text Markup Language) serves as the standard markup language for crafting web pages. 

HTML codes consist of both an opening and closing side. CSS (Cascading Style Sheets) is responsible for styling web pages generated from HTML.

Attributes, which consist of properties and values, play a crucial role (also known as style). Remember to include a space after one attribute to introduce another. The format is as follows: property="value".

Week 5: 

Introduction to cascading style sheet (CSS). 

Project 1

Objective: 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.

Drafting My CV:

Layout sketch wireframe:

Figure 1.1: sketch wireframe #1&2

Figure 1.2: sketch wireframe #3&4

Digitalizing Figma:

Figure 2.1: Frame layout

Sections and Organization:

Figure 2.2: Profile & Heading

Figure 2.3: About,Education & achievement content

Figure 2.4: skills content

Figure 2.5: Project & image

Final Prototype:

Figure 2.6: Final prototype

Final CV in Figma:

Figure 2.7: Project 1: Prototype Design

---

Reflection

From what i have learned,HTML and CSS for a CV prototype design is a valuable and practical way to build fundamental web development skills.No matter i had some struggles with the coding here and there but it's a great stepping stone towards more complex web projects, and the skills i have acquired are transferable to a wide range of web development and design tasks. Furthermore, i am going to keep practicing, stay up to date with industry trends, and continue the learning journey in the world of web development.