Мои правила дизайна хорошего интерфейса. Не пытайтесь быть слишком понятными. Взаимосвязи расположений или единая плоскость

Об освоении рынка дизайна интерфейсов написаны километры однообразных и скучных советов, которые легко нагуглить, поэтому тут я постараюсь несколько иначе подойти к теме. Специально для Цифрового Брокколи.

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

На сайте hh более полутора тысяч вакансий для UI/UX-дизайнеров, из них 100 удаленных

Среди других высококонкурентных разновидностей дизайна вроде полиграфии и айдентики – интерфейсы еще и самые прибыльные, поэтому однозначно имеет смысл попробовать себя на этом поприще. Минимальная зарплата - 65 000 рублей против 30 000 у дизайнеров полиграфии (данные ).

Вкратце о работе дизайнером интерфейсов. Самое важное

В работе постоянно действует принцип easy to play, hard to master. Обучение не является подготовительным этапом, потому что это тупо часть работы – вообще всё время. Именно поэтому можно пропустить получение образования и выслушивание нудных курсов и сразу приступить к практике.

Да-да, предварительное образование некритично – это всё-таки не хирургия и не ракетная физика. Скажу больше – образование вредит дизайнеру в 90% случаев. Потому что в новичка впихиваются чужие идеи и мнения, выталкивая главное преимущество дизайнера – новые идеи. Новый взгляд на вещи. Другой взгляд на вещи. Способность думать вне рамок и под другим углом. Этой способности вас никто никогда и нигде не обучит, а вот отнять её очень легко.

Хотя одну книжку я посоветую. Она отнимет не больше часа времени в худшем случае (за что и любим) – Дизайн пользовательского интерфейса. Искусство мыть слона .

Сейчас может сложиться впечатление, что всё просто и легко. Нет, всё очень тяжело и сложно. И хороших интерфейсов – единицы, их не умеют делать опытные дизайнеры и даже IT-гиганты. Поэтому к любым гайдам, курсам и книгам нужно относится крайне скептически. Интерфейсы сейчас – Дикий Запад (в отличие от полиграфии, например), в котором царит беззаконие и хаос. И это играет на руку новичкам – индустрия до сих пор остро нуждается в свежей крови и мозгах, потому что старожилы плохо справляются с улучшением интерфейсов.

Немного подытожу.

1. Предварительно учиться – необязательно и даже вредно, но вообще учиться всяким вещам придётся постоянно – без этого ничего не выйдет 100%.
2. Новые идеи – на вес золота, и способность их генерировать нужно тщательно оберегать, потому что вашу самооценку будут постоянно сбивать.
3. В интерфейсах на данный момент царит бардак, поэтому ко всем полученным знаниям и услышанным мнениям нужно относится скептически.

Начинаем прямо сейчас. Серьёзно

Получается, чтобы реально начать – нужно просто соответствовать неким требованиям к характеру, и всё? Да, если вы любознательны, реально способны постоянно всасывать новую информацию, трудолюбивы и обладаете неординарным мышлением (в любой трактовке, даже собственной) – можно начать сразу после прочтения этой статьи. Или если вам тупо нужна была мотивация – прямо сейчас закрывайте эту статью и вперёд.

Я – за практику. Я залез в дизайн с нулём вместо знаний. Я просто врал, что всё знаю и умею, чтобы получить работу. А потом сутками мучал гугл своими запросами, чтобы освоить всё, что нужно для выполнения задачи. Кому-то такой подход может показаться бессистемным – в том плане, что не проще ли было сначала научиться, а потом лезть? Нет, не проще, потому что знания в айти устаревают каждые 3 месяца. Ну и помним про бесценную способность иметь собственный взгляд на вещи.

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

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

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

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

Где учиться дизайну интерфейсов и получать за это деньги

Что дальше? Дальше еще проще. Теперь нужно переделать что-нибудь. Вспомните сайт, программу, сервис, которые вы используете и что-то в них вас при этом раздражает. Далеко ходить не нужно, можно опять взять тот же Телеграм. Лично меня до белого каления бесит ужасная свалка из людей, ботов и каналов в одном списке без какой-либо рубрикации. Я не хочу пользоваться альтернативными клиентами – я хочу, чтобы в официальном приложении появились отдельные вкладки для разных сущностей, а в идеале – возможность группировать чаты как душе угодно.

