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

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

 

Веб-дизайн у визначенні Дениса Бородаєва — вид графічного дизайну, спрямований на розробку і оформлення об'єктів інформаційного середовища Інтернету , покликаний забезпечити їм високі споживчі властивості і естетичні якості. Подібне трактування відокремлює веб-дизайн від веб-програмування, підкреслює специфіку наочної діяльності веб-дизайнера , позиціонує веб-дизайн як вид графічного дизайну .


Етапи проектування

• Дизайн основної та типових сторінок сайту
• HTML-верстка
• Програмування
• Завершальним етапом розробки сайту під ключ є звичайно ж тестування.

 

Веб-дизайн


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

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

   Пояснення терміну


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

Формулювання завдання веб-дизайну, створення технічного завдання


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

Етапи проектування


   Дизайн основної та типових сторінок сайту

   Починається робота зі створення дизайну, звичайно в графічному редакторі. Дизайнер створює один або декілька варіантів дизайну, відповідно до технічного завдання. При цьому окремо створюється дизайн головної сторінки, і дизайни типових сторінок (наприклад: статті, новини, каталог продукції). Власне «дизайн сторінки» представляє собою графічний файл, листковий малюнок, що складається з найбільш дрібних картинок-шарів елементів загального малюнка. При цьому дизайнер повинен враховувати обмеження стандартів HTML (не створювати дизайн, який потім не зможе бути реалізований стандартними засобами HTML). Виняток становить Flash-дизайн. Кількість ескізів і порядок їх надання обумовлюється з проект-менеджером. Так само менеджер проекту здійснює контроль термінів. У великих веб-студіях в процесі бере участь арт-директор, який контролює якість графіки. Етап також закінчується затвердженням ескізу замовником.

   HTML-верстка

   Затверджений дизайн передається HTML-верстальщику, який «нарізає» графічну картинку на окремі малюнки, з яких згодом складає HTML-сторінку. В результаті створюється код, який можна переглядати за допомогою браузера. А типові сторінки згодом будуть використовуватися як шаблони.

У невеликих студіях, HTML-кодуванням займається дизайнер, який створив макет сайту.

   Програмування

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

При програмуванні сайту спеціалісту призначаються контрольні точки термінів.

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

   Веб-дизайн сайту повинен адекватно виглядати в різних браузерах, особливо в браузерах Internet Explorer, Firefox, Safari, Chrome і Opera. 
  

   Згаданий Internet Explorer (версії 6), занадто по-своєму трактує HTML-стандарти - відгомони старої боротьби за лідерство з Netscape. На даний час це морально застарілий браузер, який створює багато проблем для веб-дизайнера. Багато розробники пропонували відмовитися від верстки під IE 6. Однак наявність цього браузера в стандартному постачанні Windows XP, а значить і його присутність на половині користувача комп'ютерів, змушує веб-дизайнерів тестувати свої проекти в ньому.
  

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

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

   Розміщення сайту в Інтернет

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

   Процес і результат

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

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

Кінцевим продуктом роботи веб-дизайнера є дизайн-макет: картинка, що представляє передбачуваний майбутній зовнішній вигляд сторінок сайту, розміром приблизно 960х640 (пікселів) - розмір, відповідний середньому стандарту, пов'язаний з необхідністю подальшої прив'язки до різних дозволів екрану монітора. Картинка ця є багатошаровою, де, на розсуд дизайнера, майже кожна деталь - окремий шар, прикладений до інших верствам-картинок, за рахунок чого може легко виконуватися доробка, заміна, перекомпонування і інші завдання. Залежно від ідеї і цілей макет може включати фотографії, складні колажі, ілюстрації, текстові шари, унікальні іконки.
Для головної сторінки і внутрішніх іноді малюються окремі макети з доповненнями або змінами відповідно до тематики сторінки.

   Зображення спочатку може бути векторним або растровим, виконаним в Adobe Illustrator, Adobe Photoshop, GIMP або іншому візуальному редакторі (наприклад, Scribus або Inkscape), але для верстальника зображення, як правило, переводиться в растровий формат.

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