STEP-BY-STEP HTML WEB DEVELOPMENT

This Step-By-Step Guide Is Designed To Help Students Work Within A Structured Framework When Approaching Web Jobs.

 

1.     Design Research Stage

Make a three column worksheet, with Columns A, B, & C (described below)

a.      CONSULT WITH THE CLIENT AND Write out a LONG list of characteristics you’d like the site to embody. (example: easy to use, strong, secure, ect) Make the list as long as you can. Consult friends, family, and Elvis from beyond the grave. Actually make a list of characteristics you’d like your site to have--don’t just think one up in your head.

b.      Write out a list of other INDUSTRIES that embody the characteristics you came up with in column A
(example: if you’re building a site that you want to be "cool", you might list “nightclubs”, "Sport cars", "Music", ect. as a business that project the same image.) Think of as many industries as you can. You can try reading your list of target characteristics from step “a” to a friend and ask them what businesses come to mind. The industries you come up with in column B don't have to embody all of the characteristics from column A. A couple of characteristics will do.

c.      WRITE OUT A LONG LIST OF SPECIFIC BUSINESSES THAT YOU KNOW OF in the industries you listed in column b.
(Example: if you listed "Luxury Cars" in column B, you could list Cadillac, Mercedes, Saab, BMW, ect...)

d.      SEARCH FOR THE BUSINESSES & CATEGORIES YOU LISTED IN STEPS B & C.
Find at least five pages on the internet that successfully give the feeling you’d like your site to give.
Once you find a good page, put it in your Bookmarks / Favorites, and take notes (described below). Don’t settle for a “pretty good” page. You’ll see a lot of clunkers. Bookmark them in a “clunkers” folder. The clunkers can be approached when you’re finished building your current project. Maybe they’ll be your next client!   

 

e.      WHEN YOU BOOKMARK A PAGE, Take point-by-point notes about why each page is good. Pay special attention to colors, alignment, and how the designer created a “whole-page” look. You’ll use the notes you’re making when you create site comps.

 

Take Notes on:

*         Good Navigation

*         Good Title

*         Good Content Area

*         Good "Whole Page Feel" 

2.     Comp Creation Stage

a.      Figure out exactly what the elements of your page will be. What will you have on the page? How many buttons, and pictures? Is there a logo? How much text do you have? Don’t forget about the link to your site! If you don’t know exactly what goes on the page, you’ll be constantly re-designing when it becomes necessary to include unplanned items. Make sure you communicate with your clients. A last minute re-design can be time consuming and costly.

*         Try to get a good idea of how much text you’ll have before you start designing. The amount of text on a page is important to any design. If you don’t have the actual text yet, copy and paste something like “blah blah blah blah” in the text area.

b.      DECIDE ON A COLOR THEME

c.      Create a Fireworks file. If you’re designing a web page with default HTML margin settings, your Fireworks file should be 768 x 600px. If you’d like to push your page elements right up to the edge of the screen, size your Fireworks page to 780x600px.

d.      Use Fireworks to design a homepage, complete with text, images, and design elements. The Homepage comps should look “finished”, but except in special cases should not have working rollovers, or anything like that. Comps are just pictures. Feel free to get creative and design “outside of the box.” It's okay to use text from a different website until you get your final text. Use your notes from the "Design Research" Stage above to guide your design goals.
 

*         Pay special attention to the design principles of Alignment, Proximity, Contrast, and Repetition. If you’re new to design, and you haven’t yet read The Non-Designers Design Book… my God, go buy it. Amazon sells it for twelve bucks. While you’re there, check out how Amazon achieves a whole-page look. If you have read the book, go back and scan it again quickly. Basic design principals make a huge difference.

*         Remember to give the page itself some design elements to tie everything together. You want to avoid the impression that your site is just a bunch of things stuck on a page. Check out http://www.kolemeth.org/ or http://www.theendup.com/ for good examples of pages that use design elements to create a “whole-page” look. Notice that even text heavy pages like http://www.yahoo.com/ are also designed to give the page an artistic flow.

