Web design guidelines

[Seahorsepip Veteran]

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.

[approveme]

Thanks for these guidelines ..

[Seahorsepip Veteran]

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 ^^

[approveme]

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?