Tidal has been designing and developing for the web for over 10 years in Vancouver and we would like to share with you the fruits of our labours, so that you can avoid common website design mistakes.
We’ve learned that it is easy to design a good looking website, but it is difficult to design a good looking and user-friendly website. Thus, the first step before design is to understand who the user is and what you want the user to do on your site. Next, you can apply these tips to your web design.
Top Web Design Tips
1. Organize your content
Start off with a well defined site map and determine the volume of content you want on a web page. You can create a clear blueprint by laying out the website as a wireframe first. At this stage you can easily change pages and layouts around, avoiding costly and time-intensive changes later on. As a rule, limit web page lengths to 2 screens, if possible. Also, include a menu or a way back on every page.
2. Alignment
Readers like to scan a web page and aligning elements helps the user to visual group information and acertain their relative importance (visual heirarchy). Alignment or grouping works on any on screen elements: text, images, buttons, links, and any combination of them. Top edge and left edge are stronger than right or bottom-edge. Grids are really useful tools for web design and by applying it can create consistency throughout the website. This grouping and consistency can help the user navigate the website.
Guidelines shown on Dan-d-pak web design
3. Contrast
When you want to create visual interest or focal points on your website, apply the web design principle of contrast. Highlight images, text or links by using a different color, size, font weight (bold/strong), or other graphic design. Make the text large enough to read for your target user. When in doubt about whether or not you have emphasized the right elements, try out the squint test. Look at a web page and squint, what stands out?
4. Uniformity and Repetition
Maintaining uniformity throughout your website helps to avoid user confusion. Every web page should look like it belongs to the same site. By grouping similar information and repeating graphic elements you provide the user with predictability and navigational aids.
5. Optimization
Often overlooked but very important to consider is optimization of your design in order to minimize user frustration over slow loading websites. Try to keep your design’s page weight (number of KB) to under 200 KB. Images should be less than 100 KB and if you are aiming to reach mobile users, try to keep images under 20 KB. You can achieved this by compressing your image files. Also, avoid image based backgrounds and use CSS styling instead.
For text, it is a good rule of thumb to have no line of text exceed 650 pixels, this is to make it easier for the user to scan and easily see where the line of text begins and ends. Again, if aiming for mobile users, adapt your lengthy paragraphs to short paragraphs that utilizes bulleted lists as much as possible. For the most responsive design that can adapt to a screen size, try to keep your content to one column.
Did you enjoy this article? Once a month, you can receive a highlight of our top three articles and stay up-to-date with events from Tidal. Subscribe to our How to Succeed Online newsletter today.
« 5 Usability tips for E-commerce Websites Web Design Trends of 2012 »
Hi you shared an excellent post. Really helpful tips are here. In order to attract viewers and customers, the website should not only be unique and interesting but at the same time be professional and user friendly. Thanks for sharing valuable info.
I am very happy to read your articles it’s very useful for me,
and I am completely satisfied with your website.
All comments and articles are very useful and very good.
Your blog is very attention-grabbing. I am loving all of the in
turn you are sharing with each one!…