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


7 практических советов по дизайну интерфейсов

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

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

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

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

1. Используйте для создания иерархии цвет и вес шрифта вместо размера

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

«Этот текст важен? Давайте сделаем его больше».

«Этот текст вторичен? Давайте сделаем его меньше».

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

«Этот текст важен? Давайте сделаем его полужирным».

«Этот текст вторичен? Давайте используем более светлый цвет».

Попробуйте придерживаться двух или трех цветов:

  • Темный (но не черный) цвет для основного содержимого (например, заголовок статьи)
  • Серый для вторичного контента (например, дата публикации статьи)
  • Более светлый серый для вспомогательного контента (возможно, уведомление об авторских правах в нижнем колонтитуле)

Аналогично, обычно для интерфейса достаточно два веса шрифтов:

  • Обычный шрифт (400 или 500 в зависимости от шрифта) для основного массива текста
  • Более тяжелый шрифт (600 или 700) для текста, который вы хотите выделить

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

2. Не используйте серый текст на цветном фоне

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

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

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

Есть два способа уменьшить контрастность при работе с яркими фонами:

Уменьшите непрозрачность белого текст

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

Выберете цвет текста, на основании цвета фона

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

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

3. Смещение теней

Вместо того, чтобы использовать большие значения размытия и растягивания, чтобы сделать тени блока (box shadows) более заметными, добавьте вертикальное смещение.

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

Это относится к внутренним теням, которые вы можете использовать, например, для форм ввода:

Если вам интересно узнать больше о дизайне теней, то руководство Material Design — это фантастический учебник.

4. Используйте меньше границ

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

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

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

Используйте тень для блока

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

Используйте два разных цвета фона

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

Добавьте дополнительный отступ

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

5. Не растягивайте иконки

Если вы разрабатываете что-то, что может использовать большие иконки (например, раздел «функции» лендинга), вы можете использовать бесплатный набор иконок, таких как Font Awesome или Zondicons, и увеличивать их размер до тех пор, пока они не будут соответствовать вашим потребностям.

В конце концов, это же векторные изображения, поэтому при увеличении размера качество не пострадает, ведь так?

Хотя верно, что качество векторных изображений не ухудшается, когда вы увеличиваете их размер, иконки, которые были нарисованы в размере 16−24px, никогда не будут выглядеть профессиональными, если вы растяните их в 3−4 раза от их предполагаемого размера. Им не хватает детализации, и они всегда воспринимаются непропорционально «массивными».

Если у вас есть маленькие иконки, попробуйте поместить их в другую фигуру и придайте фигуре цвет фона:

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

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

6. Используйте акцентные границы, чтобы разнообразить дизайн

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

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

Например, рядом с предупреждающим сообщением:

…или выделить активные элементы навигации:

…или даже в верхней части всего вашего макета:

Для добавления цветного прямоугольника в пользовательский интерфейс не требуется талант графического дизайнера, и он может помочь сделать ваш сайт более «дизайнерским».

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

7. Не всякой кнопке нужен цвет фона

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

Фреймворки, подобные Bootstrap, поощряют это, предоставляя вам меню семантических стилей для выбора, когда вы добавляете новую кнопку:

«Это позитивное действие? Сделайте кнопку зеленой».

«Это действие удалит данные? Сделайте кнопку красной».

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

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

При разработке этих действий важно сообщить их место в иерархии.

  • Первичные действия должны быть очевидными. Однотонные, высококонтрастные цвета фона прекрасно подойдут.
  • Вторичные действия должны быть ясными, но не выделяющимися. Стили контура или более низкие контрастные цвета фона — отличные варианты.
  • Третичные действия должны быть легко обнаруживаемыми, но ненавязчивыми. Придайте этим действиям вид ссылки. Как правило — это лучший подход.

«А как насчет деструктивных действий, разве они не всегда будут красными?»

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

Используйте красный и смелый стиль, когда это негативное действие действительно является основным действием в интерфейсе, например, подтверждение в диалоговом окне:

Если вам понравилась эта статья, посетите RefactoringUI.com и подпишитесь, чтобы получать уведомления о публикации новых статей.

ux.pub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На русском языке можете прочитать емкий материал студии Олега Чулакова: design.chulakov.ru. Уверен, что на старте карьеры он бы мне очень помог.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Никакие.

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

Идем дальше.

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

Есть три популярных варианта: студия, продукт или стартап.

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

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

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

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

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

