Design Documentation | Portfolio 2017
This is a design documentation for my portfolio project written in 2017.
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
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.
I selected slightly greenish beige named as “natural” as a base colour and yellow for a flash colour.
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.
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.
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.
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.
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.
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.
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.
Web design and development
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
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.
In a smaller devices, headline and text move to below the design to save the space and maximise the size of designs
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.
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 is styled and set on the page but is not usable yet.
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.
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.
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.