(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Web-дизайн 2013: традиции, новшества, основы

Источник: habrahabr

Web-дизайн находится в постоянном движении: с каждым годом он развивается и видоизменяется под воздействием всевозможных факторов, обрастая новыми интересными инструментами и оставляя позади все старое и неактуальное. Нынешний год можно охарактеризовать тем, что одной из причин развития дизайна становится все большее распространение мобильных устройств и планшетов, появление HTML 5. Но давайте подробнее остановимся на тенденциях web-дизайна в 2013 году. 

Начать стоит с новых и ставших популярными видов сайтов. 

Адаптивный дизайн

К возникновению адаптивного дизайна привело повсеместное распространение всевозможных планшетов, смартфонов и прочих мобильных устройств. Обладающие различными разрешениями экранов, они заставляют современных web-дизайнеров задумать об универсальном сайте, который одинаково хорошо смотрелся бы на всех устройствах. Адаптивный дизайн автоматически подстраивается под любое разрешение и обеспечивает максимальное восприятие любой информации пользователем, не теряя при этом своей функциональности. 
При проектировании адаптивного сайта необходимо обратить свое внимание на два основных момента, а именно: как будет вести себя сайт при различных разрешениях и какой контент выводить на тех или иных устройствах. 

Разрешение

При проектировании сетки адаптивного дизайна используется технология Media queries, или Медиа запросы. Что же это такое? 
Подобная технология позволяет прописать определенные условия (стили), при которых сайт подстраивается под разрешения монитора используемого устройства или окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа запросы ограничивают ширину макета и при достижении определенного значения, применяется прописанный стиль элемента. Можете сами попробовать поэкспериментировать с размером окна браузера на сайтах Regent CollegeSkinny TiesUX London и посмотреть, к чему это приведет. 

Контент

Контент всегда имеет особое значение, и в особенности это касается адаптивного дизайна, ведь у нас нет двух версий (мобильной и декстопной), поэтому на стадии проектирования нужно понять, какой контент выводить. Самое главное, чтобы при адаптации сайт не терял своей функциональности, а отображаемый контент максимально быстро подводил человека к желаемому результату. 
В мобильной версии сайта информация должна быть представлена кратко и ясно. Чтобы достичь этого, дизайнеры используют ряд способов:
1. Замена части текстовой информации видео или картинками;
2. Упрощение навигации;
3. Создание более ёмкого контента;
4. Чёткое описание товаров;
5. Упрощение функционала (избавление от ряда второстепенных элементов) и т.п. 

Одностраничные сайты ("Слоенки")

Также приобрели сейчас широкую популярность одностраничные сайты. У таких сайтов можно выделить ряд характерных особенностей, которые также являются новыми тенденциями в web-дизайне:
1. Сайт без перезагрузки страницы;
2. Использование вертикального, горизонтального скроллинга;
3. Один экран - один раздел сайта;
4. Фиксированные ключевые элементы (шапка, корзина, соц. сети);
5. Использование больших шрифтов;
6. Крупные тематические иллюстрации;
7. Использование картинки в качестве фона;
8. Большие кнопки;
9. Разделение экранов (разными фоновыми изображениями, всевозможными линиями, заливками, градиентами, тенями);
10. Анимации с помощью технологий CSS3 и HTML 5.
Среди одностраничных сайтов можно назвать D"AngelicoThe Enterprise FoundationTag Creative Studio и Snipcart

Модульные сетки

На таких сайтах основным элементом дизайна является модульная сетка. Кроме того, для них характерны блоки разного размера и бесконечная подгрузка контента (один из приемов, позаимствованных из соц. сетей). Чтобы посмотреть, как выглядит модульная сетка, советуем обратиться к следующим сайтам: Lotta NieminenLa vie a la Fresh, BenettonMAMODNabox.comLangland.

Стили в web-дизайне

Современное интернет-пространство пестрит разнообразием стилей в оформлении сайтов. Однако выделить основные направления нам все же представляется возможным. Остановимся подробнее на некоторых из стилей. 

Минимализм

Минимализм является популярнейшим трендом среди многих дизайнеров. Обычно на сайтах в стиле минимализм внимание пользователя стараются сфокусировать на чем-то конкретном, т.е. рисуется какой-то отдельный элемент, отличный от всего остального (картинка в центре экрана, или большая надпись). Яркими представителями в стиле минимализм являются сайты Eastworks Leather CompanyWhole и Lapka. К характерным чертам минимализма относятся:
1. Простота и понятность;
2. Минимум графических элементов;
3. Функциональный интерфейс;
4. Черно-белый цвет;
5. Минимальные тени.

Плоский (flat) дизайн

Не менее популярный и близкий по стилю к минимализму. В основу flat дизайна ложится двумерный стиль. Основная идея этого стиля - изображение геометрии элемента только с помощью цветов, без каких-либо других способов придания глубины: теней, скосов, рельефов, градиентов. Как это выглядит на деле, можно узнать на таких ресурсах, как Spell TowerLayerVaultYep! Каждый элемент пользовательского интерфейса должен восприниматься однозначно, а взаимодействие с такими элементами должно интуитивно быть понятным для пользователей. Характерные особенности:
1. Никаких дополнительных эффектов;
2. Использование простых фигур;
3. Контрастные цветовые решения;
4. Акцент на типографике.
Кроме того существует такой вид дизайна как "почти плоский" дизайн. В "почти плоском" дизайне используются техники плоского дизайна, но к некоторым элементам все же добавляются дополнительные эффекты. Например, кнопки содержат дополнительные градиенты или тени. Дизайнеры, как правило, выбирают какой-либо эффект и применяют ко всем элементам "почти плоского" дизайна. Сайт Mixpanel тому пример. 

Metro дизайн

Обычно его позиционируют как легкий, простой, быстрый и открытый. В общем и целом этот стиль похож на плоский дизайн. Также используется качественная типографика, простые элементы, хорошо продуманный контент. Отличительные же особенности metro дизайна в том, что ссылки не подчеркиваются, а для визуализации информации используются разноцветные и равномерное закрашенные квадраты навигации. Убедиться в этом можете самостоятельно: BlocklevelMicrosoft SWITEtch

Нестандартная геометрия

Нестандартная геометрия также приобрела популярность в этом году. В основном, она прослеживается во всех элементах сайта (фоны, выделения, отдельные элементы). Благо это позволяют сейчас сделать HTML5 и CSS3. Самыми трендовыми геометрическими формами элементов является круг, ромб и шестиугольник (сота), реже встречаются треугольники: Built by BuffaloV2AmplifiQEstudio.

Винтаж (ретро стиль)

Ретро стиль взят из эпохи 50-80 годов с афиш, плакатов и прочей атрибутики того времени. Довольно часто дизайнеры, вдохновившись такой работой, рисуют сайт в ретро стиле. К популярным элементам оформления можно отнести: 
1. Использование текстур (в частности, бумаги во всех её видах - типографская, рваная, пожелтевшая - или текстур, похожих на бумагу), а также использование всевозможных потертостей для придания старины;
2. Декоративные элементы (рамочки, узоры, флажки, ленточки, линии - двойные, тройные);
3. Ретро-цвета (не сочные, а приглушенные);
4. Характерная замысловатая типографика (шрифты плакатного типа).
Сайты Von DutchKinder ForografieAlex PeirceWeb Design YorkshireRodolphe CélestinTeixido отлично демонстрируют применение ретро стиля в дизайне. 

Последнее, на чем хотелось бы остановиться, обсуждая тему основных направлений web-дизайна, - это характерные элементы, присутствующие на сайтах в 2013 году. 

Не такая уж новая тенденция, но также достаточно распространенная в сегодняшней web среде - параллакс. Параллакс создает ощущение глубины сайта, благодаря чему возникает иллюзия трехмерного пространства:SpokesiUtopiMinerva. Подобный эффект достигается за счет движения нескольких слоев относительно друг друга с разной скоростью. 

Фиксированное меню, является следствием распространения сайтов с вертикальным скроллингом: дизайнеры поняли, что пользователю будет неудобно каждый раз возвращаться вверх, чтоб перейти в другой раздел или совершить какие-либо ключевые действия. Именно поэтому основное меню стали закреплять сверху, на всем протяжении скроллинга по сайту. Кроме меню, фиксируются главные элементы сайта (например, в случае интернет магазина таким элементом будет корзина). Подобное меню использовано на сайтах Eyal ShaharEngage Interactive и Ryan Scherf.

Полноразмерные фото и видео в качестве фона, в основном, оказывают wow-эффект, который привлекает внимание посетителя сайта: Fifty ThreethinkLuke.
Рассматривая видео на заднем фоне, пользователь может заинтересоваться и продолжить работу с сайтом:MediaBoomOrange.comThe Power Inside.

Крупная дизайнерская типографика. Не так давно технологии еще не позволяли широко использовать нестандартные шрифты, и большинство сайтов ограничивалось Ариалом, Тахомой и Требушетом. C появлением шрифтов от Google, арсенал web-дизайнеров пополнился примерно на 30 шрифтов, которые оптимизировал сам Google, и которые, при желании, можно легко подключить к своему сайту. Однако времена меняются. Современные методы верстки позволяют подключить практически любой нестандартный шрифт. Причем шрифтовые сочетания используются как в виде шрифтов, так и в виде красиво нарисованных картинок. Примеры активного использования нестандартных шрифтов можно наблюдать здесь: Amazee LabsDenise ChandlerRyan Scherf.

Еще одна из тенденций, перешедших на web с мобильных устройств - большие кнопки интерфейса. "Нажатие и касание" среди различных гаджетов становится всё более и более популярным, именно поэтому большие кнопки "перебираются" в web-дизайн. Хотя огромные кнопки делают нажатие гораздо легче, они связаны с большим количеством графики, которая замедляет скорость загрузки страницы, поэтому сайтостроителям приходится искать пути решения своих задумок без потери качества картинки и скорости загрузки сайта. К использованию больших кнопок активно обращаются УльтраКлиникаThe Online Gift CardPrecomposed Touch GesturedKULT StudioSimbolicons.

Ненавязчивые фоны. В 2013 году web-дизайнеры стали уделять большое внимание фону сайта, в частности, всевозможным текстурам: они минимальны и ненавязчивы с одной стороны, с другой причудливы. Примеры использования ненавязчивых фонов можете посмотреть на следующих сайтах: MangroveTeixido5Tailors.

QR-коды. Еще один элемент, перекочевавший из мобильной сферы в сферу web. Хотя не только в неё: сейчас эти коды можно видеть повсюду, в том числе и на сайтах. Основная функция кода - привлечь внимание посетителя. 

Анимация с использованием CSS 3 и HTML 5. Теперь, с развитием данных технологий, дизайнеры могут с легкостью делать разные эффекты: деформация, перетекание, раскрытие, плоскости и многие другие, и творческий народ активно этим пользуется. В сети есть множество сайтов, на которых уже выложены готовые решения анимации с предпросмотром и кодом для вставки в свой сайт. Если хотите посмотреть, как выглядит анимация с использованием CSS 3 и HTML 5, вам сюда: WWFRule of ThreeInceptionInTacto10RailUpAgent 008 Ball

В заключение хотелось бы сказать о том, что влияние мобильных устройств на web-индустрию, безусловно, продолжится: с развитием интернет технологий появятся еще более интересные инструменты, которые дизайнеры активно будут применять. Но уже сейчас существующий набор инструментов позволяет дизайнерам создавать поистине уникальные и ни на что не похожие web-шедевры, привлекающие внимание тысяч пользователей.

Материал подготовил Николай Лисов, web-дизайнер Astra Media Group.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 10.09.2013 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Microsoft Office 365 Бизнес. Подписка на 1 рабочее место на 1 год
Inventory 9
Антивирус ESET NOD32 SMALL Business Pack renewal for 5 user. Электронный ключ.
Quest Software. SQL Navigator for Oracle
Business Studio 4.2 Enterprise. Конкурентная лицензия + Business Studio Portal 4.2. Пользовательская именная лицензия.
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Один день системного администратора
Компьютерная библиотека: книги, статьи, полезные ссылки
Adobe Photoshop: алхимия дизайна
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Нормальные казино в 2021 году (23)
После долгих поисков все таки смог найти хорошие игровухи, хотя и ушла куча времени, пока я...
 
Онлайн казино ПокерДом (7)
Поспешите начинать зарабатывать играя в онлайн казино ПокерДом...
 
Выбор лучшего онлайн казино (16)
Очень важным критерием для составления рейтинга являются честные отзывы клиентов о казино. Люди...
 
Играть в Книгу мертвых (4)
Тайные гробницы древнего Египта, богатства и забытые мумии фараонов - это все вы можете увидеть...
 
Графические редакторы (6)
Где можно скачать бесплатно Информацию о графическом редакторе Corel Photo - Phaint
 
 
 



    
rambler's top100 Rambler's Top100