The 14 best wireframe tools

Содержание

How to create a website wireframe?

Still do not know how to create a website wireframe? Here is the step-by-step guide for you to create a web wireframe:


Step1.Do some research to ensure your design meets the users’ needs

No matter what type of websites you are trying to design, one of the basic principles you should follow is to make sure that your design meets the real needs of users. So, before you sit down and start to draw your website wireframe, it is best for you to do some research first.

Related article: What is design research? The ultimate guide you should not miss!

Step2. Map out the user flow on paper

After analyzing the researching results carefully, you may already have a raw user flow map in your mind. Just draw it out on paper and see whether it can be improved.

It is also a good basis for you to create a website wireframe or prototype.

Step3. Turn your ideas into wireframes & prototypes

Then, open your website wireframe tool and try to turn your ideas into interactive wireframes and prototypes.

Take Mockplus as an example. It is built with over 200 components, 3000 icons and increasing number of samples and projects for you to turn your ideas into wireframes and prototypes easily and quickly. To make them more intuitive and real, you can make interactions for them with simple drag-and-drop.

If you are designing a mobile app wireframe or prototype, you can easily create and export UI flow with one click in Mockplus.

Step 4. Test, iterate & share your wireframes and prototypes

At last, to makes sure your wireframes and prototypes are really practical and workable, you should also do not forget to test, iterate and share them with your team members.

Conclusion

The above is what we want to share with you about website wireframe. Hope this article can help you know everything of website wireframe and get inspiration to create a perfect wireframe for your design.

You May Also Like:

Download free

Пожалуйста, помогите c переводом:

Mendeleev was foreshadowed in his great generalization by De Chancourtois’s helix of elements of 1863, J.A.R. New-lands’s *law of octaves* (1864-5)-which uncovered periodicity in the 8th elements of his chemical groupings — and W. Odling’s work, which suggested that recurrent chemical properties in elements arranged according to atomic weight could not be accidental. Английский-Русский

1. The ENIAC (1943-1946) The first all-electronic computer, the Electronic Numerical Integrator and Calculator (ENIAC) was developed at the Moore School of Electrical Engineering of the University of Pennsylvania. It was developed as a result of a military need. J.Presper Eckert and John Mauchly proposed the machine to solve the problem of calculating firing tables for new weapons. The ENIAC weigh Английский-Русский

It slides comfortably into the ‘affordable’ bracket though, considering its supersized display, and when it lands on contract (which should be soon) it won’t carry hefty monthly fees. Английский-Русский

The rival gangs piled into one another with a vengeance — fists flew, knives flashed, clubs struck muscle and bone with sickening smacks Английский-Русский

Miro

Miro includes collaboration as well as wireframing tools (Image credit: Miro)

  • Platform: MacOS, iOS, Windows
  • Price: From free / $8 (team)
  • Download here

Miro is a collaboration system that creates a hub for remote teams to work within. With impressive tools such as an infinite whiteboard, widgets and prebuilt templates, it claims to standardise the digital workspace to make it feel like everyone is in the same room. 

It presents an entire toolkit for wireframing, user story or customer journey maps, as well as brainstorming processes. Miro also integrates with over 20 applications including Slack, Jira, Google Drive and Sketch, creating a seamless experience. With over two million users worldwide, it’s definitely hitting the right mark.

Moving from wireframes towards a finished product

Starting with sketches and moving forward, there are often many steps between the beginning and end of the product design process. Let’s take a look at a few more terms you might come across:

  • We’ve already talked about wireframes. They serve as the skeleton of a digital product. They give you a general idea of the layout and construction. Beyond the skeleton of the design, the content and copy is the muscle of the product. Aim to have the content early in the process. Lorem ipsum never does your design justice. It’s helpful to have the actual content in place to make sure everything flows the way you want.
  • The next step in the process is a high-fidelity mockup. Mockups are a more visual representation of your product. Think of a mockup like skin or facial features. This is the part where you firm up your visual decisions by testing variations and begin to give your product some character.
  • The final step before handing your design off to the developers is the prototype. Making a prototype is like dressing your mockup and making it suitable for the public. It’s not the final version, but it’s acceptable to show to other people. This is the point where all you should need to do is make tiny tweaks before you send your model over to production.

