Внутри:
– Кнопка каталога
– Появления каталога
– Структура
– Контент в каталоге
– Layout
– Категории первого уровня
– Иллюстрации категорий
– Списки подкатегорий
– Пункты в списках
– Ограничение длины списков
– Highlight категорий
– Прокрутка каталога
– Бренды
– Страницы категорий
– Закрытие каталога
Все как обычно с примерами удачных и неудачных решений. Рекомендую смотреть с ПК, так как статья объёмная.
👉 Читать статью
———
@jun_hi
@jun_hi_vacancies
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24
Подборка плагинов для работы с текстом в Figma
1. Deepl translate — переводит тексты с одного языка на другой прямо в Figma. Поддержка 26 языков
2. Find and Replace — находит текст на странице и позволяет массово его изменять
3. Glyphs — плагин включает 184 графических символа, в том числе глифы и лигатуры
4. Add numbers to texts — быстро создает нумерованные списки
5. Accidently Great Font Pairings — генерирует шрифтовые пары от Google Fonts
6. Contento — «рыбный» контент для макетов, сгенерированный из открытых бесплатных источников
7. Font Preview — предпросмотр шрифтов в реальном времени
8. SBOL Typograph — типографит кириллические тексты: исправляет пробелы, кавычки, тире, написание телефонов и валют.
9. Главред — помогает сделать текст для сайтов, блогов, профессиональной литературы, СМИ и рекламы коротким и понятным
10. Batch Styler — меняет несколько текстовых стилей одновременно (шрифт, начертание, высота строки, трекинг)
Какие плагины для текста используете дополнительно? Кидайте в комменты)
———
@jun_hi
@jun_hi_vacancies
1. Deepl translate — переводит тексты с одного языка на другой прямо в Figma. Поддержка 26 языков
2. Find and Replace — находит текст на странице и позволяет массово его изменять
3. Glyphs — плагин включает 184 графических символа, в том числе глифы и лигатуры
4. Add numbers to texts — быстро создает нумерованные списки
5. Accidently Great Font Pairings — генерирует шрифтовые пары от Google Fonts
6. Contento — «рыбный» контент для макетов, сгенерированный из открытых бесплатных источников
7. Font Preview — предпросмотр шрифтов в реальном времени
8. SBOL Typograph — типографит кириллические тексты: исправляет пробелы, кавычки, тире, написание телефонов и валют.
9. Главред — помогает сделать текст для сайтов, блогов, профессиональной литературы, СМИ и рекламы коротким и понятным
10. Batch Styler — меняет несколько текстовых стилей одновременно (шрифт, начертание, высота строки, трекинг)
Какие плагины для текста используете дополнительно? Кидайте в комменты)
———
@jun_hi
@jun_hi_vacancies
🔥40👍1
Отличная статья об исследовании сайтов логистических услуг
Внутри:
– Задачи исследования и цели
– Какие методы использовали
– Какие компании выбрали
– Результаты исследований по каждой выбранной компании
– Miro карты пользвательских маршрутов к каждому исследованию
– Барьеры, возникшие при выполнении заданий
И много другой полезной информации) Ребята провели полноценные исследования, дали конкретные задачи и поставили конкретные цели. Сделали выводы, на основании которых уже можно предпринимать попытки проектирования интерфейса.
👉 Читать статью
———
@jun_hi
@jun_hi_vacancies
Внутри:
– Задачи исследования и цели
– Какие методы использовали
– Какие компании выбрали
– Результаты исследований по каждой выбранной компании
– Miro карты пользвательских маршрутов к каждому исследованию
– Барьеры, возникшие при выполнении заданий
И много другой полезной информации) Ребята провели полноценные исследования, дали конкретные задачи и поставили конкретные цели. Сделали выводы, на основании которых уже можно предпринимать попытки проектирования интерфейса.
👉 Читать статью
———
@jun_hi
@jun_hi_vacancies
🔥17
🔥🔥🔥 Сегодня прям база, которую должен знать каждый дизайнер) Гайды от Контура. Это азбука.
Внутри гайдов:
– Цвет
– Модуль и сетка
– Отступы и выравнивание
– Текст в интерфейсе
– Глоссарий
– Текстовые стили
– Типографика
– Время отклика
– Сохранение данных
– Доступность интерфейсов
– Клавиатура
– Капча
– Валидация форм
– Фильтры в таблицах
– Задачи проектировщика и работа в команде
– Вёрстка макета
И огромное количество другой полезной инфы, например по каждому компоненту (кнопки, инпуты, радиобаттоны, табы итд)
В общем, рекомендую абсолютно всем. Кто уже читал, можно перечитать, они их обновляют периодически.
👉 Читать гайды Контура
———
@jun_hi
@jun_hi_vacancies
Внутри гайдов:
– Цвет
– Модуль и сетка
– Отступы и выравнивание
– Текст в интерфейсе
– Глоссарий
– Текстовые стили
– Типографика
– Время отклика
– Сохранение данных
– Доступность интерфейсов
– Клавиатура
– Капча
– Валидация форм
– Фильтры в таблицах
– Задачи проектировщика и работа в команде
– Вёрстка макета
И огромное количество другой полезной инфы, например по каждому компоненту (кнопки, инпуты, радиобаттоны, табы итд)
В общем, рекомендую абсолютно всем. Кто уже читал, можно перечитать, они их обновляют периодически.
👉 Читать гайды Контура
———
@jun_hi
@jun_hi_vacancies
🔥64
Часто задают вопрос, как оформить портфолио, чтобы было «вау». Отвечаю: примерно, как Marco Cornacchia из Сан-Франциско.
Огромное количество интерактива, на котором хочется залипать. Все сделано простыми карточками. Нет никаких сложных анимаций и webgl решений, которые никому не нужны.
Кейсы описаны подробно и оформлены очень качественно.
Крутая пасхалка на сайте в виде текста "...click around", то есть нажимайте везде) И правда, почти 95% всех элементов нажимаются и с ними можно взаимодействовать.
Вдохновляйтесь: https://www.marco.fyi
———
@jun_hi
@jun_hi_vacancies
Огромное количество интерактива, на котором хочется залипать. Все сделано простыми карточками. Нет никаких сложных анимаций и webgl решений, которые никому не нужны.
Кейсы описаны подробно и оформлены очень качественно.
Крутая пасхалка на сайте в виде текста "...click around", то есть нажимайте везде) И правда, почти 95% всех элементов нажимаются и с ними можно взаимодействовать.
Вдохновляйтесь: https://www.marco.fyi
———
@jun_hi
@jun_hi_vacancies
🔥44🤔3
Обычно, деньги платят за рекламу, чтобы опубликовать пост в канале. Но здесь деньги платить должен я Стасу Хрусталёву за такие крутые статьи о e-commerce.
Очередной шедевр про хлебные крошки. Внутри 82+ гайдлайна и все с примерами.
– Размещение хлебных крошек
– Структура
– Оформление ссылок
– Смежные разделы
– Разделители
- Мобильная оптимизация
– Переходы по ссылкам
👉 Читать статью
———
@jun_hi
@jun_hi_vacancies
Очередной шедевр про хлебные крошки. Внутри 82+ гайдлайна и все с примерами.
– Размещение хлебных крошек
– Структура
– Оформление ссылок
– Смежные разделы
– Разделители
- Мобильная оптимизация
– Переходы по ссылкам
👉 Читать статью
———
@jun_hi
@jun_hi_vacancies
🔥22
Пошёл слух, что Adobe покупает Фигму за 15+ миллиардов долларов.
Что думаете?
———
@jun_hi
@jun_hi_vacancies
Что думаете?
———
@jun_hi
@jun_hi_vacancies
🤔39🔥4
🔥🔥🔥Adobe купил Figma за 20 миллидардов долларов. Новость с сайта Adobe.
Новость с Фигмы
———
@jun_hi
@jun_hi_vacancies
Новость с Фигмы
———
@jun_hi
@jun_hi_vacancies
🤔28
Дизайнер, привет pinned «🔥🔥🔥Adobe купил Figma за 20 миллидардов долларов. Новость с сайта Adobe. Новость с Фигмы ——— @jun_hi @jun_hi_vacancies»
Простите. Больше не буду.
На самом деле, мне кажется, что ужасно не станет. У адоб мощные ресурсы, которые, надеюсь, позволят Фигме получить новый функционал (возможно что-то из ФШ), оффлайн режим и прочие вещи, которые только ускорят работу.
Посмотрим, как оно будет. Сейчас неизвестно)
———
@jun_hi
@jun_hi_vacancies
На самом деле, мне кажется, что ужасно не станет. У адоб мощные ресурсы, которые, надеюсь, позволят Фигме получить новый функционал (возможно что-то из ФШ), оффлайн режим и прочие вещи, которые только ускорят работу.
Посмотрим, как оно будет. Сейчас неизвестно)
———
@jun_hi
@jun_hi_vacancies
🤔26🔥14
Точно последнее. Мысль в слух.
- Адоб ХД не может конкурировать с Фигмой.
- Адоб покупает Фигму.
- Адоб закрывает Фигму.
Будет прикол, конечно)))
———
@jun_hi
@jun_hi_vacancies
- Адоб ХД не может конкурировать с Фигмой.
- Адоб покупает Фигму.
- Адоб закрывает Фигму.
Будет прикол, конечно)))
———
@jun_hi
@jun_hi_vacancies
🤔45🔥9
Статья о дашбордах и как с ними работать.
Внутри:
– Зачем и кому нужны дашборды
– Какие задачи решают дашборды
– Как мыслят пользователи
– Какие данные необходимо отражать
– Глубинные интервью для проработки
– Полевые исследования
– Изучение процесса принятия решений
– Сколько экранов делать
– Идеальная структура дашборда
– Как размещать данные
– Как использовать графику
– Полезные библиотеки и плагины
– Работа со сложными данными
– Тёмная тема
– Советы
Огромная статья про дашборды и много полезной информации. Рекомендую к прочтению.
👉 Читать статью
———
@jun_hi
@jun_hi_vacancies
Внутри:
– Зачем и кому нужны дашборды
– Какие задачи решают дашборды
– Как мыслят пользователи
– Какие данные необходимо отражать
– Глубинные интервью для проработки
– Полевые исследования
– Изучение процесса принятия решений
– Сколько экранов делать
– Идеальная структура дашборда
– Как размещать данные
– Как использовать графику
– Полезные библиотеки и плагины
– Работа со сложными данными
– Тёмная тема
– Советы
Огромная статья про дашборды и много полезной информации. Рекомендую к прочтению.
👉 Читать статью
———
@jun_hi
@jun_hi_vacancies
🔥34
👾 Inspiration #1
Теперь по понедельникам будем вдохновляться различными сайтами и сервисами)
– https://www.atomus.io
– https://beacons.ai
– https://metronome.com
– https://nano.site
– https://www.hellolanding.com
———
– https://mailchimp.com
– https://www.diegoliv.works
– https://www.apple.com/iphone-14-pro
– https://p.ai
– https://www.unloan.com.au
———
– https://www.helloelva.com
– https://www.bunsenstudio.com
– https://cortexdao.io
– https://nucleate.xyz
– https://www.luni.app
———
– https://www.getplayback.com
– https://onekey.so
– https://electronicmaterialsoffice.com
– https://retool.com
– https://artboard.studio
———
– https://propel.me
– https://along.video
– https://www.wowpage.io
– https://solana.com/summercamp
– https://github.com/features/codespaces
———
– https://www.mubasic.com
– https://www.hybridstateofmind.com
– https://instaprice.app
– https://modulesystem.design
– https://www.ziko.studio
– https://bloomind.io
———
@jun_hi
@jun_hi_vacancies
Теперь по понедельникам будем вдохновляться различными сайтами и сервисами)
– https://www.atomus.io
– https://beacons.ai
– https://metronome.com
– https://nano.site
– https://www.hellolanding.com
———
– https://mailchimp.com
– https://www.diegoliv.works
– https://www.apple.com/iphone-14-pro
– https://p.ai
– https://www.unloan.com.au
———
– https://www.helloelva.com
– https://www.bunsenstudio.com
– https://cortexdao.io
– https://nucleate.xyz
– https://www.luni.app
———
– https://www.getplayback.com
– https://onekey.so
– https://electronicmaterialsoffice.com
– https://retool.com
– https://artboard.studio
———
– https://propel.me
– https://along.video
– https://www.wowpage.io
– https://solana.com/summercamp
– https://github.com/features/codespaces
———
– https://www.mubasic.com
– https://www.hybridstateofmind.com
– https://instaprice.app
– https://modulesystem.design
– https://www.ziko.studio
– https://bloomind.io
———
@jun_hi
@jun_hi_vacancies
🔥57🤔3❤1
Сегодня статья про такой интерфейсный элемент как номер телефона на сайте.
Казалось бы, что может быть проще, но внутри 80 гайдлайнов, которые помогут спроектировать его правильно.
– Как и где размещать элемент
– Формат номера телефона
– Как оформить
– График работы
– Инициация звонка
👉 Читать статью
———
@jun_hi
@jun_hi_vacancies
Казалось бы, что может быть проще, но внутри 80 гайдлайнов, которые помогут спроектировать его правильно.
– Как и где размещать элемент
– Формат номера телефона
– Как оформить
– График работы
– Инициация звонка
👉 Читать статью
———
@jun_hi
@jun_hi_vacancies
🔥20🤔1
Фигма запускает бета тест новых компонентов.
💥💥💥 Nested instances
Теперь свойства компонентов которые имеют вложенные свойста выносятся в самый верх настроек.
Тем самым вам больше не нужно проваливаться внутрь компонента и настривать отдельно внутри свойста вложенного компонента.
Подробнее почитать можно тут и в твиттере в треде посмотреть, как все это работает https://twitter.com/molly_hellmuth/status/1572256172580929537?s=46&t=gbsszACnbGs6f1bBg2mHMg
Протестировать можно в бета версии фигмы (скачивается с их сайта).
———
@jun_hi
@jun_hi_vacancies
💥💥💥 Nested instances
Теперь свойства компонентов которые имеют вложенные свойста выносятся в самый верх настроек.
Тем самым вам больше не нужно проваливаться внутрь компонента и настривать отдельно внутри свойста вложенного компонента.
Подробнее почитать можно тут и в твиттере в треде посмотреть, как все это работает https://twitter.com/molly_hellmuth/status/1572256172580929537?s=46&t=gbsszACnbGs6f1bBg2mHMg
Протестировать можно в бета версии фигмы (скачивается с их сайта).
———
@jun_hi
@jun_hi_vacancies
🔥39🤔5
Всем привет. Как у вас настроение? Что-то работать не хочется 🐞
Давайте поболтаем в комментах.
Давайте поболтаем в комментах.
🤔26🔥8
Как назначать встречи.
Я, конечно, в целом, против большого количества встреч и стараюсь решать вопросы асинхронно, но иногда они нужны. Пара мыслей.
1. Когда ставите встречу, обязательно пишите план встречи. Чтобы те, кого вы зовёте были в курсе, что будет обсуждаться. Можно ещё написать ожидаемый результат, чтобы понимать итоги встречи.
2. Приложите все файлы и документацию, которая поможет участникам встречи и на которую стоит обратить внимание.
3. Подумайте, а нужна ли вообще встреча или можно решить вопрос в переписке. Если вопросов очень много и они мелкого характера, конечно быстрее будет созвониться. Но не всегда. Зачастую вопрос решается в переписке за 10 минут.
4. После встречи (и в процессе) фиксируйте всю инфу и договорённости. Скиньте итоги всем, кто на ней был с датой встречи: о чем договорились, какие дальнейшие действия, с кем связаться по тем или иным вопросам. Так ничего не потеряется и не забудется.
Простые правила, которые сэкономят уйму времени. Если такого процесса в компании нет и встречи ставятся как попало – нужно его менять.
Как ставят встречи на вашей работе?) Пишите в комменты.
———
@jun_hi
@jun_hi_vacancies
Я, конечно, в целом, против большого количества встреч и стараюсь решать вопросы асинхронно, но иногда они нужны. Пара мыслей.
1. Когда ставите встречу, обязательно пишите план встречи. Чтобы те, кого вы зовёте были в курсе, что будет обсуждаться. Можно ещё написать ожидаемый результат, чтобы понимать итоги встречи.
2. Приложите все файлы и документацию, которая поможет участникам встречи и на которую стоит обратить внимание.
3. Подумайте, а нужна ли вообще встреча или можно решить вопрос в переписке. Если вопросов очень много и они мелкого характера, конечно быстрее будет созвониться. Но не всегда. Зачастую вопрос решается в переписке за 10 минут.
4. После встречи (и в процессе) фиксируйте всю инфу и договорённости. Скиньте итоги всем, кто на ней был с датой встречи: о чем договорились, какие дальнейшие действия, с кем связаться по тем или иным вопросам. Так ничего не потеряется и не забудется.
Простые правила, которые сэкономят уйму времени. Если такого процесса в компании нет и встречи ставятся как попало – нужно его менять.
Как ставят встречи на вашей работе?) Пишите в комменты.
———
@jun_hi
@jun_hi_vacancies
🔥36👍1
🔥🔥🔥 Вакансии для дизайнеров
Напомню, что я запустил канал с вакансиями для продуктовых и ux/ui дизайнеров и сейчас там уже почти 3000 подписчиков. Это офигеть как круто!
Вакансии собираются с 30+ источников и публикуются один раз в день в 10:00 по Москве в количестве 8 штук. Кроме воскресенья.
Буду рад подписке, максимальному репосту, лайку и просто поддержке)
👉 Подписаться на канал
👉 Подписаться на канал
👉 Подписаться на канал
———
@jun_hi_vacancies
@jun_hi
Напомню, что я запустил канал с вакансиями для продуктовых и ux/ui дизайнеров и сейчас там уже почти 3000 подписчиков. Это офигеть как круто!
Вакансии собираются с 30+ источников и публикуются один раз в день в 10:00 по Москве в количестве 8 штук. Кроме воскресенья.
Буду рад подписке, максимальному репосту, лайку и просто поддержке)
👉 Подписаться на канал
👉 Подписаться на канал
👉 Подписаться на канал
———
@jun_hi_vacancies
@jun_hi
🔥23
👾 Inspiration #2
Подборка лендингов и сайтов для вдохновения на предстоящую неделю 🔥
– https://teamway.io
– https://zapier.com
– https://www.acorns.com
– https://www.wineinvestment.com
– https://www.capchase.com
———
– https://gigs.com/
– https://payhawk.com
– https://www.oxalife.com
– https://www.wealthsimple.com
– https://www.winden.co
———
– https://www.rollienation.com
– https://www.vana.com
– https://cal.com
– https://www.landing.love
– https://www.suku.world
———
– https://cord.com
– https://rcobiella.net
– https://bakkenbaeck.com
– https://sprout.place
– https://www.w1tty.com
———
– https://camillemormal.com
– https://drawhistory.com
– https://www.icam-inox.com
– https://walletconnect.com
– https://intl.nothing.tech
———
– https://july.fund
– https://meetwoodrow.com
– https://getdash.app
– https://jivati.com
– https://abstract.wannathis.one
———
@jun_hi
@jun_hi_vacancies
Подборка лендингов и сайтов для вдохновения на предстоящую неделю 🔥
– https://teamway.io
– https://zapier.com
– https://www.acorns.com
– https://www.wineinvestment.com
– https://www.capchase.com
———
– https://gigs.com/
– https://payhawk.com
– https://www.oxalife.com
– https://www.wealthsimple.com
– https://www.winden.co
———
– https://www.rollienation.com
– https://www.vana.com
– https://cal.com
– https://www.landing.love
– https://www.suku.world
———
– https://cord.com
– https://rcobiella.net
– https://bakkenbaeck.com
– https://sprout.place
– https://www.w1tty.com
———
– https://camillemormal.com
– https://drawhistory.com
– https://www.icam-inox.com
– https://walletconnect.com
– https://intl.nothing.tech
———
– https://july.fund
– https://meetwoodrow.com
– https://getdash.app
– https://jivati.com
– https://abstract.wannathis.one
———
@jun_hi
@jun_hi_vacancies
🔥31
Как правильно проводить А/В тесты?
Серия коротких видео, которая ответит на вопросы:
– Универсальная формула гипотезы
– Примеры простых гипотез
– Примеры сложных гипотез
– Основные три процентных показателя для прямого маркетинга, которые можно улучшать
– Как выбрать период расчета показателя
– Подводные камни при тестировании
– Как определить точку завершения эксперимента
– Проблема «подглядывания»
– Параметры, которые влияют на размер выборки. Как посчитать выборку в калькуляторе достоверности АB-тестирования
– О проверке результатов по завершению теста
– Как пользоваться вкладкой «Итоги тестирования» в калькуляторе
– Как интерпретировать результаты эксперимента
👉 Смотреть видео
———
@jun_hi
@jun_hi_vacancies
Серия коротких видео, которая ответит на вопросы:
– Универсальная формула гипотезы
– Примеры простых гипотез
– Примеры сложных гипотез
– Основные три процентных показателя для прямого маркетинга, которые можно улучшать
– Как выбрать период расчета показателя
– Подводные камни при тестировании
– Как определить точку завершения эксперимента
– Проблема «подглядывания»
– Параметры, которые влияют на размер выборки. Как посчитать выборку в калькуляторе достоверности АB-тестирования
– О проверке результатов по завершению теста
– Как пользоваться вкладкой «Итоги тестирования» в калькуляторе
– Как интерпретировать результаты эксперимента
👉 Смотреть видео
———
@jun_hi
@jun_hi_vacancies
🔥24
Интересная статья от ребят из Dodo Engineering о том, как они дизайнили кнопку со свайпом
Внутри:
– Какое решение взяли за основу
– Все состояния кнопки-слайдера
– Анимации
– Незавершённые действия
– Завершённые действия
– Вибрации и отклик
– Разные контексты для кнопки (добавление в корзину, экран ввода карты и другие)
- Доступность данного решения
– VoiceOver для такой кнопки
– Результаты и выводы
👉 Читать статью
———
@jun_hi
@jun_hi_vacancies
Внутри:
– Какое решение взяли за основу
– Все состояния кнопки-слайдера
– Анимации
– Незавершённые действия
– Завершённые действия
– Вибрации и отклик
– Разные контексты для кнопки (добавление в корзину, экран ввода карты и другие)
- Доступность данного решения
– VoiceOver для такой кнопки
– Результаты и выводы
👉 Читать статью
———
@jun_hi
@jun_hi_vacancies
🔥15🤔2