main

UXОбеспечение качества

Как сделать редизайн сайта: 7 основных шагов

Декабрь 23, 2016 — 0

С задачей провести редизайн сайта рано или поздно сталкиваются большинство компаний. Когда он действительно необходим? Как правильно выполнить редизайн? С чего начать? Мы решили ответить на все эти вопросы на примере редизайна сайта галереи современного искусства ART brut


Как сделать редизайн сайта: 7 основных шагов

Сайт галереи современного искусства не может позволить себе не быть современным. Более того, он должен привлекать внимание к работам, представленным в галерее, и позволять посетителям легко делать свой выбор. Именно эти цели преследовали владельцы галереи ART brut, когда ставили задачу выполнить полный редизайн сайта.

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

Шаг 1. Сбор информации и анализ проблемы
С чего начинать? С анализа проблемы, точнее проблем. Что не устраивало в старой версии сайта:

  • Устаревший дизайн. Внешний вид сайта был непривлекательный, а для галереи современного искусства это очень важный фактор.
  • Отсутствие нужных разделов. Нужно было добавить разделы: авторы, скульптура, в детскую.
  • Сложно найти авторов и работ. На сайте отсутствовал поиск по авторам, названиям работ. Отсутствовали фильтры поиска работ по цвету, размеру и стоимости.
  • Сайт не адаптирован под мобильные устройства. Большинство пользователей приходит через соц. сети (facebook, Instagram) или узнают о сайте галереи на различных мероприятиях. Оба варианта предполагают взаимодействие с мобильными устройствами.

Кроме этих изменений необходимо было реализовать возможность сохранения наиболее понравившихся работ в избранное.

Анализ2

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

Шаг 2. Определение пользователей и их потребностей
По итогам первого шага была составлена структура сайта. Теперь необходимо было определить пользователей и их потребности. Основных пользователя два: администратор, управляющий контентом на сайте, и посетитель, выбирающий картины. Для каждого из них была составлена карта функциональных потребностей. Этот инструмент аналитики отлично помогает систематизировать все, что нужно пользователям, и не забыть нужный функционал.

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

Для составления таких карт есть много программ, но мы остановились на Xmind. Приложение дает возможность выбрать наиболее подходящий формат и дизайн карты. Разнообразные маркеры позволяют отметить, например, важность фич или сложность их разработки, выделить те из них, в необходимости которых есть сомнения.
Потребности-пользователя_увелич

Шаг 3. Прототипы
После того, как основные потребности пользователей определены, можно начинать разработку прототипов. Сначала нужно прорисовать схемы на бумаге и обсудить их с заказчиком. Высокая детализация на данном тапе не нужна, да и сами рисунки вовсе не должны претендовать на участие в выставке. Для каждой страницы необходимо создать простые каркасные схемы. И только после, получив первую обратную связь и необходимые уточнения, стоит воспользоваться одним из специально разработанных для этих целей приложений.

Наиболее удобен Balsamiq. Инструмент предназначен специально для создания каркасных схем (wireframes). В нем есть все необходимые библиотеки основных элементов мобильного и web-дизайна. Для разработки стандартных элементов (хедер, футер) удобно воспользоваться мастерами. Все базовые переходы между страницами можно сделать интерактивными.

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

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

Шаг 5. Дизайн
Как и разработка прототипа, дизайн – итерационный процесс. Сначала, на первой странице согласовывается стилистика сайта. Отдельно прорабатываются состояния всех интерактивных элементов сайта: кнопки, иконки, карточки. Для остальных страниц, если стилистически они не сильно отличаются, процесс проходит быстрее.
Дизайн
Сайт должен быть адаптивным, именно поэтому изначально была выбрана блочная структура страниц. Используя модульную сетку, меняя размер карточек и число колонок, можно легко адаптировать страницу под нужный размер экрана. Однако, детали ряда стандартных элементов не были проработаны на стадии прототипа. Такое можно допускать для небольших сайтов. Теперь же для отображения на мобильных устройствах было необходимо разработать дизайн меню, шапки, футера, определить поведение карточек в зависимости от размера экрана.

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

Шаг 7. Важные детали
Конечно, нельзя забывать про настройку метрик и SEO, проводить грамотный переезд, чтобы минимизировать потери в поисковой выдаче. А если редизайн был сделан качественно, то уже очень скоро ваш сайт не только вернет свои позиции, но и привлечет гораздо больше новых клиентов.

Светлана Калашникова

Оставьте комментарий

Адрес вашей почты не будет отображаться в комментарии. Обязательные поля отмечены символом *