Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk
Nov 28 2013
The Ten Commandments for Engaging Web Design
For expert web designers, designing for the web is not as much difficult as it is for the beginners, that’s because with the time they regularly spend on designing, they learn how to overcome the difficulties. But in case of a beginner, he is often confused in what to choose and what not to. For example; every new designer finds it difficult to select a color scheme for any project. With this we can easily say designing for the web is deceptively difficult, as it involves many aspects that add value to it, and make it look pleasing that can easily strike the chords with the end users.
Before moving ahead with our subject, we would like to bring to your notice that in the web development industry, many of the web designers are self-taught, as web designing is still considered as a side subject in many institutions offering courses on designing. And the Ten Commandments we are sharing with you will help creating engaging web design and bring out the hidden designer talent in every reader.
In addition to this, we would like to thank and congratulate the brain behind websites like TeamTreehouse.com (a venture of Treehouse Island Inc.) and TutsPlus.com (a venture of Envato), for providing the upcoming breed of web designers with a fantastic platform where they can easily learn more about web designing via in-depth tutorials that are not only meant for beginners, but also for intermediate and experts.
1. The Priority
A good web design is something that is made keeping the priorities in mind. In web designing the top most priority is the end user. Having said that, we mean that you should always try and design for the web as an end user where you can judge the design as a critic or as a praiser. But the key here is to start with a neutral stance at first. Depending on your own judgment as an end user you will be able to come up with a few more ideas than you may have in mind before you started out designing. And based on that, you can change or modify the design pretty easily. However, while making those changes (if any) you should never forget what your preferences are.
For instance, when steering his way through a good web design, the user should be able to glide his eye all over the screen from left to right, and top to bottom in a sequential manner. And your most important part of information should be present above the fold. Once you start following this pattern, you’ll be able to give the right amount of visual weightage to all the elements included in your design.
An easy example to understand how to set your priorities is the ‘Logo’. In most of the sites, the first thing you would have noticed is the Logo that is unique in itself and stands out large at the top left corner of the design. That’s because the top left corner is what the users look at first, and the logo being the most important element of any web design as it relates to the identity of a company or individual, and it also help users to identify what site they are on spontaneously.
However, the priority is not restricted to a logo, in fact, it should be applicable on your entire design, all step by step that can take the users in a sequence. In addition to this, the second most important thing to consider is that you shouldn’t follow the other designer’s style and sequence. That’s because every design is different unless it is 100% copied from other site or other designer’s design. And we would advise you not to make your own designs rather than copying it from others, as only that will help you improve your creative though process which is very much required in web designing.
With the term priority what you can conclude is that what your user should be presented with, and what they see first is entirely up to you to figure out.
While designing for the web and according to your priorities, you should focus on the following:
1. Color: Using bold and subtle colors is considered as the most significant way to guide your user to important locations on your design.
2. Contrast: Using contrast colors will help you lay down different things easily, and will even make them stand out.
3. Position: It’s totally up to you to decide what and where you want your users to see. However, the best strategy to covert a visitor into a customer (if you are selling anything on site) is to keep your lead conversion elements such as an ‘Order Now’ button above the fold.
4. Design Elements: You should choose your design elements such as icons or images that help you convey your message to the visitors very wisely and they all should match with the color scheme you opt for. With a certain design elements, you can easily guide your users to look where you want them to.
5. Size: In web designing, Size matters a lot. The bigger the better. However, the size should be in proportion with all your web designing elements, and their position. For instance, suppose you want to use an image in a sidebar, so it’s obvious that you have a limited space and can’t use a large image.
Not knowing where one is or where to go can be a frustrating experience on a Web site. Even though navigation is a concept mastered by most web designers, some pretty bad examples do exist. Two aspects of navigation need to be kept in mind.Navigation – Where can you go?
When it comes to navigation, a few commonsensical rules should always be remembered. Buttons that facilitate moving around here and there on a site should be prominent and something that can be found with ease. They should ideally be present at top of the page and must be easily identified. Their look should be like navigation buttons with appropriate description. Text of a button should be clear enough to tell where it is taking you. Apart from common sense, navigation must be usable. For example, having a rollover sub-menu must ensure that a person does not lose the rollover while getting to the items of sub-menu.Similarly, for a user, change of image or color on rollover is an excellent feedback.Orientation – Where are you positioned now?
Orientation of a user can be done in a lot of ways so there isn’t any excuse of not being done. For small sites a ‘down’ version of the proper button or a big heading in your menu could be the thing. In larger sites you may use sub-headings, site map and bread crumb trails for those who are truly lost.
3. The Spacing
When you start designing for the web for the first time, every empty space looks as if it’s a waste. But it’s not like that in all cases. In fact, using proper spacing wherever required makes things more clear and understandable. Three aspects of space should be considered in web design; white space, padding, and line spacing.• White Space
When we talk about white space, it does not necessarily be white. Instead this term is just used to refer to an empty space on a specific webpage or on an entire website. Sometimes web designers also call white space as negative space. The white space provides proportion, contrast and balance to a page. Things tend to be more up market and elegant with lot of white spaces. For example, an expensive architect site almost always would consist of lot of space. Magazine advertisement layouts are good examples of effective usage of whitespace. Big brands of cars and watches have ads that incorporate lot of empty space as design element.• Padding
Generally, other elements should never be touched by text. For example, images, should not touch text, neither should tables or borders. This ‘Space’ between text and elements is called padding. Simple rule is that space should always be present. Exceptional cases include where the text is graphic or heading or some special design feature. General rule follows that space between rest of the world and text, makes it more readable and definitely pleasant.• Line Spacing
Readability of text is directly affected by the space between lines. You can spill from a line to another if space is too little while too much of space means your eye can get lost when going from one line to the next line of text. A happy medium needs to be found. ‘line-height’ selector in CSS controls line spacing. The default value usually takes very little space. In ye olde days, printers separated text lines by placing lead bars between lines. That is why, line spacing is technically termed as ‘leading’ which is pronounced as ‘ledding’.
4. Build to Design
Since web designers have adopted CSS layouts, life has become much easier, but it is still important now to think about developing a site when you are in Photoshop. Consider what can be achieved and what can’t be, different screen resolution types, technicalities involved etc.• Is it possible to do?
Is the amazing font picked by you a standard HTML font? You might possess a beautiful design which is 1100px wide and for the majority users will turn in a horizontal scroller. Knowledge what can be done and what can’t be done is important. That is why my belief lies in all the Web designers building sites though not always but sometimes.• What happens when the screen is resized?
Are repeating backgrounds needed by you? How will they function? Is the design left-aligned or centered?• Doing technically difficult things?
Things like vertical alignment are bit troublesome and best avoided sometimes even with aid of CSS positioning.• Could small modifications in your design mightily simplify how you develop it?
Changing the position of an object in a design can make a huge difference in how your CSS is being coded later. Particularly, when design elements cross a little complexity is added to the build.In a design comprising three elements, complete separation of each element from another one will lead to ease in building it. But if all the three elements overlap, build might still be easy but it would be a bit complex probably. You must strike a fine balance what small changes can simplify a build and what is it that looks good.• Could things be simplified for large sites?
Once there used to be general practice of developing own image buttons for websites.For example, developers would make a small download image for a download button.However those same developers started using CSS to develop these buttons in the last year and it has now become a general practice. Of course that means that these buttons aren’t always flexible as they might wish for, but the time saved from not making the dozens of small button images is enormous.
5. The Usability
Web design is not just about beautiful pictures. As there is lot of interaction and information that effecton a Web site, it is important for you, the designer to make provision for all of it. That means to make a usable Web site design.
Some aspects of usability have already been discussed by us – precedence, navigation and text.Following are three more crucial aspects: • Adhering to standards
If, people are not given certain things that they expect, confusion is created. Example is that of an underlined text which is expected to be a link. It is not considered a good practice of usability if done otherwise. Some conventions can be broken by you, but most part of your Web site should function according to people’s expectations.• Think about what users will actually do
To actually ‘try’ a design, a common tool used is prototyping. This is important to do as you notice when actually using a design, that small things make huge difference. An excellent example of a small decision regarding interface design that can make any user’s life difficult is an article called Never Use a Warning When You Mean Undo that ALA had a while back.• Think about user tasks
What is a user actually doing when he visits you site? Make a task list of the different tasks people might try to do on a site, how they would be achieved by them and how simple you wish to make it for users. This means that common tasks such as ‘start shopping’, ‘learn about us’ etc. are present on your homepage or it means to ensure something like presence of a search box that is always available with ease. In the end, your Web design is a people’s tool and people hate using bothersome tools!
6. The Typography
Since, text is a design’s most common element; it is no wonder that a lot of thought has been put into it. Following things should be considered:
• Font Choices: Different things are said about a design by different fonts. Some have retro look, some have modern look. Make sure you use the correct tool for the job.
• Font Sizes: It was fashionable to have really small text, years ago. But nowadays realization has dawned upon people that text is not to be just looked at but also read. Ensure that your text sizes are big enough to be read, consistent and in proportion so that sub-headings and headings stand out properly.
• Spacing: As discussed earlier, it is important to consider space between lines and distant from other objects. Spacing between letters should also be thought about though it is of less importance on Web as you do not control much.
• Line length: Even though a hard and fast rule doesn’t exist, lines of text must not be too long. Longer the lines, harder they are to read. Just like newspapers lay out texts, small columns of text work in a much better way.
• Color: A common mistake done by designers is to use low-contrast text. Even though it looks good, as per the clients’ requirements, it doesn’t read well. Therefore, color should be used cautiously.
• Paragraphing: One more mistake that is done by designers is that of justification of text in everything. It is not considered as a good practice on multiple occasions, when there is limited amount of text, the justified text creates weird gaps between auto-spaced words. This doesn’t suits your eye when reading. Hence, left-aligned is better unless the text you have is in proportion and spaces out perfectly.
7. The Consistency
Consistency is matching everything. Font choices, heading sizes, button styles, coloring, design elements, spacing, photo choices, design elements etc. All the things should be themed to bring coherency in your design between different pages and the same page.
Maintaining professionalism is keeping consistency in your design. Design inconsistencies tend to be like spelling errors in an essay. They lower quality’s perception. Keep your design consistent and push it up a notch higher. Even a bad design should be a consistent bad design.
Making early decisions and sticking to them is the key for maintaining consistency. However, in a large site, changes can take place during design process.
A right set of CSS stylesheets can help to make a consistent design. Core tags such as h1 and p should be defined to avoid remembering specific class names at all times and to match defaults properly.
8. Clarity (Sharpness)
It is very important to keep your design sharp and crisp in Web design. Clarity is all about pixels. CSS will ensure that everything is pixel perfect, but Photoshop won’t do so. A sharp design could be achieved by:
- Shape edges should be snapped to pixels. Manual cleaning up of shapes, boxes and lines might be involved in this if you are using Photoshop to create them.
- Ensure that proper anti-aliasing setting is used when text is created. I prefer using ‘Sharp’ many times.
- Borders should be clearly defined by ensuring that contrast is adjusted to high.
- Contrast can be exaggerated by slightly over-emphasizing the borders.
9. Margins and Alignment
It is important to keep things lined up in Web design in the way it is in print design. This does not mean that everything should be aligned in a straight line but rather it is important to have things on a page consistently placed with proper margins at appropriate places. Aligning makes design more digestible and ordered as well as it makes it seem more polished.
10. Testing and Feedback
Issues pertaining to a given layout and any significant problems’ insights are often provided by usability tests. Hence, every project of web design should be applied this TETO-principle.
It is a necessity to know that most decisions regarding design are local; that means analysis of a layout needs to be done from specific point of view like considering stakeholders, budget, requirements etc. and hence you cannot provide universal answer as to whether some layout is better than some other layout.
If these Ten Commandments of Web Designing prove beneficial to you, please share your experience with us, and don’t forget to share this blog post with your friends and colleagues.