Remember that wireframes are only the first or second step towards a prototype. Because prototypes are meant to be the most functional draft of your product, wireframes serve to help you focus the placement of content and set a course towards a functioning prototype.

How to Make a Website Wireframe

Before you can begin wireframing you may want to have some meetings and brainstorming sessions to discuss business requirements and user needs. Your team should come armed with research: analytics data, surveys, and perhaps even focus group results.

Start with a Sitemap

You’ll want to create a sitemap of the existing website or design a new information architecture, discuss content strategy, and build personas.

Make sure you understand what the goal of each page should be.

Create a Wireframe

Wireframes will help visualize and provide a structure for these ideas.

Once you begin creating your wireframe don’t use any distracting colors or images. You want the wireframe to focus on layout and behavior. Even the font you use should be generic. Images should be represented with a box with an X through them.

Copy on the page can be placeholder copy (Lorem Ipsum) or canned copy like generic calls to action such as «sign up» or «buy.» As you iterate your way to a final wireframe, you may find that generic copy doesn’t do your vision justice. You can replace your initial placeholders with more detailed copy, especially if that copy takes up more space. That will affect the layout and other elements on the page.

Detailed copy will also help answer the question: is the page fulfilling its intended goal adequately? Given where the copy is placed, how much space it takes up, and how much attention it will get, is it communicating what you want?

Read SmartDraw’s detailed wireframing tutorial on how to create wireframes.

Sign up for SmartDraw free. Works on your Mac or any other device. Start Now

InVision Freehand (Web)

Best wireframe tool for team collaboration sketches on a whiteboard-like canvas

InVision Freehand is the most basic app on this list, but it’s worth a try, especially if you prefer creating your wireframes on a whiteboard where everyone can contribute and revise.

Invite your team to a wireframe collaboration, where you can add images and basic shapes or draw the wireframe with your mouse cursor. Since it’s a cloud app, multiple designers and stakeholders can be signed in and writing at the same time.

By itself, Freehand makes a good, albeit simplistic, wireframe tool that seems like any other whiteboard app. But since it offers real-time syncing with Sketch and Photoshop, your team can opt to draw and annotate directly on polished prototypes, making the iteration design stage much easier. And, since it’s a part of the InVision suite, your collaboration sketches are stored alongside working prototypes and mood boards for quick reference as you move through your design project.

Freehand will work well for designers who want to collaborate with team members on an initial wireframe sketch and/or comment on more refined wireframes/prototypes.

InVision Freehand Price: Free

Figma (Web, macOS, Windows, Linux)

Best wireframe tool for real-time collaboration

Figma stands out as a powerful cloud-based alternative to tools like Sketch, Studio, and XD. Not only is it extremely affordable compared to some of the other apps, but it also has a suite of features that work well whether you’re a standalone designer or part of a bigger team.


Wireframing with Figma is straightforward and quick. You’ll have to design your own UI components (or upload them separately from a kit), but it’s easy to create your artboards, add shapes and text, and keep it all organized with the Layers panel on the left. For responsive design, you can apply a column overlay (if you prefer the Bootstrap grid system), or you can use the Figma constraints, which tell each element how it should respond when the design is resized to mimic various screen sizes.

Where Figma stands out is in its team collaboration opportunities. Because it’s a web-based app, multiple team members can log in and access the design file simultaneously, whether to tweak the design or add content. The most compelling feature is the ability for a team can carry on an entire conversation inside the design file, leaving sticky note-like comments that other teammates can then reply to or mark as complete.

When it comes time for your dev team to take over, developers can grab CSS code from inside the design file and export individual elements to use as needed.

Figma Price: Free for up to three projects; from $12/user/month (billed annually) for the Professional plan that includes unlimited projects.

Wireframe cc — A minimal wireframing tool

Platform: Web-based

Price: Free

Wireframe.cc is an online wireframe tool, featuring a simple interface for quickly sketching your wireframes. It even reduces the toolbars and icons of a typical drawing app.

  • Simplicity. Just with a mouse, you can build what you want, like sketching with a pen on paper, no limitation, no hindrance.
  • The biggest feature is the concentration only on the basics. Wireframe.cc provides 3 design pattern, including web, mobile landscape and vertical screen mode.
  • It’s quick to share via a simple URL.
  • With a simple interface and small feature set, users can focus on the task at hand, creating effective wireframes.
  • Free to use. Wireframe.cc’s interface and web-based solution allow users to immediately start designing wireframes without the creation of an account.
  • It’s the perfect solution for beginners to start digitizing their paper wireframe.
  • You can export to PDF or share the link to the wireframe with a client or coworker.
  • Teamwork. Your whole team would have access to your work and be able to edit the project.

