Svg, rwd і інтерактивні елементи в веб-дизайні
Нові тенденції з`являються в веб-дизайні постійно, і досить важко встежити за всіма змінами в цій сфері. Тренди приходять і йдуть, деякі з, здавалося б, революційних ідей не знаходять підтримки у дизайнерів або користувачів і швидко забуваються, а деякі тенденції стають стандартами.
Інтернет змінюється, а разом з ним змінюється і веб-дизайн. Поява нових пристроїв і різко збільшилася пропускна здатність мережі дають дизайнерам чудову нагоду застосовувати при створенні сайтів нові прийоми, які раніше не використовувалися через технічні обмежень.
SVG-графіка
Одним із прикладів, коли одним з головних трендів стає давно існуюча, але мало використовувана технологія - це SVG-графіка. SVG - це мова для опису векторної двовимірної графіки в XML. Веб-розробники майже не використовували SVG при створенні сайтів, незважаючи на те, що у цього стандарту є ряд переваг. SVG дозволяє при створенні сайту об`єднати в одному форматі інтерактивні компоненти, анімацію, графіку і текст, що іноді дає можливість досягти фантастичних результатів. Поки сайтів, де використовується SVG, не надто багато, але в 2015 році їх стане набагато більше. Основна перевага SVG - це можливість створювати сайти з елементами анімації. У деяких випадках анімація робить перегляд сайту дуже захоплюючим заняттям.
Дуже цікавий сайт з використанням масштабированной векторної графіки створили дизайнери південно-африканського брендинг-агентства JustDesign. Маса нестандартних рішень, прекрасне поєднання контенту і графіки робить цю презентацію дуже цікавою. Користувач крутить коліщатко миші і дивиться захоплюючу анімацію, що розповідає про діяльність агентства.
Цікаву ідею вдалося реалізувати дизайнерам, який створив сайт celebratedesign, присвячений історії розвитку дизайну. Найбільш відомі роботи, які можна побачити на сайті, були надані Американським інститутом графічних мистецтв. Звичайно, перегляд сайту був би цікавий, навіть якби він був створений стандартними методами, проте використання SVG дозволило зробити знайомство з історією дизайну надзвичайно цікавим. Ретельно підібрані ілюстрації, суттєві моменти, пов`язані з роботою Асоціації графічного дизайну, нові інтерв`ю з провідними дизайнерами - все це ви знайдете на цьому чудовому сайті!
Відео: Смачні способи анімації SVG
Сайт мобільного додатка MapQuest також зроблений з використанням технології SVG. Хороший приклад того, як анімація допомагає доступною мовою донести до користувача всі переваги нової програми.
Адаптивний веб-дизайн
Адаптивний дизайн сайтів один з найбільш стійких трендів останніх років. І якщо раніше дизайнери створювали мобільні версії сайтів, то можливості RWD дозволяють домогтися гарних результатів при виведенні сайту на дисплеї, що мають різний дозвіл. Сайт коректно відображається на будь-яких пристроях: десктопах, ноутбуках планшетах і смартфонах. Користувачам зручно взаємодіяти з контентом, який крім того, що швидко завантажується, представлений найбільш зручним для перегляду чином.
Сьогодні Responsive web design (RWD) стає стандартом при створенні сайтів і додатків. З`являються нові пристрої, наприклад Smart TV, на яких також можна переглядати веб-сторінки, тому дуже важливо, щоб контент коректно відображався як на дисплеї маленького смартфона, так і на великому екрані телевізора.
Щоб перейти на сайт, клікніть по картинці
Підвищення інтерактивності сайтів
Інтерактивні елементи і візуалізація контенту як і раніше в тренді. Їх роль в сучасному веб-дизайні стає все більш важливою - різні інтерактивні елементи дають можливість користувачеві фізично взаємодіяти з інформацією. Це не тільки спрощує сприйняття контенту, але і дозволяє відвідувачеві, що зайшов на сайт, отримати доступ до цікавить його інформацією, клікнувши по інтерактивній зображенні. Користувач непомітно для себе проводить на сайті набагато більше часу - адже при перегляді контенту з`являється ігровий момент.
Відео: Анімація на сайті. Animate.css // Веб-розробник 1.0
Щоб перейти на сайт, клікніть по картинці
Найбільш яскравий приклад того, як повинен виглядати сайт з інтерактивними елементами - natgeoeat.com. Барвистий сайт присвячений історії їжі - ви дізнаєтеся, які тварини вимерли через непомірні апетити людства, як приготована на вогні їжа вдвічі збільшила обсяг мозку людини, як з`явилися спеції і багато іншого.
