Prototype: Constructing and Styling | 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 5. Prototype: Constructing and Styling

This article, I will list and write some important elements of HTML and CSS. There are not much to explain at this stage since the process is simply constructing a prototype according to mock-up designs.

 

Constructing Prototype with HTML

1. Preparation

Add elements/links to head

  1. important meta tags: charset, viewport, description, keywords and title
  2. link to google fonts
  3. link to jQuery
  4. link to CSS file
  5. link to JavaScript file

 

2. Construct bone structure inside body tag.

First of all, I constructed bone structure inside body tag, as according to sketches and visual designs.

structure-outline.

Click to enlarge

 

Container:

Div container is placed immediately after body tag, which holds header, main and footer tags. This tag is simply used to hold all the tags and to maintain their position.

Header

Header tag often holds a website name, a logo, links to SNS and a site navigation. In this project, header hosts only a navigation and a tab bar.

Main

Main holds 6 sections, home, about, class, testimo and contact. Main tag is used to clear the site structure and is not used to maintain style with CSS. Therefore, the website works perfectly without having main tag.

Section

Each section tag hold h1/h2/h3 headings, video and/or text contents depend on the section.

  • home: h1 site title and background video
  • about and class: h2 heading, YouTube video and text contents
  • teacher and testimo: h2 heading, YouTube video, h3 heading to state a name of a person in the video and text contents
  • contact: contact form

Footer

It consists of copyright and a link to Facebook page.

 

3. Div tags for styling purpose

op-box

maintains background video

display

gives padding to section contents

video-wrapper

maintain YouTube videos

text-wrapper

maintain text contents

div-tags

Click to enlarge

 

4. Div tags for functions

navbar

is used to create a hamburger navigation

goto-top

is used to create a scroll up button

 

Styling Prototype with CSS

CSS outlines

Reset

Typo

  • Typo General
  • Typo Portrait
  • Typo Landscape

Navigation

  • Nav General
  • Nav Portrait
  • Nav Landscape

Layout

  • Layout General
  • Layout Portrait
  • Layout Landscape

Input area

Video elements

 

0. General, Portrait and Landscape

General settings hold shareable settings for any occasions, for example;

  • h1: colour white
  • h2: uppercase

Above settings will not affected by devices, screen size or view port. These setting are shareable, so they can be set in general setting.

  • h1: position

Above setting will be different between portrait and landscape; therefore, they are set in media query.

 

1. Resetting

Resetting some elements to normalize their behaviours.

Idea was inspired by Eric Meyer’s “Reset CSS” and Nicolas Gallagher’s “Normalize.css”

Reset CSS

Normalize.css

 

2. Setting fonts

Click to enlarge

Font family

Setting font family according to mock-up designs, which were agreed by the client.

  • Poiret One: headings and submit button
  • Lato Bold: Strong
  • Lato Italic: emphasis
  • Lato Regular: the rest

 

3. Viewport Height and Viewport Width

I used viewport height (vh) and viewport width (vw) for many cases such as font size, layout, paddings. This is not always the case, but I use vh when I decide margin top/bottom, but vw is it is left/right.

 

4. Layout and positions

Header

Header position is:

  • fixed for mobiles: it stays on top page
  • absolute for PCs: is not stay top page

Sections

Min height is set to 100vh; it will give minimum 100% height and stretches if it needs more space.

Footer

Footer stays the end of the page.

 

5. Style embedded YouTube video

Ref: Pure CSS solution for embed videos with an aspect ratio of 16:9

 

Result Screenshots

Screenshot for current state of prototype.

Some videos are missing since they weren’t ready.

Footer section isn’t styled (I forgotten).

 

Prototype 1 for Mobile

proto1 mobile size

Click to see a whole page

 

Prototype 1 for PC

Proto 1 for PC

Click to see a whole page

 


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.