Содержание

Как сделать адаптивный сайт с помощью HTML5 и CSS3

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

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

Макеты бывают разными по типу отображения.

  • Фиксированный или статический. Дизайн страницы создается под один размер. Все четко, конкретно и просто, но есть недостаток — сайт нормально откроется не на всех экранах, а только на мониторах с заранее известным скрином. К примеру, на смартфоне веб-страница не влезет в браузерное окно.
  • Резиновый. Более сложный вариант для реализации, чем фиксированная верстка. Основные блоки макета сжимаются, пока не встанут под разрешение конкретного девайса. Если экран чересчур маленький, то блоки располагаются друг под другом — в виде ленты.
  • Адаптивный. Самый передовой макет — страница подстраивается под каждого пользователя, независимо от используемого им устройства. Реализуется несколькими способами — смещением, перестройкой блоков, изменением дизайна элементов страницы и т. д.

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

  1. Табличная верстка устарела, хотя элемент table поддерживается HTML5. Поэтому некоторые программисты продолжают использовать табличные данные.
  2. Блочная верстка представляет собой каркас, на который через CSS накладывается тот или иной шаблон. Особое значение здесь имеют теги: <div>, <header>, <footer>, <nav> и др.

Как сделать адаптивную верстку сайта

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

Делается современная адаптивная верстка комбинированием двух технологий.

  1. HTML5. Нужна для разметки элементов на сайте.
  2. CSS3. Каскадные стили, предназначенные для декоративного оформления веб-страниц. При помощи CSS также задаются единицы измерения главных блоков сайта — хедера, боди, футера.

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

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

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

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

Добавляем в код автоматическое свойство margin для внешнего отступа на всех 4-х сторонах элемента. Задаем width в 1000px, максимальную ширину элемента max-width в 90% и минимальную ширину в 50px.

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

Усложняем задачу — сделаем мини-галерею. Принципы верстки остаются те же. Делаем такой же контейнер, упакованный в <div class=image_gallery>.

В CSS прописываем то же, что и в первом случае.

Таким образом, каждое изображение будет работать по правилам контейнера, и изменять свой размер в зависимости от экрана пользователя. Для улучшения качества между картинками ставится отступ в 1%.

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

Верстаем адаптивный сайт

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

  • скрывания шапки;
  • помещения сайдбара под контейнер;
  • оптимизации элементов верхней части страницы.

Должна получиться такая вот страничка.

Теперь нужно доработать раздел <head> — добавить обязательные файлы (библиотеку джава, ссылки на применяемые шрифты). Чтобы не прописывать префиксы Chrome, Safari и т. д, добавляем плагин PrefixFree.

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

Блок с оглавлением статьи обертываем в <article>.

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

Отдельная работа должна проводиться по медиа-запросам. Они помогут улучшить отображение сайта на экранах с минимальным разрешением. Другими словами, это правила адаптации для каждой возможной ширины экрана. А их бывает, как известно, несколько — вот эти самые важные. Рекомендуется все их прописать через @media screen и внести правила элементов для каждого разрешения.

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

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

Что менять в HTML и CSS коде?

Первым делом нужно вставить между тегами <head></head> следующий код.

А также прописать в CSS файле строку с правилом (медиа-запросом) для мобильных экранов (1440-1599px).

Вообще, в адаптивной верстке все завязано на единицах измерения. К примеру, ширина вашего сайта составляет 1000 пикселей. Если его откроют со смартфона, то появится горизонтальная прокрутка, так как по ширине страница не влезет. Указывая в коде width 100%, мы подстраиваем сайт под маленький экран. А чтобы текст не растянулся на широкоформатном мониторе (более 1000px) и оставался адаптивным, прописываем в CSS-код еще и максимальное значение.

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

Bootstrap

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

Что включает Бутстрап:

  • адаптивную сеточную систему;
  • переменные и миксины Sass;
  • готовые компоненты;
  • собственную библиотеку иконок SVG;
  • мощные плагины JS;
  • премиальные темы и многое другое.

Bootstrap подходит для нескольких CMS — WP, Joomla и Opencart.

Проверка адаптивности сайта        

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

Что делаем:

  • вводим название сайта в поисковую строку сервиса;
  • нажимаем Enter;
  • проверяем, как отображается ресурс на мобильных устройствах, планшетах, компьютерах всех известных фирм.

Сервис очень точный, а самое главное — целиком бесплатный.

Заключение

Адаптивная верстка позволяет сэкономить и не делать несколько дизайнов под каждый скрин — достаточно прописать правила для отдельных частей блоков. Сайты  с таким дизайном получают одобрение и со стороны поисковиков. Например, Гугл официально заявил, что отдает предпочтение ресурсам, адаптированным под mobile-first.

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

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

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

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

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

