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.
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.
Question
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:
Here's are example answers:
html: http://jsfiddle.net/36ewjag8/1/
html: http://jsfiddle.net/36ewjag8/3/
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:
Some examples again:
html: http://jsfiddle.net/36ewjag8/4/
html: http://jsfiddle.net/36ewjag8/5/
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:
html: http://jsfiddle.net/36ewjag8/8/
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.
Link to comment
Share on other sites
3 answers to this question
Recommended Posts