[очень важная часть]

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

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

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

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

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

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

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

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

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

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

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

Как зарекомендовать себя на новом месте

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

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

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

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

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

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

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

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

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

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

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

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

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

Ключ ко всему

Молодой дизайнер задал мне вопрос:

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

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

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

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

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

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

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

habr.com

кто именно нужен компаниям / Хабрахабр

В последние несколько лет проектирование интерфейсов начало приобретать немалую популярность. Отечественные компании, чей бизнес так или иначе связан с компьютерами и интернетом стали понимать, что просто «дизайна» в том понимании, в каком он употребляется у нас уже недостаточно, нужно не только красиво, но и удобно. В результате мы видим немалое количество вакансий с такими словами в описании, как UX, UI, UCD, usability и всё в таком духе.

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

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

Цель исследования
В ходе анализа я хотел понять:
  • востребованность проектировщиков интерфейсов на рынке труда;
  • какой уровень зарплаты на данный момент актуален;
  • компании какого типа больше всего нуждаются в проектировщиках;
  • какие обязанности обычно входят в должность;
  • какой опыт и какие знания необходимы специалисту;
  • какие условия труда предлагают кандидатам и какими плюшками их заманивают.
Источники данных
Для анализа были взяты вакансии с сайта hh.ru, т.к. именно его я чаще всего просматривал. Сначала я собирался проанализировать 100 резюме, но просмотрев 30, понял, что данные уже часто повторяются и решил остановиться на 40. Подобное исследование я делаю впервые и совсем не претендую на объективность и полноту, но надеюсь, что общее положение дел мне всё-таки удалось показать.
Вакансии для исследования
Я обращал внимание на такие заголовки:
  • ux/ui-designer;
  • проектировщик интерфейсов;
  • юзабилити-специалист ;
  • дизайнер-проектировщик;
а так же производные от перечисленных названий и различные их сочетания. В рамках этой статьи всех специалистов для простоты я буду называть проектировщики. Так же стоит отметить, что вся статистика сформирована исключительно на основе описаний вакансий, многие вещи работодатели подразумевают, но явно не указывают, поэтому значение каких-то составляющих может быть занижено.
Востребованность профессии
Поиск по словосочетанию «проектировщик интерфейсов» выдал мне 120 вакансий в России, из них я и выбрал первые 40. Среди них было много повторяющихся в разных городах, поэтому реальная цифра будет меньше. Для сравнения, поиск по запросу «web-дизайнер» выдал мне 1027 результатов.

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

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

Уровень зарплаты
Зарплата у проектировщиков интерфейсов и ux-дизайнеров сравнима с другими специалистами it-отрасли, например програмистами, и конечно эти цифры больше отражают состояние зарплат в столице. Поэтому настоящий специалист в этой сфере уж точно не пропадет, по крайней мере если будет жить и работать в Москве.Уровень зарплаты проектировщика интерфейсов
Сферы деятельности
Я попытался понять, в каких сферах деятельности больше всего востребованы проектировщики. Продуктовые компании — это компании, чей основной бизнес и есть интернет-проект (продукт). Я не стал делить их на подкатегории, т.к. уж очень разнообразные сферы встречались. Исключение составили игры, поскольку это отдельная своеобразная индустрия, а так же медицина, где попадались как интернет-проекты медицинской тематики, так и программное обеспечение для медицинских приборов. Приятно в ряду компаний видеть банки, работающие над улучшением сайтов, интернет-банкинга и мобильных приложений. Так же видно, что интернет-магазины всё больше начинают заботиться о состоянии интерфейсов своих сайтов.Распределение вакансий по сферам деятельности
Типы платформ
В целом, эта статистика отражает общее состояние и тренды в развитии различных платформ и типов устройств. Лидируют, как и ожидалось, сайты и веб-приложения. На пятки вебу наступают мобильные приложения и возможно начинающим проектировщикам уже сейчас стоит уделять больше внимания мобильным приложениям, а старичкам начинать посматривать в эту сторону, чтобы в будущем не остаться без куска хлеба. Так же стоит отметить потребность в проектировщиках под специфические типы интерфейсов, такие как терминалы, автомобильные навигационные системы, интерактивное телевидение. Вот интересно, сколько в России людей с адекватным опытом в подобных проектах?Распределение вакансий по типам платформ
Требования к кандидатам
Я не стал помещать сюда требования по опыту, поскольку оно присутствует почти в 100% вакансий. В большинстве случаев работодатель ориентируется на опыт работы в 2-3 года по профилю деятельности. Работников с небольшим или отсутствующим опытом приглашали всего на две вакансии. Наличие портфолио так же интересует большинство работодателей. В отклике на вакансию просят предоставить от 3 до 10 примеров лучших работ. Многие работодатели говорят о необходимости выполнить тестовое задание, а в паре вакансий оно даже было описано.

