Верстка та дизайн сайту: копія макету чи багаторівневий процес?

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on pocket
Share on email
Share on print

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

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

 

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

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

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

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

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

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

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

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

 

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

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on pocket
Share on email
Share on print

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *



Заповніть форму
для зворотнього дзвінка

Вам зателефонує наш менеджер для обговорення
проекту та відповість на всі ваші запитання