Всё гениальное просто. Перерисуйте одно, переделайте другое – и вы войдете во вкус, проверите свои силы, получите вдохновение. Звучит просто, на деле – намучаетесь. Но это интересно и весело.

Разумеется, выполнять нелёгкую работу за просто так – значит быстро сжигать мотивацию. А мотивацию, как уже доказано наукой, лучше всего повышают деньги. И азарт. Нехилый буст можно получить в дизайн-конкурсах, которые особенно актуальны для новичков – не страшно ошибаться, а шанс получить деньги очень даже реальный. Это чуть ли не самый лучший способ получить море разнообразной практики, да еще и возможно оплачиваемой. Лично мне нравится 99designs – сотни и тысячи заданий ежедневно, в том числе на веб-дизайн, который - ожидаемо - там самый дорогой (одна-две тысячи долларов не редкость). Выбираешь, что по душе, и с удовольствием дизайнишь – чистый кайф.

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

Да, сразу к реальным заказам. Без опыта в реальных проектах. Без опыта. Без всего. Так – тоже можно. Главное – готовность рвать пятую точку. Если нужен мотивационный пинок под зад и открытие глаз – у меня целая заметка есть .

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

TL;DR и почему всё это было вообще написано

Снова подытожу.

1. Чтобы войти в интерфейсы – необязательно учиться заранее, но обязательно потом, и вообще – постоянно; нужно иметь неординарное мышление и уметь его защищать; а также следует скептически относиться к чужим знаниям и советам.
2. Оптимальный инструмент – Фигма: она бесплатна и вообще оптимальна на данный момент, однако придётся осваивать и другие программы; какие и как – поможет крайне необходимый навык гугления.
3. Практика – лучшая школа: сначала копируем-перерисовываем что-либо, а потом переделываем то, что не нравится; а еще можно получать деньги за практику, если участвовать в дизайн-конкурсах или – если хватает наглости – в реальных проектах, которые можно получить на фриланс-биржах.

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

Подписывайтесь на канал о фрилансе и удаленной работе Remote&Freelance и узнайте, как монетизировать любимое дело, работать удаленно и путешествовать.

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

Кстати, если вы используете Figma , я рекомендую обратить внимания на наши готовые дизайн-системы . Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

Акценты и приоритеты

Хороший пример, когда дизайнер дал пользователю понимание, что важно видеть отправителя, затем тему, а уже потом содержание или его @ник в системе:

Плохой пример, где дизайнер “утверждает”: важнее всего - аватарки, а с остальным как-нибудь разберётесь:

Отступы и их пропорциональность

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

Плохой пример, когда отступы практически базируются на генераторе случайных чисел:

Текст кнопки всегда первичнее иконки

В целом хорошо:

Но можно сделать лучше:

Тоже выглядит неплохо:

И тут есть, где улучшить:

Не пытайтесь быть слишком понятными

В этом примере дизайнер был чрезмерно понятен с кнопкой закрытия:

А в этом примере дизайнер оказался чрезмерно понятен с возможностью добавления:

Перемещение курсора забирает силы

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

Плохой пример, когда дизайнер отдаляет функционал добавления элемента в список от самого списка:

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

Плохой пример с несостыковками:

Хороший пример с гармонией и соответствием:

Цвет имеет смысл

Пример хаоса: (172 votes зеленым означает ли позитивное состояние? если, да то 280 visitors оранжевым - означает негативное по логике? отнюдь! дизайнер цветом лишь разделил цифры между собой)

Пример создания порядка и обоснование цвета (я просто добавил графики поверх чужого творчества)

Хороший пример незлоупотребления цветами:

В качестве эпилога....

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

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

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

Фундамент дизайнера

Фокус, цели и задачи

Каждый дизайнер должен знать, для каких целей создается интерфейс и какие задачи он должен решать.

Цели и задачи - это не одно и тоже. У вас может быть цель хорошо провести вечер, а задача - выбрать между кино, рестораном и футболом.

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

Задач у сервиса может быть много и некоторые будут друг с другом конфликтовать, поэтому вам нужно выбрать одну основную и сделать ее выполнение максимально удобным, при этом не пожертвовав остальными.

Как бы это работало, если бы это было просто?

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

Скопировать чужое решение заманчиво, но не нужно забывать, что любой паттерн может хорошо работать в одном случае и абсолютно не работать в другом. Да и кем вы станете, лишь подражая чужим работам? Ведь хорошего дизайнера всегда отличает умение мыслить.

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

