Quick Introduction to Moqups - Moqups. Planning Your Web Design with Sketches. Planning a website doesn't have to be completely digital.
Learn how sketching wireframes can help you speed up and innovate your creatives. There are plenty of foundational courses taught in design school. And it’s no surprise that big agencies and startups are taking a back-to-basics approach to their design processes. Whether you’ve been a lifelong doodler or have serious sketch ‘chops,’ being able to use paper to explore new ideas is an important skill in the design field.
Fear not! In fact, I’ve heard of a growing backlash against wasted billable hours developing fully-rendered Photoshop comps. Whether you’re a big agency or freelancer, being able to communicate ideas to clients with a quick sketch is a valuable tool. Why Sketch? Sketching has some advantages to digital wireframes or even digital drawing. I’ve found, too, that clients tend to find the work informal enough that they can suggest changes and make edits. And sketching kills the need for-placement-only (FPO) images. So What? Responsive design with paper.
A few months ago, I spoke at City University London about Wireframing for Responsive Web Design where I proposed that paper could be a useful tool for responsive design.
Since then, I haven’t had many chances to try the technique I proposed hands-on, but a suitable opportunity came up recently when we decided to look into making our own Webcredible site more responsive. I helped facilitate a workshop to start our responsive design project, and I decided to introduce the idea to my colleagues taking part in the workshop, both UX designers and internal stakeholders.
As we were adapting an existing site, we already had a baseline for the content we could include so I started by printing out screenshots of some of our most important pages. Each person was given one or more of these screenshots, some empty paper, a pair of scissors and some glue. The only instructions I gave was to try and slice up and rearrange page content so that it fits in a single-column layout.
Wireframe.cc - minimal wireframing tool. Paper Prototyping and 5 Analog Tools for Web and Mobile Designers. Designers love analog tools.
No wonder. These tools lets us physically interact with interfaces and speed up the design process, like paper prototyping. What takes hours in the digital world can be sketched out in a matter of minutes. That’s why analog methods of prototyping are especially valuable right at the beginning of projects – when speed matters the most. Working with paper, or perhaps a whiteboard, can accelerate the speed of our learning loops. No wonder, according to research by Todd Zaki Warfel, paper prototyping is still the most commonly used prototyping method! Of course in paper prototyping we pay the price of low-fidelity and while it might not be a problem for your team to discuss lo-fi deliverables, in my experience, it’s always a problem for stakeholders. Analogue methods are supported by User Experience pioneers such as Bill Buxton, author of Sketching User Experience and Carolyn Snyder author of Paper Prototyping.
My fingers are crossed for these brave entrepreneurs. Sketch sheets for Web Designers. 10 simple ways to make wireframes more useful. Website wireframes: Mockingbird.