The Guide to Wireframing / Основи вайрфреймування: 2. A PRACTICAL LOOK AT USING WIREFRAMES

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

Who uses wireframes, what’s their purpose & how do they work together

#1

Хто користується wireframe-ами, для чого вони потрібні і як вони працюють у поєднанні.

TSpell 31.10.16 в 17:52

Wireframing is an important tool for product design and development.

#2

Wireframe — важливий інструмент для дизайну продуктів та їх розробки.

TSpell 31.10.16 в 17:52

Whether you’re building the next hot startup or a solid website or mobile application, wireframes are invaluable in keeping everyone on the same page - not just product managers, designers, and engineers. And they can be changed really quickly to accommodate the collaborative and iterative nature of product design and development, especially in agile startups and enterprises.

#3

Байдуже що ви розробляєте – новітній стартап, крутий вебсайт чи мобільний додаток, – wireframe-и стануть безцінним інструментом, який забезпечить узгодженість дій всіх причетних до розробки, а не тільки product-менеджерів, дизайнерів та інженерів. І їх можна реально швидко замінити, щоб влаштувати спільну роботу й ітераційний характер дизайну продукта і розробки, особливо у прогресивних стартапах і підприємствах.
ПЕРЕКЛАДАЄТЬСЯ

TSpell 31.10.16 в 17:56

+2

For this reason, wireframes are typically created in the product design and development process in one way or another, even if it’s a quick sketch on scratch paper or a grid notepad.

#4

Саме тому, так чи інакше, вайрфрейми створюються в процесі розробки й дизайну продуктів – навіть якщо це швидкий начерк у чернетці чи на клаптику паперу в клітинку.

TSpell 23.03.17 в 20:36

Who Uses Wireframes?

#5

Хто користується вайрфреймами?

TSpell 31.10.16 в 17:59

In short, anyone involved in the product - in any capacity.

#6

Якщо коротко, то будь-хто, хто залучений до створення продукта.

TSpell 23.03.17 в 20:42

Although designers, developers, and product managers typically create and use wireframes the most in their daily work, many people benefit from wireframes. These may include business analysts, information architects, interaction designers, user experience designers, graphic designers, programmers, and product managers.

#7

Хоч в основному в своїй повсякденній роботі вайрфрейми створюють та використовують дизайнери, розробники та продукт менеджери, та все ж багато людей мають від них користь. До таких лоюдей можна віднести бізнес аналітиків, інформаційних архітекторів, дизайнерів інтерактиву, UX дизайнерів, графічних дизайнерів, програмістів та продукт менеджерів.

TSpell 22.09.17 в 9:54

In a later series, I’ll talk more about how these team members should think about working together, including their use of wireframes and other design tools.

#8

В наступних серіях, я детальніше розповім про те, як ці члени команди мають думати про спільну роботу, включаючи використання ними вайрфреймів та інших інструментів дизайну.

TSpell 23.03.17 в 20:45

Why Should Anyone Use Wireframes?

#9

Навіщо взагалі користуватися вайрфреймами?

TSpell 31.10.16 в 17:59

Wireframes are the “blueprint for design.”

#10

Вайрфрейми це «чернетка дизайну».

TSpell 23.03.17 в 20:46

They’re supposed to connect the underlying conceptual structure (or information architecture) to the surface (or visual design) of a website or mobile app. More specifically, they’re visual representations of an interface, used to communicate the following details to get everyone on the same page:

#11

Вони повинні з'єднати основну концептуальну структуру (або інформаційну архітектуру) з поверхнею (або візуальним дизайном) веб-сайту чи мобільного додатка. Конкретніше, вони є візуальним уявленням інтерфейсу, який використовуються для передачі наступних відомостей, щоб всі вони були на одній сторінці:

TSpell 4.12.17 в 16:08

• Structure - How will the pieces of this site be put together?

#12

• Структура - Як скласти шматки цього сайту докупи?

TSpell 31.10.16 в 18:03

• Content - What will be displayed on the site?

