Wide screen comps

Homepage, Menu, Product page, Detail page


source : Behance

 

Mobile screen comps

Product page, Detail page

Source : Behance

 

Wide screen to mobile screen solutions

reading app


Source: Dribbble

 

Design applying design principles of:

 

A)Proportion


B. Balance

(symmetrical in this example)

C. Use of repetition

 

D. Proximity

E. Grid

F. Hierarchy

attracts attention. organizes what is important. guides the user.
Tools: size | contrast | white space | grouping | weight (bold) | boxes etc.

Some rules for typography on the web:

-Avoid too many typefaces. Three is enough for the types of text in your page (navigation, main text, and headers). You can also achieve variation with size and weight using the same font.

-Nav: avoid serif fonts (it's less legible in small sizes)

-Main text: avoid caps, and centered text (left-aligned is more legible.)

-Avoid busy and colorful images behind text

-Be aware of color contrast (color contrast test).

-Wide screen: Minimum size is 12-point. Line length : 8 words per line. max

-For mobile screen: double font size and limit to 5-6words per line

-Use white space wisely to achieve grouping

 

Wireframes

Wireframes are structures of all the elements on the website.

See: Website Wireframes.

Designing the wireframe first, helps to strategize how you will design the content on all the pages. It's also a good visual of the proportions of the comp before you add content.

Wireframes are also very useful while you are also planning how the content will translate in different devices. That's why it's very important to set up a grid that will be the underlying structure for all the pages and all the devices.

Wireframes are very minimal - they are just boxes and labels for the content so it's clear to visualize what is going to be on the pages before you add the actual content. See sample wireframes.

 

Wireframes (steps)

1)Setting up a document in inDesign.
For size of document see screen resolutions sizes [source].

2)Create grid : Set number of columns, gutter, on inDesign inside master page.

A designer follows a grid system when s/he creates a layout for a web page.

Three of the most common layouts are the one column, two column, and three column layouts.

Below are examples of one-column, two column, three-column and multi-column structures.

Examples:

 

references