Итак, из сорока вакансий большинство содержало следующие требования:Требования к проектировщикам, описанные в большинстве вакансий

Как мы видим, фотошоп продолжает оставаться программой №1 для всего, что имеет отношение к визуализации. Из программ прототипирования чаще всего упоминают Axure, но в большинстве случаев это не жесткое требование и у вас есть право предложить замену. Я например, использую Fireworks, который у меня работает за обе вышеупомянутые программы. Среди популярных требований находятся и те, которые сопутствуют основной работе проектировщика: знание методологий проектирования, умение общаться с людьми и “понимание юзабилити”. Нередко встречается необходимость знать английский. В основном, это требование представительств международных компаний, либо работающих с иностранными заказчиками. А вообще, специфика нашей работы такова, что английский хотя бы на уровне чтения спец. литературы знать нужно. Интересно также, что художественное образование оказалось предпочтительнее технического. По крайней мере, среди тех, кто это явно указал.

Обязанности
Теперь посмотрим, чем же предстоит заниматься проектировщику интерфейсов. Понятное дело, проектированием интерфейсов, об этом прямо заявило большинство работодателей. Я не хочу тут поднимать рассуждение должен ли проектировщик уметь рисовать финальный дизайн, но вторая строчка диаграммы даёт нам ответ на этот вопрос. 27 работодателей из 40 хотят, чтобы проектировщик делал не только прототипы, wirefrmes, sketches и т.п., но и прорисовывал их окончательный вид. Причем, помимо дизайна интерфейсов и продумывания UX, проектировщик иногда должен уметь рисовать промо-страницы, баннеры, листовки, иконки и даже иллюстрации. Тем не менее, во многих компаниях проектировщик работает в паре с графическим дизайнером. Основные обязанности проектировщика интерфейсов
Дополнительные требования
Несмотря на то, что не всегда проектировщик интерфейсов должен заниматься графическим дизайном, мы видим, что иметь художественный вкус ему очень не помешает. Я например, не раз встречал практику, когда в штате есть только проектировщик, а графического дизайнера нанимают временно на проект, чтобы он отрисовал основные страницы и элементы, а проектировщик на их основе уже делал финальные макеты остальных страниц. Тут как раз и пригождается художественный вкус и знание фотошопа. Так же немалым плюсом будет опыт верстки или хотя бы понимание, как устроены веб-страницы, какие у них есть возможности и ограничения. Два последних требования тоже касаются технологий и оба относятся к вакансиям игровой индустрии.Дополнительные требования к проектировщику
Условия работы и разные заманухи
Уж не знаю, насколько определяющими в принятии предложения о работе являются теннисные столы, чаи, плюшки и молодой, сплоченный коллектив, но обо всём этом в it традиционно говорят очень многие. Отрадно, что часто пишут про “белое” трудоустройство и хорошую мед. страховку. Интересно, как дело обстоит на практике? Зная нелюбовь it-шников рано просыпаться, многие готовы сдвигать рабочий день на час-три вперед. Кто-то готов возить сотрудников на профильные конференции и раздавать книги, кто-то оплачивать спорт зал и обучать английскому, некоторые заманивают сотрудников макбуками, офисом класса «А» и бесплатным питанием.Условия труда для проектировщика
Выводы
Проанализировав 40 вакансий, я заметил некоторую закономерность, разграничивающую вакансии по должностным обязаностям, требованиям и опыту. Рынку нужно два типа людей:1. Проектировщик с навыками графического дизайна Он знает наизусть Купера, Раскина и Нильсена, умеет вытягивать из людей информацию и превращает её в продукт, которым удобно пользоваться, что сможет подтвердить, проведя юзабилити-тестирование. Виртуозно владеет Axure и ему подобными, но и готов в фотошопе нарисовать макет на основе гайдов и готовых элементов.

2. Графический дизайнер с навыками проектирования Для него каждый пиксель имеет значение. Он знает наизусть Ководство и советы Горбунова, тусует на Dribbble и Behance. Он рисует отличные кнопки и формочки, знает как сделать легкий и информационный дизайн, но в то же время понимает что значит удобно, а что нет и может предложить элегантное решение для интерфейсной проблемы.

А вообще, на мой взгляд, проектировщика или UX/UI дизайнера хорошо описывает фраза, найденная в одной из просмотренных мной вакансий: «разыскиваем крутого логика с художественным вкусом».

А чем у вас занимается проектировщик интерфейсов и кого вы ищете на эту должность?

habr.com

Дизайн интерфейсов UX-дизайн - подробное руководство

Интернет-маркетинг, Контент, Советы, Статьи о продвижении

Перевод статьи: https://blog.hubspot.com/marketing/ux-user-experience

Содержание статьи:

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

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

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

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

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

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

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

Что такое UX-дизайн?

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

1. Интерактивный дизайн

Интерактивный дизайн, или IxD — подраздел UX-дизайна, определяющий взаимодействие между пользователем и продуктом; цель этих взаимодействий – хороший пользовательский опыт.

2. Визуальный дизайн

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

3. Пользовательское исследование

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

4. Информационная архитектура

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

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

Источник: NYC Subway Guide

Составные процессы UX-дизайна

Выделяют три этапа UX-дизайна:

1. поиск целевой аудитории2. понимание целей компании – как такие цели влияют на пользователя3. нешаблонное мышление

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

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

Принципы UX-дизайна

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

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

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

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

Доступность: Никто не хочет понапрасну тратить свое время. Успешный UX-дизайн улучшает навигацию.

Легкость: Последовательность и незамысловатость дизайна – это всегда хорошо. Вы строите отношения с пользователями за счет удобного UX.

Простота: Никаких просчетов или лишних описаний. Сразу переходите к главному.

Результат UX

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

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

1. Пользовательское исследование

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

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

С помощью пользовательских исследований дизайнеры находят и определяют своего пользователя.

2. Оценка конкурентов

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

3. Интерактивный дизайн

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

4. Информационная архитектура

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

Источник: Adobe Blog

Что такое дизайн пользовательского интерфейса?

Когда Apple представила навигационный компонент Click Wheel для iPod, эта штука была интуитивно понятной и высокофункциональной – не говоря уже о визуальной составляющей. Это хороший пример успешного пользовательского интерфейса, или UI. UI – это способ взаимодействия с компьютерами, машинами, сайтами, приложениями, носимыми устройствами и пр. UI-дизайн – это то, что делает все эти вещи максимально упрощенными и эффективными.

UI vs. UX

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

Общие UI-элементы

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

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

Навигация «хлебные крошки»

Это дизайнерский инструмент, который визуально улучшает юзабилити сайта.

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

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

Источник: UX Planet

Исследование опыта взаимодействия

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

Юзабилити-тестирование

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

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

Удаленное юзабилити-тестирование позволяет компаниям провести исследование в условиях, когда пользователи находятся в своей естественной среде (например, у себя дома или в офисе).

Инструменты юзабилити-тестирования

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

Crazy Egg: Этот инструмент показывает, что нажимают пользователи на сайте. Crazy Egg также фиксирует, откуда приходит трафик – из другого географического региона, или сайта.

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

Как расширить опыт взаимодействия

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

Закон Фиттса

Это предиктивная модель, которая определяет, объем времени, необходимого определенному пользователю, чтобы переместить курсор в определенный раздел веб-сайта. Существуют вариации этого закона, но в основе всех их общая идея того, что «время, необходимое, чтобы перейти к цели (CTA-кнопке), зависит от расстояния до нее и обратно пропорционально ее размеру».

Закон Фиттса широко применяется в UX-дизайне, чтобы улучшить эргономику и юзабилити. Многие пользователи знакомы с тачбаром на MacBook Pro, эта сенсорная панель на клавиатуре, которая ускоряет опыт взаимодействия, когда пользователь что-то гуглит, делает заметки, меняет яркость экрана, громкость и др. Опции тачбара меняются в зависимости от того, что открыто на рабочем столе, – будь то приложение, сайт или раздел настроек в лэптопе.

Тачбар упрощает UX: все часто используемые настройки в одном месте. Согласно Закону Фиттса, чем дальше и меньше кнопка от пользователя, тем сложнее до нее добраться. Именно поэтому тачбар в MacBook – хороший пример реализации этого закона в том, что касается опыта взаимодействия.

Инструменты в UX-дизайне

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

