31

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

В свободное время решил нарисовать экран карточки товара для мобильного приложения.

Заснял весь процесс, так, как если бы работал для заказчика, в два этапа:

1) Прототипирование (balsamiq)

2) Дизайн (sketch)


Прототипирование:

Дизайн:

Итог:

Процесс дизайна карточки товара для мобильного приложений Дизайн, IOS, Интерфейс, Видео

P.s. отвечу на вопросы в комментах, могу сбросить исходник, если кому интересно.

Дубликаты не найдены

+4

Прикольно, молодец -)
Было бы интересно посмотреть процесс разработки сценария взаимодействия с ui

+3

В чем прикол был юзать бальзамик?

раскрыть ветку 2
+2
В данном случае, думаю незачем. А вот если конкретный проект с кучей экранов, то да без прототипа тяжело. Думаю, автор пытался продемонстрировать принцип разработки дизайна для мобильного приложения.
раскрыть ветку 1
-1

что у него вышло на 5 - просто и понятно)

+1
Вместо "купить за 15000" лучше написать "добавить в корзину" или типа того.
Иначе непонятно что дает кнопка корзины. Так же, судя по тому, что наверху написано "футболки", мы находимся на главной странице описания товара, но не видим ничего, кроме опции выбора цвета и размера. Я думаю, было бы неплохо засунуть туда еще кнопочку/переключатель "подробнее о товаре", где будет написано о типе ткани, стране-производителе и прочая инфа, которую маркетологи захотят засунуть в карточку товара.
Ну а чисто визуально если смотреть, выглядит неплохо.
раскрыть ветку 5
0
Я думаю, было бы неплохо засунуть туда еще кнопочку/переключатель "подробнее о товаре", где будет написано о типе ткани, стране-производителе и прочая инфа, которую маркетологи захотят засунуть в карточку товара.

Мне кажется было бы интереснее вот так сделать:
Панель с цветом выезжает по желанию пользователя и скрывает текст описания товара, но это как из вариантов)

Иллюстрация к комментарию
Иллюстрация к комментарию
раскрыть ветку 4
0
Фиг знает. Мне кажется картинки и иконки люди больше любят. А текст почитать это уже после того как картинки привлекли внимание.
раскрыть ветку 1
0
Если хочешь продать товар, то нужно манипулировать кнопкой "Купить" а не прятать ее.
раскрыть ветку 1
+1

Может вопрос совсем не в тему, но с чего лучше начать изучать Sketch (интересуют гайды, мануалы, видеокурсы)

раскрыть ветку 2
+2
Поищи в инете книжку jump start sketch.
Методом тыка я тоже его быстро освоил, но книжка поможет понять что ты ничего не упустил
+1

Скетч изучается за один день методом тыка) очень простой для изучения интерфейс

0

Не знаю как на нативных приложухах, но на адаптивах и мобильных сайтах Awesome не пашет на винде и встречается даже  на айфонах + при некоторых кеглях Awesome шакалит хуже png, по мне дак лучшая альтернатива это использование svg обжектом или прямо в html, что даёт ещё и потенциал на дальнейшую доработку в виде svg анимации этих же иконок. Нет параметров и хар-к, а особенно, материала (хлопок, полиэстер и т.д.) конкретно для одежды. "Купить за 15к" опять же, не знаю как на нативных, но на сайтах чтобы запихнуть динамическую величину в кнопку нужно изрядно покостылять. На счёт картинки товара, давайте будем честными , в России ещё рановато ориентироваться на каталог товара с хорошими, тем более с однотонным фоном, фотографии. в подавляющем большинстве из фида выплёвываются тысячи шакалов с разнообразным фоном, название футболки просто будет не видно в некоторых случаях.

раскрыть ветку 1
0
в России ещё рановато ориентироваться на каталог товара с хорошими, тем более с однотонным фоном, фотографии.

я чет не понял. Можешь объяснить?

0
Что это был за сайт с иконками?
раскрыть ветку 2
+3

Font Awesome.

http://fontawesome.io/icons/

раскрыть ветку 1
0

Благодарю.

0

А на чём бэк написан?

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