You can tell your page has a “whole-page” look, when you stand back 15 feet from the monitor and the site still looks good.

The page itself should be a work of art. If you feel stuck or have designer’s block, consult your bookmarked sites from the Design Research Stage (above), and study how they achieved a “whole-page” look. If you need to, go back to the Design Research Stage and find more sites. Something relaxing like going for a walk can rejuvenate tired spirits and set your design creativity back on track. Do not settle for “good enough.”

*         If you’re not TOTALLY in love with EVERY SINGLE PART OF your design, keep trying. It should sing! The best web sites are built by perfectionists who won’t settle for anything less than the best they’ve ever done. If you just can’t seem to get the some element like the buttons perfect, go check out sites from the Design Research Stage (above.)

e.      pay special attention to download time While designing. What elements can be translated to fast loading HTML later on? You can do a lot with JPG and GIF compression, but it’s not magic. If your page is full of high quality photographs, it’ll probably take a long time to load. Later, when you build the final page in Dreamweaver, you’ll want to translate as many design elements as you can to HTML. For example, background colors, text, lines, and borders can all be transformed to HTML. Remember, Cascading Style Sheets give good control over text.

f.       Build at least 3 homepage comps. Each comp should be different from the others, not just a reshaping of the first comp. A good technique is to build one comp exactly like you think the client wants, one a little more passionate, and one a little more business-like. Build at least 3 comps for every site, even if it’s charity work or if it’s for your personal homepage. Don’t cheat yourself into building a substandard site. The first comp is rarely the best.

*         You should really like each comp. If you’re working for a client, it should be hard for you to guess which comp they’ll choose. Keep working until you are very proud of each comp. Then work some more. Each element of each comp should be perfect!

*         If you get really stuck, or totally run out of creativity, take a break. Go for a walk, or something. Most people can’t design for super long stretches. Designing should be fun.  

g.      After a final comp is selected, build at least two generic “inside page” comps. These pages will be the base templates for other pages in your site. The back pages’ look will be based on the home page and should carry over some of the main elements, but the back pages should be different than the homepage. Usually back pages are less flashy, more information (text) oriented, and are pretty easy to design. 

3.     Page Creation

a.      Decide what should be sliced.

*         Slicing in Fireworks creates tables. If the table structure is too complicated, consider using the crop tool to cut out the page in chunks. Separate main elements (like the navigation bar) by cropping, and slice them individually.  Later you’ll import each section into a table you’ll build in Dreamweaver.

*         Remember that you’ll be able to use background images on your final page. If you have a repeating element or a large image that covers the page, consider using a background image!

b.      Slice your Fireworks file and create rollovers. Remember that slices should be adjusted to minimize complicated tables.

c.      Optimize each slice in the preview tab.

d.      Name each slice on the Object Palette.

e.      Export your Fireworks file(S). Remember that exporting is different than saving.

f.       Import your Fireworks file(S) into Dreamweaver. Of course you’ll need to have a site previously created in Dreamweaver. You can import a Fireworks file into Dreamweaver by clicking INSERT-> INTERACTIVE IMAGES-> FIREWORKS HTML.

g.      In Dreamweaver, remove unwanted Fireworks images. Fireworks will fill every table cell with an image. If the cell is empty, it usually doesn’t need an image. Delete the images and use background colors instead.

h.      Replace Fireworks images with HTML WHEREVER possible. HTML loads faster than images do!

i.        Use Dreamweaver to link pages together.

4.     Site Testing

a.      Upload the site to your server. Don’t tell the client it’s done yet.

b.      Test the site on every conceivable platform and browser. Macs sometimes display sites differently then PCs. Internet Explorer is different from Netscape. Shoot, Netscape 4.7 is pretty dang different from Netscape 6.0.  E-mail all your friends and everyone you know.  Ask them to check the site. Ask them to report anything that doesn’t work, seems wrong, or that they just don’t like. Develop a thick skin and take your friend’s criticism for what it is—help to become a better designer.

 

Upload, and you’re done, baby! Woo Hoo!