Cons: 

  • The simplicity is not great when you need to show a client a more fleshed out mockup with actual copy or photos.
  • You can not insert images.
  • No interaction or animation are available.
  • At times the interface can be a little finicky.
  • Customer support is bad, no tutorial videos, live chat, telephone, forum or even an extensive FAQ section.
  • Lake some basic functions of a wireframing tool, especially with the functionalities of the web and mobile projects.

User feedback: “This quick design software allows you to create the skeleton structure of the website before you go into adding all the complicated content on it.”

What should a wireframe contain?

So, now you know what a wireframe is. But you still need to know what elements go into making a good wireframe. Based on the experience of a wide range of designers, we summarize below the key elements of a good wireframe:

Information design

For a website, information elements should be arranged logically and intuitively so that users get clear guidance on what to do and what they can expect. So, design elements such as the body content, share buttons, contact information, headers, footers, and so forth should all be included on the website.

Navigation design

The navigation system of a website should be a structure that allows users to move between pages freely and quickly, using simple commands. A website’s navigation design may contain multiple navigation systems, such as global, local, supplementary, contextual, or courtesy navigation. BTW, it’s always a good idea to follow the rules of navigation design if you want your users to have the best experience possible.

Interface design

Interface design in a wireframe should provide users with the basic visual elements of the site including logo, buttons, pictures, text, drop-down menus, and so forth.

Using wireframes in your design process

Different UX designers approach wireframing in different ways. Some like to start by sketching by hand, while others like to use apps or tools that are a bit more technically inclined. More often than not, the decision to wireframe by hand or on a computer, and the process used to get to from sketches and wireframe to code, is more related to what approach the particular situation requires rather than the preference of the designer.

Rosie Allabarton suggests in a post over at Career Foundry that you should ask yourself these questions to get started:

  • What are the intended user and business goals when interacting with this page?
  • Exactly how can the content be organized to support these goals?
  • Where should your main message and logo go?
  • What should the user see first when arriving at the page?
  • Where is the call to action?
  • What will the user expect to see on certain areas of the page?

Your wireframe should be a visual guide to the framework of your site and how it will be navigated. Looks and visual appeal are not factors at this stage. Your main concern with a wireframe should be presenting your content in an intuitive and natural way that is familiar to users of this kind of service.

Your mission is to make it easier for your users to accomplish their goals (or for them to hit your conversion point or follow through on your call to action). By presenting your information in this way, you are aligning the business goals of your product with the needs of your users. All by laying out some lines and squiggles. Pretty cool, huh?

We’re big fans of using Freehand to sketch out wireframes. Freehand is a tool that helps you do it all from wireframing to creative exploration, presenting to collaboration. Give it a try and let us know what you think!

Справка по разделу ‘Полная WHOIS информация по домену’:

WHOIS — сетевой протокол прикладного уровня, базирующийся на протоколе ТСР, предназначенный для получения публичной информации (регистрационных данных) о владельцах доменных имён, IP-адресов и автономных систем. Протокол используется для подачи автоматизированных запросов к публичным серверам WHOIS баз данных регистраторов, базам IP-адресов и регистраторов доменных имён. Доступ к информации, размещённой регистраторами в своих WHOIS-базах, при использовании пользователями технологического портала WHOIS.UANIC.NAME, формы подачи персонального запроса к информации, хранимой распределёнными WHOIS базами, обеспечивает пользователям нашего сервиса доступ в реальном времени к информации баз WHOIS, по индивидуальным, неавтоматизированным, запросам. Доступ к информации баз WHOIS через порт 43, позволяющий выполнять автоматизированные запросы, может быть предоставлен реселлерам UANIC в качестве дополнительного сервиса, по запросу.

Поиск полных контактных данных WHOIS владельца (регистранта) доменного имени, ответственного администратора доменного имени, технического и\или финансового контакта домена, а также первичной даты регистрации (делегирования домена), и ее истечения, серверах имен, и текущем статусе запрашиваемого домена, может быть бесплатно выполнен путём подачи пользователем запроса через форму поиска WHOIS информации, размещённую на данном сайте.

