Як створити дизайн сайту?

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

По суті, весь процес дизайну можна розділити на три етапи: створення начерку, створення макета в графічному редакторі, верстка дизайну. Начерк дизайну можна намалювати в простому фоторедакторі або звичайним олівцем на листку паперу. Що стосується макета, то в основному дизайнери використовують Photoshop як найпотужніший графічний редактор з нині існуючих. Для верстки дизайну вам потрібно знання мови гіпертекстової розмітки і CSS. Перед створенням власного дизайну задайте собі кілька простих запитань: чи знаю я HTML і CSS, а також вмію я працювати з графічним редактором?

Якщо ви відповісте негативно, то далі першого етапу процес створення дизайну нікуди не рушить. Начерк намалювати нескладно, а от зробити макет і зверстати готовий дизайн може не кожен користувач. Внаслідок чого рекомендується для початку підучити ази HTML | CSS, а також переглянути кілька навчальних відеороликів про Фотошопі, щоб знати, де знаходиться кожен інструмент, як застосовувати фільтри і багато іншого.

Перед тим як почати малювати начерк, створіть образ майбутнього дизайну в голові. Врахуйте, що будь-який дизайн складається з наступних частин:

• «Шапка» сайту - верхня частина будь-якого дизайну, що включає, як правило, логотип, назву сайту і пару кнопок (контакти, про автора). Шапка може бути різної висоти, але зазвичай цей параметр не перевищує 300 пікселів. Нерідко у верхній частині сайту зустрічаються пошукові форми і рекламні банери.

  

• «Сайдбар» - бічне меню сайту. В сайдбарі розміщуються вторинна інформація і додаткові елементи: блок зі свіжими статтями, пошукова форма, різні опитування та календарі, посилання, реклама, елементи навігації по ресурсу. У дизайні сайту може бути використано кілька сайдбарі, але зустрічаються дизайни і без бічних колонок.
• «Підвал» - нижня частина сайту. У ній зазвичай міститься посилання на основний ресурс і копірайт в стилі «(с) 2014 Найкращий сайт». Але за останні роки концепція «підвальній» частини дизайну змінилася з появою мобільних пристроїв. У «підвалі» почали обґрунтовуватися елементи, які зазвичай розміщуються в сайдбарі.

  

• «Основна частина» - блок, в якому розміщується основний контент. Більшість дизайнерів розміщують основну частину сайту по центру, щоб зручніше було читати матеріал.

  

Отже, тепер ви знаєте, з яких блоків складається сайт. Пора приступити до вирішення питання, як створити дизайн сайту самому. Відкрийте найпростіший фоторедактор (вистачить і Paint) і створіть новий шаблон з дозволом 1280x1024. Відразу варто нагадати, що при створенні сайтів не використовуються метричні виміри. Всі блоки «вимірюються» в пікселях.

Наприклад, ви вирішили зробити начерк з одним сайдбарі. Розмітьте в графічному редакторі кордону підвалу, шапки сайту і сайдбара.

У вас з'явилася ідея зробити кілька бічних колонок, а контент розмістити в центрі? Чудово, але при розмітці враховуйте ширину сайдбарі і місце під основний контент. Бічні колонки не повинні бути занадто широкими (не більше 300 пікселів), а під основний контент потрібно залишати мінімум 500 пікселів, інакше текст буде незручно читати.

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

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

Почніть заповнювати кожен блок макета графікою. Експериментуйте з квітами і фоном, створюйте свої елементи і кнопки. Втім, в інтернеті знайдеться величезна кількість різних фонів, кнопок для створення дизайну.

Коли макет буде остаточно готовий, розріжте його на блоки і зверстати з нього дизайн. При цьому підписуйте кожен шар, щоб його було простіше верстати.

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

Запам'ятайте три простих правила «відмінного дизайну»:

• текст повинен бути добре читаємо навіть при відключених картинках в браузері;
• намагайтеся не використовувати «вирвіглазние» кольору;
• створіть зручну навігацію по сайту.

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