По-английски он называется Adaptive Web Design, и данный термин метко отражает, каким он должен быть – гибким и функциональным.

Зачем нужна адаптивная версия сайта

Ее стоит внедрить, как минимум, по трем причинам, каждая из которых достаточно важна сама по себе:

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

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

Универсально подстраивающаяся под гаджеты версия сайта обладает такими достоинствами:

  • Экономит силы, средства, время на обслуживание – с нею нет необходимости поддерживать сразу несколько ресурсов, достаточно обеспечивать бесперебойную работу одного.
  • Повышает число показов в отчетах аналитических сервисов Гугла и Яндекса – благодаря тому, что синхронизирует запросы от различных устройств.
  • Упрощает SEO-продвижение – у каждой страницы будет только один URL, соответственно, все ссылки будут в равной степени удобными для конечного пользователя.
  • Вообще не требует сложных серверных компонентов – адаптивный сайт нуждается лишь в разовой модификации базовых стилей CSS-стилей, тогда контент будет подстраиваться под девайс юзера.
  • Помогает быстрее рекламироваться в социальных сетях – получать лайки в ВК и Facebook, собирать больше твитов и тому подобное; опять же, все из-за одинаковых УРЛов.

Минусы тоже есть, и это:

  • Сложность совмещения с уже существующим ресурсом – проще создать новый web-проект, чем переписывать старый.
  • Размещать картинки высокого разрешения довольно проблематично – для этого зачастую приходится использовать решения “в обход” основных, вроде библиотеки Sencha либо плагина Adaptive Images.
  • Страницы весят больше, чем обычно – из-за загрузки файлов JavaScript и уже упомянутых стилей CSS у них появляются «дополнительные» килобайты.

На практике достоинства гораздо существеннее недостатков.

Принципы адаптивной верстки

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

Прочность

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

Относительность единиц измерения

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

Использование контрольных точек

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

Максимальные и минимальные значения

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

Вложенность объектов

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

Правильные шрифты

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

Грамотное использование графики

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

Выдерживание размеров макетов

Важно соблюсти подходящее разрешение – среди стандартных вариантов:

  •  320, 480 px – для смартфонов,
  • 768 – для всевозможных планшетов,
  • 1024 – для нетбуков,
  • от 1280 – для стационарных компьютеров.

Хотя жесткого соблюдения норм не предусмотрено – допустимы и промежуточные варианты. Но тогда в качестве точек «перелома» принимают фактические значения ШхВ нестандартного гаджета.

Правильные медиазапросы

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

  • типы поддерживаемых девайсов,
  • условия показа тех или иных объектов.

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

Размеры макетов

Еще одно, заслуживающее отдельного внимания, правило адаптивного дизайна – это mobile first: в первую очередь разрабатывают решения под мобильные, и уже потом, на их основе, делают связанную с ней десктопную версию. Шаблоны разделяются (по ширине экрана) на 6 вариантов, растущих следующим образом, в пикселях:

  • 320,
  • 480,
  • 768,
  • 1024,
  • 1280,
  • 1600.

Внимание, если нет «переломов» на большем промежутке, допустим, с 320 по 1024 px, то не будет и практического смысла предлагать отдельные решения под меньший, например, с 320 по 768.

Viewport и Media query

Это важные параметры, которые необходимо правильно задавать. Первый – это мета-тег, говорящий браузеру о том, нужно ли увеличивать/уменьшать страницу, и как отображать присутствующие на ней объекты. Его следует записать в <head> таким образом:

<meta name=viewport content=”width=device-width, initial-scale=1.0 “>

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

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

@media screen and (max-width: 768px) {

. class {

свойство: значение;

}

}

Здесь:

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

При создании web-ресурса используются функции, указывающие цвет, ШхВ, сетку, ориентацию объектов, разрешение. Текущие цифры, сразу по достижению которых изменяется оформление, называют точками “перелома” (контроля), от английского breakpoints. Также находится место для логических операторов and, not и only (И, НЕ, только соответственно).

Типы адаптивных макетов

Существует 5 основных вариантов шаблонов – рассмотрим каждый.

Резиновый

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

Перенос блоков

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

Переключение

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

Адаптивность «малой кровью»

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

Панели

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

Что такое адаптивный дизайн сайта, и чем он отличается от Responsive Design

Они довольно похожи, но принципиальная разница есть в технологии их реализации:

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

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

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

Что лучше использовать? Зависит от структуры web-ресурса: если она «резиновая», отзывчивость будет весьма удобной, вот только от нее может снизиться скорость загрузки (при наличии большого количества визуальных элементов).

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

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

Итак, резюмируем, выделяя ключевой показатель:

ResponsiveAdaptive
Один, но гибкий шаблон для всех девайсовСразу несколько макетов – для каждого гаджета свой

Отличие адаптивного сайта от мобильной версии

Созданные под конкретные модели и операционные системы телефонов и планшетов приложения – тоже вариант, у которого, правда, есть определенные недостатки:

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

И вот тут уместно еще раз упомянуть термин «адаптивная верстка сайта»: что это такое в данном контексте? Здесь это комплекс мер, предпринимаемых разработчиками для создания web-проекта с одним адресом, оформлением, контентом и системой управления, одинаково удобным для просмотра со всех активно используемых устройств. Да, минусы у этой технологии тоже есть, но они весьма относительны. Главным недостатком считается новизна: пока ею в совершенстве владеет лишь малое число специалистов. Но зато какие перспективы она открывает! Ею будут пользоваться и через 5 лет, когда, вполне вероятно, появятся какие-то принципиально иные гаджеты.

Образы в адаптивном дизайне: примеры

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

Применение свойства width

Если его значение равняется 100%, картинка будет увеличиваться/уменьшаться вверх/вниз.

Записывается оно так:

<img src=”img_dog. jpg” style=”width:100%;”>

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

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

Если его показатель в 100%, объект изменяет свой масштаб по мере необходимости, но никогда не становится больше первоначального.

Выглядит это так:

<img src=”img_dog.jpg” style=”max-width:100%;height:auto;”>

Показ изображений, исходя из ширины браузера

Чтобы установить зависимость, достаточно ввести HTML-элемент <picture>. Конструкция его довольно громоздкая, но весьма эффективная:

<picture>

<source srcset=”img_bigboy.jpg” media=”(max-width: 768px)”>

<source srcset=”img_bigboy.jpg” media=”(max-width: 1024px)”>

<source srcset=”boy.jpg”>

<img srcset=”img_bigboy.jpg” alt=”Boy”>

</picture>

Варианты разработки и примеры адаптивных версий сайтов

Итак, можно:

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

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

Если есть рабочая и уже проверенная тема, нужно:

  • сделать ее резервную копию;
  • установить редактор CSS-кода, допустим, Notepad++ или бесплатный Adobe Brackets;
  • запустить Google Chrome и нажать F12.

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

  • Перенести проект на локальный сервер, чтобы он был временно недоступен пользователям.
  • Добавить мета-теги и перевести абсолютные единицы измерения в относительные (пиксели – в проценты).
  • Оставить без изменения max-width, то есть основную ширину, остальные выразить в %, разделив их на главную (родительскую).
  •  Изменить размеры шрифтов на em, найдя частное между нужными и стандартными. Если по умолчанию они 16px, а вам нужно 24, получится 24/16 = 1,5 em.
  • Прописать в CSS свойство «height: auto», благодаря ему картинки будут автоматически масштабироваться (правда, без изменения веса).

Это основные мероприятия, после них останется найти точки «перелома» – те, в которых наблюдаются перестройки шаблона. Искать их следует, постепенно уменьшая размер окна Google Chrome, и как только оформление перестанет корректно показываться, зафиксировать первую breakpoint в файле «style.css», а затем следующую и так до конца. Отступы блоков обнуляются.

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

Обязательно ли использовать Adaptive Web Design?

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

Как создать макет веб-сайта (5 простых шагов)

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

На самом деле:

Один из самых первых навыков, которым я обучаю своих студентов, — это создание макетов веб-сайтов.

Почему?

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

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

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

  • Шаг 1: исследование и планирование
  • Шаг 2. Набросайте макет
  • Шаг 3: Создайте каркас Lo-Fi
  • Шаг 4. Создание каркаса Hi-Fi
  • Шаг 5. Протестируйте макет своего веб-сайта

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

Теперь давайте перейдем к деталям.

МОЯ НОВАЯ КНИГА

Ускоренный графический дизайнер

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

Как разработать макет веб-сайта?

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

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

Вы можете спросить: 

Почему создание макета веб-сайта важно?

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

Набросав каркас веб-сайта, вы начнете понимать структуру и макет своей веб-страницы. Фото Хэла Гейтвуда.

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

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

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

Шаг 1: исследование и планирование 

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

Спросите себя:

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

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

На этапе планирования и исследования вы должны стремиться выполнить следующее: 

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

Шаг 2. Набросок каркаса 

После первоначального исследования и планирования вы готовы приступить к этапу проектирования.

Однако мы еще не готовы выкладываться на полную! Мы начнем с минимальной версии и начнем работать оттуда.

Введите каркас.

Что такое каркас?

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

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

