Content

• To step
• Method 1 of 2: The 3 basic rules
• Method 2 of 2: Guidelines
• Tips
• Warnings

Designing a great website can seem like a daunting task, but as long as you keep the basics in mind, you'll find the process interesting and fun. It's about more than just good looks! We'll show you the basics and some general guidelines to help you design websites that people will visit again and again.

To step

Method 1 of 2: The 3 basic rules

1. Rule 1:Listen to your client. You may be designing "the world's greatest website ever in the history of the universe and beyond," with rich blacks, refined fonts, and bright, artistic colors for a site that screams "explore me now!" Unfortunately, your client wanted an orange menu bar with bright pink and orange letters. You've been fired, and your best website ever — which the client has the rights to — is somewhere on their backup disk, without anyone ever seeing it again.
   • Study your client's corporate identity. Have the client show you a few websites they love. Not only will this give you an idea of ​​what they like, it will also give you a few design ideas that you might not have thought of.
   • If you thought we were kidding about the orange and pink website, consider this cool, sophisticated site:
2. Rule # 2:Know your audience and what they are looking for and adapt your design accordingly. The reason people have websites is because they want other people to see them. It can be informative, or commercial, or to entertain a specific target audience. Your job as a designer is to know who you are designing for, and to keep them on the page when they land there.
   • You might think, "If it looks good, they will stay." But this does not necessarily have to be the case. Take real estate, for example. Here's a site with a clean, fun design. It has a lot of white space which gives an open look, bright colors and a modern widescreen format with links in a prominent place:
   • Now take a look at this approach to selling real estate in the same area: cluttered and very busy, dull colors, and covered in advertising.
   • Guess which one works better for those looking for a home? Right, the one where houses! When people search for “homes for sale in Santa Monica,” they don't care what a site looks like. They don't want to read about the estate agent or see pretty pictures of the city. They want to see houses.
3. Rule # 3:Listen to yourself. You understand what the client wants and you know what your market is looking for. Now it is finally time to pay attention to you, the designer!
   • Build a template in the graphics software of your choice. Make the elements of your page on different layers (so you can tweak things later without destroying the entire template). These elements can be:
     • Header. This is an element that is the same on every page of your site. The header consists of the title and logo of the site, as well as links to the other parts of the website (eg About, Contact, etc.). Visually and practically this will tie it all together. It is good practice to link the first button on a menu bar back to the homepage.
     • For example, let's take a look at Apple:
     • As with most Apple stuff, their homepage has a very clean, straightforward design. Note the menu bar at the top, with logical topics for each button, plus a search field - always a good idea if your site supports it. Now let's look at a landing page for one of the buttons, the iPad, to see a few elements:
     • The menu bar changes only by darkening the iPad button.
     • The subject of the landing page is displayed in large black letters.
     • A new submenu will appear so you can learn more about the product. If you click on one of these buttons, you will see that each page offers new content depending on the topic, but will be identical in layout and design.
     • Often times, each main topic in your menu bar will have different subheadings for you to fill in. Instead of creating a second menu bar, you can use popup menus like this example from Musicians Friend:
     • Sidebar. This will appear on many pages of your site, but not necessarily all - the context determines. However, it is a very important element, and it must be carefully designed to be intuitive and not too cluttered. Unlike the menu bar, the content of a sidebar can be very dynamic. Check Out These Two Sidebars From Real Estate Marketer Trulia The first is for buyers:
       
       

Method 2 of 2: Guidelines

1. Design a good user interface. Position the various elements of the website such as the title, sidebars, logos, images and text in the same place on every page to make your site navigable and intuitive.
   • Keep the same header at the top of every page. Whether or not your site's content allows for a lot of repeating elements, make sure the top of every page is the same.
   • Use logic in your design. The elements on a single page should be logically ordered by importance or topic; the different pages on the site should be too.
2. Create a consistent style. Where the layout should give your site structural consistency, the style should provide thematic harmony.
   • Stick to two or three main colors and make sure they go well together.
   • Avoid using too many font styles or sizes; if you want to alternate a few, use them the same way on each page.
   • Use Cascading Style Sheets (CSS) to maintain a uniform style and make it easier to change elements across an entire website without having to go to each page separately.
3. Maximize readability. To make your text easier to read, you can split it into smaller parts.
   • Use subtitles and proper spacing to separate each of the parts.
   • Use bold letters or different sizes to show the hierarchy and importance of the topics.
   • Pay attention to how you treat text. Don't make the font too small, and increase the line spacing to make large chunks of text easier to read. Large patches of text are more difficult to read; break it down into smaller paragraphs.
4. Make your website universally readable. Use standard HTML and avoid tags, features, and plug-ins that are only available for one brand or version of a browser.
   • While most modern browsers and computers can handle complex images, everything will look slicker if you shrink and optimize your images for the web. Weigh the importance of quality against the importance of speed.
5. Test your website. Make sure that every link works as you would expect, and images appearing correctly.
   • You may want to organize some user testing by having members of your target audience test the clarity and ease of use of your design and provide feedback about your website.
6. Publish your website. Buy a domain name if you haven't already. Periodically check whether links are still working and listen to suggestions that visitors email you.

Tips

• While you are free to design the layout based on your own personal vision or things you've seen on other sites, it can be easier to buy a ready-made design.
• Do not bombard the visitor with cute, special pictures. Flash animation, bright colors, patterned backgrounds, and music that automatically plays on page load were fun experiments in the 90s, but now they will scare users away. Stick to simple backgrounds that contrast with the text color for maximum legibility.
• You can always use CSS to optimize paragraph spacing.
• For visitors with hearing or visual impairments, you can subtitle videos, transcribe audio and add an accessibility message. While tables can be an efficient way to organize information, visually impaired visitors using screen reader software may not hear the material in the correct order.
• Let your visitors save ink: use a separate style sheet for print pages.
  • Turn off background images when setting the print parameters.
  • Use black text on a white background.
  • Remove the menu bar and unnecessary images.

Warnings

• Avoid plagiarism and obey all copyright laws. Don't include random images you find online or even structural elements without approval. Everything you use on your site must be both legal and ethical.