С чего приступить к разработке дизайна интернет-магазина?

Question

[vikarik]

Доброго времени суток!

Господа дизайнеры, подскажите пожалуйста, при отрисовке дизайна для интернет магазина, нужно ли в фотошопе отрисовывать абсолютно все страницы либо можно сделать какой-то общий шаблон для однотипных страниц и в таком виде передать его верстальщику?

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

Спасибо заранее за ответы-советы!))

Answer 1

[Natan]

@vikarik
Делайте страницы:
- Главная
- Страница с товарами
- Страница с выбранным товаром
- Страница с информацией (для инфы по контактам, инфо о фирме и т.д.)

Самое основное это согласовать первые три страницы (главная, товары, описание выбранного товара). Страницы с инфо о товаре может и не быть, мб у Вас там всплывающее окно при клике будет.

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

На хабре почитайте:
7 основных принципов юзабилити для интернет-магазинов
Продающий дизайн интернет-магазина. Часть 1. Аналитика
Продающий дизайн интернет-магазина. Часть 2. Элементы интерфейса
Продающий дизайн интернет-магазина. Часть 3. Дизайн элементов

Comments

[vikarik]

Спасибо за ответ! То есть каждую страничку для конкретного товара с его описанием не нужно предоставлять верстальщику(одинаковые страницы, меняется только инфа)? Будет достаточно сделать только одну ?

[Natan]

@vikarik да, один общий шаблон, а уникальная инфа по товару (фото, описание и т.д.) должна браться из базы, заполнение которой уже к дизайнеру отношения не имеет.

Но если товаров мало (мб магазин чисто для продажи пары книжек), то вполне может потребоваться уникальный дизайн, под каждую страничку с описанием конкретной книжки. Только о том что продавать, и что хочет заказчик не должен гадать дизайнер, а Вам должен менеджер сказать или заказчик, если Вы с ним напрямую работаете.

[vikarik]

Ух)))Спасибо огромное! Очень толково и понятно объяснили!Пошла читать хабр)

[Natan]

@vikarik Еще бывает что заказчик хочет как-то выделить и дополнительно стилизовать страницы с товарами в зависимости от категории товара, но это всё из разряда хотелок. Если за хотелки готовы оплатить, делайте. :)

Если Вам что-то не понятно или в чем-то не уверены, уточняйте у заказчика или у того кто с ним общается. Дизайн сразу на 100% не стоит прорабатывать, иногда лучше сделать парочку набросков и спросить какой вариант больше нравится.

[vikarik]

Хорошо!)Обязательно воспользуюсь Вашими советами!Спасибо:)
А по стоимости сможете меня сориентировать? Сколько стоит в среднем не сильно замудрённый дизайн интернет-магазина с предоставленным хорошим ТЗ?

[Natan]

@vikarik сколько стоит час Вашей работы? Умножьте на время, которое Вам потребуется на работу, вот и стоимость. Если заказчик солидный, то можете немного побольше попросить, если босяк и хочет подешевле, то соответственно попробуйте побыстрее сделать и еще какую-нибудь скидочку ему сделайте.

[vikarik]

Спасибо! :)

[Natan]

@vikarik Удачи :)

Answer 2

[Glomen]

1) Нужно сделать прототипы и согласовать с заказчиком (Взять готовые UI шаблоны)
2) Согласовать прототипы с заказчиком
3) Отрисовать главную страницу
4) Согласовать с заказчиком
5) Отрисовать внутрении

Вот пример кейса blog.sibirix.ru/2014/09/29/lux-gifts

Comments

[vikarik]

Спасибо! Весьма информативный кейс)

Answer 3

[Никита Зайцев]

При разработке структуры сайта важно начать с проработки модели конверсии - пошагового алгоритма успешного (приносящего заказы) поведения пользователя на сайте.
Это не стандартизируемый процесс - для каждого сайта свой алгоритм
Почти никто этого не делает и поэтому так часты последующие доработки сайта
А если изначально вдумчиво проработать модель поведения то сайт будет давать максимально возможные для него конверсии
При разработке мыслить можно так:
- Какие этапы принятия решения происходят в голове пользователя
- Какие практические шаги, действия должен выполнить пользователь чтобы достичь страницы благодарности за заказ - это на самом деле ваша основная целевая страница на сайте, остальные лишь промежуточные на пути к цели
- Практические шаги часто подразумевают вариативность (зарегин пользователь или нет, раньше делал покупку или нет и так далее) поэтому модель поведения нужно прописывать с вариантами А и Б, на практике больше вариантов конечно.
Делать это можно в МС ворд или визио.
Черпать идеи лучше у сайтов-лидеров вашей тематики
И только потом накладывать дизайн на модель поведения

Только тогда вы сможете создать действительно продающий сайт

Comments

[vikarik]

Спасибо большое за ответ! Очень нужный и важный комментарий!

Answer 4

[Алексей Новик]

Предоставленные ответы в целом верно описывают ситуацию.
Исключение только одно - титульную рисуйте в последнюю очередь. Обычно это самая проблемная страница в плане одобрения со стороны заказчика.

Кроме того, то что лично я практикую: разбираю бизнес заказчика "по косточкам", чтобы понять как лучше сделать ему и пользователю; потом идут прототипы в axure/balsamiq -- их собирать быстрее и проще, чем рисовать дизайн и только потом, когда прототипы разобраны и одобрены, идет отрисовка визуальных стилей.

Comments

[vikarik]

Спасибо за полезный и дельный комментарий!