Monthly Archives: October 2013

Persona Exercise

guy gamer

A real name: Griffin Oakes

Age: 19

Personal info:

Grew up in a Christian home in Magnolia, loves lacrosse, playing drums, has two parents (a bit older than average). Active with youth group. A little distracted when it comes to school work.

 Work environment (not a job description!)

Lives in the dorms here at NU – doesn’t go to the library much.

 Computer proficiency and comfort with the Web

Comfortable with web and searching, but not super-techy. Very game oriented.

Info-seeking habits

Asks friends, shows friends around games, does research on web about things he’s interested in.

Attitudes, including pet peeves

A bit shy, cares about what others think. Gets impatient with himself easily.

Personal and professional goals

Wants to go on the road with a band or be a game developer.

Motivation: why would this person use your product?

Entering freshman at NU – has to use site for class.

Fill in the pieces of the worksheet
And email it to me.

Personas

Personas

Details for Defining Personas

  • A name (a real name like Greg or Madeline, etc.)
  • Age
  • A photo or image is you can find one
  • Personal information, including family and home life
  • Work environment (the tools used and the conditions worked under, rather than a job description)
  • Computer proficiency and comfort level with using the Web
  • Pet peeves and technical frustrations
  • Attitudes
  • Motivation or “trigger” for using a high-tech product (not just tasks, but end results)
  • Information-seeking habits and favorite resources
  • Personal and professional goals
  • Candid quotes – if you could imagine what someone was saying.

Source: Alan Cooper, The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity, Indianapolis: Sams, 1999, Chapter Nine. (Wording condensed and modified.)

From InfoToday

More Tasks To Think About

Kathy Gill’s Notes


Writing for the Web

Writing

  1. Choose a site similar to the one you are developing.
  2. Check out the writing – on the front page, on the “about” page, captions, etc
  3. Is the writing of good quality – is there too much of it – how can you take lessons for YOUR site?
  4. Pick one piece that is particularly good or bad – send me the link: peg.achterman@northwestu.edu

Poynter

8 Common Mistakes

Tips for Web Writing

Example


Working with Color

PPT: color from sitepoint

Links from Lecture:

HTML Colorpicker

Color Scheme Designer

Color Contrast Test

From Karen Gutowsky Zimmerman

Resources: Comm Arts Webpicks, Web Designer Ledger, Graphic Design Basics, Elements of Typographic Design on the Web

C O N T R A S T

When thinking and analyzing design attributes, contrast plays one of the biggest roles in design decision making. It helps us understand how to move through a space. It helps guide the viewer, helping them to understand hierarchy of information. Visually we always go to the point on a compostion (website) that has the highest point of contrast.

Types of contrast:

Size | A guick way to achieve contrast is through size. You can make something larger in comparison to something smaller, this is called scale or proportion.

Value | When we alter value (the dark and light attributes of color) we change the contrast of the layout or image. This will change the way we see the image. The first part of an image we look at has the “highest point of contrast”. This is the place on the image that has the greatest change in value.

Color | Because color has warm and cool attributes it evokes different contrasts of color. All warm colors advance, meaning we see these colors first and cool colors recede. But this is reletive, for example, if you have all blue colors which are cool then the blue with the most warm (yellow) attributes will advance within the space.

Position | When we look at design layouts often we are searching for both the positive and negative space within a compostion. The negative space (often called the “white space” is as important as the space used by text and image. By looking at how we position information we can create contrast that helps guide the user.

Contrast in Web Design, Posted by Henry Jones on Feb 3, 2010

C O L O R

In design, color is always used intentionally. Desginers often use color combinations based from the color wheel system, using combinations of primary, secondary and tertiary hues to ascribe color to a website. For example, in creating this page I used a complementary color combination of Red/Green (palette was altered with value-shade and tint). Color combinations inherintly relate to each other and enable rich full color images to contrast from a background combination.

Color Wheel

Types of color combinations:

Monochromatic | Colors that are shade or tint variations of the same hue.

Complementary | Those colors across from each other on a color wheel.

Split-Complementary | One hue plus two others equally spaced from its complement.

Double-Complementary | Two complementary color sets; the distance between selected complementary pairs will effect the overall contrast of the final composition.

Analogous | Those colors located adjacent to each other on a color wheel.

Triad | Three hues equally positioned on a color wheel.

Color Combinations

_______

S T R U C T U R E

Structure plays a key role in design. Designers often employ a grid when laying out and structuring a page. I encourage interactive designers to create a “grid” for layout before they move into a “wireframe.” Once they have laid out the page using the grid a wireframe can then be employed around the grid. The way I seperate this is a grid is for design layout, a wireframe is a technical layout.

Developing a Grid | The first mistake a designer can make is to simply choose a unit of measurement from their computer program and mark out a default grid. The challenge of this is that there are too many units creating an “overall” look and not really giving the designer structured points to work off of. The most important aspect of a grid is that we can see the underlying structure of the grid (ie transparent to the content)

Horizontal and Vertical Stress Points | A good grid employs both horizontal and vertical stress points. By emphasizing these axises the user is able to easily navigate and understand the hierarchial structure of the page. Once a grid loses these stress points the layout becomes “over all” and weakens the understanding of content.

Mathematical and Proportional Relationships | The eye loves pattern, and when we use a grid structure that has mathematical and proportional patterns we reinforce rhythm and unity. When we break this structures we create visual discord which can cause disinterest from users. Some of these relationships are whole units 1:2, the fibinocci series (1, 2, 3, 5, 8, 13…) or the golden section.

Grid Structures in Word Press

Grid-Based Design: Six Creative Column Techniques, by Sean Hodge

_______

T Y P E

When designing websites type plays a crucial role in how users function throughout a site. When ascribing type here are some of the following thoughts a designer may be driven by.

Legibility | Uniformed web creators often use high contrast to create a sense of urgency with their content. This can have an opposite effect, in that it can create an agitation with the users when reading content. Often a mid range value between text and background offers a user friendly experience. Often designers will use a grey text on white background rather than black text to create this effect.

Style | Becase the web is a pixel based system a “sans-serif” font reads best in this medium. But becase of the universal appearance of a “sans-serif” font it often does not evoke a “feeling” or “message” such as a stylized font. When designing a site think about how to combine both. For example using the “sans-serif font” in all html text, but include a “png” or “gif” image with a stylized font for main headings or small amounts of text. A nice serif font designed specifically for the web is Georgia.

Anthropologie (a nice example of combining function and evoking a feeling or meaning)


Plugins

Agenda:

What theme did you land on and why?

Did anyone pay for one?

Now – plugins: list what your site should have – based on analysis of others, on what you want to say, on what the theme can handle.

Check on Triss’ “must haves”

Install at least: —— Akismet for now

The other goal today is to see which plugins are worthwhile and how you should install them.

Top 100 WP plugins

Another: “15 incredible”