Как вы делаете дизайн сайта?
==============================

 Здравствуйте, уважаемые дизайнеры!  

Я бы хотел попросить вас рассказать немного о том, как вы разрабатываете дизайн сайта с момента получения договорённости с заказчиком. Был интересный пост о вёрстке, где профи рассказывали о том, как верстают сайты шаг за шагом. Хотелось бы послушать подобное о дизайне. Как создаёте и согласовываете с заказчиком ТЗ (в случае его отсутствия), с чего начинаете, какими инструментами пользуетесь, какими принципами руководствуетесь.  
  

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

Буду очень признателен, если поделитесь опытом. 

 1. На первой встрече обычно удается узнать только область деятельности и смутные очертания того, как представляет себе результат заказчик. Обычно заказчик показывает пару сайтов из своей отрасли, которые ему нравятся. Мы с ним можем совместно на бумаге сделать пару эскизов и составить список «того, что должно быть на сайте».   
  

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

3. Дальше нужно узнать ответы на вопросы из пункта 2 и тогда можно оценить сроки и стоимость.  
  

4. Начинаю рисовать wireframes. В графическом редакторе (у меня Sketch) создаю новый документ, размечаю в нем модульную сетку и начинаю накидывать туда контент.   
  

На этом этапе у меня только белый фон, черный текст шрифтом по-умолчанию (Open Sans) и 2-3 оттенка серого для кнопочек, линеечек и плашечек. Никакого дизайна, но строго соблюдается модульная сетка. Контент использую только реальный (который дал клиент) или выдуманный (тексты с чужих сайтов, которые могли бы подойти к этому сайту, или придумываю текст сам), но ни в коем случае не «lorem ipsum» и не абстрактный текст ни о чем. Так как я делаю конкретный сайт на заданную тему, а не шаблон, то важно чтобы тексты были по-существу, и «рыба» тут будет мешать: если нечего написать, надо делать дизайн учитывая, что текста очень мало; если есть много текста, надо дробить его на подзаголовки, разбавлять врезками и иллюстрациями. Часть выдуманного текста потом перепишется в реальный, с использованием фактов о клиенте, остальное уберется за ненадобностью.  
  

5. Заливаю нарисованные страницы в [invision](http://www.invisionapp.com/), ставлю между страницами ссылки, ставлю комментарии, как это должно работать. Там, где контент придуман, заметка о том, что нужно переписать текст в таком же ключе. Где использована чужая иллюстрация, комментарий «заменить на настоящую» и т.д. Wireframes готовы.  
  

6. Заказчик видит более оформленный вариант, у него появляются конкретные комментарии, правки по текстам и фактам. Еще одна-две итерации и вайрфреймы превращаются в согласованное ТЗ — кликабельный прототип с реальными контентом.  
  

7. Начинаю раскрашивать вайрфреймы. Первая страница — «О компании». На ней обычно есть несколько абзацев текста, пару заголовков. Сначала шрифты: выбираю основной шрифт, размер, межстрочное расстояние. Font-family выбираю только из бесплатных шрифтов, иначе это может вылиться для заказчика в [дополнительные затраты](http://paulradzkov.com/2014/web-fonts_license/).  
  

8. На основе страницы «О компании» создаю отдельную страницу с типографикой и доделываю все остальные текстовые стили: заголовки, основной текст, lead-text, small-text, текст в таблице, списки, цитаты и отзывы, врезки, состояния ссылок в тексте, — всё, что встречалось в вайрфреймах. Позже на эту страницу будут добавляться состояния кнопок, полей ввода, табов и других интерфейсных элементов. Из элементов этой страницы создаю динамические стили, которые потом применяю ко всем остальным частям вайрфрейма.   
  

Кроме того, на странице с типографикой отмечаю расстояния (margins) между элементами: между заголовками и текстом, между секциями контента. Это помогает не только верстальщику, но и мне самому. Шпаргалка по расстояниям помогает придерживаться общего стиля на всех страницах, и верстальщику потом не надо ломать голову: это ошибка дизайнера или надо прописать исключение. [Пример такой странички](https://invis.io/AN4Y64FFD)  
  

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

10. Отрисовываю все остальные элементы. Вайрфреймы плавно превращаются в финальный дизайн.  
  

11. Если в проекте много иконок, то делаю сборную страницу для иконок, а сами иконки символами вставляю на все остальные страницы.  
  

12. Заливаю в invision, жду комментов от заказчика, вношу правки.  
  

13. Если правок больше нет, создаю слайсы для экспорта картинок, иконок и т.д. Опять навожу порядок в слоях и группах. Invision автоматически экспортирует все слайсы в папку assets. Ресурсы экспортирую в обычно в @1x, @2X и svg.  
  

14. Если верстальщик на Винде, заливаю исходник в <https://zeplin.io/> — там можно через браузер посмотреть параметры шрифтов, размеры и расстояния между элементами.  
  

--  
  

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

 ТЗ - устаревшая и не нужная хрень.  
  

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

2. Пользуясь инструментом для создания Wirefames ([раз](http://ninjamock.com/), [два](https://balsamiq.com/products/mockups/)), создаёте концепт всех страниц сайта. Чем больше деталей, тем лучше.  

3. Согласовываете с с заказчиком этот концепт (при желании его можно подписать как приложение к договору)  

4. Создаёте пару тройку цветовых решений, согласовываете. Можно даже накидать такой же фрейм в нужных цветах.  

5. Собственно рисуете сам дизайн строго по фреймам. 

 Начните с интервью с заказчиком. Дальше по ситуации. 

 Нет общей формулы успеха :) Пробуйте, учитесь, ломайте побольше дров, что бы легче было в будущем :)