Будь-який власник сайту мріє про унікальний дизайн для свого ресурсу. Всім відомо, що людину зустрічають по одягу. Це ж стосується і сайту, так як в першу чергу відвідувач звертає увагу на дизайн проекту, а потім вже на вміст. Якщо оформлення буде занадто яскравим або, навпаки, похмурим, користувач незабаром покине ресурс. Не варто переповнювати інтернет-сайт і зайвими елементами, так як часто веб-ресурси з мінімалістичним дизайном виглядають куди цікавіше. Як створити дизайн сайту?
По суті, весь процес дизайну можна розділити на три етапи: створення начерку, створення макета в графічному редакторі, верстка дизайну. Малюнок дизайну можна намалювати в простому фоторедакторі або звичайним олівцем на листку паперу. Що стосується макета, то в основному дизайнери використовують Photoshop як найпотужніший графічний редактор з нині існуючих. Для верстки дизайну вам буде потрібно знання мови гіпертекстової розмітки і CSS. Перед створенням власного дизайну задайте собі кілька простих запитань: чи знаю я HTML і CSS, а також вмію я працювати з графічним редактором?
Якщо ви відповісте негативно, то далі першого етапу процес створення дизайну нікуди не рушить. Малюнок намалювати нескладно, а ось зробити макет і зверстати готовий дизайн може не кожен користувач. Внаслідок чого рекомендується для початку підучити ази HTML | CSS, а також переглянути кілька навчальних відеороликів про Фотошопі, щоб знати, де знаходиться кожен інструмент, як застосовувати фільтри і багато іншого.
Перед тим як почати малювати ескіз, створіть образ майбутнього дизайну в голові. Врахуйте, що будь-який дизайн складається з наступних частин:
- "Шапка" сайту - верхня частина будь-якого дизайну, що включає, як правило, логотип, назву сайту і пару кнопок (контакти, про автора). Шапка може бути різної висоти, але зазвичай цей параметр не перевищує 300 пікселів. Нерідко в верхній частині сайту зустрічаються пошукові форми та рекламні банери.
- "Сайдбар" - бічне меню сайту. В сайдбарі розміщуються вторинна інформація і додаткові елементи: блок зі свіжими статтями, пошукова форма, різні опитування і календарі, посилання, реклама, елементи навігації по ресурсу. У дизайні сайту може бути використано кілька сайдбарі, але зустрічаються дизайни і без бічних колонок.
- "Підвал" - нижня частина сайту. У ній зазвичай міститься посилання на основний ресурс і копірайт в стилі "(с) 2014 Найкращий сайт". Але за останні роки концепція "підвальній" частини дизайну змінилася з появою мобільних пристроїв. В "підвалі" почали влаштовуватися елементи, які зазвичай розміщуються в сайдбарі.
- "Основна частина" - блок, в якому розміщується основний контент. Більшість дизайнерів розміщують основну частину сайту по центру, щоб зручніше було читати матеріал.
Отже, тепер ви знаєте, з яких блоків складається сайт. Пора приступити до вирішення питання, як створити дизайн сайту самому. Відкрийте найпростіший фоторедактор (вистачить і Paint) і створіть новий шаблон з роздільною здатністю 1280 × 1024. Відразу варто нагадати, що при створенні сайтів не використовуються метричні виміри. Всі блоки "вимірюються" в пікселях.
Наприклад, ви вирішили зробити начерк з одним сайдбарі. Розмітьте в графічному редакторі кордону підвалу, шапки сайту і сайдбара.
У вас з'явилася ідея зробити кілька бічних колонок, а контент розмістити в центрі? Прекрасно, але при розмітці враховуйте ширину сайдбарі і місце під основний контент. Бічні колонки не повинні бути занадто широкими (не більше 300 пікселів), а під основний контент потрібно залишати мінімум 500 пікселів, інакше текст буде незручно читати.
Коли основні мітки рознесені, пора доповнити начерк дизайну елементами. Додайте копірайт в підвалі, блок з пошуковою формою, заголовок і т.д. Малюнок дизайну набуде більш цікавий вигляд і не буде являти собою набір геометричних фігур.
Якщо ви навчилися працювати в Фотошопі, то прийшла пора перетворити начерк в макет. Але перед цим визначтеся з квітами сайту. Для новинних сайтів більш підходять білий колір фону, чорний колір тексту і синій колір посилань. Якщо дизайн створюється під сайт жіночої або туристичної тематики, то використовуйте більш яскраві кольори. При цьому не варто робити з дизайну новорічну ялинку, так як велика кількість квітів заважає сприйняттю основного контенту.
Почніть заповнювати кожен блок макета графікою. Експериментуйте з квітами і фоном, створюйте свої елементи і кнопки. Втім, в інтернеті знайдеться величезна кількість різних фонів, кнопок для створення дизайну.
Коли макет буде остаточно готовий, розріжте його на блоки і зверстати з нього дизайн. При цьому підписуйте кожен шар, щоб його було простіше верстати.
З появою мобільних пристроїв популярність адаптивних "гумових" дизайнів зросла. Створити тему для свого сайту може кожен користувач, а ось адаптувати її під всі пристрої під силу тільки справжньому дизайнеру. На початку своєї дизайнерської "кар'єри" постарайтеся почати з простого шаблону.
Запам'ятайте три простих правила "відмінного дизайну":
- текст повинен бути добре читаємо навіть при відключених картинках в браузері;
- намагайтеся не використовувати "вирвіглазние" кольору;
- створіть зручну навігацію по сайту.
Після створення дизайну і перенесення його на сайт обов'язково протестуйте його в різних браузерах. Залучіть друзів і знайомих до тестування, бо чужа критика позитивно впливає на людину. Запам'ятайте основне правило: дизайн сайту повинен подобатися не тільки вам, а й іншим користувачам. Тому завжди прислухайтеся до думки відвідувачів вашого проекту.