Каркас имеет много преимуществ. Каркас позволяет:

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

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

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

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

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

Plus:

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

Шаг 3. Каркас Lo-Fi 

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

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

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

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

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

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

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

Каркас веб-сайта lo-fi использует прямоугольники и четырехугольные формы для моделирования фактического макета веб-страницы.

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

Шаг 4. Каркас Hi-Fi макет вашей веб-страницы или манекен.

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

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

Высококачественный макет веб-сайта включает в себя все детали реального веб-сайта.

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

Например:

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

Как видите, существует множество визуальных решений, которые необходимо принимать только на одной веб-странице.

Однако:

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

Шаг 5. Протестируйте свой макет 

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

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

Чтобы протестировать страницу, экспортируйте версию документа с изображением. Затем перетащите в браузер, например Chrome или Firefox.

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

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

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

Объяснение макетов веб-сайтов  

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

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

Макет вашей страницы будет зависеть от объема контента, который вам нужно отобразить.

Макет новостного веб-сайта, такого как New York Times , очень сложен, поскольку вам нужно разместить множество элементов и текста на одной странице.

Макет веб-сайта New York Times очень сложен, поскольку он должен соответствовать многим компонентам, таким как текст и изображения.

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

Части веб-сайта

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

Как правило, веб-страница включает следующие элементы: 

Макет веб-сайта состоит из различных компонентов веб-сайта, таких как изображения, текст и кнопки.

Заголовок

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

Основная навигация 

Это основные ссылки на другие страницы вашего веб-сайта. Здесь вы можете найти ссылки на страницу «О нас», раздел блога вашего сайта или на страницу «Ресурсы».

Раздел «Герой» 

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

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

Карточки ценностных предложений  

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

Цель этого раздела: еще больше убедить пользователя продолжить чтение или предпринять какие-либо действия на веб-сайте.

Боковая панель 

Боковая панель — это элементы, которые обычно размещаются в правой части веб-страницы.

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

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

Призыв к действию 

Призыв к действию — это подсказка, которую вы даете своей аудитории для выполнения определенного действия.

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

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

Нижний колонтитул

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

Вам нужно создать актуальный контент для макета веб-сайта?

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

К счастью, вы можете положиться на Lorem Ipsum, латинский текст-заполнитель, который десятилетиями традиционно использовался в качестве фиктивного текста в издательском деле и в сфере графического дизайна.

Существует множество генераторов Lorem Ipsum, из которых вы можете извлечь фиктивный текст в соответствии с вашими требованиями.

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

Заключение  

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

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

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

Затем вы можете приступить к проектированию с помощью программного обеспечения для редактирования графики, такого как Illustrator или Inkscape. Но на данном этапе вы создаете только макет своего макета с блоками и геометрическими фигурами.

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

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

Теперь можно перейти к этапу программирования.

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

МОЯ НОВАЯ КНИГА

Ускоренный графический дизайнер

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

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

Об авторе:

Рубен Рамирес преподает цифровые медиа в колледже и основал Self-Made Designer, чтобы поделиться своими знаниями в области графического дизайна. Он любит скейтборды, гитары и векторную графику.

Создайте идеальный макет сайта за 27 шагов

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

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

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

Начало работы

01. Определите, что означает успех

Докопайтесь до цели вашего дизайна

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

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

02. Понять текущий сайт

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

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

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

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

04. Сначала займитесь компоновкой

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

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

05. Начните набрасывать структуру верхнего уровня

Базовый каркас поможет вам структурировать макет (щелкните значок в правом верхнем углу, чтобы увеличить)

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

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

06. Добавление сетки

Пример сетки 978 с базовой линией 10 пикселей

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

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

07. Выберите типографику

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

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

08. Выберите цветовую тему

Такие инструменты, как Color Hunt, помогут вам выбрать палитру

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

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

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

09. Упрощение макета

В простых макетах проще ориентироваться

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

На самом деле на странице не должно быть слишком много призывов к действию — все должно сводиться к финалу «Что я могу здесь сделать?»

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

10. Усовершенствуйте каждый компонент

Клаудио Гульери работал над дизайном пользовательского интерфейса в Microsoft Music

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

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

11. Познакомьте клиентов с вашими решениями

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

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

12. Думайте в движении

Движение необходимо при разработке интерактивных приложений

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

13. Прототип, прототип, еще раз прототип

Прототип — лучший способ протестировать взаимодействие

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

Следующая страница: Подход к проектированию и завершение

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь и получите неограниченный доступ

Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

  • 1

Текущая страница: Макет веб-сайта: начало работы и рабочий процесс проектирования

Следующая страница Макет веб-сайта: подход к дизайну и завершение

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

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

No related posts.