UXPUB 🇺🇦 Дизайн-спільнота: Tarasenko

Использование типографики Apple для iOS-Дизайнера

Tarasenko — Sat, 23 Apr 2022 16:34:39 +0000

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

Можете самостоятельно ознакомиться с гайдлайнами Эпл:
Human Interface Guidelines Typography

Давайте посмотрим, что вообще из себя представляют эти стили:

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

Используя данные стили вы упрощаете работу себе и разработчику, т.к. вам не надо разрабатывать свои стили, а разработчику их программировать. Вы оба просто берете готовые варианты.

Но это это не только одно это преимущество!

Это динамические стили и их использование позволяет подстраивать ваше приложение под изменения шрифтов в самой iOS. Т.е. если человек с плохим зрением увеличил весь шрифт в телефоне, то ваше приложение тоже его увеличит. Это называется “Accessibility” или просто “Доступность”.

Как настроить типографику проекта в Sketch и пример как это делает программист в X-Code я показал в видео

Подпишись на мои соц. сети:

Инструменты прототипирования [updated]

Tarasenko — Wed, 23 Mar 2022 21:40:45 +0000

Прототип сайта — это визуальное представление твоего будущего проекта. Создание прототипа может помочь протестировать разные интерфейсы, разные UX решения и гипотезы еще на этапе дизайна, тем самым сэкономив время разработчика и как следствие денег.

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

Погнали!

Mockplus

https://www.mockplus.com/mockplus-rp - Быстрый инструмент для создания прототипов, позволяющий за считанные минуты создавать от блок-схем, низкоуровневых каркасов до интерактивных прототипов.

ProtoPie
https://www.protopie.io/ - пожалуй самая лучшая программа для прототипирования. Несколько видео уроков я сделал для нее и выложил в этой статье: Основы прототипирования в ProtoPie

Wireframe.cc
https://wireframe.cc/ — самый простой сервис, который мне удалось найти. Отлично подходит для создания кратких набросков. Для несложных прототипов этого хватает.

Invision
https://www.invisionapp.com/ — мощный онлайн-сервис, с широким набором функций . Загружаешь артборды и настраиваешь связи в браузере.

Marvel
https://marvelapp.com — по сути в какой-то степени аналог invision. Загружаешь свой дизайн и настраиваешь взаимодействие артбордов.

Moqups
https://moqups.com — в этом сервисе можно создавать не только прототипы, но и карты сайта, диаграммы и т.п.

Balsamiq
https://balsamiq.com/ — интуитивно понятный ресурс для прототипирования. Есть пробная версия с ограниченным функционалом.

Axure
https://www.axure.com/ — хороший инструмент для проектировщиков. Опять же, имеется как пробная версия, так и платная. Так же добавили возможность работать с состояниями.

Ninja Mock
https://ninjamock.com/ - простой сервис для создания быстрых набросков и скетчей.

Конечно, прототипировать сегодня возможно в Adobe XD, Figma, Sketch, Framer X и т.д., но хотелось показать другие сервисы, которые могут быть лучше в той или иной ситуации.

Выбирай самый удобный для тебя вариант и принимайся творить:)

p.s. Какие еще сервисы для прототипирования вы знаете?

Подпишись на мои соц. сети:

9 ресурсов для вдохновения дизайнеров

Tarasenko — Mon, 21 Mar 2022 09:36:47 +0000

Мир дизайна не прекращал развиваться никогда. Сегодня важно оставаться в тренде, информации стало очень много и порой сложно найти действительно полезные материалы.

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

1) Behance.net
Behance — это крупнейший в мире онлайн-сообщество, в котором пользователи делятся своими работами. На сайте представлены разные работы, включая работы графических дизайнеров, иллюстраторов, типографов, UX дизайнеров, веб-дизайнеров, фотографов и т.д.

2) Smashing Magazine
Smashing Magazine один из самых популярных и высоко оцененных журналов в области веб-дизайна и веб-разработки. В категории «user experience» представлены отличные статьи по удобству использования, информационной архитектуре, дизайну взаимодействия и другим темам связанными с UX.

3) AWWWARDS
Данный ресурс дает награды для лучших из лучших сайтов за веб-дизайн и разработку. Это место, где творческие профессионалы со всего мира приходят, что бы найти вдохновение, поделиться знаниями и получить конструктивную критику.

4) Screenlane
Основная разница данного ресурса по сравнению с другими заключается в том, что он ориентирован исключительно на дизайн пользовательского интерфейса. Каждый пример дизайна в каталоге помечен таким образом, что вы легко можете найти любой элемент дизайна, который вам интересен.

5) Dribbble
Dribbble — сообщество дизайнеров, где они демонстрируют свои работы и получает вдохновение друг от друга. Дизайнеры используют Dribbble для демонстрации своего творчество и так же является хорошим источником вдохновения.

6) CssWinner
Данный сайт чем-то похож на Awwwards. Тут так же можно посмотреть красивые сайты и их интересную реализацию. Отличный ресурс для поиска вдохновения

7) Dishots
Русский аналог Dribbble. Аудитория не такая уж и большая, но зайти посмотреть, что делают коллеги всегда интересно.

8) Pinterest
Данный ресурс дает возможность создавать коллекции изображений на разные тему и делится ими с другими пользователями. Очень удобно собирать референсы.

9) UI8.net
Это маркет, который содержит в себя UI наборы, Иконки, Шрифты. Необязательно все покупать, можно лишь подсмотреть хорошую реализации и воплотить ее в своем проекте

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

Может есть ресурсы, которыми вы хотели бы поделится? Напишите их в комментариях

Подпишись на мои соц. сети:

Основы анимации интерфейсов в ProtoPie [Updated]

Tarasenko — Wed, 23 Feb 2022 14:38:04 +0000

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

Подпишитесь на мой YouTube-канал
https://www.youtube.com/channel/UCfVBRPG0J60uS8P9SrSwu3A

и на Telegram-канал
https://t.me/uxuituts

01 Экспорт и подготовка дизайна для прототипирования
Делаем экспорт проекта из AdobeXD (По аналогии экспорт делается в Sketch и Figma) в ProtoPie. Так же настраиваем дизайн в ProtoPie для последующего прототипирования

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

03 Прототипирование экрана Профиля
Разберем как передавать данные с экрана на экран с помощью переменных, как работать с формулами.

04 Прототипирование экран выбора цвета
Завершаем прототипировать дизайн в ProtoPie. Используем переменные для передачи цвета, исправляем ошибки в формулах и закрепляем пройденное.

Ссылка на исходник дизайна: ProtoPie.pie
Ссылка на исходник прототипа: Design.xd

[Updated]

Scroll Container & Padding Container
Добавил видео, в котором быстро разберемся как сделать Scroll и Padding контейнеры.

[Updated 2]

Circle Progress Bar
Учимся делать круговой прогресс бар с использованием макси-слоя

Критика, Лайк и Подписка приветствуется😊