The smart way to design web sites
Intro | Steps | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
Introduction
| -Most novice web designers start the process by building a front page -Usually without a plan
-The bottom up approach means to plan your site and work back to the front page-Makes content prime focus (as it should be)
-By taking the time to plan a few things out, layout, navigation, and design beccome easierThe other side - Technical side of web design -You can learn how to do something, but unless you learn why the how doesn't stay with you
-We are going to learn many "technical" things, but only to accomplish the methodology -Once you learn the technical side of things, you will see the real challenge lies in mastering the architecture and design processes of a website |
The Steps
| 1. Brainstorm 2. Group information 3. Critique the categories 4. Revise your categories 5. Develop a flow chart 6. Design a navigational plan 7. Page layout 8. Keep it simple 9. Make the pages 10. Publish |
Step 1: Brainstorm
| 2 things to brainstrom -Topic -Items you would like on the page Topic -All websites need to educate and inform their viewers (so anything fits into education with the web) -What is the purpose of your website -Classroom website
Items-Website on a specific topic -etc. -Can be other pages and information you produce -Links to other sites -Images -Information hosted elsewhere on the Internet -Any valuable item that is appropriate for your topic -Item examples for a classroom website: |
| Homework | My email | Student work | Assignments | Textbook |
| Cool links | Book list | Syllabus | Meeting dates | Club outings |
| Guide to writing | Requirements | For parents | For students | unit objectives |
| FYI | Activities | Calendar | Supply list | What's new? |
| Puzzles | Newsletter | Contact me | Test review | Grades |
Activity:
Makes notes of your brainstorm on paper (or computer). Keep in mind school just got out, so you don't have to be serious if you don't want to be.
Step 2: Group Information
| -Try and group your items into 2 to 5 categories -See if you can come up with a name for each category -Should be short and descriptive
-Categories could be by:-Who you think you be looking at information
Here are some of the examples above grouped into three categories:-Common information -By theme -etc. (notice some items fall into multiple categories) |
| News | Class Info | For Parents |
| Homework | Guide to writing | Contact me |
| Puzzles | Syllabus | Book list |
| Activities | Unit objectives | Students work |
| Calendar | Supply list | Syllabus |
| Test review | Book list | Homework |
| Student work | Cool links |
Activity:
Group your items.
Step 3: Critique the Categories
| Time to look at the categories with a critical eye. Ask yourself the following questions. A. Who is my audience? What are they looking for? B. What is most important to them? Will it be easy to find? -The most important information should no be more than a couple of clicks away.
C. Will they have to jump between categories to find what they need?-In a kitchen, it makes sense to have the stove, fridge, and sink in close proximity. The same hold true on a website.
D. Should some items be in more than one category?-If posting an assignment, resources for that assignment should be close by. -You can and should put an item in multiple categories when applicable.
E. What items will stay the same and what items will need frequent updating?-The design of the web makes the possible without having to recreate information (hyperlinking, you'll see). -This is important. Your website should make your life easier not harder.
-Consider a section of your site that won't need much updating and maybe one section that you focus on updating. -Make your life easier.
-Will help you stay focused on the most important content.
F. Do the categories make sense? Do they describe what's in them?-Do not set your ambitions too high. A "quote of the day" sounds good, but that could mean a lot off updating. A weekly reveiw guide may be a better choice. -So, don't bite of more that you can chew. The road to ugly web design is paved with good intentions. -The categories should guide the user to content.
-You will not be around to guide users through the site. -You may think a picture of a bee makes sense for a spelling list, but will the viewer? -Creativity is good, but your site needs to be cclear in its organization and navigation |
Answer these questions
Step 4: Revise your Categories
| -Using your answers from step 3 make revisions to your categories. -Stay focused on what is will be like ffor your audience to find inforation they want. -Remember that when confronted with ew information people make their own assumptions about what information they'll ffind and where they will go to get it. |
Revise your categories.
Step 5: Develop a Flow Chart
| -Take the finalized categories and items and put the into a flow chart -This will help us understand navigation, ease of getting at information, and will say a thing or two about layout -It will also serve as a way to keep track of your pages. Here are two examples from the categories above: |
Important Tip:
| As you layout your flow chart you need to balance the breadth and depth of the ddesign. For example, i you had 12 second level pages and no third level you would have a very broad and shallow site that wouldd force the viewer to sort through a long laundry list of second level page choices. Inn contrast a site with only 3 second level pages and a depth down to 5 levels might force the viewer to click down througgh too many levels to reach the infformation they were looking for. As with most things in life, look for a balance. |
Activity:
Create a flow chart of you categories.
Step 6: Design a Navigational Plan
| -Time to think about the navigational path viewers will take as they move around your site -Users will probably start on the front (actually called the index page) page and click to a second level then perhaps to a third level -Most people will use the back button to go back
-Should develop a nav system to give them shortcuts from one portion of the site to another-Remember balance
-Once approach is to put a simple navigation bar at the top of every page-You don't want to include too much as to confuse the viewer -Impractical to provide links to all information on every page -Includes link to index page and second level categories.
-Gives users simple and easy navigation as well as a "recognizable" reference point. -Example: |
|
-Each of your pages could begin with this navigation bar
Frames-Clear and consise -Notice each link is a short word, not a phrase -You may have heard of frames -Loading two html files in one window -usually for navigation
-So many issues with using them-confuse the user and the browser using the back buttom
-NEVER USE FRAMES-hard for the user to print out a web page -bard to bookmark framed page -take up a lot of valuable screen real estate Location -Where is the best place for you nav? -The example above works best at the top and bottom of you page -Could be on the side -Make sure is doesn't interfere with content -Should be on all pages -Don't rely on a browsers back button.
Images -Also put a second way to navigate your site -Some people turn images off -The visually impaired rely of software to read the web to them -Always use alernative text (we will get to this) |
Activity:
Write down a couple navigational ideas. You will revise this during the next step.
Step 7: Page Layout
| -Now you should apply the ideas above to a layout -Each page should include: -Navigation links at the top (possibly the bottom)
Important Tips-Identifying information on site name and organization -Page content -Clearly identify the title of the current page
-viewers need to know where the "currently" are
-bold graphics help
-don't make so big it take up too much space -Use the "above the fold" rule
Important information should appear without scrolling
-Each page can be as long as you like
-Most important information should be at the top
-Don't over do it
-Do not make a page so wide, a user has to scroll side ways
Example of a content page:-a safe bet is to stay under 800 pixels (will explain later just keep in mind
|
Activity:
Draw out a couple of different layouts. Include areas for content, navigation, identifying information, and any other items you will include.
Step 8: Keep it Simple
| -A simple saying that isn't used enough -Don't overcomplicate a page -Say no to: -Scrolling banners
-Any graphic you add to the page increases its download time-Anmations that distract from the message of the site -Automatically playing music -Anything that is hard to upkeep -Pay attention to graphic file size
-Start page should load quickly-In other words, just keep it simple. Complexity is the mother of bad websites. |
Step 9: Make your Pages
| -Now you have a plan for your site -You may start making your site with what ever tools you would like -You may even want to start with third level pages first and work back to your homepage -Reference your plan constantly to make sure you are staying on track -Use good web design principles Example of front page using above information: |
Step 10: Publish
| -On the web publishing is easy -Just copy your folder to a web server (your tech person should be able to give you somewhere to upload you website) -Web publishing does not follow the print world model. Meaning a final draft. On the web it is assumed everything is a work in progress. The web is alive and ever changing, that is what makes it such a powerful form of communication. -Since this is assumed, do NOT use cute "under construction" pictures. The web is always under construction. Revision and updating is part of the web publishing process.
|