Дизайн интерфейсов обучение – Онлайн-курс «Дизайнер интерфейсов» от Mail.Ru Group
13.10.2019 
Разное
Как стать дизайнером интерфейсов в 2019
Я наблюдаю, что почти у всех начинающих дизайнеров есть одна проблема: недостаток дизайнерской базы.
Базовые навыки:
- Композиция и сетка
- Типографика и работа со шрифтами
Цвет на начальном уровне косвенно входит в композицию и подразумевает умение расставить цветовые акценты по уже заданным старшими дизайнерами концепциям. Но так, конечно, это третий важный навык.
☝️ Работу с графическими редакторами я сейчас не рассматриваю: если вы еще не освоили Sketch/Figma/Experience Design/Invision Studio, то начните с этого.
Без наработки базы развиваться в дизайне дальше будет очень тяжело — это фундамент, на который опирается весь практический опыт.
Эти навыки универсальны и нужны любому дизайнеру, который работает в 2D пространстве. У графических дизайнеров ситуация лучше: многие проходят художественные школы и институты, есть более-менее сложившееся понимание, без чего в профессию нельзя точно. Для UI/UX дизайнеров это не так очевидно и много больше людей выходит из инженерных специальностей. Тем не менее, если вы хотите называться дизайнером_кой, базовые вещи знать надо.
🤷♀️ Я исхожу из своего опыта — в основном, работы в агентстве — поэтому какие-то вещи для дизайнера интерфейсов в продукте могут отличаться. Скорее всего, меня упрекнут, что я не говорю про основы UX, но я пишу статью чисто под свою агентскую боль: специалисты, которые приходят к нам, часто не владеют совсем уж простыми вещами. К разработке UX таких подпускать рано.
Начинающий дизайнер интерфейсов в агентстве, в основном, прокачивает эти два базовых навыка, потому что помогает дорабатывать продукты и сайты старшим специалистам. Проработку сложных сценариев и путей пользователей, создание прототипов или разработку стратегии младшему специалисту сходу не доверят. Гораздо больше нужен начинающий дизайнер с уверенными, но простыми композиционными решениями, внимательным отношением к типографике и деталям.
Обучать основам в рабочее время очень тяжело и долго, поэтому лучше приходить подготовленным.
designpub.ru
Как стать дизайнером интерфейсов. Необходимые навыки и сильные инструменты, о которых нам не говорят
Несмотря на обилие учебных материалов, начинающих специалистов год за годом заботит один и тот же вопрос: как сделать первые шаги в дизайне.
Получив множество вопросов от молодых дизайнеров, я решил написать материал, который бы мечтал прочитать на старте своей карьеры. Он основан на личном опыте и уроках, полученных в общении с успешными дизайнерами из больших студий и продуктовых команд.
В первой части, я расскажу о базовых навыках хорошего дизайнера, а во второй, о том, как их использовать для построения карьеры.
Фундамент дизайнера
В любой сфере есть ряд базовых навыков, без которых в профессии делать нечего. Лишь обретя эти навыки можно расчитывать на повышение в должности и доходе.
Фокус, цели и задачи
Каждый дизайнер должен знать, для каких целей создается интерфейс и какие задачи он должен решать.Сайт авиакомпании существует для людей, цель которых переместиться из одного города в другой, а его задача — помочь найти рейс, соотвествующий их потребностям.
Цели и задачи — это не одно и тоже. У вас может быть цель хорошо провести вечер, а задача — выбрать между кино, рестораном и футболом.
Дизайнер должен всегда в голове держать цели пользователей, а на практике решать их задачи. Наверняка, вы сейчас работаете или начинаете работать над каким-либо проектом. Подумайте, какие у него цели и какие задачи он должен решать.
Задач у сервиса может быть много и некоторые будут друг с другом конфликтовать, поэтому вам нужно выбрать одну основную и сделать ее выполнение максимально удобным, при этом не пожертвовав остальными.
Как бы это работало, если бы это было просто?
Я регулярно задаю себе этот вопрос, встречая новую задачу. Он помогает мне отвлечься от существующих шаблонов и придумать решение, соответсвующее текущей задаче.
На старте карьеры я, как и многие, первым делом бежал на дизайнерские ресурсы в поисках “вдохновения” и пытался найти решение, которое можно применить к моей задаче. Хотя на самом деле, я не искал вдохновение, а лишь пытался поменьше напрягать свой мозг.
Скопировать чужое решение заманчиво, но не нужно забывать, что любой паттерн может хорошо работать в одном случае и абсолютно не работать в другом. Да и кем вы станете, лишь подражая чужим работам? Ведь хорошего дизайнера всегда отличает умение мыслить.
Полезно перенимать чужой опыт, просматривая концепты и работающие сервисы, но при столкновении с новой задачей не нужно забывать включать голову.
Эстетика интерфейса
Я люблю Medium за хорошую типографику и удобство написания статей, хотя на других ресурсах мои статьи порой набирают в два-три раза больше просмотров. Но дело ведь не только в красоте.
Хороший визуал облегчает чтение и избавляет от необходимости менять масштаб страницы. Хороший визуал делает акценты на важных элементах, что приятно в социальных сетях и критически важно в сервисах для бизнеса.
Instagram не просто так изменил свой интерфейс с черно-синего на белый. Его целью было сделать акцент на контенте, который генерируют пользователи.
Переодически мы слышим об ошибках, которые совершают люди из-за сложного интерфейса. Конечно, поставить случайно лайк — не проблема, а вот ошибка при управлении самолетом или атомной станцией может привести к трагедии.
Самый простой способ улучшить визуальные навыки — перенимать чужой опыт, копируя интерфейсы и читая толковые материалы. Мне в свое время очень помогли дизайн-гайдлайны Google.
На русском языке можете прочитать емкий материал студии Олега Чулакова: design.chulakov.ru. Уверен, что на старте карьеры он бы мне очень помог.
Еще одна очень важная вещь — взгляд со стороны. Я всегда работал в стартапах, где был одним дизайнером, что давало мне большую свободу действий, но лишало обратной связи опытных коллег.
Большинство дизайнеров начинают свою карьеру дома, поэтому единственным способом получить обратную связь для них является завязать отношения с опытным дизайнером и периодически просить у него комментарий по поводу своих работ.
Что ему нужно?
Хороший дизайнер думает сценариями, а не экранами.Сценарий — это последовательность действий, которые нужно совершить пользователю чтобы выполнить определенную задачу. Например, выбрать оптимальный рейс. Сценарий может решаться в рамках одного экрана, а может содержать их сколько угодно. Задача дизайнера — не сократить количество экранов, а сделать выполнение задачи пользователя более удобным, интуитивным.
Иногда задача требует пошаговой логики, где каждый шаг — это отдельная страница, как при сложной регистрации. Некоторые задачи удобнее решать в рамках одного экрана (пример: создание публикации в соцсетях).
Сценарии лежат в основе проектирования любого интерфейса, поэтому любой дизайн должен начинаться с них.
Системность в дизайне
Все компании, которых хоть немного заботит дизайн, приходят к идее, что перерисовывать одни и те же компоненты и расставлять их новым способом — довольно глупая затея. Поэтому все начали создавать единую систему компонентов, а чуть позже и логику их размещения.
Спустя еще какое-то время, дизайнеры объединились с разработчиками, связав свои элементы в макетах со сверстанными компонентами на фронте. Благодаря этому, дизайнеру все меньше приходится рисовать и все больше использовать свои два главных инструмента: мозг и фронтенд-разработчика.
Разработчиков нужно уважать и хотя бы логически понимать суть их работы. Без этого сложно будет найти общий язык и создать отличный продукт.
Имея готовый набор необходимых элементов и стилей, вы сможете больше думать о решении проблем пользователей и меньше о рисовании.
Даже хорошую идею легко убить
Помню, как в начале карьеры, презентуя дизайн-решение, меня было легко смутить, задав простой вопрос, например, почему какой-то элемент именно такой. Тогда я пытался аргументированно ответить на вопрос из-за чего возникал бессмысленный диалог, который влиял на восприятие всей работы.
Лишь с опытом я понял, что вопросы, не касающиеся основной темы нужно игнорировать. Например, сказав: “Это лишь детали, поэтому давайте обсудим основные вещи, которые влияют на бизнес, а в конце вернемся к вашему вопросу”. Как ни странно, этот ответ избавляет вас от бесполезной беседы и представляет в виде профессионала, который заботится о бизнесе клиента, а не своем эго.
Для того чтобы ваши дизайн-решения принимались, необходимо связывать их с аналитикой, которую вы провели прежде чем придти к этому решению. Показав, что ваше решение стало итогом серьезной аналитической работы, в рамках которой вы изучили конкурентов и протестировали несколько решений, с вами сложно будет не согласиться.
Книги для дизайнеров
Меня периодически спрашивают, какие книги помогли мне стать в дизайне лучше.
Никакие.
Лишь регулярная практика и понимание бизнеса помогли мне приносить компании большую пользу и повысить свою ценность на рынке.
Идем дальше.
Куда устроиться
Есть три популярных варианта: студия, продукт или стартап.
Студия хорошо подходит для новичков, так как вокруг тебя полно дизайнеров у которых можно чему-либо научиться. Здесь выше темп, так как есть четкие сроки начала и окончания проекта. Из-за того, что стоимость проекта привязана к человеко-часам, в студиях зарабатывают, в основном, меньше, чем в продукте.
В продукте более спокойный ритм, так как прибыль компании напрямую не зависит от работы дизайнера. Зачастую, дизайн-команда занимается функционалом, который появится в будущем, поэтому для них качество чаще всего важнее скорости. Особенно для проектов, которыми пользуются миллионы.
В стартапах вклад каждого сотрудника чрезвычайно важен, так как команды небольшие и зачастую отдел дизайна состоит лишь из одного человека, поэтому идти туда лучше полностью уверенным в своих силах.
Всю свою карьеру, не считая фриланса, я работал в стартапах, где был единственным дизайнером. Минус этой работы в том, что рядом нет наставника, поэтому я много занимался самообразованием и анализом своей работы. Плюс в том, что ты можешь максимально влиять на итоговый продукт, работая вместе основателями.
Генерация удачи
[очень важная часть] Многие ограничивают свое представление о мире профессиональными навыками, хотя они являются лишь необходимым минимумом. Вы можете быть отличным дизайнером, но какой в этом толк, если о вас никто не знает (ни клиенты, не сообщество)?
Некоторым везет и их карьера выстраивается благоприятным образом, но не потому что они с рождения счастливцы, а лишь потому, что они неосознанно выполняли действия, которые повышают шансы на успех.
Среди этих действий есть активные и пассивные.
Среди пассивных — это наличие резюме, портфолио и аккуратных профилей в соцсетях. Эти вещи повышают вероятность того, что вас могут случайно заметить и предложить интересный проект.
Активные действия — отклики на чужие вакансии, публикации статей и кейсов, общение с профессионалами из разных сфер, прямые письма работодателям и создание своего сообщества. Благодаря этому, вы не ждете пока вас найдут, а своими силами повышаете вероятность перспективного предложения.
Я знаю одного дизайнера из региона, который вел таблицу с ведущими профессионалами из нашей отрасли и по приезду в Москву встречался с ними. Благодаря этому, ему удалось получить хорошее предложение о работе и спустя полтора года сменить одну топовую студию на другую, заняв место партнера.
Популярный ныне вариант — пройти курс от известной компании или поучаствовать в конкурсе.
Павел Шумаков, выиграв Russian Design Cup получил предложение от ВКонтакте, а чуть позже перебрался в лондонский офис Badoo. Некоторые ребята, пройдя курс от Skillbox получили предложение о работе в AIC.
Давно известный вариант — сделать фейковый проект, вложив в него все силы и качественно опубликовать его в портфолио. Самый известный пример — редизайн Google News Георгия Квасникова, который принес ему ряд предложений от крупных компаний.
Ну и последнее.
Важно понимать, что за ширмой любого бренда находятся адекватные люди, которые готовы в любое время рассмотреть амбициозного кандидата. Ваша задача — лишь правильно себя преподнести. Грамотное письмо на общий ящик и аккуратное портфолио — это порой все, что нужно.
Как зарекомендовать себя на новом месте
Одна из самых главных вещей, которую я понял за свою карьеру — это умение идти вперед, несмотря на неудачи. Ошибок не избежать, поэтому нужно нормально к ним относится.
Это элементарная логика:
Успеха добиваются не те, кто не совершает ошибок, а те, кто несмотря на них идет вперед.Мой путь, который я описал в большой истории “Становление дизайнера”, содержал ряд неудач, которые могли стоить мне работы, но даже на старте карьеры интуиция подсказывала, что переживания никому не помогут и единственный способ чего-то добиться — просто идти вперед.
Поэтому не переживайте, столкнувшись с проблемами на новой работе. Все через это проходили, включая Стив Джобса, который за первые 15 лет своей карьеры совершил ряд дорогостоящих ошибок, из-за которых в конце 90-х многие его считали неудачником. И лишь высокомерная уверенность в своем предназначении, позволила ему идти вперед и спустя десятилетие стать иконой отрасли.
Будьте открытыми, налаживайте отношения с коллегами, интересуйтесь опытом других и когда вам выпадает шанс, берите на себя инициативу.
Неизбежный исход
Возможно, начинающим специалистам еще рано читать про исход, но один дизайнер написала мне, что не хочет просто “двигать пиксели”, а стремиться учавствовать в создании продукта. Обычно дизайнеры приходят к этим мыслям спустя несколько лет, устав делать однотипные сервисы для заказчиков.
Самым логичным вариантом роста является позиция арт-директора, которая заключается в том, что вы навсегда закрываете графический редактор и выполняете лишь интеллектуальную работу, корректируя направление других дизайнеров.
Другой вариант — перейти в продуктовую компанию, где вместе с коллегами у вас будет возможность работать над улучшением одного продукта.
Неплохой вариант — присоединиться к стартапу и отвечать за дизайн всего проекта. В случае успеха, вы начнете набирать и обучать других дизайнеров, формируя отдел.
Возможно, кто-то из вас захочет перейти на позицию продукт-менеджера и отвечать за коммуникацию между командами и стратегию развития проекта.
Ну и самый амбициозный вариант — основать свой проект. Хороший дизайнер понимает, как работает маркетинг и разработка, что нужно людям и умеет это использовать.
Совершить переход с позиции дизайнера не так сложно. Вместо того, чтобы ждать когда вас повысят, начните брать на себя новые обязанности самостоятельно.
Я применяю этот принцип довольно давно и как показывает опыт, при наличии адекватных коллег ваша инициатива будет отмечена.
Ключ ко всему
Молодой дизайнер задал мне вопрос:
Лучше продолжить самообразование или поскорее устроиться на работу?
Всегда и во всем, практика – лучший способ изучить какую-либо дисциплину, а если она совмещается с адекватной обратной связью, то ничего лучше вы найти не сможете.Поэтому, если вы хотите чего-то добиться в дизайне, то как можно раньше приступайте к работе и очень хорошо, если рядом с вами будет опытные коллеги. Если таковых нет, то делайте проекты самостоятельно и ищите обратную связь среди дизайнеров в социальных сетях.
На старте карьеры делайте фокус на качество, а не количество проектов. Не нужно искать новую работу в поисках лучшей жизни. Сначала научитесь делать ее хорошо.
И не забывайте, что дизайн-навыки – лишь половина успеха. Помимо них, вам нужно уметь общаться с людьми, понимать принципы работы бизнеса и проявлять активность в поиске интересных предложений.
Работайте упорно каждый день и не забывайте, что любой успех требует времени.
Терпение и упорство – ключ ко всему.
Сделайте эту неделю прорывной.
habr.com
Крэш-курс по UI-дизайну / Я люблю ИП corporate blog / Habr
Мы всегда в поисках хороших статей о дизайне, чтобы потом использовать их в работе над сайтом «Я люблю ИП». Сегодня мы перевели ещё одну статью, которая рассказывает, чем отличается UI-дизайн от UX-дизайна и на каких основных принципах строится дизайн интерфейсов.
UI vs. UX
Если вы хоть немного интересовались дизайном приложений, то наверняка слышали термины «UI» и «UX». Но чем же они отличаются?
В самой простой форме, UX-дизайн — это то, что делает интерфейс полезным, а UI-дизайн — делает его красивым. Дизайн интерфейсов — это смесь визуальной иерархии и элементов интерфейса. Чтобы разобраться, чем отличается прекрасный дизайн от просто хорошего, необходимо понять, что дизайн интерфейсов — это всего лишь один из слоев целого дизайн-процесса. Возможно, именно поэтому эти два термина так часто путают. В этой статье я постараюсь рассказать, в чём же заключается разница между ними с точки зрения дизайн-процесса.
Согласно книги Дж. Гарретта «Элементы опыта взаимодействия», UX-дизайн можно определить через пять основных уровней. Давайте начнём с самого абстрактного.
1. Стратегия
Цели сайта и потребности пользователей
В широком смысле, стратегия — это основа продуктового дизайна. На данном этапе применяются различные техники исследования, включая пользовательские интервью, анализ конкурентов, персонажи и др., для того, чтобы понять:
- Какую проблему вы пытаетесь решить?
- Что нужно пользователям?
- Как ваш продукт вписывается в контекст вашего бизнеса (каковы его цели)?
2. Набор возможностей
Функциональные спецификации и требования к контенту
На данном этапе вы должны определить набор функций и объём информации для вашей платформы. Другими словами:
- Как вы будете решать данную проблему? Какие функции вы хотите реализовать и в каком порядке?
Главный вызов для дизайнера здесь — это правильно расставить приоритеты с минимальными издержками. Наверняка, у вас есть сотни идей, как решить проблему, но вы не можете внедрить их все.
3. Структура
Информационная архитектура и проектирование взаимодействия
На данном этапе ваши идеи должны начать оформляться в структуру. Информационная архитектура отвечает за то, как представлена информация внутри приложения и как её воспринимают пользователи. Проектирование взаимодействия определяет последовательность действий, которые помогут пользователю решить конкретную задачу. Вместе они определяют наиболее логичные шаги для того, чтобы удовлетворить потребности пользователей.
4. Компоновка
Дизайн интерфейса и информационный дизайн
На данном этапе вещи становятся все менее абстрактными и более конкретными.
На уровне компоновки мы разрабатываем дизайн интерфейса и информационный дизайн, чтобы уточнить структуру из предыдущего уровня. Дизайн интерфейса отвечает за расположение конкретных элементов интерфейса, которые позволяют пользователю взаимодействовать с функциональностью системы. Тогда как информационный дизайн отвечает за то, как представлена эта информация, чтобы облегчить это взаимодействие.
Именно на данном этапе вы найдёте большинство UX-дизайнеров или дизайнеров по продукту, работающих над вайерфреймами. Вайерфреймы — это очень приблизительные, зачастую чёрно-белые макеты, которые демонстрируют назначение каждого элемента интерфейса для пользователей.
И наконец:
5. Поверхность
Визуальный дизайн и чувственное восприятие
Уровень поверхности, как и предполагает название, стремится создать великолепное чувственное восприятие и визуальный дизайн. Задача дизайнера здесь — создать интуитивную связь с пользователями через успешную коммуникацию бренда, продукта, его ценностей и свойств в целостной картине.
Именно здесь вы найдёте UI-дизайнеров, делающих большую часть своей работы, используя такие инструменты как Sketch, Photoshop, Adobe Experience Design, Illustrator или Figma.
Теперь давайте перейдём к основным принципам хорошего UI-дизайна.
Принцип № 1. Простота превыше всего
Нет ничего хуже, чем неопределённость в приложении. Что делает эта кнопка? Как я сюда попал? Как вернуться обратно? Для того, чтобы это избежать, дизайнер всегда должен спрашивать себя:
Почему это здесь? Какой в этом смысл? Как ещё это можно сделать?
Хорошие дизайнеры находят множество возможностей для создания макета интерфейса, видит потенциальные недостатки каждого из них и понимают, какой дизайн лучше всего поможет пользователям достичь своих целей. Простота в дизайне позволяет пользователям чувствовать себя уверенно, находясь внутри приложения.
Принцип № 2. Давайте ясную, информативную обратную связь
Мы все пользовались такими сайтами и приложениями, где ты пытаешься нажать на кнопку и не понимаешь, сработала она или нет.
Простыми словами, у каждого действия должна быть реакция. Например, если вы веб-разработчик, то знаете, что :hover на кнопке позволяет пользователям понять изменение её состояния.
Отличный пример — это индикатор загрузки постов в ленте Facebook. Пока идёт загрузка контента, индикатор загрузки (в форме контента) информирует пользователей о том, что контент загружается.
Принцип № 3. Постоянство имеет значение
Когда я говорю о постоянстве, я имею в виду постоянство в расположении элементов интерфейса или языка, который используется в приложении. После того, как ваши пользователи научились пользоваться интерфейсом, не нужно заставлять их переучиваться. Давайте посмотрим на пример плохого постоянства.
Может показаться, что это три разных сайта от трёх разных компаний, но это не так. Почему так произошло? Потому что в меню на этих страницах используется разная цветовая гамма, разные шрифты и разное расположение. Это может дезориентировать пользователя и сбить его с толку, так как совсем неочевидно, что эти страницы принадлежат одному сайту.
Как вы можете поддерживать постоянство, будучи дизайнером? Вы можете создавать дизайн, использую постоянную сетку, например, сетку из 8 пунктов, которая часто используется в дизайне иконок и мобильный приложений. Также вы можете использовать постоянную цветовую гамму и элементы навигации на всех экранах. Все эти элементы можно включить в руководство по стилю.
Вывод: постоянство и хорошая структура позволят вашим пользователям чувствовать себя как дома.
Принцип № 4. Если сомневаетесь, используйте известные дизайн-паттерны
Не поймите меня неправильно — инновации это хорошо и всячески приветствуются, но только не в ущерб опыту взаимодействия пользователей. Не нужно изобретать новый велосипед там, где старый отлично справляется со своей задачей. Например, если вы не уверены, что иконка точно и интуитивно отражает значение слова, то лучше использовать просто слово. Или придерживаться обычной цветовой гаммы, где оттенки красного используются для предупреждения об опасности, а зелёный свидетельствует об успешном завершении.
Почему нужно использовать известные дизайн-паттерны? Дело в том, что многие из них основываются на человеческом восприятии. Возьмём к примеру F-паттерн для сканирования информации.
Это тепловая карта, сгенерированная в ходе эксперимента по слежению за движением глаз. Наиболее просматриваемые секции отмечены красным, наименее — синим. Как вы уже заметили, тепловая карта чем-то напоминает букву F. Но что это значит для дизайнера?
Это значит, что самый важный контент нужно располагать в левом верхнем углу.
Обычно там находится логотип. Это позволяет компаниям усилить их бренд. В правом верхнем углу может располагаться навигация или поиск. Это позволяет пользователям легко перемещаться по страницам, без необходимости искать навигационные элементы где-то в другом месте. Вот два примера, которые придерживаются этого принципа.
Чем ниже вы спускаетесь по странице, тем слабее становится внимание пользователей. Поэтому старайтесь располагать самую важную информацию ближе к верху и выделяйте заголовки, чтобы контент можно было легко сканировать.
Принцип № 5. Используйте визуальную иерархию
Что такое визуальная иерархия? Это такой порядок элементов, который подразумевает их относительную важность. Это попытка дизайнера повлиять на то, в каком порядке воспринимается представленная информация.
То, как мы воспринимаем информацию, зависит от нескольких факторов. Давайте посмотрим на основы визуальной иерархии.
1) Типографика
Из чего состоит хорошая типографика? Два основных фактора — это чёткость и удобство чтения.
Чёткость — это свойства, присущие конкретному шрифту, которые позволяют его символам отличаться друг от друга. Это полностью зависит от шрифта и здесь мало, что можно сделать. Поэтому выбирайте подходящий шрифт.
Удобство чтения — это то, как вы манипулируете отдельным шрифтом, чтобы его было легче воспринимать.
Заметили, как шрифт вверху воспринимается хуже, чем внизу? Если нет, то…
Ещё один фактор, который влияет на удобство чтения, — это длина строки. Если строка слишком короткая, то пользователь будет постоянно перепрыгивать со строки на строку, что сделает восприятие информации сложнее. То же самое верно, если строка слишком длинная — так глаза быстрее устают.
Также никогда не центрируйте большие блоки текста. Гораздо легче воспринимается текст с выравниванием по левому краю, потому что глаз точно знает, где начинается следующая строка.
2) Белое (или негативное) пространство
У вас когда-нибудь было такое, что вы смотрите на меню/ сайт/ интерфейс и думаете: «Мне нравится, как это выглядит, но я не знаю почему»? Теперь вы знаете. Всё дело в белом пространстве. Белое пространство чрезвычайно помогает в восприятии. Исследование 2004 года показало, что подходящее использование белого пространства между абзацами и для полей справа и слева улучшает восприятие почти на 20 %. Пользователям легче сфокусироваться и переработать такой контент.
Собака или кошка?
Многие считают, что белое пространство — это дело вкуса. Я думаю, это гораздо более объективно. Мы можем умело использовать белое пространство для того, чтобы усилить визуальную иерархию. Давайте посмотрим на сайт Helen Tran.
Прекрасное портфолио! Теперь посмотрим ещё раз более внимательно.
Вы заметили, как контент разбит на четыре чётких блока? Давайте пойдём ещё дальше.
Helen использует комбинацию из интерлиньяжа, размера шрифта, цвета и белого пространства для того, чтобы отделить контент внутри каждого блока. Это позволяет пользователям легче его сканировать.
3) Цвет
Теория цвета, правда, очень и очень сложна. Моя цель не в том, чтобы рассказать вам всю теория цвета, а в том, чтобы дать вам несколько принципов, которые вы сможете использовать в своём дизайне уже сейчас.
Если вы посмотрите на картинку выше, то увидите, что синий квадрат слева кажется дальше, чем красный квадрат справа. Теплые цвета кажутся ближе, тогда как холодные, наоборот, сливаются с фоном. Давайте посмотрим на этот пример:
Дизайнер использует тёплый красный цвет, чтобы выделить призыв к действию, и холодный синий, чтобы утопить навигацию. Тот же самый приём используется и на иллюстрации слева. Красная иконка с молнией сразу же выделяется на фоне всего остального.
Также вы можете использовать цвет, чтобы сгруппировать похожие элементы.
И наконец, меньше значит больше. Чем больше цветов вы используете, тем меньше значение каждого из них. Отличный пример — это последний редизайн Instagram.
Уменьшение количества используемых цветов не только позволило выделить фотографии, но и увеличило эффективность уведомлений, так как им больше не нужно соревноваться с другими цветами на верхней и нижней панели.
habr.com
26 лекций для дизайнеров интерфейсов
В рамках курса рассматриваются работы, проекты, принципы организаций и различные деятельности в области проектирования и дизайна интерфейсов.
Курс дает понимание базовых принципов и подходов к проектированию пользовательских интерфейсов.
Дмитрий Карпов — Что такое сетка и для чего она нужна
Олег Чулаков — В чем главная задача анимации в UI
Никита Обухов — Модульный дизайн. Изучение и стандартизация подачи информации в веб
Геннадий Лохтин — Будущее интерфейсов браузеров
Юрий Ветров — Дизайн-команда в продуктовой компании
Анна Кармишина — Здравый смысл, брендинг, веб и как всё это связано
БВШД: Дизайн мобильных приложений
Никита Ефимов — Процесс проектирования интерфейса: зачем нужен этап анализа
Дмитрий Сатин — Социально-ориентированное проектирование
Фёдор Аксёнов — Дистанционное UX–тестирование
Роман Черных— Поиск и дифференциация UX-персонала
Михаил Сокольников — Дизайн-мышление в финтехе: вызовы и лучшие практики
Мария Сташенко — Проектирование пользовательского опыта горожан
Алексей Бородкин — Как подружить разработку и UX
Дизайн приложения
Дизайн экрана мобильного приложения в Sketch 3
Создание анимации для мобильного приложения
Константин Горский — Дизайн интерфейсов
Особенности проектирования интерфейсов для Smart TV
Как найти и устранить проблемы веб-интерфейса
Сайт как интерфейс взаимодействия с пользователем
Платон Днепровский — Введение в дисциплину проектирования UI. Общие сведения
Антон Алябьев — Сбор и анализ требований к интерфейсу
Антон Алябьев — Методики Персонажей, форматы сценариев
Платон Днепровский — Сервис-дизайн, информационная архитектура
Платон Днепровский — Введение в дисциплину. Общие сведения
infogra.ru
| Дата | Режим обучения | Место обучения | Преподаватель |
Скидка * |
||||
|---|---|---|---|---|---|---|---|---|
|
26.08.2019 — 29.08.2019 |
ежедневно утро-день 10:00 — 17:10 Открытое обучение
Подробнее |
«Таганский» м.Таганская, м.Пролетарская или м.Крестьянская застава Группа почти укомплектована. Успейте записаться на свободные места! |
Павлов Юрий Евгеньевич |
|||||
|
09.09.2019 — 12.09.2019 |
ежедневно утро-день 10:00 — 17:10 Открытое обучение
Подробнее |
«Таганский» м.Таганская, м.Пролетарская или м.Крестьянская застава |
Павлов Юрий Евгеньевич |
|||||
|
14.10.2019 — 17.10.2019 |
ежедневно утро-день 10:00 — 17:10 Открытое обучение
Подробнее |
«Таганский» м.Таганская, м.Пролетарская или м.Крестьянская застава |
Павлов Юрий Евгеньевич |
|||||
|
18.11.2019 — 21.11.2019 |
ежедневно утро-день 10:00 — 17:10 Открытое обучение
Подробнее |
«Стилобат» м.Бауманская |
Павлов Юрий Евгеньевич |
|||||
|
02.12.2019 — 05.12.2019 |
ежедневно утро-день 10:00 — 17:10 Открытое обучение
Подробнее |
«Таганский» м.Таганская, м.Пролетарская или м.Крестьянская застава |
Павлов Юрий Евгеньевич |
|||||
|
08.12.2019 — 29.12.2019 |
воскресенье утро-день 10:00 — 17:10 |
«Таганский» м.Таганская, м.Пролетарская или м.Крестьянская застава |
Бредова Елена Александровна |
|||||
|
15.02.2020 — 07.03.2020 |
суббота утро-день 10:00 — 17:10 |
«Таганский» м.Таганская, м.Пролетарская или м.Крестьянская застава |
Бредова Елена Александровна |
|||||
|
17.02.2020 — 20.02.2020 |
ежедневно утро-день 10:00 — 17:10 |
«Таганский» м.Таганская, м.Пролетарская или м.Крестьянская застава |
Павлов Юрий Евгеньевич |
— 15%
|
||||
|
14.04.2020 — 17.04.2020 |
ежедневно утро-день 10:00 — 17:10 Открытое обучение
Подробнее |
«Таганский» м.Таганская, м.Пролетарская или м.Крестьянская застава |
Павлов Юрий Евгеньевич |
|||||
|
30.05.2020 — 20.06.2020 |
суббота утро-день 10:00 — 17:10 |
«Стилобат» м.Бауманская |
Павлов Юрий Евгеньевич |
|||||
|
01.06.2020 — 04.06.2020 |
ежедневно утро-день 10:00 — 17:10 Открытое обучение
Подробнее |
«Таганский» м.Таганская, м.Пролетарская или м.Крестьянская застава |
Павлов Юрий Евгеньевич |
|||||
|
04.07.2020 — 25.07.2020 |
суббота утро-день 10:00 — 17:10 Открытое обучение
Подробнее |
«Стилобат» м.Бауманская |
Павлов Юрий Евгеньевич |
|||||
|
06.07.2020 — 09.07.2020 |
ежедневно утро-день 10:00 — 17:10 |
«Таганский» м.Таганская, м.Пролетарская или м.Крестьянская застава |
Павлов Юрий Евгеньевич |
— 15%
|
||||
|
18.08.2020 — 21.08.2020 |
ежедневно утро-день 10:00 — 17:10 Открытое обучение
Подробнее |
«Таганский» м.Таганская, м.Пролетарская или м.Крестьянская застава |
Павлов Юрий Евгеньевич |
|||||
|
25.08.2020 — 28.08.2020 |
ежедневно утро-день 10:00 — 17:10 Открытое обучение
Подробнее |
«Стилобат» м.Бауманская |
Павлов Юрий Евгеньевич |
|||||
www.specialist.ru
курсы, обучение, как стать высококлассным специалистом
От автора: привет, друзья! Сегодня, в эпоху интернета, хочу рассказать вам про основы проектирования интерфейсов. «Фу, что за скучная тема, кому это может понадобиться?», — подумаете вы. Поэтому сразу попытаюсь обосновать свой выбор. Практически каждый пользователь Всемирной сети, попадая на любой интернет-ресурс, первым делом обращает внимание на комфорт и удобство пребывания на сайте. Не знаю конечно, как вы, но я безумно придирчив к навигации, и в случае если за пару-тройку секунд не вижу в поле зрения необходимые функции, то без капли сомнения покидаю этот сайт и перехожу к следующему. Именно поэтому, если вы имеете собственный интернет-проект, рекомендую особое внимание уделить проектированию интерфейсов. Это поможет вам сохранить существующих клиентов и не потерять потенциальных.
Что такое интерфейс, и зачем он нужен?
Когда речь идет об основах проектирования интерфейсов, в первую очередь, упоминается термин HCI, что в переводе с английского языка означает «взаимодействие пользователя (человека) и компьютера». Пользовательский интерфейс — это коммуникативный канал, по которому происходит взаимодействие человека и компьютера.
Чтобы разработать эффективный интерфейс, благодаря которому работа с программой будет приятной и простой, необходимо четко понимать, для каких задач будет использоваться данная разработка, и что конкретно хотелось бы видеть ее пользователям.
Сделать такую работу будет гораздо проще, если программа создается для ваших собственных нужд, ведь в таком случае вы будете не только ее разработчиком, но и юзером. Немаловажную роль тут играет интуиция — когда проектировщик сам ненавидит неудобные и некрасивые интерфейсы, то, создавая собственную программу, он будет чувствовать, какой элемент будет лишний, а какого будет недоставать.
Если обобщить труды западных исследователей и разработчиков HCI, то можно выделить три основных правила проектирования интерфейсов:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнеепрограмма обязана помогать в решении задачи, а не становиться ей;
в процессе работы с программой юзер не должен чувствовать себя глупым;
программа должна функционировать так, чтобы юзер не считал компьютер глупым.
Законы проектирования интерфейсов
Разработка интерфейсов в процессе проектирования больших сайтов — это один из самых важных и объемных этапов. Поэтому я хочу отдельно рассказать вам про законы и принципы разработки интерфейсов.
Простота. Пользователю должно быть понятно и просто пользоваться продуктом, каждая задача должна решаться как можно меньшим числом кликов. Избегайте сложных действий, заставляющих юзеров думать;
ничего лишнего. Не зацикливайтесь на очевидных элементах интерфейса, необходимо сосредоточить все внимание на действительно нужных вещах.
соответствие сигнал / шум. В любом HCI есть сигналы (важные элементы) и шумы (бессмысленные маловажные элементы). Конечно же, концентрироваться необходимо на сигналах, а шума — избегать;
не модно — не значит неудобно. Отдавайте предпочтение проверенным годами элементам управления, не цепляйтесь за моду, только потому, что так делают остальные;
привычные элементы управления. Используйте привычные для пользователей визуальные образы и элементы управления;
краткость — сестра таланта. Зарубите себе на носу, большинство людей не любит читать гигантские массивы текста, они их всего лишь просматривают;
умное заимствование. Этот принцип гласит: «Не изобретайте велосипед для стандартных вещей»;
принцип группировки. Разбивайте информацию на странице на логические группы, чтобы юзер мог быстро сориентироваться в программе;
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнеекошелек Миллера. Каждый функциональный блок не должен включать в себя более 5–7 элементов, ведь кратковременная память пользователя не сможет удержать в себе больше информации;
интуитивная понятность;
однородность. Очень часто в больших проектах можно встретить однородный функционал (например, комментарии), расположенный в разных частях сайта, он не должен отличаться. Такое правило применимо и к стилю;
все необходимое на виду. Все самые полезные и важные элементы HCI должны располагаться на виду и быть выделены соответствующим образом;
правило 3-х кликов. Переход из раздела в раздел должен происходить не более чем 3 кликами. Этот же принцип относится к главной странице: пользователь должен иметь возможность получить всю важную информацию, сделав максимум 3 клика;
принцип мостовых перил. Пользователи должны быть защищены от случайных действий;
принцип единства. Элементы управления и настройки необходимо располагать в одном месте, а не прятать в разные разделы;
тренды. Старайтесь учитывать современные тенденции, чтобы ваш проект не устарел еще на этапе разработки, однако, подходите к этому вдумчиво, ведь не все новое всегда лучше и практичней.
Как стать проектировщиком интерфейсов?
В западных странах HCI — это востребованная профессия, которой обучают в университетах. В России, увы, она пока не обрела такую популярность, поэтому обучение проектированию интерфейсов можно пройти либо на дому с помощью видеоуроков, либо на курсах.
Заинтересовались профессией, но у вас нет денег на посещение курсов по проектированию интерфейсов? Не расстраивайтесь и не опускайте руки! Вот вам небольшой перечень базовых навыков, которыми нужно овладеть (старайтесь осваивать их именно в предложенной мной последовательности):
английский язык. Изучите язык хотя бы до минимального школьного уровня, от которого будете отталкиваться. Он просто необходим вам для понимания языков программирования, разметки и интерфейсов программ;
верстка. Посмотрите видеоуроки по верстке, чтобы разобраться с основами языка гипертекстовой разметки. Также это позволит увидеть все технические сложности, которые приходится одолевать, верстая чужие макеты;
веб-дизайн. Ознакомьтесь с типографикой, композицией и цветами. Постарайтесь овладеть основным инструментарием веб-дизайнеров;
программирование. Изучите основы программирования: принципы объектно-ориентированного программирования, базовый синтез, массивы, циклы и матрицы. Научитесь работать с базами данных и разберитесь в ключевых особенностях разных языков программирования;
СЕО-оптимизация. Любому специалисту, работающему во Всемирной паутине, просто необходимо разбираться в поисковых системах и понимать, как они работают; знать, что такое мета-данные и прочие СЕО-понятия;
основы бизнеса. Ознакомьтесь с такими понятиями, как предложение и спрос, реклама и рынок сбыта. Изучите все законодательство, связанное с платежными гейтами, банками и коммерческой деятельностью.
Может показаться, что большинство из этих навыков вам никогда не пригодятся. Но я настоятельно советую, не ленитесь и никогда не останавливайтесь на достигнутом. Чтобы стать высококлассным специалистом, нужно постоянно развиваться, читать специализированную литературу (Норман Д. «Дизайн привычных вещей», Алан Купер «Об интерфейсе. Основы проектирования взаимодействия», Тидвелл Дж. «Разработка пользовательских интерфейсов») и повышать свою квалификацию. Любая компания с большим удовольствием примет на работу специалиста, идущего нога в ногу с прогрессом.
Друзья, если вам была полезна моя статья — подписывайтесь и делитесь с товарищами! Не жадничайте До новых встреч на страницах этого блога!
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееХотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотретьwebformyself.com
Мои правила дизайна хорошего интерфейса / Habr
В этой статье я привожу примеры основных принципов или концепций, которыми руководствуюсь при проектировании десктопных интерфейсов. Не планирую выступать новатором или поучителем, но с радостью поделюсь набором установок, который помогает мне в работе.
Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken
Акценты и приоритеты
Каждый раз, проектируя интерфейс я задаю себе или клиенту вопрос: “Какая информация сейчас важна для конечного пользователя? Как мы распределим его внимание в конкретном случае?” Для этого в нашем вооружении есть цвет и его оттенки, размер шрифта, его интенсивность. В совокупности, правильно используя эти инструменты, мы “оставляем послание” пользователю, ведём его по нужному нам пути, концентрируя его внимание на самом важном.
Хороший пример, когда дизайнер дал пользователю понимание, что важно видеть отправителя, затем тему, а уже потом содержание или его @ник в системе:
Плохой пример, где дизайнер “утверждает”: важнее всего — аватарки, а с остальным как-нибудь разберётесь:
Отступы и их пропорциональность
Современный дизайн лёгок, прост и “насыщен воздухом”. Он наполнен дыханием. И не самую последнюю роль в формировании этих ощущений играют отступы. Значительные отступы помогают упростить подачу материала. Но они должны быть подчинены некоторой закономерности и пропорциональности. Я определяю для себя N пикселей в качестве базисного отступа, когда начинаю новый проект. Затем я использую 2N, 3N и так далее пропорциональность для создания визуального баланса, если где-то требуется бОльший отступ.
Хороший пример, когда дизайнер более менее соблюдает пропорциональность отступов:
Плохой пример, когда отступы практически базируются на генераторе случайных чисел:
Текст кнопки всегда первичнее иконки
Не забывайте, что именно текст является определяющим фактором того, какое ожидание или реакция предварительно сформируется у пользователя при виде кнопки. И лишь изображение иконки вторичным образом дополняет смысл. Изображение колокольчика с надписью “notifications” даёт нам некоторое представление о назначении этого функциона до того, как мы сделали клик. Аналогичный колокольчик без подписи в другом приложении приведёт нас к будильнику, хотя мы скорее всего будем ожидать появление экрана с уведомлениями. Я советую всегда наделять надпись бОльшим “весом” нежели иконки. Их я вообще считаю надувательством. Многие современные интерфейсы вполне способны обходиться и без них. Просто это было бы слишком скучно!
В целом хорошо:
Но можно сделать лучше:
Тоже выглядит неплохо:
И тут есть, где улучшить:
Не пытайтесь быть слишком понятными
Не все проектируемые интерфейсы обязаны быть интуитивно понятными. Существует множество сложных систем, с которыми мы обучались (!) взаимодействовать какое-то время. Возможно сейчас они кажутся нам простыми, но мы не отдаём отчёт, что были исследователями-первооткрывателями первые минуты, часы или более. И коль мы продолжаем работу внутри некоторой изначально сложной системы, видимо ничего не препятствовало нашему пути первых исследований. Скорее всего, дизайнер сделал свою работу настолько хорошо, что мы без труда освоили новую среду. Яркий пример из жизни: попытайтесь на миг представить, что вы не знаете значение математического знака “равно”. Согласитесь, эти две чёрточки — одна над другой, они совсем не кажутся интуитивно понятными. Просто когда-то в школе учитель математики обучил нас этому. Я призываю не пытаться быть понятнее, чем это требуется на минимально необходимом уровне.
В этом примере дизайнер был чрезмерно понятен с кнопкой закрытия:
А в этом примере дизайнер оказался чрезмерно понятен с возможностью добавления:
Перемещение курсора забирает силы
Мы не должны обязывать пользователя тянуться в другую часть экрана, чтобы получить расширенный функционал. Если пользователь работает со списком, то кнопка создания нового элемента должна быть поблизости. Или если мы порождаем новый попап кликом по кнопке слева внизу, то абсурдно заставлять пользователя тянуть курсор по диагонали направо вверх, чтобы окно закрыть.
Хороший пример, когда дизайнер предлагает закрыть попап в той же области, которая вызвала его порождение:
Плохой пример, когда дизайнер отдаляет функционал добавления элемента в список от самого списка:
Взаимосвязи расположений или единая плоскость
Это очередной приём балансировки интерфейса. Подобие сетки, если хотите. Например, вы используете трёхколонник. Находятся ли его заголовки в одной плоскости по оси X? Или расположение иконок с кнопками. Можно ли провести мнимую ось Y и обнаружить, что и те и другие аккуратно прилегают к ней? Если ответы утвердительны, дела идут хорошо. Это обусловлено тем, что зрительно человеку легче воспринимать табличный вид из-за структурированности данных. И мы при разработке интерфейса должны располагать элементы с некоторой табличной логикой.
Плохой пример с несостыковками:
Хороший пример с гармонией и соответствием:
Цвет имеет смысл
Избитое напоследок. Красное — тревога, зелёный — всё хорошо. Испокон веков для человека самое лучше восприятие текстовой информации, это чёрным по белому. Если вы используете много цветов без аргументации, вы создаёте хаос. Если вы окрашиваете элементы по смыслу, вы создаёте еще больше порядка.
Пример хаоса: (172 votes зеленым означает ли позитивное состояние? если, да то 280 visitors оранжевым — означает негативное по логике? отнюдь! дизайнер цветом лишь разделил цифры между собой)
Пример создания порядка и обоснование цвета (я просто добавил графики поверх чужого творчества)
Хороший пример незлоупотребления цветами:
В качестве эпилога….
Выражаю благодарность членам сообщества dribbble, за неформальное согласие предоставить свои работы для данного обзора. Хочу напомнить, что вышеизложенные принципы в дизайне интерфейса являются основными для меня. Я всегда держу их в уме при проектировании интерфейсов. Определитесь на чьей вы стороне… Вы хотите создавать интерфейсы для дизайнеров и работать на лайки (пример — 98% работ с behance) или вы стремитесь решать проблемы пользователя (dribbble)? Кстати, по-моему отличный пример того, как закрытость сообщества позволяет сохранять фокусировку на главном предназначении интерфейсов!
habr.com
Leave a Comment