Theme 06 - Exam Portfolio
This exam is about showing what I learned so far and combining it into a website that explains my learning curve. I wanted the website to be simple and easy to understand so that the user can easily navigate through it.
It was important for me to follow the steps I learned from previous assignments, therefore I started brainstorming on how I wanted the website to look. I had many different style ideas, but went with a simple minimalistic design. I found inspiration online and loved the idea of a picture that fades out and takes up the screen. This made the background a nice gray/beige color. I combined the design with a brown color that is taken from my hair color from the picture which makes a beautiful composition. To make sure I have a consistent look I created a style tile and for the layout of the website I created a wireframe.
I also did some tests on the impressions of the website. For instance I made a trunk test to make sure my layout works, and a 5 second test to get to know the first impression the user will have. This test showed a lot of positive response on the design being ‘calm’, ‘simple’ and 'minimalistic' which was intended. But I also got some constructive feedback from other tests, which forced me to make a decision. My text is built up by the design where everything that is clickable will change color when hovering, for the user to know that it is interactive. But I also have colored keywords in my design. This calls to action for the user even though they can not be clicked. I choose to have these colored keywords because I want it to be an attention grabber, so that the user can not stop reading my text through.
I used different gestalt laws for this design: Law of proximity and similarity is used in the global navigation bar, as they look similar and are grouped together therefore they are expected to do the same thing. This also goes for the buttons on each theme site. The law of Past experience is shown when having a small screen and the burgermenu shows. Due to previous experience the user knows that this icon means that a navigation bar will show when clicking.
The front page is also built up by the golden ratio, as the eyes are drawn to the picture of me - the creator and to the text that describes what this page is about.
Talking about contrasts: I choose the text ‘This is my portfolio’ To be a big font size, because I want the user to know straight away what this page is about.
I positioned the texts so that it created an invisible line to the picture so the user's eyes go here.
The background is a bright beige color while the text is black this ensures a good readability. While some words are in a different color to make these stand out and grab the attention.
