After receiving a website design request from a client, make sure to go over some important details before starting the actual creative work. Some of the commonly needed items are the nature of the customer’s business or project, the goal of website in general, the description of target audience, the type of content that the website will display, a preferred color theme, and the style they are after – minimalistic or rich in graphics. If the client has difficulty describing the desired look and feel, ask him or her to show some examples of other websites they have visited and liked. This usually helps to visualize the future design and to help both the client and web designer to agree on a unified design theme.
When I was obtaining the initial set of specifications from Danielle with Climate Clock Initiative, we had to meet a few times to discuss various details. Even though multiple meetings are usually inevitable, some additional nuances will reveal themselves once the design process is under way. One of the most difficult tasks in design is when the client gives you a green light to do whatever will make their existing website look better. It is just like a class assignment for a college student to write on a free topic. At first, it seems to be very simple and interesting; then, it turns out to be very difficult to narrow down and focus on a particular topic. This is the way it is with the Climate Clock website right now; since there are not many requirements and constraints, it makes the job a bit more difficult. I did get to see a sample website that the customer liked, which helped me to figure out what level of interactivity was needed. At first, I thought that the new website would need many graphical and animated elements when Danielle was describing interactivity; however, the example website revealed that she really meant a completely different level of interactivity that primarily involves the social network integration. When discussing the design requirements and proposals, always check and make sure that you and client talk in the same terms. Delivering a wrong design because of such simple misunderstandings will waste time and money as well as tarnish your reputation as a professional designer; communication is the most important part of working in a team.
Once the client requirements are established, picking the right platform for your content is a very important next step. First of all, decide what type of a website is needed. Dynamic websites, such as blogs that are constantly updated, are usually made with the help of popular content management engines. Few of the most popular examples would be WordPress and Drupal.
WordPress is best to use for blogs and personal sites. However, this engine lately acquired a lot of functionality in organizing and presenting content; these features are good for business sites, too. It is very cleanly coded, fast, and flexible engine. Additionally, there are a lot of useful third-party plugins, such as Twitter Block and Lightbox. Bear in mind that similar plugins exist for the main competitor to WordPress — Drupal.
Drupal is better suited for newspaper and magazine style websites or other portals that have very dynamic and frequent content submissions. This engine has multilingual support; a single content submission can be translated into several languages and generated in the language selected by user on the fly. This way, the author does not have to create multiple copies of the same content in different languages. The translations are stored in a database and are very easy to keep track of and manage. This is a very powerful and well-developed content management system, but the scripting might get a bit too heavy if a lot of plugins (modules) are active.
Lastly, static websites are usually hand-coded and updated rarely. These are good for portfolio or general business information displays. Such websites can be very easily optimized and load much faster than even the leading content management engines; this is why it is important to use the proper style of coding. Installing WordPress or Drupal for a static website would be a big mistake for three reasons. First, all engine based pages load visibly slower due to a lot of dynamically generated components and scripting. Second, they generally use more bandwidth than static pages for the same reasons; you could waste hosting resources and might require a more expensive traffic plan. Third, designing a static page is easier and costs less than creating a template for a content management engine. Dynamic templates usually require a few designs for different types of pages, which takes more design work and costs more; static code is much easier and “cheaper” to support and maintain.
Usually, a website consists of six main components: container, header and menu, main content, sidebars, footer, and background. There are also several sub-areas: a banner area above the header and pre-footer before the actual footer. The sidebars are optional; the need of having a sidebar depends on the amount and nature of content.
Container is a tag which holds all other components together. It is usually used only for framework design purposes and contains no other elements. The width of the website is usually set in the container. It is important to understand the difference between fixed width and fluid or liquid width websites and their purposes. Fixed width means that the website’s body will always stay of the same width no matter how big or small the viewer’s screen resolution is. Fluid width means that the width of the page will change with the viewer’s screen resolution according to the percentage set for the width. Fixed width is usually good for small stories or short pages, because a short story would be stretched out too much on the viewer’s screen if its resolution is large enough with fluid width. Fluid width is good for websites with a lot of information and long pages; this way, the page will be evenly spread out on the screen and use the entire area more efficiently.
Banner area is good for displaying announcements and advertisements, because it is the first thing that the user would see on the page. It is usually a good idea to keep information in the banner area a bit brighter or make it stand out of the general design. However, it should harmonically fit in within your design; for example, try to use the same color scheme if possible, but make it a bit brighter or bolder. If your website has a lot of graphic components, it might be a good idea to make the banner very clean and simple. Minimalistic design will certainly stand out of the overall heavy design. Have you ever seen those billboards with very busy surrounding backgrounds and just a few words on them? This is the same concept.
A language switch and search field could be placed in the banner area as well. Do not put too much information in this area though; it should contain very few elements that are important. Login and password fields could be located in this area as well, but make sure they fit in well with the rest of the design. If it is not working out, it might be a good idea to place the login and password fields on the sidebar.
Header is usually the place for the logo and main menu. If the website has sidebars, then it could be a good idea to place a contact link, help/FAQ links, or any other important links such as social media buttons in the header. This way, a viewer will be able to locate the most important links right away. A search field could also be placed in the header; frankly, it is the best place for it if your website contains a lot of information. Of course, the exclusion from this rule would be to locate the important links and buttons in the banner area if your website has one and it is free of advertisements.
Normally, header is the main location for the graphics. The placement of a logo is important; since most people in the U.S. read from left to right, the first thing they would see is whatever is located in the top left corner. If you need to place the logo on the right, make sure there are some directional graphical elements that lead the eye toward the logo. For example, a few lines, a glowing swirl, or a simple color gradient would lead the viewer’s sight to the logo.
If there is a vertical menu in the header, make sure it doesn’t obstruct the flow of the composition. A vertical menu can be located on the left if it is lightweight and simplistic. A graphically heavy vertical menu is best to be positioned on the right or implemented into the logo itself. A horizontal menu is also usually located within header. It can be placed either at the bottom of the header or at the very top, depending on the logo style and overall graphics. Since a horizontal menu would visually divide the webpage, make sure it fits in well – not too large, not too small, and does not obstruct the composition. A dropdown menu is also an option, but keep in mind that they are tricky. Choosing a good script is very important; the menu that disappears the instant that a user moves his or her mouse away (sometime, by accident) would be very annoying. A menu that would stay open for too long would annoy the user as well. It is very difficult to satisfy all of your prospect viewers with a dropdown menu, because people have different reaction spans; while some might be able to navigate through very well, the others might find it too fast or too slow. Do not make a dropdown menu deeper than three levels, because it will be difficult to navigate. Since going to the third level is usually annoying, it is best to keep a maximum of two menu levels where possible.
Main content is usually the largest part of the website. It is important to organize it well in terms of headers, fonts, color coding of headings and links, and margins and padding. Do not use too much highlighting in this area, because it will look too busy and viewer will be too distracted. Read more about the fonts in theFonts section. Margins and padding will help to separate content from the background and other components; margins are the space outside of the object and padding is the space inside the object. If there are special graphics for the header, such as a calendar date or content type icon, make sure they are not too large; even though it is a heading, it should draw some attention, but not consume all of it.
If your website is dynamic and has a lot of categories, it might be wise to put a breadcrumb at the top of your main content. Breadcrumb is the path that shows how the viewer got to the current page; it will help him or her to trace the steps back.
Sidebars are good for menus, short blurbs of text, such as quotes or announcements, advertisements, and previews of a product or gallery images. If there is a secure client area, it is good to place account information in here or the login and password fields. If the sidebar contains a few of these components, make sure to divide them into blocks. The blocks do not have to be closed; a mere graphical or bolded heading would do the trick. Organize the content in the sidebar by the level of its importance. For example, the organization of a page with a single sidebar could flow as such: a login and account block, category or content links, a preview block, and advertisements. For the websites with two sidebars, decide which sidebar would be the main one and place all the important links on it. The second sidebar could contain advertisements. If there are too many links, split them between the sidebars by category.
Pre-footer is a good place for a small site map – the list of all the pages organized in an intuitive manner. This is an extremely crucial part for a large website; new users who are not yet familiar with the interface would find it very helpful to locate the information quickly. If your website has a large body of text, you might place a second menu on the bottom of the page. However, make sure that it is a simple link-based menu that is not too heavy with the graphics. Depending on the website type, you also may show the latest submissions from an image gallery or other type of dynamic content such as the newest product offerings in this area.
Footer should definitely contain your copyright notice and may also provide short contact information such as e-mail or phone number or a link to a dedicated contact page. Keep the footer information very brief and clean. The format for the copyright notice would look somewhat like this:
[The copyright symbol] 2012 [website name]
Other notices such as a privacy policy link.
[Word “Copyright”] 2012 [website name]
Other notices such as a privacy policy link.
- Year could also be a range 2012 – [present year].
- Do not link the website name to your website.
- Do not use copyright symbol © and the word “copyright” at the same time. Use only either one, because they essentially mean the same thing. It would be the same as saying the word copyright twice in the row.
Background of the website is just as important as the content. The background should stay in the back, it should not pop out and draw too much attention away from the main container. Background should be simpler and more minimalistic and usually darker than the main container. Using repeatable patterns for the graphics could be hard on the eyes, so make sure it is a subtle pattern that does not fight with the content in terms of contrast. It is very difficult to stay focused on the content if the website’s background has a bright repeating pattern. A bright and abstract graphic in the background is fine; just make sure it has a flow that leads the viewer toward the content or helps to bring out the main container. Always keep in mind that bright graphics would not fit with every design. Subtle and soft abstract graphics are good for making an interesting background and not drawing too much attention away from the content.
If want to use an advertisement as the background, make sure that the main graphics are located to the right of main content. If an ad is placed on the left, then the eye would immediately leave the ad and continue toward the website itself. If placed on the right, the viewer would be attracted by the graphics of the ad first and then the eye would be stopped by the edge of the screen; this would force the viewer to look at the ad again when going back to the content. Even though it might be a quick glance, an advertisement that catches the eye is a success.
Any good design starts with an effective organization of the content. The point of eye pleasing design is to keep the visitor interested in the subject and to present the information in a memorable and easy to understand way. If the content placement is not intuitive and the visitor has a difficulty finding the key information on the website, then the organization step was not done properly. I am sure all of us have been in a situation where it was impossible to find contact information or a customer support link on a website; this is the situation that you as a designer should avoid at all costs.
For the Climate Clock Initiative website, I was presented with an existing organizational layout; however, I believe that it requires some changes. The main page of the website should contain a list of latest news instead of static “About” page, because every time the visitor comes to the website he or she should not have to stare at the same page over and over again (unless the website is static, of course). In this case, the website is very much dynamic, just as the project itself. Most likely, recent blog entries will be displayed on the main page since they should contain the latest news and updates.
It is also important to place different types of content in the right place. For example, placing important information in the footer might not be wise. For more tips on an effective organization of the components refer Components section.
The presentation of content should be consistent. The headings and highlights should be of the same style and used for the same type of information. For example, the event page of the new Climate Clock website will be organized and color coded for ease of reading. The previous version of the website had different formats for almost each event, and it was very difficult to follow the timeline. A simple calendar would be a good solution for the event page, because it would add a visual aspect that should be easier to remember and to understand. Additionally, a calendar will be easier to update rather than to enter all events by hand.
Every successful user interface must be intuitive, simple, and clean. Even if the design includes a large number of graphics, it should be harmoniously organized to deliver the effect of graphics without overloading the eye of a visitor. The rule of thumb would be to start with the minimal graphics, consistent color scheme, and some geometric figures. For example, you should decide if the website will have square or round elements. It is important to keep this consistent throughout the design, because if the website has rounded edges in the main container (site’s body) and square buttons elsewhere, it would look disharmonic and awkward.
When designing a page, make sure that all the pixels are aligned. If there are several graphical pieces that create a single image-based element, make sure they are all aligned to the every single pixel. If the website’s design does not align, it will look sloppy and unprofessional.
If the website contains different types of content, it might be wise to use small iconic representations. This will help the user differentiate between the types of content. When the website is built on a content management engine, it usually has a set of default icons. These icons need to be redesigned to make the website look more customized.
A general rule would be to use serif fonts for the headings and san-serif fonts for the body. Serifs are the fonts with curly shapes on the ends of the letters; they look more artistic, such as Times New Roman or Garamond. San-serif fonts are clean, simple, and very easy to read, such as Arial. This is why it is best to use san-serif fonts for large bodies of text.
The size of the font is very important. Many generic websites use large fonts and almost no graphics. Such examples would be free WordPress and Drupal templates which are very difficult to read and usually lack separators. The sidebars are usually blended with the main content and the headings for each entry are usually too large and placed too far away from the text body.
It is also very important to think through the color palette before starting to design a website. If the logo is supplied, it might be used as a base for the color palette; alternatively, colors of a similar group can be drawn from the logo. Additionally, consider the overall theme and message of the website when picking the primary colors. For example, the Climate Clock website is composed in shades of green because it reflects the concept of the project itself.
For the links and heading, it might be wise to use colors of an opposite or somewhat brighter tone. For example, the headings and links of the new Climate Clock website would be in blue tones, but the links will be underlined in a different font size. It is generally a good idea to underline links or to bold them out with brighter colors because a viewer might not realize that it is a link otherwise.
Make sure the menus are easily seen and differentiated among the rest of the content. One way to do this is to use a color that is not used anywhere else on the page. Some other techniques are worth considering, too; for example, upper case letters for the menu or small caps and graphics. Watch out for using completely random colors, since it might ruin the design. If there are only one or two main colors, then you may use a completely different bright color for the menu. If the website already has many colors, then it is best to separate the menu with graphics and use a neutral color for the text.
Today, making graphics with a transparent background and smooth edges is easier than ever. PNG-24 file format is read correctly by every major browser; this allows designers to be more creative. Use this format for images with a “drop shadow” effect or for a smooth edge effect; it is also perfect for making icons. It used to be required to make icons with the same background as the page where they would be used; this created major difficulties if one wanted to use the same icons on different types of pages. The old solution to this problem was to be saving the icons with transparent background in GIF format, but the edges of the images looked abrupt and pixilated. Now, with PNG format it is very simple. Do not overdue it and save images in PNG only if the transparency is needed, because PNGs images are usually larger in size. For all other images, it is best to use JPG format.
Nowadays, interactive websites are very popular because they get the viewer involved and more interested in coming back. Interactivity can be realized in a few ways. For example, one method is to add animated graphical elements which would allow the user to interact with them or simply link the viewer to an important page. The other way would be to allow users to post comments and leave feedback; this is probably the most common form of interactivity. Social media is also becoming an integral part of interactive elements. The “share” and “like” buttons often follow news submissions or stories and allow users to spread the word through the various social networks and to express his or her feelings toward the material with a single click.
This is an important component which was explicitly requested for the design of the new Climate Clock website. The goal of redesigning the website is to organize it better, to make it more pleasing esthetically, and to get the viewers engaged and involved. The main interactive components would be a social media implementation, such as latest tweets, a “like” button for Facebook, and “share” buttons for other popular web services. The blog will have an option of submitting a comment as well.
Lastly, it is a rule of good taste to optimize the website for various search engines by using meta tags and keywords. The coding should also be correct and strictly adherent to the HTML/CSS doctype used. It is also wise to include a site map, because this is the page that most search engines look for in the first place. The main reason for such optimizations would be to generate more traffic toward the website. Additionally, a well coded and designed website will load faster and displayed correctly on different browsers and platforms.
Most content management systems are already optimized for search engines, but normally they do not allow changes of meta descriptions and keywords through the control panel. This is why it typically has to be done by hand.
When developing website’s meta tags, the description should be well crafted; meta keywords should clearly reflect the website’s content. It is best to use about ten keywords; if you include too many of them, the search engine might consider your website a spam site. There are two types of keywords: the broad and precise. The broad keywords would be generic words that describe services, such as “design,” “image,” or “story;” the precise ones would be the names of companies or products. Meta description must stay within a couple of sentences and have as much information about the website as possible. The description would show up in search results underneath the name of the website. This brings me to the next point; make sure to title all of your pages according to their content. First of all, it will help viewers to better navigate around your website. Second, it will help the search engines that also check the pages’ titles when conducting a search.
Google Analytics is a great way to keep track of the number of unique hits (visitors) and the overall popularity of a website. It is very simple to install; one simply needs to go through a few documented steps and insert pre-generated code into the website. For static pages, the code will need to be inserted on every page; for dynamic sites with content management engines, the code needs to be inserted only once in the header file. There are detailed descriptions and instructions of how to do it for each type of website. After the installation, all the information about the website’s traffic and rates will be available in Google Analytics control panel in a few days.