1. Adobe Fireworks

Adobe Fireworks СS6 позволяет веб-дизайнерам создавать графику для веб-страниц без необходимости вникать в тонкости программного кода или дизайна. У Adobe Fireworks есть ряд преимуществ. У этого инструмента впечатляющая точность пикселя, есть опции сжатия изображений (JPEG, GIF и т.д.), что позволяет пользователям создавать функциональные сайты и строить векторы.

2. Adobe XD

С помощью Adobe XD можно создавать дизайн сайтов и мобильных приложений, а также прототипы, каркасное моделирование и векторную графику. Можно делиться интерактивными прототипами на нескольких платформах, включая Windows, Mac, iOS и Android – инструмент идеально подходит для командной работы.

3. Axure

Axure RP Pro – еще один хороший инструмент для UX-дизайна и, к тому же, бесплатный. В Axure реализованы несколько опций, в т.ч. прототипирование и документирование. Можно даже создавать схему перемещения пользователя и карты сайтов. Axure идеально подходит для создания веб- и десктопных приложений, пользователям предоставляется возможность быстрого экспорта в PDF или HTML.

4. Adobe Illustrator и бесплатная альтернатива

Если вы подыскиваете доступную альтернативу инструментам Adobe, таким как Adobe Illustrator (преимущественно используется в векторной графике), воспользуйтесьInkscape. Эта разработка совмещает в себе все базовые функции Illustrator, но она бесплатная. Это софт с открытым исходным кодом, его можно использовать для создании впечатляющей векторной графики. Единственная проблема – Inkscape медленный, как пишут некоторые его пользователи.

5. Sketch

Это комплексный софт со множеством специфических функций, в т.ч. недиструктивное редактирование (под этим подразумевается то, что Sketch не будет менять плотность пикселей изображения, с которым вы работаете). Экспорт кода, пиксельная точность, прототипирование, векторное редактирование – вот основные преимущества Sketch.

6. Софт для сторибординга

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

Storyboarder – бесплатная разработка с базовым функционалом, которая подойдет для всех дизайнеров, независимо от уровня их мастерства. Это ПО быстро создает наброски или фигурки, чтобы описать план или идею. Еще один инструмент – Toon Boom Storyboard Pro. Он совмещает в себе функцию рисования, анимации, контроля камеры и другие многочисленные опции – за ежегодную или ежемесячную плату. Широкий функционал, для усложненного сторителлинга и детальной подготовительной работы. Все это подойдет для дизайнеров, которые ищут возможность, чтобы визуально рассказать свою историю с помощью интерфейса.

Как стать UX-дизайнером?

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

Есть несколько важных шагов на пути к карьере UX-дизайнера. Многие университеты мира предлагают свои курсы, но чтобы на них записаться, 4 года образования в сфере дизайна – это, как правило, обязательное условие. Есть более гибкие программы, такие как Quinnipiac University Graduate Program in User Experience Design. Существуют и программы сертификации профессионалов. Многое зависит от продолжительности обучения и уровня подготовки.

Если вы готовы воплотить свою мечту и стать UX-дизайнером, понадобится резюме и яркое портфолио. Пригодятся такие ресурсы, как Dribbble или Behance. Свои работы можно продемонстрировать на собственном сайте, созданном с помощью таких конструкторов, как SquareSpace.

Не упускайте из поля зрения следующие нюансы:

Визуальная привлекательность

Презентация – это все. Работа должна говорить сама за себя… показывайте, а не говорите! Выбор цвета, типографика – все это важно.

Добавьте страницу «о себе»

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

Продуманная навигация и ссылки на сайте-портфолио

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

Объясните, как вы создаете свой UX

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

Создайте дополнительное портфолио

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

Behance и Dribble – прекрасные сайты-портфолио для людей, которые ищут вдохновение, новые карьерные возможности или же хотят поделиться советами со своими единомышленниками.

Итог

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

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

Подписаться на наш Telegram

Привлечение клиентов с помощью интернет-маркетинга

Разработка сайтов
Контекстная реклама
Поисковая оптимизация

fireseo.ru

7 простых правил по созданию привлекательных интерфейсов — Дизайн на vc.ru

Сначала о главном. Это руководство не для всех. Это руководство прежде всего для:

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

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

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

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

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

В конце концов, я научился дизайну так же, как и любому другому мастерству: путём холодного, жёсткого анализа, бессовестно копируя то, что работает. Я тратил по 10 часов на проект, а брал деньги всего за час. Остальные 9 — я учился. Отчаянно разыскивая в Google, Pinterest и Dribbble то, что можно скопировать.

