How Will Your Website be Used? User Stories & Scenarios

Chris Butler of Newfangled (a web design and marketing firm in NC) writes about creating user stories in the 2014 article “How to Tell the User’s Story (link to full article as at bottom of this post).

From their article:

User Stories

A user story is a brief statement that identifies the user and her need. It makes an incisive abstract that can be associated with your personas. Because personas tend to be pretty general, you might have several user stories associated with one persona group. Here’s an example user story for a hypothetical industrial parts database:

“As an Industrial Facilities Manager, Cathy is responsible for maintaining production systems and sustainability, which includes keeping equipment functional. She needs quick access to maintenance information and parts supply for her facility’s entire inventory.”

Notice that the user story identifies who the user is, what she needs, and why she needs it.

Continue reading

Vandalism

Student Work, Fall 2014

burnham_andrew_2015s_001 burnham_andrew_2015s_002 burnham_andrew_2015s_003 burnham_andrew_2015s_004

Andrew was interested in the angles of the spaces where “graffiti-art” lives. Notice the angles created in the headers (using a background image), and the way images are used to take up an entire space (these are not posters or books, they are rooms and buildings). He used a change in header color to reinforce where the visitor is in the site.

Lustig + Bass

Student Work, Fall 2014

goins_gregory_l_2015_001 goins_gregory_l_2015_002 goins_gregory_l_2015_003

Greg created a clean design, inspired by modernist ideals… but with “cut shape” images to mimic some of the forms in Lustig’s and Bass’ work. Here, the differentiation from one artist to the other is very subtle: a change in profile picture and page title tell the visitor where they are in the site.

Shattering the Crystal Goblet

Student Work, Fall 2014

Screen Shot 2015-04-10 at 3.18.58 PM Screen Shot 2015-04-10 at 3.19.08 PM Screen Shot 2015-04-10 at 3.19.17 PM

James honored two expressive designers by balancing playfulness (in the header, the background, forcing the page title off the edge of the “page”) with clean, readable typography (for the text). In order to help a visitor know where they are in the site, he played with hiding and showing the artists’ pictures in the header.

Materialize

Student Work, Fall 2014

materialize-1 materialize-2 materialize-4  materialize-3

Alicia created a contemporary/traditional design to highlight the work of designers with a “traditional” (hands-on/materials-based) approach to contemporary design. Rollovers on the home page reveal information under each image. Color used on the Q&A pages give visitors a subtle sense of where they are in the site.

Site Map & Wire Frame Resources

A Simple Site Map

Mari Pfeiffer, a freelance writer and web designer based in Southern California, shows how simply you can approach a site map. You don’t need fancy software. You can do a final version in Illustrator or InDesign if you want to, but it’s not required.

Hand_drawn-sitemap-2b

 

Creating a Site Map: What it is, How to Do It.
This slideshare is a comprehensive explanation of what a site map is. Slides 12-14 (out of 30) especially pertain to what we are doing in this class! Also, in order to create a good site map, you should be able to answer all of the questions on slide 26 (below). This is a great resource.

Screen Shot 2015-03-01 at 6.35.34 PM

 

18 Great Examples of Sketched UI Wireframes and Mockups
“…it’s always a good idea to start with a wireframe. It can be a big time saver if you’re able to nail down the placement of major layout elements early on in a project. …”

 

Concerning Fidelity in Design
This is an informative, yet easy to read article on design methods. Tyler Tate writes that design methods are not mutually exclusive. Each method is well-suited for a particular phase of the design process, with one level of fidelity (low to high technology) often leading into the next. He backs this up with loads of examples. Read this to get a sense of where wire frames fit into the overall design process!

Responsive Web Design Resources

mediaqueri.es

Media Queries showcases some lovely responsive web sites, showing at a glance what they would look like at four different sizes (smart phone, tablet, laptop, desktop).

Screen Shot 2015-03-01 at 6.44.03 PM

 

liquidapsive.com
Liquidapsive (Liqui-dap-sive) shows how the same web page responds to a changing browser size when produced using Adaptive. Liquid, Responsive, and Static layout. We’ll be building responsive web sites (layouts) in this class. We can’t cover all the UX issues.

Screen Shot 2015-03-01 at 6.45.27 PM

 

Typography As Design

Student Work, Fall 2013

cover sleeve_off
full-title
fili interview

Meridyth honored her designers’ traditional lettering with a more traditionally designed book. She used a removable band for the cover/title. Note the full title page, the solid color page used to separate the designers, and the text-to-frame approach for the text block.

The Web Version

splash introduction fili

I don’t usually recommend having a “splash page” without much information on it, but here it slows the pacing down and feels more like a traditional book experience.