Labels

Interactive Design / Project 1/Prototype Design

18/9/2023 - 2/10/2023 / Week  1 - Week 6
Janice Marie Eng Chia Hui  / 0361521
Interactive Design / Bachelor of Design in Creative Media / Taylor's University 
Project 1 / Prototype Design

Table of Content

Instructions


Project 1

To-do list for Project one :
  • Make a digital resume/CV
  • Come up with the relevant content for the CV
  • Decide on a layout and visual design(type colour and imagery)
  • Have a good organization of information in the CV
  • Have relevant visual images
Evaluation Criteria :
  • Clarity and effectiveness of the UI design, layout, and visual elements
  • Appropriateness of the chosen typography, colour palette and imagery 

Drafting the CV

Honestly, I don't know how to write a CV when I have close to no experience, so I decided to be creative and lie about the content of the CV. 

Figure 2.1 Drafting the CV in Google Docs

Looking for inspo

After drafting the CV, I went onto Pinterest to look for some insop. Here's a link to the inspo board.

Figure 2.2 CV / Resume Inspo

Sketching wireframes

After finding some CV that aesthetics and style spoke to me, I decided to sketch some wireframes. 

1st page of my wireframe, consist of 3 sketches
2nd page of my wire frame sketch, consist of 3 sketches and is very cluttered.
Figure 2.3 Wireframe sketches(30/9/23)

I didn't really like the 1st page of my sketches at all. The second page, I liked the layout, but I feel like the information was too cluttered so I went back and sketched another wireframe.

Figure 2.4 Final wireframe sketch(1/1/23)

Digitizing in Figma

After getting the sketch done, I logged into Figma and started doing the digitization. I had never used Figma before so this was really a trust the process feeling. 

Figure 2.5 Starting digitization(1/10/23)

I decided to add all the content and layout first before moving onto the colour. 

prototype one its a cv that split in half on side is my experience the other my skills
similar layout to the previous oe but i change some of the positions
i change the profile picture form a square to a circle

Figure 2.6 Prototype evolution(1/10/23)

After rereading the instructions again, I realised that we have to section-ed the information, which I still need to do. So I went back to sketching another wireframe which properly sectioned content.

After sketching out how I wanted it to look, I carried on with the digitization. For the colour palette, I used a colour contrast website to see if the colour I chose had sufficient contrast. 
>
prototype 3
prototype 5
prototype 5
Figure 2.7 Prototype 2 evolution (1/10/23)

Figure 2.8 Final prototype(1/10/23)

Figure 2.9 Colour contrast checker

However, after getting some feedback from sir, I decided to change the colour palette. This time I went to a colour palate website and chose a colour palate that I liked. Sir also mentioned reducing the white space in the prototype. 

To overcome the problem of excess white space, I made the content in the middle more spaced out. I also capitalized the main titles and made their font size bigger. After playing around with the layout a bit more I settle for something passable.

I noticed everyone was adding their e-portfolio links, so I added them too. The images used for the e-portfolio are past works. I might go back and add a footer.

Figure 2.10 Colour Palate 

Figure 2.11 Contrast check

Figure 2.12 Prototype evolution (2/10/23)

The images used in the prototype are placeholders for now. I might change it in the future. After a good night's sleep, I woke up and changed some things.

First up were the links for my portfolio. I made them distinguishable from the normal text by underlining them. That way people would know they are links. Following that, I decided to split the sections with colour instead of lines. The spread was a bit monotonous, so I decided to add some colour in the content. Finally, I added a footer at the bottom with my contact icons.

Figure 2.13 Underlined links(2/10/23)

Final Prototype

Heading 1 size : 80 px
Heading 2 size : 60 px
Subheading size : 30px
Font size : 20 px

Feedback

Week 6 
Specific Feedback: Sir said to decrease the white space and improve my colour palate for the website

Reflection

This task was a nice introduction to web layout. I realised that when trying to design a webpage, its best to keep the words at a minimum. Too much words will make it look cluttered. However, putting in a neat paragraph of words can also work nicely. This project also made me aware of how information needs to be presented on a screen. Usually when doing a cv or resume, we would do it in a portrait format. However, with this we had to make it a landscape format as that's how the screen is usually viewed.

My experience with this task was ok. Sir was quick to reply our messages whenever we has something to ask. Honestly this task really consisted of me going onto Pinterest looking for inspo on how to arrange a website. I really do not know how to. 

Comments

Post a Comment