Ui-дизайнер

Содержание:

Разработайте собственный алгоритм подхода к дизайну

Сформируйте простой порядок действий для разработки UI-дизайна вашего приложения. Вот некоторые рекомендованные шаги:

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

Диаграмма пользовательских маршрутов

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

Как пользователи могут попасть в нужный им раздел? Можно ли на диаграмме потоков визуализировать все возможные маршруты пользователей по приложению?

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

Для удобства можно использовать различные готовые инструментарии, например, шаблоны блок-схем Miro, Milanote и Whimsical. Можно легко формировать маршруты с помощью трёх стандартных фигур:

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

Здесь проиллюстрирована диаграмма маршрутов пользователя на этапе предварительного дизайна. Исследовать другие распространённые маршруты и фильтровать широкий спектр скриншотов из iOS, Android и веб-приложений можно на Page Flows.

Изучение дизайнерских шаблонов и стилей

Планирование облегчает реализацию, поэтому всегда делите задачи на более мелкие части.

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

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

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

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

Вот ещё несколько отличных ресурсов:

UX Screenshots,
Laudable Apps,
Mobbin Design,
Pttrns,
Mobile Patterns.

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

Создание каркасов

На этом этапе уже можно переходить к творчеству

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

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

Обратите внимание на SneakPeekIt. В нём есть большое количество шаблонов, которые можно распечатать и использовать в своих эскизах

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

Также обязательно ознакомьтесь с Balsamiq, Whimsical и OmniGraffle. Эти компоненты предварительной сборки помогут в работе со структурой вашего приложения.

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

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

Создание макетов приложения

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

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

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

Как определить функционал MVP и влюбить клиента в пилотную версию продукта

Из песочницы

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

Эта статья не претендует на то, чтобы быть истиной в последней инстанции

Она не про важность и необходимость MVP. И не про его роль в бережливом запуске стартапов

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

Начну с вирусной зарисовки пути развития стартапа по принципу MVP, которая гуляет по интернету и которую вы наверняка встречали.

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

Сколько получают дизайнеры интерфейсов?

Зарплата дизайнера интерфейса зависит от опыта и уровня проектов, которые он может вести. Если брать уровень доходов в крупных компаниях, работающих над международными проектами, то в них зарплата дизайнера интерфейса может доходить до 150-200 тыс. рублей в месяц, а зарплата руководителя отдела – до 200-300 тыс. рублей в месяц.

При этом зарплата не определяется стажем. Она зависит от знаний и навыков специалиста. За 2-3 года можно пройти путь, который позволит работать дизайнером пользовательских интерфейсов в крупной компании. Главное для этого – попасть в команды, которые занимаются крупными проектами, хотя бы на стажировку. Также пригодится знание английского языка.

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

Интерфейсы для тех, кто еще не читает. Принципы проектирования детского UX-UI

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

Основной стиль — ясный, яркий и современный

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

Наложение текста непосредственно на фото

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

Otter Surfborads. Выглядит инстаграммно и по-хипстерски. Но текст читается трудновато

В данном способе есть множество рисков и проблем:

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

Понятно? Хорошо! Отныне никогда не меняйте фото и текст, и все будет отлично.

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

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

Устройтесь на стажировку

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

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

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

На стажировках часто просят сделать тестовое задание. Но вы уже с этим знакомы, поэтому тестовое задание — еще один проект в портфолио!

RecyclerView.ItemDecoration: используем по максимуму

Привет, дорогой читатель Хабра. Меня зовут Олег Жило, последние 4 года я Android-разработчик в Surf. За это время я поучаствовал в разного рода крутых проектах, но и с легаси-кодом поработать довелось.
У этих проектов есть как минимум одна общая деталь: везде есть список с элементами. Например, список контактов телефонной книги или список настроек вашего профиля.
В наших проектах для списков используется RecyclerView. Я не буду рассказывать, как писать Adapter для RecyclerView или как правильно обновлять данные в списке

В своей статье расскажу о другом важном и часто игнорируемом компоненте — RecyclerView.ItemDecoration, покажу как его применить при вёрстке списка и на что он способен