Эти «правила» — уроки, которые я вынес для себя за это время.

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

В этой статье нет теории. Только чистая практика. Здесь вы ничего не найдёте о золотом сечении или теории цвета. Только то, чему я научился сам.

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

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

Правило № 1: Свет падает сверху

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

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

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

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

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

Возьмём кнопки. Даже в этой относительно «плоской» кнопке есть множество деталей, связанных со светом.

  1. В ненажатом состоянии (вверху) у неё тёмный нижний край. Ведь туда не падает солнечный свет.
  2. Верхняя часть ненажатой кнопки чуть светлее, чем нижняя. Это потому, что она имитирует слегка изогнутую поверхность. Чтобы увидеть солнечный свет, вам нужно было бы направить зеркало вверх — так и изогнутая поверхность отражает чуть больше солнечного света.
  3. Ненажатая кнопка слегка отбрасывает тень — её можно увидеть в увеличенном виде.
  4. Нажатая кнопка сверху темнее, чем снизу. Потому что она находится на уровне экрана, и на неё попадает меньше солнечного света. В реальной жизни нажатые кнопки тоже темнее, потому что мы блокируем свет рукой.

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

Вот пара настроек из iOS 6 — «Не беспокоить» и «Уведомления». Она немного устарела, но может многому нас научить:

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

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

У разделителя тень там, где не падает солнечный свет, и наоборот.

Вот ещё один пример из моей старой работы:

Элементы, которые обычно имеют вогнутую форму:

  • поля для ввода текста,
  • нажатые кнопки,
  • проёмы для слайдеров,
  • радио-кнопки (неактивные),
  • чекбоксы.

Элементы, которые обычно имеют выпуклую форму:

  • кнопки (в ненажатом виде),
  • сами слайдеры,
  • контроллеры выпадающих меню,
  • карточки,
  • сама кнопка выбранной радио-кнопки,
  • всплывающие окна.

Теперь когда вы знаете, вы будете везде это замечать.

Flat-дизайн

iOS 7 наделала много шума благодаря своему «плоскому дизайну». Он в буквальном смысле плоский. В нём нет никаких углублений или выступов — только линии и фигуры сплошного цвета.

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

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

Кроме того, Google выпустила Material Design. Это единый визуальный язык для всех продуктов компании, который, по своей сути, пытается имитировать физический мир. Эта иллюстрация из руководства Material Design показывает, как передать разную глубину с помощью разных теней:

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

Нельзя сказать, что он не имитирует физический мир, но в то же время он не похож на веб-дизайн 2006 года. В нём нет текстур, градиентов или отблесков. Я думаю, будущее за «полу-плоским» дизайном. А flat-дизайн — это просто часть истории.

Правило № 2: Сначала чёрное и белое

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

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

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

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

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

Делать дизайн для остальных гораздо сложнее.

Шаг 2: Как добавить цвет

Самое простое — это добавить только один цвет.

Один цвет на чёрно-белом сайте просто и эффективно притягивает взгляд.

Вы можете пойти ещё дальше и добавить два цвета или несколько оттенков одного тона.

В большинстве случаев в вебе используются HEX-коды цветов модели RGB. Для нас они являются абсолютно бесполезными. RGB плохо подходит для подбора цветов. Лучше использовать HSB (почти тоже самое, что HSV или HSL).

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

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

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

Ещё несколько заметок о цвете

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

  • Никогда не используйте чёрный. Эта статья о том, что чистый чёрный цвет практически не встречается в реальной жизни. Увеличивая насыщенность серых оттенков, особенно тёмных, вы добавите живости вашему дизайну. К тому же, насыщенные серые тона ближе всего к реальной жизни, что само по себе хорошо.
  • Adobe Color CC. Отличный инструмент для того, чтобы подобрать подходящий цвет, изменить его или составить палитру.
  • Поиск в Dribbble по цвету. Ещё один классный способ найти, что работает с определённым цветом. Например, если вы уже нашли один цвет, посмотрите, какие цвета сочетают с ним лучшие дизайнеры в мире.

Правило № 3: Увеличьте белое пространство

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

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

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

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

Белое пространство, HTML и CSS

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

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

Начать с чистого листа — значит начать именно с белого пространства. Думайте об отступах и полях с самого начала. Всё, что вы рисуете, — это ваше сознательное решение по уменьшению белого пространства.

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

