| How to Design a Website Dec 13th 2012, 02:00 Designing a great website may seem like a daunting challenge, but as long as you keep the basics in mind, you will find the process interesting and enjoyable. There's more to it than just looking good! We'll show you the basics, and some general guidelines to help you design websites that keep people coming back. The 3 Basic Rules - Rule #1: Listen to your client. You may design the "world's best website ever in the history of the universe and beyond," with rich blacks, sophisticated fonts, and bold, artistic colors for a site that screams "explore me now!" Unfortunately, your client wanted an orange menu bar with chunky pink and orange type. You're fired, and your best website ever—that the client owns the rights to—languishes on their backup hard drive somewhere, never to be seen by mortal man.
- Study your client's corporate identity. Have the client show you some websites that they really like. This will not only cue you in to what tickles their fancy, it will also give you some design ideas that you may not have considered.
- In case you thought we were kidding about the orange and pink website, just imagine that coolest-ever sophisticated site promoting this product:
- Rule #2: Know your audience and what they are looking for, and design accordingly. The reason people have websites is because they want other people to see them. It may be informational, or it may be commercial, or it may be for entertainment purposes geared to a particular demographic. Your job, as designer, is to know who you are designing for, and to keep them on the page when they land there.
- You may think, "If it looks good, they will stay." But this is not necessarily the case. Consider real estate, for example. Here is a site that features a clean, fun design. It has lots of white space which opens things up, bold colors, and a very modern looking widescreen format with links prominently featured:
- Now consider this approach to selling real estate in the same area: it's cluttered and very busy, garish colors, and slathered with ads.
- Guess which one actually works better for people looking for homes? That's right, the one that actually lists homes! When people are searching for "homes for sale in Santa Monica," they don't care about the aesthetics of the site. They don't want to know about the real estate agent, or see pretty pictures of the town. They want to see homes.
- Rule #3: Listen to yourself. You understand what the client likes, and you know what your market is searching for. Finally, it's time to pay attention to you, the designer!
- Build up a template in the graphics application of your choice. On separate layers (so you can modify things later without destroying the overall template) create the elements that go into your page. Those elements might include:
- Header. This is an element that will be common to every page on your site. The header consists of the title and logo of the site, as well as links to the other subsections of the website (ex. About, Contact, etc.). Visually and practically, this will tie everything together. It's good practice to make the first button on a menu bar link back to the home page.
- Let's look at Apple,[1] for example:
- As with most everything Apple, their home page features a very clean, uncluttered design. Notice the menu bar across the top, with logical topics for each button, plus a search field—always a nice touch if your site supports it. Now let's look a landing page for one of the buttons, the iPad, and let's take a look at a few of the elements:
- The menu bar changes only by darkening the iPad button.
- The subject of the landing page is in large black letters in the upper left.
- A new sub-menu bar appears so that you can learn more about the product. If you click each of those submenu headings, you will see each page will offer new topic-relevant content, but will be identical in layout and design.
- Many times, each main heading in your menu bar will multiple sub-headings that you need to account for. Instead of creating a secondary menu bar, you might use popup menus like this example from Musician's Friend[2]:
- Side bar. This will be common on many pages of your site, but not necessarily all—–context is king. But it's a very important element, and needs to carefully designed to be intuitive and unnecessarily cluttered. Unlike the menu bar, the content of a side bar can be very dynamic. Consider these two sidebars from real estate marketer Trulia[3] The first is for buyers:
- And the second one is for renters. Notice the entirely different focus for very similar information, and it appears in exactly the same spot on the side bar:
- Body. This is where it all happens, and is the most variable part of your design. If you are designing an e-commerce site, for example, one page may have a product review in the body, while the next has 20 items for sale. Your job is to tie the two together so that they don't look disjointed, visually. Use similar colors, fonts, and interface elements to draw it all together.
- Footer. This is something that not ever site has, or needs. It's often used for things that might clutter an otherwise clean interface, or provide access to parts of the site that are not the site's primary focus. Here is an example from Groupon:
Guidelines - Practice good user interface design. Positioning the various elements of the website, such as the title, sidebars, logos, graphics, and text, in the same places on every page will make your site navigable and intuitive.
- Keep the same header at the top of every page. Whether or not your site content lends itself to many repeating elements, making sure that the top of every page is identical is a must.
- Use logic in your design. The elements on a single page should be ordered logically by importance or by topic; the various pages in the site should do the same.
- Create a consistent style. While the layout should give your site structural consistency, the style should give it thematic harmony.
- Stick with two or three main colors and make sure they harmonize well.
- Avoid using too many font styles or sizes; if you do plan to alternate between a few, make sure you use them the same way on every page.
- Use Cascading Style Sheets (CSS) to manage uniform style, and to make it easier to change elements across an entire website without having to go to every individual page.
- Maximize readability. To make your text easier to read, break it into smaller sections.
- Use subheadings and appropriate spacing to separate each of the sections.
- Use bold or different-sized fonts to show the hierarchy and importance of the topics.
- Pay attention to text handling. Don't make the font too small, and widen the line spacing to make large blocks of text more readable. Large blocks of text will be harder to read; break these up into smaller paragraphs instead.
- Make your website universally readable. Use standard HTML and avoid tags, features, and plug-ins that are only available to one brand or version of a browser.
- Although most modern browsers and computers can handle complex images, everything will be a little snappier if your keep your images smaller in size and optimized for the web. Balance the desire for quality against the need for speed.
- Test your website. Make sure that every link works as you expect, and that images appear correctly.
- You may want to conduct some usability tests by having members of your target audience test the clarity and ease of use of your design, and give you feedback on your website.
- Publish your website. If you haven't already done so, buy a domain name. Check links periodically to make sure they still exist and listen to suggestions emailed to you by website visitors.
- Though you're welcome to design the layout based on your own personal vision or things you've admired on other sites, it may be easier to purchase a ready made template.
- To keep from wasting visitors' ink, use a separate style sheet to format your site for printing.
- Turn off background images when you set up the printing parameters.
- Use black text on a white background.
- Remove the menu bar and any unneeded images.
- Don't bombard the viewer with cutesy, gimmicky graphics. Flash animation, bright colors, patterned backgrounds, and music that auto-plays each time a page loads were fun to experiment with in the 90s but will send today's web-users running. Stick with simple backgrounds that contrast with the text color for maximum readability.
- To accommodate hearing and visually-impaired visitors, you can caption video, transcribe audio, and include a note about accessibility. Though tables can be an efficient way of organizing information, visually-impaired visitors who use a screen-reading program may not hear the material in column order.
- You can always use CSS to make suitable distances between paragraphs.
Edit Warnings - Avoid plagiarism and observe all copyright laws. Don't add random images from the web, or even structural elements without permission. Whatever you include on your website must be both legal and ethical.
Edit Related wikiHows Edit Sources and Citations |  |
No comments:
Post a Comment