• 0

Web design guidelines


Question

Here's some step by step guideline for the people who're interested.

 

When making a webdesign you start with the following questions:

  • Black or White?
  • Fixed of Fluid layout?

Here's are example answers:

  • White
  • Fixed layout

html: http://jsfiddle.net/36ewjag8/1/

 

  • Black
  • Fluid layout

html: http://jsfiddle.net/36ewjag8/3/

  • Black
  • Fixed Layout

html: http://jsfiddle.net/36ewjag8/2/

 

As you see I didn't use one color for the fixed layout examples but 2 colors, now it's slightly visible where the content starts and stops.

 

 

Now for the menubar the following question:

  • Colored or black/white?

Some examples again:

  • Colored on white bg

html: http://jsfiddle.net/36ewjag8/4/

  • Black on white bg

html: http://jsfiddle.net/36ewjag8/5/

  • Colored on black bg

html: http://jsfiddle.net/36ewjag8/6/

 

 

As seen in the example above I did not add a single border or box-shadow, personally I think those should be used with caution, not every single element in your web design needs to have a box-shadowor border or border-radius.

 

Next step is the header logo:

  • Above header

html: http://jsfiddle.net/36ewjag8/8/

  • Inside header

html: http://jsfiddle.net/36ewjag8/9/

 

 

After that I suggest to find a good looking modern user friendly font:

example with roboto: http://jsfiddle.net/36ewjag8/10/

example with open sans: http://jsfiddle.net/36ewjag8/11/

 

Here's a example of a white fixed 1280px layout mockup of HaggleHive: http://jsfiddle.net/36ewjag8/15/embedded/result/

 

These design example are just a few of the designs that can be made while staying user friendly. Most important is the correct use of high contrast and low contrast in a design and the use of not too much colors, it's better to have one main color and a few different color tones then a lot of different colors.

 

Also the use of vivid colors colors is a good idea but also something that should be done with caution, if there's no need to color a title or a paragraph of text it might be better to use a tint of gray instead.

  • Like 2
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Thanks for these guidelines ..

I just made these basic design guidelines as a suggestion for the people who didn't know where to start when making a web design ^^

Link to comment
Share on other sites

  • 0

I just made these basic design guidelines as a suggestion for the people who didn't know where to start when making a web design ^^

Yes, these basic design guidelines for people who don't know where to start when making a web design?

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.