Web design is the combination of graphic design, layout, content, color, and effects which culminate to give a great user experience. As I have previously stated, I think good design involves the use of excellent graphics, fonts, color, layout, web accessibility, and design, which together give a feel of uniqueness, style, personality, and individuality. As I have articulated many times before, an exceptionally eye-catching and aesthetically pleasing page is essential in world of web development, but so is functionality. One method to make your website more visually appealing and useful is to improve the quality of the website through graphic design, layout, content, color, and effects. Here are some simple tips I have prepared to help make your website better. I hope you find them useful!
General Web Design Tips
Align your Design
If your design is not going to take the entire width of the screen, you should consider doing a screen centered design. Using left aligned designs can leave a huge space to the right side of the screen with high screen resolutions, which makes for disorganized and displeasing designs. Additionally, you can design your webpage using the Liquid design that adapts itself to the screen, making your design always appear symmetrical no matter what the resolution is.
Contrasts Between Text and Background
Always use contrast between the text and the background, in order to make your design professional and, of course, easy to read. I always like to advocate the use of a white background with dark text, but there are times when this is not feasible with the style of the design. Therefore in this case, just make sure there is a contrast between the text and the background; for example, if the background is navy blue, you should use white colored text in order to make it more legible.
Background Patterns
When employing decorated backgrounds, the background patterns should never be larger than 56×56. I recommend this because extra large patterns can take away from the integrity of your design and they are generally unnecessary. Moreover, not only do large background patterns attract the users’ eyes from the content in the page, it also adds additional loading time to our page.
Design For Higher Resolution
When preparing your page, try to design for 1024×768 screens and forget the 800×600 resolution, because 1024×768 screens or higher are the most used these days. When designing, you should generally try to think of the majority target audience, not the minority. And let’s face it, the majority of people are using the 1024×678 screens or higher.
Graphic vs Web Design
Though the words, graphic and web design, are often used interchangeable, they are not the same thing. I consider web design to be a specific sub-set of graphic design, which has its own rules and ideas. So since web design is not the same as graphic design, it is better to avoid flashy colors, because the eyes get tired faster when they are looking at very flashy colors on a computer screen. Keep it simple when designing for the web, and your viewers will appreciate it.
Layout Tips
Logo Position
Logos should generally go to the left side of the page, and sometimes to the center, but never should they go to the right side of the page or at the bottom. Even though there are successful and beautiful designed pages with this issue, it does not mean that it is right. When I design, I think of the viewer first, and remember that user’s eye scan from the top-left corner of the screen.
Menu Position
The menu should go horizontally on the top of the content and below the header or it should go vertically to the left side of the page. I have seen some interesting menus are placed over the header, but generally I do not recommend it.
Do Not Get Too Creative
Be creative with your designs; however, try to adjust it to a known CSS layout in order to have some uniformity. Creativity and originality are amazing assets, but I always suggest to not to stray too far from a typical CSS layout because it can cause difficulties in navigation and functionality. Remember that even though the creativity of your design is essential, the most important part of a website is it usability. If it is be beautiful, but not functional, it is worthless.
Do Not Overuse Images
When you are planning your layout, I recommend to not replace text with images. Some people think images are the heart of a design, and though they are important, they are not the most essential element in a page; the content is. By using text rather than unnecessary images, it will help you with accessibility, and it will allow your page to load faster. If you need a specific typographic in your design, then use sIFS.
Content Tips
Keep Content Short
Be concise with content, and say more and write less. Unless your page is a blog, people do not like reading tremendous amounts of text, so try to get to the point when writing. Also, if you need to write more than 250 words, then support it with one or two images. This is a time when the use of images are ok, in order to break up the eye from seeing a myriad of text.
Keep Content Understandable
With your diction, try to be clear and understandable, and never use strange or uncommon words. At the same time however, be original and sticky, so that your content will be embedded in the reader’s mind. Keep the content short and sweet, and it is more likely to stay with the viewer.
Divide Content
You do not need to show all content of the page at once, because that can be overwhelming to the viewer, and they will be more unlikely to read what you have written. It is much better to divide and conquer, when it comes to content. Divide the content in sections using the right white space between them, so the eye can rest between reading.
Emphasis the Importance
Use the right font style, size and location try to emphasis the most important content of the page. For example, the slogan or catch phrase for a business needs look more important; in order to catch the viewers’ eye, so make it bigger and more eye-catching to emphasis its importance.
Color Tips
Please see my two posts,“The Meaning of Colors for Designs” and “Seven Tips to Use Colors in your Site,” for a complete detailed tutorial for using color in your website.
JavaScript Effects Tips
Progressive Enhancement Or Graceful Degradation
With the increased use of JavaScript, you need to remember that not all people use a browser that allows the use of JavaScript; so you need to consider this in order to allow those users to use your site. There is a way to allow these users to view the page, and it is called using JavaScript with progressive enhancement. That means that even if your script does not work or the user disable it on purpose, your website is usable and available.
Keep User Concentrated
Do not annoy the user with more than one effect running at the same time. Remember that those effects are used to catch the eye of the viewer, not to distract them. The viewer cannot concentrate on more than one effect at a time, so you are wasting your time if you use more than one, as well as overwhelming your viewers.
Use Effects Where Necessary
Only use JavaScript effects where there are really necessary. For example, an issue that AJAX has is that when it refreshes part of the page, sometimes the user does not notice where the page was modified. A good idea is to change the element color for one second and then put it back to its original color.