Interactive Design: Project 1
14/5/2024 - 28/5/2024 (Week 4 - Week 6)
Lim Yu Xuen / 0359676
Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University
Project 1: Prototype Design
TABLE OF CONTENTS
✿ Lectures
✿ Project 1: Prototype Design
INSTRUCTIONS
Find out other information about this module below
Figure 1.1 Module Information
LECTURES
Week 1 to Week 6 Lectures (refer to
Exercises / Lectures)
PROJECT 1: PROTOTYPE DESIGN
Task Requirements
- We were tasked to create a UI design prototype for our digital resume or curriculum vitae (CV) using prototyping softwares such as Adobe XD or Figma. The UI design prototype will showcase the layout, visual elements, and user interface interactions.
- Prepare resume content, deciding on the order of sections based on important, and designing the layout using prototyping software with a consistent visual style.
- Organise the resume into sections like "Profile", "Education", "Experience", "Skills", "Projects", and "Contact", prioritising relevance.
- Incorporate visual elements like images and icons.
- Update e-portfolio to showcase and explain the process
Research and Wireframe:
During my research, I looked through Pinterest for inspiration. The keyword
was resume designs. Some of the designs that attracted me will be attached
below.
Figure 2.1.1 Inspo 1,
Source
Figure 2.1.2 Inspo 2,
Source
After researching for inspiration, I began my project by creating a
wireframe by using boxes and eclipse to structure and layout my resume. I
took a screenshot of the outlines and attached it below.
Figure 2.1.3 Wireframe Design
Designing Process:
#1 Content and Structure:
The content used in my design will be organised into 5 sections:
Introduction: A brief hello, and short sentences that represents my
persona
Contact: Includes email, phone number, blogger link, and social
links
Education: Academic background with timeline
Experience: Work history and job roles related to design
Expertise: List of softwares I am able to use
Skills: List of my relevant skills
#2 Layout and Visual Design:
Visual Flow: The design follows a single-page scroll format,
ensuring a well-organised layout with clear texts. Icons are included to
help viewers understand certain information. Necessary borders and boxes
are used to contain information into separate sections, keeping the
page organised.
Typography: The fonts that will be used are Inter, and League
Script. League Script is used for the introduction's heading (hello), and
Inter will be used for body texts.
Figure 2.2.1 Fonts
Colour Palette: To keep my portfolio simple and soothing to the
eyes in a attractive way, I decided to go for pastel colours.
Figure 2.2.2 Colour Palette
#3 Sections and Organisations:
I organised and divided the structure into 2 main sections to guide
viewers from personal information to professional skills:
- Profile and Contact: Includes a photo of myself, and contact details.
- Education and Expertise: Academic background and softwares I use.
- Experience and Skills: Work history with timeline, and skillset.
Figure 2.3.1 Main Section 1
Figure 2.3.2 Main Section 2
Figure 2.3.3 Main Section 3
#4 Visual Elements:
To make my e-portfolio stand out from others, I took the tips
mentioned by my lecturer and implement ideas that could suit my
style. I wanted visual elements that sort of reminds people of the
"coding" languages. These elements include <>,</> and
so on. I learnt about this during html and css classes.
Icons are inserted using plugins, to enhance the professional look
of the resume. The plugins I have used for the icons are listed in
the figure attached below.
Figure 2.4.1 Icon Plugins
Figure 2.4.2 Icons used
One of my ideas is to make a text curve to my profile photo in
section 1. To do this, I used a plugin to curve texts according to
paths. It works by turning my texts into separate text boxes, and
placing it along the path of the circle element (profile photo).
Figure 2.4.3 Curve Text Plugins
Figure 2.4.4 Curve Text Plugin in use
Final Digital Resume
.png)
Figure 2.5.1 Final Digital Resume (PNG)
Figure 2.5.2 Final Digital Resume (Figma)
REFLECTIONS
Experience: I previously created a digital resume for myself to look
for part-time jobs, but I made room for improvement when completing this
assignment. For this project, I learnt to use the prototyping software
Figma. Figma allows me to create and organise a well-structured portfolio,
where I am allowed to use plugins and shape and text box tools, to ease the
process of completing this project.
Observation: I realised that Figma is user-friendly, and will
start using this software to complete other assignments in the future. One
thing I took note of is to design this Project 1 with the thought of
replicating the design in Project 2, which requires coding in HTML and
CSS. This limited a lot of complex design. However I was happy to receive
good feedback about my final design, as it effectively provides
information to viewers, and includes only a few elements that are harder
to code.
Findings: I found tutorials online to help me learn Figma, this
includes plugin tutorials. But, I am still struggling on the sizes of
frames, and will try to learn how to fix that for my upcoming
projects.