Interactive Design - Project 1: Prototype Design

on

18/09/2023 - 02/10/2023 / Week 4 - Week 6
Joey Lok Wai San / 0350857
Interactive Design / Bachelor of Design (Hons) in Creative Media 
Project 1: Prototype Design 


TABLE OF CONTENTS


LECTURES
All lectures completed in Interactive Design - Exercises


INSTRUCTIONS

https://drive.google.com/file/d/1zzXnrHL39y2kBn-Hd5YoqvDFZwUugOXv/preview


PROJECT 1: Prototype Design

In this first part of the assignment, we will focus on creating a UI design prototype for our 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:
- Clarity and effectiveness of the UI design, layout, and visual elements.
- Appropriateness of the chosen typography, colour palette, and imagery.


Visual References 
To start this project, I first began with some research on the design of resumes and CVs, taking note of the layout, sections, content, style and visual elements.

Fig. 1.1 Visual Reference of Resumes and CVs, Week 4 (20/09/2023)

There are five key sections most commonly found in resumes: Profile with a profile image (either a section on the top or on the left), contact information, work experience, education, and skill section. The content of the resume is usually written in short sentences or in lists. Most resumes are minimalistic simple and professional in style, making it easy to read and process the information sections. The traditional colour scheme is black and white, some resumes use an additional colour. 


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.

Fig. 1.2 Content and Structure of Resume, Week 4 (20/09/2023)

I logged into Figma and displayed all the information/content required on a blank page. Adobe XD refuses to download on my laptop, so this was really a 'shoot in the dark, trust the process, and try not to screw up' feeling. To familiarise myself with the software, I randomly inserted text and shapes without following any sketch or layout.


Fig. 1.3 Information/ Content Without Design in Figma, Week 5 (25/09/2023)


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, colour palette, and appropriate spacing.

Sketches 
Before creating a digital wireframe, I did a rough sketch on a few layouts. This would give me a better idea of what I was trying to achieve before jumping into Figma and developing the idea.

Fig. 1.4 Sketches, Week 5 (26/09/2023)

Wireframe
I created 5 wireframes for the resume/ CV and included the required 6 sections for each wireframe:
1. Header section: Profile (bio, image)
2. Contact information
3. Work Experience section
4. Education section
5. Skills section
6. Projects section

             Fig. 1.5 All Wireframes, Week 5 (27/09/2023)

The wireframes I drafted below are based on the traditional resume/CV layout. For my first wireframe, I used resume samples as visual reference which is why it looks very structured and boring. To improve upon this, I mixed around each section, played around with spacing, added graphical elements, etc. That is how I ended up with wireframes #2, #3, and #4. I chose to develop wireframes #2 as it does not look too crowded, and is more balanced in terms of white space and the elements. 


Fig. 1.6 Wireframe Development #1, #2, #3, #4 (27/09/2023)

I was trying to decide whether we should design the resume/CV based on a website-style resume or around a traditional resume... I did both. The entire page followed the left alignment, lacking variation in layout. To develop from the first wireframe (wireframe #5), I separated sections of wireframe #6 into two halves, which balances out the negative space.

 
Fig. 1.7 Wireframe Development #5, #6, #7 (27/09/2023)

Fig. 1.8 Final Wireframe Prototype (28/09/2023)


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

I plan to target a UI/UX design position... because what else am I doing this degree for? The hierarchy of sections is as follows:
1) Profile
2) Experience
3) Education
4) Skills
5) Projects
6) Contact 

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

Typography
I tried using different typefaces, initially using Garamond and Times New Roman. I like the look of the serif typeface on the design, however, after some research, this is what I found:
  • Times New Roman was the resume font. However, the resume/CV is being viewed on the screen. "Serif fonts are easier to read in print, and sans-serif fonts are easier to read online" (Pelta, 2023). Since this is the case, it's better to choose a sans-serif font.

  • What font to choose?
    • Older sans serif fonts, such as Arial, Geneva and Helvetica, are adequate choices but they are not stylized.
    • Modern sans serif fonts present a clean, sophisticated look. Verdana, Calibri, Open Sans and Trebuchet look good on screen and paper (Glodz, 2020). These fonts look good when their size is reduced on a small screen and across various platforms and browsers. 
