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


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


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


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


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.




Click to enlarge


Mock-up Designs for PCs

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


Click to enlarge

About Us


Click to enlarge


Other pages


Click to enlarge


About Aiko Ohakoda

I'm a graphic designer and front-end developer. Love kawaii stuff and yummy cakes. Can't live without coffee or soy sauce.