Блочный дизайн. Плиточный дизайн

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

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

CARD-BASED DESIGN

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

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

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

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

ЗНАЧЕНИЕ ИЗОБРАЖЕНИЙ

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

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

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

ОПЫТ ВЗАИМОДЕЙСТВИЯ

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

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

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

БУДУЩЕЕ ПЛИТОЧНОГО ДИЗАЙНА

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

Наступивший год принес массу свежих технологий и тенденций, но доминировать вероятнее всего будут направления, проявившие себя к концу 2015-го. Больше видео, решений с вертикальными паттернами, идей навеянных материальным дизайном и стильных слайдов. Для этих техник следует ожидать роста популярности. Большинство из новых концепций не столь трудны для осуществления. Ниже будут рассмотрены 11 трендов веб-дизайна (и много отличных сайтов для примера) с которыми мы столкнемся в 2016-м году. Образцы этих дизайнов действительно помогут прочувствовать тенденцию.

Сайт привлекателен анимированными фонами, интерактивными эффектами

Еще более красивая типографика

Упрощенные интерфейсы вымостили дорогу к идее применения красивой типографики (а также удобных веб-инструментов, наподобие Google Fonts и Adobe Typekit – расширив огромными онлайн-библиотеками возможности разработки). Простота надписей (читабельных и легко воспринимаемых) в концепции «каллиграфии», освобождает пространство другим элементам. Что следует попытаться увязать, так это удобочитаемый шрифт и занимательную новизну опций.

сайт ресторана в стиле кантри: размеренный и неспешный, без суеты (броских контрастов) с хорошо подобранными цветами и шрифтами. Стиль кантри (rustic-style) дает ощущение близости к природе. Фирменная символика, связанная с пернатыми, отражена графически (иллюстрации, рисунки фонов). Вообще, это часть айдентики – «ястреб и курица» (англ. Hawk and Hen), как символ удачной охоты

Иллюстрации и рисунки

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

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

Сайт располагает к себе приятными микроитерацииями и иллюстрациями. и «Беби-стиль» всего сайта превращают дизайн в игру

Цель урока: Знакомство с блочной версткой CSS. Получение навыков использования блочной верстки сайта

• При работе со слоями или, иначе говоря, блоками и элементами div , основная нагрузка ложится на CSS, т.к. без свойств слои из себя практически ничего не представляют.
• К сожалению до сих пор существует проблема с кроссбраузерностью при работе с блоками. Т.е. одни и те же свойства дают разный результат в разных браузерах. Для борьбы с такими проблемами существуют так называемые хаки. Хак - это набор приемов, когда отдельным браузерам подается код, который понимается только этим браузером, а остальными игнорируется.

Отличительные черты от табличной верстки

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

Фиксированный дизайн или
жесткая блочная верстка (две колонки)

• Фиксированный макет подразумевает использование слоев заданной ширины, которая определяется разрешением монитора пользователя.
• Так как наиболее популярным среди пользователей сети является разрешение монитора 1024×768, то желательно ориентироваться именно на него. Общая ширина блоков в таком случае составляет 900–1000 пикселей (небольшая часть пикселей требуется на полосы прокрутки и границы окна браузера).
• Основной блок с контентом размещается по центру , тогда «свободные» поля по краям неплохо смотрятся даже при большом разрешении монитора.

Рис.1. Пример фиксированного дизайна

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

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

Выполнение:

• «Разбиваем» все основные элементы страницы на блоки следующим образом:
  • блок 1 — слой первый (id="shapka"),
  • блок 2 и 3 заключаются в единый блок (id="container"),
  • блок 2 — слой с меню (id="menu"),
  • блок 3 — слой с контентом (id="content"),
  • блок 4 — слой с id="bottom" .

Схематично изобразим расположение блоков:

<body > <div id = "shapka" > 1</ div > <div id = "container" > <div id = "menu" > 2</ div > <div id = "content" > 3</ div > </ div > <div id = "bottom" > 4</ div > </ body >

1. Задаем свойства «шапки» (блок 1)

• Выбираем общую ширину слоев «на глаз» — 750 пикселей.

margin-right: auto; margin-left: auto;

• либо задать высоту при помощи отступа

например:

padding-top : 15px ; padding-bottom : 15px ;

padding-top: 15px; padding-bottom: 15px;

Весь код для шапки:

#shapka{ text-align: left; /* Выравнивание внутреннего контента по левому краю */ width: 750px; /* Ширина блока и общая ширина*/ background: #900000; /* Цвет фона */ height: 50px; /* Высота блока */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ padding: 10px; }

2. Создаем свойства контейнера

• Задаем ширину контейнера: она должна быть 750px + 20px (общая ширина макета + внутренние отступы в общей ширине макета). Т.е. в контейнере нет внутренних отступов, поэтому увеличим его ширину на 10 пикселей слева и 10 пикселей справа
• Если макет должен прилегать к левой части экрана, то браузер выполнит это автоматически. В нашем случае отцентрируем блок контейнера

#container { width: 770px; /* Ширина слоя или (ширина макета+20) */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }

3. Создаем свойства для блока 2 — меню

• Слой номер 2 шириной в 200 пикселей (width)
• Для этого же слоя (меню) устанавливаем обтекание соседним блоком, т.е. свойство float: left
• Задаем внутренние поля, чтобы текст не «приклеился» к краю слоя (свойство padding)
• Задаем цвет текста и заднего фона (background , color)

#menu { width: 200px; /* Ширина слоя */ float: left; color: white; /* Цвет текста */ background: #008080; /* Цвет фона */ padding: 10px; /* Внутренние поля вокруг содержимого */ }

4. Создаем свойства для блока 3 — контент

• Задаем ширину слоя из расчета 770px — 200px = 570px, Но! так как мы установили внутренние отступы в обоих блоках 2 и 3, то мы должны вычесть еще 40 пикселей: 20 — внутренние отступы блока с меню и 20 — внутренние отступы блока с контентом. Получим ширину слоя 770px — 200px — 40px = 530px
• Задаем обтекание float: left , исключая баг браузера Internet Explorer: если не установить свойство, то между слоями будет зазор. Кроме того, если не установить это свойство, то блок окажется за блоком меню, и только лишь его контент (текст) будет обтекать блок меню справа.
• Задаем цвет заднего фона (background) и внутренние поля (padding)

#content { /* Правая колонка*/ width: 550px; /* Ширина слоя */ float: left; /* Обтекание с соседним слоем */ padding: 10px; /* Внутренние поля вокруг содержимого */ background: #e0e0e0; /* Цвет заднего фона */ }

5. Создаем свойства для блока 4 — «подвал»

• Ширину слоя устанавливаем в 750 пикселей
• Для этого блока надо убрать обтекание, т.е. установить свойство clear
• Устанавливаем внутренние поля padding
• Задаем цвет для фона (background) и текста (color)
• Центрируем блок (margin-right и margin-left)

#bottom{ width:750px; /* Ширина слоя */ clear:left; /* возвращаем блочность и располагаем слой слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ background:#444; /* фон */ color:#fff; /* цвет текста */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }

Итоговый код: всё вместе

<style type = "text/css" >

1
2
3
4

Результат:



Рис.2. Жесткая блочная верстка из двух колонок

Фиксированный дизайн для трех колонок

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

1. Использование свойства для расположения колонок рядом.
2. Использование набора тех CSS свойств, которые предназначены для позиционирования слоев.

Рассмотрим первый случай.

Использование свойства float для макета в три колонки

На рис. 3 — результат использования свойства для трехколонного макета. На самом деле используется 6 слоев — отдельно для заголовков колонок и отдельно для самих колонок.

Рис. 3. Фиксированный дизайн в три колонки

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

Выполнение:

• Определим для заголовков три слоя (#header...) и для колонок три слоя (#col...).
• Так как колонки и их заголовки расположены на двух разных строках, то объеденим их в контейнеры (class="container").
• Получим схематичное изображение расположения блоков:

Получим следующую html-структуру:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<body > <div class = "container" > <div id = "header1" > Евгений Евтушенко</ div > <div id = "header2" > Валерий Брюсов</ div > <div id = "header3" > Эдуард Асадов</ div > </ div > <div class = "container" > <div id = "col1" > Мне снится старый друг,<br / > который стал врагом,<br / > но снится не врагом,<br / > а тем же самым другом.<br / > Со мною нет его,<br / > но он теперь кругом,<br / > и голова идет<br / > от сновидений кругом. </ div > <div id = "col2" > Великое вблизи неуловимо,<br / > Лишь издали торжественно оно,<br / > <br / > </ div > <div id = "col3" > <br / > <br / > <br / > </ div > </ div > </ body >

2. Добавление стилей для заголовков (селектор header...) и колонок (селектор col...)

• Ширину колонок и заголовков сделаем у всех одинаковой. Поскольку колонок 3, а средняя ширина страницы должна быть примерно 700-900 пикселей, то установим ширину колонок в 250 пикселей.

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ }

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

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ }

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

