The Guide to Wireframing / Основи вайрфреймування: 8. DESIGN PRINCIPLES FOR WIREFRAMING

Оригінал англійською Переклад українською

(image) Photo credit: „Gradients”. Damien Pollet. Creative Common 2.0


Low-fidelity doesn’t mean unrealistic


Низька точність відтворення не означає нереалістичність

TSpell 24.03.17 в 16:00

When possible, add the details you know you’ll need, even if they’re rough approximations.


It’s better than putting in arbitrary fillers you may change dramatically – which will ultimately change your design. One of the most common requests I get from de- signers when working together is content – real content. In 50 Shades of Wireframing, I emphasized the value of having higher-fidelity for text, colors, media, and interactions depending on which details will have the greatest impact on the overall product design.


At my last company, I had to actually think about whether my product summary paragraphs were going to be 3 or 6 lines long because the bulk of those paragraphs may change the overall look, feel, and emphasis on the page given the existing layout – and, therefore, the layout would have to be re-considered for the product design. If I’m including product photos, I have to see the photos – or at least an approximation – before I can decide whether to include it, make it a primary feature or fight against it. The truth is that headings wrap, videos can be distracting or even creepy, photo dimensions and orientations can be inconvenient, and decimals don’t creep out of their input boxes.


So scrap the “Lorem Ipsum” and get realistic about what you’re trying to convey to your users as early as possible.


Experiment & collaborate quickly


Швидко експериментуйте і співпрацюйте

TSpell 24.03.17 в 16:00

The best way to build effective products is to start small and iterate wildly. Iteration reduces risk. It makes big failures unlikely and turns small failures into lessons. This avoids the 200 page spec document which can turn into a bottleneck.


Low-fidelity design helps you and your team to explore many potential solutions quickly before focusing in on one solution and polishing and refining it into the final product. Initially, it may appear there are many solutions to a design challenge. However, you can only decide which will work best after exploring a few of them and laying them out in front of you – to see, touch and feel. Inexperienced designers will over-commit to their initial ideas and fall in love with what is likely the wrong solution – good designers know better.


Ultimately, you’re working in the wrong fidelity if you can’t product concepts quickly. And you’re wasting precious time if your wireframes are just grayscale versions of a design you already have your heart set on. Use wireframing as a means to an end, not the end itself.


(image) Photo credit: „Lorem Bokeh 1”. Blake Burhart. Creative Commons 2.0


Your designs will get built


Ви створите свої дизайни

TSpell 24.03.17 в 16:00

A great design can be a terrible solution.


Remember that every animation, box, button, menu, modal window, photo gallery, and map view needs to be programmed – and you can draw a lot faster than any- one in the world can code. If you know HTML/CSS/JS, and you’ve seen what it takes to test a page across every web browser, you’ll try to find an easier way to solve your users’ problems when designing wireframes. Every project has budgetary, time, and resource constraints, and you should internalize that with everything you add to your wireframes, even little components – there are no small changes, and there’s a trade-off for every decision you make.


Shipped is better than perfect


Відправлений краще, ніж ідеальний

TSpell 24.03.17 в 16:00

The goal of sketching, wireframing and prototyping is delivering great product concepts, not great deliverables.
Nobody cares if your deliverables are great if they’re not finished. And few will care how perfect they are even if they are finished. The only people who may marvel at the deliverables are the UX designers, but they’re hopefully too busy to care about internal documentation. On the other hand, everyone wants or absolutely needs you to communicate the right level of details about what they need to do to make a great and feasible solution so they can ship better products, faster.


(image) Photo credit: “IMG_8298.” jeanbaptisteparis. Creative Commons 2.0.


If you’ve sketched something on scrap paper that you’re confident is a solid solution that everyone can act on immediately, there’s no value in re-creating it in a wire- frame or anywhere else. Just take a picture of it and share it where appropriate. In some cases, you may have to quickly replicate it for organizational purposes, but don’t make deliverables for the sake of it – you have better things to do.


In 4 Non-Digital Wireframing Weapons and 4 Digital Wireframing Weapons, I cover a wide variety of tools you can use to get the job done.


Ready, set, wireframe!


На старт, увага, вайрфрейм!

TSpell 24.03.17 в 16:00

(image) Photo credit:


I’ve done enough talking. And you need to get back to your product. So grab your favorite tool, and keep some of these in mind as you ready for your next release.


← Попередня сторінка