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

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

Задаю такой вопрос, потому что на практике столкнулся с осознанием того, что я не имею какой-либо системы при разработке дизайна, от чего страдает продуктивность и эффективность работы.
Буду очень признателен, если поделитесь опытом.
  • Вопрос задан
  • 1245 просмотров
Пригласить эксперта
Ответы на вопрос 4
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
1. На первой встрече обычно удается узнать только область деятельности и смутные очертания того, как представляет себе результат заказчик. Обычно заказчик показывает пару сайтов из своей отрасли, которые ему нравятся. Мы с ним можем совместно на бумаге сделать пару эскизов и составить список «того, что должно быть на сайте».

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

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

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

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

5. Заливаю нарисованные страницы в invision, ставлю между страницами ссылки, ставлю комментарии, как это должно работать. Там, где контент придуман, заметка о том, что нужно переписать текст в таком же ключе. Где использована чужая иллюстрация, комментарий «заменить на настоящую» и т.д. Wireframes готовы.

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

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

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

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

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

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

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

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

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

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

--

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

1. В общении с заказчиком делаете заметки в произвольной форме.
2. Пользуясь инструментом для создания Wirefames (раз, два), создаёте концепт всех страниц сайта. Чем больше деталей, тем лучше.
3. Согласовываете с с заказчиком этот концепт (при желании его можно подписать как приложение к договору)
4. Создаёте пару тройку цветовых решений, согласовываете. Можно даже накидать такой же фрейм в нужных цветах.
5. Собственно рисуете сам дизайн строго по фреймам.
Ответ написан
Sanes
@Sanes
Начните с интервью с заказчиком. Дальше по ситуации.
Ответ написан
uncurrent
@uncurrent
Нет общей формулы успеха :) Пробуйте, учитесь, ломайте побольше дров, что бы легче было в будущем :)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Appbooster Самара
от 60 000 до 150 000 руб.
Литиум лаб Москва
от 80 000 до 150 000 руб.
Request Design Москва
от 30 000 до 40 000 руб.
21 сент. 2018, в 18:08
200 руб./за проект
21 сент. 2018, в 17:53
25000 руб./в месяц
21 сент. 2018, в 17:41
1000 руб./за проект