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

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.



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

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 (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


Getting a jQuery/Javascript Gallery Up and Running

This post will cover the basics of getting a jQuery/Javascript based image gallery into any site. Its not a difficult process it just takes some time to understand how things work and how they work together to achieve the desired effect.

Step 1: Find a gallery plugin that you want to use for your site. It is usually best to find one with a lot of good support documentation so that if you hit a snag you can read through it to figure out what might have gone wrong.

FancyBox is one option, there are many, many others.

Continue reading