3-2 Sketching Interfaces

Sketching is a powerful activity for many reasons. It is a quick and inexpensive way to visualize ideas and discuss ideas with others. Sketches can easily be annotated or altered as needed, allowing for rapid experimentation.

We are going to practice sketching a few web interfaces. It is important to understand that you do not need to be an artist to sketch. It is not a competition on how pretty the sketch is, but on how well it explains an idea. While there are few, if any, particular rules on how to create interface sketches, here is a video on sketching the parts of interfaces to get you started.

Also, take a look at this short slide set demonstrating the progressive building of a sketch.

Standard Deliverable ✓

Choose two web sites or mobile apps to sketch. Start with a rectangle to outline the screen and draw the basic structure of the site depicting the major elements of the page. Visually differentiate elements so that someone could tell the difference between things like the Title, Navigation, Headings, Paragraphs, Buttons, Images, Videos etc.

Take a photograph or scan of your sketches for submission.

Advanced ✓+

Choose one of your sites and create a simple ‘interface storyboard’ of three linked pages similar to this linked example sketch. Add this to your document.