Interactive design: Project 1

23/5/2023 

ALTAIFI, LEEN MAAN A (0367698)

Bachelor of Design (Hons) in Creative Media, Taylor's University

Interactive Design

---

Table of Content

1. Lectures

2. Instructions & Tasks

        - Project 1: Wireframing

        - Project 1: Designing

        - Project 1: Prototyping

3. Reflections

---

1. Lectures

Refer to Interactive Design: Exercises

---

2. Instructions & Tasks

Module Information Booklet

---

Project 1.A

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.

Before getting right into designing, I searched for existing digital resumes to see what are the trends currently and to better understand the hierarchy of information and layout.

1. Wireframing / Lo-fi prototype Designing

The software I chose was Adobe Xd, and I first started by creating the wireframe for my digital resume. I used grids to help me lay out the overall structure. I added a header at the uppermost section of the page to navigate sections of the resume. The sections are: Profile, Skills, Projects, and Contact me.

Fig. 2.1: Wireframing Process 2

Fig. 2.0: Wireframing Process 1

Fig. 2.2: Resume Wireframe

After I was done with the wireframe, I placed down choices of the color palette and icons I will be needing for the hi-fi prototype. I also tried seeing which font would match the look and feel I have in mind and that is pleasant and easy to read to the viewer's eyes. I knew I wanted to choose a Sans Serif font for a modern look, so I searched up popular sans serif fonts used in today's websites; I ended up choosing Roboto for the font.

Fig. 2.3: Wireframing Process 3

Fig. 2.4: Choosing the Theme

2. Hi-fi Prototype Designing

I start blocking in the colors, changing the fonts, and adding icons to the hi-fi prototype using what I had prepared beforehand. Because I had already planned out the layout and the colors, it made the process much faster and easier. I imported icon PNGs from the web, but I edited the colors to match the theme of the resume.

Fig. 2.6: Hi-fi Prototype Designing Process 2

Fig. 2.5: Hi-fi Prototype Designing Process 1

I Added more icons and graphic elements such as the "skill-meter" showcasing the level I am at for each skill. And images of my previous projects to showcase my work. As well as an image at the top and bottom of the page as a background image.

Fig. 2.8: Hi-fi Prototype Designing Process 4

Fig. 2.7: Hi-fi Prototype Designing Process 3

3. Prototyping

After finishing up the designing, I move on to prototyping the interactions between the resume and the viewer/user. The first interaction is the header, which basically has hyperlinks taking you to different sections of the page so it removes unnecessary scrolling. The header is fixed when scrolling, so you can move to different sections no matter where you are in the page. 

The second interaction is the horizontal scroll to view my projects. I added this for a more modern and dynamic feature.

The third interaction is the 'submit' button; once you click submit a feedback bubble would pop up with the message "Form successfully sent!" that has an 'x' close button that will take you back to the landing page.

Fig. 2.10: Prototyping Process 2

Fig. 2.9: Prototyping Process 1

Here is a video showcasing the interactivity of the prototype and the full page.  Adobe Xd Prototype Link

---

3. Reflections

Experience

I personally really enjoyed working on this assignment, as it is closest to what my specialization is, UI/UX. I love thinking about how information should be laid out, what colors to choose, and which theme to follow. And I am especially excited for making it come alive with coding in HTML and CSS.

Observations

Before starting this assignment, I had to research existing resumes to get inspired and find references on how resumes look like today. I've made a couple of observations from my research; even in a resume there are UI/UX elements that need to be added to attract people to your resume. Like eye-catching fonts, appealing colors, good headlines...etc. I tried incorporating those in to my resume as well, but at the same time keeping it modern and minimal.

Findings

When I initially read the instructions, I thought it had to be an interactive resume with ui/ux elements, so I added those elements to the resume. In midst of adding it, I learned how to add pop up screens and navigating through the headers, but it turns out that was not needed for this project. But hey, at least I ended up learning a lot from it.

back to top

---

Links you may want to visit:

Interactive Design: Exercises
Interactive Design: Project 2
Interactive Design: Final Project 
Interactive Design: Final Compilation and Reflection