Web Developer Class: How to Create Consistent Web Layouts
1. Who is Your Audience?Before you even begin to build a Web site, consider your audience. Before you spend a lot of time and effort, it is necessary to do some do keyword research to see if your product or service is a viable solution. One service I recommend for this purpose is Market Samurai. A free solution is the Google keyword tool.
2. Create a StoryboardThere is an old expression in programming which states: "The sooner you start to code the longer it takes to finish." With that in mind, the first step you should observe is to create a storyboard, essentially a flow chart that you build on paper. If you run into problems, they are much easier to fix here than during the process of building your Web site.
3. Visit Forums and BlogsAnother important research technique is to find out what users actually want. In this case, visit forums and blogs that cater to your interest and find out what users have to say on the subject.
4. Viewing SizeViewing size is how the user will see your finished design. Unfortunately, this can vary widely depending on the size of the viewing area and whether the browser is maximized or not. According to some online research, a good starting point is to design your Web pages for a maximum viewing size of 776x424 pixels in order to reach 95% of visitors. If you decide to design for a larger viewing size, be aware that some users might have to scroll to see the entire page, which will detract from your overall design.
5. ConsistencyA big problem with Web site design is a lack of consistency. To fix the problem, consider using templates. In many cases, you will save yourself a lot of time and effort. One option to consider is to use Wordpress to build your sites. It offers many templates, both free and professional.
6. Use CSSCSS (Cascading Style Sheets) are very important for maintaining consistency. Simply making a change to your CSS will immediately update the entire site (assuming that the CSS document is linked to all pages).
7. Keep it SimpleToo many Web designers are seduced by technology and wind up building unnecessarily complicated sites. In reality, simple is better. Your message will be clearer and more direct.
8. Image SlicingOccasionally, a web designer will want to use an image that covers the entire page. The down side is that such an image is likely to be quite large and could take quite awhile to load. This poses a danger because if the image takes too long to load (roughly ten seconds), you run the risk of losing your audience. The solution is image slicing, which breaks the image into sections that load a bit at a time. This lets the user know that the image is in the process of loading and they are more likely to wait until the process is finished. Another option is to consider creating a web gallery. In this case, one page would show a number of thumbnails, which, when clicked upon would open another page which contains a larger image.
9. Use Stock PhotographyBuilding a Web site is often a time intensive process, especially when it comes to creating images. One simple (and often inexpensive) solution is to use Stock Photography. Many options exist, such as rights-protected or royalty-free imagery.
10. Use CompsA comp is a low-resolution image that you can download from many Stock Photography sites and use as part of your layout. With such an image you'll be able to see if your design "works," or not.
Additional NotesOne of the issues you'll face when designing for the Web is how much space of your design is taken up by the browser, so it's important to preview your design to make sure that it's working. It's also useful to upload your pages to test them. As an example, if you use include files, these might not display properly in different browsers.
About the AuthorNathan Segal has been working as a technical writer for 13 years. His specialty is taking complex subjects and turning them into language that anyone can understand. To improve your photography, image processing and results, visit: DigitalArtistU.com
IT Solutions Builder TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD
Which topic are you interested in?
What is your company size?
What is your job title?
What is your job function?
Searching our resource database to find your matches...