З чого починається розробка дизайну сайту?

31

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

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

Перші кроки

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

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

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

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

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

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

назва компанії, інтернет-магазину, інформаційного ресурсу;

меню навігації (один або кілька блоків);

логотип компанії, інтернет-магазину, інформаційного ресурсу;

контентний блок;

додаткові блоки для рекламних банерів та іншої текстової або графічної інформації.

Перед початком розробки сайту (веб-дизайну) бажано ознайомитися з інтернет-порталами конкурентів і взяти на замітку ті рішення, які вони вибрали. Базове уявлення про те, як це роблять інші, допоможе сформувати у вашій голові приблизну візуальну модель майбутнього проекту, доопрацьовану під певну спрямованість.

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

Щоб швидше зрозуміти, що таке модульна сітка, згадайте формат аркуша журналу або газети. Там текст розбивається на 2-6 колонок для зручності читання. Та ж ситуація і у веб-дизайні (розробці сайтів). Складним інформаційним ресурсам краще використовувати продумане розташування модулів, щоб людині було комфортно проводити довгий час за читанням.

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

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

Найбільш зустрічається співвідношення сторін ліворуч і праворуч — 40 на 60%. Розташування блоків не має строгих, узаконених державою стандартів. В цьому плані ви Ван Гог — творіть, тільки вуха свої не чіпайте.

Рекомендації щодо оформлення дизайну

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

1. Презентаційні (лендінгем, сайти-візитки).

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

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

2. Корпоративні.

Візуальне оформлення цього формату сайту зобов’язана відповідати фірмовому стилю компанії або організації. Особливі дизайнерські надмірності тут ні до чого. Постарайтеся зробити сайт зручним для користувачів. Досягти цього можна шляхом збалансування графічного і текстового контенту. Модульна сітка при корпоративному форматі сайту 2-х або 3-х колоночная.

3. Інформаційні.

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

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

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

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