I meant to write in this a week ago, but I forgot.  I’m feeling much more comfortable now about creating my portfolio now that I have an index page that relates my style about what I want to do and say with my portfolio.  I’m excited to put in my information and toggle through it on the web.

follow branding idea through consistency from page to page

use css as template so don’t have to recreate the style on every page

Design book Chapters 7 and 8

branding and re-branding

Elizabeth is doing something similar to my web page by getting into graduate school as well as procure a job, Chad discusses the set-up (Intro page) by his logo that will make his website easily recognizable.

Bigger branding vs. cultural design.

Systems culturally individual because the structure is different, but the message can be the same. The yield sign in Hong Kong, upside down triangle indicates that it is yield, but the sign says give way and has other languages beneath it. We still take away that we have to yield because of the structure of the upside down triangle.

Rocky’s presentation – design template, design consistancy

commercial site, makes it easy to buy a template

reflective response to design

• theory of web design
• analytical
• logical-concerned with content and form
• attention to audience, purpose, context of use
• relationship to culture, fashion, convention

behavioral response to design

• usability standards
  • text, color, resolution, file size, etc

• universal design – legibility, accessibility
• navigation, site architecture
• how well does it work? how easy/intuitive is it to use?
  • information design -efficiency, speed
  • experience design – quality of experience (how it feels to do it)

visceral response to design (emotional response)

• pre-conscious, pre-thought
• first impressions are formed
• appearance matters
• sensory – sight, sound, touch, taste, smell (maybe eventually taste and smell)
• puzzle jug example (antiquity), juicy salif
• I-phone cell phones frustrating to use due to

I want it. What is it?

• the seductive power of design
  • enticement
  • relationship
  • fulfillment

• emotional – delight, fear, anger, nostalgia, curiosity – “Wow!” “Yuck!”

• other example of google I’m feeling lucky tab, more exact match and yahoo

design tools emotional, behavioral and reflective unity

• color
• images
• typography
• the grid

• C – contrast
• R – repetition
• A – alignment
• P – proximity

Use file transfer to E folio Ohio

1) undivideable line of form and function; human capacity to shape and make our environment in ways w/out precedent in nature, to serve our needs and give meaning to our lives

2) no simple answer, cost factors can be one because when you minimize cost then you might not use the appropriate design inputs to match that cost

3) harnessing natural forces ex. solar/wind power for energy consumption and abstraction ex. language

4) style consultants that originated the idea and draughtsmen who implemented that design into the factory.

5) We want to choose something that has high usability, and depending on the audience something that has high, low, or general significance.

6) I chose color because the color could be pleasing to one culture while disturbing to another. Dr. Delagrange used red, white, and blue. It has cultural significance to Americans because it’s our patriotic colors and very positive, but it will have negative significance to say the Islamc culture.

What is “typography”?
Balance and interplay of letterforms on the page, verbal and visual communication

What are five tasks that typography performs?
Typography plays a dual role as both verbal and visual communication and helps readers understand relations between prose and pictures, headlines and subordinate blocks of text.

What are five pieces of advice for good typography on the web?
1. Content structure and visual logic, i.e. CSS – Style sheets provide control over the exact visual style of headers, paragraphs, lists, and other page elements
2. Legibility, i.e. alignment, line length, white space, typefaces, type size, case, emphasis
3. Consistency, i.e. gives polish
4. Cross-platform issues – relevant font sizes, font faces
5. Accessibility – scalable text, structural markup, emphasis, adaptable layouts
6. Type graphics – Typography cannot always be neatly separated from the graphics of your Web site; Anti-aliased type – optimize the look of graphics and typography on the display screen

What are five typefaces shared as “system” fonts by both Macintosh and Windows-based machines??
Ariel, Courier, Georgia, Times New Roman, Verdana

What are five typographic methods of indicating emphasis?
Italics, bold, underlined, colored text, capital letters

What does Savio mean when he suggests that typefaces communicate “by association and through basic visual communication”?
Makes one typeface communicate one thing and another typeface communicate some other thing
Associations have to do with our past experience: Where have we seen a given typeface before? What did it mean then? Schoolbook conveys a feeling of childhood innocence in large part because we’ve seen it before in grade-school primers and children’s books:
We similarly associate stencil faces with blueprints, construction sites, military lettering, and shipping crates. Associations also work in reverse: One of the complaints typographers have about Helvetica is that it’s been used so often, in so many different circumstances, that it has ceased to have any associational meaning.

Savio provides a set of font-face categories, and argues that most fonts fit into these categories (i.e., Old-style, Transitional, Modern, Egyptian, and San-serif). Find a font face that you would argue doesn’t fit into one of these five categories.
dumping everything from Moonbase Alpha to Fusaka into a miscellaneous category like ATypI’s “Display and Decorative”.

What’s the difference between “text type” and “display type?”
Text type is typically set at 12 points or below — but the names refer to usage, with text type used to set body copy and display type used for titles, signage, navigational elements, and so on.

Varied font faces, font sizes, and font color can add to the impact of a site. Find a site you think integrates different font faces, sizes, and color well. Explain why you find it effective?
The OSU – Mansfield homepage I thing displays varied font faces, font sizes, and font color. The different font faces (I’m not sure which ones they used, what they’re called) but it helps display importance and categories for me. The OSU News and Campus Events have a different font face than the other parts of the Web site, that tell me these are interesting, but not as important academically as the other plain font faces. The different font sizes categorize things for me; the larger font sizes tell me it’s the name of the category while the smaller ones tell me the subjects under that category. The different colors give me the feel that I am in an OSU site even though it is the Mansfield Campus because of the typical OSU colors used: scarlet and gray.

Cascading style sheets

-CSS doesn’t show up in a web browser

-spacing important

Colors range from 00,00,00 (black) – FF,FF,FF (white)

represents a range : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

lots of possibilities, early computers only had 256 colors, they worked in pairs and limited themselves to 0, 3, 6, 9, c, f

first pair says red, second says greed, third says blue is in the color

0 means none, max. amt. of all colors get black

no blue red or green end up with white

“#0033cc” can also be “#03c”

colors associative – rose, something comes to mind vs. abstract – red

web page colors – safe 256 vs. web smart colors still pair up vs. unsafe, don’t pair up

Colors have emotional weight

I should probably mention that my homework for week four is on paper instead of in here. I made box drawings for site maps so it made more sense for paper.