Россия
strongstusio.com Share

StrongStusio

StrongStusio - Возьмем лень за горло! Добрый день! Меня зовут Константин, я создатель стартапа StrongStusio. Мы хотим приобщить подростков к спорту и здоровому образу жизни, дать им возможность разв...
Страна: Россия
Город: Казань
Год основания:
Количество сотрудников:
Специализация:
Продукты и сервисы:
Технологии:
Количество приложений: 0
PR/Медиа:
Ничего не найдено.
 
 
08-07-2016, 11:16
StrongStusio

Дизайн UI/UX - Stronger

Приветствую! Думаю, многие задаются вопросами подобными этим:

Как нарисовать красивый дизайн? Как продумать супер UI?

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

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

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

Шаг 2. Разбивка списка по экранам. 

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

Шаг 3. Прикидка расположения элементов на бумаге. 

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

538e9f3d8b8274.11702100.JPG

Шаг 4. Продумываем расположение каждого элемента. 

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

538e9fe681dd12.28235418.JPG

Шаг 5. Добавляем цвет. 

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

538ea005c8ad29.16423962.JPG

Шаг 6. Перерисовка в Photoshop. 

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

538ea02feac521.67843956.jpg

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

538ea0427fa6b8.51068433.png

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

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

 
Мануал
дизайн
Stronger
StrongStusio
ux
ui
iOS
Android
0 0 0

Чтобы оставлять комментарии вам необходимо зарегистрироваться