Этапы разработки дизайна и верстки мобильного приложения

Этапы разработки дизайна и верстки мобильного приложения

Мы разберем три этапа разработки приложения:

1) Как происходит процесс разработки дизайна МП

2) Особенности дизайна МП

3) Подготовка к верстке. Нарезка, как самый нудный, но крайне важный этап работы дизайнера

1) Как проходит процесс разработки дизайна МП

Итак! Пройдя этап подготовки и этап проектирования, мы имеем:

— проанализированное ТЗ
— структуру МП
— утвержденный прототип с полностью продуманным функционалом и картой экранов

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

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

Определение концепции

— разработка 2-3 вариантов дизайн-концепций

— анализ разработанных концепций (работа внутри команды)

— выявление единой наилучшей

Утверждение концепции

— представление дизайн-концепции заказчику

— правки

— утверждение дизайн-концепции

Ура! Наконец! Творим!

— отрисовка экранов с применением утвержденной концепции

— создание прототипа

— тестирование

Итог

— презентация прототипа заказчику

— правки

— утверждение проекта!

2) Особенности дизайна МП

Этапы разработки дизайна и верстки мобильного приложения

Основные принципы:

— Чистота

— Простота

— Функциональность

— Удобопользование

Этапы разработки дизайна и верстки мобильного приложения

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

Также не забывайте учитывать формат экрана мобильного телефона и мышление пользователей

3) Подготовка к верстке. Нарезка, как самый нудный, но крайне важный этап работы дизайнера

Зачем нужна нарезка? Почему ее должен делать дизайнер?

С чего начать?

1. Разделим экраны на кластеры по подобным типам
Этапы разработки дизайна и верстки мобильного приложения

2. Для каждого типа экрана создаем лист.
На эскизе отмечаем размеры и выносим все значения шрифта, цвета, расположения и т.п. Отдельно изображаем рядом нарезанные элементы для наглядности.
Этапы разработки дизайна и верстки мобильного приложения

3. Каждый элемент сохраняется в нескольких значениях: например, для ретины и неретины под собственным именем.
Этапы разработки дизайна и верстки мобильного приложения

4. В первую очередь нарезать основные (Tab Вar, Title bar)
Этапы разработки дизайна и верстки мобильного приложения

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

6. Нельзя забывать описывать все действия, учитывать все ситуации. Любые комментарии, которые могут облегчить работу программиста, уместны!

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

Успехов!