How to Create or Design a Website

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.

Basic HTML Help

Sample Webpage with HTML

HTML Cheat Sheet

Sample Simple Webpage

Part 1 of 3: Finding Your Design

1. 
   1
   Design your own website. if you're new to web coding and design but you really want to build a website yourself, there are many options open to you. You can build a simple site by teaching yourself basic html and CSS coding. Just be sure that you can also make it look nice and professional!
   Ad
2. 
   2
   Use a pre-made website template. You can purchase or find free pre-made websites very easily on the internet. These are pre-made codes which you simply use and alter to your own needs. There are many reputable providers of templates, but a good one is Wix.
3. 
   3
   Hire a website designer. If you want something tailored to your needs that looks professional and runs great, it's probably a good idea to hire a website designer. While this will definitely cost you money, it won't be as expensive as it sounds. You can get a designer on the cheap by advertising at a local technical college or university. Their experience will help guide you to a more successful, more professional website.
   
   

Part 2 of 3: Making Basic Design Considerations

1. 
   1
   Streamline your webpage. You want everything to be as fast and easy to use as possible. Minimize the number of choices that someone has to make, make navigation extremely self-explanatory, and help them get to what they're looking for as quickly as possible.
2. 
   2
   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.
3. 
   3
   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.
4. 
   4
   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.
5. 
   5
   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.
6. 
   6
   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.
   Ad

Part 3 of 3: Designing for Devices

1. 
   1
   Account for mobile browsing. More and more internet browsing is being done on mobile devices these days. If you want your website to attract and keep the highest number of people, you'll need to design your website to be highly usable on mobile devices. The best thing you can do to ensure this is to have a separate website for mobile users but there are other options as well.

   • Look for examples of mobile sites. Often, sticking an "m." in the "www" place in a web address for major websites will bring up the mobile version of the site. You'll need to do something similar.
2. 
   2
   Keep your website simple. In general, your design should be simple and to-the-point. Long gone are the days of complex tables and flashing graphics. All users will want something easy to use. This means simple design, minimal columns, and minimal text entry necessary to navigate the site.
3. 
   3
   Use responsive design. Responsive design is a way of coding your website so that instead of fitting to a few particular sizes of screen, it will adjust to fit any size screen. This is most easily accomplished by setting the column widths to percentages rather than pixels, but more elegant methods also exist.
4. 
   4
   Avoid design features not supported by mobile devices. Many mobile devices can't display things like pop-ups, Flash, Java, or frames. This goes back, again, to wanting to keep your design as simple as possible.
5. 
   5
   Consider making an app. Under certain circumstances it may be easier for you to simply make an app instead of having a mobile version of your site. You don't have to have amazing programming skills to do this, however! Much like there are providers of website templates, there are also companies which will design a basic app for you. Conduit Mobile is a good service to use.
   
   

Video

This video shows how to design a website home page using Adobe Fireworks, but the tips shown here can apply to other design programs such as Photoshop.

Tips

• 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.
• 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.
• 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.