ООО «ПРкениг»
236006 Калининград Московский проспект 40
8 (4012) 39 09 55
info@pr-kenig.ru,

Первоначальные этапы разработки сайта, веб проекта: Идея, эскиз, mind map, прототип, гайдлайн, макет (мокап)

Первоначальные этапы разработки сайта, веб проекта: Идея, эскиз, mind map, прототип, гайдлайн, макет (мокап)
Первоначальные этапы разработки сайта, веб проекта: Идея, эскиз, mind map, прототип, гайдлайн, макет (мокап)
Автор Дмитрий Грозный Дмитрий Грозный 19/07/2018

Всем привет! На этот раз, я расскажу вам о первоначальных этапах разработки веб-проекта, сайта.

Вы, наверняка, никогда не задумывались с чего начинается разрабатываться веб-проект? Конечно, речь пойдет не о простых сайтах, а о тех, в которых требуется детальная и продуманная работа.

Так вот! До того, как дать задачу верстальщику и программисту. Необходимо выполнить ряд работ, подготовить фундамент, основу для будущего сайта!

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

Наш подход основывается на ряде статей взятых из habr, wikipedia и прочих страниц интернета. Например: «О бедном мокапе замолвите слово», «Почему важно делать эскизы, прежде чем переходить к прототипу», «Вайрфреймы, прототипы и мокапы – в чем разница?», «Какая разница между эскизом, каркасом, мокапом и прототипом?».

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

Рассмотрим основные первоначальные этапы, которые могут иметь место в разработке проекта:

  1. Идея.
    1. Обсуждение идеи.
    2. Эскиз. Предварительный набросок, фиксирующий идею.
  2. Схема (Каркас). Визуализация концепта. Основа дизайна.
    1. Миндмап (Mind map)
    2. Вайрфреймы (Wireframes)
  3. Функционал. Взаимодействие между элементами.
    1. Вайрфреймы (Wireframes). Визуализация взаимодействия между интерфейсом и пользователем.
    2. Прототип (Prototype).
    3. Симуляция (Simulation). Полнофункциональный прототип.
  4. Создание графики
    1. Дизайн-концепция. Графические наброски.
    2. Гайдлайн
    3. Технический дизайн. Mockup или mock-up (макет).

Идея

На наш взгляд, этот этап решает четыре задачи:

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

Определение основных идей имеет исключительно прикладное значение для моделирования сайта: от этих идей мы отталкиваемся, проектируя и функциональную, и информационную структуру, и контент.

Формирование идеологической базы — вещь исключительно важная как для результата, так и для процесса. Общее видение довольно трудно потрогать, проверить или измерить, но его отсутствие очень хорошо ощущается на важных этапах создания сайта: проектировщик создаёт не те функции, дизайнер рисует не то, что нужно.

Эскиз

Придумать идею — легко. Самое сложное — понять, как эта идея будет реализована в пользовательском интерфейсе. Как раз для этого и нужны эскизы.

Что такое эскиз? Набросок от руки. Карандашом или пером, на доске или салфетке — не так важно. Дешево, быстро, сердито. Нужен для того, чтобы зафиксировать и не потерять идею. 

Многие дизайнеры и проектировщики ошибочно предполагают, что эскиз (sketch) — это схема интерфейса (wireframe) или прототип (prototype). Хоть они и правда в чём-то схожи, но по большому счёту это «три большие разницы». Все они преследуют одну цель — иллюстрирование концепта интерфейса и его поведения. Но эскиз, схема и прототип создаются в разных средах и приводят к разным результатам.

Эскиз — это в основном сырой рисунок сделанный «от руки» на листе бумаги, это не дает вам полного представления вашего дизайна, но это самый быстрый способ, чтобы обрисовать вашу идею для дальнейшей разработки.


Схема (Каркас)

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

Миндмап (Mind map)

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

Вид MindMap полностью зависит от воображения человека, в основном используется графика в виде блок-схем нарисованная.


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

