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

26 Мая 2021 5911 0 Технологии
Поделиться

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

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

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

Готовим файл копирайтов

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

Файл копирайтов по структуре напоминает архитектуру сайта, где собираются все материалы, для передачи их на прототипирование. 

*Для текстов Ilavista использует excel: каждая вкладка — отдельная страница сайта. Пример можно посмотреть здесь

*Для фото\видео материалов — google Диск, dropbox или яндекс диск. 

Прототипирование сайта

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

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

987876.JPG

На этапе прототипирование можно изменить функционал. Например, добавить кнопку или изменить страницу.

После поправок редактируют ТЗ и сайт переходит к дизайнерам.

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

Посмотрите вариант: прототип сайта

Дизайн  

Это стадия, которая требует наименьшего участия Заказчика, но, как правило, именно в эту часть клиент больше всего вникает и хочет поучаствовать, ведь клиенту важен визуал, а не технические особенности. Это нормально. 

* Но важно знать: дизайн - это не  только про цвета и картинки. Это четкий выверенный процесс, который имеет много технических особенностей. 

Как правило дизайн проходит следующие этапы: 

  • Сбор референсов. На стадии Брифа, клиент указывает свои пожелания по дизайну, какие сайты нравятся\не нравятся и почему. На основе этого дизайнер формирует примеры со своей стороны с учетом особенностей проекта, а также вкуса заказчика. 

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

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

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

ui-kit.jpg

Важно! UI кит создается на протяжении создания всего MVP проекта. Далее компоненты переиспользуются. 

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

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

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

Например, проверка сочетаемости цветов

* В дизайне существует несколько укоренившихся правил, которым необходимо следовать при подборе цветов, например “правило бутика” или “правило 60-30-10”.

“Правило бутика” рекомендует использовать один цвет, который занимает 80-90% сайта и еще один-два дополнительных цвета в качестве акцента.
“Правило 60-30-10” - это правило, которые разделяет цвета на сайте в следующем соотношении: 60% - это ваш доминантный цвет, 30% - вспомогательный и 10% - акцентный оттенок. Это правильно работает, потому что создает ощущение баланса и позволяет глазам комфортно передвигаться с одной точки к другой.

  • Шрифт. Выбирается из тех, которые доступны, чтобы они корректно отрабатывали на всех браузерах. 

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

678798.JPG
  • Сетка. Хороший дизайнер это тот, который рисует макет, используя сетку, чтобы на верстке он был точь в точь, как и нарисованный.

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

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

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

Таким образом, сетка:

1. Ускоряет работу с макетом, так как не нужно каждый раз рассчитывать расстояние между объектами .
2. Упорядочивает используемый на сайте контент, и пользователь легко может найти нужную информацию. Помогает создать и закрепить визуальную иерархию на всех страницах сайта.
3. Позволяет легко работать с макетом остальным участникам команды, благодаря наличию заданной структуры и закономерностей.
4. Все макеты выглядят более эстетично, так как сетка позволяет поддержать единую стилистику.

По ссылке вы сможете посмотреть примеры сетки.

* Наш совет: не мешайте дизайнеру работать. Посмотрите его портфолио, и если вам нравятся его работы - просто доверьтесь. Для дизайнера результат работ не менее важен, чем для вас. 

В следующем материале мы рассмотрим этапы, которые идут далее: Верстка. Front-end. Back-end. QA (тестирование).
Поделиться
Материалы по теме:
Обсуждение:
Читайте также: