5 мощных техник адаптивного веб-дизайна


Содержание материала:

20 новейших веб — шаблонов на HTML5

Готовый HTML5 шаблон это идеальный вариант как для новичков так и для профессионалов, чтобы построить мощный фундамент для бизнеса. Есть большое количество шаблонов совершенно бесплатных, но они все требуют придельной и не малой настройки. В конце концов Вам нужно будет лезть в код, чтобы получить конечный результат. Будет хорошо если Вы хотя бы знаете основы HTML и CSS. А что делать тем людям, которые не знают?

Все шаблоны, которые представлены ниже, собраны только с надёжных источников. Они так же сочетают в себе современный вид и простоту, а так же самые последние веб — дизайнерские тенденции. Ну а теперь давайте перейдём к шаблонам.

5 простых техник адаптивного дизайна

С увеличением количества устройств, используемых для выхода в интернет, владельцам веб сайтов всё чаще нужно задумываться об адаптивной верстке. Благодаря ней можно быть уверенным, что сайт будет хорошо отображаться на любом устройстве.

Адаптивные изображения
Выравнивание изображений по центру является главным аспектом адаптивного дизайна. Код ниже позволяет показывать изображение на странице с учётом ширины колонки. Например, ширина колонки 600, изображения 1000 пикселей. На странице ширина изображения будет равна 600 пикселям. При изменении размеров окна браузера и соответственно ширины колонки, размер изображения будет меняться в меньшую или большую сторону.

Адаптивное видео
В новой спецификации HTML5 у нас появилась возможность более простой вставки видео на страницы. А чтобы видео тоже подстраивалось под размер колонки достаточно добавить следующий код:

Адаптивное видео с Youtube
Как было показано выше нет ничего сложного в отображении адаптивных изображений и видео. Поскольку Youtube является крупнейшим видео сервисом в мире, чаще всего видео будет храниться именно там.

Вот правильная разметка для плеера:

Теперь осталось добавить css свойства:

Адаптивное меню навигации
Меню навигации является основой любого сайта. Но, при просмотре сайта на мобильном устройстве оно, чаще всего, становится нечитабельным. На самом деле, в таких случаях гораздо проще использовать тег select для оформления меню.

Вот простой способ его создания. Для начала нам понадобится меню для основных дисплеев, его оформим в тег ul и select для мобильных устройств.

А ниже представлен код css. Мы скрываем тег select по умолчанию и показываем только тогда, когда разрешение экрана меньше 960 пикселей.

Адаптивные таблицы
Таблицы и адаптивный дизайн — не самое лучшее сочетание. Ниже представлен действительно полезный метод, чтобы помочь сделать таблицы более отзывчивыми.

Теперь у нас есть html разметка и базовые css стили. Давайте сделаем таблицы адаптивными. Для этого мы зададим отображение элементов таблицы как блоков.

Полезные статьи в сфере веб-разработки и новости студии

Доработки для интернет-магазина керамической плитки Плитка Плюс. Сайт работает на основе 1С-Битр.

Интернет-магазин Fishmarket.pro работает на 1С-Битрикс и запущен в 2015 году. В студии Реймакс в.

Доработка Всероссийского Информационно-Аналитического издания «ТЕХНОmagazine». Нами выпол.

Как делаются сайты с адаптивным дизайном?

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

Только в одном им нелегко тягаться с настольными компьютерами — это размер дисплея. Комфортные глазу 24 дюйма никак не хотят влезать в карман :).

Плотность матрицы дисплеев у смартфонов (величина числа точек на дюйм) выше, чем у мониторов настольных компьютеров, но их разрешение едва ли дотягивает до последних. К примеру, iPhone 6S имеет разрешение 1334×750 точек. При том смартфон привычнее держать в ладони в «портретной» ориентации. Получается, что 750 точек в случае iPhone 6S — это ширина экрана. В то время как скромный уже по нынешним меркам 19-ти дюймовый монитор типично обладает разрешением 1280 точек по ширине.

Ясно, что нужно учитывать эти особенности при отображении сайтов.

Разные шаблоны для разных случаев.

Этот путь добротный, правильный, но трудный. Идея в том, чтобы определять тип устройства и, в соответствии с ним, подключать ту или иную тему оформления сайта. То есть ваш сайт должен иметь 2 и более темы оформления (например : десктоп, планшет, мобильник).

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

Как определить тип устройства? как подключить тему оформления в рамках API вашей CMS? Универсального ответа я не дам, потому что и разных CMS очень много, и способов определить тип устройства можно придумать достаточно для небольшой диссертации.

Переключение темы в зависимости от типа устройства на WordPress

Если ваш сайт на WP, то вам повезло — у меня есть готовое решение. Это плагин — «Any mobile theme switcher». Устанавливаем его и идем в настройки.

Плагин проводит анализ переменной HTTP_USER_AGENT и определяет тип мобильного устройства. Теперь вы можете определить какую тему сопоставить каждому случаю.

Каждая мобильная платформа может получить своё оформление, а для десктопного варианта выводится основная тема, выбранная в разделе сайта — «внешний вид».

Другие CMS.

Функция на PHP, определяющая тип устройства в упомянутом выше плагине для WP, невелика и может быть легко использована в любой другой CMS. Останется только реализовать механизм переключения темы оформления. Пол дела сделано! 🙂

Один шаблон, разный внешний вид.

Этот подход более экономичный, он использует возможности CSS.

В CSS есть механизм, определяющий применение описаний свойств элементов страницы в зависимости от среды вывода документа.

FAQ и лучшие практики по реализации адаптивного веб-дизайна

Google официально объявил адаптивный веб-дизайн приоритетным инструментом для создания мобильных версий сайтов. Если у вас есть сайт или блог, пора серьёзно задуматься о переходе на адаптивный дизайн вместо того, чтобы поддерживать разные версии сайта для телефонов и планшетов.

Если вы ещё не особо знакомы с концепцией адаптивного дизайна, у вас могут возникнуть различные вопросы, на которые мы уже подготовили ответы.

Почему я должен переходить на адаптивный дизайн?

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

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

  • Вы экономите время и деньги, поскольку вам не нужно поддерживать несколько сайтов отдельно для экранов компьютера и для экранов мобильных телефонов.
  • Благодаря адаптивному дизайну вырастет поисковая оптимизация сайта (SEO), поскольку у каждой страницы будет один и тот же URL. Вам не нужно будет беспокоиться о том, что некоторые ссылки будут вести на мобильную версию сайта, а другие — на десктопную.
  • В отчётах Google Analytics показатели сайта будут выше, поскольку результаты запросов с мобильных телефонов и с ПК будут синхронизированы.
  • То же самое касается статистики распространения в соцсетях (лайки в фейсбуке, твиты и т.п.), так как у мобильной и десктопной версии сайтов будет одинаковый URL.
  • Сайты с адаптивным дизайном гораздо легче поддерживать, поскольку они не требуют каких-либо серверных компонентов. Нужно лишь модифицировать базовые CSS-стили страницы для изменения внешнего вида (или положения на странице) в зависимости от конкретного устройства.

Что нужно знать перед началом работы с адаптивным дизайном?

Адаптивный дизайн использует чистый HTML и CSS. Вы задаёте правила в CSS, которые меняют стиль в зависимости от размера экрана устройства пользователя.

Например, вы можете написать правило, по которому при размере экрана менее 320px не будет показываться боковая панель, или при размере экрана более 1920px (широкоэкранный монитор) размер шрифта основного текста будет увеличен до 15px.

Как можно узнать, был ли использован адаптивный дизайн для отдельно взятого сайта?

Всё просто. Откройте этот сайт в любом браузере и измените размер. Если вид веб-страницы меняется, значит, был использован адаптивный дизайн.

Если я перейду на адаптивный дизайн, будет ли мой сайт отображаться в более ранних версиях браузера?

В большинстве случаев — будет. В адаптивном дизайне используются медиазапросы CSS3 и HTML5 (для улучшенной семантики), которые не поддерживаются в более старых версиях IE. Однако можно найти выход, используя решения JavaScript — respond.js и другие средства модернизации, которые адаптируют CSS3 и HTML5 под более старые версии, включая IE6.

Не мешает ли адаптивный дизайн отображению рекламных блоков, например, в Google AdSense?

Если на вашем сайте присутствуют рекламные объявления, вам нужно особенно внимательно подходить к выбору их форматов, потому что широкие блоки (например, баннеры размером 728×60 px) могут не помещаться на экране телефона размером 320px. Мы предпочитаем использовать стандартные прямоугольные блоки (например, 300×250), поскольку они легко подстраиваются как под экраны мобильных устройств, так и под мониторы ПК.

Существуют тысячи различных мобильных устройств. Какие разрешения экрана должен поддерживать сайт с адаптивным дизайном?

Мы бы посоветовали задать как минимум следующие параметры разрешений для медиазапросов в CSS3: 320px (iPhone, ландшафтный режим), 480px (iPhone, портретный режим), 600px (планшеты Android), 768px (iPad и планшеты Galaxy Tab) и 1024px (ландшафтный режим iPad и рабочий стол ПК).


Как мне начать работать с адаптивным веб-дизайном? Есть ли какие-нибудь хорошие туториалы?

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

Есть ли какие-то недостатки в использовании адаптивного дизайна?

  • Лишние килобайты на веб-странице, поскольку нужно будет загружать CSS стили и файлы JavaScript, которые в других случаях не нужны.
  • Изображения. В адаптивном веб-дизайне сложно добиться размещения изображений в высоком разрешении на мобильной версии сайта (если только вы не используете обходные серверные решения наподобие Adaptive Images или Sencha).
  • Чтобы добавить адаптивность к существующему сайту, придётся потрудиться. Иногда проще заново создать сайт, чем переделать его под адаптивный дизайн.

Если вас заинтересовала эта тема, вы можете узнать о ней поподробнее в нашем материале, где она разбирается более подробно.

HTML Адаптивный веб-дизайн

Что такое Адаптивный веб-дизайн?

Адаптивный веб-дизайн делает вашу веб-страницу хорошо выглядеть на всех устройствах (настольных компьютерах, планшетах и телефонах).

Отзывчивый веб-дизайн об использовании HTML и CSS, чтобы изменить размер, скрыть, сжать, увеличить или переместить содержимое, чтобы он хорошо выглядеть на любом экране:

Примечание: Веб-страница должна хорошо выглядеть на любом устройстве!

Настройка видового экрана

При создании адаптивных веб-страниц добавьте следующий элемент на всех веб-страницах:

Пример

При этом будет установлен видовой экран страницы, в котором будут даны инструкции по управлению размерами и масштабированием страницы.

Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с мета-тегом видового экрана:

Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки выше, чтобы увидеть разницу.

Адаптивные образы

Адаптивные образы — это изображения, которые хорошо масштабируются в соответствии с любым размером браузера.

Использование свойства Width

Если свойство CSS width имеет значение 100%, изображение будет реагировать и масштабироваться вверх и вниз:

Пример

Обратите внимание, что в приведенном выше примере изображение может быть увеличено до размера, превышающего его исходный размер. Лучшим решением, во многих случаях, будет использование свойства max-width вместо этого.

Использование свойства max-width

Если свойство max-width имеет значение 100%, изображение будет масштабироваться, если это необходимо, но никогда не масштабироваться, чтобы быть больше, чем его исходный размер:

Пример

Отображение различных изображений в зависимости от ширины браузера

позволяет определять различные изображения для различных размеров окна браузера.

Измените размер окна обозревателя, чтобы увидеть, как изображение ниже изменяется в зависимости от ширины:

Пример

Размер адаптивного текста

Размер текста можно задать с помощью блока «VW», что означает «ширина видового экрана».

Таким образом размер текста будет следовать размеру окна браузера:

Hello World

Измените размер окна обозревателя, чтобы увидеть, как масштабируется размер текста.

Пример

Hello World

Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.

Мультимедийные запросы

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

С помощью мультимедийных запросов можно определить совершенно разные стили для различных размеров браузера.

Пример: измените размер окна обозревателя, чтобы увидеть, что три элемента div ниже будут отображаться горизонтально на больших экранах и штабелироваться вертикально на небольших экранах:

Пример

Совет: Чтобы узнать больше о мультимедийных запросах и адаптивном веб-дизайне, прочитайте наш учебник RWD.

Отзывчивый веб-страница-полный пример

Отзывчивый веб-страницы должны хорошо выглядеть на больших экранах настольных и малых мобильных телефонов.

Rusability

В мае 2010 года Итан Маркотт в своей статье для A List Apart изложил концепцию адаптивного (или «отзывчивого») веб-дизайна, положив тем самым начало новому направлению. Та статья привлекла внимание широкой аудитории и в конечном итоге ее автору для описания своих идей понадобилась целая книга.

Детальное описание макетов на основе сетки, гибких изображений и работы с медиа запросами радикально изменило процесс создания красивых сайтов.

С тех пор технология адаптивного веб-дизайна стала одной из наиболее обсуждаемых тем в дизайнерском сообществе. И теперь это уже – норма.

1. Дизайн, ориентированный на контент

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

При наличии контента уже можно экспериментировать с тем, как все будет выглядеть – строить каркас для контента. Этот термин был предложен Стивеном Хеем в книге Responsive Design Workflow, что подразумевает использование базовых прямоугольных блоков для создания макета для контента.

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

Затем уже необходимо думать об «адаптивных» контрольных точках. Для контента, сгенерированного в рамках контентной стратегии, подойдет простой макет из одной колонки, предназначенный для мобильных устройств. Это лучше делать в браузере, используя базовые элементы HTML, но больше об этом после.

Ограничив дизайн до одной колонки, можно уже думать об иерархии контента на странице. Какая же наиболее важная информационная составляющая страницы? Где должно располагаться главный призыв к действию? Есть ли смысл в прочтении страницы от начала до конца?

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

А после подкорректировать раскладку страницы, чтобы она соответствовала новой ширине, добавив колонку, к примеру, для боковой панели.

2. Дизайн «в браузере»

Состоит учитывать, что плоские визуальные элементы и макеты Photoshop слишком усложняют процесс создания дизайна сайта, предоставляя вид того, как сайт будет выглядеть в зависимости от настроек браузера.

Но конечный итог практически неизменно отличается от изначально запланированного. Расширение элементов, увеличение пространства вокруг них и прочие нюансы – все это влияет на результат.

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

В этом поможет прототип, созданный при помощи HTML и CSS (каскадных таблиц стилей), который впоследствии можно будет подвергнуть различным манипуляциям. Продемонстрируйте клиенту, как дизайн выглядит на различных девайсах и при разной ширине экрана.

Не беспокойтесь о том, что вы, возможно, не являетесь кудесником внешних интерфейсов, ведь существуют инструменты, позволяющие делать прототипы (Macaw, Webflow и Adobe Edge Reflow). Вы также можете воспользоваться советом какого-нибудь разработчика, но есть мнение, что вначале лучше освоить азы – это поможет составить представление о процессе построения адаптивного веб-дизайна.

Одно из преимуществ такой стратегии состоит в том, что сокращается время, необходимое для внесения изменений.

Предположим, что в наличии имеется 20 макетов Photoshop (или Fireworks), каждый из которых в трех вариантах (для десктопа, планшета и мобильного устройства), а задача в том, чтобы обновить стиль кнопок для сайта, или элементы навигации. Это значит, что необходимо обработать 60 страниц для изменения стиля, короче говоря, работа весьма трудоемкая.

Но благодаря нехитрым манипуляциям с CSS, такое изменение необходимо будет внести лишь единожды – обновления будут применены ко всем доступным страницам. В долгосрочной перспективе это позволить сэкономить время.

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

3. Разработка библиотеки паттернов

Одна из ключевых особенностей практически всех RWD-проектов – гид по стилю. Он, как правило, включает основные стили для проекта и интерактивные положения всех модулей.

На данном этапе необходимо определить каждый из паттернов опыта взаимодействия.

В Fireworks применяются символы и стили для общих компонентов и модулей. Для хорошего дизайна необходимо проиллюстрировать, каким образом каждый из модулей будет адаптирован к избранными контрольным точкам.
Разработчик Брэд Фрост предложил концепцию Atomic Web Design, для ее описания он использует отчасти наукообразную терминологию. Основные стили бренда он называет атомами, составляющими фундамент дизайна. Такие вещи, как цвет, шрифт и иконки соотносятся с базовыми элементами HTML для формулирования «молекул». Молекулы используются для создания «организмов». Взять, к примеру, кнопку поиска. В данном случае к кнопке может быть добавлена форма ввода и лейбл.

Затем происходит смешение с другими организмами для создания «шаблонов», например, заголовков. В свою очередь, шаблоны позволяют уже сформировать страницы – и вуаля! У вас есть Atomic Web Design.
Эта теория применима для составления структуры библиотеки паттернов. Вначале создаются стили бренда, а затем уже их можно адаптировать под элементы HTML и т.д. Ваша библиотека паттернов будет способна поведать историю проекта – о том, как бренд клиента стал по-новому выглядеть в сети. Для разработчиков необходимо добавлять заметки и фрагменты программ, относящиеся к определенной опции экранного меню.
Лаборатория паттернов по прошествии некоторого времени может превратиться в изменяемый веб-дизайн, по мере того, как осуществляется переход от дизайна страниц к дизайну системных компонентов.

4. Универсальность


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

Дизайн должен адаптироваться к любому окружению. Ниже перечислены моменты, которые могут оказаться полезными.

4.1 Проверенный метод

Большинство современных мобильных девайсов оснащены тачскрином, поэтому необходимо учитывать размер интерактивных элементов интерфейса. Нет единого мнения об идеальной площади смартфона для нажатия. Инженеры Apple выбирают 44px, люди из Microsoft утверждают, что 34px лучше.

Возможно, использование 48px представляется более практичным при разработке интерактивных элементов. Для каждой области оставляются как минимум 6px, и обычно 12px – для базового уровня. В эпоху общего проектирования и крупных размеров многие сегодняшние сайты оставляют чуть больше места для десктопов. Эти увеличенные в объеме элементы должны также использоваться в формах – для простоты и соответствия мобильным девайсам. Некоторые предпочитают проектировать собственные расширенные поля форм для соответствия со стилем сайта.

Топ-пост этого месяца:  Видео фон для сайта плагины для WordPress

Но применительно к мобильным устройствам рекомендуется по возможности использовать «родные» средства управления. Клавиатуры и выпадающее меню должны быть оптимизированы для конкретного девайса. И еще один момент: уберите выделение ссылки при наведении курсора для мобильных устройств.

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

4.2 Навигация

Один из распространенных вопросов, возникающих во время разработки «адаптивного» веб-сайта, – каким образом организовать навигацию. Для этого существует ряд способов в зависимости от количества контрольных точек.

Jump links

Одна из простейших и наиболее универсальных техник для мобильной навигации – jump link menu. Это по сути ссылка-анкор, которая предоставляет пользователю меню в нижней части страницы.

Для этого не требуется javascript или какие-либо другие добавочные скрипты, что обеспечит универсализацию для всех браузеров и устройств.

Выпадающий список

Еще один общий навигационный паттерн – выпадающее меню, когда иконки меню обеспечивает возможность навигации с дополнением плавной анимации. Для такой техники необходим javascript – чтобы разместить меню ниже кнопки и затем скрыть до тех пор, пока это не понадобится пользователю.

В некоторых элементах навигации для такой цели может использоваться графический элемент «Гармошка», это позволяет просмотреть уровни навигации, без загрузки каждой из страниц.

Без канвы

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

На таких сайтах, как Teehan+Lax и Squarespace, описанная техника используется как единственный метод навигации. Есть мнение, что в скором времени она станет трендом в RWD.

4.3 Мобильные версии сайтов, ориентированные на выполнение задач

Еще один важный момент, на который стоит обратить внимание при разработке мобильной версии – расположение средств контроля в верхней части страницы. Над «сгибом».

Разработчики дискутируют о том, что в сфере веб-дизайна нет такого понятия, как «сгиб», в последнее время появилось огромное множество новых устройств с разнообразным разрешением, что еще больше усложняет задачу определения линии сгиба конкретного сайта. Исходя из размеров самого маленького устройства, возможно определить так называемую «безопасную зону».

По той причине, что пользователи мобильных устройств, как правило, находятся в движении и располагают ограниченным временем и пропускной способностью, важно чтобы поверхность любого элемента из разряда «призыв к действию» (баннеры и прочее) всегда располагалась в верхней части экрана, а дополнительный контент – ниже.

Яркий тому пример – мобильный дизайн для электронной коммерции, когда на многих страницах, посвященных продукции, содержится, наряду с навигацией сайта, название товара, цена, изображения в миниатюре и призывы купить все, что находится выше сгиба. Вторичный контент, такой как особенности продукции и спецификации, может помещаться в нижней части сайта.

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

5. Производительность

Невозможно предугадать, какое устройство окажется в руках у пользователя, и какими возможностями подключения он будет располагать. Поэтому и необходимо создавать дизайн «адаптивного» сайта, держа в уме производительность. Никто не хочет тратить время и ждать, особенно в интернете. Если сайт не загружается в течение нескольких секунд, пользователь может уйти.

Если у сайта хороший дизайн и все остальные составляющие также в порядке, пользователи непременно зайдут на него вновь. Основное, на что следует обратить внимание, – делать страницы как можно более легковесными. Более 60% «веса» большинства сайтов – это только изображения. Остальное: скрипты, таблицы стилей и прочие медийные элементы.

Самый простой способ уменьшить размер файлов сайта – это экспортировать их непосредственно из графического приложения. Однако этого недостаточно. В частности, когда используются PNG-файлы.

Такие сайты, как TinyPNG, помогают уменьшить вес файлов, сбросить балласт дополнительных данных и убавить цвет. Такие порталы – настоящая находка, и многие дизайнеры добавляют TinyPNG в набор часто используемых инструментов.

«Адаптивные» изображения

Кроме уменьшения размера картинок, порой важно, чтобы разные снимки подходили для разных устройств. Ведь громадные изображения (на сотни килобайт) не предназначены для мобильных устройств, у которых наличествуют ограничения по данным и плохие возможности связи 3G.

Существует множество скриптов, которые помогут этого добиться (Picturefill Скота Джелфи и Adaptive Images) в зависимости от потребностей сайта и возможностей сервера. Но не стоит об этом беспокоиться. Веб-дизайнеры обычно предусматривают, как изображения будут адаптированы под различные контрольные точки и девайсы и вносят соответствующие коррективы. В идеале в гиде по стилям или лаборатории паттернов.

Усечение скрипта

Большой размер сайта может зависеть еще и от различных скриптов, таких как Javascript и дополнительных CSS таблиц стилей.

Кто-то может сказать, что обо всем этом должны беспокоиться разработчики, и будет прав – но лишь отчасти.
Если во главу угла ставится совместимость сайта с мобильным устройством, тогда соответствующим образом должны писаться и CSS, а также любые другие таблицы стилей для крупных контрольных точек.

Общий объем анимации – это то, за чем необходим постоянный контроль. Под анимацией в данном случае подразумевается все, что двигается и требует написания скриптов. Анимация существенно увеличивает размер файлов.

Для неофитов, впервые работающих над мобильными сайтами, вначале лучше идти по пути наименьшего сопротивления, ограничиваясь по больше части статичными элементами. Если возникает необходимость в том, чтобы добавить красивый слайд – можно немного поэкспериментировать и посмотреть, как это отразится на производительности сайта.

Подача контента небольшими порциями

Хороший способ уменьшить размер файлов и тем самым повысить производительность – «нарезать» контент небольшими порциями и предоставлять его по мере необходимости, когда пользователи об этом попросят.
Речь не о том, чтобы сегментировать весь контент, а только вторичный.

Существует множество прогрессивных техник, например, «load on scroll» – ее используют многие социальные сети в отношении новостных лент – таким образом пользователи могут загружать больше контента, исходя из необходимости, (вместо случайной загрузки большего объема контента при нажатии на нижнюю часть страницы).
Очередной полезный способ, обеспечивающий большую детализацию и позволяющий просматривать больший объем вторичной информации – разместить контент на следующей странице для мобильного просмотра. К примеру, можно поместить аккуратную ссылку для перехода на страницу, где информации больше.

И в заключение…

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

Необходимо принимать во внимание множество моментов, иметь представление о процессе построения сайта и выбора приоритетов применительно к контенту, который соответствует требованиям пользователя. Все подбирается экспериментально, только перенеся теорию в практическую плоскость, возможно понять все эти нюансы.

Индустрия веб-дизайна пытается идти в ногу со временем и учитывать современные реалии, когда производится огромное множество мобильных девайсов. Пришло время расширить дизайнерский горизонт и сделать сферу веб-дизайна немного лучше – для каждого электронного устройства.

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

Выражаем благодарность econsultancy за прекрасный материал.

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

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

В сферу чего мы получаем огромное множество различных разрешений экранов, что в свою очередь ведет к затруднению получения информации с сайтов. Чтобы информация была хорошо читаема и удобно просматриваема на большинстве устройств и была разработана технология адаптивного дизайна.

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

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

Адаптивный веб-дизайн (англ. Adaptive Web Design) — дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

Основные принципы адаптивного дизайна:

  • Адаптивный шаблон сайта, способность шаблона подстраиваться под различные разрешения экранов устройств от монитора компьютера до смартфона;
  • Адаптация и перемещение блоков контента, способность блоков контента в зависимости от разрешения экрана устройства принимать необходимые размеры, а также способность передвигаться на другую позицию в макете;
  • Адаптация изображений, способность изображений менять размер в зависимости от разрешения экрана или загружать более адаптированное изображение с меньшим весом и размером;
  • Использование гибкой сетки, позволяет максимально быстро изменять конструкцию макета;
  • Скрытие менее важных блоков, на небольших экранах некоторые блоки могут скрываться;
  • Переработка юзабилити элементов навигации, так как на мобильных устройствах в связи с небольшим разрешением элементы навигации становятся менее кликабельными, их перерабатывают, делая удобно-используемыми;
  • Упрощение ряда элементов на веб — странице, некоторые элементы упрощаются для использования на мобильных устройствах;
  • Адаптация видео контента, также следует учесть и адаптацию видео;
  • Использование медиа — запросов (media query), позволяют создавать адаптивный макет;
  • Сначала мобильные (mobile first), проектирование адаптивного дизайна начинается с макета для мобильных устройств.

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

Размеры макетов адаптивного дизайна

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

Итак, сугубо из своего видения изложу принцип и размеры, под которые следует разрабатывать макет.

Если следовать принципу сначала мобильные то будут такие размеры разрешений, под которые необходимо разрабатывать макет 320px / 480px / 768px / 1024px / 1280px может быть и больше зависит от задач.

Картина выглядит примерно, таким образом, но зачастую под какие-то разрешения нет необходимости создавать макет, к примеру, под 480px. если макет не ломается на промежутке 768 — 320px.

Если хотите разобраться в этом вопросе подробно то читайте в материале о размерах макета в адаптивном дизайне.

Разумеется, создавать холст в фотошопе мы будем с учетом отступов, полосы прокрутки и всего остального, как и обычный макет. Создадим модульную сетку для удобства разработки, а также более быстрого проектирования макета. Многие используют в работе фреймворки, а следовательно опираются на сетку того фреймворка на котором ведут разработку.

Благодаря чему, мы сможем показать верстальщику, как будет вести себя макет на различных разрешениях экранов и устройствах. Для примера я набросал небольшой макет, его Вы можете посмотреть на скрине ниже.

Мedia query и viewport в адаптивном дизайне

Для того чтобы сообщить браузеру как отобразить размеры страницы и изменить ее масштаб используется метатег viewport . Данный метатег прописывается в сайта. Он позволяет разработчикам установить ширину экрана для устройств, которая прописана в css.

Записывается мета тег viewport так:

Рекомендуется записывать следующим образом:

Слева без мета-тега, справа с использованием мета-тега viewport.

Также для мета-тега могут устанавливаться другие атрибуты и параметры.

Media Queries

В разработке адаптивных сайтов главную роль играют css3 media queries (медиа — запросы). Медиа – запросы включают в себя медиа — тип (принтеры, смартфоны, экраны, телевизоры, проекторы и др.) и условия, которое может принимать в свою очередь истину или ложь (true, false). В зависимости от того верный ли медиа — тип и выполняется ли условие будут применяться различные стили css. Если будет верно, то будут применяться те стили, которые прописаны в этом медиа – запросе, если же будет ложным, то будут применяться обычные стили css.

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

Записывается следующим образом:

  • @media – медиа – запрос;
  • screen – медиа – тип (также называют тип носителя);
  • max-width: 1000px – условие, которое должно выполняться (в нашем случае стили будут применяться, если ширина окна меньше ширины 1000px);
  • .class – прописываются соответствующие селекторы (классы, id) в которых свойствам задаются новые значения.

В большинстве случаев для разработки адаптивного дизайна используются следующие медиа — функции.

  • max-width: width — означает, что если ширина окна браузера меньше заданной ширины, то выполняется условие и применяются соответствующие стили (пример: max-width: 768px, означает, что если ширина окна браузера меньше 768px то следует использовать стили, указанные в медиа — запросе).
  • min-width: width — означает, что если ширина окна браузера больше заданной ширины, то условие выполняется, и применяются указанные стили в запросе (пример: min-width: 480px).

Но также могут использоваться и другие функции: color, device-width, grid, height, orientation: landscape, orientation: portrait, resolution и другие.

Значения, которые используются в медиа — функциях называют также breakpoints (переломные или контрольные точки). В этих контрольных точках как Вы догадались, и меняется дизайн сайта.

  • 320px — мобильные
  • 480px — мобильные
  • 768px — планшеты
  • 1024px — планшеты, нетбуки
  • 1280px и более — персональные компьютеры.

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

В медиа – запросах также применяются и логические операторы такие как:

  • and – логическое И, применяется для объединения нескольких условий (пример: @media print and (color) < … >).
  • not – логическое НЕ, применяется для отрицания условия (пример: @media not all and (color) < … >).
  • only – применяется для старых браузеров, не поддерживающих медиа — запросы (пример: @media only screen and (max-width: 1300px) < … >).

Media queries прописываются в конце файла стилей, после всех основных стилей css.

Как сделать адаптивный дизайн сайта из фиксированного макета

Итак, допустим у Вас есть рабочая тема сайта с фиксированным размером, которую Вы бы хотели оставить и сделать из нее адаптивный макет, но не знаете с чего начать. Далее я расскажу, как это можно сделать, можно ли сделать вообще, и что нужно сделать, с чего начать.

  1. Первым делом делаем резервную копию шаблона (темы), на всякий случай.
  2. Далее нам потребуется программа для редактирования css, это может быть любой редактор кода, например brackets от adobe он бесплатный или Notepad++.
  3. А также браузер google chrome, с его инспектором кода (вызывается клавишей F12).

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

