🐈 Alex

A comprehensive guide for crafting a user-friendly experience

2022-12-17T15:10:17.284Z

Creating an app is a complex process, and designing it requires an organized approach. This article outlines the general steps to take when designing an app, from defining the goals and tasks of the app to launching and maintaining it.

Define the goals

The first step in creating any successful app is to define what you want your app to do, or what goals it should accomplish. Think about who will use your app and what features they might need or find useful. This will help you create an effective design that meets users' needs while also achieving its desired purpose.

Research the audience

It’s important to research your target audience before designing your app so that you can create a design that resonates with them. Conduct surveys, focus groups, interviews, etc., to get a better understanding of who your users are and what they expect from your product.

Create a wireframe

After researching users' needs and expectations for your product, create a wireframe outlining how all of its elements should be arranged on each page or screen of the interface (this includes buttons, menus, text boxes). A wireframe helps visualize how each element works together within the interface so that you can ensure usability before beginning work on actual designs for each page or screen layout in greater detail later on during implementation phase.

Create a mockup

A mockup is essentially an enhanced version of a wireframe which takes into account user experience (UX) considerations such as color scheme choices as well as placement/layout decisions for each UI element within the interface structure already outlined by wireframe design phase… Mockups are usually created using visual design software such as adobe photoshop or sketch app, which allows designers to quickly experiment with different designs before settling upon one particular design solution.

Designing user interface

After creating mockups for each individual page/screen within user experience flow outlined by wireframes earlier in the process, designers move onto actual designing stage where all elements must be refined even further taking into account UX principles like color harmony; typography; whitespace management; accessibility standards etc. Here may also include creation of custom-made graphical UI components if needed, but this isn’t something typically done until later stages once basic layout structure has been established successfully through previous steps.

Testing design

Once the UI has been designed completely, including any custom graphics necessary — then the next step is to conduct testing both internally amongst the development team as well externally amongst potential future users to make sure everything works according to expected standards, ensuring the best possible user experience during usage phase after launch. Testing also include conducting usability tests to measure navigation patterns; user engagement levels; response times etc. making sure proper metrics measured throughout entire process in order to determine success failure design decisions made along way.

Refining design

After testing complete then comes time to refine various aspects derived from those test results — may involve tweaking existing pieces of functionality or even adding new ones based off feedback received, this could anything minor like changing font size certain button specific type animation used when going between screens.

Implementing design

All refinements done! Then the final task implementing the entire UI into application codebase making sure everything runs seamlessly without any bugs hindering user’s ability to interact with the application comfortably efficiently.

Launching & maintaining app

Finally, once deployed online open world public use, last thing left to maintain monitoring progress performance metrics posted over time continuously improve upon initial release according to feedback given certain areas leading to more successful versions future iteration's product long run.

#App-design, #user-experience, #step-by-step-instructions

🌈Дизайн система в 🎨FIgma очень быстро.

2022-06-21T11:04:52.618Z

Дизайн-система — набор компонентов, правил, предписаний и инструментов для повышения качества и скорости разработки продуктов, а также эффективной поддержки существующих.

Можно сравнить с бренд буком.

Рассмотрим идеальную ситуацию когда мы строим систему с нуля. Для начала нам нужно минимум: стили текста, цвета, базовая мера.

Запустим плагин для генерации страниц и разделов дизайн системы

Первым запускаем Create Pages System

Плагин создал страницы для дизайн системы.

https://www.figma.com/community/plugin/898298661705867715

📜 Стили текста

Откроем страницу 0 - Typography

Запустим плагин Design System Basics с опцией Add Draft Frame сгенирируется фрейм в который мы вложим следующий результат генератора шрифтового скейла.

https://www.figma.com/community/plugin/739825414752646970

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

14 или 16 – это размер основного текста. Чаще всего это <body>.

Соответственно все что выше <body> будут размеры для элементов стоящих выше по информационной иерархии, например надписи кнопок, заголовков.

Стили ниже <body> можно использовать для подписей, пояснений и т.д.

Конечно легче работать с целыми значениями. Хотя разработчики могут и выстроить этот же скейл в приложении путем умножения базы (16) на фактор (1.250) Решать вам.

📝 Названия для стилей

H1
H2
H3
H4
H5
BodyText
Caption
Mini
Tiny

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

Чтобы видеть панель со всеми стилями надо чтобы ни один обьект не был выделен. Для этого кликните на любое пустое место в рабочей области.

🩸Стили цвета

Откроем страницу 0 - Colors

Воспользуемся генератором https://www.figma.com/community/plugin/1068919813159975006

https://www.figma.com/community/plugin/1068919813159975006

Тут тоже все просто:

Включаете генератор
Жмите побрел и на цвете который нравится жмёте на замок. Другие цвета будут генерироваться с учётом выбора.

Минимальный набор этого 2 акцентных цвета, почти белый, почти черный и серый.

Если выбрать Add Colors to Document квадраты с цветами вставляются в 0 по X и Y на пространстве. Бывает что эти координаты заняты и палитра не вставляется. Обходным путем будет открытие палитры онлайн и экспорта в SVG.

https://coolors.co/f3b61f-a29f15-f3f3f4-696773-191102

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

Также выделив весь фрейм удобно создавать стили из найденных цветов.

Теперь сделаем свой шаблон для Design System Basics > Add Draft Frame т.к новая генерация создаст нам еще один мастер компонент с дефолтными названиями которые нам придется заполнять вручную.

Вернемся на страницу где мы впервые запустили генератор, у меня это 0 - Typography

Весь фрейм оборачиваем в автолейаут
Из фрейма Header делаем компонент (компоненты Title Comp и Type Name выпрыгнут из Header и заменятся инстансами)
Теперь весь фрейм делаем компонентом (компонент Header выпрыгнет)
Делаем инстанс главного компонента Design System Page / Typography
Выделяем его и отсоединяем от компонента вообще

Теперь у нас есть свой компонент страницы дизайн системы в которой мы можем зашить и настроить варианты как нам нравится.

Созданные мастера можем перенести в станицу 1 - Other Раздела Components На этой странице я буду собирать всех "помощников" для этой дизайн системы.

Теперь на странице 0 - Colors добавим наш компонент страницы дизайн системы через меню Assets после добавления "разобьем" его (отсоединяем от компонента) чтобы можно было вкинуть внутрь него нашу палитру.

Стили цвета лучше всего называть так как поймете его вы и разработчик.

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

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

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

Основа

Для этой базы создаем новую страницу 0 - Base & Grids в разделе Foundations эта страница источником для разработчиков, как и на какой платформе должны верстаться элементы.

Сделаем черновой макет тут же или на странице 3 - Draft Допустим у нас мобильное приложение независимого СМИ.

Основными элементами там будут лента новостей, карточка новости, и страница с новостью.

Я начинаю сразу с экрана где могут быть собраны максимально все необходимые элементы

У меня база 8. Это некий стандарт которому придерживаются. Этот размер хорошо скалируется на различные Apple дисплеи и Андройд устройства. (Статья на тему ENG)

Постойте-ка, а если я выбрал базу в 14 для текста?

Размер шрифта необязательно должен быть кратен базы в 8, работа со шрифтом более сложный процесс на мобильных платформах. Например, пользователь может сам контролировать размер шрифта, ставить кастомные начертания. Поэтому лучше использовать нативные для платформы шрифты (SF Pro, Roboto), но есть и другие подводные камни. (Статья на тему ENG)

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

Я определился с базовой сеткой в экранах. Я добавлю компонент страницы дизайн системы настрою её по своему вкусу и начну описывать правило отступов.

Для людей которые откроют вашу систему по ссылке нет возможности видеть настроенную сетку. Её вы используете только для себя.

Настройки сетки тоже можно сохранять в пресеты

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

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

Красивые цвета 🥰

2022-04-13T21:05:15.913Z

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

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

Звучит как начало провального проекта так?
Вы уже слышите эти слова, которые прошипят на финальной сдаче

Но это не совсем то что мы хотели получить…

Ну вы поняли

Цвет – это реакция, вызываемая в сознании.
Это лишь то, как мы воспринимаем световую волну.

Поэтому важны чувства и ассоциации о которых говорит заказчик, а не о палитре красных оттенков.

Я расспросил, что он понимает под красным от которого захватывает дух.

И выяснил, что это просто ярче. А дух захватывать надо композицией и информацией окружающей этот оттенок.

Делаем красиво

https://coolors.co/

Открываю генератор и вставляю старый красный в слот посередине

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

Появляется оттенок #FC2847 на первый взгляд это то что нужно. Проверяю значения по карте яркости.

Да этот оттенок на 2% ярче и все ещё близок к первоначальному. Теперь я добавлю к нему цвета партеры, которые я использую лишь в дизайнах для демонстрации. Это усилит его эффект.

Снимаем замочек со старого красного, ставим режим генерации на авто и жмём пробел пока не наберем "Черный", "Белый" и "Серые" оттенки. Фиксирую понравившиеся оттенки нажатием на замочек.

Вот такая палитра набралась

Делаем тестовый дизайн.

Не идеально но и не отвратно совсем

Дальше можно докручивать по вкусу оттенки вручную. Кстати если я не знаю какую иерархию размеров сделать для текста то я использую этот генератор

https://type-scale.com/

В результате все остались довольны