Эстетика интерфейса

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

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

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

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

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

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

Что ему нужно?

Хороший дизайнер думает сценариями, а не экранами.

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

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

Системность в дизайне

Спустя еще какое-то время, дизайнеры объединились с разработчиками, связав свои элементы в макетах со сверстанными компонентами на фронте. Благодаря этому, дизайнеру все меньше приходится рисовать и все больше использовать свои два главных инструмента: мозг и фронтенд-разработчика.

Разработчиков нужно уважать и хотя бы логически понимать суть их работы. Без этого сложно будет найти общий язык и создать отличный продукт.

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

Даже хорошую идею легко убить

Лишь с опытом я понял, что вопросы, не касающиеся основной темы нужно игнорировать. Например, сказав: “Это лишь детали, поэтому давайте обсудим основные вещи, которые влияют на бизнес, а в конце вернемся к вашему вопросу”. Как ни странно, этот ответ избавляет вас от бесполезной беседы и представляет в виде профессионала, который заботится о бизнесе клиента, а не своем эго.

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

Книги для дизайнеров

Никакие.

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

Куда устроиться

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

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

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

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

Генерация удачи

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

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

Среди этих действий есть активные и пассивные.

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

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

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

Популярный ныне вариант - пройти курс от известной компании или поучаствовать в конкурсе.

Павел Шумаков, выиграв Russian Design Cup получил предложение от ВКонтакте, а чуть позже перебрался в лондонский офис Badoo. Некоторые ребята, пройдя курс от Skillbox получили предложение о работе в AIC.

Давно известный вариант - сделать фейковый проект, вложив в него все силы и качественно опубликовать его в портфолио. Самый известный пример - редизайн Google News Георгия Квасникова, который принес ему ряд предложений от крупных компаний.

Ну и последнее.

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

Это элементарная логика:

Успеха добиваются не те, кто не совершает ошибок, а те, кто несмотря на них идет вперед.

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

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

Неизбежный исход

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

Другой вариант - перейти в продуктовую компанию, где вместе с коллегами у вас будет возможность работать над улучшением одного продукта.

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

Возможно, кто-то из вас захочет перейти на позицию продукт-менеджера и отвечать за коммуникацию между командами и стратегию развития проекта.

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

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

Ключ ко всему

Лучше продолжить самообразование или поскорее устроиться на работу?

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

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

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

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

Терпение и упорство – ключ ко всему.

Сделайте эту неделю прорывной.

Дизайн интерфейсов моя основная специализация. За много лет работы я уяснил важную вещь, которую иногда приходится доносить даже до клиентов. Самое главное в дизайне интерфейсов далеко не сам дизайн. Главное это изучение и понимание того, как люди с ним взаимодействуют. Необходимо постоянно анализировать что будет работать, а что нет.

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

Именно поэтому я сознательно разделяю дизайн интерфейсов на UX разработку и UI дизайн.

UX дизайн

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

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

Десктоп приложение, интерфейс АРМ, кассовый терминал, интерфейс банкомата, дизайн криптовалютной биржи - каждая разработка интерфейса должна начинаться со сбора информации. Как минимум: целевая аудитория, причины её неудовлетворённости, как продукт способен решить проблемы людей.

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

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

Прототипирование интерфейсов

Прототипы интерфейсов я делаю в Axure RP. На сегодня это стандарт отрасли проектирования UX. Параллельно изучаю Figma.

Sketch лично для меня оказался неудобен. Figma имеет прямой экспорт макетов в Zeplin. Для большинства разработчиков digital-сервисов это самый удобный вариант.

Если Sketch/Figma не принципиальны, я работаю в редакторе Xara Designer Pro X. Он способен генерировать динамические страницы на базе макетов.

Иногда показываю макеты в сервисе InVission. На нём можно показать минимальную анимацию компонентов и переходов. Такие прототипы интерфейсов дают заказчику хорошее представление о конечном продукте.

UI дизайн интерфейсов

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

В интерфейсах сложных digital-сервисов отрисовываю различные состояния для кнопок. Иногда отдельно создаю UI kit для особо больших проектов.

План работ над дизайном интерфейса

1. Посмотрите мои работы, убедитесь, что они вам нравятся.
2. Запрос и передача материалов.
3. Предоплата 50% (в отдельных случаях 100%).
4. Интервью, сбор информации и аналитика.
5. Разработка черно-белых прототипов интерфейса.
6. Дизайн интерфейса в цвете.
7. После утверждения всех макетов - остаток суммы.
8. Подготовка и передача исходников в формате *.PSD.

