Task 1: Prototype Design

18/09/2023 - 02/10/2023 Week 4 - Week 6
Reema Arif Hamza / 0362792
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 1: Prototype Design

Content

Lectures

Week 4: Introduction to HTML
Week 5: Lecture on CSS
Week 6: Class canceled

Instructions


Task 1: Prototype Design

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.

Process

To begin with, I organized the content I needed to include in my resume. Luckily, I already had a resume to refer to which made the process smoother. I just updated it to include my most recent projects.

 Fig. 1.1 Resume Reference, Week 4 (18/09/2023)

I explored a lot of layouts through sketches but I found that the two-column layout displayed the content in the most clear and concise manner. I settled on this sketch because I felt that it would transition into a clear website.

Fig. 1.2 Website Design Sketch, Week 5 (28/09/2023)

I then began to start designing my prototype on Figma. The size is 1330 px wide and the grid is 12 columns.

Fig. 1.3 Figma 1, Week 6 (01/10/2023)

I started to lay out my text and shapes (where my images and icons would go). I decided to use Nokora as my font throughout the entire prototype. I took care to make sure the spacing as consistent overall and achieved a good cross-alignment. 

Fig. 1.4 Figma 2, Week 6 (01/10/2023)

I inserted appropriate images and icons. I used a plugin called Iconbuddy to find the email, phone, and LinkedIn icons. For the software section, I created the graphics on Canva, exported them as png's, and inserted them. I chose in color theory terms, navy blue because blue can represent trustworthiness and loyalty. I opted to make my text a blue-black color to better match.

Fig. 1.5 Figma 3, Week 6 (01/10/2023)

Final

Fig. 1.6 Prototype Design, Week 6 (02/10/2023)
Link: click here

Reflection

This assignment overall, went good for me. having had my own resume to refer to made it a smoother process. I still had the put in the work because my resume was designed for printed use but this one had to be designed as a single-page website. I put a lot of thought into the design and considered many aspects while doing so. I hope that I'll be able to create my prototype as a proper website in the second part of this assignment.


Comments

Post a Comment