Design Documentation | Portfolio 2017

Front-end Development, UX UI Design

This is a design documentation for my portfolio project written in 2017.

Design methods

A lot of portfolio websites use grid layout since it is easier to make the website responsive. The websites that use interesting layout and design on the other hand are often not responsive. This brought me an idea to create a responsive website with interesting design.

To design interesting website, I used three design methods such as emphasis, asymmetry and simplicity.

Emphasis can draw viewer’s attention and make them to focus on the contents. Asymmetry creates dynamism and design becomes more active and interesting. Simplicity can increase impact of these effect that are created by emphasis and asymmetry.

My intention is to develop a website that can keep viewers to focus on the contents.

Inspirations and decisions

Mood Board

The image below is a mood board that inspired my overall design directions such as colours, use of fonts and layout. I selected some elements such as colour selections, typography and composition from mood board and used to develop my portfolio.

Click to See Mood Board

Colours

I selected slightly greenish beige named as “natural” as a base colour and yellow for a flash colour.


Image: Colour theme

Fonts

Original+Surfer:

This is a script font which is classified as display font by google font. I like its cuteness and activeness. I used it for headlines.

McLaren:

This is also a script type but less playful than Original+Surfer. I thought its readability is good enough for a user to read main text.

Layout

The portfolio is a single page website, which has a fixed left side bar for navigation and link to SNS and a mascot with a greeting dialogue.

This changes its form depending on the media window size. Mobile landscape has a minified sidebar while mobile portrait has a top bar. A greeting mascot appears on only large media.

Top page

The texts fade in for the first arrival to the page.

It displays my motto “Design with love” as h2 in a central location of the main contents area. H2 is larger than h1 for the design purpose, however, from the data aspect, h1 tag has more importance than h2. Because of that, I stated Aiko’s portfolio with h1 tag.

A mascot is displayed in background repeatedly in contrast of next two pages that display a large single mascot. Images are white coloured, which can stay quiet in a background colour, to avoid distractions.   

The mascot I use on the portfolio (and often on SNS profile) was designed for Line stamp. It is a mixed creature of cat and dog.


Image: Top page screenshot

Skills & experience page

Skills and experience pages were inspired by Robby’s portfolio.

Robby visualized proficiency by placing numbers of animated fishes.

I used heart marks to visualise my proficiency. The display is rather static compared to Robby’s work. However, I think having one flashing heart mark within a static display emphasis its existence.

Image: screenshot for skills page

In skills page, the mascot is placed right bottom, which points at the lists. The mascot’ colour is the same as background but has brown outlines.

When a viewer scrolls down, the next mascot appears and overtakes the position.  This next mascot bows to show thankful attitude for the opportunities for my experience. 


Image: Transition between skills and experience pages

Work page

I created mock-up design for the work page because it helps me to focus on constructing the design. Some of design is different from the mock-up design because I changed some elements as a result of evaluation.

See work page: visual design

Web design and development

Image: screenshot for web design section

The design is slightly different from mock-up design such as background colour and thumbnails for the sample buttons. I changed background colour to natural to place the contents within a same board to other work samples.

Having images in these thumbnails seemed too busy, so replaced images to coloured buttons. Non-active buttons are yellow and red for the one that relates to current sample. Buttons are located asymmetrically like a graph. This decision for the buttons’ location seems to  make it interesting. If a viewer clicks a button, the related contents will fade in.

I created display monitor by HTML and CSS. I thought displaying div tags with coloured background that are right sizes should work. It worked as I imagined, but I had to understand relations between position relative and absolute.

The monitor, where displays samples, is scrollable; a user can see the whole design. I styled the scroll bar by following Agarwal’s method (Agarwal, n.d. ).

Flyer and poster design

Image: screenshot for DTP section

The concept of design for this section is dynamism.  Contents are placed on a jig zag line. This invisible line aims to direct a viewer contents to contents smoothly.

Design samples are placed on yellow circles or placed on a yellowed and circled design. Everything is flat except design samples that have shadow to stand out.

While breaking consistency (e.g. first and third samples have a front and a back designs which are displayed as opposite), design as a whole remains consistent. It is because all contents are placed on a same background colour (natural), and compositions follow the patterns (e.g. both first and third samples have the same yellow circle background).

I rotated one of coupled designs to give more movement to the layout, which is different from mock-up design.

Text size is set to 14px, which is smaller than standard size. This decision was made to emphasis the headlines to grab a viewer’s attention. The headlines are set to be larger than mock-up; this typography can effectively emphasis the text together with smatter text.  


Image: screenshot for DTP mobile size

In a smaller devices, headline and text move to below the design to save the space and maximise the size of designs

Banner design

Image: screenshot for banner section

Banners are displayed in a slider. The image stays unless a viewer clicks one of symbols (“< “or “>”) that represent back and next.

Position of these symbols were changed from mock-up to keep banner images large and avoid symbols that appear on top of a banner for smaller devices.  

Mascot design

Image: screenshot for mascot section

I used thumbnails as a clickable button for this section, because mascots are clear enough to be recognised. A display panel is set as a square since the ratio of images can be varied.

Contact page

Image: screenshot for contact page

Contact page is styled and set on the page but is not usable yet. 

Implementation

Structure for CSS is differ from the way I learnt from CI135 Web Development. I did not use Normalize CSS because I thought it was over controlling. There are also the elements that are unnecessary for my project too. Instead of having Normalize, I set a section called “reset & general setting" where I normalise the behaviour and set general styles.

CSS3

1) top page

Text contents fade in when a user arrives to the webpage. it only occurs once unless a user refreshes the page. 

2) skills and experience pages

Both pages have one flashing heart mark. This effect uses the same technique as previous fade in but occurs continuously.

JavaScript / JQuery

1) Top navigation tab open and close

Open and close navigation for smaller devices. Navigation slides down by pressing navigation symbol and slides up by pressing close symbol or one of the link from the navigation.

2) Smooth scrolling

This codes enable to scroll up and down smoothly.

3) Web samples slider

4) Banner sample slider

5) Mascot samples slider

Above these sliders are used to display sample images.

HTML validation

CSS validation

Reference for Mood board

Behance (no date) GEORGIA HAWKINS EDITS.

Caraman, S. (2013) People Avatars.

GARANCE. (no date) Notes on Fashion Week 2.

Jacob, S. (2014) What Your Graphic Design Style Secretly Reveals About You.

Maine, S. (2015) Iconic campaigns immortalised in new poster series.

M.i.h Jeans. (no date) MiH Jeans – The Original British Jeans Brand.

Pinterest (no date) Movie poster set|A Matter of Interpretation 02.

Takko Garlic Center (no date) ガリゴリ|田子町ガーリックセンター.

Posted by Aiko Ohakoda