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

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

 

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

Верстка сайту. Етапи виготовлення шаблону:

Верстку сайту неможливо вписати в рамки простого написання коду. Тому етапи цього процесу починаються ще, до написання власне сторінки. Вони виглядають так:

  1. Концепція.  Виходячи з мети створення сайту та поставлених маркетингових завдань, дизайнер розроблює візуальну концепцію та визначає ключові елементи оформлення сторінки.
  2. Макетування. Далі, за допомогою спеціальних графічних редакторів, спеціаліст створює макет майбутньої веб-сторінки. Він створює графічний файл, який по-суті є картиною сайту: тут присутні усі елементи графіки, шрифтів та решти оформлення. Макет можна створити за допомогою програм пакету Adobe: Photoshop, InDesign та Illustrator, або аналогічних програм, як, наприклад, Corel Draw.
  3. Верстка. Для того, щоб сайт візуально став точною копією макета, його умовно розділяють на окремі частини – прямокутні блоки, кожен з яких опрацьовується окремо.  Досягши цього етапу, верстальник починає писати код. Зробити це він може за допомогою використання мов HTML, CSS, jQuery тощо. Кожна з них має свої можливості та обмеження – вибір залежить від типу створеного макету та наповнення майбутнього сайту.Саме тому, якщо ви хочете замовити дизайн сайту, необхідно перш за все визначитись з типом макету, адже від цього залежить  функціональність першого. Себто, необхідно визначити, як відображатиметься веб-сторінка на пристроях з різним розміром екрану: від персональних комп’ютерів до планшетів та смартфонів.

Різновиди дизайну верстки веб-сторінок

Залежно від того, як був розроблений макет, веб-сторінки можна поділити за трьома видами дизайну.

  • Дизайн стійкої фіксації (Rigid fixed design). Цей підхід до розробки сайту є найпростішим, адже розміри  графічних елементів прописуються в пікселях й таким чином фіксуються на сторінці. Майбутній сайт матиме однакове розширення, часто на пристроях з невеликими екранами з’являтиметься горизонтальний скролінг – стрічка прокручування вбік. Це надзвичайно ускладнює перегляд веб-сторінок, тому при проектуванні сайту дизайнери намагаються не використовувати такий вид дизайну. Єдиною його перевагою є відносна простота в написанні коду.
  • «Текучий» дизайн (іноді вжив. «гумовий»), (Adaptable fluid design) більш пристосований до використання різними гаджетами, адже тут розмір усіх елементів  вказується у відсотковому співвідношенні до розміру екрана того пристрою, з допомогою якого людина відвідує сайт. Оскільки сторінка однаково відображається на всіх приладах, то горизонтальне прокручування не з’являється й відвідувач може бачити наповнення без перешкод.Проте, такий дизайн також має свої недоліки: так, наприклад на гаджетах з дуже великим розширенням екрану, рядки тексту виглядають дуже довгими, а на маленьких екранах – навпаки, тому це значно погіршує читабельність. Саме через це до недавнього часу створювались окремі версії сайтів для мобільних телефонів.
  • Адаптивний дизайн (Responsive design) є найбільш пристосованим до сучасних користувацьких потреб, адже він автоматично підлаштовується під розширення екрану, а також дозволяє відвідувачам самостійно вибирати розширення при перегляді.  Завдяки розробці адаптивного дизайну  відпала потреба створювати окремі домени для мобільних версій сайту.Такий підхід до дизайну веб-сторінок сьогодні використовують найбільші компанії, які намагаються залучити якомога більше відвідувачів. Єдиним його недоліком є складність у проектуванні макету  та верстанні.

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

 

Cлідкуйте за новинами і будьте в ТОПі 🙂

 

 

Автор: Устименко Наталія

Дата: 21.02.2016

Володимир Маркула


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