8 800 500 30 94
9:00-19:00 по МСК
9:00-19:00 по МСК
* Нажимая на кнопку, вы даете согласие на обработку своих персональных данных и получение sms-, email-сообщений и сообщений в# мессенджерах от Среды обучения
дизайн / 27 НОября
Как получить первый заказ:
7 проектов для портфолио UX/UI-дизайнера
7 проектов для портфолио UX/UI-дизайнера
Ситуация: вы начинающий UX/UI-дизайнер. Навыки есть, гайдлайны изучены, уверенность на месте, а вот заказов и офферов пока не предвидится. Решение: собрать портфолио из проектов для вымышленных компаний — пускай у вас не будет настоящего опыта, но работодатель уже сможет оценить ваши способности.
UX/UI-дизайнер IBM (ex-«Сбербанк», UIDG), а также лидер направления «Дизайн цифровых продуктов» в Среде обучения Алексей Комаров рекомендует заполнить портфолио на старте определенными проектами — дизайн-концептами новостных сайтов и интернет-магазинов, банковских приложений, стриминговых платформ, служб такси или каршеринга, а также сервисов по доставке еды и планированию путешествий.
Алексей рассказал, на какие приложения и сайты стоит ориентироваться при создании дизайна в разных категориях и какие ошибки важно не допустить. Для наглядности каждая идея сопровождена удачным и неудачным примером с Dribbble.
Алексей рассказал, на какие приложения и сайты стоит ориентироваться при создании дизайна в разных категориях и какие ошибки важно не допустить. Для наглядности каждая идея сопровождена удачным и неудачным примером с Dribbble.
1. Банковское приложение
Согласно отчету Национального агентства финансовых исследований, все больше россиян предпочитают удаленные каналы взаимодействия с банком: приложение или онлайн-кабинет на сайте. Статистика говорит, что каждый второй житель страны переводит деньги и оплачивает счета с помощью смартфона. Кроме того, в России зарегистрировано более 400 действующих банков — и каждому нужно удобное и понятное приложение. А значит, и дизайнеры, которые будут их проектировать.
На какие приложения можно ориентироваться
- Тинькофф
- Райффайзенбанк
- Сбербанк
- Альфа-Банк
- Банк Хоум Креди
Что может пойти не так
Рассмотрим пример неудачного дизайна с Dribbble.
В целом смысл банковского приложения передан, но есть слабые стороны:
- много акцентов, непонятно, куда обращать внимание, интерфейс «кричит»;
- слипшиеся строки в разделе с историей платежей (второй экран);
- многослойность и искусственное усложнение интерфейса из-за «пирамидки» из подложки у текста и стрелки у вариантов платежей и переводов;
- непонятно, как работает нижнее меню — какой раздел сейчас активен, что произойдет, если нажать на крестик посередине
Пример удачного дизайн-проекта
У этого концепта тоже есть слабые места вроде светлого цвета иконки фильтрации на главном экране, но в целом все отлично:
- нет лишних элементов;
- много «воздуха» — объекты не прилипают друг к другу;
- объекты контрастируют на фоне
2. Приложение: стриминговый сервис
Стриминговые платформы превратились из удобных сервисов для прослушивания музыки в базовую данность — почти у каждого из нас есть подписка на Apple Music, Spotify или что-то подобное. Кроме того, развиваются и видеостриминговые сервисы с доступом к базе фильмов и сериалов за небольшую ежемесячную плату.
На какие приложения можно ориентироваться
Аудио
- Яндекс.Музыка
- Apple Music
- Spotify
- YouTube Music
Видео
- IVI
- Okko
- Netflix
- Apple TV+
Аудио
- Яндекс.Музыка
- Apple Music
- Spotify
- YouTube Music
- IVI
- Okko
- Netflix
- Apple TV+
Что может пойти не так
Взгляните на еще один пример из Dribbble.
Это дизайн в модном стиле неоморфизм, и в нем есть свои слабые места:
- нет контраста между большинством объектов и фоном;
- искусственное усложнение интерфейса из-за использования теней почти у каждого объекта;
- кроме того, отсутствуют важные элементы навигации — «Меню» и кнопка «Назад», без которых непонятно, как передвигаться по приложени
Пример удачного дизайн-проекта
Вот преимущества такого интерфейса:
- понятная навигация;
- правильно расставленные акценты;
- лаконичная подача без лишнего усложнения;
- контраст заднего фона и объектов на нем
3. Приложение для планирования путешествий
Во-первых, мы путешествуем все чаще (если не брать в расчет внезапно возникшие пандемийные ограничения) — например, в 2019 году в мире было зарегистрировано 1,5 миллиарда международных поездок. Во-вторых, мы все меньше полагаемся на турфирмы при планировании путешествий и прибегаем к специальным сервисам — об их популярности говорит и тот факт, что с трэвел-сегментом работают даже такие масштабные игроки как «Яндекс» и «Тинькофф».
На какие приложения можно ориентироваться
- Utair
- S7 Airlines
- Aviasales
- OneTwoTrip
- Airbnb
- Booking
- Utair
- S7 Airlines
- Aviasales
- OneTwoTrip
- Airbnb
- Booking
Что может пойти не так
Ряд ошибок может спровоцировать выбор темной темы при проектировании.
У этого примера есть следующие проблемы:
- нет контраста между фоном и кнопками на первом экране;
- запутанная навигация — видно, что показан процесс, но как переходить к разным его этапам, непонятно;
- на втором экране слишком много текстовой информации мелким шрифтом, скученной в верхней левой части экрана;
- на последнем экране неправильно показан план рассадки — в самолете между креслами есть место для прохода (тут оно не отражено)
Пример удачного дизайн-проекта
А вот тут дизайнеру удалось обойти почти все неочевидные сложности.
Это все еще не идеальный, но уже приемлемый вариант со следующими плюсами:
- сегментация информации по смыслу;
- показан только важный контент;
- обозначение занятых и свободных мест понятно без легенды;
- места отображаются с учетом особенностей салона самолета;
- есть подсказки по навигации.
4. Приложение: такси или каршеринг
Для многих людей периодические поездки на такси обойдутся дешевле покупки и содержания личного автомобиля, а каршеринг, который только начинает распространяться из столиц в регионы, — поможет сэкономить еще больше. И если сейчас таких транспортных сервисов, работающих в федеральном масштабе, немного, то скоро будет больше, а значит, и рабочие места для дизайнеров тоже появятся.
На какие приложения можно ориентироваться
Такси
- Яндекс.Такси (Яндекс.Go)
- Uber
- Ситимобил
- Везёт
- Максим
- Gett
Каршеринг
- Делимобиль
- Яндекс.Драйв (Яндекс.Go)
- BelkaCar
Такси
- Яндекс.Такси (Яндекс.Go)
- Uber
- Ситимобил
- Везёт
- Максим
- Gett
- Делимобиль
- Яндекс.Драйв (Яндекс.Go)
- BelkaCar
Что может пойти не так
Взглянем на пример. Что-то смущает?
Как работает приложение, понятно, но вот что вы, вероятно заметили:
- панель выбора тарифа почему-то сверху в виде табов — непонятно, почему они всегда доступны, что будет при введении нового тарифа и почему для бронзового, золотого и платинового тарифа выбраны именно эти цвета;
- на темной карте неудобно ориентироваться;
- непонятно, почему кнопки «Заказать сейчас» и «Заказать позже» сделаны в виде слайдера;
- у чисел статистики водителя одинаковые подписи — так быть не должно даже в концепте;
- дублируется информация о пяти минутах ожидания — большой зеленой строкой и серой поменьше сверху (возможно, это метры, но пять метров за пять минут это странно)
Пример удачного дизайн-проекта
Не суперпрофессиональный вариант, но уже гораздо лучше.
Вот что можно отметить:
- есть рекомендации с частыми и недавними адресами поездок;
- есть наглядное описание различий тарифов;
- понятный процесс заказа;
- показан способ оплаты
5. Приложение сервиса доставки еды
CEO «СберМаркета» Асан Курмангужин в интервью РБК заявил, что рынок доставки продуктов питания — один из самых быстрорастущих в России. Возможно, это последствия пандемии, но вряд ли эти сервисы куда-то уйдут — скорее, наоборот, а значит и дизайнеров в этой сфере понадобится больше.
На какие приложения можно ориентироваться
- Delivery Club
- Яндекс.Еда
- СберМаркет
- Утконос
- Самокат
- iGoods
- Delivery Club
- Яндекс.Еда
- СберМаркет
- Утконос
- Самокат
- iGoods
Что может пойти не так
И снова на примерах.
У этого концепта есть проблемы:
- неудачный выбор цвета фона — красная иконка удаления смотрится странно;
- контролы управления количеством (+ и -) расположены слишком близко — будет сложно попасть пальцем;
- информация об итоговой сумме заказа написана слишком мелким шрифтом;
- на втором экране нет возможности добавить новую карту;
- строки у добавленных карт с информацией о счете и типе карты слиплись и не читаются на фоне подложки
Пример удачного дизайн-проекта
Сильные стороны концепта:
- чистый интерфейс с хорошей контрастностью между объектами;
- правильные акценты;
- размер кнопок и иконок подобран с учетом минимальной области нажатия пальцем
6. Новостной сайт
Если вы хотите прокачаться в веб-направлении, можно начать с новостного портала или сайта интернет-магазина. Суть работы дизайнера, на мой взгляд, сводится к обработке и оформлению контента, чтобы пользователю было удобно и он мог быстро принимать решения. Работа с новостями и товарами тут отлично подходит.
Начнем с новостей. Вне зависимости от тематики такие сайты всегда включают огромное количество контента, что несколько усложняет задачу дизайнера — здесь особенно важно подумать о навигации и удобстве подачи информации.
Начнем с новостей. Вне зависимости от тематики такие сайты всегда включают огромное количество контента, что несколько усложняет задачу дизайнера — здесь особенно важно подумать о навигации и удобстве подачи информации.
На какие сайты можно ориентироваться
Агрегаторы новостей
- Новости Mail.ru
- Яндекс.Новости
- Рамблер / Новости
Информационные агентства
- РИА Новости
- ТАСС
- Интерфакс
Интернет-издания
- РБК
- Lenta
- Ведомости
Агрегаторы новостей
- Новости Mail.ru
- Яндекс.Новости
- Рамблер / Новости
- РИА Новости
- ТАСС
- Интерфакс
- РБК
- Lenta
- Ведомости
Что может пойти не так
Изучим пример.
Этот сайт креативный, он бы выиграл какой-нибудь конкурс. Но он неудобный:
- чтобы прочитать первый текст слева, придется крутить головой;
- если одно слово набрано заглавными буквами, то его еще можно быстро прочитать, но когда так набрано несколько строк — уже сложнее. Это происходит, потому что у букв есть выносные элементы, например, у букв «б» и «у» есть хвостики, которые торчат над или под строкой, а у буквы «о» — таких элементов нет. Наш глаз привыкает к очертанию букв и быстрее считывает слова, но это не работает, если текст написан капсом;
- красный фон у второго блока конфликтует с красными буквами у последнего — непонятно, на что обращать внимание в первую очередь. Вроде красный фон больше по площади, но текста там меньше, а красные слова на белом фоне написаны большими буквами и имеют большой размер — выглядит как приоритетная информация;
- выравнивание текста по правому краю в третьем блоке тоже необоснованно. Считается, что текст лучше вообще никогда не выравнивать по правому краю, так как строки будут начинаться в разных местах. Исключение — для цифр в таблице, которые удобнее сравнивать по разрядам, когда они выровнены справа;
- странная навигация в шапке, которую можно спутать с декоративным элементом
Пример удачного дизайн-проекта
На этом примере не все идеально, но уже неплохо.
Почему это удачный дизайн:
- акценты задаются иллюстрациями, цвет используется только для отображения статуса;
- контент разбит и сгруппирован по приоритетности;
- навигация выглядит проще, чем в предыдущем примере;
- задний фон не оттягивает на себя внимание
7. Интернет-магазин
50 миллисекунд требуется пользователю, чтобы составить мнение об интернет-магазине — такие результаты были получены в ходе исследований, еще в 2006 году опубликованных в журнале Behaviour and Information Technology. С тех пор многое изменилось, количество интернет-магазинов выросло, а время на принятие решений, возможно, даже сократилось.
И да — интернет-магазины существуют в виде приложений, но количество продаж в них уступает тому, что дают сайты. Это обусловлено тем, что людям проще выбирать товары, разом изучая много информации на одном экране, сравнивая варианты, рассматривая фото в большом размере.
И да — интернет-магазины существуют в виде приложений, но количество продаж в них уступает тому, что дают сайты. Это обусловлено тем, что людям проще выбирать товары, разом изучая много информации на одном экране, сравнивая варианты, рассматривая фото в большом размере.
На какие приложения можно ориентироваться
- Wildberries
- Ситилинк
- Ozon
- М.Видео
- DNS
- Wildberries
- Ситилинк
- Ozon
- М.Видео
- DNS
Что может пойти не так
Можно сделать привлекательный дизайн, но допустить неочевидные ошибки, из-за которых пользователю будет неудобно совершать покупки. Присмотритесь.
Вот какие проблемы у дизайна выше:
- искусственное усложнение за счет обилия линий и черных рамок, в которые заключены объекты;
- названия товаров написаны капсом, что затрудняет считывание информации;
- настройка фильтров спрятана в углу, и сама иконка не похожа на значок фильтрации, что усложняет взаимодействие с интерфейсом.
Пример удачного дизайн-проекта
А тут исправлены предыдущие ошибки:
- никакого капса, информация воспринимается легче;
- фильтры в привычном месте;
- сохраняется общая лаконичность.
Есть и другой вариант — начать собирать портфолио под руководством дизайнеров во время обучения. Программы Факультета дизайна по направлению «Дизайн цифровых продуктов» рассчитаны на постоянную практику — почти на каждом курсе вы будете решать ту или иную задачу, которая может возникнуть в работе. Стать UX/UI-дизайнером сайтов и приложений с опытом, портфолио и дипломом можно на двухлетней программе.
ПОЛЕЗНЫЕ МАТЕРИАЛЫ
Click to order
ВАШ ЗАКАЗ:
Total:
Отправляя свои контактные данные, вы соглашаетесь на обработку персональных данных и получение email-сообщений от Высшей школы «Среда обучения». Обратите внимание, что, если ваш счёт открыт в отличной от рубля валюте, то платёж будет конвертирован в рубли. Конвертацию в этом случае проводит либо ваш банк, либо система оплаты.
Правила и условия проведения Акции для абитуриентов Факультета дизайна Высшей школы «Среда обучения»
1) Акция проводится в период с 1 по 15 октября 2021 года.
2) В рамках Акции новый абитуриент (см. п.8 правил) имеет возможность получить один из восьми промокодов, соответствующих определенному подарку, выпадающих в «Колесе фортуны» на домене https://design.sredaobuchenia.ru/
3) У абитуриента есть две попытки выиграть разный промокод и он может воспользоваться или не воспользоваться второй попыткой по своему желанию.
4) Полученный промокод дает возможность новым абитуриентам, оставившим заявки на сайте https://design.sredaobuchenia.ru/ (и его поддоменах) непосредственно в период проведения акции и заполнившим при первом оставлении заявки поле «Промокод», получить соответствующий подарок или преимущество при условии поступления и оплаты до 15 октября 2021 года одной из перечисленных программ Дополнительного профессионального образования:
6) Условия и действие промокода может суммироваться с другими акциями, действующими в период их проведения.
7) Промокоды, позволяющие получить преимущество в виде скидки на обучение, предоставляют абитуриенту возможность получить скидку на первую оплату за обучение после оформления соответствующей возможности специалистом Приемной комиссии.
8) Участвовать в Акции не могут действующие студенты, абитуриенты, оставившие заявку до начала действия акции, абитуриенты, не заполнившие поле «Промокод» действующим промокодом, а также абитуриенты, поступающие на программы и курсы, не указанные в п.4 данных правил.
9) Условия применения промокодов и действия Акции, не указанные в данных правилах, подлежат уточнению и согласованию со специалистами Приемной комиссии.
2) В рамках Акции новый абитуриент (см. п.8 правил) имеет возможность получить один из восьми промокодов, соответствующих определенному подарку, выпадающих в «Колесе фортуны» на домене https://design.sredaobuchenia.ru/
3) У абитуриента есть две попытки выиграть разный промокод и он может воспользоваться или не воспользоваться второй попыткой по своему желанию.
4) Полученный промокод дает возможность новым абитуриентам, оставившим заявки на сайте https://design.sredaobuchenia.ru/ (и его поддоменах) непосредственно в период проведения акции и заполнившим при первом оставлении заявки поле «Промокод», получить соответствующий подарок или преимущество при условии поступления и оплаты до 15 октября 2021 года одной из перечисленных программ Дополнительного профессионального образования:
- Коммуникационный дизайн
- Дизайн цифровых продуктов
- Визуальное искусство
6) Условия и действие промокода может суммироваться с другими акциями, действующими в период их проведения.
7) Промокоды, позволяющие получить преимущество в виде скидки на обучение, предоставляют абитуриенту возможность получить скидку на первую оплату за обучение после оформления соответствующей возможности специалистом Приемной комиссии.
8) Участвовать в Акции не могут действующие студенты, абитуриенты, оставившие заявку до начала действия акции, абитуриенты, не заполнившие поле «Промокод» действующим промокодом, а также абитуриенты, поступающие на программы и курсы, не указанные в п.4 данных правил.
9) Условия применения промокодов и действия Акции, не указанные в данных правилах, подлежат уточнению и согласованию со специалистами Приемной комиссии.
© 1990 — 2022 Высшая школа «Среда обучения».
109028, г. Москва, Подсосенский переулок, 26, стр. 1.
109028, г. Москва, Подсосенский переулок, 26, стр. 1.
Используя наш сайт вы даете согласие на обработку файлов cookies и пользовательских данных.
ОК, понятно