Цитируем как есть из статьи «Sо, you’re a web disigner, right?

Веб-дизайн вчера

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

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

Мир дизайна начинался для меня с типографики — пожалуй, единственной сферы, в которой мой товарищ-дизайнер «плавал». Скажу сразу: я никогда не считал себя дизайнером. Однако в мои обязанности медленно, но верно стало входить проектирование функционала и интерактивных элементов, написание статей, структуризация контента, прототипирование. Так я начал заниматься дизайном. Фелипе, тем временем, вникал в особенности верстки и программирования.

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

Веб-дизайн сегодня

Энди Рутледж (Andy Rutledge) отмечает: «Дизайнера, который не занимается проектированием для интернета (не пишет разметку и CSS) нельзя назвать веб-дизайнером. Он просто рисует картинки». И тут Энди прав.

Стив Джобс founder&CEO Apple

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

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

Веб-дизайн — это универсальный дизайн. (Энди Рутледж)

Еще совсем недавно не было понятия «графический дизайнер»: дизайнеры участвовали в проектировании домов, садовых участков, потом могли заниматься оформлением интерьера или работать над созданием 3D-моделей зданий.

Кто же виновен в исчезновении универсального дизайнера?

У меня нет однозначного ответа на этот вопрос, поэтому моя точка зрения может показаться вам немного разрозненной.

Итак, у нас есть компании, которые заинтересованы в увеличении спроса на свою продукцию. И есть те люди, которые такой спрос могут им обеспечить. Среди таких людей можно выделить Джареда Спула (Jared M. Spool): он создает широкий общественный интерес к компаниям, которые хотели бы расшириться, но пока не знают, как. Он называет такие компании единорогами (Unicorn). Он даже создал специализированный институт — Unicorn Institute — для переподготовки дизайнеров для работы в современных условиях.

Кстати говоря, Джаред различает понятия специалиста, универсала и узкого специалиста:

• специалист — имеет опыт в нескольких областях, наиболее успешен в одной из них;
• универсал — эксперт в нескольких областях;
• узкий специалист — разбирается только в одной области.

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

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

Веб-дизайн завтра

Сфера разработки сайтов стремительно развивается: оптимизируется, адаптируется под разные браузеры и платформы и, соответственно, вынуждена подстраивается под запросы современных пользователей.

Недавно я наткнулся на несколько новаторских работ, заслуживающих внимания:

• Adobe исследует будущее адаптивного дизайна с привязкой по географии;
• Перестройка Нью-Йорка;
• Место, где можно поделиться идеями и кейсами.

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

• Storify
• Spotify
• Editorially

Дальше — больше. Эксперименты с 3D-графикой уже напоминают видео-игры высокого уровня — прямо в браузере.

Итог: работа дизайнера больше не ограничивается тем, чтобы «покреативить» в шапке сайта, подаче основного контента и футере. К дизайнерам предъявляется всё больше требований — и нам нужно пересмотреть свой рабочий процесс.

В поисках святого грааля

Первый шаг — самый трудный

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

Джейси Гульден (Jacey Gulden) отмечает: «Дотошно подгонять всё по сетке до пикселя для того, чтобы наиболее удачно расположить контент — непродуктивно. Нужно думать о том, как этот контент будет отображаться на разных устройствах. И уже исходя из этого разрабатывать адаптивный дизайн».

Сейчас мы уже не работаем со статическими макетами — нужна динамика и, соответственно, динамические прототипы.

Дивья Маньян (Divya Manian) отмечает несколько недостатков макетов, выполненных в Photoshop’е:

• «пиксельного перфекционизма» не существует;
• функция неопределенности: браузеры по-разному отображают элементы;
• элементы дизайна не проектируются для взаимодействия друг с другом;
• нет контроля над контетом. К примеру, закажите дизайнеру макет новой социальной сети (скажем, похожую на современную и динамичную Google+). Он будет думать над тем, как расположить контент, а не над тем, как он будет отображаться. Создание же самого дизайн-макета не обойдется без миллиона проблем.

Что нужно сделать, прежде чем начать верстать — советы Дивьи Маньян:

• учитывайте контент и возможные действия пользователя;
• исследуйте дизайн и находите те места, которые негативным образом могут сказаться на юзабилити;
• исключайте любые данные, которые «ломают» дизайн;
• создайте универсальный шаблон оптимального расположения основных элементов;
• оптимизируйте прототипы. Easel, Divshot и JetStrap вам в помощь.

Старый добрый Photoshop и панацея дизайнеров

Photoshop — уже не лучший друг дизайнера. (Энди Кларк)