Что я делаю и чего не делаю

Аудит текущего ресурса

В рамках работы над редизайном проекта я сначала провожу аудит вашего ресурса. Описываю плюсы и минусы с точки зрения дизайна и UX.

Результат: документ с описанием и рекомендациями.

Исследования

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

Результат: профиль целевой аудитории и описание целей посетителей.

Проектирование

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

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

Результат: прототипы заказанных страниц, по которым можно походить.

Дизайн

Собственно на этом этапе делается проработка всей визуальной составляющей проекта. Разработка визуального языка. Это как комната в стиле "лофт" или кухня в стиле "прованс" - вы уже примерно понимаете какие используются элементы и как на них будут реагировать люди.

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

Поддержка

В больших проектах нередко возникает необходимость доделать какие-нибудь мелочи уже после приёмки дизайна. Я закладываю небольшой запас на такие случаи.

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

Результат

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

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

Таким образом, вы получаете комплексный продукт с четко продуманной структурой и интуитивно понятным интерфейсом.

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

«Дизайн — это больше, чем просто компоновка, упорядочивание или даже редактирование. Это привнесение ценности и добавление смысла, просвещение, упрощение, разъяснение , модификация, облагораживание, преувеличение, убеждение или даже развлечение» — Пол Ренд, книга «Дизайн: форма и хаос».

1. Интерфейсы созданы для обеспечения взаимодействия
   Интерфейсы существуют, чтобы обеспечить взаимодействие между людьми и нашим миром. Они могут помочь прояснить, осветить, включить и показать взаимоотношения, объединяют нас, разделяют, управляют нашими ожиданиями и предоставляют доступ к услугам. Процесс проектирования интерфейса это не искусство, а сами интерфейсы не монументы. Интерфейсы выполняют некоторую работу и их эффективность может быть измерена. И, однако, они не утилитарны. Лучшие интерфейсы могут вдохновлять, пробуждать, мистифицировать и усиливать наше взаимодействие с миром.
2. Задача № 1 — обеспечить ясность
   Ясность — это и первая и самая важная задача интерфейса. Чтобы быть эффективными, используя интерфейс, который вы создали, люди должны быть способны распознать что он собой представляет, осознать то, зачем они используют его, понять с чем интерфейс помогает взаимодействовать, предсказать, что произойдёт, когда они станут использовать его, и затем успешно взаимодействовать с ним. В то время, как при знакомстве с интерфейсом есть место некоторой загадке и отложенной выгоде от его использования, не должно быть места для путаницы. Ясность внушает доверие и помогает дальнейшему использованию. Сотня простых и понятных экранов предпочтительнее одного запутанного.
3. Удерживайте внимание любой ценой
   Мы живём в мире, полном отвлекающих факторов. Трудно даже ненадолго погрузиться в чтение без того, чтобы что-то нас не отвлекло и не перетянуло на себя внимание. Внимание же бесценно. Не отвлекайте пользователя мусором в боковой колонке своего приложения, помните, для чего экран нужен в первую очередь. Если кто-то читает, то позвольте ему закончить прежде чем показывать рекламу (конечно, если без этого никак). Цените внимание и тогда не только ваши пользователи станут счастливее, но и вы выгодаете от этого. Когда взаимодействие является основной целью, внимание становится необходимым условием. Удерживайте его любой ценой.
4. Дайте пользователям контроль в их руки
   Люди ощущают себя комфортно, когда они чувствуют контроль над собой и окружением. Бездумное ПО уводит их в сторону от комфорта, вовлекает в незапланированные взаимодействия, путает навигацией и непредвиденными результатами. Предоставьте пользователям контроль: показывайте системный статус, описывайте причинно-следственную связь (если вы сделаете это, получите то) и давайте им понять, что их ждёт на каждом шаге. Не переживайте, что это будет им очевидно, потому что почти всегда это совсем неочевидно.
5. Лучшие манипуляции — прямые
   Лучший интерфейс это тот, которого нет. Например, когда мы непосредственно управляем физическим объектом в нашем мире. Но т. к. это не всегда возможно, и многие объекты не физические, а информационные, мы делаем интерфейсы, которые помогают нам взаимодействовать с ними. Легко оступиться и добавить больше, чем необходимо в интерфейс: откарамеленные кнопки, градиенты и блеск, графику, опции, настройки, окна, вложения, и другой хлам. В итоге мы манипулируем элементами интерфейса, а не тем, что на самом деле важно. Вместо этого, стремитесь к идее прямого управления. Интерфейс должен быть незаметным и распознавать самые обычные человеческие жесты. В идеале, интерфейс должен быть настолько незаметным, чтобы у пользователя сложилось впечатление, что он непосредственно управляет объектом, находящимся в его фокусе.
   Добавлено: см. принцип Интерфейс — зло .
6. Одно основное действие на экран
   Каждый экран, который мы проектируем, должен быть предназначен лишь для одного важного действия пользователя. Это упрощает обучение, использование пользователями, и облегчает доработку и поддержку разработчиками при необходимости. Экраны, в которые заложены два и более целевых действий, быстро приводят к путанице. Как статья, которая должна содержать один чёткий тезис, так и каждый экран должен предлагать одно действие, наполняющее его смыслом.
7. Оставьте вторичные действия на втором плане
   Экраны с одним основным целевым действие могут иметь множество дополнительных действий, но они должны остаться вторичными! Ваша статья существует не для того, чтобы её можно было расшарить в твитере. Она существует, потому что люди могут прочитать и понять её. Делайте вес вторичных целевых действий визуально легче или показывайте их после того, как основное будет выполнено.
8. Сделайте следующий шаг естественным
   Лишь немногие действия являются заключительными, так что хорошенько проработайте для каждого действия следующий шаг. Предвидьте, каким будет следующее действие и спроектируйте его заранее. Так же, как и в обычном разговоре, предложите возможность для следующего слова. Не оставляйте человека висеть в небытии только потому, что они сделали то, что вы хотели, чтобы они сделали. Дайте им сделать следующий естественный шаг который поможет дальше достигнуть их цели.
9. Внешний вид следует из поведения (или «функция определяет форму»)
   Людям больше всего удобно с теми объектами, которые ведут себя так, как они ожидают. Другие люди, животные, вещи, программы. Когда кто-то или что-то ведёт себя в соответствии с нашими ожиданиями мы чувствуем будто у нас с ними хорошие отношения. Именно поэтому спроектированные элементы должны выглядеть соответственно своему поведению. На практике это означает, что кто-то должен быть в состоянии предсказать как элемент интерфейса себя поведёт просто взглянув на него. Если он выглядит как кнопка, то он и должен действовать как кнопка. Не заигрывайте с основами взаимодействия. Оставьте свою креативность для вопросов другого уровня.
10. Последовательность имеет значение
    Следуя предыдущему принципу, элемент не должен выглядеть подобно другому, если только их поведение не взаимосвязано. Элементы с одинаковым поведением должны выглядеть одинаково. Так же важно для различающихся элементов выглядеть непохожими (и непоследовательными). В стремлении быть последовательными новички дизайнеры часто неявно выделяют важные различия, используя те же самые визуальные трактовки, в то время как визуальные различия являются целесообразными.
11. Сильная визуальная иерархия работает лучше
    Сильная визуальная иерархия достигается когда на экране наблюдается чёткий порядок последовательности визуальных элементов. То есть, когда пользователи каждый раз просматривают подобные блоки в одинаковом порядке. Слабая визуальная иерархия даёт мало подсказок о том, где взгляду можно отдохнуть и, в итоге, создаёт суматоху и выглядит запутанной. Трудно поддерживать сильную визуальную иерархию, потому что визуальный вес относителен: когда всё выделено, то не выделено ничего. Если требуется добавить один визуально тяжёлый элемент на экран, то может понадобиться снизить акцент со всех элементов для сохранения иерархии. Большинство людей не замечают её, но это один из самых простых путей усилить или ослабить дизайн.
12. Продуманная организация снижает когнитивную нагрузку
    Как сказал Джон Маеда в своей книге «Простота», продуманная организация элементов на экране может сделать большое малым. Она помогает людям проще и быстрее понять интерфейс, если вы показали взаимосвязи контента в дизайне. Группируя подобные элементы, можно показать связь элементов с помощью взаимного расположения и ориентации. С помощью продуманной организации контента вы уменьшаете когнитивную нагрузку на пользователя, которому не нужно задумываться о том, как элементы соотносятся между собой, потому что вы уже сделали это за них. Не заставляйте пользователя думать. Вместо этого помогите ему и покажите связи на экране с помощью дизайна.
13. Подсвечивайте, но не указывайте
    Цвет физических предметов изменяется при изменении освещения. В яркий солнечный день мы видим дерево совсем не так, как на закате. Как в физическом мире где цвет относителен, в интерфейсе он так же не должен жёстко определять что-либо. Он может помочь подсветить, использоваться для акцента, но не должен быть единственным отличием элементов. Для длительного чтения используйте светлые или приглушённые цвета, оставляя яркие цвета для акцентирования. Конечно же, можно использовать яркие цвета и для фоновой заливки, только убедитесь, что это подходит вашей аудитории.
14. Прогрессивное раскрытие
    На каждом экране покажите только то, что необходимо. Если людям необходимо сделать выбор, покажите им достаточно информации, чтобы они могли сделать его, затем погрузите их в детали уже на последующем экране. Избегайте тенденции чересчур разъяснить и вывалить всё разом. Когда возможно, отложите принятие решения на нескольких экранах последовательно раскрывая информацию по мере необходимости. Это обеспечит более ясное взаимодействие с интерфейсом.
15. Помогайте людям по ходу
    В идеальном интерфейсе не требуется помощь, потому что интерфейс легок в изучении и удобен в использовании. В реальном же, помощь встроена и контекстна. Доступна только в нужных местах, когда необходима, и скрыта от взора всё остальное время. Предлагая идти в раздел помощи, чтобы найти ответ на вопрос, вы возлагаете ответственность на пользователей знать то, что им нужно искать, и как формулировать запрос. Вместо этого встраивайте помощь там, где она может понадобиться. Просто убедитесь, что она не стоит на пути пользователей, которые уже знают как пользоваться интерфейсом.
16. Решающий момент: нулевое состояние
    Первый опыт использования интерфейса решающий, но при этом дизайнеры часто упускают его из виду. Для того, чтобы образом помочь пользователям освоиться, правильно будет спроектировать нулевое состояние, т. е. состояние, когда ещё ничего не происходило. Это состояние не должно быть пустым экраном. Оно должно обеспечить направление и содержать указание для быстрого начала работы. Большая часть затруднений возникает на самом первом шаге. Но как только люди понимают правила игры, у них повышаются шансы на успех.
17. Текущие проблемы являются наиболее важными
    Люди обычно ищут решение своих актуальных проблем, а не потенциальных, тех, что возникнут в будущем. Таким образом, нужно противостоять созданию интерфейсов для гипотетических проблем. Нужно изучать текущую ситуацию и проектировать решение существующих проблем. Это может быть не так интересно, как витать в облаках и строить воздушные замки, но если люди действительно будут пользоваться вашим интерфейсом, то это принесёт больше пользы.
18. Отличный дизайн незаметен
    Любопытное свойство отличного дизайна заключается в том, что он остаётся незаметным пользователям. Одна из причин этого в том, что если дизайн удачен, то пользователи могут сконцентрироваться на их задачах, а не интерфейсе. Когда они завершают свои задачи, они получают удовлетворение, а не рефлексируют над ситуацией. Для дизайнера это может быть жестоким открытием, т. к. мы в этом случае он получает меньше похвалы, когда дизайн оказывается действительно хорош. Но хорошие дизайнеры довольствуются тем, что их дизайном активно пользуются, и знают, что счастливые пользователи обычно молчат.
19. Развивайте навыки в других дизайнерских дисциплинах
    Визуальный и графический дизайн, типографика, копирайтинг, информационная архитектура и визуализация — все эти дисциплины являются частью дизайна интерфейсов. Они могут быть лишь затронуты вскользь или по ним можно специализироваться. Не участвуйте в дебатах и не смотрите свысока на другие дисциплины: возьмите от всех них те аспекты, что помогут развиваться дальше в вашей работе. Попробуйте взять что-то из, казалось бы, не связанных дисциплин: издательского дела, программирования, переплёта книг, скейтбординга, пожаротушения, каратэ.
20. Интерфейсы существуют, чтобы их использовали
    Как и в других направлениях дизайна, дизайн интерфейсов успешен тогда, когда люди используют результат вашего труда. Как в случае красивого стула, на котором невозможно комфортно сидеть, дизайн интерфейса терпит неудачу, когда люди предпочитают не пользоваться им. Таким образом, дизайн интерфейсов это и создание продукта и среды его использования. Недостаточно когда интерфейс тешит эго дизайнера — им должны пользоваться!