Fig. 2.1 Typefaces, Week 5 (29/09/2023)

I changed the typeface to Open Sans for both the title and the body text. Shown below are the comparisons, all fonts are in bold and set to the same point size. Verdana is thick which is beneficial for a title but is too messy to use as a body text, while Trebuchet is the opposite. Open Sans is better used as a body text with lots of information as it does not look too cramped and has a variety of options. 


Fig. 2.2 Comparison of Typefaces - Title, Week 5 (29/09/2023)


Fig. 2.3 Comparison of Typefaces - Body, Week 5 (29/09/2023)

Imagery and Icons 
The images and icons for the project should reflect the title.

The images used in the prototype are placeholders for now and used images that reflect the title. I added a "Read More" icon that would make the page interactive.


Fig. 2.4 Interactive Feature, Week 5 (30/09/2023)

The initial "Skills" progress bar was very basic and small. I wanted to add more shapes that weren't just rectangles or sharp corners. I followed a YouTube tutorial on how to create a progress ring using the ellipse shape and rounded the corners by increasing the corner radius.


Fig. 2.5 Initial Progress Bar, Week 5 (30/09/2023)


Fig. 2.6 Creating a Progress Ring, Week 5 (30/09/2023)

I also learned how to merge shapes to create new ones, which I didn't think was possible in Figma. It's essentially the same thing as how you would unite shapes in Adobe Illustrator. Click here for the tutorial.


Fig. 2.7 Merging Shapes, Week 5 (30/09/2023)

Color Pallete
For the colour palette, I a black and white traditional resume colour scheme, along with an additional colour. I did not want the colours to distract the content so I kept it as muted as possible.

Fig. 2.8 Colour Theme, Week 6 (01/10/2023)


After Feedback (Week 6) 
I sent both layouts to Mr. Shamsul for feedback. He preferred the second layout and recommended improving the layout of the "Contact" section. 

Fig. 2.9 Prototype Design - Before Feedback, Week 6 (02/10/2023)

I improved upon the feedback and tweaked a few things here and there. The main adjustment is the top section; it looked crowded with unnecessary elements, which now prioritises the content: name and picture. 

Fig. 2.10 Full Prototype Process, Week 6 (02/10/2023)


Final Prototype Design
Fig. 2.11 Final Prototype Design, Week 6 (02/10/2023)




REFERENCES

Glodz, M. (2020). Expert Opinion: What Font Should You Use on a Resume?. Resume Pilots. https://www.resumepilots.com/blogs/career-advice/best-fonts-for-resume#:~:text=While%20using%20a%20sans%20serif,or%20on%20their%20computer%20screen.

Pelta, R. (2023). Resume Fonts: The Best and Worst, Sizing, and Examples. Flexjobs. https://www.flexjobs.com/blog/post/resume-fonts-which-to-use-which-to-ditch-v2/#:~:text=Serif%20fonts%20are%20easier%20to,re%20at%20a%20job%20fair). 


FEEDBACK
WEEK 5
You need around 5 wireframes/ sketches to explore and expand from the original references. The design should not be too complicated as we will need to make a website based on this prototype in the next project. Choose the best wireframe and proceed to the final.

WEEK 6
The website layout is preferred. The 'contact' area can be improved in terms of the layout. 


REFLECTION
Experience
My experience with this project was a pretty positive one since Figma was easy to use. I enjoyed playing around with the wireframe layout and making it convenient but a not boring experience for the users. I had to keep in mind that we were going to code this later on, and would need to keep it as simple as possible or let my future self suffer. 

Observations
I observed that there are a variety of ways to design a resume/CV. You can have a wireframe that determines the layout, but minor aspects such as design principles, typography, colour, font and graphic design aspects can change the whole feel. 

Findings
I found Figma to be quite similar to Illustrator in terms of what it can produce (merging shapes, vector design, etc.), but also different as it is more catered towards UI design to develop interfaces and interactive prototypes. I look forward to learning more things about Figma for my UI/UX specialization.

Comments

Post a Comment