Posts Tagged ‘Prototyping’

We are pleased to present below all posts tagged with ‘Prototyping’.

50 Design Problems In 50 Days: Real Empathy For Innovation (Part 1)

I recently travelled 2517 miles to try to solve 50 problems in 50 days using design — a journey that would challenge me to fundamentally rethink my understanding of the user-experience design process.

50 Problems In 50 Days: Real Empathy For Innovation (Part 1)

I set myself a challenge. I wanted to test the limits of design’s ability to solve problems — big and small. To do this, I left the comfort of my computer chair and set out into the unknown. Each day, I had 24 hours to observe a problem, attempt to solve it and then communicate the solution.

Read more...

The Messy Art Of UX Sketching

I hear a lot of people talking about the importance of sketching when designing or problem solving, yet it seems very few people actually sketch. As a UX professional, I sketch every day. I often take over entire walls in our office and cover them with sketches, mapping out everything from context scenarios to wire frames and presentations.

The Messy Art Of UX Sketching

Although it’s sometimes easier to start prototyping on a computer, it’s not the best way to visually problem solve. When you need to ideate web site layouts, mobile applications or story board work flows and context scenarios, sketching is much more efficient. It prevents you from getting caught up in the technology, and instead allows you to focus on the best possible solution. Giving you the freedom to take risks that you might not otherwise take.

Read more...

Rapid Prototyping For Any Device With Foundation

Editor’s note: This article is the second piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community (the first article covered PrefixFree, a new tool be Lea Verou). ZURB are well-known for their wireframing and prototyping tools and in this post they present their recent tool, Foundation, a framework to help you build prototypes and production code that’s truly responsive.

screenshot

You’ve probably already heard about responsive design, which is website design that responds to the device constraints of the person viewing it. It’s a hot topic right now, and with good reason: alternative devices outsell desktop PCs 4 to 1 already, and within three years more Internet traffic in the US will go through mobile devices than through laptops or desktops.

All of this is forcing a convergence on what Jeremy Keith calls the “one Web”: a single Web that doesn’t care what device you’re on, how you’re viewing content or how you’re interacting with it.

Read more...

Design Better And Faster With Rapid Prototyping

The old adage, "a picture speaks a thousand words" captures what user interface prototyping is all about: using visuals to describe thousands of words' worth of design and development specifications that detail how a system should behave and look. In an iterative approach to user interface design, rapid prototyping is the process of quickly mocking up the future state of a system, be it a website or application, and validating it with a broader team of users, stakeholders, developers and designers. Doing this rapidly and iteratively generates feedback early and often in the process, improving the final design and reducing the need for changes during development.

The rapid prototyping process: prototype - review - refine

Prototypes range from rough paper sketches to interactive simulations that look and function like the final product. The keys to successful rapid prototyping are revising quickly based on feedback and using the appropriate prototyping approach. Rapid prototyping helps teams experiment with multiple approaches and ideas, it facilitates discussion through visuals instead of words, it ensures that everyone shares a common understanding, and it reduces risk and avoids missed requirements, leading to a better design faster.

Read more...

Resurrecting User Interface Prototypes (Without Creating Zombies)

Every user interface designer is familiar with this procedure to some extent: creating a prototype and evaluating it with potential users to understand how the user interface should look and behave. Users will tell you what nags them and should therefore be improved before you code. So, at the beginning of any UI design process, you can expect your prototype to have to be modified in order to work.

Screenshot

Because you (and your client) want the changes to be as cost-efficient as possible, you are better off adopting change-friendly prototyping methods and tools. This is especially true in the early stages of the project, when your ideas for potential solutions are rather vague. In this early phase, most often you don’t even know the exact problem for which you are hunting for a solution. You are still analyzing more than designing.

Read more...

Free Printable Sketching, Wireframing and Note-Taking PDF Templates

Sketching and wireframing are a specialized style of drawing, used for fleshing out preliminary complex ideas, group brain-storming, a lo-fi method for evaluating interaction concepts, and as a way of roughly perfecting a design technique.

Sketch, Template and Wireframe Printable Paper

Sketch and wireframe paper is essentially drawing paper that is designed specifically for this purpose. You could use it for web page design, web app design, architectural or structural design, graphic design, movie direction, animation... basically any type of design that needs a physical creative outlet or group collaboration.

Not all sketch and wireframe sheets are universal, most are specialized for a particular medium, such as storyboards and specialized grid paper (axonometric perspective templates).

Below you will find a concise collection of ready to print sketching, wireframing and note-taking templates. Most, as expected, are geared towards the design community, but there are also templates that could be used within any industry and for any purpose.

Read more...

35 Excellent Wireframing Resources

Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site's architecture, functionality, and content prior to actually starting a visual design. But if done inefficiently, it can end up costing more time and can even create bigger headaches for both the client and the designer.

Wireframes Screenshot

Below are more than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available. There’s information on everything from paper wireframing techniques to using programs like Adobe Illustrator for the wireframing stage of your designs.

Read more...

↑ Back to top