#header1, #header2, #header3, #col1, #col2, #col3 { ... float: left; }

• Добавляем границу для блоков (border) и и задаем параметры шрифта (font-family , font-weight , font-size , color).

#header1, #header2, #header3, #col1, #col2, #col3 { ... border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

Получим код:

#header1 , #header2 , #header3 , #col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 5px ; /* Поля вокруг текста */ /* Отступ сверху */ float : left ; /* Состыковка колонок по горизонтали */ /* Рамка вокруг слоя */ /* Не серифный или рубленый шрифт */ font-weight : bold ; /* Жирное начертание текста заголовка */ font-size : 80% ; /* Размер шрифта */ color : white ; /* Цвет текста заголовка */ }

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ margin-top: 2px; /* Отступ сверху */ float: left; /* Состыковка колонок по горизонтали */ border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

• Установим задний фон отдельно для каждого селектора.

#header1 { background : #B38541 ; } #header2 { background : #008159 ; } #header3 { background : #006077 ; } #col1 { background : #EBE0C5 ; } #col2 { background : #BBE1C4 ; } #col3 { background : #ADD0D9 ; }

#header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }

Смотрим промежуточный результат:

Рис. 4. Промежуточный результат

3. Задание стиля для контейнеров

• Теперь необходимо объединить в отдельные слои-контейнеры заголовки и колонки и задать им соответствующий стиль — отмену обтекания (clear)

.container { clear : both ; /* Отменяет действие обтекания float */ }

Container { clear: both; /* Отменяет действие обтекания float */ }

• Теперь осталось доработать шрифт текста в колонках, изменив его размер, начертание и цвет.

#col1, #col2, #col3 { font-family: "Times New Roman", Times, serif; /* Шрифт серифный или с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ }

Итоговый код: всё вместе

<style type = "text/css" >

Результат:

Рис. 5. Результат

Использование позиционирования слоев для макета в три колонки

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

Рис. 6. Позиционирование слоев для макета в три колонки с разделителем

Пример: создать веб-страницу с макетом из трех колонок с разделительной линией, изображенную на рис. 6 . Использовать приемы фиксированного макетирования с позиционированием слоев

Выполнение:

1. Создание структуры html-кода

• Для данного макета достаточно создать три слоя div для каждой колонки.

Поэтому структура будет простой:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<body > <div id = "col1" > Иван Бунин</ br ></ br > </ br > </ br > </ br > </ div > <div id = "col2" > </ br > Золотится отблеском окно. </ br > </ br > Белым снегом всё запушено. </ div > <div id = "col3" > И всё утро яркие и чистые</ br > </ br > </ br > Хризантемы на моём окне.</ br ></ br > 1903 </ div > </ body >

2. Добавление стилей для колонок

• Установим одинаковую ширину колонок (width) и внутренние поля по вертикали и горизонтали (padding).

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; }

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

#col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 0 6px ; /* Поля по вертикали и горизонтали */ float : left ; /* Обтекание слоев */ }

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ }

• Так как разделительная граница должна присутствовать только с внутренних сторон слоев, то рамку необходимо добавить только у двух слоев с одной стороны (border).

#col1 , #col2 { border-right : 1px solid #000 ; /* Поля по вертикали и горизонтали */ float : left ; /* Обтекание слоев */ } #col1 , #col2 { border-right : 1px solid #000 ; /* Параметры линии справа от текста */ }

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ } #col1, #col2 { border-right: 1px solid #000; /* Параметры линии справа от текста */ }

</ style > </ head > <body > <div id = "col1" > Иван Бунин</ br ></ br > На окне, серебряном от инея,</ br > За ночь хризантемы расцвели.</ br > В верхних стёклах - небо ярко-синее</ br > И застреха в снеговой пыли. </ div > <div id = "col2" > Всходит солнце, бодрое от холода, </ br > Золотится отблеском окно. </ br > Утро тихо, радостно и молодо. </ br > Белым снегом всё запушено. </ div > <div id = "col3" > И всё утро яркие и чистые</ br > Буду видеть краски в вышине, </ br > И до полдня будут серебристые </ br > Хризантемы на моём окне.</ br ></ br > 1903 </ div > </ body >

Дизайн в три колонки готов!

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

Отличия блочной вёрстки от табличной

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

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

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

Суть блочной вёрстки

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

Каждая часть страницы помещается в свой блок