логотип студии Web-Wizard
Москва, Коминтерна, дом 7, корп.2
Москва, Угловой переулок, дом 10
Пн. - Пт.: 10.00 - 19.00
Сб. - Вск.: выходной

ДИЗАЙН И ВЕРСТКА ИНТЕРНЕТ МАГАЗИНА

Создавая интернет магазин, нужно помнить о его внешнем виде. Старая пословица гласит, что «встречают по одежке» и это правда. Дизайн и вёрстка являются двумя составляющими внешнего вида любого сайта и им стоит уделить отдельно внимание. Если интернет магазин планируется продвигать в ТОП и иные методы привлечения клиентов использоваться не будут, то на дизайн не стоит обращать никакого внимания. Естественно только в первые три месяца после старта. Причиной тому является тот факт, что в первые три месяца Ваш магазин будут видеть только Вы и Ваши друзья, так как в поисковой выдаче его на хороших позициях гарантированно не будет. Так происходит потому, что к новому сайту поисковые системы относятся с недоверием и не ставят сайт в ТОП по коммерчески интересным запросам. В связи с этим, можно не тратить больших денег на создание дизайна на старте, а вложиться в продвижение интернет магазина. Хорошим выходом из положения будет шаблон или готовый дизайн, так как они стоят недорого и достаточно современно выглядят. А когда пойдут посетители на сайт, то можно заказать разработку индивидуального дизайна для интернет магазина и сделать его редизайн.

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

  • индивидуальный дизайн;
  • готовый дизайн;
  • коммерческий шаблон;
  • бесплатный шаблон.

Индивидуальный дизайн интернет магазина всегда существует в единственном экземпляре. Каждая деталь такого дизайна уникальна. Преимуществами индивидуального дизайна являются его яркость, привлекательность, тематичность и запоминаемость. Последнее, пожалуй, самое главное. Уникальный дизайн являются частью брендинга интернет магазина, так же как и логотип, слоган, фирменная упаковка и т.д. Также к преимуществам индивидуального дизайн можно отнести тот факт, что его компоновка и структура выглядят в точности так, как хочет заказчик. Недостаток у уникального дизайна только один – цена. Разработка уникального дизайна – удовольствие не из дешевых. Стартовая цена составляет от 20 000 рублей и выше в зависимости от сложности исполнения. На стоимости отражается наличия в дизайне динамических, анимированных flash-элементов, компоновки, вёрстки, количества предлагаемых вариантов и т.д. Самые дорогие дизайны по стоимости достигают 300 000 рублей.

Готовый дизайн интернет магазина – это дизайн, который уже разработан без участия заказчика. Обычно, такой вид дизайна путают с шаблонным, однако, это неверно. Готовый дизайн разрабатывается веб-студией на свой страх и риск (не известно, купят его или нет), для конкретной тематики бизнеса, например, мебель, книги, автозапчасти и т.д. Преимуществами готового дизайна являются:

  • целостность (ничего не надо разрабатывать, Вы покупаете товар лицом);
  • быстрота установки, обычно не более 2-3 дней;
  • цена - готовые дизайны обычно стоят не очень дорого (до 20 000 - 25000 рублей).

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

Коммерческий шаблон интернет магазина – вид готового дизайна, который продаётся многократно. Стоимость такого дизайна обычно не выше 400 долларов США. Шаблоном он называется потому, что при его установки на несколько сайтов они имеют одинаковый внешний вид. Обычно, коммерческие шаблоны продаются не более 10 раз. Многие обыватели начинают падать в обморок – дескать, как так платишь 400 долларов и ещё параллельно можно найти десяток аналогов! Где же индивидуальность, за что платим деньги? Однако, это ложное представление о коммерческих шаблонах, так как если учесть какое число сайтов одновременно существуют в Интернете, то мало вероятно, что даже 2 одинаковых шаблона пересекутся в поисковой выдаче и станут доступны одним и тем же посетителям.

И даже если такое произойдёт, то также маловероятно, что посетитель откажется покупать в интернет магазине из-за того что «за углом» он видел такой же. Лимитирующем фактором покупки в интернет магазине являются отзывы о магазине, наличие реквизитов, службы поддержки и, естественно, цена, так как в Интернет идут за покупками прежде всего из-за того, что там самые низкие цены. Преимуществами коммерческого шаблона являются:

  • яркость и запоминаемость;
  • невысокая цена;
  • быстрота внедрения.

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

