Гайд по созданию UI/UX дизайна - Stronger

Приветствую! Думаю, многие задаются вопросами подобными этим: "Как нарисовать красивый дизайн?", "Как продумать супер UI?".

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

Шаг 1. Составление списка необходимых элементов интерфейса.

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

Шаг 2. Разбивка списка по экранам. Страница профиля: фото, имя с фамилией, очки, тренировки, друзья, соцсети. Страница упражнений: список, изображения...

Шаг 3. Прикидка расположения элементов на бумаге. Выкидывай линейку и приступай. Здесь главное не аккуратность карикатуры, а удобство будущего приложения. Чем больше изрисованных листков, тем лучше. Старайтесь изобразить каждую свою идею.

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

Шаг 5. Добавляем цвет. Откопируйте свой мок-ап 10 раз и постарайтесь придумать 10 цветовых тем для своего интерфейса. Используй влияние цвета на эмоции и другие психологические фишки.

Шаг 6. Перерисовка в Photoshop. Отсканируйте свой разноцветный мок-ап, обведите границы всех элементов, добавь цвет, тени и картинки.

Последний шаг — добавление иконок и сравнение с рисунком.

Очень надеюсь, что у вас все получится! Ждем советы, критику и комментарии)

Больше информации ищи на нашем сайте strongstusio.com и группе ВК — vk.com/strongstusio