wireframesnavigationcoloursreadme.md

Michael Dijk

Personal Portfolio site

Index:

• Wireframes
• Navigation
• Colours used

Wireframes

For wireframes, we used the software Balsamiq, to create the mock-ups. See the images below for each section:

• Intro / Main section

  • Mobile:

  

  • Desktop:

  

• About section

  • Mobile:

  

  • Desktop:

  

• Portfolio section

  • Mobile:

  

  • Desktop:

  

• Process section

  • Mobile:

  

  • Desktop:

  

• Contact section

  • Mobile:

  

  • Desktop:

  

Navigation

The website will focus on a tree structure, going from top to bottom, starting with into/main section, which then links into the about section. From the about section, you will have several options, besides using the “menu”. In the about section, there is an option to:

• Download resume
• Go direct to the contact section, to seek contact with myself, for either project work, or recruiters wanting to contact me.

Scrolling down, from the about section, you will enter the portfolio / project section. And after the portfolio / project section, you will then continue onwards to my process section, describing how I go about taking on clients, work, and my 4 step process described.

Lastly, the contact section is the last section that we have, where the visitor, potential client, or, recruiter can get in touch with me.

Paired with the contact section, in the footer itself, we also have my phone number for direct contact, and my email address, in case they want to contact me through their email client.

Colours used

Colours are a difficult subject for myself, as I am colour-blind. Therefore, I choose the right colours with the help of two different websites:

• Coolors
• User way Contrast Checker

I used coolors.co to allow me to find the right ratio’s / mix of colours, and this linked in with the contrast checker, I discovered the following:

For the intro and footer section:

• Background colour: #6b705c
• Text: #ffffff

Ratio’s according to userway’s checker:

First section colour:

• Background colour: #b7b7a4
• Text: #000000

Ratio’s according to userway’s checker:

Second section colour:

• Background colour: #ddbea9
• Text: #000000

Ratio’s according to userway’s checker:

Third section colour, we use the same colour as for the first section colour. And for the fourth section colour we went again with the same colour used for the second section.

The buttons and background for additional sections are set to the same colours we used for the footer / header, but instead of white text, we used black text, when hovering over the links/buttons, the text turns white, with some shadow behind the link/buttons.

The ratio for these mixes of colours is as followed: For black text and dark background:

For white text and dark background: