4. Дизайн, Макет, Кольори
Навіть якщо дизайн не є основною причиною, він може послужити своєрідним поштовхом до ідеї про покупку, а решта приводів для придбання покупець додумає сам. Якщо дизайн добре виконаний, люди очікують, що все інше у товарі теж добре. (Рис. 1, Мал. 2).
Малюнок 1: Автомобіль із наклейками (Richardmasoner)
Малюнок 2: Червоний автомобіль (FotoSleuth)
Ці автомобілі призначені для різних цільових груп. Вони є прикладом різноманітних підходів до дизайну.
Кілька визначень
Хотілося б уточнити певні терміни.
Що таке дизайн?
- «Дизайн» означає план або опис, які відображають функції та зовнішній вигляд об'єкта для досягнення конкретних цілей у певному середовищі, і задовольняють низку вимог.
Термін дизайну може бути використаний у таких областях як:
- мистецтво («майже інстинктивне», «вбудоване», «природне»)
- техніка (розробка дизайну нового автомобіля)
- виробництво (планування та виконання)
- моделювання процесів (моделювання бізнес-процесів)
Що таке макет сторінки?
Макет є частиною «графічного» дизайну, який полягає у розташуванні та обробці стилю елементів (контенту) на сторінці. Якщо говорити мовою Joomla, це розташування модулів та компонентів Joomla у певних позиціях шаблонів.
Що таке кольори?
Кольором є візуальне сприйняття світу людиною. Окремі кольори викликають асоціації з певними об'єктами чи ситуаціями.
Колір HTML і CSS може мати 16 мільйонів різних значень. Поєднання червоних, зелених та синіх значень від 0 до 255, дає понад 16 мільйонів різних кольорів (256 х 256 х256).
Приклад: чорний колір = колір HEX # 000000 = колір RGB RGB (0,0,0)
Деякі інструменти, такі як генератор колірних схем, можуть допомогти вам знайти правильний колір для веб-сайту проекту (рис. 3).
Малюнок 3: Генератор колірних схем
Шаблон включає повторювані елементи, які видно відвідувачам. Шаблони використовуються для мінімальної модифікації фонових елементів та частих змін (або замін) змісту переднього плану.
Веб-дизайн - широкий термін, що охоплює багато різних навичок та дисциплін, які використовуються у сфері виробництва та обслуговування веб-сайтів.
Joomla! – це ще один інструмент у арсеналі веб-дизайнерів.
Хороший шаблон Joomla містить не тільки кольори та графіку. Форма та розташування змісту є настільки ж важливими. Сайт має бути зручним та надійним.
Гарний веб-дизайн це важка праця!
Після того, як сайт запрацював потрібною мовою, більшість людей починають налаштовувати кольори та завантажувати, наприклад, новий логотип, навіть якщо досі не готовий контент. Joomla поставляється із встановленими шаблонами і, так званими, стилями шаблонів. Стиль шаблону є набір опцій таких, як колір, логотип, макет. Можливості конфігурації залежить від шаблону. Деякі шаблони мають величезну різноманітність налаштувань, деякі навпаки - дуже обмежені.
Можна створити стільки стилів, скільки вам завгодно, та призначити їх на різні сторінки сайту.
Структура
Малюнок 4: перша сторінка Joomla!
Позиції
Малюнок 5: Template Manager - Шаблони сайтів
Перед вами підкреслені позиції модулів зі своїми іменами (рис. 6).
Малюнок 6: Модуль позиції - Protostarшаблон
У розділі "Розширення → Керування модулями" (Extensions → Module Manager) можна призначити одну з цих позицій для кожного модуля. Якщо вам потрібний модуль на різних позиціях, можете його скопіювати.
Основні шаблони
Малюнок 7: Template Manager – шаблони для адміністратора
Стилі
Стилі дають можливість створювати та використовувати різні версії одного шаблону. Шаблон має щонайменше один стиль. У цьому стилі конфігурації, такі як зміна кольору або завантаження логотипу, можуть бути налаштовані залежно від шаблону. Ви можете встановити стиль за замовчуванням для свого сайту через «Розширення → Управління шаблонами → Стилі» (Extensions → Template Manager → Styles).
Приклад: індивідуальний стиль
Давайте створимо індивідуальний стиль для нашого сайту:
- Ім'я: cocoate
- Колір шаблону: #f88638
- Рухомий макет
Ви можете створити додаткові стилі, копіюючи їх. Для цього прикладу ми використовуємо фільтр шаблону Protostar (рис. 8).
Рисунок 8: Дублювання стилю
Введіть ім'я стилю та встановіть його за промовчанням для всіх мов. Якщо ви маєте багатомовні сайти Joomla, можна встановити різні стилі для різних мов (мал. 9)
Малюнок 9: Налаштування стилю шаблону
На вкладці «Параметри» можна вибрати шаблон і колір фону, завантажити логотип і встановити, чи буде шаблон фіксованим або рухомим (мал. 10, мал. 11)
Малюнок 10: «Параметри → Стиль»
Рисунок 11: Завантаження логотипу
Кожен стиль може бути призначений до пункту меню. Якщо, наприклад, ви хочете, щоб фон на сайті був зеленим, коли люди натискають на пункт «А» в меню, і щоб фон бувсинім при натисканні на пункт B, може призначити відповідний стиль. У нашому є лише один пункт меню, оскільки досі немає контенту. Призначаємо новий стиль до пункту головного меню (рис. 12).
Рисунок 12: Призначення меню
Після збереження стилю веб-сайт виглядає по-іншому (мал. 13), і завдяки шаблону Protostar сайт відображатиметься коректно і на мобільних пристроях. (рис. 14)
Малюнок 13: Сайт на настільному ПК
Малюнок 14: Сайт на мобільному пристрої
Зміна файлів шаблонів онлайн
Шаблон Joomla є основою стилю і складається з різних файлів. Можливо, змінити центральні елементи шаблону онлайн.
Якщо ви захотіли відредагувати шаблон Protostar, потрібно перейти до «Розширення → Керування шаблонами → Шаблони → Protostar» (Extensions → Template Manager → Templates → Protostar Details and Files) клацнути посилання на файл.
Малюнок 15: Редагування шаблону онлайн
Шаблони сайтів знаходяться у папці «шаблони». Кожен шаблон має власну папку. Під «шаблони»/«системна папка» (/templates/systems folder) знаходяться шаблони файлів для редагування в автономному режимі та шаблон сторінки помилки.
Адміністративні шаблони знаходяться в папці «адміністратор»/«шаблони»(/administrator/templates).