Web Design Course Step By Step Web Building Project Guideline

Client Information Stage

 

Get a possible client. Set up an in-person meeting.

Ask them to bring the following things to the meeting:

a.      Any brochures, logos, artwork, and business text they might have.

a.      Get everything in digital format. If their old designer has it, ask for the designers contact informationyoull take care of everything.

2. Images they have that represent their business, in digital format, if possible.
   
   
1. If the images are not scanned, youll have to scan them later.
   
   
   

c.      Ask if they have someone to do the creative writing, or would they like to work with your copywriter?

1. If they have text, ask for it in digital format.
   
   
2. If they plan on writing, let them know about the challenges in writing for search engines, and set a deadline, punishable by a daily fine.
   
   
   

Ask the following questions:

1. What is the major goal youd like your site to achieve?
   
   
   
2. Other than your main goal of________, what ways do you feel a website could possibly help your business?
   
   
   
3. What are your businesses major selling points?
   
   
   
4. What feelings do you want your clients to get when they first see your site?
   
   
   
5. In terms of looks, do you see your website as more male, female, or neutral?
   
   
   
6. Please describe what the majority of your current clients are like.
   
   
   
7. What characteristic of your business do you think first time clients are most impressed with?
   
   
   
8. Would you like to expand your business into other client demographic(s)? If so, please describe.
   
   
   
9. Do you currently have any partnerships or mutually beneficial relationships with other companies? If so, what companies? (Get as much info as possible, including contact info)
   
   
   
10. Who are some of your competitors? Do they have web sites?
    
    
    
11. Ask the client to imagine that they are a person who is looking for a service like theirs. What phrases might they type into a search engine? Brainstorm with them. Come up with a lot!
    
    
    

Create a Site Map

a.      Work with the client to decide all of the sections of the site. Map out the site in outline form.

b.      Have the client "sign-off" on the site map.

Tell the client youll contact them with a quote when you have completed your "research" and have something for them.

 

Search Optimization, Part 1

Choose Keywords To Target

�.       Refer to http://www.awdsf.com/courseware/search_engine/keywords.htm for details on choosing keywords to target

 

Give a narrowed down Keyword list to the client so they can weed out any phrases that dont really belong with their business.

For every page youll optimize, choose your most important keyword phrase and a back-up, less important keyword phrase.

Create keyword rich body text.

�.       Refer to http://www.awdsf.com/courseware/search_engine/keywords.htm for details on creating keyword rich body text.

 

Research Stage

 

Write out a list of feelings youd like the clients site to give.

a.      Make the list as long as you can. Consult friends, family, and Elvis from beyond the grave. Actually make a list of characteristics youd like your site to havedont just think one up in your head.

Write out a list of other industries that embody the same characteristics you want your site to have.

a.      If youre building a site for a record shop, you might list "nightclubs" as a business that projects the same image.)

b.      Think of as many industries as you can.

c.      Read your list of target characteristics from step "1." to someone and ask them what businesses come to mind.

Think of and write down specific companies that meet your sites criteria

a.      (Example: if youre building a site for a record shop, you might list "MTV" or "The Bee Gees Website" as a specific business that projects the same image.)

Search for the businesses & categories you listed in the two above steps.

 

a.      Search for and find at least five pages on the Internet that successfully give the feeling youd like your site to give.

b.      Create a "good sites" folder. Bookmark good sites you find into your "good sites folder." Dont settle for a "pretty good" page.

c.      Create a "clunkers" folder. Bookmark all the clunker sites you see, and youll see a lot. (the clunkers will be approached when youre finished building your current project. Maybe theyll be your next client.)

Search the Internet for the words that made up your list of "site feelings"

 

a.      Actually search for the words you listed. For example, if one of your site feelings was "professional", Search Google for the word "Professional". (The idea being, that if a site ranks near the top of a search for "professional", that site will probably be pretty professional looking.)

b.      Bookmark the good sites you find

 

Search for other web design companies, and look through their portfolio.

 

a.      Search for "design" and your target feelings. Example: "Aggressive Web Design" or "Relaxed Design"

b.      Bookmark the good sites you find

Organize Your Bookmarks

a.      Organize your bookmarked sites into the following categories:

a.      Really Good Navigation Area

b.      Really Good Title Area

c.      Really Nice Looking Content Area

d.      Great "Whole Page Feel"

Take point-by-point notes about why each site deserves to be in its above category.

a.      Pay special attention to colors, alignment, and how the designer created a "whole-page" look. Youll use the notes when you create site comps.