Вот концепт музыкального плеера от Петра Квятковского:

Обратите внимание на меню слева.

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

Или посмотрите на заголовки списков. Между словом «Playlist» и его подчёркиванием расстояние в 15px. Это больше, чем высота заглавной буквы шрифта! Я уже молчу о 25 пикселах между самим списками.

В верхнем правом углу тоже достаточно пространства. Текст «Search all music» занимает 20% высоты панели навигации. У иконок похожие пропорции.

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

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

Или «Википедия»:

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

  • Добавьте белое пространство между линиями.
  • Добавьте белое пространство между элементами.
  • Добавьте белое пространство между группами элементов.
  • Анализируйте, что работает, а что нет.

vc.ru

user-interface - В чем разница между дизайном взаимодействия, визуальным дизайном, веб-дизайном, дизайном UX, дизайном пользовательского интерфейса, разработкой пользовательского интерфейса?

вот мой прием, надеюсь, он помогает. /

в первую очередь позволяет прояснить дизайн и development

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

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

note, что обе вещи могут и в большинстве случаев сосуществовать бок о бок при производстве продукта

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

из моего понимания и того, что я узнал за эти годы,

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

визуальный дизайн (не относится к области) - концепция/понимание эстетической привлекательности и воздействия субъекта, с которым человек взаимодействует/смотрит на

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

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

пользовательский интерфейс (какой-то специфический для поля) - концепция проектирования интерфейса, через который пользователь может взаимодействовать с продуктом, gui в программном/веб-приложении или рулевом колесе в автомобиле

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

надеюсь, что это поможет

qaru.site

В чем разница между UX и UI дизайном?

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

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

Приступим!

Прежде всего, давайте ответим на вопрос: что такое дизайн интерфейса и UX дизайн, и в чем между ними разница?

Проще говоря, пользовательский интерфейс — это то, как выглядят вещи, UX — это то, как они работают. UX — это процесс, а пользовательский интерфейс — это результат. Давайте рассмотрим подробнее…

Дизайн интерфейса

Дизайн интерфейса (UI) — большая сфера. Теоретически интерфейс представляет собой комбинацию контента (документы, тексты, изображения, видео и т. д.), формы (кнопки, метки, текстовые поля, флажки, раскрывающиеся списки, графический дизайн и т. д.) и поведения (что произойдет, если я нажимаю / перетаскиваю / печатаю).

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

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

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

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

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

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

Что нужно помнить о создании восхитительного интерфейса

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

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

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

  1. Важность выравнивания.

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

На картинках выше изображение слева имеет 1 линию выравнивания. В то время, как изображение cправа — 4 линии выравнивания.

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

  • Выравнивание по краю — это, когда у вас есть все элементы, имеющие одну сторону или край, выровнены по одной линии.
  • Выравнивание по центру — это, когда вы выравниваете все элементы по их центральной точке.

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

  1. Станьте архитектором внимания.

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

Дизайн интерфейса — это адаптация опыта ваших пользователей, направляя их внимание на важные вещи.

Способы использования текста, для привлечения внимания пользователя:

  • Сделайте размер текста большим или меньшим.
  • Яркий цвет. Или сделайте его приглушенным.
  • Используйте тяжелый шрифт в противовес чему-то тонкому или легкому.
  • Выделяйте слова курсивом. Слова написанные заглавными или строчными буквами.
  • Увеличьте расстояние между каждой буквой, чтобы общий размер слов занимал больше места.

Самое главное при проектировании — это тестирование! Удостоверьтесь, что вы попробуете разные цвета, шрифты, оттенки, углы, выравнивание, макеты и т. д. Экспериментируйте с разными дизайнами, чтобы вы могли создавать путешествие пользователей, используя различные способы привлечения внимания.

Подробнее о дизайне интерфейса читайте здесь. Behance и Dribbble — отличные платформы, для поиска хорошего дизайна, чтобы получить вдохновение.

Дизайн пользовательского опыта

Дизайн пользовательского опыта (UX) — это создание безболезненного и приятного опыта.

