Дизайн

19 мыслей дизайнера о дизайне, интерфейсах, творчестве и работе

Графический дизайнер Александр Тихонов рассуждает о сути профессии дизайнера, применении навыков и поиске интересных проектов.

Будет полезно дизайнерам, фрилансерам, людям профессий из смежных областей.

3008_1_art

● Мысль 1

– Разрабатывая следующий интерфейс не забывайте о дальтониках: «Разной степенью дальтонизма страдают 2–8 % мужчин, и только 0,4 % женщин.». То есть просто изменения цвета ссылки в меню для текущего раздела будет недостаточно.

● Мысль 2

– Не забывать заниматься своими личными проектами хотя бы раз в неделю.

● Мысль 3

– В питчах желательно показывать две концепции. Один вариант — то, как считаешь нужным. Второй — в качестве альтернативы. Дополнительная работа для клиентов — не страшно. Главное, чтобы было приятно ее делать.

● Мысль 4

– Пробовать в каждом новом проекте что-то новое, иначе о росте и не стоит говорить.

● Мысль 5

– Разработчики мобильных сайтов, вам пишу: а вы знаете, что на свете существует гораздо больше неретина/неайос/ненэксус пользователей мобильного интернета, чем обратных? Это касается не только России, но и Европы (за Америку не отвечаю, там не был).

Если в Москве в метро айфонов пруд пруди, то в том же Будапеште или Вене ничего подобного. Все эти дорогие телефоны там редко можно увидеть. Все ходят со старенькими или просто не особо модными ненавороченными Android устройствами.

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

● Мысль 6

– Не заставляйте пользователя сомневаться в работоспости интерфейса. Нажал поиск и ждет пока загрузится контент. А тем временем страница несколько секунд белая, пустая. И не понятно то ли ничего не найдено, то ли сломалось. Хоть какой-то прелоадер нужен.

● Мысль 7

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

Очень важно за этот стартовый период не потерять запал.

А потом как-то все потихонечку встает на рельсы.

● Мысль 8

– В какой бы отрасли вы не предоставляли свои услуги, никогда не бойтесь говорить клиенту, что он не прав. Вы — эксперт. Вас за этим и нанимали, из-за ваших знаний к вам и обращались. Вот из-за этой боязни в огромной доле услуг и выпускаемых продуктов страдает качество.

● Мысль 9

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

Возьмем для примера адаптивную верстку сайта.

У меня во время такой работы на столе лежат 3 устройства: iPhone, iPad и телефон Android (у всех троих ощутимо разные размеры экрана).

Как только появилось обновление верстки, беру каждое устройство, смотрю на нем, не забываю про альбомный вид (повернуть экран).

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

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

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

● Мысль 10

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

Однако, не редко низкий уровень работ связан не только с умениями дизайнера, но и с его взаимоотношением с клиентом. Для кого-то работа делается легко, непринужденно, быстро и качественно. А для другого — долго, тяжело и второсортно. Все дело во взаимопонимании. Дизайн — это всегда работа в команде с клиентом. Так что за результат ответственны оба.

● Мысль 11

Не доверяйте Photoshop в вопросе отображения шрифтов.

При работе над дизайном сайта, ни один из встроенных режимов сглаживания шрифта не отразит реальной картины — той, которую вы увидите в браузере. Даже не так давно появившиеся режимы Mac и Mac LCD (это для версии под OS X) не покажут, как действительно будет смотреться текст на страничке.

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

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

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

● Мысль 12

Когда работаю над анимацией приложения, то в After Effect создаю Composition длинной не более 2 секунд (ну, ладно, иногда не более 3 секунд). Это помогает сделать короткую не затянутую анимацию, что будет только плюсом при использовании приложения. Так же этого хватает для небольшой задержки перед началом анимации и после ее окончания.

● Мысль 13

Частенько при разработке интерфейса (какой-либо сложной системы или простенького сайта) клиент просит оформить все сопутствующие теги: QUOTE, UL, OL, P, H1, H2, H3 и прочее. Вот об этих H и пойдет речь.

