Visual Design | MMB Project Log 4

Web DevelopmentProject Log, Website

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

Posted by Aiko Ohakoda