Interactive Design GCD60904/Project1

May 24, 2024 - (Week 5 - Week )

Wang Yifan/ 0368363

Interaction Design/Bachelor of Design in Creative Media

Project 1: Prototyping

INSTRUCTIONS

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.

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.

 Make a background plate week 5  (23/05/2024)

I decided to use Figma to design my digital resume. I hope my resume gives people a very comfortable and warm feeling, so I used the simple color matching of black powder.

Create a resume Week 5  (23/05/2024)

Put in the photo week(23/05/2024)

Resume preparation Week 5  (23/05/2024)

This is the complete resume I finally presented.

                                                       Resume preparation Week 5  (23/05/2024)

In class I asked Mr. Shamsul about the first edition of my digital resume and he told me that the black and white color scheme was too eye-catching and he wanted me to have a uniform color.

Class note chart Week 5 (28/05/2024)

Utilizing a black font can make the text more legible, particularly against lighter backgrounds, while increasing the size of a pink image can draw attention to key visual elements, improving the overall visual hierarchy and aiding in conveying the intended message more effectively. These modifications are effective techniques in graphic design to ensure that important information stands out and the design remains aesthetically pleasing.

 version Week 5 (28/05/2024)

                                                        Resume preparation Week 5  (23/05/2024)

I also added the corresponding box of my menu and contact to make the picture richer.

Enrich the picture

The final full version Week 5 (28/05/2024)

                                                 Resume preparation Week 5  (23/05/2024)

REFLECTION

Experience

Attending weekly classes on HTML and CSS has profoundly deepened my understanding of the intricate process of website building. Each session combines theoretical knowledge with practical hands-on activities, allowing me to gradually master the foundational elements of web development. Detailed explanations from instructors have clarified complex concepts, while real-time coding exercises have enabled me to apply these principles effectively. As a result, I have developed a strong command over HTML, confidently creating structured and functional web pages from scratch. This systematic approach has not only improved my technical skills but also boosted my confidence in tackling web development projects independently.

Observation

Throughout my experience with Figma and Dreamweaver, I have found these tools to be exceptionally intuitive and user-friendly, significantly aiding my web development process. Figma, with its robust design capabilities, facilitates the creation of visually appealing layouts, while Dreamweaver provides an integrated environment for coding and previewing web pages. Understanding the fundamental roles of HTML and CSS is critical, as HTML forms the backbone of a webpage by defining its structure and content, and CSS enhances its aesthetic appeal by controlling the layout and styling. Mastering these two technologies is essential for anyone aspiring to enter the field of web development, as they are the cornerstone upon which more advanced skills are built.

Discovery

During the course of this project, I have come to realize the paramount importance of well-structured and semantic HTML code. A clean and logical HTML structure not only makes the code more readable and maintainable but also enhances accessibility and SEO. Mastery of HTML and CSS has significantly enhanced my understanding of the inner workings of a web page, providing me with the ability to write more efficient and effective code. This proficiency has also sharpened my problem-solving skills, enabling me to swiftly identify and resolve issues within web pages. The insights gained from this project have underscored the value of good coding practices and the impact they have on the overall user experience.