Как обычно просят: «Нужно оформление H1, H2, H3, H4, H5, H6». Просят все эти заголовки ввиду того, что просто не знают, что на самом деле нужно и что пригодится. Вот в этот момент у вас появляется власть повлиять на то, как будет выглядеть будущий контент в интерфейсе, который вы разрабатываете.

Уже давно не секрет, что большое разнообразие форматирования текста только затрудняет восприятие контента. Многие мэтры типографии предлагают ограничиться 2 или 3 заголовками (в Vignelli Canon предлагается использовать 3). Хоть это и ограничит возможности в оформлении текста, но это позволит больше сосредоточиться на самом контенте, от чего выиграют все. Его прийдется сделать таким, чтобы не было каких-либо сложных структур в пределах одной страницы.

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

● Мысль 14

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

Допустим, вы рисовали интерфейс приложения под iOS на примере экрана iPhone 5 (это до сих пор самое популярное разрешение среди iOS устройств). Далее со всем этим материалом вы переходите в After Effects. Готовите анимацию. Утверждаете ее. А потом оказывается, что еще есть и экраны iPhone 6, где уже не 2x, а 3x. И тут вам приходится переделывать проект.

В Photoshop перейти из 2x в 3x очень просто: достаточно изменить значение dpi, скажем, с 144 до 216 (при условии, что все элементы на экране либо векторные, либо в Smart Object с огромным внутренним запасом). Так вот в After Effects это сделать совсем не так же просто.

Делайте анимацию для больших разрешений: минимум для максимального разрешения экрана устройства. А лучше — для в два и более раз большего максимального разрешения экрана устройства.

● Мысль 15

У меня есть один критерий проверки работы перед отправкой клиенту… Даже не критерий, а условие: подождать следующего утра.

Если утром, днем или вечером работа завершилась и можно отправлять, то лучше взять паузу до следующего утра. Утром голова чистая, взгляд уже не такой замыленный, потому что был перерыв. Частенько такой подход спасал. Бывает вечером под конец рабочего дня, когда мозг уже не мозг, думаешь, что вот оно, круто сделано! А утром смотришь и хвалишь богов, что не отправил. Буквально пару штрихов — и результат стал гораздо лучше.

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

● Мысль 16

Недавно наткнулся на заголовок статьи “Don’t design what users want”. Статью так и не прочитал, но мысль в голове сама сформулировалась: нельзя делать ровно так, как просит пользователь.

Бывает, что пользователь (или клиент, или менеджер) ставит задачу, которая является решением к другой задаче. Например, «эту кнопку надо сделать крупнее», или «фон этой формы должен быть зеленым», или (самое банальное) «сделайте логотип крупнее».

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

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

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

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

● Мысль 17

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

Если вы у себя на маке легко различаете оттенки серого, то на некоторых дисплеях этот серый вы не отличите от белого.

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

Как решение вопроса разного отображения цветов были придуманы Web Safе цвета. Это набор из 216 цветов, которые будут везде одинаково отображаться (информации по ним в интернете полно). Правда, этих цветов иногда не хватает.

Для меня лучшим способом быть уверенным в правильности отображения цветов на разных устройствах — это просмотр на самих устройствах.

● Мысль 18

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

Хорошие специалисты, в большинстве случаев, выбирают проект не столько из-за гонорара, сколько из-за интереса к проекту. Так, мы, не беремся за сигаретные или алкогольные проекты. Пробовали, завышали стоимость (для мотивации), но в итоге отказывались до начала работ. Не хочется таким заниматься. А бывают интересные проекты, над которыми есть желание работать даже за копейки.

Если специалист отказался от работы над вашим проектом и вам удалось убедить его с помощью плюшек (денежные бонусы, командировки, лучи славы), то и процесс, и результат работы могут оказаться далеко не блестящими. А все потому, что не интересно.

Отказал — не уговаривайте, ищите другого.

● Мысль 19

(мысль, скорее всего, для разработчиков, но без дизайнеров тут не обойтись)

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

Поэтому, перед принятием решения об использовании шрифта для иконок, проконсультируйтесь с дизайнером этого интерфейса (или арт-директором). Возможно, это навредит внешнему виду.

Источник: Мастерская веб-дизайна
Фото на обложке и в статье: ShutterStock