Visual design что это

Что такое UI/UX-дизайн, кто такие «дизайнеры» — кратко

Здесь мы поговорим простыми словами о том, кто такие дизайнеры, что такое UI и где живёт UX.

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

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

Если очень просто — пользовательский интерфейс, основной частью работы над которым есть Визуальный дизайн (Visual Design).

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

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

Вообще Ux — это “Пользовательский Опыт”, соответственно большую часть времени здесь работают именно над “закулисьем” визуальной простоты дизайна.

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

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

Ui — User Interface (Пользовательский Интерфейс) — т.е. это та часть, которую Вы видите. Все те кнопки, иконки, плажки и пр., с которыми Вы взаимодействуете каждый раз, когда открываете сайт, программу, приложение и др.

Ux — User Experience (Пользовательский Опыт) — фактически это “опыт взаимодействия”, моменты “чувств” — участки, где Вы сознательно (и нет) идете к своей цели и/или получаете желаемое. Это возможные мысли, чувства, действия и впечатления, что Вы получаете при работе с конкретным интерфейсом.

Guidelines (Гайдлайны) — Это наборы правил, которые описаны в рамках дизайн-системы, например Material Design, iOs и пр.

Visual Design (Визуальный Дизайн) — Исключительно визуальная часть работы дизайнера, то что можно увидеть.

Ui Kit — набор элементов используемых в построении интерфейса. Такой-себе конструктор, с которого состоит дизайн.

Design system (Дизайн система) — правила, компоненты, спецификации и пр., что задает общий тон всему дизайну, в рамках проекта. Фактически это своеобразный Гайдлайн.

Источник

Что такое UX/UI-дизайн и как попасть в эти профессии

Понятиям UX и UI уже около 70 лет, но некоторые дизайнеры всё ещё путают их. Рассказываем, что означают аббревиатуры и как освоить эти профессии.

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

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

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

UX-дизайн — это проектирование интерфейса на основе исследований пользовательского опыта и поведения.

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

Пишет про дизайн в Skillbox. Редактор и арт-директор собственного дизайн-бюро. Ведет рассылку о текстах, типографике и дизайне.

Первый Macintosh — один из ярких примеров работы UX-дизайнеров. Идея использовать окна вместо командной строки существовала и до 1984 года, но именно проектировщики Apple сделали графический интерфейс массово доступным.

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

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

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

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

UX-дизайнер (англ. user experience designer) — это проектировщик, который изучает потребности пользователей, строит логические схемы работы интерфейса, тестирует прототипы на целевой аудитории и составляет техническое задание для UI-дизайнера.

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

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

UI (англ. user interface) переводится как «пользовательский интерфейс». И необязательно только графический: тактильный, голосовой или звуковой. Мы рассмотрим только графический интерфейс, так как дизайнеры в основном работают с ним.

UI-дизайн — процесс визуализации прототипа, который разработали на основании пользовательского опыта и исследования целевой аудитории.

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

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

UI-дизайнер (англ. user interface designer) — дизайнер интерфейсов, который визуализирует рабочий прототип, отрисовывает кнопки, иконки, формы и другие его компоненты и собирает их в гармоничный работающий макет.

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

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

Требования к качественному
UX/UI-дизайну

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

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

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

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

Соблюдайте постоянство для всех разделов сайта и приложения. Элементы интерфейса — меню и слайдеры — должны вести себя одинаково на любой странице.

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

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

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

В чём разница между UX и UI

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

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

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

Для начала поймите, кем вы хотите быть: UX- или UI-дизайнером. Сати Тачиба, старший дизайнер в Wargaming, советует, как легко и быстро выбрать между UX и UI.

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

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

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

Источник

10 базовых принципов визуального дизайна

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

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

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

Итак, готовы? Всё начинается с…

#1 Точка, линия и форма

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

В геометрии точка — это комбинация координат x и y, добавьте ось z — и вы в трёхмерном пространстве, но ограничимся двумя измерениями в этой статье.

Точка > линия > форма

Если соедините две точки, то получите линию. Линия, состоящая из необъятности точек, немного похожа на гроздь атомов, которые формируют молекулы, а они, в свою очередь, формируют все объекты вокруг вас. Затем, если добавить третью точку и соединить их, вы получите форму, в данном случае треугольник, но как упоминалось ранее, с помощью этих базовых элементов вы можете получить практически всё, что хотите.

Но для ваших глаз эти формы не существуют, на самом деле, пока не добавите к ним кое-что…

#2 Цвет

Видимый цветовой спектр

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

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

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

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

Теперь, когда вы можете увидеть свой треугольник, как насчёт сделать его более интересным…

#3 Типографика

От треугольника к букве А

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

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

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

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

#4 Пространство

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

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

Настройка негативного пространства между символами (он же кернинг)

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

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

Если научитесь находить правильное соотношение между позитивным и негативным пространством, то сможете создавать…

#5 Баланс, ритм и контраст

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

Настройка визуального веса слов для создания ритма и контраста

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

Кое-что может помочь вашему ритму и балансу, и с этим тоже можно поиграться…

#6 Масштаб

Делаем следующий шаг, настраивая масштаб слов

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

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

Например, взять газетную страницу. Что самое большое на странице?

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

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

#7 Сетка и выравнивания

Это как то странное удовлетворение, когда вы играете в тетрис и складываете последнюю линию, которая исчезает с экрана.

Создание определённой связи между элементами, чтобы они выглядели более сбалансированно и приятно

Предполагается, что они невидимы, но вы их увидите, если откроете книгу или газету. Так или иначе, но (независимо от того, что вы дизайните) привязка к сетке структурирует ваш дизайн и сделает его более приятным и лёгким в усвоении.

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

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

#8 Фрейминг

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

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

Рефрейминг композиции, чтобы добавить интерес и дополнительный элемент

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

После всего этого, если вам кажется, что нечто интересное пропущено, то можете поиграться с…

#9 Текстуры и паттерны

Тестируем текстуру с шумом

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

Текстуры сегодня не такие модные, какими были когда-то, но с ними вы можете добавить новое измерение своему дизайну, сделав его более трёхмерным и осязаемым.

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

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

Последнее, но не менее важное, и в реальности что я считаю чашей святого Грааля в визуальном дизайне, это…

#10 Визуальная концепция

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

Лампа идей… клише, я знаю 🙂

Это то, что отличает великолепный дизайн от чего-то, что вы можете скачать из стока.

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

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

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

Вот теперь у вас есть они, «мои» 10 принципов для создания хорошего дизайна. Даже хотя я считаю #10 самым важным, вам следует уделить внимание всем остальным принципам и убедиться, что вы достигли совершенства в своём искусстве. У вас может быть хорошая идея, но я думаю, что вы также должны знать, как её реализовать (или знать того, кто может это сделать вместо вас).

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

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

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

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

Источник