Design Concept for building effective websites
WEB DESIGNER’S GUID AND STRATEGY PLANNING V1.0
A Design career is an extremely passionate and gratifying one and personally we’ve never felt designing is a job as it has been so enjoyable and liberating all along. Designing consumes yet increases creativity along with adding so much personality to the artist in us. Being a creative field that’s constantly evolving (making us perpetual learners) it’s understandable that:
(a) There are hardly any hard and fast rules in this realm, and
(b) We all develop our own unique opinions and niches over the years.
That said, we’ve also often thought about all the time that would have been saved if the concepts, techniques and shortcuts imbibed over the years had been more readily available in the formative years. That’s why at Radical.co.in we want to help our designers to get a better and clearer understanding of web design (concepts, tools & techniques) and help them with their issues as well.
Moving on, let’s first look at what exactly is an Effective Website Design. With regards to look, we believe that an effective design needs to be stylish yet subtle with appropriate effects used while maintaining an overall soothing feel. Between the extremes of building bare websites with cluttered content and hard-to-navigate complicated website designs, an effective website is the result of a good web designer expertly building a web site that is usable, impressive, slick, cohesive, well laid out, fast-loading, easily readable and easy to use. This book on design concept for building effective websites aims to identify and teach the basics of effective website design and is broadly divided into the following sections:
- Idea behind Website Design
- Analysis before Website Design
- Mindset for Website Design
- Cornerstones of Website Design
An idea behind Website Design
Without hindering a website’s usability (simple and quick access to information, services or products), a web designer’s ultimate aim for a website’s design is to reach the optimal balance between its attractiveness (targeted look-and-feel with necessary design effects), load time considerations (optimizing design elements for reasonable web page size) and user friendliness (easy-to-use navigation and user interactions plus well laid-out easily readable content) – without entirely compromising on either of them. On the programming front, no compromise must be made in building a well coded and error free website that ensures a uniform user experience - web standards compliant (W3C valid XHTML/HTML and CSS), accessible and cross browser compatible. Thus the idea behind website design is to simply build a well-balanced, usable, unique and user-focused design that satisfies all the requirements we set out to fulfill in the first place.
Analysis before Website Design
Before designing a web site the designer needs to be fully aware of what type of website he/she is going to design. Unless you have some clear goals in mind it would be difficult for you to start off on the actual design phase. Thus gathering all technicalities - requirements, objectives and specifications - before you design is an extremely important first step.
In simple terms, this means that to get started on a website we will need to gather information on or decide on the structure (layout and navigation), color palette and overall theme beforehand.
While gathering the technicalities it’s also important to ask your client or yourself the right questions. This includes asking about, Requirements like: desired look and feel, navigational structure, programming elements and optimizations required; Objectives like: targeted audience, user interaction results and download speed; and, Specifications like: color scheme and effects to be used, navigational links, likes/dislikes, model sites and content. Tips for making your questions more effective:
- As most clients are not design savvy the objectives can be clearer by giving them answer options. For example, when you ask about download speed you can give them options that include “must be fast-loading and search engine friendly” and “doesn’t matter, trendy look is more important”.
- For questions that can have several answers or cause confusion to clients, you can change them to “rate on a scale of 1-10″ rating questions. Helpful if past clients seemed unsure or a grade would be more useful to you.
Mindset for Website Design
For the creation of an effective website design, our mind-set before we design also plays a key part in the outcome of our efforts. We not only have to think of the yet to be built design creatively, but also objectively and logically. In anyone’s initial few years of website design they would, more likely than not, jump right into the layout design phase without giving deeper thought to the overall working objectives of the website being designed – a designer’s naive should be on “creativity should flow and not be boxed in with restrictions” and “anyhow adjustments can be made later”. Though most of the designs were a hit with the respective client, we being our own biggest critic over a period of time strongly felt that a better job could have been done with the final designs as well as the layouts given as options to the clients. Slowly, but surely, we started incorporating logic and objectivity into the way we and our team designed and built websites. As a result not only did we streamline our way of working as web designing company we also saved a lot of time in the process and we started getting recognized for our rapid design services.
The following are some tips to build creatively without neglecting objectivity and logic from personal experience:
- Focus on the Goals: Though designers, as creative beings, instinctively want to create designs that are totally incredible and heavily graphical, it’s important to reign in your creativity (in fact sharpen it would be more apt) to please your client and/or targeted audience and not yourself – this in itself being an important objective. You will also need to dig deeper and draw more specific objectives from what your client requires even if he/she doesn’t spell it out technically. Sometimes clients leave out gaps in their specifications as they genuinely don’t know what they need to be built or they tell you to decide what’s best for them – a designer in these circumstances needs to learn to think from the client perspective as well. If your client is selling a service or a product try not to impose a heavily graphical website on them when a simpler slick build that’s optimized would be more effective. Even if the client is “you” try to get your goals down on paper before designing, it will keep you focused.
- Gauge the Impact Factor: The desired impact of the website design also plays a key role when you design. A complicated question, most clients don’t know how to answer to it. More often than not you will have to draw to a conclusion on what the impact of the design should be from all your information. Many times clients will need high impact designs without actually wanting them to be jazzy with effects and they might not be able to convey that. Impact can not only be increased by the right effects but also by the use of the right colors and optimized subtle effects. Highly experience designers would agree with us that the Impact should be of “perfection”, “polished look” and “uniqueness” when you are left to make this decision. When in doubt stick to “simplicity” and “common” impact look-and-feel as most people are quickly comfortable around familiarity.
- Keep the Visitor in mind, always: A website user’s needs are its top-most priority and should never be neglected – usability, accessibility, user experience and user interactions considerations are all part of this. Knowing what your targeted site’s visitor will be looking for from page to page is something that not many clients can help you with though some of them doing. However, over a period of time through experience you will be able to instinctively determine what type of design would be suitable for a particular website type. This is especially true when designing the site’s overall feel and navigation elements. If you are new to building websites, stick to the basics of keeping things simple, obvious and undistracted.
Cornerstones of Website Design
After all the planning is taken care of let’s get to the design aspects of building an effective website. From experience we’ve found that it’s so much easier to execute a website design project when it has been broken down into definable phases, thus adapting an organized process approach to website design. All designers mentally do go about executing the same phases albeit in a random manner; however, with our process approach we additionally make a conscious effort to fulfill our requirements for the design and also save design time as we get used to it. We’ll be calling each phase a cornerstone in website design and discuss their execution. The cornerstones of creating an effective website design layout are:
- Website Layout Design: A website’s layout design is the starting point in the design process. From the website structure requirements and design specifications gathered we can quickly start forming a general design framework or layout which functions as the backdrop to all other design elements. The layout design for an effective website can range from being negligible (for very simple websites) to being most crucial (for complicated designs). Common frameworks in layout design include 2-column and 3-column layout designs.
- Website Header Design: A website’s header is usually the most prominent feature of the site and its design is a crucial phase as it can make or break your website in terms of usability and impact. Optimally designing a website’s header (along with layout consideration for complex designs) consumes a big chunk of design time, creative energy and brain power and requires the extra patient effort to get it right. The header of an effective website in general should make the elements placed in it (logo, links and other navigational elements) look cohesive, uncluttered and slick while fulfilling the targeted look-and-feel requirement.
- Website Background Design: A website’s background is usually a simple color or image fill, however as your design experience increases the need to know proper background design techniques increases. Designing suitable backgrounds to compliment the layout design is also valuable as it can add dimensions to your overall design impact. For example, a very simple website design kept that way due to optimization requirements can be made to look slick with just the addition of a nicely designed background.
- Website Navigation Design: Navigation links placement on your website plays a big role in determining the stickiness factor of your site (how long your visitor stays and explores your site). Ask yourself this, what do visitors do as soon as they open your site? They would probably read the content of the present page and then look around to find any other page that interests them. It’s crucial for your users to find what they are looking for within 2 clicks at the most. This is irrespective of what your website is about – be it products, services or providing information.
“A clean layout and neat navigation and using a lot of white space for your site enhances its looks. Try to keep the focus on your content. That is why we recommending search various competitor’s sites as well as more and more templates before creating design – all pages or a group of pages have one basic design and only the content varies – this way even if your site is a little distracting due to necessary effects, your design is noted once (hopefully with an appreciative eye and then the visitor focused on the content automatically.”
- Website Footer Design: A website’s footer generally carries the copyright notice plus privacy and legal information links for the site. The Footer of a website can also be designed to display important information or additional navigational links, usually be dividing a part of it into columns with each column focusing on a particular detail or group of links.
If the above five cornerstones of website design are carefully and diligently completed with the fulfillment of all the design objectives, you would have created an effective design as desired. The next steps after the approval of the website design would be to build the resultant effective website by converting the layout to HTML/XHTML and CSS code and then creating all the web pages of the website as per its navigation and content. Once the website is completed and uploaded, the final and extremely important step is to test your website for usability and user interaction, spell checks, download speed, W3C valid code plus optimized graphics and server settings.
Summery of the above Guidelines
- Analyze and strategize: It’s important to set goals, research and have a plan before your design. Ask the right questions while gathering the technicalities (requirements, objectives and specifications). The more in-depth the better.
- Cultivate the right mind-set to build creatively without neglecting objectivity and logic. Remember that an effective website is one that’s usable, impressive, slick, cohesive, well laid out, fast-loading, easily readable and easy to use.
- Create a clean consistent layout and navigation structure for optimal and undistracted viewing. Communicate the website’s purpose on every page. All major navigational links should be easily accessible from all pages.
- Design to draw focus to the content not away from it. An impressive design is a must for a positive first impression but it should not be in the face and should facilitate easy viewing of the content. Use of white space is crucial for good readability.
- Always design with the website user in mind: usability, accessibility, user experience and user interaction considerations should be part of your design process and be given utmost importance.
- Feel free to use appropriate effects but don’t overdo it. Aim for a stylish yet subtle look with an overall soothing feel. You don’t have to be restricted to 2-3 colors; a well-designed colorful website can also be impressive. Ideally, logo colors, their shades and shades of black and blue can be used for any website to look cohesive and smart.
- Target CSS optimization techniques during the design phase itself to minimize rework. If the design is graphically heavy (or even otherwise) target the use of (a) CSS background fills to minimize page size and for fluid designs; (b) CSS sprites to minimize server calls (objects downloaded); (c) CSS navigation effects with text link hover, background colors and borders.
Design Myths Busted
Let’s now move on to debunking some of the myths of cutting edge website design.
- Keep it Simple: It’s often recommended that for effective websites the designer needs to “keep it simple” for the targeted audience to reach your products, services and/or information – whatever they are looking for – quickly. Instead of simplicity we recommend that it’s more appropriate and important to “Keep it Slick” - smart and intelligent design in sync with user needs. We attribute this paradigm shift to the huge advances in technology, user awareness and internet speed. To lift a websites impact factor, designs of today need to be stylish, subtle and soothing with regards to effects used.
- Users are Stupid: It has been theorized that users need hand-holding for how to operate your website. A few years ago we might have agreed upon this theory; we now believe that hand-holding on the web is overrated. User awareness is at an all-time high and this can be attributed to the social networking explosion. Most users today are extremely web savvy if not outright intelligent. Proof? From a mere 304 million users in March 2000 the internet community has zoomed to 1966 million users in June 2010 (sources: Nua & Internet World Stats). This almost seven fold increase in users is mind boggling, and even more so when we note that there have been 1000 million users since 2005. These figures prove that users no longer can be generally labeled stupid and that the bulk of internet audience today has matured. Therefore don’t treat your users as stupid and design for them with that in mind.
- Content is King: In mass media it’s a general notion that “content is king”, meaning content – any kind of information including textual, visual and aural – is of utmost importance, however this is not entirely true when it comes to websites or the internet media. We believe that in building effective websites the User is King and the content (text, visual design, functionality, interactivity, audio and video) should be generated only as per what the targeted user’s needs are – content serves the user his master. A web designer must focus on the user’s need at all times - usability, accessibility, user experience and user interaction considerations are all part of this.
The above three myths are easily busted and understood by just looking at one phenomenon – Facebook:
(1) Facebook is definitely Slick not Simple, else other social networking sites would have enjoyed the same magnitude of its popularity – it’s so intelligently made, reeks smartness and is impressive on all levels.
(2) The explosion in Facebook users shows they are not stupid and are quite adept at using the web [a similar comparison is how mostly anyone from 6-70 years old can learn to play a video game within hours].
(3) Facebook was made for the User so it rules – content serves the User his master.
Website Design Tips
Some design elements greatly enhance the look and user experience of your web site and create a positive first impression. Some of these effects are:
- Clean and simple CSS Effects
- Graphic and Photo Effects
- Website Interactivity via visually appealing applications such as Call to Action Elements, quick client interaction tools like chat app and something similar.
How to build an Effective Website
Listed below are some important and useful tips for designing an effective and high quality web site.
I. Give Priority to the Website User’s Needs: A web designer must be focused on the user’s need at all times – usability, accessibility, user experience and user interaction considerations are all part of this. Learn to see things from a visitor’s perspective while designing.
- Use Clear, Maintainable and Easy Navigation: Navigation links placement on your website plays a big role in determining the stickiness factor of your site (how long your visitor stays and explores your site). Your navigational structure should be neat, consistent and easily accessible for an optimal undistracted user experience. The navigation should be flexible enough to accommodate any amount of additional links as required.
- Clean and Consistent Layout Design: A clean layout that uses a lot of white space enhances a site’s look and readability. The layout should also keep the focus on your content. Use fonts that will be available on all computers to prevent your site looking messed up. Now a days you able to opt some other fonts also by using CSS3 – Font face.
- Design for all Screen Resolutions: A site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced. Suppose your site doesn’t look good for a particular resolution it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing. Designing stretch layouts (optional-depends upon various other factors) that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site.
- Make sure the website is Cross Browser Compatible: Make sure you check your website in the most used versions of all top browsers Google Chrome, Internet Explorer, Mozilla Firefox, Opera, Safari and Netscape as they constitute 95% of the world’s browsers. Even try to check with old versions also.
II. Program using pure CSS: The world has moved away from table based websites to pure CSS websites because it offers accessibility, reusability and considerably reduces file size apart from giving greater control over the look of your website. The single most important skill you can learn today to become a quality web designer is CSS programming! Even if you are not an expert at CSS you can learn to use simple CSS Styles Effects to enhance your website:
III. Optimize Load Time: Make sure your load time is low and test for your website’s performance often. For this you must:
- Minimize Graphics, Flash and scripts: They hugely increase your file size.
- Optimize your HTML & script code: Make sure that your site doesn’t have any unwanted tags or unused scripts.
- Use Server Side Include (SSI) files wherever possible. Includes once called from the web server reside in its cache so on subsequent requests they load faster.
- Use Server and Client caching of your web page static content (Images, JS, CSS and HTML files).
- Set Expires Header - The optimal expiry time for your static content is ‘more than 7 days’.
IV. Ensure a Scalable and Reliable Website: As technology advances and configuration of computers & their monitors keep increasing and varying, it is impossible to test your site in all screen sizes, platforms and user scenarios. Make sure your design and code is scalable by being error free and able to withstand increased user loads smoothly. You would have designed a reliable website if you know that it would look good and perform well under most user circumstances.
V. Test Early Test Often (TETO): It’s extremely important to carry out usability and user interaction tests as early as the design phase of building your website. Also keep testing and improving your website as it grows.