#13

• Контент - Що буде показано на вебсайті?

TSpell 31.10.16 в 18:00

•Informational hierarchy - How is this information organized and displayed?

#14

• Інформаційна ієрархія - Як ця інформація організована та показана?

TSpell 31.10.16 в 18:01

• Functionality - How will this interface work?

#15

• Функціональність - Як цей інтерфейс працюватиме?

TSpell 31.10.16 в 18:01

• Behavior - How does it interact with the user? And how does it behave?

#16

• Поведінка - Як він взаємодіє з користувачем? І як він поводиться?

TSpell 23.03.17 в 20:48

Wireframes are not supposed to represent the visual design, contact graphic elements, or convey the brand or identity.

#17

Вайрфрейми не повинні представляти візуальний дизайн, пов'язуватися із графічними елементами, або виражати бренд чи індивідуальність.

TSpell 23.03.17 в 20:52

+1

Why Should I Use Wireframes?

#18

Чому я маю користуватися вайрфреймами?

TSpell 31.10.16 в 18:02

The purpose of any particular wireframe varies slightly by the people creating or using them in any company. Whether sketched, “grey boxed”, wireframed in a graphic editor or in a dedicated wireframing and prototyping tool like UXPin, the same information can be conveyed. Therefore, it’s less about the tool and more about how fast you can convey the information you need to others.

#19

Interaction & UX Designers and Information Architects use wireframes to show user flows between views or pages. Typically, a combination of flowcharting, storyboarding and wireframing are used to achieve this.

#20

In the following examples, you mostly see detail about product structure, functionality, and behavior, with limited details about content or information hierarchy - we’ll leave that for the designers.

#21

Graphic Designers use wireframes to push the user interface (UI) development process. It can inspire the designer, resulting in a more fluid creative process. And is ultimately used to create graphic mockups, interactive prototypes, and the final design. Typically, a combination of sketching, storyboarding and wireframing in low or high-fidelity are used to achieve this.

#22

In the following examples, you mostly see detail about product content and information hierarchy, and limited detail about structure, functionality, and behavior - that was done by the UX designers and information architects.

#23

Developers use wireframes to get a more tangible grasp of the site’s functionality. It gives the developer a clear picture of the elements that they will need to code.

#24

For back-end development, wireframes can be low-fidelity the way a ux designer or information architect might produce them - they care more about product structure, functionality and behavior. For front-end development, it’s more helpful to have high-fidelity wireframes a designer would produce - they care about content and information hierarchy as much as the structure, functionality and behavior.

#25

Business Analysts use wireframes to visually support the business rules and interaction requirements for a screen.

#26

Depending on the business, industry or the analyst’s specific role, they will care more about only one or two of the following - structure, content, information hierarchy, functionality and behavior. For example, an advertising or content analyst probably cares more about content, functionality and behavior whereas a regulatory analyst may care more about information hierarchy or structure. However, it varies too widely to say.

#27

Internal Business Stakeholders (ex: Product Managers, Project Managers and Executives) review wireframes to ensure that requirements and objectives are met through the design. This fits into their overall product strategy and scope of a specific project or set of projects. It gives managers an early, close-up view of the site design (or re-design).

#28

Barring some rough sketches, they care about every type of wireframe the team is looking at because they’re all part of the “blueprint of design.” Any wireframe that conveys the requirements and objectives of the product is the Holy Grail to a product and project management - other executives typically care about various parts of the design process, especially the end result.

#29

External Business Stakeholders (ex: Partners and Clients) also review wireframes to ensure that requirements and objectives are met through the design. It gives managers an early, close-up view of the site design (or re-design).

#30

However, they typically care more about annotated, polished (if not high-fidelity) wireframes than many of the types of wireframes internal business stakeholders favor for speed in collaboration and execution. Remember, they’re busy running their own businesses. And because they typically don’t work as closely with you, they want something clean and readable to quickly get up to speed on what they’ve missed while you’re toiling away on design.

#31

Хвилинку...