The best web design is able to represent a company with images and colors inside a layout.
For this tutorial we will use Safe Ride, an non-existent company to show you how to create your own design with some basic requirements.
The main image
Choose an image related to the main topic.
- If you want to design a website about food, the picture should make you feel hungry.
- If is about video games, it should transmit action and movement.
- For corporate sites, try with successful people smiling.
The brand should be represented in essence and color.
For our sample company, a taxi on the street match perfect with the yellow logo.
The color palette
I mainly define 3 colors:
- Main color
- Secondary color
- Standout color
The colors are taken from the brand, except the last one. Use the standout color for the important elements, such as sign up buttons or featured contents.
The trend tell us a corporate site include a top horizontal menu below the phone and social network links; followed by a full width slideshow with a big main image.
Finally, a set of small blocks with small portions of text showcasing professional services.
That is a very popular layout, but not the only one; you are free to try different results playing with spacing, rows and columns.
This is how our sample layout looks. The point here is to distribute the elements in separated blocks.
If you are unsure about the layout, Zurb Foundation has a few examples that would be helpful to make a decision.
My favourite part is convert a graphic idea into code; unfortunately this is beyond the purpose of this topic.
If you would like to read posts in future about CSS, don’t hesitate to request to my twitter account. In the meanwhile you can read great documentation about CSS from the Mozilla Developer Network.