Design Concepts

Building a Website

Design Concepts for building an effective website

A Design career is an extremely passionate and gratifying one and personally I'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) its 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, I'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 SmartWebby.com we want to help newbies and other 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, I 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 article 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

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 fulfil 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. For example, for our design a website tutorial we started with the idea of building a sophisticated design with a simple easy-to-teach layout and passionate purple and pink shades as the color palette.

While gathering the technicalities its 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 my initial few years of website design I 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 - my naive attitude being that "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, I being my 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, I started incorporating logic and objectivity into the way me and my team designed and built websites. As a result not only did we streamline our way of working as designers 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, its 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 me 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 is 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 do. 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.

Read our Design Ideas article for more smartwebby insights and tips on web design (including design myths).

Cornerstones of Website Design

After all the planning is taken care of lets get to the design aspects of building an effective website. From experience we've found that its 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; click their links for related ideas. 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.
[More on website header design]
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.
[More on website background design]
Website Navigation Design: An effective website's navigation is designed to be user focused, make the site easy to navigate and should ideally consist of mostly text links for best optimization, preferably via CSS design techniques.
[More on website navigation]
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, download speed, W3C valid code plus optimized graphics and server settings.