The following document is a work in progress. Contact Mr. Le Duc, Mr. Wright or refer to the Course Catalog for more information about this class.
All + All -
- + -
Teaching and learning techniques used in this class
- - [ ] Identify Standards for all areas of study
- + -
- [ ] Learning Mastery Model
- - [ ] Explain process . . .
- - [ ] Link to www ???
- + -
- [ ] Use Total Quality Learning process
- + -
- [ ] Link to Langford Institiute ???
- - [ ] What, Why, and How for each activity
- + -
- [ ] Link to Langford Institiute ???
- + -
- [ ] Use Path of Least Resistance Theory
- - [ ] Link to site ???
- + -
- [ ] Identify and use Natural Planning Model steps
- - [ ] Link to GTD site
- + -
- [ ] Use reflective, analytical, procedural writing
- - [ ] research ???? through reflective writing
- + -
- [ ] Develop understanding through class discussion
- - [ ] Cite card process and research ???
- - [ ] Set up participation points
- + -
- [ ] Develop skills and understanding through small group
- activities
- - [ ] Cite research ???
- + -
- [ ] Learn through interactive arts exercises
- - [ ] Cite research???
- + -
- [ ] Jensen's Brain Research
- - [ ] www.????
- - [ ] Use Thinking Maps to brainstorm ideas
- + -
- [ ] Hands on project work
- - [ ] Research . . . ???
- + -
Project Management, Visual Communications and the Mind
- + -
- [ ] Blog the five steps of the Natural Planning Model
- - [ ] 1. Defining purpose and principles
- - [ ] 2. Outcome visioning
- - [ ] 3. Brainstorming
- - [ ] 4. Organizing
- - [ ] 5. Identifying next actions
- + -
- [ ] Blog the names of the eight type of Thinking Maps and
- their uses
- + -
- [ ] chs.osd.wednet.edu—tm
- ~
- - [ ] Bridge Map
- - [ ] Multi-Flow Map
- - [ ] Double Bubble Map
- - [ ] Tree Map
- - [ ] Brace Map
- - [ ] Flow Map
- - [ ] Bubble Map
- - [ ] Circle Map
- + - - [ ] View Edward Tufte Examples
- + -
- [ ] Create a Mind Map about a logo for yourself
- - [ ] Include elements of personal life
- + -
- [ ] Blog your own list of 10 rhyming lines for better memory
- + -
- [ ] Read the Memorizing Techniques article
- + -
- [ ] www.positivehealth.com—lane56.htm
- ~
- d_Matters/lane56.htm>
- + -
- [ ] www.positivehealth.com—lane56.htm
- + -
- [ ] Read the Memorizing Techniques article
- + -
- [ ] Blog the five steps of the Natural Planning Model
- + -
History of Media
- + -
- [ ] Write a 500 word report on one of the Visual
- Communications themes below:
- + -
- [ ] Identify significant discoveries, developments, and
- inventions in the history of media.
- + -
- [ ] Describe the chronology of the development and
- popularization of media.
- + -
- [ ] Document the significance of early documentary media
- and its social, political, and scientific impact.
- + -
- [ ] Identify the historically important figures and
- sponsoring individuals and agencies.
- + -
- [ ] Distinguish between various movements, styles, and
- trends in the history of media.
- + -
- [ ] Identify the work of major arts of the 19th and 20th
- centuries.
- + -
- [ ] Write a 500 word report on one of the Visual
- Desktop Publishing
- + -
Image Editing
- Photoshop
- GIMP
- Picasa
- iPhoto
- + -
Photography
- - [ ] Camera Operations
- - [ ] Pin Hole Cameras
- Digital Camera Operations
- Film Camera Operations
- + -
Self Portrait
- - [ ] Take a digital self portrait in the studio
- - [ ] Save a copy in your account on the Student Server
- + -
Web Design
- + -
- [ ] Standards
- + - - [ ] Web Consortium
- + - - [ ] HTML
- + - - [ ] CSS
- + -
- [ ] Learn Basic HTML
- + -
- [ ] Use the html tag
- - [ ]
- + -
- [ ] Use head tag
- - [ ]
- + -
- [ ] use meta tag
- - [ ]
- + -
- [ ] Use title tag
- + -
- [ ] Use link tag
- - [ ]
- + -
- [ ] Use script tag
- - [ ]
- + -
- [ ] Use body tag
- - [ ]
- + -
- [ ] Use headers or headlines tags
- - [ ]
,
,
,
,
,
- - [ ]
- + -
- [ ] Use paragraph tag
- - [ ]
- - [ ]
- + -
- [ ] Use list tags
- - [ ]
- and
- + -
- [ ] Use line item
- - [ ]
-
- + - - [ ] Create a link
- + -
- [ ] Use basic CSS
- + - - [ ] www.w3schools.com—css_reference.asp
- - [ ] Style background
- - [ ] Style border
- - [ ] Use classification
- - [ ] Use dimension
- - [ ] Style font
- - [ ] Style list
- - [ ] Use margin
- - [ ] Style an outline
- - [ ] Use padding
- - [ ] Use position
- - [ ] Style tables
- - [ ] Style text
- - [ ] Use pseudo-classes
- - [ ] Use pseudo-elements
- - [ ] Web Graphics
- + -
Brainstorming Content
- The stuff your site is made of
- First Step: Determining your site's goal
The example I'll use is Bonnie's Bed & Breakfast, a fictional seven-room Victorian in a small town in Gold Country near the California Sierra Nevada mountains.
- + -
Bonnie's Bed & Breakfast Content list
- Where we're located
- Room mates
- Pictures of each room
- Pictures of the building
- History of the building
- History of Victorian houses
- The remodeling after purchase
- History of Town
- History of area
- Map of town
- Proximity to other scenic areas
- Directions to BB&B by car
- Directions to BB&B by bus
- Directions to BB&B by plane
- Car rental agencies
- Phone number
- Time of year we're open
- Menus
- Recipes
- Souvenirs
- Special seasonal deals
- Honeymoon suite
- Nearby activities
- Nearby resturants
- Nearby bars
- Group rates
- Party planning
- Catering
- Reservation requirments
- Payment methods
- Staff profiles
- e famous BB&B "ghost"
- Claw foot bathtubs
- Sauna
- Parking
- Famous guests
- Guest comments & compliments
- FAQs about BB&B
- Pet policy
- Children policy
- Daycare
- Weather
- What to wear
- What to pack
- Hiking routes
- High-altitude precautions
- Breakfast Schedule
- Gourmet coffee
- Special diet/menu requests
- Nearby health facilities
- Work-out room
- Biking
- Room themes
- Beds
- Phones
- ting
- Organizations we belong to
- What the press has said about us
- Antiques
- Quilts
- Seasonal fairs and events
- Panning for gold
- Guided tours
- Job opportunities at BB&B
- Emergency phone numbers
- Other web sites of interest
- Gift certificates
- Discounts at local eateries
- Local plant life
- Local Wildlife
- Rules about camping
- Forest fire hazards
- Deposit policy
- Check policy
- How to make a reservation
- Organizing content: The start of site structure
- + -
About BB&B
- Menus
- Pictures of each room
- Pictures of the building
- Where we're located
- Phone Number
- Time of year we're open
- Staff profiles
- The famous BB&B "ghost"
- Guest comments and complements
- FAQs about BB&B
- Breakfast schedule
- Room themes
- Rating
- Organizations we belong to
- What the press has said about us
- Job Opportunities
- + -
The History of BB&B
- History of building
- Pictures of the building
- History of Victorian houses
- The remodeling after we bought it
- History of town
- History of area
- Map of town
- The famous BB&B ghost
- Famous people who have stayed here
- Antiques
- Quilts
- + -
About the area
- Special seasonal deals
- Map of Town
- Proximity to other scenic areas
- Nearby acivities
- Nearby restaurants
- Nearby Bars
- Weather
- Hiking routes
- High-altitude precautions
- Nearby health facilities
- Biking
- Seasonal fairs and events
- Panning for gold
- Guided tours
- Emergency Phone numbers
- Other web sites of interest
- Discounts for guests at local eateries
- Local plant and wildlife
- + -
Planning your trip
- Directions to BB&B by car
- Directions to BB&B by bus
- Directions to BB&B by plane
- How to make reservations
- Car rental agencies
- What to wear
- What to pack
- Other web sites of interest
- Deposit policy
- How to make a reservation
- + -
Unique BB&B Feauters & Services
- Recipies
- Souvenirs
- Party plannin
- Catering
- Honeymoon suite
- Claw foot bathtubs
- Sauna
- Parking
- Daycare
- Gourmet coffee
- Menu requests
- Work-out room
- Room themes
- Beds
- Phones
- Antiques
- Quilts
- Gift certificates
- Guest referral discounts
- + -
BB&B Policies & Rates
- Room rates
- Special seasonal deals
- Check policy
- Group rates
- Reservation requirments
- Payment methods
- Pet policy
- Children policy
- Gift certificates
- Deposit policy
- How to make a reservation
- + -
But... What if my site is different?
While your content may be radically diferent than that of the propossed for a bed and breakfast site, this hands-on practice can be applied yo any site planning process
- + -
Sorting: more ways than one
You'll probably find that there are numerous ways to sort your site's contents. That's fine, and expected. As long as you keep to specific, well-defined (Yet general) categories with logical subcategories, you should be able to hit upon a combination that only works for you in the implementaion of the site, but especially for your visitors when they start hanging out there.
- + -
Summary
You've probably found out that there's a lot more to the potential content of your site if you throw your limits down. If you're comfortable with it, bring in others to help you brainstorm ides for content. At this point in the game, you haven't made any promises to your clients or potential site viewers, only explred the reaches of what your site could become.
- First Step: Determining your site's goal
- The stuff your site is made of
- + -
Page Properties
- + -
Learning from what works in print
- Nameplate/banner/logo
Generally, the nameplate, banner, or logo of a site is the first and most prominent visual on the first page, and possibly subsequent pages.
- Do you know your logos?
Visuals and logos, just like jingles and celebrity spokespeople, act as cues to remind us of a company.
- Statement of Purpose
While this sounds very stiff and formal, some sort of statement of purpose helps your viewers to figure out not just why your site was created in the first place, but also why they should bother to hang out there at all.
- Table of Contents
The first thing I look for in a site or other publication with which I'm unfamiliar is some sort of table of contents, or "what you'll find on this site."
- Publication Information
The logo or banner mentioned above is the first step in divulging information about your web site. If your site is a publication, or updated regularly, issue and volume information and helpful cues-as well as giving the impression of a professional site that continually offers something new (Just make sure that you actually *do* offer something new).
- Masthead/credits
Ah, the masthead, or the list of people who put together a site publication. Self-indulgent? Well, they certainly can be. But this part of the site is not only potentially fun or annoying, it gives the site a face, a humanistic touch, and a feeling to viewers that there's actually someone out there behind the screen.
- Contact Information
Another incredibly important piece of info that's often missing from many commercial sites is basic contact information-especially if I'm actually interested in the product or service a page may be touting. What's the use of going to all this trouble of saying, "Buy me!" if you're not going to give me the chance to do so?
- Kickers
Even if your site isn't commercial, if you're encouraging people to write to you or contribute their feedback, give them a way to do so. A simple mailto: tag on the bottom of pages is all it takes.
- Headlines
O.K., in five words or less, describe this chapter. Headlines are perhaps the most difficult and most fun part of the story to write because they must convey as much as possible without being too lengthy or vague.
- Subheads/subtitles
If I took out all the subheads in this chapter, you'd still be able to find out the same amount of information in the text, but it would take a lot longer to get to.
- Lead-ins and pull-quotes
Lead-ins and pull-quotes are similar to kickers because they give hints as to what the main text is all about. Lead-ins are generally placed before the main body of text, while pull-quotes are placed within the body of text.
- Teasers
Hey, want to make a million dollars with your web site? How's that for a teaser? Teasers invite people into your site, either as text in the table of contents, as captions under photos, or as additionial links under a related story.
- Artwork/photographs
A picture can be worth a thousand words-as long as it's not a thousand K in size. Pictures are not only cool in their own right, they can help lead a reader into a story, explain concepts that otherwise may take 10 pages to illustrate properly, or simply be eye candy for the masses.
- Captions
Imagine a newspaper full of photos with no text underneath them to tell you what the pictures are about. Like pull-quotes, captions also help to give the viewers a capsule view of what's in a story, as well as describing what's going on in an image or photo.
- Jumplines
In magazines and newspapers, we're used to seeing "continued on page 14," and following that cue to read the rest of the story. The cool thing about hypertext documents is that if your document does span more than one page, a simple click on the jumpline takes you right to the top of the next page.
- Page Numbers
Page numbers serve in a linear print publication to give you an idea of where you are in the reading process. Whether numeric, words, or icons, each page should provide some sort of clue to the viewer where they are in a section of a site or the site as a whole.
- Summary
While you may not be publishing an online magazine, every web page can learn from the elements used in print publications to give viewers a sense of place, and provide navigational cues and visual stimulation.
- Nameplate/banner/logo
- + -
Learning from what works in print
- + -
Web page Layout
- + -
Structured layout versus free-form
- + -
Grids as guidance, not gods
The word "grid" sounds so rigid-and its definition is dry and uninspiring: "n. an arrangement of regularly spaced bars; the system of intersecting parallel lines that divide maps, charts, and aerial photographs, used as a reference for locating points." You may get the impression that because I suggest using grids to lay out your page, you're going to end up with pages that look blocky and inflexible. While this is certainly a possibility, grids can actually be more flexible than you might think.
- + -
Web layout differences
As I mentioned before, controlling web layout is a bit more difficult than controlling paper layout. For one thing, if there are no tags inserted that control where text will break, the text will flow and wrap at whatever wdth the viewer happens to have her window sized to.
- The bigger, the scrollier
What happens if your page is too big to fit on one small little web browser window? Scroll bars appear, either on the right hand side of your window (To scroll back and forth horizontally), or on both, depending on the direction of the page overflows the size of the browser window.
- Applying grids to web layout
Chances are, I'm not going to be able to remake my newsletter on the web perfectly duplicating form-unless, of course, I take a screen shot of the entire page and stick it up as a graphic image map-which may be a pain in the neck for people to download since I would have to maintain a pretty big image size to make the page readable
- Using images to control a page layout
Another way that is often used to control how a page looks is through images-generally utilized as an image map for navigational purposes.
- Free-form layout
And what if you want to design a site with absolutely no obvious format or planned layout? Well, lucky for us all, anyone can layout any page any way they please, and it seems that most do. My table of contents for my site wasn't planned out by using any sort of grid; I simply spaced stuff out and moved stuff around untill it was where I wanted it to be.
- Summary
While paper-page layouts and web-page layouts have distinct diffrences and challanges, we can use traditional design tools and tricks to help us conceptualize and lay out web pages. Tables and frames can assist in the layout of structured pages, as long as their presence doesn't distract from the overall design of the page.
- + -
Grids as guidance, not gods
- + -
Structured layout versus free-form
- + -
Mood Lighting
- + -
Choose the colors that best portray your image
- + -
Red means stop; green means go
- + -
Red
- Hot
- Stop
- Aggression
- Lusshness (red velvet)
- Error
- Warning
- Fire
- Daring
- + -
Pink
- Female
- Cute
- Cotton-Candy
- + -
Orange
- Warm
- Autumnal
- Halloween
- + -
Yellow
- Happy
- Sunny
- Cheerful
- Slow down
- Caution
- + -
Brown
- Warm
- Fall
- Dirty
- + -
Green
- Envy
- Jealousy
- A novice
- Pastoral
- Spring-like (fertile)
- + -
Blue
- Peacful
- Water
- Sad
- Male
- + -
Purple
- Royal
- A Stupid Dinosaur
- + -
Black
- Evil
- Ghostly
- Death
- Fear
- Mourning
- Night
- + -
Gray
- Overcast
- Gloom
- Old age
- + -
White
- Virginal
- Clean
- Innocent
- Cold
- + -
Red
- + -
Hue
- THe color attribute identified by color names, such as "Red" or "Yellow"
- + -
Value
- THe degree of lightness or darkness of a color
- + -
Saturation
- The relative purity of a color; also referred to as intensity.
- + -
Chromatic hues
- All colors other than black, white, and gray
- + -
Neutral colors
- A black, white, or gray; otherwise known as 'non-chromatic hues."
- + -
Monochromatic
- Refers to a color combination based on variations of value and saturation of a single hue.
- + -
Text and background contrast
Of course, a site needs to have more than one color (how else could you read the text?). Most browsers support custom text colors as well as custom link and visited link colors.
- + -
Before you color, check the crayons
There's a little something that web designers affectionately (And sometimes not so affectionatly) dub the browser-safe color palette.
- + -
Effective color combinations
The following sites are some of those I feel successfully use color in effective ways to support or portray an image. Notice how each site tends to be consistent with its color choices, or at least consistent with the overall mood of the site.
- + -
Lush/Rich
- Sotheby's - Http://www.sothebys.com/
It's rare for me to find sites that use red backgrounds that are both easy on the eyes and says a lot about a site's image.
- Sotheby's - Http://www.sothebys.com/
- + -
Playful/lighthearted
- Toy Story (Disney) - Http://www.disney.com/ToyStory/
The use of bright primary colors and high contrast reflects the playful nature of the Toy Story site and the movie it supports.
- Toy Story (Disney) - Http://www.disney.com/ToyStory/
- + -
Businesslike
- Oracle - Http://www.oracle.com
Oracle's site has a straight-ahead business look. Notice how even though most of the opening page is covered with a sort of dusty green, the first thing your eye falls on is the bright red line between the "n" and the "c".
- Oracle - Http://www.oracle.com
- + -
Staid
- H&R Block - Http://www.handrblock.com/
No fooling around here; H&R Block's site is pin-stripe through and through. The white background (and lots of it) gives a clean appearance, with dark blue images and text portraying a no-nonsense approach to serious money handling.
- H&R Block - Http://www.handrblock.com/
- + -
Cheerful
- 1-800 Flowers - Http://www.1800flowers.com/
Need a little tickler to brighten up your day? 1-800 Flower's bright white background complemented by cheerful primary-color flowers and lots of bright greenery definitely protrays the happy ima
- 1-800 Flowers - Http://www.1800flowers.com/
- + -
Red means stop; green means go
- + -
Choose the colors that best portray your image
- - [ ]
- + -
- [ ] Use the html tag
- + -
- [ ] Standards