Створення свого дизайну

Попередня ↔ Наступна

Головне завдання інтернет-магазину - продавати. Привабливість магазину з точки зору покупця визначається елементарним необхідним зручністю. Що ж це за зручність?

Процес покупки з точки зору покупця

Покупцеві, потрапивши в магазин, треба переконатися (і швидше), що:

він потрапив в магазин з потрібним йому асортиментом товарів,
магазин знаходиться в його населеному пункті або може йому доставити товар,
він може ознайомитися з правилами роботи магазину,
він може ознайомитися з процесами оплати і доставки товару і є механізм контролю цих процесів,
він може оперативно зв'язатися з персоналом магазину для уточнення будь-яких питань;
він швидко може зрозуміти:
- як визначити наявність потрібного товару,
- як отримати інформацію про обраний товар,
- що зробити, щоб зробити покупку.

Що повинно бути на сторінках сайту магазину

Покупець прийшов в інтернет-магазин. Що йому хочеться побачити на станицях зацікавив інтернет-магазину? Що захотіли б Ви побачити, прийшовши в інтернет-магазин як покупець? Логічно припустити:

напрям діяльності,
місце "базування" магазину,
навігаційне меню,
поле введення для пошуку в магазині,
назва магазину.

Яку інформацію шукає покупець в меню? власне:

Так що таке хороший дизайн?

Хороший дизайн - це простота і зручна навігація, зрозумілий і комфортний інтерфейс. Покупцеві відразу повинно бути зрозуміло, як шукати, де кошик, як платити і де отримати товар. І нехай всі основні кнопочки будуть досить великими, тоді покупцеві не потрібно буде довго прицілюватися, щоб в них потрапити.

про красу

Далі: поменше прикрас. Інтернет-магазину в першу чергу потрібна функціональність; саме в функціональності і повинен проявитися весь професіоналізм творця дизайну магазина. Дизайн для інтернет-магазину полягає в правильно спроектованої структурі, ідейній цілісності і зручність для відвідувачів. а зовсім не в разляпістих картинках, в яких частенько самовиражаються дизайнери. Інтернет-магазин завжди містить великий масив інформації, не треба додавати зайвого. Від великої кількості банерів, мигтять, сіпаються флешок, покупцеві складно зосередитися і у нього може виникнути бажання скоріше закрити цю сторінку.

Про швидкість завантаження

Про фотографіях і описах

Однак, сказане не означає, що треба економити на фотографіях і докладних описах товарів. Покупець обов'язково забажає добре розгледіти потенційну покупку - ну так ось і показуйте йому великі якісні фотографії товару за його запитом. нагадавши, що скачуваний обсяг інформації значний - і, може, доведеться трохи почекати.

Дайте клієнтові максимум інформації про товар. Робіть докладний опис товарів, копії опису з сайту виробника може бути недостатньо. На самий крайній випадок - поставте посилання на сайт виробника, де така інформація міститься. Хоча, йдучи за подробицями на сайт виробника, відвідувач магазину по дорозі може забрести до конкурента або ж до рекомендованого виробником дилеру.

Про якість

Але! Простий дизайн не означає відсутність дизайну взагалі. Убогий вигляд і тексти з помилками гарантовано викличуть недовіру відвідувача - магазин слід робити якісно.

Про деякі сторінках

Але найважливіша сторінка - "Товари". Тут продавці зазвичай самі знають як що розташовувати. Однак, до каталогів з товарами є маса вимог, частина з яких суперечливі. Ось, скажімо, деревоподібна структура. Вона хороша, але галузиться за однією ознакою, наприклад за призначенням. А як бути, якщо покупця цікавлять тільки вироби одного певного виробника? - фільтрувати очевидно. А якщо двох? - це вже складніше. А за ціною результат впорядкувати? Загалом, не все так очевидно. Чи можна приклад привести настільки екзотичної ситуації? - так легко, і не екзотична вона зовсім! Потрібен, скажімо, відвідувачеві мінімальної вартості жорсткий диск 2,5 ", SATA, виробництва Hitachi або Seagate, ємністю від 120 Gb з наявних зараз в наявності. Швидко він його знайде в магазині?

У будь-якому магазині, як правило. є "пошук". І, як правило, для вирішення подібних завдань непридатний. Зручний був би пошук, що виводить список знайденого за запитом на сторінку, з можливістю пошукати ще по ній по іншому запиту (шукати в знайденому). Ідеально, якщо ще й сортувати підсумковий список з будь-якого параметру товарів можна було.

Крім перерахованого, на одній зі сторінок сайту магазину потрібно визначити свою систему взаємовідносин з клієнтом і висловити її:

в публічній пропозиції до укладання договору (оферті);
механізмі вступу в силу такої угоди;
в правилах користування сайтом.

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

Про застосовуваних кольорах

Підбирати кольори для оформлення магазину слід обережно. Вони повинні:

забезпечити читаність написів і помітність кнопок,
добре поєднуватися один з одним на одній сторінці,
забезпечити "впізнаваність" марки, якщо магазин фірмовий,
бути привабливими для цільової аудиторії.

