В первой статье этой совершенно новой серии я представил основные цели серии и дал краткое, но полное представление о критических компонентах медиа-запросов и отзывчивых контрольных точек. Теперь пришло время начать практическую работу. Как я упоминал ранее, я начну с планирования и создания макета для каждого из трех основных типов устройств, на которых будет разрабатываться, тестироваться и отображаться наш адаптивный веб-сайт: настольные ПК, планшеты и мобильные телефоны.
3… 2… 1… Начнем!
Прежде чем продолжить, я хочу дать вам небольшой совет: помните, что чем больше макетов вы делаете, тем труднее и сложнее становится ваша работа. Отзывчивые макеты — это не то же самое, что статические макеты; Вы действительно не знаете, где будет размещен ваш контент, потому что это зависит от размера экрана.
Очевидно, что, как мы видели в предыдущей серии, разработка макетов для каждого размера экрана практически невозможна, потому что есть потенциально сотни экранов, макетов и ориентаций, которые вы должны учитывать. Вот почему я предлагаю вам выбрать целевые экраны / макеты и создавать макеты проекта только для трех основных категорий устройств.
По понятным причинам я не буду показывать вам, как спроектировать и построить весь сайт, но я сосредоточусь на домашней странице, хотя я уверен, что как только вы поймете логику и основы адаптивного веб-дизайна, вы иметь возможность приступить к созданию всего портала, и все станет на свои места. Я должен повторить, что создание макетов, как правило, не требует, чтобы вы выкладывали каждое отдельное представление до совершенства, и чтобы они были эффективны, как только им достаточно абстракции конечного продукта (веб-сайта или приложения), которую они дают вам достаточно Информация для начала строительства.
Я решил построить макет своего проекта с помощью макетов Balsamiq . Как я объяснил подробно в связанной статье, Balsamiq Mockups — это инструмент, который помогает разработчикам создавать каркасы и общаться с клиентами и коллегами с помощью визуальных представлений их планов проектирования. Balsamiq является автономным настольным программным обеспечением, и вы можете работать с ним, используя выбранную вами операционную систему, поскольку она работает на Mac, Windows и Linux.
Давайте начнем планировать макет нашего сайта, работая на настольной версии для ПК.
Прежде всего, позвольте мне представить тип веб-сайта, который мы собираемся удалить, и все элементы, которые мы найдем в нем. Фактически, при создании веб-приложения или веб-сайта рекомендуется заранее идентифицировать ваш контент и назначить соответствующие области содержимого в шаблоне веб-сайта. Для наших целей мы создадим веб-сайт с основными темами контента, такими как графика, веб-дизайн и разработка мобильных приложений, место, где любители дизайна могут читать статьи о своих любимых областях, обсуждать, изучать новые методы и оставаться в курсе.
Давайте посмотрим, как мы можем продолжить использовать элементы макетов Balsamiq и сосредоточиться в первую очередь на одной цели. Мы должны поработать над размещением блоков на макетах, и в качестве первого шага я помещаю форму окна браузера, чтобы представить профиль любой страницы браузера, и устанавливаю ее размер с помощью небольших настроек с помощью мыши.
Что касается стиля главной страницы, первое, что нужно определить, это то, какие элементы мы хотим показать на нашей новой домашней странице. Как правило, мы можем найти заголовок, панель новостей, список меню, некоторые боковые панели (в зависимости от того, какой дополнительный контент вы хотите ввести), текстовое поле для наиболее важной информации, изображение или некоторые ссылки, например. ,
Благодаря простой, интуитивно понятной системе перетаскивания, мы можем легко добавить все, что мы хотим, всего несколькими щелчками мыши. Для первых компонентов нашей страницы мы должны открыть категорию под названием «Большой». Здесь мы найдем следующие элементы: заголовок / заголовок, текстовую область и поле изображения. Итак, перетащите каждый из них в свой макет. Затем откройте категорию «Общие», чтобы найти прямоугольники, текстовые области, поля ввода текста, индикаторы изображений и значков и указатели ссылок. Давайте разместим две боковые панели слева от поля с информацией об авторе (где было бы неплохо добавить фотографию) под основным блоком контента, который занимает всю ширину окна.
На данный момент наша концепция дизайна должна выглядеть примерно так:
Как только вы перетащите элементы, вы увидите, что у каждого элемента есть широкие возможности редактирования. При нажатии на заголовок / заголовок или в текстовом поле вы увидите типичный текстовый редактор, в котором вы сможете указать характеристики или контент. Вы можете изменять текст, выбирая размер, выравнивание текста, формат и цвет. Вы также можете установить цвет фона, цвет границы, добавить полосу прокрутки и играть с непрозрачностью и фокусом.
Для изображений мы можем показать или скрыть границу, обрезать изображение и создать гиперссылку на выбранное изображение, чтобы перейти к новому URL-адресу или экрану. Поскольку это макетный проект, предназначенный главным образом для учета всех элементов страницы и их расположения, по моему мнению, нет необходимости вносить сверхточные стилистические изменения. Важно иметь своего рода «скелет» или отправную точку, чтобы сосредоточить внимание на том, что необходимо встроить в структуру с помощью HTML-кода и правил стиля CSS3.
Как только мы закончим с этим первым отрывком, давайте продолжим планирование нашей версии для планшета.
Как вы можете видеть на изображении выше, все элементы, используемые во втором макете, одинаковы; единственное, что изменилось, это их расположение. В верхней части страницы почти все имеют одинаковый стиль: баннер и панель новостей занимают всю ширину окна на рабочем столе ПК, а также версию планшета.
Что изменилось, так это выравнивание пунктов списка меню. Чтобы сделать чтение пунктов меню четким и легким даже на экране с уменьшенным размером, я планировал увеличить расстояние между всеми присутствующими элементами. Кроме того, нижняя часть макета вносит некоторые небольшие изменения: боковые панели, которые были размещены на левой стороне рамки автора, были перемещены под этим и расположены рядом друг с другом, чтобы придать им большую ширину. Посмотрите ниже для ясности.
В качестве нашего последнего шага в процессе макета, давайте рассмотрим версию для смартфона. Я поместил форму iPhone (как было сказано выше, она единственная, доступную для представления профиля всех современных смартфонов) и дважды продублировал ее, чтобы вы могли увидеть, что будет видеть пользователь, прокручивая сайт сверху вниз. ,
Как вы можете видеть, для верхней части портала расположение элементов новостной рассылки изменилось, и список пунктов меню также отличается по сравнению с макетами ПК и планшета. Поле ввода и кнопка отправки представлены вертикально, чтобы сделать процесс записи и отправки данных быстрее и проще. Что касается меню, лучшее решение, которое следует принять в этом случае (поскольку меню состоит только из пяти элементов), — это создать выпадающее меню, к которому пользователь может легко прикоснуться, чтобы загрузить страницу, которую он хочет посетить.
Все остальные компоненты страницы установлены на максимальную ширину, чтобы сделать контент интуитивно понятным и доступным. Даже если на этом этапе вы не видите его, для текстового представления вы можете подумать о простом приеме, который удовлетворит ваших пользователей. Помните, что если ваш контент слишком длинный, им придется много раз прокручивать страницу вниз, чтобы достичь конца, и это может легко вызвать дезориентацию и скуку. Таким образом, вы можете решить эту проблему с «слишком большим содержанием», разместив ссылку «Читать дальше», которая приведет пользователя непосредственно к информации, которую он запрашивает, и сделает домашнюю страницу более удобной, удобной для загрузки и приятной для посещения даже на узком смартфоне. экран.
Вывод
В этой статье мы увидели, как создать макет проекта, думая об отзывчивости и, следовательно, о том, как адаптивный дизайн может адаптироваться к трем целевым макетам: По умолчанию (рабочий стол ПК), Портретный планшет и Смартфон. Мы увидели, как упорядочить элементы типичного веб-сайта по категориям трех основных устройств, создав шаблон, представляющий общие элементы содержимого. В третьей части этой серии мы начнем писать HTML-код, работать над структурой домашней страницы и устанавливать первые правила стилевого оформления CSS для создания исходного дизайна.