E-learning на костылях. Исправляем курсы из Articulate Rise

Из песочницы

Рынок насыщен разными программами для разработки электронных курсов — авторскими средствами (authoring tools). Есть продукты на любой вкус: хочешь прогу, чтобы просто конвертировать электронные презентации в HTML5? Да пожалуйста! Хочешь делать одностраничники в редакторе вроде Тильды? Держи! Хочешь создать игрушку в стиле Interactive Fiction? Да кто же тебе запретит, родной? Любой каприз, как говориться.
Каждое авторское средство склоняет на свою сторону простотой использования. Разработчик без какого-либо технического бекграунда может особо не напрягаясь склеить электронный курс и опубликовать его в LMS.
Но всё ли так гладко на самом деле? Что делать, когда кажущаяся простота разворачивается и стреляет вам в колено?
Давайте препарируем несколько популярных инструментов и посмотрим, какие неприятные сюрпризы поджидают наивных Instructional Designer-ов. Сеанс чёрной магии с последующим её разоблачением, так сказать.
Эта статья посвящается Articulate Rise.

Мои размышления про экранную клавиатуру для Flipper Zero под экранчик 128х64 пикселя

Недавно я увидел пост с приглашением разработчиков в проект Flipper Zero и подал заявку. Меня добавили в репозиторий с прошивкой и я стал много думать над юзабилити устройства. Приснилось, что мне надо отсканировать кучу ключей-брелков от разных подъездов. Во сне были разные люди, квартиры, дождь, и почему-то мне дали целую горсть этих желтых кругляшей, отличающихся друг от друга только количеством грязи на них. И естественно, чтобы как-то совладать с этим беспорядком, я решил внести все эти ключи во Flipper Zero.
Прямо во сне, я заносил новые идентификаторы и все они добавлялись в менюшку как «Ключ», что делало действо еще бессмысленней. Получился большой список, состоящий только из слова «Ключ». Подумалось, что надо переписать прошивку. И тут как раз преимущество сна — все задуманное сбывается одномоментно. Ключи стали добавляться с рандомным суффиксом как «Ключ 74», а следом за ним мог добавиться «Ключ 22». Номер именно рандомный, не путать с контрольными суммами или хешами. В принципе, если есть хорошая память, то можно запомнить, что «Ключ 22» от Ленина 54, а «Ключ 74» от Пушкина 29. Подумалось, что неплохо бы как-то редактировать номера, прямо на Флиппере, прямо в списке ключей: у нас же свободны кнопки влево-вправо, пусть они инкрементируют/декрементируют номер! А длинное удержание вызовет вызов полноценной клавиатуры! Но стоп, какую клавиатуру рисовать? Стандартную Qwerty с переключением на Йцукен? Русифицированную Яверты? У нас же экран всего 128х64 пикселя, к тому же в него надо как-то запихнуть еще вывод набираемого! Как все это уместить? Неужели вводить текст Азбукой Морзе?

Где учиться на дизайнера интерфейсов?

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

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

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

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

Интерфейсы для тех, кто еще не читает. Принципы проектирования детского UX-UI

Основной стиль — ясный, яркий и современный

Малиновый киноцентр или как сделать неубиваемый смарт-ТВ

Самая полная инструкция по созданию из Raspberry Pi домашнего киноцентра с минимальными затратами и подробной настройкой приложений.

Знаю, что скажут 90% читателей: «Зачем тебе магнитофон? Смарт-ТВ купи и счастье». Я отвечу. Проблема в том, что ещё в 90-ых был куплен шикарный телевизор с 5.1 звуком и Full-HD монитором, правда не стандартного разрешения (не 4:3 и не 16:9). Менять телевизор и попадать минимум на 40 тысяч из-за дивидюшника за 3 тысячи — как-то не разумно. В планах сделать экран с проектором и звуком, но вот покупать смарт-ТВ, который не поковыряешь — для меня слишком больно. Купил Sony — мучайся с их смартом и так с любой фирмой.

В моём распоряжении был старый комп-башня и куча старых деталей, который валялись по квартире и офису. Тестил всё на этом железе в разных конфигурациях: от сборки с интегрированной видюхой от интел с 1 ГБ оперативы и пентиумом на борту, до GTX 660 с 8 ГБ оперативы и i5 во главе. Разница есть, но только в загрузке файлов — то есть не критичная. Картинка в FullHD выдаётся ровно без крашей всю дорогу. Имея задумку повесить экран с проектором, делать громоздкую станцию — не вариант.

Обучение на Дизайнера интерфейсов

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

веб-дизайн;
компьютерная графика и дизайн;
информационный дизайн и другие.

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

Курсы

Школа Projector (г. Киев, форма обучения — вечерняя)

Курс состоит из 27 занятий, каждое из которых длится 2 часа. Группы состоят не более чем из 14 студентов, поэтому у учеников есть время узнать о теории и испытать полученные знания на практике. Курс будет полезен для начинающих и опытных веб-дизайнеров и программистов!

Используйте исключительно хорошие шрифты

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

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

Рекомендую исключительно бесплатные шрифты

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

Так что прямо сейчас скачайте их для вашего следующего продукта.

Ubuntu

Ubuntu имеет много начертаний. Для некоторых программ он очень специфичен, для остальных — подходит идеально. Можно всегда скачать на сервисе Google Fonts.

Open Sans

Open Sans — это популярный шрифт, очень легко читается. Отлично подходит для главного текста. Можно всегда скачать на сервисе Google Fonts.

Bebas Neue

Montserrat

Montserrat доступен лишь в двух начертаниях, однако этого вполне достаточно. Данный шрифт — это лучшая бесплатная альтернатива Proxima Nova и Gotham, но он не так хорош, как они. Можно скачать на сервисе Google Fonts.

Raleway

Raleway хорошо подходит для заголовков. Возможно, чуть чересчур для главного текста (эти «w»!). Довольно красиво выглядит начертание Ultralight (нет на изображении). Можно всегда скачать на сервисе Google Fonts.

Cabin

Cabin всегда можно скачать на Google Fonts.

Lato

Lato можно всегда скачать на сервисе Google Fonts.

PT Sans

PT Sans можно всегда скачать на сервисе Google Fonts.

Entypo Social

Принцип невидимости

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

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

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

Затем вы должны спроектировать интерфейс таким образом, который приведет пользователей к выполнению этих целей.

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

Обучение на UI-дизайнера

Вузы

Узконаправленное обучение на UI-дизайнера в рамках отечественной образовательной системы не предусмотрено. Чтобы получить азы знаний в этой области, можно либо выбрать специальность из разряда IT (например, «Прикладная информатика» с кодом 09.03.03), либо изучить графический дизайн (например, «Дизайн» с кодом 54.03.01). Во втором случае для поступления потребуются не только результаты ЕГЭ по предметам, установленным вузом, но и прохождение творческого экзамена на его базе.

Курсы

Британская Высшая Школа Дизайна

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

Лучшие вузы для UI-дизайнеров

РГУ им. А.Н. Косыгина
Московский политех
МГТУ «СТАНКИН»
СПбГУПТиД
Санкт-Петербургский политех Петра Великого
СПбГУТ

Как использовать десктоп без десктопа? Обзор Samsung DeX

Tutorial

Привет, Хабр.
Как и у многих разработчиков, периодически работающих дома, у меня есть достаточно мощный десктоп, которого без проблем хватает для разных задач. Но периодически бывают дела вроде написания этой статьи для Хабра, где большой вычислительной мощности не нужно, но при этом хочется сидеть за любимым большим монитором и клавиатурой.
Решение пришло случайно при просмотре одного из обзоров — интерфейс Samsung DeX, позволяющий использовать в десктоп-режиме собственный смартфон.
Данная статья набрана и сверстана на смартфоне. Для тех кому интересно, как это работает, продолжение под катом.

Где искать вакансии разработчикам

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

Чтобы найти высокооплачиваемую и перспективную работу, нужно:

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