Wireframing

РАЗРАБОТКА

Wireframing – разработка каркасов

Любая разработка: web-приложения, сайта, мобильного приложения требует основательной подготовки. Правильный проект всегда начинается с исследования, а на основе этого продумывается навигационная и информационная структура.

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

Каркас представляет собой иллюстрацию будущей страницы, которая фокусируется на:

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

ЖИЗНЕННЫЙ ЦИКЛ

Жизненный цикл проекта

ЖИЗНЕННЫЙ ЦИКЛ ПРОЕКТА

1

ИДЕЯ

2

ПОНИМАНИЕ КЛИЕНТА, ЕГО ПРОДУКТА

3

ИССЛЕДВАНИЕ

4

ФОРМИРОВАНИЕ СТРАТЕГИИ

5

НАВИГАЦИЯ И ИНФОРМАЦИОННАЯ АРХТЕКТУРА (WIreframing)

6

РАЗРАБОТКА ПРОТОТИПА

7

ДИЗАЙН ИНТЕРФЕЙСА

8

РАЗРАБОТКА

9

ТЕСТИРОВАНИЕ

10

ВНЕДРЕНИЕ

11

ЗАПУСК

1.Идея.

2.Понимание клиента, его продукта и его ЦА

3.Исследование

4.Формирование стратегии

5.Навигация и информационная архитектура

6.Разработка прототипа

7.Дизайн интерфейса

8.Разработка

9.Тестирование

10.Внедрение

11.Запуск

ЗАДАЧИ

Разработка каркасов позволяет решить следующие задачи:

Показать пути навигации по сайту, соединяя информационную архитектуру сайта и его будущее визуальное отображение
Уточнить и упорядочить способы отображения определенных типов информации
Продумать, в каких блоках и как будет отображаться тот или иной вид информации
Определить функциональность элементов, которая предполагается в будущем интерфейсе
Расположить контент в порядке приоритетности и определить сколько место должно выделяться для определенного типа контента

После этапа wireframing-а заказчик получает вот такую картину:

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

ОСОБЕННОСТИ

Особенности создания каркаса

Не используются изображения
Изображения сильно отвлекают от прорисовки правильного расположения и структурирования всех блоков, поэтому блок, где будет в дальнейшем располагаться изображение, представляют прямоугольной рамкой, размер которой соответствует размеру «Х» через него
Без использования цветов
Для различия определенных элементов используются оттенки серого, что позволяет в дальнейшем применить к созданному макету любую цветовую палитру
С использованием только одного шрифта
Типографика не является частью разработки каркасов, так как тоже отвлекает дизайнера от поставленной задачи, поэтому в разработке каркаса выбирается один шрифт, а изменяется только размер в соответствии с блоком

Инструменты разработки

Sketch

inVision

Axure RP

Figma

Proto.io

Flinto

Заказать современный веб-ресурс Вы можете в компании Apostrofsoft. Также Вы можете получить всю необходимую информацию и получить консультацию специалиста. Звоните по указанным на сайте номерам телефона или оставляйте заявку на сайте. Наши менеджеры свяжутся с Вами!

НЕ ПОТЕРЯЙТЕ СВЯЗЬ С НАМИ

файл не найден

Я согласен на обработку персональных данных