Как происходит блочная верстка?

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

Для примера возьмем вот такой макет сайта, созданный в Photoshop . Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id . Получается такая структура:

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

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

Полный код примера index.html :

Содержимое файла style.css :

body { background: #f3f2f3; color: #000000; font-family: Trebuchet MS, Arial, Times New Roman; font-size: 12px; } #container { background:#99CC99; margin: 30px auto; width: 900px; height: 600px; } #header { background: #66CCCC; height: 100px; width: 900px; } #navigation { background: #FF9999; width: 900px; height: 20px; } #menu { background: #99CC99; float: left; width: 200px; height: 400px; } #content { background: #d2d0d2; float: right; width: 700px; height: 400px; } #clear { clear:both; } #footer { background: #0066FF; height: 80px; width: 900px; }

Вот так наш пример блочной верстки сайта выглядит в окне браузера:

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

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

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

CARD-BASED DESIGN

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здравия желаю, товарищ Читатель!

Зачем нужны посадочные страницы в 10 блоков, если важная информация есть на первом экране и можно ограничиться разделами «О нас», «Услуги», «Цены» и «Контакты»? Ответ простой: чтобы поглотить внимание покупателя и замотивировать вступить во взаимоотношения с товаром и побудить купить продукт.

Самые используемые техники вовлечения посетителя в процесс покупки товара — это AIDA (от англ. Attention-Interest-Desire-Action) и PMPHS (Pain-More Pain-Hope-Solution). Руководствуясь этими техниками, строится логическая структура посадочной страницы и определяются блоки, которые будут присутствовать на ленде.

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

В этом посте ты познакомишься с первой половиной — 10 блоками. Остальные 10 примеров жди в следующей статье в августе.

20 блоков лендинга — выбери свои

1. Блок-составные части продукта, комплектация;
2. Блок-гарантии (тройная);
3. Блок о достижениях/преимуществах твоей компании;
4. Блок о сотрудниках компании;
5. Блок об услугах/отделах компании;
6. Блок о партнерах/клиентах;
7. СТА (Call-to-action, призыв к действию);
8. Блок-преимущества клиента от использования твоего продукта («Почему мы?»);
9. Блок о процессе предоставления услуги (доставка, способ осуществления сделки);
10. Блок-Калькулятор;
11. Блок с акцией+ограничитель по времени;
12. Блок с подарком+условия получения подарка;
13. Блок с картой расположения компании («Как проехать»);
14. Блок с контактной информацией;
15. Блок-сравнительная таблица;
16. Блок-идентификация «Для кого?»;
17. Блок-ЧАВО.

*Нумерация блоков представлена приблизительна — порядок блоков на лендинге зависит от ниши. Определить порядок блоков можно при помощи всё тех же инструментов Яндекс Метрики ( , карта скроллинга, карта кликов) поможет тебе эта статья.

Содержит ключевую информацию для посетителя лендинга, УТП твоей компании. Желательно, чтобы эта информация также была конкурентоспособной. В зависимости от ниши, такой информацией может быть: цена продукта (от 488 рублей за 1 шт.), сроки доставки (доставка за 2 дня), место производства (напрямую из Германии). более подробно можешь узнать из предыдущей статьи.

Подходит для: оптовых тематик; ниши, где покупатель недостаточно осведомлен о преимуществах продукта (в основном — товара).

Блок может быть ответом на вопрос покупателя «Почему так дорого?», если на нем детально расписаны характеристики товара. Это нужно для создания более четкой картины объекта вожделения в голове потенциального клиента.

3. Блок-составные части продукта, комплектация

Подходит для: описания комплексных услуг; ниши по организации досуга; описания комплектации товара.

Если блок про характеристики продукта демонстрирует товар всецело, то блок про составные части раскладывает продукт (товар или услугу) на слагаемые.

4. Блок-гарантии (тройная)

Подходит для: любой посадочной страницы.

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

5. Блок о достижениях/преимуществах

Подходит для: любого лендинга; брендированного продукта от известной компании; особо важно в высококонкурентной нише.

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

6. Блок о сотрудниках компании

Подходит для: ниши по предоставлению услуг

Применение целесообразно в ситуации, где важно не ЧТО получит покупатель, а КАК будет достигнут результат.

7. Блок об услугах/отделах компании

Подходит для: тематик комплексных услуг; лендингов с несколькими товарами в одной области применения.

8. Блок-партнеры

Подходит для : любого лендинга.

Блок повышает доверие посетителя, если использовать логотипы известных клиентов.

Подходит для: инфо-бизнеса; сферы услуг; ниши, где важен процесс (КАК) получения результата.

Отличное дополнение к кейсам — визуальная демонстрация БЫЛО/СТАЛО , а также инфографика и принтскрины со статистикой.

Ниши, где важна демонстрация:

Продолжение следует…

Сегодня мы обсудили первые 10 блоков для лендинга, в ближайшее время опубликуем еще — следите за обновлениями!

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

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

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

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

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

Статический дизайн

"Статичным" или "статическим" называется сайт, который состоит из неизменяемых HTML-страниц. Такой сайт подразумевает наличие закрепленной темы с фиксированной шириной и чаще всего содержит одну или буквально несколько страниц. Чтобы отобразить такой сайт по центру экрана достаточно 1000 px. Контент всегда будет выравниваться строго по центру.

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

Преимущества статического дизайна:

• Экономия времени и сил при разработке;
• Требует меньше нагрузки на хостинг;
• Вывод картинок, видео-материалов, баннеров можно осуществлять без опасения, что они перекроют друг друга или сместятся при разном разрешении монитора.

Недостатки статического дизайна:

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

Статичных сайтов раньше было намного больше – появление и развитие CMS способствовало сокращению их количества в пользу динамических. Примеры статических сайтов:

Динамический дизайн

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

"Резиновый" дизайн

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

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

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

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

Адаптивный дизайн оправдан при создании масштабных проектов: информационных порталов, интернет-магазинов, форумов, корпоративных сайтов и других подобных им ресурсов. Особенно эффектно он смотрится на мониторах с диагональю не менее 15,6’’.

Принцип адаптивности строится на создании одного URL, который подстраивает контент под различные форматы экранов. Примеры:

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

"Отзывчивый" дизайн

Последним методом, к которому пришли веб-дизайнеры, стал "отзывчивый" дизайн (англ. responsive design), который противопоставили обычному "адаптивному" дизайну (англ. adaptive design), хотя до настоящего времени эти термины часто путают и употребляют в похожем смысле. "Отзывчивый" дизайн соединяет в себе черты адаптивного и "резинового" дизайнов. Он автоматически подстраивается под любую ширину экрана, как и резиновый. При этом в процессе подстраивания может меняться расположение блоков, размер картинок. Также могут появляться, пропадать или изменяться некоторые элементы. Например, обычное горизонтальное меню может поменяться на выпадающее.

Ещё более важный момент - места, из которых люди будут приходить на ваш сайт. Поэтому очень важно учитывать любую скорость интернета, ведь огромное количество людей живут в отдалённых районах, где скорость интернета даже не 1 мб/с. Существует исследование, согласно которому, 57% пользователей уйдут с вашего сайта, если он загружается дольше нескольких секунд. Не так давно Google начал учитывать скорость при ранжировании сайтов. Она не оказывает большое влияние на позицию сайтов со средней скоростью загрузки, но если страница не загружается за определённое время, то поисковый алгоритм применяет к такому сайту штрафные санкции.

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

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

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

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

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

Заключение

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

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