Базы данных WHOIS управляются в основном регистраторами и регистратурами. Отдел IANA корпорации ICANN управляет центральной регистратурой для всех видов интернет-ресурсов и указывает на сервер WHOIS ответственной (под)-регистратуры, а также на контактную информацию этой регистратуры, в случае, если она размещена публично. Существует полная и сокращённая форма предоставления регистраторами информации из WHOIS баз. Полнота и формат выдачи информации из WHOIS базы определяется отдельно каждым регистратором, на основании протокола RFC 3912.

Для получения информации пользователю необходимо указать в WHOIS-форме интересующее его доменное имя, и подать запрос, путём нажатия на кнопку WHOIS. Сведения, содержащиеся в базе WHOIS UANIC обновляются автоматически, кроме того, подлежат ручному обновлению с частотой не более 10 суток.

English version: https://whois.uanic.name/eng/wireframe.cc/

Верстка прототипа

Для создания прототипа я буду использовать текстовые блоки, горизонтальные линии (для разделения экранов), прямоугольники с закругленными краями (для кнопок CTA), имитацию изображений, списки, ползунок и конкретно в этом примере текста для лендинга будет полоса прокрутки. Рассмотрим нюансы создания некоторых элементов.

Форматирование текста

После вставки объекта на экран по двойному щелчку мыши по нему откроется панель редактирования. Ее функциональность разная для каждого предмета. Например, возможности редактирования текстового блока смотрите на рисунке ниже.

Для графических фигур задается толщина линий и цветовая гамма границ и тела фигуры.

Кнопки

Для создания кнопки выделите место, где она будет располагаться. Среди предложенных объектов кликните по иконке «Прямоугольник с закругленными краями». Откройте панель редактирования фигуры двойным щелчком мыши и залейте ее оранжевым цветом.

Напишем на кнопке текст. Аналогичным образом выделяем место расположения текста, то есть область самой фигуры. Кликаем по иконке текста и изменяем шаблонный вариант на свой. При желании меняем цвет и стиль.

Чтобы кнопка оставалась единым целым и для удобства ее переноса в другое место макета, сгруппируем объекты. Для этого выделим прямоугольник и текст в нем, удерживая зажатой клавишу Ctrl, и нажмем на кнопку группировки в верхней панели инструментов. Подробно процесс создания показан на рисунке ниже.


Вот такой первый экран лендинга у меня получился. Макет логотипа делала точно так же, как и кнопки.

Создание и наложение слоев друг на друга

После первого экрана лендинга у меня идет блок подстройки. Выглядит он следующим образом.

Разберем, как сделать такие блоки.

Квадрат, расположенный в верхней строке, — это макет изображения. Выделите квадратную область на экране и в списке объектов выберите «Изображение». Затем кликните дважды по нему и залейте серым цветом.

Блоки во второй строке сделать чуть сложнее, поскольку они состоят из трех слоев — длинный прямоугольник темно-серого цвета, светло-серый прямоугольник и текстовый блок. Они накладываются друг на друга. Рисовать их можно в любом порядке, поскольку функционал программы позволяет вывести любой слой вперед или назад.

Выделим место для длинного прямоугольника, выберем объект «Прямоугольник» и разукрасим его в темно-серый цвет. Рядом нарисуем светло-серую фигуру. Возле нее создадим текстовый блок с необходимой информацией.

Теперь остается собрать блок. Для этого перетащите светло-серый прямоугольник на темный, а затем поместите текстовую область внутрь получившейся фигуры. Полученный результат изображен на рисунке выше.

Если для реализации других задач вам понадобится поменять расположение слоев местами, какой-то блок вывести наверх, а какой-то отправить вниз, выделите его, кликните по нему правой клавишей мыши и нажмите на соответствующую строку в контекстном меню.

Описывать дальнейшие шаги по созданию прототипа лендинга в примере не имеет смысла, поскольку они идентичны. Здесь вы можете посмотреть конечный результат.

Заказчику можно отправить непосредственно прямую ссылку на проект в сервисе, но есть один нюанс. Любой человек, у которого есть доступ к прототипу, может внести в него изменения. Я предварительно группирую все блоки и блокирую возможность их изменения. Конечно, это все легко «отыграть» назад, но вряд ли заказчик станет разбираться в работе программы, чтобы самостоятельно внести правки.

