Announcements

Unfortunately I’m sick and won’t be able to make it to class today. Note that your midterm projects are due April 23, so please be sure to upload your files to your student folder on the class server. Please be sure that your file contains your name and “midterm” so I can identify it.

Bring all your work with you to class every week.

Be sure to post your work to your WordPress process blog so I can give you credit for the work you’ve completed so far.

When you post your assignments to your WordPress site, be sure to title the posts as Assignment 4, Assignment 5, Assignment 6 etc.

Resources

Wireframes

A wireframe is a bare-bones layout of a web page. It is a simple drawing of the chunks of information and functionality for key pages in the site. You will want to create a wireframe for the home page, each unique second level page, and any other significantly different pages on the site. Wireframes include the containers for all the major elements of the page. Elements include navigation, placeholders for images, content and functional elements (like search), and footer. Wireframes do not include any reference to color, typography, or visual imagery.

Wireframes focus on required elements and their relative importance without the added complexity of visual design. Wireframes are an inexpensive way to test structural design ideas. Making major changes to a wireframe is simple compared to making major changes to a visual design.

Example of Wireframes

Tools for creating site maps and wireframes

Sketch before wireframes

Many designers mistakenly think a sketch is a wireframe. They are similar but they are not the same thing. Both are useful for illustrating an interface concept, but a wireframe and a sketch are done in different mediums and produce different results.

Many designers have different processes for how they work. Some might skip sketching and jump straight to wireframes. Some might skip wireframing and jump straight to mockups. But when you skip one or the either, you lose a lot of conceptual detail and refinement. The interface suffers because it enters into a stage prematurely and misses certain key elements or isn’t thoroughly refined.

What happens is you either end up creating the basic concept of the interface during the wireframing stage, or you end up refining the concept during the mockup stage.

This is counter-productive because sketching is where creating the basic concept is done.

Wireframing is where refining the concept is done.

And mockups (prototype) is where the visual graphics and content is done, not the interface concepting.

When you skip the sketching and wireframing stage, you end up thinking about too many things in one stage. This not only makes it hard on the designer, but it takes a lot away from the interface because the concept doesn’t get the full attention it needs to fully develop.

Example: Sketching

Mobile First

As Luke handily describes in his Mobile First book, the constraints of the mobile medium force designers to focus on what’s truly important to a product or service. When you lose 80% of your screen real estate, all the extraneous bloat that tends to finds its way onto large screen designs doesn’t seem so attractive or necessary anymore. Mobile provides a great opportunity to reevaluate what content/functionality is necessary and gives us an opportunity to strip away the redundant across the board (and not just for mobile users either). These constraints also encourage ease-of-use, intuitiveness and speed as essential ingredients to a good user experience.

This mental shift in design strategy has designers wire-framing, Photoshopping, prototyping and presenting on small screens first. Establishing how a core experience fleshed out on small screens can translate up to larger screens can be more logical than trying to cram large complex desktop designs onto small screens.

Example of Responsive “Wireframe” Prototype

Please note: Make your images around twice the size needed in order for the images to scale and respond “responsively.” For example, if your footer image is 960 pixels in width, create a grey box for the footer that is 1900 pixels in width. You may allow the height to scale accordingly so the image will be larger in height also.