Цього може виявитися непросто досягти, якщо не випускати з уваги, що:

у відвідувача і дизайнера різні як за розміром, так і по перенесенню кольорів дисплеї (і настройки у них теж, зрозуміло, різні),
різні браузери можуть дещо по-різному відображати кольору одного і того ж елемента сторінки.
у відвідувача може бути включений режим відображення з малою кількістю квітів (2, 16, 256, 65536),
у відвідувача може бути відключений режим завантаження графіки в момент його заходу в магазин.

Ознакою хорошого дизайну буде, якщо при більшості перерахованих варіацій сайт магазину залишиться придатним до використання за призначенням.

Перевірте, як відображається ваш інтернет магазин в різних браузерах, операційних системах і з різним дозволом. Зробити це можна на сервісах:

Кожну сторінку інтернет-магазину веб-браузер відвідувача відображає в результаті інтерпретації її вихідного коду, який прийнятий з сервера.

Код сторінки формується на сервері шляхом об'єднання кількох елементів:

Вигляд сторінки формується браузером відвідувача:

Більш детально процес формування коду сторінки описаний тут

Слід мати на увазі, що різні браузери і навіть різні версії одного браузера можуть кілька різна формувати зображення сторінки з одного і того ж коду сторінки.

Деякі браузери мають можливість показати не тільки результат інтерпретації коду сторінки, а й сам код сторінки в тому вигляді, в якому він був прийнятий з сервера, що можна використовувати при налагодженні компонентів коду.

шаблон сторінки

Шаблон сторінки - це текст на мові HTML, що є основою, каркасом для формування образу сторінки. Шаблон містить крім HTML-тексту посилання на файли зображень і вставки на мові "Liquid", що дозволяють включати в текст сторінки змінювані дані з бази даних магазину.

Процес внесення змін до шаблони описаний тут.

Змінні дані на сторінці

Дані на сторінці формуються вставкою в текст сторінки результатів виконання операторів мови "Liquid", що містяться в шаблонах сторінок. Про застосування мови "Liquid" можна прочитати тут. Доступні об'єкти в шаблонах стандартного набору тим перераховані тут.

файли стилів

Файли стилів передаються сервером в складі тексту сторінки і застосовуються веб-браузером відвідувача до сформованого змісту сторінки відповідно до правил мови CSS.

Процес внесення змін у файли стилів (.css) описаний тут.

Процес внесення змін у файли скриптів (.js) описаний тут.

Зображення на сторінці

Зображення - це файли, що містять картинки в різних форматах (.png. Jpg. Gif), які показуються веб-браузером в місцях сторінки, визначених у тексті шаблону сторінки.

Процес завантаження нових файлів зображень описаний тут.

Перш ніж перейти до роботи над власним дизайном, треба відповісти на питання:

Навіщо змінювати дизайн магазина?

Зміна дизайну магазина може переслідувати різні цілі:

зробити свій магазин відрізняється від інших, які використовують ту ж стандартну тему;
зробити свій магазин більш привабливим для цільової групи відвідувачів;
зробити свій магазин зручнішим для відвідувачів, ніж це зроблено в стандартних темах;
врахувати в оформленні та системі навігації магазину характер пропонованого асортименту товарів:
змінити спосіб обробки деяких подій: наприклад, замість приховування з вітрини відсутнього товару показувати напис "Під замовлення" або кнопку "Сповістити про надходження".

Зміна стандартної теми

За допомогою зміни стандартної теми можна підібрати вид і набір функцій магазину, найбільш близький до того, що Ви хочете отримати в результаті. Це може помітно спростити подальшу модифікацію магазину. Тему слід змінити, якщо:

інша тема має набір можливостей ближче до требующемуся Вам, ніж поточна тема;
інша тема має візуальне оформлення ближче до требующемуся Вам, ніж поточна тема.

Як здійснити зміну теми магазину і можливості стандартних тим описані тут

Додавання і зміна сторінок

Додавати нові сторінки буває потрібно для:

Цей список, зрозуміло, не є вичерпним. Як створити нову сторінку сайту магазину або відредагувати наявну описано тут.

зміна навігації

Для того, щоб додані сторінки стали доступні відвідувачам магазину потрібно помістити посилання на них в навігаційні панелі.

Створення та налагодження меню описані тут.

зміна теми

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

Налаштування теми

Входить в можливості деяких тем. Дозволяє налаштовувати колір фону, колір і гарнітуру шрифтів.

заміна зображень

Найбільш просто зробити свій магазин відрізняється від інших, які використовують ту ж стандартну тему, можна замінивши зображення, які використовуються на сторінках магазину.

Як завантажити нові файли зображень, написано тут.

зміна шаблонів

Зміною шаблонів можна досягти зміни вигляду сторінок магазину, тобто компонування, місця розміщення, розміри, колір, фон та інші параметри різних частин сторінки з відображеними на цих частинах інформацією. Ці зміни можуть бути різні для сторінок різного призначення, так як опи мають різні шаблони.