Группировка, объединение элементов и блокирование информации от редактирования

В верхней панели инструментов есть несколько полезных функций. Например, вот такая форма состоит из фигур, кнопки, линий, текстовых полей. Логично объединить эти элементы в единое целое. Для этого нужно выделить их и нажать на кнопку Group Elements.

Функции других кнопок в верхней панели инструментов смотрите ниже.

Кнопка с замком предназначена для блокировки информации от редактирования. После нажатия на нее вы не сможете изменить выделенные элементы. Повторное нажатие отменяет ее действие.

Добавление комментариев

Если вы хотите добавить комментарии для заказчика или дизайнера, или получить обратную связь от заказчика, сделать это можно прямо внутри проекта. Способ добавления аннотаций такой же, как и для других элементов, — выделяете область и выбираете в панели инструментов значок Add Annotation. В поле пишете текст комментария и нажимаете ОК. Блоки с комментариями выделяются оранжевой сеткой. Текст комментария виден при подведении курсора.

Добавлять комментарии можно и к заблокированным от редактирования элементам.

Отчёт: география и посещаемость сайта

Отчёт в графической форме показывает объём посещений сайта wireframe.cc, в динамике, с привязкой к географическому размещению активных пользователей данного сайта. Отчёт доступен для сайтов, входящих в TOP-100000 рейтинга Alexa. Для всех остальных сайтов отчёт доступен с некоторыми ограничениями.

Alexa Rank – рейтинговая система оценки сайтов, основанная на подсчете общего количества просмотра страниц и частоты посещений конкретного ресурса. Alexa Rank вычисляется исходя из показателей за три месяца. Число Alexa Rank – это соотношение посещаемости одного ресурса и посещаемости прочих Интернет-порталов, поэтому, чем ниже число Alexa Rank, тем популярнее ресурс.

Шаг 3: Выбираем инструмент

Вот некоторые из популярных инструментов в произвольном порядке:

Balsamiq

Balsamiq стал популярным, так как вайрфремы, сделанные с его помощью, напоминают наброски. И это сразу дает понять, что вайрфрейм не является финальным продуктом, а находится в стадии разработки. В Balsamiq также есть огромная библиотека готовых элементов, которые можно легко перетаскивать для создания своих вайрфремов.

Он работает практически на любой платформе: Mac, Windows и Linux, также существует веб версия, если вы предпочитаете работать в облаке. Сторонние приложения, такие как iMockups для iOS, например, также поддерживают экспортные форматы Balsamiq.

Omnigraffle

Давний любимец на Mac, Omnigraffle также имеет большую библиотеку готовых элементов, пополняемую пользователями и получившую широкую поддержку — Graffletopia

Поскольку приложение Omnigraffle разрабатывалось специально для создания схем, у него есть продвинутые функции, как, например, автоматическое размещение, настраиваемые стили объектов, умные направляющие и инструменты для диаграмм. Некоторые из этих функций доступны и в пакете Adobe CS, но если его у вас нет, то Omnigraffle предлагает неплохую цену (~$100) за возможность создавать детальные вайрфремы.

Axure

Axure был одним из первых профессиональных инструментов для создания вайрфремов/прототипов, так что он почти как дедушка для всех них. До недавнего времени он был доступен только для Windows. Большого опыта его использования у меня нет, но он считается широко применяемым инструментом среди профессионалов.

Flairbuilder

Новичок Flairbuilder очень хорошо работает с взаимодействиями.

У него также есть огромная библиотека элементов, поддержка шаблонов страниц и возможность экспорта прототипа для просмотра его онлайн.

Keynote/Powerpoint

Keynotopia «превращает ваш любимый инструмент для презентаций в лучший инструмент для быстрого прототипирования макетов для мобильных, веб и настольных приложений». Если вы не пользуетесь mac, не страшно. Keynotopia работает и с шаблонами powerpoint.

Я особенно рекомендую его использовать, если вам надо быстро сделать вайрфрейм или прототип для мобильного приложения. Другой хорошей альтернативой может быть Keynote Kungfu.

Adobe CS

Для тех, кто уже знаком с пакетом Adobe, Fireworks, Illustrator и Indesign вполне могут служить инструментами для создания вайрфреймов с учетом их определенных плюсов и минусов.