Вот 7 вопросов, чтобы спросить себя, является ли UX вашего продукта хорошим:

  1. Юзабилити: для чего пользователь использует мое приложение? В чем его основная функциональность? Что мне нужно для того, чтобы мое приложение использовали? Как я могу свести к минимуму количество шагов, которые требуется сделать пользователю, чтобы достичь этого в моем приложении? Главная вещь, которую хотят достичь мои пользователи при помощи моего приложения? Как я могу сделать опыт достижения этого максимально плавным, быстрым и приятным?
  2. Профилирование пользователей: Вы должны знать, кто ваши пользователи и чего они хотят достичь с помощью вашего приложения. Лучший способ сделать это — профилировать своих пользователей.Вы должны понять свой рынок. Уточните целевую аудиторию/пользователя.Главный вопрос, который следует задать себе: В чем основная функциональность моего приложения? Профилируйте своих пользователей, чтобы постоянно пересматривать этот вопрос.
  3. Просить разрешения: если ваше мобильное приложение имеет push-уведомления, нуждается в службах геолокации, имеет интеграцию с социальными сетями, электронной почтой и т. д., вы знаете, что вам нужно разрешение пользователя. Поэтому при использовании вашего приложения на экране появляется предупреждающее сообщение. Вместо того, чтобы спрашивать сразу и подавить пользователя, используйте эффект Бенджамина Франклина. Прежде чем попросить кого-нибудь оказать большую услугу, попросите их о небольшой услуге. И медленно подталкивайте пользователя в нужном направлении.Убедитесь, что ваше приложение отправляет уведомление о разрешении только тогда, когда пользователь собирается использовать эту функцию, а не когда он просто запускает приложение.
  4. Форма vs Функциональность: Дизайн не всегда касается формы — красивой цветовой схемы, шрифтов, макета и т. п. Он также касается функциональности. Всегда ставьте функцию превыше формы.
  5. Согласованность: Придерживаюсь ли я согласованности во всем приложении? Согласованно ли мое приложение с моим брендом? Несогласованность в дизайне создает путаницу. Смущенный пользователь — недовольный пользователь.Подумайте о согласованности не только с точки зрения внешнего вида, но и с точки зрения функциональности.
  6. Простота: могу ли я сделать это еще проще? Убедитесь, что ваше приложение проверено бабушкой, т. е. пожилые люди смогут его понять и использовать.В запутанном приложении будут ряды кнопок, множество разных цветов и перегруженный интерфейс.
  7. Не заставляйте меня думать: неужели я делаю вещи сложными для своих пользователей?Люди не любят смущаться. Когда мы пишем код, мы стараемся сделать его максимально легким и эффективным. Когда мы создаем дизайн, мы пытаемся сделать интерфейс понятным и как можно менее запутанным. И красивым! Постарайтесь формулировать мысли максимально ясно.

Моменты, заслуживающие внимания, для создания замечательного UX:

  1. Не используйте длинные инструкции при запуске приложения, объясняя, как использовать его. Вместо этого предоставляйте своим пользователям информацию, когда это необходимо. Делайте это контекстуально. Давайте советы и подсказки. Пытайтесь создать дизайн, в котором пользователь поймет приложение за несколько секунд, не требуя инструкции. Вот откуда берутся интуитивные принципы дизайна!
  2. Когда что-то настолько укоренилось в умах мобильных пользователей, как, например, жест «потянуть вниз», чтобы обновить страницу или увеличение размера щипковым движением пальцев — придерживайтесь этих правил для вашего приложения. И НЕ используйте эти действия для какой-то другой цели. Например, жест «потянуть вниз», чтобы добавить новую запись в журнал — это очень смущает пользователя. Приложение журнала, которое я использовал, делало это, и это путало меня.
  3. Не относитесь к своим пользователям как к идиотам. Не показывайте пользователю всплывающее окно или предупреждение, чтобы подтвердить частое действие. Запрашивайте подтверждение только для вредоносных действий, о которых пользователи могут сожалеть — например, удалить что-то или совершить покупку.Ненужные всплывающие окна и предупреждения прерывают процесс и приводят к плохому пользовательскому опыту. Не заставляйте своих клиентов чувствовать себя глупо.

Читайте больше об UX дизайне здесь и здесь.

Мысли в заключение

Я надеюсь, что эта статья помогла вам понять основные понятия о дизайне интерфейса и UX дизайне. Я хотела бы услышать ваши мысли на эту тему. Вы можете отправить мне электронное письмо по адресу [email protected]!

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

Я заканчиваю статью одной из моих любимых цитат о дизайне

«Дизайн — это не только то, как предмет выглядит и ощущается. Дизайн — это то, как он работает»— Стив Джобс

ux.pub