Web Site Design Approaches

Design Approaches

Designing a Web page is very similar to designing software in certain ways. Many different approaches can work, and so you may have to experiment to see what works best for you. There are many ways to accomplish the same effects, and so there is room for personal preference and style in how you build Web sites. These definitions of different design methodologies are not hard and fast, but they are practical. Most likely, the end result will be a mix of these techniques!

Example of Wireframe Diagrams

• Storyboards and Wireframes: A purely informational, architectural schematic that shows major content placement, primary and secondary navigation, and light functionality. By putting all page elements down on paper, you can see what you’re designing before you start the visual design phase. Plus, looking at wireframes in relation to each other (interactive wireframes) gives you an idea of page flow. A Firefox extension called Pencil allows you to create user interface diagrams and drawings, and save them as images. I have not tried it, but it might be useful. Try it and I will look findly upon you.
• Outlines: Hierarchical decomposition of the domain. This kind of categorization is more about analysis than design, but it will guide the design process:
  • Makes finding info faster and easier.
  • Divides info into smaller, easier to digest chunks.
  • Emphasizes the similarities between info, and therefore helps point out the differences between info.
  • Provides "paths" to information.
• Another approach is Mind-Mapping. This visual outlining approach appeals to visual thinkers more than a typical outline, but it is conceptually the same. Look at the free tool Freemind to see if this approach would be good for you. Mind42.com has a Web-based Mind-mapping tool.
• Rapid prototyping: Create a rough design for the site. Hack out some variations, then iterate over the promising approaches. Continue until you’re happy or you run out of time (the most likely scenario).
• Incremental development (design and implementation) as methodology. The Web is not like paper: everything can—and will—be changed after it is first published. The basic idea is to rough out the pieces of the site, and then systematically expand the various sections until you’re done. You can easily change a page or a style sheet or a template, and simply update whatever has changed.
• Create an “impression” of something you like as a drawing, possibly combining things you like from different sites as a starting point. Develop the site from that point using whatever methodology suits you.

You don’t have to design the entire thing before creating anything. As you gain experience, you’ll develop a design methodology that works for you. In the beginning, it will be helpful to be as structured as possible: write out the layouts, color choices, page names, etc in your design for reference as you design and build your site.

Starting with a Blank Page

Here is a process for systematically going from a blank page to a Web page. All Web development is incremental, so you start with the blank page and keep adding stuff until it looks like what you need. I encourage beginners to keep checking your work after making baby steps, instead of doing a bunch and then checking. If you check it often, you’ll catch errors before they cause other things to break.

1. Design your desired page layout, and decide what the main boxes are that make up that layout.
2. Create the starting HTML page by copying the Canonical Page template.
3. Define the main boxes for your page layout, such as header, navigation, content, and footer.
   1. Define classes in the <style> section for each of those boxes. Each class is assigned a name that you make up, based on what the box is going to contain. Make the style definitions empty initially, using the curly braces. To make it easier to see what you’re doing, you can apply a background-color and a border to each DIV, so that you can clearly see where they are.
   2. Define DIVs in the BODY section for each of your boxes, and assign the class names you’ve chosen for each box.
4. For each box in your layout:
   1. Insert the "raw" content into each of the boxes.
   2. Begin to apply CSS styling to your boxes using the class names you’ve already defined.
5. Position your boxes where you want them to appear on the screen.

Starting with a Template

Another way to get started is to pick an example layout from the many examples I’ve given you. Start with a template where the main boxes are laid out the same way as called for in your design. Simply change the names of the classes to match how you’re going to use them, take out any styling that you don’t want, and add the styling that you do want. Since the boxes will already have the basic positioning, you can simply add your own content to the boxes, and tweak the positioning to be exactly what you need.

WYSIWYG vs Code View

Web pages are just text files, so you can use a plain text editor. All of the HTML formatting is created with textual markups of the underlying text, but the markup is itself text. The cleanest code you’ll ever see is hand-written in a text editor -- most HTML code generated by WYSIWYG (What You See Is What You Get) systems is bloated and poorly formatted. A text editor knows little or nothing about the domain, though, and so can do little to assist you (highlighting HTML syntax; validating your code) with creating HTML code.

• Macintosh: TextEdit comes with current versions of OS X. If you don’t find it in the Dock, look in Finder > Applications. It can open and display PC docs such as MS Word. It can save files in these formats: rtf html doc xml.
• PC: Notepad or Wordpad can be used to edit all text files, including HTML files.