Fireworks

С помощью Fireworks можно выполнить весь дизайн-процесс, от простого вайрфрема до визуализации. Fireworks поддерживает шаблоны страниц (многократно используемые шаблоны, изменения в которых применяются на всех дочерних страницах по данному шаблону), библиотеку элементов, и вы также можете достаточно быстро делать интерактивные прототипы.

Illustrator

Это один из моих любимых инструментов, так как я его уже очень хорошо знаю и уверена, что и многие здешние дизайнеры его знают. Я использую Illustrator для быстрого создания сложных вайрфреймов, которым не нужна интерактивность.

В чем он выигрывает?  В возможности экспорта в PSD редактируемых слоев, отличной поддержке копирования/вставки в Photoshop, а также в возможностях верстки текста, которые можно сохранять, изменять и многократно использовать, почти как в CSS.

Indesign

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

Я выбираю Indesign, когда мне надо сделать интерактивный многостраничный прототип высокой точности. Единственным «но» для меня является слабая поддержка экспорта в Photoshop для последующего создания дизайн-макетов.

ProtoShare


«Прототипирование с широкими возможностями без проблем.» Недавняя 9 версия с новой панелью инструментов wysiwyg (примечание переводчика: what you see is what you get — что видишь, то и получаешь). Стоит попробовать.

Getting started with wireframes

First things first. A wireframe is a low-fidelity design layout that serves three simple but exact purposes:

  1. It presents the information that will be displayed on the page
  2. It gives an outline of structure and layout of the page
  3. It conveys the overall direction and description of the user interface

Just like the blueprint of a building, a wireframe describes details clearly and specifically while giving the builders (you, other designers, developers, etc.) an overview of the project.

Swapnil Borkar shares a fun Freehand wireframe for the Lyearn landing page.

Wireframes serve as a middle ground between pen-and-paper sketches and your first prototype. They help you plan the layout and interaction patterns of your users without distracting details like colors or copy. The proposed user journey should be clear without needing color or shading or fancy menus.

One of my favorite ways to see wireframes in action is to use the Wirify bookmarklet. Wirify lets you turn any web page into a wireframe in one click, and it’s great for getting inspiration or guidance, especially when you’re just starting out.

Tips
Website & App Wireframe Examples For Creating a Solid UX Design

In addition to pen and paper, we like to use InVision Freehand for sketching out prototypes. Freehand is like a lightweight, digital whiteboard where you and your team can collaborate and communicate. The wireframes you create in Freehand are only as permanent as you want them to be, and using Freehand saves you the tedious steps of scanning and uploading your hand-drawn wireframes.

Pro tip: Your drawing experience is completely transformed when you hold down the alt/option key. Go from weird toddler-esque shapes to near perfection with the touch of a button:

GIF courtesy of Jon Moore on Medium

Wireframes are fast, cheap, and perhaps most importantly, impermanent. Wireframes (and the sketches you draft before wireframing) are meant to change as you gather more information through user research or stakeholder input.

Compared with a high-fidelity mockup or prototype, gathering feedback with a wireframe is much more important than researching usage patterns or user journeys. With a wireframe, people pay more attention to functionality and the user experience than the aesthetic characteristics of the on-screen elements.

Wireframes serve as a common language between designers, users, stakeholders, and devs. They’re complex enough to inform everyone but simple enough to not be bogged down by too much detail or design language.

Adobe Xd

Adobe’s Xd is a powerhouse of wireframing and prototyping  (Image credit: Adobe )

  • Platform: MacOS, Windows
  • Price: From free to $19.99 per month as part of Adobe Creative Cloud
  • Download here

Adobe Xd allows you to wireframe as just part of its suite of prototyping tools, which takes you through the whole process of sketching wireframes; collaboration with your team; creating site maps, flowcharts and storyboards; building functional prototypes; and much more. You can try Adobe Xd out for free but as usual you need a Creative Cloud subscription to take full advantage of Xd’s incredible smorgasbord of features.

Why do you need a wireframe?

As a critical part of the design process, wireframes are of great importance in several aspects. Here are some advantages of wireframes.

1. A wireframe is much easier to understand than an abstract concept design

How hard is it to get stakeholders’ approval using only an explanation of the concept design? With a wireframe, you can turn the abstract sitemap into a visual site. It is much easier and quicker to review and understand with a clean wireframe.

