Interactive Design / Project 1

18/09/2023 - 02/10/2023 / Week 4 - 6

Iman binti Kamarudin / 0364014

Interactive Design / Bachelors in Design (Hons) in Creative Media

Project 1: Prototype Design

---

---

INSTRUCTIONS

First, I searched up some references on Pinterest. I looked at a few actual CV’s and then also looked at some powerpoints and web layouts to get inspiration for colour palettes as well. 

Fig 1.1 - Pinterest CV References

Then, I moved onto sketching out some layouts in Procreate. I made 5 sketches total. Once I sketched a layout I liked (#5), I went into Figma and developed my resume from there.

Fig 1.2 - Layout Sketch #1

Fig 1.3 - Layout Sketch #2

Fig 1.4 - Layout Sketch #3

Fig 1.5 - Layout Sketch #4

Fig 1.6 - Layout Sketch #5

I initially planned out each section and limited myself to just laying everything out to make sure I liked how it looked and didn’t get distracted with colours.

Fig 1.7 - Initial Opening/Profile Section

For the icons, I installed a plugin called 'iconify'. For the headings I used 'Overpass Mono' in Bold and at 48 pts, and 24 pts for dates. For body text I used 'Nunito' and in Regular and Semibold.

Fig 1.8 - Initial Education/Skills Section

For the skills section I went with a rating system using ellipses. I reused those ellipses in the experience timeline as well for a bit of consistency. I ended up removing the personal skills section as I felt it made the spacing a bit weird and it wasn't too necessary in my opinion.

Fig 1.9 - Initial Experience Section

After I made my layout referencing my sketch, I tweaked the sections to how I preferred them to look. Once I was satisfied with where everything was, I added in all my photos. 

Fig 1.10 - UI Prototype Design Compiled Progression

To get a colour palette, I went onto coolors.com to generate a palette and then changed a few to look like how I wanted. I went through a lot of colours to get to my final set. I ended up going with a off-white background colour with three secondary colours and a dark blue for main text. 

Fig 1.11 - Final Colour Palette

To make sure they had a good contrast with the white, I used a colour palette tester to make sure they weren’t too light.

Fig 1.12 - Colour Palette Tester

FINAL PROTOTYPE

Fig 2.1 - Final Figma UI Prototype Design

---

REFLECTION

My experience with this project was very positive. I enjoyed figuring out the layout and getting everything to where I wanted it to be. Figma was pretty easy to use so that was an added plus. Hopefully, I am able to translate this into the next project smoothly. 

I've observed that it really is interesting to see how many different ways you can create a resume and that even by just changing a minor detail such as the colours can affect the whole tone. I really loved looking for references and inspiration and seeing so many ways to communicate the same information in a different layout.

I've found that Figma is very similar to Illustrator in some aspects. I really look forward to learning more things about it and evolving skills in creating UI prototypes and designs.