Таковыми являются px, необходимо перевести их в %, а шрифты задать в em. В основном это касается ширин и шрифтов.

Ширину основного контейнера wraper оставляем без изменения, если записано width измените на max-width. Для остальных контейнеров будем менять ширину на % отношение. Переводить мы будем по формуле:

Размер контейнера (px) / размер основного контейнера (родителя) в (px) * 100% = результат (%)

Например, статичный контейнер тела сайта 720px размер основного контейнера (его родителя), к примеру, стандартный 960px, тогда получим следующее 720/960*100=75% . Таким образом, мы переведем нашу статичную верстку в резиновую. Далее переведем наши шрифты, если они в px в em для этого опять же воспользуемся формулой:

Размер шрифта (px) /16px (стандартный размер) = размер шрифта (em)

Например, размер шрифта 32рх, тогда 32/16=2em. После чего сделаем наши изображения адаптивными. Для этого в css пропишем следующие свойства и значения.

Этот способ неплохо адаптирует картинки, единственное он не уменьшает вес картинок, а это значит, что на мобильных устройствах будут загружаться картинки с большим весом. Чтобы такого не было необходимо грузить разные картинки в зависимости от размера экрана.

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

Ну, вот наша с вами основа готова, теперь необходимо определить контрольные точки, в которых макет будет перестраиваться, продумать, как будут вести себя блоки, что будем скрывать и записать это все в медиа – запросы. Определять эти самые переломные точки мы будем при помощи браузера google chrome.

Откроем в нем наш макет, нажмем клавишу F12 и будем уменьшать размер окна браузера. В верхнем правом углу у нас будут писаться размеры окна, нас интересует первое значение, оно указывает на ширину. Необходимо сжимать до тех пор, пока дизайн не перестанет корректно отображаться. В том размере, когда макет выглядит не корректно, мы и будем создавать контрольную точку. Определив первую переломную точку, запишем ее в файл style.css в самый конец после всех основных стилей. Допустим наш макет, имеет левый сайдбар и контентную часть с анонсами, и при 910px сайт начинает отображаться не корректно. В данном случае мы запишем следующий медиа запрос.

Если у этих блоков есть какие-то отступы (margin, padding) их следует, либо обнулить, либо учесть при написание ширины. К примеру, padding: 2%; тогда ширину запишет следующим образом width: 96%;.

Таким образом, мы адаптировали наш макет на разрешение меньше 910px. Если окно браузера будет меньше 910px, то контент станет во всю ширину, а сайдбар отпустится под контентную часть и станет также во всю ширину.

По такому же принципу мы создаем и остальные контрольные точки, находим ширину, при которой макет ломается (смотрится не корректно) записываем медиа – запрос, формируем для него стили задаем ширину блоков, можем скрыть менее важные блоки (display: none).

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

Придется потрудиться, но результат не заставит себя ждать и у вас получится самостоятельно сделать адаптивный дизайн сайта из фиксированного макета.

Ну, вот вроде и все что хотел рассказать в этой статье, хотел написать немного об адаптивном дизайне, а получилось довольно объемно, надеюсь, материал будет вам полезен.

Адаптивная верстка сайтов: обзор подходов и CSS фреймворков

October 24, 2020 Jazz Team Технические статьи , 0

Предисловие

В настоящее время доля мобильного трафика растет стремительными темпами. С каждым днем людей, использующих девайсы с выходом в Интернет, становится все больше. Телефон всегда под рукой, в любом месте люди могут посмотреть необходимую информацию, прочитать новости и т. д. Обычный сайт можно просмотреть с помощью мобильного устройства. Однако, возникают некоторые нюансы при просмотре — для чтения отдельных блоков текста на относительно небольшом экране необходимо масштабировать страницу. Как следствие, теряется читабельность, удобство, сайт нужно постоянно пролистывать, растягивать, приближать. Многие элементы управления сайтов неудобно использовать, так как страницы не рассчитаны на управление с помощью прикосновений к экрану. Для решения этих проблем начали разрабатывать сайты, способные удобно отобразить информацию на любом устройстве.

О статье

Данная статья предназначена для разработчиков, имеющих опыт верстки сайтов, знающих HTML и CSS, понимающих назначение CSS селекторов и т. д.

В данной статье будут рассмотрены виды версток, позволяющие корректно отображать сайты на любом разрешении, техники, с помощью которых это осуществляется. Разберем понятие CSS-фреймворка и сделаем сравнительный анализ наиболее популярных.

Виды версток

Рассмотрим основные виды версток, их разницу и основные принципы, используемые при их реализации.

Фиксированная верстка

Фиксированная верстка (Fixed Layout) — подход создания страниц сайта, которые имеют заданную ширину. Ширина компонентов на странице не изменяется. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки. Данный тип верстки не подходит для удобного отображения информации на мобильных устройствах.
Пример ниже демонстрирует строгое задание ширины для тега body:

Резиновая верстка

Резиновая верстка (Elastic layout) подразумевает возможность компонентов сайта менять свои размеры в зависимости от размера окна браузера, растягиваться от и до указанных минимальных и максимальных размеров. Это достигается благодаря использованию относительных значений, max-width / min-width (максимальная / минимальная ширина), max-height / min-height (максимальная / минимальная высота).
Примеры использования техник резиновой верстки:

Адаптивная верстка

Адаптивная верстка (Adaptive Layout) позволяет подстраиваться основному контейнеру и любому другому элементу сайта под разрешение экрана, делая возможным менять размер шрифта, расположение объектов, цвет и т. д. Происходит это динамически, например, с использованием медиа-запросов (@media), позволяющих автоматически определять разрешение монитора, тип устройства и подставлять указанные значения в автоматическом режиме. В примере ниже задается ширина div равная 960px для всех устройств, ширина которых меньше 1200px и 320px для всех устройств, ширина которых меньше 480px.

Отзывчивая верстка

Отзывчивая верстка (Responsive Layout) — это объединение резиновой и адаптивной вёрстки. При данном подходе используются как медиа-запросы, так и процентное задание ширины компонентов. Используя данный вид верстки можно с уверенностью сказать, что сайт приспособится к любому устройству.
Ниже задается ширина div равная 50% от размера родительского компонента для всех устройств, ширина которых меньше 1200px и 100% для всех устройств, ширина которых меньше 480px.

Топ-пост этого месяца:  Жестко задать user_ID при создании нового пользователя

Основные техники реализации сайтов под любое разрешение

Относительные значения

Использование относительных значений позволяет отобразить информацию и компоненты на странице без потери читабельности и удобства просмотра.

Относительные значения для размеров и отступов

Относительные значения можно задавать для width, height, margin, padding и т. д. Самый известный способ задания относительного размера — указание в процентах (%).
Ниже приводится пример задания ширины равной 90% от размера родительского компонента.

При этом значение высчитывается относительно родительского компонента.
Также существуют значения относительно размера экрана:

  • vw — 1% ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента;
  • vh — 1% высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента;
  • vmin — выбирается наименьшее из vw и vh;
  • vmax — выбирается наибольшее из vw и vh.


Ниже рассмотрен пример использования vw и vh. В данном случае ширина и высота тега div будут равны 50% от ширины и высоты экрана соответственно.

Относительные значения для размера шрифта

Существуют следующие относительные значения для шрифтов:

  • em — задаёт размер относительно шрифта родителя;
  • rem — задаёт размер относительно шрифта .

Вычислим размер шрифта для тега body. В данном примере размер шрифта для body задается относительно размера html. Таким образом, размер шрифта для body будет равен 30px (20px * 1.5 = 30px).

Также относительные размеры шрифта можно задавать с помощью %, vw, vh и т. д. В следующем примере размер шрифта для body равен 80% от размера шрифта html — 16px.

Максимальные и минимальные размеры компонентов

Для задания максимальных и минимальных значений ширины и высоты компонента используются свойства max-width / min-width и max-height / min-height соответственно.

Допустим, что родительским компонентом данного div является body. Тогда, при изменении ширины экрана, ширина данного компонента будет составлять 60% от ширины body. Однако он будет увеличиваться только до величины, определенной в max-width, это 500px. Как только контейнер достигнет этой ширины — он перестанет увеличиваться.

Использование медиа-запросов

Медиа-запросы позволяют задать стили для определенного размера экрана, типа устройства на основе характеристик устройства и т. д. Все медиа-запросы начинаются с @media, а далее следует условие.

С помощью медиа-запросов можно задать стили для следующих типов устройств:

  • all — все типы (значение используется по умолчанию)
  • braille — устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми
  • embossed — принтеры, использующие для печати систему Брайля
  • handheld — смартфоны и аналогичные им аппараты
  • print — принтеры и другие печатающие устройства
  • projection — проекторы
  • screen — экран монитора
  • speech — речевые синтезаторы, а также программы для воспроизведения текста вслух
  • tty — устройства с фиксированным размером символов
  • tv — телевизоры.

Пример задания ширины для тега div, на экранах мониторов, смартфонах и т. п.

Ссылки по техникам реализации адаптивной верстки

Подробнее просмотреть и изучить рассмотренные в данной статье подходы и другие можно по ссылкам:

CSS-фреймворки

CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Данные фреймворки подразумевают использование различных подходов для корректного отображения сайтов на устройствах любого размера.
Многие разработчики предпочитают использование CSS-фреймворков, вместо прописывания всех стилей вручную. Это обусловлено следующими причинами:

  • Более быстрая разработка
  • Поддержка кроссбраузерности
  • Поддержка различных устройств и размеров экранов
  • Единообразие кода при работе в команде позволяет снизить число разногласий при разработке.

Как и библиотеки скриптовых языков программирования, CSS-библиотеки, обычно имеющие вид внешнего CSS-файла, добавляются в заголовок веб-страницы.

Рассмотрим самые популярные CSS-фреймворки.

Bootstrap

Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Bootstrap — это инструмент с открытым исходным кодом для разработки сайтов с помощью HTML, CSS и JS. Bootstrap — интуитивно простой и в тоже время мощный интерфейсный фреймворк, повышающий скорость и облегчающий разработку web-приложений.

Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода — от телефонов и планшетов до настольных компьютеров. Для этого используется 12-колоночная сетка:

В дополнение к CSS данный фреймворк включает в себя поддержку двух самых популярных CSS-препроцессоров: Less и Sass.

  • 12 — колоночная сетка
  • Большое количество готовых для использования компонентов
  • Поддержка Less и Sass
  • Использование Normalize.css.

Material Design for Bootstrap

Material Design for Bootstrap — это инструментарий с открытым исходным кодом для разработки приложений, основанный на Bootstrap и использующий подходы Material Design.
Фреймворк позволяет быстро создавать приложение с помощью переменных Sass, адаптивной сетки, большого количества готовых компонентов и мощных плагинов, реализованных на jQuery.

  • 12 — колоночная сетка
  • Большое количество готовых для использования компонентов в соответствии с концепцией Material Design.

Materialize

Materialize — современная, адаптивная платформа, построенная на принципе материального дизайна. В платформу включен набор компонентов, а также стили для них. Проработаны анимации и эффекты в компонентах, чтобы они были максимально плавными. Все элементы и анимации интуитивны и понятны пользователю, а единый адаптивный дизайн упрощает UX для всех платформ.

  • 12 — колоночная сетка
  • Большое количество готовых для использования компонентов в соответствии с концепцией Material Design
  • Поддержка Sass.

Bulma

Bulma — современный CSS-фреймворк основанный на новом способе отображения Flexbox. Flexbox — самый современный инструмент компоновки, доступный в CSS.

  • Использование Flexbox вместо колоночной сетки
  • Большое количество готовых для использования компонентов
  • Поддержка Sass
  • Не используются JS-файлы

Pure — набор небольших адаптивных CSS-модулей, которые вы можете использовать в любом веб-проекте. Pure построен на Normalize.css и предоставляет разметку и стили для собственных HTML-элементов, а также наиболее распространенные компоненты пользовательского интерфейса. Pure — адаптивный фреймворк, поэтому элементы отлично смотрятся на всех размерах экрана. Pure имеет минимальные стили, что подразумевает написание собственных кастомизированных стилей.

  • 24 — колоночная сетка
  • Модульный фреймворк
  • Не используются JS-файлы
  • Использование Normalize.css
  • Минимальное количество готовых компонентов и стилей.

Заключение

Быстрый рост популярности просмотра сайтов на мобильных устройствах обуславливает необходимость реализации удобного и читабельного отображения компонентов в независимости от типа устройств и размеров экранов. Рассмотренные в данной статье подходы помогут создавать сайты для различных устройств и размеров экранов. Описание CSS-фреймворков упростит выбор подходящего фреймворка для использования в проекте.

65 Трендов Веб-дизайна в 2020 году. Топовые советы от профи

Привет. На связи Чигарев Илья. Данная подборка трендов веб-дизайна 2020 собрана из 4-х материалов с сайта Behance. Это посты, которые набирают наибольшую популярность и положительные отзывы среди комьюнити дизайнеров. Итак, давайте посмотрим какие тренды выделяют топовые дизайнеры со всего мира.

Безлимитная графика для ваших проектов

Для создания крутого дизайна для сайта, полиграфии, фотографии и прочего, как не крути, вам нужны будут качественные материалы. Это и фотографии, шаблоны, мокапы, иконки, пресеты, кисти и т.д. Все это есть в одном месте и качать можно неограниченно. Сервис ENVATO ELEMENTS с тонной материалов, готовых к скачиванию. Цена подписки от 16,50 $/мес. Переходите по ссылке и посмотрите что вы можете использовать для своего бизнеса и проектов. Подробности вы можете узнать в статье-обзоре.

Главные тренды веб-дизайна в 2020 году

1. Смелые, яркие цвета

В 2020 мы наблюдали восхождение смелых и ярких цветов, и они не собираются сдавать свои позиции, превращаясь в один из самых значимых трендов 2020.

Проект: Show Go Poster Collection 2020 / Автор: ∆ Studio—JQ ∆

Проект: Daily Posters / Автор: Magdiel Lopez

2. Яркие и насыщенные градиенты

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

Проект: Magic.co / Автор: Ludmila Schevenko

Проект: Electric Objects / Автор: Rose Pilkington

Проект: Gradient Studies / Автор: Evgeniya Righini-Brand

3. Цвет года (Пантон)

PANTONE® 16-1546 Живой коралл (Living Coral)

Проект: Pantone Color of the Year 2020 | Living Coral / Автор: ∆ Studio—JQ ∆

4. Простота и удобство

Меньше значит больше» — бессменный тренд. Простота подразумевает аккуратную страницу со светлым фоном в лучших традициях минимализма. Пространство — бог: при его правильном использовании можно получить многофункциональный дизайн.

Проект: Creative case / Автор: Nikita Mahaev

Проект: A propos du cancer / Автор: Extra

5. Больше дизайна с дополненной реальностью

Быстрый рост популярности дополненной реальности, или AR, будет заметен не только в индустрии игр, видео и приложений. У AR хорошие шансы охватить область дизайна, особенно за счет популярности мобильных устройств. Вероятным идейным вдохновителем могут стать DIA Studio, применяющие 3D типографику к повседневным объектам.

Проект: DIA / Автор: DIA

6. Экстра глубина (и полуплоский дизайн)

В 2020 году имеет смысл немного оживить традиционный плоский дизайн: добавление теней поможет сделать элементы более объемными, сохранив основные концепции минимализма, которые сделали плоский дизайн популярным. Пространство и объем — элементы новой концепции глубины.

Проект: Nike Promotion Ads — Parallax Effect / Автор: Jardson Almeida

Проект: Flyknit Lunar 3 / Автор: Callum Notman

Проект: Made You Look�� 255 | Live a little more / Автор: STUDIOJQ

7. Геометрические элементы

Использование геометрических элементов, таких как многоугольники (треугольники, квадраты, пятиугольники) и кривые (окружность или эллипс) сделает ваш проект запоминающимся.

Проект: Nike Le Quartier / Автор: Atelier Irradié

Проект: France Colombia cultural season Brand design / Автор: Graphéine

8. Больше творческой фотографии

Современные фотосессии и брендинговые кампании стану более дерзкими и экспериментальными, обратившись к искусным дизайнерским приемам. Созданный на основе бумажных зарисовок или 3D визуализации, такой дизайн совершенно точно будет выделяться и сохранится в памяти.

Проект: Aizone / Автор: Sagmeister&Walsh

Проект: Monkifesto / Автор: Snask

Проект: Nike AMD Revolution / Автор: Happy Finish

9. Дуплекс

Дуплекс (репродукция изображения с использованием полутонов двух ведущих цветов) имеет все шансы попасть в ведущие тренды веб дизайна в этом году. Эта техника не является новой — она появилась несколько десятилетий назад, но благодаря Spotify вновь обрела популярность.

Проект: Stranger Things Concept UI UX Design Web / Автор: Manuel Rovira

10. Брутализм

Брутализм — грубая концепция, рассчитанная на захват внимания. Брутализм применяется в дизайне с 50-х годов прошлого века, в основном для оформления плакатов и афиш (направление возникло в архитектуре 40-х и стало трендом). Концепция снова востребована, ее можно встретить во всех сферах дизайна. Направление призвано шокировать аудиторию прямолинейным подходом, громоздкой типографикой и неизящными дизайнерскими техниками.

Проект: DoD Cyber Guide / Автор: Marçal Prats

Проект: Power A political party / Автор: Bruce Vansteenwinkel

11. Анимация, Gift-картинки и синемаграфика

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

В 2020 очень вероятно возвращение в тренды синемаграфики (это статичные картинки с единичными движущимися элементами, например, изображение чашки, из которой с анимацией поднимается пар). Значимые элементы не должны быть неподвижными!

Проект: RED / Автор: Kevin Hou

Проект: cinemagraphs.com / Автор: Kevin Burg, Jamie Beck

Проект: Strong Women / Автор: Andreea Robescu

12. Генеративный дизайн

Генеративный дизайн уже несколько лет используется при разработке айдентики. За счет смешения цвета и формы этот прием позволяет добиться совершенно уникальной айдентики и повысить узнаваемость бренда.

Проект: Debrecen 2023 European Capital of Culture / Автор: Classmate Studio

Проект: Sydney School of Entrepreneurship / Автор: For The People

Проект: Archdiploma Dynamic Identity / Автор: Process

13. Набор цветов и узоров из 80-90-х

Где мы это видели? Ну конечно же: это возвращение популярных в 80-90-е цветов с их кислотным розовым и дерзкой контрастностью. Можно ли назвать эти ностальгические настроения вернувшимся трендом? Или все объясняется тем, что молодые дизайнеры — это люди, чье детство прошло в окружении сумасшедших цветов тех лет?

Их старые игрушки и сомнительные с точки зрения сегодняшней моды наряды родителей послужили вдохновением для возрождения яркого, красочного тренда, дополненного рядом современных веяний.

Проект: Yes To All / Автор: Nick Liefhebber

Проект: LOGOFOLIO 2020 / Автор: 268 Estúdio Design

Проект: 80’s inspired Pattern / Автор: Rahul Das

14. Кастомные иллюстрации

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

Проект: Bitcoin Illustrations Freebies / Автор: Milo Themes

Проект: Illustrations for Koypo Industries / Автор: Milo Themes

Проект: Lifecycle / Автор: Paperpillar Studio

15. Иллюстрации в миксе с фотографией

Эклектичный тренд на 2020 год сочетает пользовательские иллюстрации с фотографией. Этот метод дает уникальный и очень современный вид для любого проекта. Добавление рисованных элементов в обычную фотографию может сделать любую фотографию особенной, даже если вы используете ее на модной фотографии или плакате.

Проект: Magazine covers / Автор: Andreea Robescu

Проект: Insects Love / Автор: Andreea Robescu

16. Реальные фото

Фотостоки тоже подвержены влиянию трендов. В этом году будут цениться реальные, честные фотоснимки. Многие бренды используют уникальные фото, снятые в движении и без постановки. Фотография становится более искренней и напоминает моментальные снимки, сделанные в расслабленной и естественной обстановке.

17. Изометрический дизайн и фотография

Изометрическое проектирование является способом художественного представления объемных объектов в плоскости. До того, как дизайнеры обнаружили этот прием, он использовался большей частью для составления технических и инженерных чертежей. Изометрический дизайн совершает масштабное восхождение в фотографии, иллюстрировании, 3D графике и иконографике. Можно с уверенностью сказать, что в 2020 году он будет востребован во многих креативных проектах.

Проект: Ultraviolet Break of Day / Автор: Field.io

Проект: Abstractions Vol.1 / Автор: Mohamed Samir

Проект: Isometric House / Автор: Angela Chan

18. Сочетание 2D и 3D

Создавать 3D объекты и помещать их в 2D проекты стало очень модно. Это сочетание дает уникальную внешнюю эстетику, соединяя глубину и плоскость. Технику можно применить в разных направлениях дизайна: от создания логотипов до веб-сайтов и рекламного видео. Конечный результат представляет собой сложную визуальную презентацию, которую невозможно забыть.

Проект: Daily Posters / Автор: Baugasm

19. Монохром

За последние несколько месяцев появилось множество композиций в одной цветовой гамме, на которых фон и объект на переднем плане или шрифт и тени/3D эффекты одинакового цвета.

Что произойдет, если 3D пойдет дальше в создании объема для объектов одного оттенка? Использование одноцветного 3D позволяет дизайнерам добиться иллюзии объема с помощью глубины цвета и теней.


Несмотря на отсутствие контраста возникает натуральный эффект объема, и мы видим объект, реалистично выступающий из фона. Этот магический эффект останется популярным в 2020 году.

Проект: Magrela Popcorn / Автор: Hugo Aranha

Проект: Amazonia Beverages / Автор: Hugo Aranha

Проект: Nespresso Expertise / Автор: JVG ™

20. Дудлы (иллюстрации, нарисованные вручную)

Нарисованные вручную картинки или даже просто отдельные элементы добавляют бренду уникальности. Картинки «от руки» не требуют выверенности линий и могут использовать грубые штрихи, за счет чего композиция получается более естественной.

Проект: Toasted Pets! / Автор: Brosmind ®

Проект: Awake Festival Proposal / Автор: Milo Themes

Проект: Art Hub Bahrain | Packaging / Автор: Elias Madan

21. Смешение и пересечение стилей

Иллюстрация и фотография, типографика и рисунки, градиенты с жирным шрифтом, дуплекс и яркие цвета — сочетайте 2, 3 или даже больше трендов 2020 года, чтобы получить эклектичный и запоминающийся дизайн.

Проект: Styled Social Media kit / Автор: Maksat Amirzhanuly

Дизайн логотипа

22. Адаптивные лого

В мире «отзывчивого» дизайна адаптация логотипа под любое устройство крайне важна. По-настоящему адаптивный логотип не просто уменьшается на странице, а претерпевает дополнительные изменения и подстраивается под окружающий контекст.

Адаптация логотипа стала топовой задачей для дизайнеров: бренд должен быть эффектно представлен вне зависимости от пространства и измерений. Бросая вызов дизайнерам, адаптивные логотипы становятся маст-хевом в 2020 году.

Проект: Responsive Logos / Автор: Joe Harrison

Автор: Design Studio

23. Логотипы с анимацией

Логотипы с анимацией используются уже некоторое время, но сегодня их можно увидеть практически на любом сайте. Анимированные лого способны отобразить историю бренда и увеличить конверсию за счет хорошей узнаваемости.

Проект: Type With Pride Gilbert font / Автор: Fontself Team

Проект: Logo Visual identity / Автор: Mariusz Mitkow

24. Яркие и забавные лого

Красочные лого с забавными элементами, анимацией и кастомными рисунками — значимый тренд 2020 года. Бренды хотят создать позитивный посыл потребителю, а развлекательный подход этому очень способствует.

Проекты: Axel Flores , Vladimir Lifanov , Silvestri Thierry , Vadim Carazan , Onrepeat Studio , Serafim Mendes

25. Негативное пространство

Негативное пространство остается горячим трендом в дизайне. Этот тренд продолжает потрясать основы веб дизайна, хотя активно используется уже некоторое время. Ранее дизайнеры обращались к негативному пространству для создания минималистского стиля, новшество этого года — наполнение свободного пространства яркими цветами, геометрическими фигурами и узорами.

Проекты: SeisTrece Studio , Vadim Carazan , Quim Marin , Bureau Rabensteiner , Andrei Traista

26. Геометрические фигуры и узоры

Оформление логотипа едва заметным кастомным узором делает громкое заявление о бренде. Мелкие геометрические элементы добавляют логотипу разносторонности и оригинальности, поэтому мы определенно увидим этот прием в 2020 году.

Проекты: islam biko , Quim Marin , Silvestri Thierry , Vadim Carazan

27. Монограммы

Монограммы никогда не исчезнут в сфере дизайне логотипа. Это способ создать стабильность, показать качество и традиции в бренде. Монограммы также могут быть созданы с использованием более современного подхода, смешивая некоторые современные тренды с этого года как яркие цвета, дуплекс или геометрические узоры.

Проекты: Milo Themes , Romain Billaud

28. Градиенты

Градиенты — один из главных трендов, унаследованных от 2020-2020 годов, и конечно же, он коснется дизайна логотипов. Легкий градиент или смелые переходы, что выберете вы?

Проекты: MICHAEL SPITZ , Nicholas Slater , Jeroen van Eerden , Vadim Carazan

29. Наложения

В связи с восхождением тренда дуплекс эффект наложения элементов друг на друга невероятно популярен в дизайне логотипов. Взгляните на нашу подборку.

Проекты: CaveLantern , Fontself Team , Rosie Manning

Веб-дизайн (Ui/Ux)

30. Концепция Mobile First

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

Проект: Food Drinks app Interaction Collection / Автор: Johny vino™ .

31. Микровзаимодействия

Они повсюду. Каждый раз, когда вы лайкаете что-то на facebook или пролистываете контент в мобильном приложении, вы участвуете в микровзаимодействиях. И они неплохо работают, учитывая, что их цель — активность пользователя и динамичный UX.

Элементы становятся текучими: кнопки могут менять форму, и все поверхности скрывают анимированные сценарии, ожидающие прикосновения и активации. Готовы спорить, что они не покинут пьедестал и в 2020 году.

Проект: Brewskies v2 / Автор: Kevin Yang

Проект: Gesichtspunkt / Автор: Alim Maasoglu

32. Встроенная анимация

Элементы со встроенной анимацией ненавязчиво помогают пользователю в процессе просмотра сайта. Они скрашивают ожидание полной загрузки контента и проявляются при взаимодействии с элементами и процессами на странице, к примеру, при скроллинге или наведении фокуса на определенный блок.

Присутствие анимированных персонажей на странице помогает установить контакт с пользователем, расширяя привычное взаимодействие с сайтом.

Проект: inturn website / Автор: INTURN

33. Креативные экраны загрузки

Сайты, использующих скучные экраны загрузки, устарели. Почему бы не компенсировать пользователю время вынужденного ожидания креативным подходом? Ниже приведены 2 выдающихся примера применения креативных вариантов загрузки сайтами Contemple и Awwwards.

Проект: Awwwards Conference / Автор: Adoratorio

34. Раскладка с ломаной «сеткой»

Некоторые дизайнеры считают, что традиционная «сетка» раскладки ограничивает их креативность, поэтому стремятся изменить правила и высвободить свою творческую энергию. «Сетка» с наложением картинок и текста друг на друга способна создать уникальный экспериментальный дизайн.

Проект: The Refugee Nation Web Design Branding / Автор: Justin Au

Проект: Ueno Concepts / Автор: Ben Mingo

35. Разбивка страницы

Разбивка страницы на части позволяет разделить контент семантически, например, изолировав текст от картинок или расположив информацию по иерархии. В 2020 году, когда объем информации продолжает расти, никто не хочет пробираться через нагромождение контента. Разбивка станет для дизайнеров тем волшебным инструментом, который поможет вместить все, не потеряв в UX и эстетике.

Проект: Product Landing Page UI / Автор: Dinesh Shrestha

Проект: Design Thinking / Автор: Radowan Nakif Rehan

36. Больше (интерактивного) 3D в оформлении

Главный тренд, который признает современный веб дизайн 2020 — восхождение (интерактивных) 3D элементов, экспериментирующих с глубиной, движением, текстурой и перспективой. Использование 3D элементов и 3D среды делает каждый веб-сайт выcокоуникальным, улучшая его внешний вид и/или пользовательский опыт. В качестве примера можно привести Atacac, который создал интерактивный футуристичный шоу-рум виртуальной реальности, позволяющий посетителям сайта рассмотреть каждый предмет одежды со всех сторон. Другой яркий пример — вращающаяся 3D скульптура сайта The Artery.

Проект: Atacac 2020 Yearbook

Проект: The Artery

37. Закругленные углы и плавные формы

На протяжении последних лет в дизайне преобладали прямые углы и остроконечные геометрические фигуры. В последние месяцы их сместили плавные линии и округлые формы. В сочетании с сочными цветами и использованием слоев этот тренд укрепляет свои позиции.

Проект: LuxuryClean UIUX iOS App / Автор: Mariusz Mitkow

Проект: Landing page project design / Автор: Mariusz Mitkow

38. Фоны с движущимися элементами

«Заставь меня читать» — скрытое обращение пользователя к любому веб дизайнеру. Фоны с движущимися элементами решают эту задачу, притягивая взгляд, но не отвлекая внимание от текста. К тому же они не вызывают проблем при загрузке в отличие от фонов из видео.

Едва уловимое движение текстуры, легкая анимация, эффект вплывающих пузырьков — все они отлично впишутся в веб дизайн сайта, цель которого — понравиться пользователю. Даже в 2020 году.

Проект: Wibicom / Автор: Wibicom Agency

39. Футуристические узоры

В начале 2000-х будущее виделось похожим на показанное в «Матрице»: бегущие по экрану цифры, технологии, робототехника, пульсирующий свет.

Топ-пост этого месяца:  Курс по jQuery. Урок 10. Методы работы с набором выбранных элементов. Часть 2

Сценарий утратил свою привлекательность, когда стало понятно, насколько далеко фильм отошел от реальности, которая оказалась намного менее футуристичной. Однако благодаря Глубокому Анализу и Big Data мы наблюдаем возвращение робототехнических трендов: футуристические орнаменты найдут применение и в 2020.

Проект: Crown Tech / Автор: Jan Wolinger

Проект: SpaceShip / Автор: Arif Rachman Hakim

Проект: Data Visualization Concept / Автор: Mario Šimić

40. Монохромные иконки

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

Проект: Icon Design / Автор: Eaton

41. Иконки, частично заполненные цветом

Части графических иконок будут закрашиваться цветом. Это будет не полное заполнение, а лишь легкое прикосновение цвета, оставляющее пробелы, словно иконка небрежно нарисована от руки. Заливка, которая не перегружает иконку и сохраняет ее читабельной.

Проект: Alfred icons / Автор: Andrea O

Проект: Icons / Автор: Alisa_

42. Скроллинг с Parallax

Скроллинг с Parallax настолько вездесущ, что невозможно не принимать его во внимание. Когда скроллинг может управлять скоростью анимации, единственный лимит дизайнера — воображение.

Parallax — бессменный тренд веб-дизайна, продолжающий делать сайты оригинальными и запоминающимися. Создавая 3D эффект между движущимися передним планом и фоном, Parallax придает неуловимую глубину странице и плавность пролистывания контенту.

Проект: Dex Multi-Layer Parallax / Автор: Milo Themes

43. Мондрианизм

Желание свободы и эквилибриума (гармонии) — врожденное стремление человека (по причине присутствия в нем вселенной)», сказал Пит Мондриан. Мондрианизм станет трендом 2020 года: стиль, в котором соединяются базовые цвета — красный, желтый и синий, создавая впечатление чистоты, гармонии и уравновешенности.

Эквилибриум, основанный на прямоугольных формах и базовых цветах, с идеальным с точки зрения удобства пользователя размещением элементов.

Проект: Mondrian / Автор: Stugbear

Проект: Guernica / Автор: Shota

Типографика

44. 3D — моделирование

3D — многообещающий тренд, охвативший все сферы дизайна. Объемный текст добавляет реалистичности общей композиции.

Проект: Atypical / Автор: Pawel Nolbert

Проект: Alphabet Project / Автор: Serafim Mendes

Проект: RE NEON vI / Автор: Omar. Aqil

45. Жирная типографика

Жирная типографика была большой трендом в последние годы, и она определенно останется. В 2020 году мы увидим гораздо более смелую типографику в сочетании с яркими цветами. Поэтому помните, что если вы хотите сделать сильное заявление, смелая типографика это отличный метод.

Проект: Club AVi’s XII-year Anniversary Posters Series / Автор: Milo Themes

Проект: TEDxGroningen / Автор: Rudmer van Hulzen

46. Serif шрифты

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

Проект: Custom Type Design / Автор: Moshik Nadav Typography

Проект: Lux Naturalis Gala Invitation

47. Геометрический шрифт

Геометрические шрифты были востребованы последние несколько лет и остаются важным трендом и в 2020 году.

Проект: VitrineMedia / Автор: Graphéine

Проект: Sydney School of Entrepreneurship / Автор: For The People

48. Кастомные шрифты

Эксцентричные кастомные шрифты становятся хитом среди дизайнеров. Фрагментированный, искаженный или ломанный шрифт определенно выделяется на фоне других, на что и делается расчет. Некоторые из подобных шрифтов еще и интерактивные, с откликом на движения курсора мыши. Уникальности кастомных шрифтов нет предела, и в 2020 году мы увидим множество экспериментов с ними.

Проект: Lingerie XO The Sexiest Most Powerful Typeface Yet / Автор: Moshik Nadav Typography

Автор: Jeanne Bataille

49. Эксперименты с выравниванием и кернинг

Хаотичность в типографике была одним из главных трендов 2020 и остается на вершине в 2020 году. Забудьте о правилах и дайте простор фантазии!

Проект: Studio Studio / Автор: Rudmer van Hulzen

Проект: nyMusikk annual report 2020 / Автор: Non-Format

50. Экспериментальная типографика

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

Проект: Experimental Chinese Typography / Автор: Letitia Lin

51. Типографика в миксе реальными фото

Эклектичные тренды всегда эффектны, и этот не исключение. Добавляйте типографику в фотоснимки или 3D отрисовки и получайте авангардный дизайн.

52. Креативная типографика

Креативная типографика, применяющаяся уже некоторое время, не только не исчезнет в 2020 году, но и получит статус одного из главных трендов. Свободное от условностей применение этой техники поможет построить «мир, созданный воображением». «Используй шрифт, чтобы впечатлять» — лейтмотив этого года.

Проект: ILOVEDUST — 3D TYPE COLLECTION 1 / Автор: ILOVEDUST

Проект: Typography 3D — 9 / Автор: Alexis Persani


Дизайн упаковки

53. Плоский дизайн

Плоский дизайн до сих пор остается востребован в оформлении лейблов и упаковок. Плоские фигуры, узоры и кастомные иллюстрации — верный выбор в 2020 году.

Проект: Cheddar-Cheese-Melt-Mcdonalds-Packaging / Автор: Mostafa Abdelmawla

Проект: The-Gang / Автор: MARKA NETWORK

Проект: Melio / Автор: Rachael Batley

54. Минималистский дизайн

Дизайн со множеством элементов ушел в пошлое, вся второстепенная информация должна уступить место важной. Этот тренд активно использует отрицательное пространство, чтобы пользователь взаимодействовал только с необходимым ему контентом.

Проект: Sarta-Milano / Автор: MARKA NETWORK

Проект: Gyalmo / Автор: Łobzowska Studio

55. Узоры и фигуры

Геометрические

Геометрические формы будут присутствовать во всех сферах дизайна. Выбирайте орнаменты, которые отражают суть продукта.

Проект: NICHE-Tea / Автор: IWANT design

Кастомные фигуры и элементы

Персонализированный дизайн — обязательная составляющая в построении идентичности бренда.

Проект: aleFanty / Автор: less

Проект: Nature Organic Chocolates / Автор: Mike Karolos

Дудлы

Дудлы — свежий тренд этого года во всех направлениях дизайна, а разработка айдентики — идеальное поле применения для этих смелых рисунков. Дудлы могут преобразить обычный скучный дизайн в интересное и уникальное произведение искусства.

Проект: Zoe-Juices / Автор: Beetroot Design

Винтаж

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

Проект: Mutti Special Edition for FICO Eataly World / Автор: Auge Design

56. Смелая типографика

Смелая типографика создает сильный и однозначный посыл. Если нужно, чтобы продукт выделялся, используйте большой шрифт в связке с яркими цветами.

Проект: Amilk & Adidas / Автор: Duy Dao

57. Цвета

Дерзкие цвета

Сочные цвета — хит этого года, поэтому мы не раз столкнемся с ними в оформлении. Дополненные сумасшедшими узорами и геометрическими фигурами, яркие цвета преобразят оформление любого продукта.

Проект: Deker-rebranding / Автор: less

Проект: Mochila / Автор: Sweety & Co.

Пастельные цвета

Пастельные цвета — тренд-реакция на яркие цвета, охватывающий все больше пространства в оформлении. Мягкие оттенки транслируют теплое отношение к потребителю.

Проект: Freshly Baked / Автор: Design Happy

Проект: Ela cosmetics / Автор: ChocoToy cute

58. Необычные текстуры и формы

В оформлении упаковки разрешено все: от стекла до металла. Упаковка продукта должна выделять его на фоне аналогов и делать запоминающимся. Использование необычных материалов для современной инновационной упаковки — новое требование в дизайне.

Проект: Sprout Green Paulownia Wooden Box / Автор: Yinjue

Проект: Eco bamboo tooth brush / Автор: Margas Family

59. Голографический эффект

Голографический эффект — вернувшийся тренд. Металлические текстуры позволяют достичь футуристического эффекта и создать магически притягательный дизайн.

Проект: EAT ME / Автор: PACKVISION AGENCY

Проект: Sphynx / Автор: Anagrama Studio

60. Градиенты на упаковке

Добавьте мягкие градиенты для создания глубины или используйте яркие цвета для более прямолинейного эффекта.

Проект: YOU & OIL natural cosmetics / Автор: Irmantas Savulionis

61. 3D натюрморты

Последние годы был заметен рост числа проектов с 3D дизайном. Наблюдая работы некоторых 3D художников из топа, например MVSM или Питера Тарка, можно предсказать, что в 2020 году популярность 3D натюмортов возрастет. Для корпоративных коллабораций тренд окажется на одном уровне важности с разработкой лого и размещением продукции.

Проект: Squarespace stillife / Автор: MVSM

Проект: Adobe Government / Автор: Peter Tarka

Проект: Audi Q-Riosity / Автор: Peter Tarka

62. Абстрактные фигуры

Абстрактные 3D фигуры и яркие цвета — микс года. Это определенно один из самых влиятельных трендов, так что не упускайте его из вида.

Проект: Logitech CRAFT / Автор: Pawel Nolbert

Проект: SWEET SPIRALS / Автор: Kirill Maksimchuk

63. 3D отрисовка в стиле металлик

3D отрисовка в стиле металлик смотрится эффектно и несомненно относится к трендам, которые интересно отслеживать в 2020.

Мощные инструменты отрисовки делают возможным создание безупречных и изящных 3D моделей. Благодаря им стал доступен реалистичный и привлекательный металлик эффект, излучающий роскошь и благородство. За счет правильного применения света, отражений и теней поверхности и элементы в стиле металлик обретают глубину и реализм и больше не выглядят неуместно.

Проект: Grand Spectacular 2020 / Автор: Mustaali Raj

Проект: Various Concepts / Автор: Oleg Morozov

Проект: NIKE FC 3D Golden balls in the real world / Автор: T A V O .

64. 3D графика с анимацией

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

Проект: NIKOPICTO SHOWREEL 2020 / Автор: Nikopicto

65. Очень реалистичное 3D

3D всегда вызывает восторг и будет возглавлять современные тенденции веб дизайна 2020. Этот эффект способен обыграть реальность и вымысел так тонко, что их практически невозможно отличить. Картинка это или отрисовка? Грани продолжают стираться…

Проект: YOOX: Make a Wish / Автор: JVG ™

Проект: Air Max ’17 / Автор: Berd .

Статья собрана из источников:

Спасибо, дорогой друг, что дочитал данный лонгрид с трендами веб дизайна 2020 до конца. На его сбор, перевод и публикацию ушло 8 дней и если вам не сложно уделите 30 секунд, чтобы поделиться им в соц.сетях или на своем ресурсе, тем самым вы очень поможете распространить данный материал. Спасибо большое =)

5 мощных техник адаптивного веб-дизайна

Дорогие друзья, обращаем ваше внимание на то, что данная статья была опубликована еще в 2013 году. В то время доля мобильного трафика не превышала 28% от общего. При этом уже в 2015 году она приблизилась к отметке в 60%.

Безусловно и сейчас наличие адаптивного дизайна не является универсальным рецептом на все случаи жизни. Однако очевидно, что в данный момент соответствие стандартам Mobile Friendly является жизненно необходимым для подавляющего большинства сайтов.

Если вам нужен именно такой интернет-проект, обратите внимание на рейтинг разработчиков Mobile Friendly сайтов. В нем мы собрали компании, которые специализируются на создании площадок с адаптивным дизайном или мобильной версией.

Отдельно отметим, что адаптивный дизайн — весьма широкое понятие. Ознакомиться с его разновидностями и узнать подробности можно в нашем Адаптивном словаре.

Рич Брукс основатель The Marketing Agents, онлайн-издания для предпринимателей, стремящихся привлечь новых клиентов и получать большую прибыль благодаря мобильному маркетингу и продвижению в поисковых системах и социальных сетях.

Адаптивный дизайн — популярное направление веб-дизайна, но подходит ли он вам?

К 2014 году более половины трафика будут генерировать мобильные устройства. Если веб-ресурс не будет под них оптимизирован, пользователи будут бежать с такого сайта, как от чумы.

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

Если вы раздумываете над созданием адаптивного сайта, следующий текст поможет вам принять верное решение.

Что такое адаптивный веб-дизайн?

Адаптивный веб-дизайн (responsive web design, RWD) — это подход к разработке сайтов, согласно которому ресурс должен быть удобным для просмотра с любого устройства, независимо от размера экрана, будь то настольный компьютер, мобильный телефон или планшет, существующее устройство или то, что появится только в будущем.

Помните, как нам говорили, что не царапаются?

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

Нет единственного тарифного плана, диеты или религии, которые подходили бы для всех, так почему мы должны верить, будто существует универсальный подход к редизайну сайта?

Ниже — пять причин отказаться от адаптивного дизайна при разработке вашего следующего проекта.

«Сначала займитесь мобильной версией» — глупый совет

«Сначала — мобильные» («Mobile first») — боевой клич дизайнеров, применяющих RWD. Он призывает начинать разработку с версии для мобильных устройств и только потом создавать сайт для других платформ.

Внешне это безобидный совет, но правда заключается в том, что дизайн должен разрабатываться в первую очередь для пользователей.

Годами я убеждаю предпринимателей, что, хотя им и нужен контент, оптимизированный для поисковых систем, Google никогда не станет их клиентом. Писать тексты нужно, ориентируясь на идеального клиента, а только потом проверять, «понимают» ли их поисковые системы.

То же правило верно и для мобильного веб-дизайна: сначала проектируйте для пользователей, затем — для платформы. Просто не забывайте, что пользователь мобильного устройства может решать задачи (поиск адресов, телефонных номеров), отличные от тех, которыми тот же самый человек занимается, сидя за компьютером (более глубокое изучение веб-ресурсов).

Зачастую адаптивный дизайн приводит к неоправданному увеличению времени загрузки сайта на мобильных устройствах

Концепция RWD подразумевает, что пользователи всех платформ получают одинаковый контент, оптимизированный под конкретные разрешения экранов.

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

Длинная страница с одной (или даже двумя) боковыми колонками, которая прекрасно смотрится на экране настольного компьютера, на узком — в одну колонку — экране телефона превращаются в упражнение, от которого сводит пальцы. В результате у пользователей остаётся неприятное впечатление от использования мобильного ресурса.

Изображения, оптимизированные под настольные компьютеры, — ещё одна проблема. По словам Хуана Пабло Сармиенто (Juan Pable Sarmiento),

«это наиболее проблемный аспект адаптивного веб-дизайна, так как масштабирование „десктопного“ изображения для отображения на экране мобильного устройства предполагает загрузку изображения, оптимизированного для экрана настольного компьютера. Для просмотра полноразмерных изображений на мобильном устройстве приходится загружать неоправданно большие файлы и изменять их размеры под свой экран».

Пользователи не смогут посмотреть полную версию

На большинстве неадаптивных мобильных сайтов внизу страницы присутствует опция «Переключиться на полную версию» или другая аналогичная кнопка. Она позволяет посетителям просматривать сайт для настольных компьютеров, минуя таблицы стилей для мобильной версии.

Мы, специалисты в области RWD, самонадеянно полагаем, будто лучше знаем, что нужно пользователям. И если дизайнер выполнил свою работу, необходимость в полной версии сайта отпадает.

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

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

У вас отличный сайт

Помните: «Сначала — мобильные».

Для сайтов, которые уже достаточно эффективны, есть альтернативы получше. Можно создать мобильный сайт (который, разумеется, имеет свои недостатки), чтобы сохранить существующий ресурс в его нынешнем виде, и просто перенаправлять пользователей смартфонов на мобильную версию сайта.

Для сайта, построенного на платформе WordPress (на этой популярной CMS работает каждый шестой сайт в мире) можно установить плагин WP-Touch. Сайт flyte new media использует этот плагин, чтобы сделать просмотр сайта более удобным для мобильных пользователей.

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

А с выходом WP-Touch Pro появилась возможность разрабатывать сервисы, ориентированные на пользователей планшетов.

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

Мобильный трафик вашего сайта невелик

Определённые отрасли могут ожидать серьёзного притока мобильного трафика в ближайшее время (например, туристические порталы, онлайн-магазины и новостные сайты). Однако в других отраслях у предпринимателей будет больше времени для манёвра.

Единственный способ узнать точные цифры — зайти в Google Analytics и посмотреть, какая доля трафика вашего сайта приходится на мобильных посетителей, и с какой скоростью растёт их число.

Я не предлагаю вам прятать голову в песок! Я говорю о том, что бизнес-решения надо принимать, исходя из того, какую пользу они принесут вашему делу, а не фирме, занимающейся веб-разработкой.

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

Думаете, я один придерживаюсь такого мнения? Вот несколько авторов, согласных с тем, что адаптивный дизайн не так уж безупречен.

Выводы и пояснения

Как некоторые из вас могли заметить, сайт The Marketing Agents имеет адаптивный дизайн.

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

Со временем, когда дизайнеры станут более опытными в разработке адаптивного дизайна, поймут его недостатки и найдут обходные пути, они смогут создавать сервисы, более удобные и полезные для конечных пользователей и, что не менее важно, для владельцев бизнеса.

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

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

Если вы думаете, что автор этого поста сошёл с ума, дайте знать об этом в комментариях.

Если ваш бюджет ограничен и вы думаете о том, от чего стоит отказаться в начале, чтобы весь остальной проект был реализован на высшем уровне – обратитесь к участникам рейтинга веб-студий.

Лидеры рейтинга знают лучше всех, каким именно образом решить вопрос удобства работы с сайтом мобильных посетителей и в каких случаях действительно стоит им пожертвовать, а в каких – нет.

Чтобы у вас была только достоверная и объективная информация, для составления этого рейтинга мы ежегодной изучаем десятки тысяч сайтов, запущенных в Рунете.

Говорить «нужно делать только адаптивные сайты» или «не нужно делать адаптивные сайты» —глупо, так говорят только фанатики. Они исходят не из здравого смысла, а из каких-то своих безосновательных побуждений.

То же самое я часто наблюдаю и при упоминании подхода mobile first: иногда он оправдан (например, если 90% аудитории — мобильная или когда вам просто важно разработать функционал именно под мобильных пользователей), но иногда нужно начинать именно с десктопов. Те, кто применяет только mobile first, просто «потому что он есть», а не потому, что того требует здравый смысл — тоже являются фанатиками, из-за которых появляются противники у responsive web design, готовые часами с пеной у рта ломать копья в бесконечных спорах. Конечно, если пытаться использовать RWD везде, где нужно и где нет — это ни к чему хорошему не приведет. Особенно, если делать это бездумно.

Основной постулат, который мы проповедуем, как компания, продвигающая адаптив на российском рынке веб-разработок — думать! Думать постоянно: нужно ли на этом проекте применять адаптив? Если да, то как это сделать правильно? На каких breakpoint’ах остановиться? С чего начать проектирование (mobile first или desktop first)? Какие технологии следует применить?

Часто адаптивным пытаются назвать сайт, в котором используется одна единственная технология — media queries, тогда как настоящий адаптивный сайт может (и должен) включать в себя уйму параметров:

  • серверная адаптация изображений — это позволит не грузить мобильным пользователям полновесные десктопные изображения, а пользователям экранов с высокой плотностью пикселей — насладиться всей мощью своего дисплея;
  • серверная адаптация layout’a — если какие-то блоки мы все-таки скрываем, логично это делать при помощи сервера, чтобы не отображать лишние элементы разметки пользователям и не заставлять их грузить такие ценные на мобильном интернете килобайты;
  • адаптировать также нужно и интерфейс:
    • o по очевидным причинам нельзя оставлять элементы, работающие по наведению;
    • o различные карусели нужно адаптировать под touch;
    • o нельзя заставлять пользователя бесконечно скроллить разросшуюся за счет перемещенных блоков страницу;
    • o в тоже время нельзя и оставлять его без доступа к нужному контенту, нельзя просто скрывать его: контент должен быть доступен, при необходимости.

Таких нюансов, которые нужно учитывать при разработке адаптивного сайта — очень и очень много. Мы потратили достаточное количество времени на изучение и эксперименты, прежде чем научились делать продуманные адаптивные сайты.

Решение о том, делать или не делать адаптивный сайт должно быть взвешенным. Возможно, вашему бизнесу нужен именно мобильный, а не адаптивный сайт. А может ему вообще нужно мобильное приложение или вам и вовсе еще рано выходить на мобильный рынок, несмотря на повсеместное растущее потребление интернета с мобильных устройств.

Настоящий адаптивный сайт не будет ни в чем уступать мобильному сайту. Наоборот, он будет превосходить его, ведь мы получаем не статичный, а динамичный сайт. К тому же, он будет уже заранее адаптирован к будущему. Future-friendly web, как мы называем это в агентстве AGIMA. Не важно, какое устройство выйдет завтра — ваш сайт, если он сделан правильно, будет отображаться на нем корректно.

Добавить комментарий