Веб-дизайн

І. Сучасні тенденції веб­дизайну і основні помилки при верстці інтерфейсів. Сьогодні   найбільш   важливим   є   не   зовнішнє   оформлення,   а   функціональність ресурсу. Є як би дві складові. Одна ­ це тренди, які диктуються розвитком сучасних мобільних технологій, каналів зв'язку і всілякого софту. Дані тренди носять навіть не рекомендаційний, а обов'язковий характер. В першу чергу це стосується адаптивного або реакційного  дизайну сайту. Ну і друга складова ­ це ті самі модні переваги, комбінація з яких дозволяє дизайнерам створювати унікальні і неповторні речі. Адаптивний веб­дизайн 1. Технічний бум всіляких мобільних і не тільки пристроїв жорстко закликає веб­ дизайнерів робити сайти, адаптовані під всілякі дозволи, будь то невеликий екран кишенькового   смартфона,   середній   розмір   планшетника   або   величезна   діагональ сучасного монітора. Плоский дизайн 2. Плоский дизайн (Flat UI) ­ це ультра мінімалістичний підхід до вмісту, коли позбавляються   абсолютно   від   усього   зайвого   (об’єм,   шуми,   градієнти   і   інші прикраси),   залишаючи   тільки   плоскі   кольори  і   інтуїтивно   зрозумілі   візуальні елементи. Загалом, тільки суть і нічого зайвого. 3. Вертикальний скролінг Цей   тренд   знову­таки   породили   особливості   технічних   пристроїв,   коли оптимально   прокручувати   контент   рухом   знизу   вгору   по   екрану.   А   варіації   з посторінковим вертикальним скролінгом виглядають дуже стильно і сучасно. 4. Нескучная типографіка Типографіка   міцно  стоїть  серед   сучасних   трендів   веб­дизайну.   Якщо   раніше акцент робився на красу і різноманітність вишуканих шрифтів, то тепер додалися ще й експерименти з геометрією, коли текст або слово вписуються в простір дизайну і безпосередньо взаємодіють з іншими елементами. 5. Модульні конструкції Дуже   вдале   і   цікаве   рішення,   коли   контент   представлений   у   вигляді   чітко локалізованих   і   щільно   скомпонованих   модульних   конструкцій   або   карток   з однаковим оформленням. 6. CSS3 ефекти Можливості   CSS3   технологій   дозволяють   веб­дизайнерам   творити   чудеса, обмежені лише розмахом їх фантазії. Всілякі рухи, появи, трансформації контенту, складні перестроювання ­ все це робить сайти цікавими і унікальними. 7. Паралакс скролінг Взаємодія   різних   елементів   сайту,   що   рухаються   з   різною   швидкістю   при вертикальній прокрутці сторінки, створює дуже цікавий ефект, який і називається паралакс скролінг. 8. Односторінкові сайти Односторінкові   сайти   мають   незаперечну   перевагу   в   тому,   що   немає необхідності   переходити   на   наступну   сторінку.   Всі   маніпуляції   здійснюються   в межах   однієї   сторінки.   До   потрібного   контенту   користувач   потрапляє   або   за допомогою   м'якого   скролінгу,   або   в   модальних   вікнах,   або   за   допомогою довантажувати контенту. 9. Фіксована навігація Суть   цього   тренда   в   тому,   що   при   прокручуванні   сторінки   зверху   жорстко фіксується   верхнє   меню   навігації.   Це   зроблено   знову­таки   на   догоду   мобільним девайсам. Також зустрічаєтьсяла і фіксоване нижнє меню. 10. Широкоекранний дизайн Зараз весь сучасний дизайн тяжіє до того, щоб максимально повно і широко охопити весь простір монітора. Так що, дизайни з  вузкоросташованим  контентом посередині екрану йдуть в минуле. 11. Велике фото на бекграунд Красива велика картинка на бекграунд стала вже усталеним трендом минулих років. Це завжди виглядає помітно, ефектно і презентабельно, а також дуже активно впливає на глядача. 12. Нестандартна геометрія Можливості   CSS3   технологій   дозволяють   веб­дизайнерам   використовувати нестандартні   форми   і   нестандартну   геометрію   при   оформленні   сайтів.   Це   і   різні блоки правильної і неправильної форми, а також всілякі ламані лінії під різними кутами нахилу. 13. Відео бекграунд Великі   фонові   відео   ­   ще   одна   новомодна   тенденція.   Емоційний   вплив повноекранного відео при знайомстві з сайтом може стати головним вирішальним фактором   і   зробити   його   таким,   що   запам'ятовується,   так   як   має   сильний презентаційний ефект. 14. Живі анімовані картинки Такі картинки називаються сінемаграф. Це фотографія, на якій відбуваються незначні   рухи,   що   повторюються.   Сінемаграфи,   які   зазвичай   представлені   в   gif форматі,   створюють   глядачеві   ілюзію   перегляду   відео.   Зазвичай   їх   отримують шляхом   створення   серії   фотографій   або   відеозапису   з   подальшою   обробкою   в графічному редакторі. 15. Контент, що відвантажується Практично   всі   соціальні   мережі   вже   давно   використовують   контент,   що відвантажується.  Зараз  на   цю   технологію   перейшли   багато   інтернет­магазинів. Особливо актуально для мобільних версій сайтів. 16. Інтерактивна інфографіка Інфографіка   як   тренд  зараз  потужно   заявила   про   себе.   Сьогодні   вже   стало можливим   використовувати   на  сайті   інтерактивну   типографіку.   Коли,  наприклад, при   наведенні   на   потрібний   рік   або   об'єкт   змінюється   відповідна   інформація   в візуальному блоці. 17. Бічне меню згортання Для бічного меню згортання  вже є відповідний впізнаваний значок у вигляді трьох   паралельних   горизонтальних   смужок.   У   мобільних   версіях   цей   значок закріплений у верхній частині екрану, натискаючи на який стає доступним меню. 18. Прості колірні схеми Дана   тенденція   передбачає   використання   в   дизайні   одного,   двох   або   трьох чистих простих монохромних кольорів в поєднанні з класичним чорним або білим для інших елементів дизайну. Свого роду кольорова варіація мінімалізму. 19. Менше тексту, більше відео Текст  трохи здає свої  позиції, поступаючись  місцем коротким  відеороликам. Такими відеороликами не тільки дуже легко і зручно ділитися в соціальних мережах, але це ще і сучасний спосіб впливу на користувача. 20. Довга тінь Зараз стало модним захопленням використання довгої тіні у об'єкта, що створює ефект тривимірності і виду зверху. В основному це відноситься до логотипів і іконок. Можливо тренд ще якийсь час протримається. ІІ. Основні помилки при оформленні веб­сайтів: 1. Наявність на сторінці текстових блоків що мають не прямокутні форми. 2. Використання для текстових елементів нестандартних шрифтів, а також шрифтів різного типу, розміру, стильового оформлення. 3. Порушення цілісності дизайну при зміні контенту. 4. Часткове накладення зображень на текстові блоки. 5. Використання фонових зображень, що ускладнюють прочитання тексту. ТЕМА: Сайт про спортивне харчування «SportPit» (Коли необхідна інформація про виробників, категорії, особливості використання спортивного харчування, як з метою ознайомлення так і можливістю його придбання) ТИП: Інформаційний ІНФОРМАЦІЙНА РОЗ’ЯСНЮВАЛЬНА КОММУНІКАЦІЙНА МАРКЕТИНГОВА ФУНКЦЇЇ ЗАДАЧІ Інформувати   про   категорії спортивного   харчування,   схемах його     провідних виробниках і новинках в цій сфері. застосування,   Роз'яснити можливості використання спортивного харчування для різних категорій людей,   схеми   використання, можливі побічні ефекти і т.п.   Організувати   комунікації між   користувачами   і контентом, користувачами і автором   сайту,   між відвідувачами сайту.   Організувати рекламу основних брендів спортивного   харчування   і продаж їх продукції.   професійні спортсмени ЦІЛЬОВА  АУДИТОРІЯ люди, чий спосіб життя  пов'язаний з підвищеною  витратою енергії люди із зайвою вагою люди, у яких є необхідність в  інформації у зв'язку з  професійними обов'язками ІІІ. Підготовчий етап ІV. Аналіз сайтів із схожою тематикою Колір Фон  Градіенти Текст (що виділяється) Текст (основний) Контраст фона и текста Розташування  Окремо від контенту Виділення від основної  сторінки (колір, фон) Виділення при наведенні  курсору Горизонтальне Вертикальне  Шапка  Логотип  Навигація  Меню  Відступ між логотипом иі навігацією Розділові смуги Футер  Наповнення  Чим відділений від  контенту http://dumix­ sport.by/about.html Темно­синій, синій,  білий Ні  Білий, червоний Сірий  Слабо выражен Логотип, надпис Зліва В шапці знизу  Так  Білий колір http://www.all­sport.ru http://shopinfo.com.ua Фіолетовий, жовтий,  білий, Так  Червоний, синій, білий,  фіолетовий Чорний Да  Логотип, надпис Зліва Зверху шапки Так  Білий колір Світло­жовтий, білий Так  Білий, помаранчевий Чорний Да  Логотип, надпис Зліва зверху В шапці знизу  Так  На фоні шапки, колір Так  Так (підкреслення) Не чітко виражено Ні  Так (випадає при  наведенні курсору) Так  Ні  Меню, адреса,  телефони, електронна  адреса Не відділений Ні  Так, зліва від контенту Нет  Ні  Так  Да  Статистика, партнери,  електронна адреса Так  Ні  Статистика, данні про  переведення Окрема зона, колір Окрема зона, колір Іконки (елементи що намальовані) Ні  Ні  Ні Піктограми на мережеві посилання Рядок пошуку Фотогалерея  Анімація Реклама Шрифт  Контрастний дизайн (яскраві акценти) Єдність шапки, навігації на всіх сторінках Так  Так  Так  Так  Ні  Ні  Так  4 шрифти Дуже багато яскравого Дуже багато яскравого Так  Так  Ні  Так  Так  5 шрифтів Так  Ні  Ні  Ні  Так  6 шрифтів Так  Так  Рекомендації до сайту, виходячи з аналізу цільової аудитории і сайтів схожої тематики У дизайні: наявність умовного поділу зон: шапка, блок основного вмісту і футер; зручне розташування всіх блоків В оформленні:  чітке   кольорове   розмежування   зон,  наявність   візуальних,  інтуїтивно­зрозумілих   для   сприйняття елементів. Контент:  матеріали інформаційного (категорії спортивного харчування, схеми використання, супутнє спортивне обладнання та аксесуари), наукового (з точки зору фізіології та медицини), рекламного (реклама виробників і продукції) і маркетингового (ціни за категоріями спортивного харчування, замовлення і доставка) характеру. Способи пошуку:  в шапці сайту ­ кнопки навігації плюс рядок пошуку інформації по сайту; в лівій частині бічне меню   ­   навігація   з   основних   розділів   сайту;   є  наявність   піктограм   для   швидкого   пошуку   інформації  за  її   цільовим призначенням; V.  Створення прототипу головної сторінки Логотип Назва Шапка сайту Регістрація Вхід  Картинка Головне меню Головна : Категорії : Статті : Форум : Контакти Рядок пошуку по сайту Іконки додаткової навигації по категоріям Схуднення Здоров’я Енергія Аксесуары Рекламний банер Основний текст Чоловіки Жінки Другорядне меню Спортивне харчування Маса Аксесуари Обладнання Спортивна медицина Відгуки у формі міні­чату Ваші коментарі Ваше ім’я Текст ОК Піктограми  на мережеві посилання Футер Логотип Електронна пошта Статистика Copyright 2018