Comp Creation Stage

Figure out and write down exactly what the elements of your page will be. Make a list of the following:

a.      How many buttons, and what are they?

b.      Will you use certain photos?

c.      Is there a logo youll need to include?

d.      How much text do you have? (150-250 words for search engines)

e.      Dont forget about the link to your site!

f.       Send your client the list of page elements for approval.

 

Decide On A Color Theme

 

a.      You dont have to lock in color choices now, but you should have some idea. For help choosing color, you can use Color Theory For the Web, available at Amazon.

Create a fireworks file.

 

a.      If youre designing a web page with default HTML margin settings, your Fireworks file should be 768 x 420px. If youd like to push your page elements right up to the edge of the screen, size your Fireworks page to around 780x435px.

Use fireworks to design a homepage, complete with text, images, and design elements.

 

a.      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." 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.

 

�.       Its a smart idea to go back and scan The Non-Designers Design Book if you have no professional design training. Basic design principals make a huge difference.

�.       If youre new to design, and you havent yet read The Non-Designers Design Book, my God, go buy it. Amazon sells it for twelve bucks. While youre 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 for that "Whole Page" look.

You want to avoid the impression that your site is just a bunch of things stuck on a page. Check out www.kolemeth.org or www.theendup.com or even our web design course for good examples of pages that use design elements to create a "whole-page" look. Notice that even text heavy pages like 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.


If you feel stuck or have designers block, consult your bookmarked sites from the Research Stage

 

�.       The page itself should be a work of art. Study how other designers made great buttons, navigation areas, text layout, or whole page look. Its okay to "borrow" from other designs. Thats how you learn. 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, or something invigorating, like exercise. can rejuvenate tired spirits and set your design creativity back on track.

If youre not totally in love with every single part of your design, youre not done.

It should sing! The best web sites are built by perfectionists who wont settle for anything less than the best theyve ever done. If you just cant seem to get the some element like the buttons perfect, go check out sites from the Research Stage (above.)

 

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 its not magic. If your page is full of high quality photographs, itll probably take a long time to load. When you build the final page in Dreamweaver, youll 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.

 

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 its charity work or if its for your personal homepage. Dont cheat yourself into building a substandard site. The first comp is rarely the best.

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

Show the Comps to the Client

 

�.       If possible, show the comps in person to better gauge reaction.

�.       Always show comps on a computer for maximum effect.

b.      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 page 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.

Page Creation Stage


Decide how the design should be sliced.

a/)  If you have a repeating element or a large image that covers the page, consider using a background image to simplify the building process.

a.      If you use a background image, remember that many of your images may need to be transparent (to show the background)

b/)  Consider using the crop tool to cut the page into chunks.

a.      Separate main elements, like the navigation area, the title, and the content area.

b.      Later youll hand build a table in Dreamweaver and import each section.

Slice your Fireworks file and create rollovers.

 

a/)  Remember that slices should be adjusted to minimize complicated tables.

d.      Optimize each slice with the Optimize Palette and the Preview tab.

e.      Name each slice on the Object Palette.

f.       Export your fireworks file(s). Remember that exporting is different than saving.

g.      Import your fireworks file(s) into Dreamweaver.

.       You can import a Fireworks file into Dreamweaver by clicking INSERT-> INTERACTIVE IMAGES-> FIREWORKS HTML.

h.      In Dreamweaver, remove unwanted images.

.       Fireworks will fill every table cell with an image, but if the cell is empty, the space holder can be safely deleted.

i.        Replace fireworks images with html wherever possible. HTML loads faster than images do!

j.        Use Dreamweaver to link pages together.

Search Optimization, Part 2, Optimizing Your HTML

 

There are a number of different places in the HTML that search engines pay attention to. For more information on optimizing HTML, see http://www.awdsf.com/courseware/search_engine/keywords.htm


Be sure to optimize the following things:

a.      The Title Tag

b.      Image "ALT" tags

c.      Meta Tags

d.      Keywords Meta Tag

Site Testing

a.      Dont tell the client its done yet.

b.      Upload the site to your server.

c.      Test the site on every conceivable platform and browser.
Do not Skip This Step!

a.      Make sure you test on

                                                              i.      Internet Explorer 5.0 Mac & PC

                                                             ii.      Netscape Navigator 4.0, Mac and PC

                                                           iii.      E-mail all your friends and everyone you know. Ask them to check the site. Ask them to report anything that doesnt work, or seems wrong.