Создайте новый документ в Фотошопе — и он будет просить вас указать нужные размеры. Черт, ну бесит же. Джош Лонг (Josh Long) продолжает список причин, почему от популярного графического редактора стоит отказываться:

• он дублирует работу: сначала нужен прототип, потом макет и верстка;
• psd-файл — не конечный продукт: заказчику нужен готовый и интерактивный сайт;
• вы не можете удаленно вносить изменения в макет дизайнера;
• CSS is ready;
• Photoshop дорогой;
• Photoshop статичный;
• он не имеет никаких функций для прототипирования;
• дизайнер вынужден начинать с контента, а не со стиля.

Некоторые дизайнеры уже находятся в поиске достойной замены Photoshop’у:

Джейсон Санта Мария (Jason Santa Maria): «Сайт — это не только картинка, но и интерактивность, движение. Нам нужна такая программа, которая сможет собрать и графику, и звуки, и контент в единое целое, учитывая при этом, как пользователь будет взаимодействовать с сайтом».

Приложение Project Meteor стало реакцией на потребность в современном приложении для веб-дизайнеров. Его функционал ничуть не уступает функционалу Macaw, Webflow и даже некоторым продуктам Adobe.

Ложка дёгтя: Девин Халладей (Devin Halladay) считает, что все эти приложения и программы превращают дизайнера в ленивое существо.

Я же считаю, что вы сделаете правильный выбор, какой бы из них не предпочли. Не стоит искать идеальный инструмент — как насчет того, чтобы создать набор инструментов с оптимальными функциями, нужными именно вам?

Дробите нужное приложение на части, берите нужные и адаптируйте их к своей собственной модели работы. (Джони Корпи)

Есть такой сервис — Typecast, он позволяет экспериментировать с типографикой так, что вы начинаете чувствовать себя дирижёром оркестра. Есть Gridset — с его помощью можно легко создавать несложный адаптивный дизайн. И Modular Scale — преимущество которого в масштабировании типографики. Список можно продолжить. Дизайнеры просто обожают такие сервисы.

Если вы согласны с Оливером Рейченстейном (Oliver Reichenstein) в том, что веб-дизайн на 95% состоит из типографики — откажитесь от Photoshop’a пользу онлайн-сервисов. Творите волшебство там, где оно происходит!

Работать онлайн можно не только с типографикой, готовы к открытиям?

Проектирование в браузере

Я видел много комментариев в блогах примерно такого содержания: «Но это не проектировалось в браузере! Вы воспользовались редактором!». Для начала давайте кое-что проясним. Проектирование в браузере не означает, что вы используете его в качестве единственного инструмента для разработки.

«Проектирование в браузере» можно заменить на «принятие решения в браузере». (Dan Mall)

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

При помощи браузера я научился ценить расположение контента, перестал читать онлайн СМИ, начал обращать внимание на всплывающие подсказки. Был ещё один момент, когда я перестал делать сложные вычисления для определения отступов, полей и интервалов. Я приучил себя проверять то, что предлагает мне браузер, и стоит мне только взяться за работу, я то и дело спрашиваю себя: а что будет, если этот блок немного растянуть, как будет работать анимация, как будут отображаться комментарии и так далее.

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

Сейчас я проверяю свои проекты на смартфоне и планшете — так мне удается выявить несколько существенных недочетов. Для ресайза своих проектов можете попробовать приложение Бреда Фроста (Brad Frost) «Ish.» Это мое любимое в своей сфере. Оно не полагается на стандартные разрешения — вместо этого он случайным образом устанавливает значения. От самого маленького до самого большого. Ваш сайт должен отлично отображаться в любом из них.

Смена веры

В Испании многие говорят по-английски. Реальная картина такая: мы думаем по-испански, переводим про себя на английский и уже тогда говорим, с акцентом. Мы выглядим, как идиоты. Английский ведь не наш язык. И мы не в силах сказать на нем то, что хотим сказать по-испански. Но проблема в другом. Правильно ли нас поймут?

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

Нужно просто переосмыслить себя как дизайнера.

Антон дизайнер

Не стоит впадать в крайности. Сейчас дизайнер отвечает за графическую часть проекта + говорит с заказчиком, если он еще будет и верстать, то зачем ему вообще нужно будет работать в студии — это же человек-оркестр какой-то :)

Не стоит путать понятия. На западе под должностью Web designer действительно понимается профессионал, который и рисует, и верстает то, что нарисовал. Для чуваков, труд которых подразумевает только работу в фотошопе, есть название Graphic designer.

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

Мы, все-таки, графические дизайнеры :)

Кстати, в оригинале еще куча всяких полезных ссылок, так что заинтересовавшиеся — кликаем: «Sо, you’re a web disigner, right?»