Fie Jelved KEA Spring 15, INT. Design documentation

Design documentation

Choice of colours I have chosen to work with the colour scheme below, thorughout my entire webpage. And then black for the fonts. The colours I find very calm, soft and warm. I associate them with the beach. I grew up close to the beach and spend all my summers by the sea in our summerhouse so the colours represent somehow me and one of my greates values in life. Colour scheme:

Sky Water Sand

Intergrating logo and profile picture I started placing my logo to the left side of the page, see sketch img. 1.3, but it didnt really work for the rest of my design, which was centered, so I decided to center the logo as well, so it would be align with the rest of the content, and not floating alone in the side of the page, I chose to make the logo black, so it would have some contrast to the rest of my content. My profile picture is aligned in center of the page, because I dont have so much content on my index page and by placing it in center, I tried to minimize the negative space by attracting the attention to the center of the page.

1.1 Logo 1.2 Profile pic 1.3 Sketch index page

Fie Jelved KEA Spring 15, INT. Design documentation

Overall visual choices Typography My choice fell on Timeless (which I am also using now), because its a very readable type and fits my personality, simpel but with a edges. Contrasts Contrasts is visible in the colour scheme. The blues are in contrast to the sandy colour. Like in my about page, the blue icons on the sandy background.

1.4 Composition Is symmetrical, all my content is in center, and follows the menu bar. My wireframes changes a bit in the RWD, as my columns drops down when using phones. Gestalt laws/visual consideration The dotted borders are visible through the entire page, to create a feeling of unity and continuity in the page. The borders are also used to create closure for the headings. As shown in image 1.3, I created icons in the same colour and with text below each icon to indicate similarity and proximity. Navigation My menu/navigation bar contains four pages to access. But if you into the about page, you can access further four pages, and I would have liked to make a submenu for the about button (note to Fie: learn how to do that)

1.5 Responsive design (RWD): My responsive design for smartphone version is mostly fluid, because most of my content scales down, but some content stays the same size and just drop down maybe I could actually discuss whether its completly mostly fluid or a mix with the column drop pattern, see img. 1.6 (next page).

Fie Jelved KEA Spring 15, INT. Design documentation

1.6