2. A wireframe can be used to receive feedback

Users, team members and stakeholders can review your design in early stages and give feedback to improve the user experience. It helps to make the design process iterative. It will cost more if the problem is found later on.

3. Wireframes help to define the website features

Wireframes ensure that page content and functionality are designed in a manner that meets user needs. Your design must be based on some business needs, if nobody ever wanted your design, all your work would be in vain.

4. Wireframing is fast to build and low cost

It’s cheap and fast to build a wireframe. The simplest way is to use pen and paper. With more wireframing tools available today, you can build a wireframe with a tool in minutes.

Wireframes Compared to Other Design Documents

The terminology used in design documentation often gets used interchangeably, so let’s clarify the differences.

Think of wireframes as the skeleton. They loosely shape the final product, giving you a reliable idea of where everything will eventually go. The content is the muscle (and can be as meaty or trim as you want).

Wireframes vs. Mockups

Next comes the mockup—the skin. Mockups are strictly visual. This is the documentation where you solidify your visual decisions, experiment with variations, and (optionally) create pixel-perfect drafts.

Wireframes vs. Prototypes

With the prototype, you breathe life into your creation. Prototypes test your interface ideas and generate the feedback necessary to keep the design headed in the right direction. Prototypes can (and should) be used during every stage of the design process, and can be in any fidelity. As we’ll discuss below, you can even make a lo-fi prototype by adding interactivity to a wireframe.

Remember that wireframes are only a means to a prototype. In other words, prototypes are the most functional, useful documentation you can create. Wireframes just help you focus the placement of content for your prototype.

Types of Wireframes

Most designers start by sketching wireframes on paper. Paper is faster and easier, but makes sharing with teams more difficult. And if you need to reference them often, the process inevitably takes longer.

Since wireframes are stepping stones to prototypes, you will eventually throw away your paper wireframes. One way to keep them useful is converting them into paper prototypes for usability testing: one person plays the role of the human computer, while the other person takes notes. This form of prototyping works well if you want to explore experimental concepts quickly and with minimal risk.

Some digital tools actually allow you to convert paper wireframes and prototypes into a collaborative digital tool.

The advantages of digital wireframes are clear: they can be shared instantaneously and convert into digital prototypes easier. As shown above, you can also add interactions directly by using simple and easy drag-and-drop, turning your wireframe into a lo-fi prototype in a matter of minutes. This lets you use (and test) the same document throughout the entire design process.

Sketch (macOS)

Best wireframe tool for passing wireframes off to third-party apps

Since it was first released in 2010, Sketch has stolen the show as a lightweight vector design tool for macOS users. By itself, it’s a fairly basic app that can be used for modern UI and icon vector design (on a pixel-based canvas, no less). Its interface is far simpler and more intuitive than vector design heavyweight Adobe Illustrator and can be used to create wireframes quickly with a combination of artboards and vector design shapes.

Although Sketch doesn’t include ready-made UI components, like buttons and checkboxes, you can design your own inside the app itself and even reuse them with the handy Symbols feature. Or, if you want more detailed wireframes, you can always download a UI kit from a third party to quickly add basic elements and inject some life into your wireframes.

Like most desktop apps, Sketch makes collaboration a bit tricky, as there’s no way to allow multiple designers to work simultaneously within a design file. But extensions like Abstract, which tracks design changes and can merge multiple versions into a single file, can make collaboration and version control a lot easier.

When it’s time for hand-off, you can use the Export option to save your full designs and/or individual elements. Or, you can seamlessly integrate Sketch with tools further down your design process (including prototyping apps Principle, Framer, and Marvel, to name a few). Sketch has developed a reputation for encouraging and supporting an entire developer community devoted to building integration plugins. This has opened up a world of opportunity for Sketch users to quickly transport their designs to the «next step,» allowing dev and design teams to communicate much more easily. While other wireframe tools, like InVision and Adobe XD, have also opened themselves to plugin integrations, Sketch currently owns that space simply due to its longevity.

We did experience a few bugs in the interface, like font colors that wouldn’t change and a lag in duplicating simple shapes. While frustrating, these glitches were just a blip on the radar in an otherwise excellent app.

Sketch Price: $99/year; when the year is over, you can continue to use the tool, but you’ll no longer receive software updates.


С этим читают