Visual Design | Web Design Project Documentation


This is a series of web development logs for a local meditation group called Mantra Meditation. The series consists of:

  1. User research
  2. Site requirements
  3. Conceptual design
  4. Visual design
  5. Prototype: Constructing and Styling
  6. Prototype: Adding Functionality and Animation
  7. Test and evaluation

This page is documentation for 4. Visual Design

It consists of font ideas, style tiles and mock-up designs.

Link: Prototype

 

Font Ideas

logo-font-ideas

Click to enlarge

 

Gruppo and Poiret One are both decorative fonts which looks good for logos and headlines.

Open Sans and Lato are both modern sans-serif fonts which work well for any occasions. Last year, my favourite font for the main texts was Open Sans, but this year’s favourite is Lato. I use it a lot and suggest to use it a lot too.

Niconne is a handwriting type font which gives slightly playful impression.

 

Style Tiles

style-tiles

Click to enlarge

After a quick chat with the client, we selected fonts; Poiret One for headlines and Lato for the rest.

Colours were also selected according to the client’s preferences.

 

Mock-up Designs for Mobiles

Top Page and Navigation

visual-design-01

Click to enlarge

 

Top page has a hamburger menu, H1 title and a video for the background.

Navigation links will slide down when a user presses a menu. I am planning to make a whole row to be hotspot for the menu to make it easier to press.

 

About Us and Class Section

visual-design-02

Click to enlarge

 

About us has white background with a slight transparency to see the video. This is to create the connection to the top page and about us which has relations to each others (greeting and introduction).

On the other hand, class, the next section, has light green background. Class section is about displaying what they do and when the club is available to attend. For above reason, I selected light green that wakes up a user’s mind to quickly grab their attention.

 

Teacher and Testimonial

Click to enlarge

 

Class to teacher, teacher to testimonial and testimonial to contact, the background colours keep changing since they are different sections and subjects.

 

Contact

visual-design-04

Click to enlarge

 

Mock-up Designs for Mobiles

The layout for PCs is almost identical to mobile version; they are both single column since they do not have much contents. Difference between mobile version and PC version are; PC version has a horizontal navigation and a link to the top.

 

Top Page and Navigation

HOME

Click to enlarge

About Us

ABOUT

Click to enlarge

 

Other pages

4pages

Click to enlarge

 


About Aiko Ohakoda

Aiko Ohakoda is a freelance designer who loves kawaii stuff and yummy cakes. She can't live without coffee or soy sauce.