in Design

Things you need to know before starting to design web interfaces

Construction and layout.

Even if someone uses an interface for the first time, certain elements can still be familiar.

Page layouts come in many guises, one column, two column, left or right sidebar, centered, liquid and more.Before any content makes it into the bare-bones of a layout, consideration needs to be given to the construction of the design and how the content needs to be presented. Without layout decided, consideration needs to be given to positioning of elements, IE header, footer, sidebar, and columns. This is dictated by the content that needs to appear within the confines of the home page.

Traditionally, headers and footers appear at the top and button of page and there is little reason to change this. And typically sidebar is placed right, less mouse travel of the majority of users.

With the layout web designer needs to think about content, as most users will read from left to right. Also, give content breathing space, make sure that content is not squeezed into small section and text is big enough to read. Try to avoid long pages as visitors will get tired of scrolling.

Navigation

Navigation is perhaps the single most important  element once users reaches their destination. Link to content should be obvious and intuitive, the users should not have to think too hard. A well thought-out navigation system will ensure that users will not get frustrated. As a general rule it should not take a user more then 3 clicks to reach the desired destination.

Placement of primary navigation elements is important; top of the page and under headers are two techniques that are currently popular. Why? Because they instantly give the user acces to site links and are always on display. Uniform positioning of navigation elements across all pages is a priority, users quickly get comfortable with patterns and placing navigation elements in different position will only irritate and confuse. Naming of links should be relevant and immediately obvious.

Colour Selection

Colour is important as it creates a mood for page. Designers need to start with a base colour and work from there. The fun start with combining colours, logos, backgrounds, text etc. Our harmonious colour palette is essential in keeping users concentrated on the page in front of them. Clashing colours will quickly deter or distract a user from venturing further. General practice for colour schemes is that it should contain two or there colours. From this colours pallet one should be the dominant colour while the remaining choices should be accents to the primary colour.

The theory of colour is a great practical guide, buy if a user is struggling for inspiration or a harmonious palette there is help online. Adobe Kuler ( kuler.adobe.com) is an online colour pallete generator. Users need to select a rule, analogous, monochromatic or custom and select from the colour wheel to instantly create a harmonious palette. Alternatively, there is an impressive collection of palettes under created an impressive collection under Created Themes to choose from. This is a quick and easy solution for the perfect colour scheme.

Missing/Broken Links

Links are an extension, and core component of the navigation system, are effectively the only passage through a website. A user will need to click a link to get to a new destination. So, the most obvious observation we can make about a hyperlink is that if is active and it directs to the correct page, then is ok.

A broken link is verry  ineffective, it suggests to visitors that the site is not given the attention it should, this leads the conclusion “What else on the site it`s not working as suggested ?” A well-executed 404 page goes some way to rescuing the situation. However, the issue needs to be resolved as quickly as possible. Placement and relevance of links is another important consideration. Typically, a search engine will start at the top of a paged and works its way through the content. So, the primary links of a web site need to be very near the top of the page and link to relevant content. Image links are another popular links method, always remember to include ALT text for better accessibility, and search results and use the title tag for cross-browser compatibility.

Text

Fairly obviously, sites can suffer greatly from poorly written code. The popularity of blogging  and the rapid nature of web publishing these days has degraded the standard of text. This is where a dichotomy has always existed in terms of where web document composition and the production of the content it contains overlaps- the assumption is that we should be experts at both, and it doesn’t always follow suit. Clumsy and waffling text can be just as frustrating as bad navigation if it succeeds in burying the information your visitors crave most. Similarly the value of good code can be completely undermined by poor fonts, small sizing and bad contrast; all which can render page text unreadable. Keep things simple and remember that universal system web fonts are universal for good reason, while it isn’t coincidence that word processors opt for a default contrast scheme of black text on white background.

Images

Web graphics can often be overused or relied upon to add visual excitement to a web design when it isn’t really necessary. Another problem is that with the lingering limitations associated with HTML and CSS, images are often used to create decorative effects or furniture such as rounded box corners, gradient backgrounds or 3D buttons. These all add to the weight of page and can seriously impair the overall look if they fail to load, while often not warranting a meaningful ALT tag- causing extra problems for screen readers etc.

Optimization

This refers not to SEO but more about the underlying design of your content- mainly the code. Writing well structured and economical code has a huge impact on keeping things lightweight, faster loading and more streamlined. On the web we are always dealing with a process of data streaming, however instant this might seems in terms of  modern connection speeds. This means that the weight or file size of pages can have an impact on user experience if he`s waiting for content to lead into the browser.

This isn’t always just down to whether if you use Flash or not. And loading slowdowns could just as easily be caused by sloppy, badly written scripts.

Overzealous variable declarations and excessive nested loops are just a couple of traditional pitfalls, where unnecessary memory calls can hold things up. However, simple things like orphaned tags can be extremely detrimental or fatal, extending even to SEO performance. You should also be aware that coding “etiquette” in terms of indenting and commenting code can prove hugely valuable when administering future maintenance work. Remember that is might not be you that has to do it!

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.