Вайрфреймы (Wireframes)

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


По сути Вайрфрейм - это образ дизайна низкой точности, который отвечает на вопросы:

  • Что? (Основная группа контента)
  • Где? (Структура информации)

Следует отметить, что wireframes отвечает и за описание и базовую визуализацию взаимодействия между интерфейсом и пользователем. Однако эту часть я отнес к функционалу. О чем будет сказано ниже.

Функционал

На этой стадии нужно полностью продумать поведение приложения. Ключевая особенность — интерактивность. Т.е. полностью повторить поведение будущего приложения. 

Эту стадию используют далеко не все команды. Причины этому разные, начиная от ресурсоёмкости прототипирования и заканчивая спецификой продукта.

Прототипирование — быстрая «черновая» реализация базовой функциональности для анализа работы системы в целом. На этапе прототипирования малыми усилиями создается работающая система.

Вайрфреймы (Wireframes). Визуализация взаимодействия между интерфейсом и пользователем.

Существует два типа прототипов: динамические и статические. Статический тип – обыкновенная картинка с возможностью добавления пояснений. Динамический тип позволит представить, как будет работать приложение. Есть возможность нажимать кнопки, переходить по определенным ссылкам и так далее.

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

Прототип (Prototype)

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

На прототипе уже не нужны пометки, что и как работает. Чтобы понять это, нужно просто кликнуть по месту, к которому у вас вопрос. 

Симуляция (Simulation)

Симуляция - это полнофункцональный прототип. Т.е. тоже модель для тестирования концепции или процесса проекта, но — Hi-Fi (high fidelity — высокой точности, в отличие от протопипа, который является моделью низкой точности — Lo-Fi). 

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

Создание графики

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

Мы различаем несколько графических работ:

  • Дизайн-концепция. Графические наброски.
  • Гайдлайн. Свод правил визуального оформления.
  • Технический дизайн. Mockup или mock-up (макет).
Дизайн-концепция. Графические наброски.

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

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

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

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

Гайдлайн

Гайдлайн для веб – это документ представляющий собой руководство, свод правил по использованию системы визуальной идентификации бренда и правил использования фирменного стиля в сети интернет.

Крупным веб-проектам просто необходимо четкое описание структуры и визуального оформления. Это позволяет добавлять новые разделы и шаблоны страниц, объединенных единым стилем. Не смотря на то, что в гайде прописаны и модульная сетка сайта, и прорисованы UI элементы — это по сути конструктор, который может ограничивать полет творческой мысли. 

Основы сайта

  1. Модульная сетка для различных разрешений экрана
  2. Блоки на модульной сетке
  3. Интерлиньяжная сетка
  4. Меню сайта
  5. Модульная сетка
  6. Внешний вид меню для различных разрешений экрана 

Элементы дизайна

  1. Шрифты, Типографика
  2. Цветовая схема
  3. UI элементы
    1. Кнопки
    2. Поля ввода
    3. Выпадающие списки
    4. Слайдеры
    5. Элементы выбора
    6. Иконографика
  4. Основополагающая графика
  5. Блоки информации
  6. Компоновка страниц
Mockup или mock-up (макет).

«Мокап» – это узкоспециальный термин, которым пользуются в основном дизайнеры. В прямом значении слово мокап означает макет. Определение взято здесь.

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

Макет сайта - это демонстративная версия будущего сайта: как он будет выглядеть после того, как наполнится информацией, контентом, рекламой и прочим необходимым. Макет сайта не интерактивный - то есть пункты меню на этой стадии разработки сайта не активны. Такой макет представляет собой только набор картинок - и называется поэтому графическим макетом. В нашем случае «техническим дизайном».

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

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

Макет Гайдлайн Прототип Вайрфреймы Mockup

Просмотров: 1243

Заказать проект

Наша команда профессионалов готова реализовать ваши проекты, заполните форму: