This media is not supported in your browser
VIEW IN TELEGRAM
Приложение Tasty coffee.
Узнала о нем от участницы интенсива.
Самые главные минусы:
▪️ главный экран отсутствует в таб баре. Когда открываем приложение мы находимся «нигде»
▪️ в карточке товара очень мелкий шрифт, приходится вглядываться
▪️ мои попытки попасть в иконку добавления в избранное не увенчались успехом. Маленький размер кликабельной области, три иконки рядом
▪️ выбор помола с этого экрана спорный вопрос, можно сделать уже на экране самого товара, а не карточки. И открывать не выпадающий список, а bottom sheet.
Узнала о нем от участницы интенсива.
Самые главные минусы:
▪️ главный экран отсутствует в таб баре. Когда открываем приложение мы находимся «нигде»
▪️ в карточке товара очень мелкий шрифт, приходится вглядываться
▪️ мои попытки попасть в иконку добавления в избранное не увенчались успехом. Маленький размер кликабельной области, три иконки рядом
▪️ выбор помола с этого экрана спорный вопрос, можно сделать уже на экране самого товара, а не карточки. И открывать не выпадающий список, а bottom sheet.
Пара новых видео на канале. Про прототип и иконки из SF Symbols.
https://youtu.be/y0I9MaFBkC4
https://youtu.be/y0I9MaFBkC4
YouTube
Программа с огромным количеством иконок. SF Symbols.
Телеграм канал о дизайне интерфейсов https://t.me/marooot
В это видео делаю обзор программы SF Symbols.
Более 5000 иконок. Скачивается с официального сайта гайдлайнов iOS.
Важно: работает только на Mac.
Приятного просмотра!
•••
Курс для опытных https://abramova…
В это видео делаю обзор программы SF Symbols.
Более 5000 иконок. Скачивается с официального сайта гайдлайнов iOS.
Важно: работает только на Mac.
Приятного просмотра!
•••
Курс для опытных https://abramova…
Завершился еще один поток курса по дизайну приложений. С гордостью делюсь кейсами выпускников. Можно переходить на behance, изучать, вдохновляться и приходить учиться, если еще нет :) https://www.behance.net/gallery/175374735/FirstHand-Rent-Mobile-App-Design
Behance
FirstHand — Rent Mobile App Design
Короткий, емкий и отвечающий на самый популярный вопрос видос: какой размер экрана выбирать под дизайн приложения. Велком к просмотру
https://youtu.be/Bh9IxVRNN0E
https://youtu.be/Bh9IxVRNN0E
YouTube
Под какой размер устройства делать дизайн мобильного приложения?
Телеграм канал о дизайне интерфейсов https://t.me/marooot
Всем привет!
Короткое и емкое видео, где отвечаю на популярный вопрос о размере экрана мобильного приложения.
•••
Курс для опытных https://abramova-freelance.ru/appdesign
Обучение для начинающих…
Всем привет!
Короткое и емкое видео, где отвечаю на популярный вопрос о размере экрана мобильного приложения.
•••
Курс для опытных https://abramova-freelance.ru/appdesign
Обучение для начинающих…
Короткое видео про визуальный вес. Повторить или узнать новое. База в визуале must have. https://youtu.be/o3mCcnN61GY
YouTube
What is Visual Weight?
Visual weight measures how much design elements draw attention from the viewer. Objects that are bigger in size, simpler in shape, use dark colors, or have high contrast appear visually heavier.
Read More: https://www.nngroup.com/articles/visual-design…
Read More: https://www.nngroup.com/articles/visual-design…
Викторина по UX/UI и новые вопросы!
✅ два квиза внутри
✅ 20 вопросов
✅ пояснения к правильным ответам
✅ полезно и интересно!
И абсолютно бесплатно.
Переходите в бота по ссылке и начинайте проходить викторину уже сейчас!
https://t.me/uxui_quiz_bot?start=608919
✅ два квиза внутри
✅ 20 вопросов
✅ пояснения к правильным ответам
✅ полезно и интересно!
И абсолютно бесплатно.
Переходите в бота по ссылке и начинайте проходить викторину уже сейчас!
https://t.me/uxui_quiz_bot?start=608919
Новое видео на канале с разбором топовых работ в дрибл ленте. Смотрите, анализируйте и вдохновляйтесь
https://youtu.be/4D3AnczMRVI
https://youtu.be/4D3AnczMRVI
YouTube
Обзор дизайна мобильных приложений
Телеграм канал о дизайне интерфейсов https://t.me/marooot
Бесплатные уроки https://abramova-freelance.ru/signup3freelessons
Второе видео из раздела насмотренности и вдохновения. Разбираем топовые работы в ленте dribbble, смотрим на хорошие и не очень решения…
Бесплатные уроки https://abramova-freelance.ru/signup3freelessons
Второе видео из раздела насмотренности и вдохновения. Разбираем топовые работы в ленте dribbble, смотрим на хорошие и не очень решения…
Не так давно мне пришло сообщение в приложении Ozon о том, что вся информация о финансах теперь в одном месте и в быстром доступе.
⠀
Они добавили еще одну вкладку в таб бар. И теперь их стало 6, что противоречит рекомендации систем по проектированию таб бара (вкладок должно быть 3-5 штук).
⠀
Но это не самое интересное. Попробуйте нажать на этот таб и увидите как открывается внутренний экран со стрелкой назад и без таб бара. Понимаете в чем ошибка?
⠀
Все экраны в таб баре как бы основные, то есть нажимая на каждый мы оказываемся на экране без стрелок назад. Есть заголовок и подсвеченный актуальный таб.
⠀
Таким образом мы понимаем где находимся и можем быстро переключаться между основными экранами. Именно для этого и нужен такой элемент, как таб бар.
⠀
То, что реализовали сейчас в Ozon это грубая ошибка работы навигационного элемента. Она влияет на удобство, на лояльность пользователя. Привычное поведение элемента позволяет взаимодействовать с ним не обдумывая каждый свой шаг и уверенно двигаться к своей цели внутри приложения.
⠀
Поэтому меняя такие устоявшиеся паттерны, мы должны быть сильно уверены в их удобстве. Была ли уверена в этом команда Ozon - вопрос. Возможно это реализация в рамках тестирования и после сбора обратной связи что-то поменяется.
⠀
Они добавили еще одну вкладку в таб бар. И теперь их стало 6, что противоречит рекомендации систем по проектированию таб бара (вкладок должно быть 3-5 штук).
⠀
Но это не самое интересное. Попробуйте нажать на этот таб и увидите как открывается внутренний экран со стрелкой назад и без таб бара. Понимаете в чем ошибка?
⠀
Все экраны в таб баре как бы основные, то есть нажимая на каждый мы оказываемся на экране без стрелок назад. Есть заголовок и подсвеченный актуальный таб.
⠀
Таким образом мы понимаем где находимся и можем быстро переключаться между основными экранами. Именно для этого и нужен такой элемент, как таб бар.
⠀
То, что реализовали сейчас в Ozon это грубая ошибка работы навигационного элемента. Она влияет на удобство, на лояльность пользователя. Привычное поведение элемента позволяет взаимодействовать с ним не обдумывая каждый свой шаг и уверенно двигаться к своей цели внутри приложения.
⠀
Поэтому меняя такие устоявшиеся паттерны, мы должны быть сильно уверены в их удобстве. Была ли уверена в этом команда Ozon - вопрос. Возможно это реализация в рамках тестирования и после сбора обратной связи что-то поменяется.
UI марафон 17.0 уже завтра
▪️ 3 задания на разные темы
▪️ проверка каждой работы
▪️ подготовка шотов на Dribbble
▪️ вебинар с полезной инфой
▪️ встреча с приглашенным гостем - продуктовым дизайнером в финтехе
▪️ база данных с полезными материалами
🔥 стартуем 11 августа в 12Мск!
Запись по ссылке https://abramova-freelance.ru/uimarathon
▪️ 3 задания на разные темы
▪️ проверка каждой работы
▪️ подготовка шотов на Dribbble
▪️ вебинар с полезной инфой
▪️ встреча с приглашенным гостем - продуктовым дизайнером в финтехе
▪️ база данных с полезными материалами
🔥 стартуем 11 августа в 12Мск!
Запись по ссылке https://abramova-freelance.ru/uimarathon
Сегодня в рамках марафона мы проводили вебинар с Мариной Эстеркиной, продуктовым дизайнером Промсвязьбанка.
⠀
Очень интересно было узнать о ее пути, о смене профессии, как она искала работу и как проходит ее рабочий день сейчас.
⠀
Публикую несколько тезисов, которые зафиксировала в процессе вебинара:
⠀
1. эмпатия один из главных софт скиллов для дизайнера
⠀
2. понятный негативный сценарий помогает снять тревогу. Четко прописать, что может произойти (на работу сразу не возьмут, никто не напишет, обучение не даст роста и так далее)
⠀
3. быть проактивным супер важно. Не ждать когда напишут, а писать самому
⠀
4. работа в продукте это точно не про вау эффекты и креатив, это логика
⠀
5. в процессе поиска работы задействовать разные каналы (hh, группы в тг, линкедин, подписываться на лидов в фб)
⠀
6. пока ищешь ту самую работу мечты в продукте, можно брать проекты на фрилансе и набираться коммерческого опыта
⠀
7. работая продуктовым дизайнером, ты постоянно работаешь над улучшением продукта
⠀
8. дизайн-процесс в продукте сильно отличается от работы в студии
⠀
9. надо быть готовым к пяти этапам собеседований в процессе трудоустройства
⠀
10. здорово, если есть возможность не увольняться с текущей работы и параллельно учиться новой
⠀
11. не обесценивайте свой предыдущий опыт работы и приобретённые там навыки.
⠀
Крутая была встреча. Марине огромное спасибо. Чем чаще встречаю практикующих дизайнеров, лидов, тем больше убеждаюсь в их открытости и готовности делиться знаниями и опытом с начинающими дизайнерами и коллегами.
⠀
Очень интересно было узнать о ее пути, о смене профессии, как она искала работу и как проходит ее рабочий день сейчас.
⠀
Публикую несколько тезисов, которые зафиксировала в процессе вебинара:
⠀
1. эмпатия один из главных софт скиллов для дизайнера
⠀
2. понятный негативный сценарий помогает снять тревогу. Четко прописать, что может произойти (на работу сразу не возьмут, никто не напишет, обучение не даст роста и так далее)
⠀
3. быть проактивным супер важно. Не ждать когда напишут, а писать самому
⠀
4. работа в продукте это точно не про вау эффекты и креатив, это логика
⠀
5. в процессе поиска работы задействовать разные каналы (hh, группы в тг, линкедин, подписываться на лидов в фб)
⠀
6. пока ищешь ту самую работу мечты в продукте, можно брать проекты на фрилансе и набираться коммерческого опыта
⠀
7. работая продуктовым дизайнером, ты постоянно работаешь над улучшением продукта
⠀
8. дизайн-процесс в продукте сильно отличается от работы в студии
⠀
9. надо быть готовым к пяти этапам собеседований в процессе трудоустройства
⠀
10. здорово, если есть возможность не увольняться с текущей работы и параллельно учиться новой
⠀
11. не обесценивайте свой предыдущий опыт работы и приобретённые там навыки.
⠀
Крутая была встреча. Марине огромное спасибо. Чем чаще встречаю практикующих дизайнеров, лидов, тем больше убеждаюсь в их открытости и готовности делиться знаниями и опытом с начинающими дизайнерами и коллегами.
Верстка таблиц на мобильных устройствах это отдельная и достаточно сложная тема.
И как отмечает автор статьи, мы слишком мало ее обсуждаем в дизайнерском сообществе, поэтому в сети так мало информации.
При этом я проектировала интерфейсы с табличными данными еще в 2016-17 годах. И да, это было сложно. И да, информации действительно мало.
В этой статье автор дает некоторые рекомендации по верстке статей. Что-то можно забрать к себе в работу, что-то не подойдет.
Несколько ключевых мыслей из статьи 👇🏼
1️⃣ Минимизируйте количество данных, отображаемых в таблице. Оставьте только самое необходимое.
2️⃣ Используйте иконки вместо текста, где это возможно.
3️⃣ Используйте всплывающее окно или возможность раскрытия строки, чтобы показать пользователю больше данных.
4️⃣ Используйте бесконечную прокрутку вместо разбиения на страницы.
5️⃣ Как рекомендация автора: отказаться от заголовков в столбцах, если значения очевидны
Читать всю статью здесь
И как отмечает автор статьи, мы слишком мало ее обсуждаем в дизайнерском сообществе, поэтому в сети так мало информации.
При этом я проектировала интерфейсы с табличными данными еще в 2016-17 годах. И да, это было сложно. И да, информации действительно мало.
В этой статье автор дает некоторые рекомендации по верстке статей. Что-то можно забрать к себе в работу, что-то не подойдет.
Несколько ключевых мыслей из статьи 👇🏼
1️⃣ Минимизируйте количество данных, отображаемых в таблице. Оставьте только самое необходимое.
2️⃣ Используйте иконки вместо текста, где это возможно.
3️⃣ Используйте всплывающее окно или возможность раскрытия строки, чтобы показать пользователю больше данных.
4️⃣ Используйте бесконечную прокрутку вместо разбиения на страницы.
5️⃣ Как рекомендация автора: отказаться от заголовков в столбцах, если значения очевидны
Читать всю статью здесь
Необычный каталог в приложении магазинов ювелирных украшений SUNLIGHT.
⠀
Из минусов вижу:
▪️ отсутствие основного заголовка
⠀
▪️ решение не привычное, не знаешь как будет работать элемент, приходится экспериментировать :)
⠀
▪️ вертикальное меню слева занимает много места.
⠀
▪️ карточки категорий справа мелкие
⠀
▪️ большое количество элементов на одном экране усложняет считывание информации
⠀
При этом в целом у приложения много плюсов, большой вопрос только к этому каталогу.
⠀
Из минусов вижу:
▪️ отсутствие основного заголовка
⠀
▪️ решение не привычное, не знаешь как будет работать элемент, приходится экспериментировать :)
⠀
▪️ вертикальное меню слева занимает много места.
⠀
▪️ карточки категорий справа мелкие
⠀
▪️ большое количество элементов на одном экране усложняет считывание информации
⠀
При этом в целом у приложения много плюсов, большой вопрос только к этому каталогу.
Видео от команды Miro, где они разбирают два портфолио продуктовых дизайнеров и одно head of product design.
Интересно посмотреть на то, как подается информация, о чем пишут, какое соотношение текста и визуала (первого больше).
Яркая тенденция на рынке, когда кейса на Behance в его привычном виде уже не достаточно. И если мы говорим именно про продуктового дизайнера, то надо описывать дизайн процесс, выводы после интервью и анализа информации, принятые решения и их визуализацию. По возможности, добавлять в кейсы метрики.
https://youtu.be/zOz96zcI7b4?si=JwMGLZpCPBBrI54x
Интересно посмотреть на то, как подается информация, о чем пишут, какое соотношение текста и визуала (первого больше).
Яркая тенденция на рынке, когда кейса на Behance в его привычном виде уже не достаточно. И если мы говорим именно про продуктового дизайнера, то надо описывать дизайн процесс, выводы после интервью и анализа информации, принятые решения и их визуализацию. По возможности, добавлять в кейсы метрики.
https://youtu.be/zOz96zcI7b4?si=JwMGLZpCPBBrI54x
YouTube
Product Designer Portfolio Reviews: Tips from a Miro Recruiter and Head of Design
Looking for your next move? We’re hiring! 🚀 https://miro.com/careers/
In today’s video we’ll take a look at some product design portfolios that got people hired at Miro. Miro’s experts, Lena and Robert, will share the first things they look for as a Design…
In today’s video we’ll take a look at some product design portfolios that got people hired at Miro. Miro’s experts, Lena and Robert, will share the first things they look for as a Design…
Как можно реализовать функцию написания отзыва на товар?
⠀
При проектировании магазинов это частый вопрос.
Нельзя давать возможность оставить отзыв на товар, который не был куплен.
⠀
Поэтому часто отзыв можно оставить в разделе Мои заказы. И напоминать периодически об этом пользователю.
⠀
В Сбермаркете кнопка «оценить» появляется только на экране ранее купленных товаров. Она заметная, гармонично смотрится в интерфейсе в целом.
⠀
—-
До конца сентября на курсы в ШДМА действует скидка 10% по промокоду SEPT10.
⠀
https://abramova-freelance.ru/appdesign
⠀
При проектировании магазинов это частый вопрос.
Нельзя давать возможность оставить отзыв на товар, который не был куплен.
⠀
Поэтому часто отзыв можно оставить в разделе Мои заказы. И напоминать периодически об этом пользователю.
⠀
В Сбермаркете кнопка «оценить» появляется только на экране ранее купленных товаров. Она заметная, гармонично смотрится в интерфейсе в целом.
⠀
—-
До конца сентября на курсы в ШДМА действует скидка 10% по промокоду SEPT10.
⠀
https://abramova-freelance.ru/appdesign
Context menu это нативный элемент системы iOS, появляется при долгом нажатии на элемент.
⠀
На своих устройствах вы можете увидеть его в заметках, фото или почте.
В контекстном меню располагаем те функции, которые с наибольшей вероятностью могут понадобится пользователю в контексте взаимодействия с этим элементом.
⠀
Интересно, что не все знают про этот элемент, даже активно используя устройство в своей жизни. Учитываем это при проектировании.
⠀
На своих устройствах вы можете увидеть его в заметках, фото или почте.
В контекстном меню располагаем те функции, которые с наибольшей вероятностью могут понадобится пользователю в контексте взаимодействия с этим элементом.
⠀
Интересно, что не все знают про этот элемент, даже активно используя устройство в своей жизни. Учитываем это при проектировании.
Skeleton screen используют как заглушку, пока пользователь ждёт загрузки экрана.
Скелетон имитирует содержимое экрана, выглядит как простейший ваерфрэйм и показывает пользователю как будет выглядеть экран после загрузки.
Скелетон можно делать статичным, а можно анимировать.
Не делайте скелетоны слишком детализированными.
Помимо скелетона, есть еще прогресс индикатор и лоадер. Последний используют, когда непонятно время загрузки контента, но когда загрузка будет до 10 секунд.
А вот прогресс бар используют, если время ожидания более 10 секунд.
Если загрузка занимает менее 1 секунды, лучше не использовать лоадеры (спиннеры) или скелетоны.
Хорошая статья на эту тему: https://www.nngroup.com/articles/skeleton-screens/
Скелетон имитирует содержимое экрана, выглядит как простейший ваерфрэйм и показывает пользователю как будет выглядеть экран после загрузки.
Скелетон можно делать статичным, а можно анимировать.
Не делайте скелетоны слишком детализированными.
Помимо скелетона, есть еще прогресс индикатор и лоадер. Последний используют, когда непонятно время загрузки контента, но когда загрузка будет до 10 секунд.
А вот прогресс бар используют, если время ожидания более 10 секунд.
Если загрузка занимает менее 1 секунды, лучше не использовать лоадеры (спиннеры) или скелетоны.
Хорошая статья на эту тему: https://www.nngroup.com/articles/skeleton-screens/