Задать вопрос

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

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

Задаю такой вопрос, потому что на практике столкнулся с осознанием того, что я не имею какой-либо системы при разработке дизайна, от чего страдает продуктивность и эффективность работы.
Буду очень признателен, если поделитесь опытом.
  • Вопрос задан
  • 1590 просмотров
Подписаться 3 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 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
Нет общей формулы успеха :) Пробуйте, учитесь, ломайте побольше дров, что бы легче было в будущем :)
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы