Дизайнер веб интерфейсов. Стратегический дизайн интерфейсов. Обучение на Дизайнера интерфейсов
В этой статье я привожу примеры основных принципов или концепций, которыми руководствуюсь при проектировании десктопных интерфейсов. Не планирую выступать новатором или поучителем, но с радостью поделюсь набором установок, который помогает мне в работе.
Кстати, если вы используете Figma , я рекомендую обратить внимания на наши готовые дизайн-системы . Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken
Акценты и приоритеты
Каждый раз, проектируя интерфейс я задаю себе или клиенту вопрос: “Какая информация сейчас важна для конечного пользователя? Как мы распределим его внимание в конкретном случае?” Для этого в нашем вооружении есть цвет и его оттенки, размер шрифта, его интенсивность. В совокупности, правильно используя эти инструменты, мы “оставляем послание” пользователю, ведём его по нужному нам пути, концентрируя его внимание на самом важном.Хороший пример, когда дизайнер дал пользователю понимание, что важно видеть отправителя, затем тему, а уже потом содержание или его @ник в системе:
Плохой пример, где дизайнер “утверждает”: важнее всего - аватарки, а с остальным как-нибудь разберётесь:
Отступы и их пропорциональность
Современный дизайн лёгок, прост и “насыщен воздухом”. Он наполнен дыханием. И не самую последнюю роль в формировании этих ощущений играют отступы. Значительные отступы помогают упростить подачу материала. Но они должны быть подчинены некоторой закономерности и пропорциональности. Я определяю для себя N пикселей в качестве базисного отступа, когда начинаю новый проект. Затем я использую 2N, 3N и так далее пропорциональность для создания визуального баланса, если где-то требуется бОльший отступ.Хороший пример, когда дизайнер более менее соблюдает пропорциональность отступов:
Плохой пример, когда отступы практически базируются на генераторе случайных чисел:
Текст кнопки всегда первичнее иконки
Не забывайте, что именно текст является определяющим фактором того, какое ожидание или реакция предварительно сформируется у пользователя при виде кнопки. И лишь изображение иконки вторичным образом дополняет смысл. Изображение колокольчика с надписью “notifications” даёт нам некоторое представление о назначении этого функциона до того, как мы сделали клик. Аналогичный колокольчик без подписи в другом приложении приведёт нас к будильнику, хотя мы скорее всего будем ожидать появление экрана с уведомлениями. Я советую всегда наделять надпись бОльшим “весом” нежели иконки. Их я вообще считаю надувательством. Многие современные интерфейсы вполне способны обходиться и без них. Просто это было бы слишком скучно!В целом хорошо:
Но можно сделать лучше:
Тоже выглядит неплохо:
И тут есть, где улучшить:
Не пытайтесь быть слишком понятными
Не все проектируемые интерфейсы обязаны быть интуитивно понятными. Существует множество сложных систем, с которыми мы обучались (!) взаимодействовать какое-то время. Возможно сейчас они кажутся нам простыми, но мы не отдаём отчёт, что были исследователями-первооткрывателями первые минуты, часы или более. И коль мы продолжаем работу внутри некоторой изначально сложной системы, видимо ничего не препятствовало нашему пути первых исследований. Скорее всего, дизайнер сделал свою работу настолько хорошо, что мы без труда освоили новую среду. Яркий пример из жизни: попытайтесь на миг представить, что вы не знаете значение математического знака “равно”. Согласитесь, эти две чёрточки - одна над другой, они совсем не кажутся интуитивно понятными. Просто когда-то в школе учитель математики обучил нас этому. Я призываю не пытаться быть понятнее, чем это требуется на минимально необходимом уровне.В этом примере дизайнер был чрезмерно понятен с кнопкой закрытия:
А в этом примере дизайнер оказался чрезмерно понятен с возможностью добавления:
Перемещение курсора забирает силы
Мы не должны обязывать пользователя тянуться в другую часть экрана, чтобы получить расширенный функционал. Если пользователь работает со списком, то кнопка создания нового элемента должна быть поблизости. Или если мы порождаем новый попап кликом по кнопке слева внизу, то абсурдно заставлять пользователя тянуть курсор по диагонали направо вверх, чтобы окно закрыть.Хороший пример, когда дизайнер предлагает закрыть попап в той же области, которая вызвала его порождение:
Плохой пример, когда дизайнер отдаляет функционал добавления элемента в список от самого списка:
Взаимосвязи расположений или единая плоскость
Это очередной приём балансировки интерфейса. Подобие сетки, если хотите. Например, вы используете трёхколонник. Находятся ли его заголовки в одной плоскости по оси X? Или расположение иконок с кнопками. Можно ли провести мнимую ось Y и обнаружить, что и те и другие аккуратно прилегают к ней? Если ответы утвердительны, дела идут хорошо. Это обусловлено тем, что зрительно человеку легче воспринимать табличный вид из-за структурированности данных. И мы при разработке интерфейса должны располагать элементы с некоторой табличной логикой.Плохой пример с несостыковками:
Хороший пример с гармонией и соответствием:
Цвет имеет смысл
Избитое напоследок. Красное - тревога, зелёный - всё хорошо. Испокон веков для человека самое лучше восприятие текстовой информации, это чёрным по белому. Если вы используете много цветов без аргументации, вы создаёте хаос. Если вы окрашиваете элементы по смыслу, вы создаёте еще больше порядка.Пример хаоса: (172 votes зеленым означает ли позитивное состояние? если, да то 280 visitors оранжевым - означает негативное по логике? отнюдь! дизайнер цветом лишь разделил цифры между собой)
Пример создания порядка и обоснование цвета (я просто добавил графики поверх чужого творчества)
Хороший пример незлоупотребления цветами:
В качестве эпилога....
Выражаю благодарность членам сообщества dribbble, за неформальное согласие предоставить свои работы для данного обзора. Хочу напомнить, что вышеизложенные принципы в дизайне интерфейса являются основными для меня. Я всегда держу их в уме при проектировании интерфейсов. Определитесь на чьей вы стороне… Вы хотите создавать интерфейсы для дизайнеров и работать на лайки (пример - 98% работ с behance) или вы стремитесь решать проблемы пользователя (dribbble)? Кстати, по-моему отличный пример того, как закрытость сообщества позволяет сохранять фокусировку на главном предназначении интерфейсов!Несмотря на обилие учебных материалов, начинающих специалистов год за годом заботит один и тот же вопрос: как сделать первые шаги в дизайне.
Получив множество вопросов от молодых дизайнеров, я решил написать материал, который бы мечтал прочитать на старте своей карьеры. Он основан на личном опыте и уроках, полученных в общении с успешными дизайнерами из больших студий и продуктовых команд.
В первой части, я расскажу о базовых навыках хорошего дизайнера, а во второй, о том, как их использовать для построения карьеры.
Фундамент дизайнера
В любой сфере есть ряд базовых навыков, без которых в профессии делать нечего. Лишь обретя эти навыки можно расчитывать на повышение в должности и доходе.Фокус, цели и задачи
Каждый дизайнер должен знать, для каких целей создается интерфейс и какие задачи он должен решать.Сайт авиакомпании существует для людей, цель которых переместиться из одного города в другой, а его задача - помочь найти рейс, соотвествующий их потребностям.
Цели и задачи - это не одно и тоже. У вас может быть цель хорошо провести вечер, а задача - выбрать между кино, рестораном и футболом.
Дизайнер должен всегда в голове держать цели пользователей, а на практике решать их задачи. Наверняка, вы сейчас работаете или начинаете работать над каким-либо проектом. Подумайте, какие у него цели и какие задачи он должен решать.
Задач у сервиса может быть много и некоторые будут друг с другом конфликтовать, поэтому вам нужно выбрать одну основную и сделать ее выполнение максимально удобным, при этом не пожертвовав остальными.
Как бы это работало, если бы это было просто?
Я регулярно задаю себе этот вопрос, встречая новую задачу. Он помогает мне отвлечься от существующих шаблонов и придумать решение, соответсвующее текущей задаче.На старте карьеры я, как и многие, первым делом бежал на дизайнерские ресурсы в поисках “вдохновения” и пытался найти решение, которое можно применить к моей задаче. Хотя на самом деле, я не искал вдохновение, а лишь пытался поменьше напрягать свой мозг.
Скопировать чужое решение заманчиво, но не нужно забывать, что любой паттерн может хорошо работать в одном случае и абсолютно не работать в другом. Да и кем вы станете, лишь подражая чужим работам? Ведь хорошего дизайнера всегда отличает умение мыслить.
Полезно перенимать чужой опыт, просматривая концепты и работающие сервисы, но при столкновении с новой задачей не нужно забывать включать голову.
Эстетика интерфейса
Я люблю Medium за хорошую типографику и удобство написания статей, хотя на других ресурсах мои статьи порой набирают в два-три раза больше просмотров. Но дело ведь не только в красоте.Хороший визуал облегчает чтение и избавляет от необходимости менять масштаб страницы. Хороший визуал делает акценты на важных элементах, что приятно в социальных сетях и критически важно в сервисах для бизнеса.
Instagram не просто так изменил свой интерфейс с черно-синего на белый. Его целью было сделать акцент на контенте, который генерируют пользователи.
Переодически мы слышим об ошибках, которые совершают люди из-за сложного интерфейса. Конечно, поставить случайно лайк - не проблема, а вот ошибка при управлении самолетом или атомной станцией может привести к трагедии.
Самый простой способ улучшить визуальные навыки - перенимать чужой опыт, копируя интерфейсы и читая толковые материалы. Мне в свое время очень помогли дизайн-гайдлайны Google.
Еще одна очень важная вещь - взгляд со стороны. Я всегда работал в стартапах, где был одним дизайнером, что давало мне большую свободу действий, но лишало обратной связи опытных коллег.
Большинство дизайнеров начинают свою карьеру дома, поэтому единственным способом получить обратную связь для них является завязать отношения с опытным дизайнером и периодически просить у него комментарий по поводу своих работ.
Что ему нужно?
Хороший дизайнер думает сценариями, а не экранами.Сценарий - это последовательность действий, которые нужно совершить пользователю чтобы выполнить определенную задачу. Например, выбрать оптимальный рейс. Сценарий может решаться в рамках одного экрана, а может содержать их сколько угодно. Задача дизайнера - не сократить количество экранов, а сделать выполнение задачи пользователя более удобным, интуитивным.
Иногда задача требует пошаговой логики, где каждый шаг - это отдельная страница, как при сложной регистрации. Некоторые задачи удобнее решать в рамках одного экрана (пример: создание публикации в соцсетях).
Сценарии лежат в основе проектирования любого интерфейса, поэтому любой дизайн должен начинаться с них.
Системность в дизайне
Все компании, которых хоть немного заботит дизайн, приходят к идее, что перерисовывать одни и те же компоненты и расставлять их новым способом - довольно глупая затея. Поэтому все начали создавать единую систему компонентов, а чуть позже и логику их размещения.Спустя еще какое-то время, дизайнеры объединились с разработчиками, связав свои элементы в макетах со сверстанными компонентами на фронте. Благодаря этому, дизайнеру все меньше приходится рисовать и все больше использовать свои два главных инструмента: мозг и фронтенд-разработчика.
Разработчиков нужно уважать и хотя бы логически понимать суть их работы. Без этого сложно будет найти общий язык и создать отличный продукт.
Имея готовый набор необходимых элементов и стилей, вы сможете больше думать о решении проблем пользователей и меньше о рисовании.
Даже хорошую идею легко убить
Помню, как в начале карьеры, презентуя дизайн-решение, меня было легко смутить, задав простой вопрос, например, почему какой-то элемент именно такой. Тогда я пытался аргументированно ответить на вопрос из-за чего возникал бессмысленный диалог, который влиял на восприятие всей работы.Лишь с опытом я понял, что вопросы, не касающиеся основной темы нужно игнорировать. Например, сказав: “Это лишь детали, поэтому давайте обсудим основные вещи, которые влияют на бизнес, а в конце вернемся к вашему вопросу”. Как ни странно, этот ответ избавляет вас от бесполезной беседы и представляет в виде профессионала, который заботится о бизнесе клиента, а не своем эго.
Для того чтобы ваши дизайн-решения принимались, необходимо связывать их с аналитикой, которую вы провели прежде чем придти к этому решению. Показав, что ваше решение стало итогом серьезной аналитической работы, в рамках которой вы изучили конкурентов и протестировали несколько решений, с вами сложно будет не согласиться.
Книги для дизайнеров
Меня периодически спрашивают, какие книги помогли мне стать в дизайне лучше.Никакие.
Лишь регулярная практика и понимание бизнеса помогли мне приносить компании большую пользу и повысить свою ценность на рынке.
Куда устроиться
Есть три популярных варианта: студия, продукт или стартап.Студия хорошо подходит для новичков, так как вокруг тебя полно дизайнеров у которых можно чему-либо научиться. Здесь выше темп, так как есть четкие сроки начала и окончания проекта. Из-за того, что стоимость проекта привязана к человеко-часам, в студиях зарабатывают, в основном, меньше, чем в продукте.
В продукте более спокойный ритм, так как прибыль компании напрямую не зависит от работы дизайнера. Зачастую, дизайн-команда занимается функционалом, который появится в будущем, поэтому для них качество чаще всего важнее скорости. Особенно для проектов, которыми пользуются миллионы.
В стартапах вклад каждого сотрудника чрезвычайно важен, так как команды небольшие и зачастую отдел дизайна состоит лишь из одного человека, поэтому идти туда лучше полностью уверенным в своих силах.
Всю свою карьеру, не считая фриланса, я работал в стартапах, где был единственным дизайнером. Минус этой работы в том, что рядом нет наставника, поэтому я много занимался самообразованием и анализом своей работы. Плюс в том, что ты можешь максимально влиять на итоговый продукт, работая вместе основателями.
Генерация удачи
[очень важная часть]Многие ограничивают свое представление о мире профессиональными навыками, хотя они являются лишь необходимым минимумом. Вы можете быть отличным дизайнером, но какой в этом толк, если о вас никто не знает (ни клиенты, не сообщество)?
Некоторым везет и их карьера выстраивается благоприятным образом, но не потому что они с рождения счастливцы, а лишь потому, что они неосознанно выполняли действия, которые повышают шансы на успех.
Среди этих действий есть активные и пассивные.
Среди пассивных - это наличие резюме, портфолио и аккуратных профилей в соцсетях. Эти вещи повышают вероятность того, что вас могут случайно заметить и предложить интересный проект.
Активные действия - отклики на чужие вакансии, публикации статей и кейсов, общение с профессионалами из разных сфер, прямые письма работодателям и создание своего сообщества. Благодаря этому, вы не ждете пока вас найдут, а своими силами повышаете вероятность перспективного предложения.
Я знаю одного дизайнера из региона, который вел таблицу с ведущими профессионалами из нашей отрасли и по приезду в Москву встречался с ними. Благодаря этому, ему удалось получить хорошее предложение о работе и спустя полтора года сменить одну топовую студию на другую, заняв место партнера.
Популярный ныне вариант - пройти курс от известной компании или поучаствовать в конкурсе.
Павел Шумаков, выиграв Russian Design Cup получил предложение от ВКонтакте, а чуть позже перебрался в лондонский офис Badoo. Некоторые ребята, пройдя курс от Skillbox получили предложение о работе в AIC.
Давно известный вариант - сделать фейковый проект, вложив в него все силы и качественно опубликовать его в портфолио. Самый известный пример - редизайн Google News Георгия Квасникова, который принес ему ряд предложений от крупных компаний.
Ну и последнее.
Важно понимать, что за ширмой любого бренда находятся адекватные люди, которые готовы в любое время рассмотреть амбициозного кандидата. Ваша задача - лишь правильно себя преподнести. Грамотное письмо на общий ящик и аккуратное портфолио - это порой все, что нужно.
Одна из самых главных вещей, которую я понял за свою карьеру - это умение идти вперед, несмотря на неудачи. Ошибок не избежать, поэтому нужно нормально к ним относится.Это элементарная логика:
Успеха добиваются не те, кто не совершает ошибок, а те, кто несмотря на них идет вперед.Мой путь, который я описал в большой истории “Становление дизайнера”, содержал ряд неудач, которые могли стоить мне работы, но даже на старте карьеры интуиция подсказывала, что переживания никому не помогут и единственный способ чего-то добиться - просто идти вперед.
Поэтому не переживайте, столкнувшись с проблемами на новой работе. Все через это проходили, включая Стив Джобса, который за первые 15 лет своей карьеры совершил ряд дорогостоящих ошибок, из-за которых в конце 90-х многие его считали неудачником. И лишь высокомерная уверенность в своем предназначении, позволила ему идти вперед и спустя десятилетие стать иконой отрасли.
Будьте открытыми, налаживайте отношения с коллегами, интересуйтесь опытом других и когда вам выпадает шанс, берите на себя инициативу.
Неизбежный исход
Возможно, начинающим специалистам еще рано читать про исход, но один дизайнер написала мне, что не хочет просто “двигать пиксели”, а стремиться учавствовать в создании продукта. Обычно дизайнеры приходят к этим мыслям спустя несколько лет, устав делать однотипные сервисы для заказчиков.Самым логичным вариантом роста является позиция арт-директора, которая заключается в том, что вы навсегда закрываете графический редактор и выполняете лишь интеллектуальную работу, корректируя направление других дизайнеров.
Другой вариант - перейти в продуктовую компанию, где вместе с коллегами у вас будет возможность работать над улучшением одного продукта.
Неплохой вариант - присоединиться к стартапу и отвечать за дизайн всего проекта. В случае успеха, вы начнете набирать и обучать других дизайнеров, формируя отдел.
Возможно, кто-то из вас захочет перейти на позицию продукт-менеджера и отвечать за коммуникацию между командами и стратегию развития проекта.
Ну и самый амбициозный вариант - основать свой проект. Хороший дизайнер понимает, как работает маркетинг и разработка, что нужно людям и умеет это использовать.
Совершить переход с позиции дизайнера не так сложно. Вместо того, чтобы ждать когда вас повысят, начните брать на себя новые обязанности самостоятельно.
Я применяю этот принцип довольно давно и как показывает опыт, при наличии адекватных коллег ваша инициатива будет отмечена.
Ключ ко всему
Молодой дизайнер задал мне вопрос:Лучше продолжить самообразование или поскорее устроиться на работу?
Всегда и во всем, практика – лучший способ изучить какую-либо дисциплину, а если она совмещается с адекватной обратной связью, то ничего лучше вы найти не сможете.Поэтому, если вы хотите чего-то добиться в дизайне, то как можно раньше приступайте к работе и очень хорошо, если рядом с вами будет опытные коллеги. Если таковых нет, то делайте проекты самостоятельно и ищите обратную связь среди дизайнеров в социальных сетях.
На старте карьеры делайте фокус на качество, а не количество проектов. Не нужно искать новую работу в поисках лучшей жизни. Сначала научитесь делать ее хорошо.
И не забывайте, что дизайн-навыки – лишь половина успеха. Помимо них, вам нужно уметь общаться с людьми, понимать принципы работы бизнеса и проявлять активность в поиске интересных предложений.
Работайте упорно каждый день и не забывайте, что любой успех требует времени.
Терпение и упорство – ключ ко всему.
Сделайте эту неделю прорывной.
Об освоении рынка дизайна интерфейсов написаны километры однообразных и скучных советов, которые легко нагуглить, поэтому тут я постараюсь несколько иначе подойти к теме. Специально для Цифрового Брокколи.
Интерфейсы - крайне конкурентный рынок для дизайнеров, что хорошо, потому что в ваш парус всегда будет дуть ветер: работы всё больше и больше, и даже эволюция шаблонов и конструкторов ни капли не поколебала спрос на проектировку и дизайн интерфейсов всех мастей, от мобильных приложений до сложных десктопных систем.
На сайте hh более полутора тысяч вакансий для UI/UX-дизайнеров, из них 100 удаленных
Среди других высококонкурентных разновидностей дизайна вроде полиграфии и айдентики – интерфейсы еще и самые прибыльные, поэтому однозначно имеет смысл попробовать себя на этом поприще. Минимальная зарплата - 65 000 рублей против 30 000 у дизайнеров полиграфии (данные ).
Вкратце о работе дизайнером интерфейсов. Самое важное
В работе постоянно действует принцип easy to play, hard to master. Обучение не является подготовительным этапом, потому что это тупо часть работы – вообще всё время. Именно поэтому можно пропустить получение образования и выслушивание нудных курсов и сразу приступить к практике.
Да-да, предварительное образование некритично – это всё-таки не хирургия и не ракетная физика. Скажу больше – образование вредит дизайнеру в 90% случаев. Потому что в новичка впихиваются чужие идеи и мнения, выталкивая главное преимущество дизайнера – новые идеи. Новый взгляд на вещи. Другой взгляд на вещи. Способность думать вне рамок и под другим углом. Этой способности вас никто никогда и нигде не обучит, а вот отнять её очень легко.
Хотя одну книжку я посоветую. Она отнимет не больше часа времени в худшем случае (за что и любим) – Дизайн пользовательского интерфейса. Искусство мыть слона .
Сейчас может сложиться впечатление, что всё просто и легко. Нет, всё очень тяжело и сложно. И хороших интерфейсов – единицы, их не умеют делать опытные дизайнеры и даже IT-гиганты. Поэтому к любым гайдам, курсам и книгам нужно относится крайне скептически. Интерфейсы сейчас – Дикий Запад (в отличие от полиграфии, например), в котором царит беззаконие и хаос. И это играет на руку новичкам – индустрия до сих пор остро нуждается в свежей крови и мозгах, потому что старожилы плохо справляются с улучшением интерфейсов.
Немного подытожу.
- Предварительно учиться – необязательно и даже вредно, но вообще учиться всяким вещам придётся постоянно – без этого ничего не выйдет 100%.
- Новые идеи – на вес золота, и способность их генерировать нужно тщательно оберегать, потому что вашу самооценку будут постоянно сбивать.
- В интерфейсах на данный момент царит бардак, поэтому ко всем полученным знаниям и услышанным мнениям нужно относится скептически.
Начинаем прямо сейчас. Серьёзно
Получается, чтобы реально начать – нужно просто соответствовать неким требованиям к характеру, и всё? Да, если вы любознательны, реально способны постоянно всасывать новую информацию, трудолюбивы и обладаете неординарным мышлением (в любой трактовке, даже собственной) – можно начать сразу после прочтения этой статьи. Или если вам тупо нужна была мотивация – прямо сейчас закрывайте эту статью и вперёд.
Я – за практику. Я залез в дизайн с нулём вместо знаний. Я просто врал, что всё знаю и умею, чтобы получить работу. А потом сутками мучал гугл своими запросами, чтобы освоить всё, что нужно для выполнения задачи. Кому-то такой подход может показаться бессистемным – в том плане, что не проще ли было сначала научиться, а потом лезть? Нет, не проще, потому что знания в айти устаревают каждые 3 месяца. Ну и помним про бесценную способность иметь собственный взгляд на вещи.
Ну так вот, самое простое, что можно сделать прямо сейчас – это тупо перерисовать что-либо. Например, Телеграм. Делаете скриншот и старательно, точь-в-точь до последнего пикселя перерисовываете.
Небольшое, но очень важное отступление. Я рекомендую Фигму – по счастливому стечению обстоятельств эта программа бесплатна и одновременно является лучшим выбором для проектировки и дизайна интерфейсов. Не верите мне – спросите интернет.
Ну так вот, перерисовываете всё, что угодно. Копирование и плагиат – чуть ли не самая быстрая и эффективная школа для освоения технической части дизайна, то есть вы научитесь работать в программах. Предыдущее слово во множественном числе не просто так: фигмой вы не обойдётесь, и скоро выясните это сами – помним про постоянное обучение.
Также вы научитесь формулировать свои мысли и вопросы, а потом научитесь гуглить – это, без шуток, невероятно нужный навык, который не так прост в получении, как кажется. Ну и если лень – есть Тостер.ру , на котором я, кстати, часто тусуюсь и помогаю новичкам. Если что – зовите меня в свой вопрос.
Где учиться дизайну интерфейсов и получать за это деньги
Что дальше? Дальше еще проще. Теперь нужно переделать что-нибудь. Вспомните сайт, программу, сервис, которые вы используете и что-то в них вас при этом раздражает. Далеко ходить не нужно, можно опять взять тот же Телеграм. Лично меня до белого каления бесит ужасная свалка из людей, ботов и каналов в одном списке без какой-либо рубрикации. Я не хочу пользоваться альтернативными клиентами – я хочу, чтобы в официальном приложении появились отдельные вкладки для разных сущностей, а в идеале – возможность группировать чаты как душе угодно.
Всё гениальное просто. Перерисуйте одно, переделайте другое – и вы войдете во вкус, проверите свои силы, получите вдохновение. Звучит просто, на деле – намучаетесь. Но это интересно и весело.
Разумеется, выполнять нелёгкую работу за просто так – значит быстро сжигать мотивацию. А мотивацию, как уже доказано наукой, лучше всего повышают деньги. И азарт. Нехилый буст можно получить в дизайн-конкурсах, которые особенно актуальны для новичков – не страшно ошибаться, а шанс получить деньги очень даже реальный. Это чуть ли не самый лучший способ получить море разнообразной практики, да еще и возможно оплачиваемой. Лично мне нравится 99designs – сотни и тысячи заданий ежедневно, в том числе на веб-дизайн, который - ожидаемо - там самый дорогой (одна-две тысячи долларов не редкость). Выбираешь, что по душе, и с удовольствием дизайнишь – чистый кайф.
Как я уже говорил, я пролез в индустрию исключительно на лжи. Конкурсами я баловался сильно позже, когда просто устал от работы: конкурсы – это отдых и разрядка. Я к тому, что если среди ваших черт характера присутствует еще храбрость или наглость, можно сразу лезть на и брать заказы.
Да, сразу к реальным заказам. Без опыта в реальных проектах. Без опыта. Без всего. Так – тоже можно. Главное – готовность рвать пятую точку. Если нужен мотивационный пинок под зад и открытие глаз – у меня целая заметка есть .
От себя я порекомендую Фрилансим - много заказов, хорошая аудитория, бесплатные заявки. С этой биржи я всегда уходил надолго с долгосрочными заказами и клиентами. Ну и пять халявных откликов в день – очень удобно.
TL;DR и почему всё это было вообще написано
Снова подытожу.
- Чтобы войти в интерфейсы – необязательно учиться заранее, но обязательно потом, и вообще – постоянно; нужно иметь неординарное мышление и уметь его защищать; а также следует скептически относиться к чужим знаниям и советам.
- Оптимальный инструмент – Фигма: она бесплатна и вообще оптимальна на данный момент, однако придётся осваивать и другие программы; какие и как – поможет крайне необходимый навык гугления.
- Практика – лучшая школа: сначала копируем-перерисовываем что-либо, а потом переделываем то, что не нравится; а еще можно получать деньги за практику, если участвовать в дизайн-конкурсах или – если хватает наглости – в реальных проектах, которые можно получить на фриланс-биржах.
Если вы дочитали аж досюда, а это – на минутку – уже четвёртая страница в ворде, то, наверное, заметили, что бо́льшая часть текста посвящена каким-то наставлениям и нравоучениям. На то есть хорошая причина – в дизайне в первую очередь требуется правильная конфигурация мозга, а не что либо еще. А также яйца. Последние отрастить тяжеловато, но всё равно придётся, если вы хотите задержаться в любимой профессии. За мотивацией милости прошу в мой канал , и не стесняйтесь писать в личку с любой чушью.
Подписывайтесь на канал о фрилансе и удаленной работе Remote&Freelance и узнайте, как монетизировать любимое дело, работать удаленно и путешествовать.
В этой статье рассказывается, какую роль дизайн интерфейсов играет в условиях современного рынка. А также, что отличает хороший интерфейс от плохого (UI = user interface, то есть, интерфейс пользователя ). Также мы взглянем на парочку новых моделей UI дизайна, включая Google Fuchsia и Fluent Design от Microsoft .
Роль UI дизайна сегодня?
Современные дизайнеры разрабатывают пользовательские интерфейсы для приложений, работающих в определенной операционной системе. Поэтому многие параметры интерфейса неподконтрольны разработчикам. Например, если дизайнер разрабатывает интерфейс для Android-приложения , он не знает о размере и разрешении экрана пользовательского устройства. А также о том, как пользователь настроил уведомления для этого приложения, установлены ли другие программы, влияющие на цветовой профиль экрана.
Творчество разработчиков пользовательских интерфейсов ограничено определенным устройством и операционной системой. Их работа часто должна соответствовать рекомендациям производителя операционной системы (Google для Android, Apple для iOS ). Apple публикует, что можно, а чего нельзя для пользовательского интерфейса, а также подробный список рекомендаций для UI . У Google также есть собственные стандарты материального дизайна .
Из-за этих ограничений внимание современных дизайнеров пользовательского интерфейса сосредоточено на мелких деталях. Например, на том, как расположены окна, удобна ли для пользователя навигация по приложению или сайту. Из-за нехватки времени пользователю некогда разбираться со сложным, громоздким и медленным интерфейсом.
Вот некоторые особенности пользовательских интерфейсов нашего времени
Многие элементы пользовательского интерфейса мы воспринимаем как приглашения к взаимодействию с приложением или устройством:
Поле для ввода текста и курсор предлагают пользователю ввести текст, а кнопка «Подтвердить » - кликнуть или коснуться ее, чтобы продолжить:
Переключатель, представленный здесь в виде ползунка, приглашает пользователя включить или отключить опцию:
Иконка приглашает пользователя кликнуть по ней, чтобы запустить приложение или функцию:
При нажатии по кнопке-гамбургеру…
…появляется меню, которое приглашает пользователя выбрать дополнительные варианты:
Ползунок приглашает пользователя коснуться/кликнуть и перетащить его, чтобы изменить настройки, например, яркость экрана:
Выпадающее меню предлагает пользователю выбрать нужный вариант из списка.
Это лишь некоторые примеры элементов дизайна интерфейсов приложений . Но все они объединены идеей повысить эффективность взаимодействия с пользователем.
Интерфейс: хороший, плохой и ужасный
Хороший дизайн пользовательского интерфейса не заключается лишь в том, чтобы прелестно выглядеть. Дизайн UI может иметь успех, и не будучи очень красивым.
Давайте взглянем на некоторые образцы хорошего и плохого дизайна пользовательского интерфейса. Затем посмотрим на ужасный, что тоже важно.
Хороший пользовательский интерфейс
Разработан с учетом глубокого понимания пользователя, его потребностей и того, как он будет перемещаться по приложению или сайту. Поэтому мы и говорим, что дизайн UI является одним из аспектов UX-дизайна (UX = User eXperience , опыт взаимодействия ).
Хороший интерфейс - максимально простой, и в то же время такой, что у пользователя под рукой есть все необходимое. Навигация недолгая и неглубокая (без под-под-под-разделов и меню ), требует минимального количества шагов для выполнения задачи, а опции, доступные для выбора в каждом окне, понятны:
В этом приложении интерфейс предлагает пользователю три варианта: поиск закусочных, использующий текущее местоположение, поиск «вручную» по почтовому индексу и кнопку-гамбургер для просмотра дополнительных вариантов.
Плохой интерфейс
У такого дизайна интерфейса сайта на первом месте не потребности пользователя, а значимость приложения или разработчика. Признаки плохого UI включают в себя значки, слишком маленькие для того, чтобы попасть в них при нажатии пальцем.
В таком интерфейсе очень много мелкого текста, который трудно читать. Кроме этого, плохому интерфейсу присуще использование жаргона (в том числе профессионального ) вместо понятного языка. Например, написано: «Плохие данные ». А нужно - «Неверные логин и пароль ». К плохому интерфейсу также можно отнести применение назойливых диалоговых окон вместо панели уведомлений:
В приведенном выше примере видно, что диалоговое окно фонового приложения прерывает работу активного приложения и настоятельно требует ответа, не давая пользователю продолжать. Если человек в это время набирает текст и не смотрит на экран, то запросто может потерять несохраненные данные. Видно, что кнопки маленькие, и в них трудно попасть пальцем. А сообщение «Неизвестная ошибка » вообще не имеет смысла, так как не дает пользователю возможность изучить или устранить причину ее возникновения.
Ужасный интерфейс
Некоторые успешные проекты и дизайны интерфейсов , на первый взгляд, разрушают представления дизайнеров о том, что простота должна быть на первом месте. Рассмотрим в качестве примера сайт Amazon , имеющий, слегка напряженный вид:
Но успех компании Amazon , наоборот, доказывает эффективность их UI . Почему? Один из секретов кроется в том, что внешний вид страницы улучшался постепенно, и поэтому не заставлял пользователей приспосабливаться к резким изменениям интерфейса. Посетителям сайта это удобно.
Я, как давний пользователь Amazon , особо и не замечал изменений во внешнем виде или способе взаимодействия. Но вот как выглядел Amazon 10 лет назад:
Что ожидает дизайн пользовательского интерфейса в будущем?
Скорее всего, наиболее кардинальные изменения, будут связаны с разработкой голосовых интерфейсов. Эта функция уже есть во всех основных операционных системах, но пока еще нельзя сказать, что люди регулярно пользуется ей на своих телефонах и компьютерах.
Появляются новые подходы к дизайну интерфейсов , но, похоже, что визуальный интерфейс все же будет основным способом взаимодействия пользователя с устройствами. Но есть большой простор для инноваций, а также оптимизации старых интерфейсов. Неудивительно, что такие крупные игроки как Microsoft и Google инвестируют значительные ресурсы в эксперименты с новой эстетикой пользовательского интерфейса и моделями взаимодействия.
В последние месяцы все чаще слышно о «Fluent Design» от Microsoft . Говорят, он нацелен на интеграцию большей визуальной глубины и движения. То же самое касается экспериментальной операционной системы от Google с кодовым названием «Fuchsia» , в которой разработчики пытаются обойтись без рабочих столов и иконок.