Советы для дизайнеров, не «кодить»

Различия между веб и вашей дизайнерской программой

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

Многие дизайнеры также любят использовать фильтры Photoshop для достижения эффектов фона. Они могут действительно помочь визуально, но старайтесь думать шире и убедитесь, что они могут быть отделены в виде отдельных файлов для использования в качестве фона, и вы не создаете что-то сложное, что нельзя будет встроить без особых усилий. Фильтры Photoshop (например, multiply, linear burn т.д.) не распространяются на Интернет.

Об этом можно даже не говорить, но называйте с умом свои папки / слои и старайтесь не превращать в растровый формат большие куски макета, так как это добавляет работы с ним разработчику.

Адаптивный дизайн — это больше, чем просто «компьютер и мобильный»

Нередко я вижу дизайн сайта, подается в двух вариантах; для компьютеров и мобильных. Как правило, он будет 960 пикселей и 320 пикселей в ширину соответственно. Проблема заключается в том, что больше нет такого понятия, как эти фиксированные ширины, и все, что мы делаем, должно быть абсолютно гибким.

Слишком часто разработчик пытается «заполнить пробелы», когда дизайнер не предусмотрел дизайн-макет, например, на 825, 650 или даже 1400 пикселей в ширину. Это может привести к реальной головной боли для всех заинтересованных сторон, поскольку контент и навигационная структура терпят крах, если требования к размеру экрана не были приняты во внимание.

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

Не тратьте время на создание дизайна для бесконечного числа значений ширины, а рассматривайте элементы страницы максимально гибкими и простыми.

Как говорит Брэд Фрост, когда речь идет об атомарном дизайне, «мы не создаем страницы, мы создаем систему компонентов».

Помощь интерактивности

Это довольно сложная вещь, потому что Photoshop и Illustrator, в конечном счете — статические. В отличие от разработки дизайна «в браузере», где вы видите родного отклика, CSS-анимации и реальных элементов страницы (как кнопки и флажки), в Photoshop вам нужен тщательный макет того, как что-то может выглядеть в исходном состоянии, при наведении на него, при нажатии, при отключении и так далее.

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

Наборы UI могут помочь этому процессу. Это по сути каталог элементов страницы, изложенных в файле, чтобы визуально описать интерактивные состояния.

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

Начинайте с контента!

Это звучит глупо, но создавайте дизайн вокруг реального контента! Даже с самыми лучшими намерениями в мире, используя «рыбу», вы все равно просто угадываете. Иногда реального контента может и не быть, в этом случае получите указания от вашего клиента — он несет такую же ответственность, как и вы, когда дело доходит до содержания, поэтому не бойтесь немного надавить.

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

Часы Apple — это прекрасное, идеологическое изображения, но оно работает только в рекламных целях. Какие шансы, что у вас в контактах так же профессионально сфотографированы портреты друзей с такими же короткими именами?

Контактируйте с разработчиком

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

Вместе работая на протяжении всего процесса дизайна и встраивания (которые, как мы теперь знаем, во многом пересекаются), вы устраните недостатки дизайна, вытащите максимум из front-end технологий, обеспечьте более легкий процесс и создавайте качественный продукт.