Все коммерческие шаблоны имеют выкупную стоимость. Это означает, что если шаблон ещё никто не приобрел, то Вы можете купить его единоразово и тогда Вы получите индивидуальный дизайн. Стоимость выкупа обычно варьируется от 2500 долларов до 10000 долларов США Также стоит обратить внимание на тот факт, что многие российские веб-студии зачастую выдают коммерческие шаблоны за свои индивидуальные решения и продают их по троекратной цене. Признаком того, что Вам продают шаблон является множественность выбора вариантов дизайна по сравнительно доступной цене. Естественно, если Вам в течение недели представили несколько различных вариантов дизайна, при оплате в пару десятков тысяч рублей, то можете не сомневаться – Вам продают шаблон, так как разработка одного качественного дизайнерского решения требует времени не менее недели и стоит от 20000 рублей. Примерно столько же стоит и перевёрстка шаблона от одной CMS для другой.

Бесплатные шаблоны для интернет магазина – вид готового дизайна, который предоставляется бесплатно. Обычно они появляются вследствие устаревания дешевых коммерческих шаблонов. После того как коммерческий шаблон продаётся несколько раз, его цена снижается в несколько раз, потом снова производится уценка, пока количество скачиваний не дойдёт до нескольких десятков. После этого веб-студии выкладывают его демо вариант (упрощённый вариант) для бесплатного пользования. В итоге количество их скачиваний может исчисляться тысячами.

Преимущество бесплатного шаблона только одно – отсутствие цены. Во всём остальном есть много недостатков - вплоть до наличия спам ссылок в коде. В итоге, бесплатные шаблоны – это удел очень дешевых проектов или же самостоятельных «проб пера». Напоследок развеем миф. От использования шаблонов может произойти понижение позиций интернет магазина в поисковой выдаче. Это в корне не верно и является мифом. Современный поисковый алгоритм прежде всего оценивают качество и количество полезной и уникальной информации на сайте.

Вёрстка дизайна интернет магазина – это комплексный процесс преобразования графического исходника дизайна (макет или PSD-шаблона) в код готовых веб-страниц. После того как дизайн разработан и представлен в виде рисунка (обычно PSD-шаблон), нужно перевести его итоговый код, который корректно будет восприниматься всеми браузерами. От качества вёрстки зависит то, как Ваш сайт будет восприниматься, как будет индексироваться поисковыми системами и, соответственно, как выдаваться в поисковой выдаче. Обычно, при создании сайта интернет магазина, вёрстке уделяют очень мало внимания, но это критично, так как криво свёрстанный интернет магазин – это одна большая проблема. Для того чтобы Вы могли проконтролировать вёрстку Вашего интернет магазина нужно как минимум проверить его корректное открытие в различных браузерах (Mozilla, Opera, Chrome, Explorer, Safari). Также нужно проверить не "наезжают" ли отдельные элементы дизайна друг на друга. Если указанные выше два пункта не будут выдержаны, то Ваш интернет магазин отвергнут в первую очередь пользователи, которые просто уйдут из "кривого" интернет магазина.

По отображению на экране вёрстка делится на два типа:

  • "резиновая" вёрстка;
  • статичная вёрстка.

При "резиновой" вёрстке дизайн сайта расползается и сужается в зависимости от размеров экрана, будь то 50 дюймов или же 10. Преимуществом такой вёрстки является максимально полезное использование пространства экрана. Минусом может являться тот факт, что при таком типе вёрстки трудно оптимально подобрать размеры составляющих дизайн отдельных элементов и при слишком маленьком экране возможен наезд элементов друг на друга. Вторым минусом может быть «подвешенность» некоторых графических элементов (баннеров, слайдеров и т.д.) на слишком широких экранах, то есть элемент может выглядеть «одиноким в дизайне», так как при "резиновой" верстке трудно сохранить непрерывность и взаимодополняемость линий дизайна.

Статичная или фиксированная вёрстка имеет чёткое разрешение. Не важно какого размера экран, сайт всё равно будет отображаться в фиксированном размере. В связи с этим, могут появляются полосы прокрутки на маленьких экранах или же страница будет выглядеть тонким листом на широком экране. Вполне логичным является вопрос, а на какое разрешение использовать вёрстку, есть вёрстка на 970 px, есть на 1024 px, есть на 1200 и т.д. Однозначного ответа нет, но при выборе необходимо помнить о большинстве пользователей, которые используют экраны диагональю не более 15 дюймов. Поэтому стоит использовать узкую вёрстку не более 1200 px.

По типу технического исполнения стоит выделить:

  • табличную вёрстку (представляет собой вёрстку макета в виде таблицы);
  • блочную вёрстку (на основе блоков или div -ов).
Не важно какой вариант вёрстки выбирать - при качественном исполнении и тот и другой вариант дадут одинаковый результат. При сдаче работы по разработке сайта интернет магазина не должны наезжать друг на друга элементы его дизайна. Не допустимо обнаружение кусков кода на страницах сайта. Если что-то подобное было замечено - в верстке допущены ошибки. Всё остальное – дело вкуса!