Даже с точки зрения не проектировщика, определение дизайна, который удовлетворяет всем требованиям, которые я изложил ранее, является простой задачей. Это похоже на создание фразы в вашем холодильнике с поэтическими словами. Хотя есть миллионы способов упорядочить слова, только несколько договоренностей имеют смысл. Магнитные слова похожи на компоненты или блоки веб-страницы. Хотя количество этих необходимых блоков зависит от размера и тематики сайта, большинство сайтов имеют компоненты, показанные на рисунке ниже:
Давайте посмотрим на каждый из этих компонентов по очереди:
Содержащий блок
Каждая веб-страница имеет контейнер. Это может быть в форме тега body страницы, содержащего тег div Без какого-то контейнера у нас не было бы места для размещения содержимого нашей страницы. Элементы выходили бы за пределы нашего окна браузера и уходили в пустое пространство. Ширина этого контейнера может быть плавной, что означает, что он расширяется, чтобы заполнить ширину окна браузера; или фиксированный, так что содержимое имеет одинаковую ширину независимо от размера окна.
логотип
Когда дизайнеры ссылаются на идентичность, они ссылаются на логотип и цвета, которые существуют в различных формах маркетинга компании, таких как визитные карточки, фирменные бланки, брошюры и так далее. Идентификационный блок, отображаемый на веб-сайте, должен содержать логотип или название компании и располагаться в верхней части каждой страницы веб-сайта. Блок идентификации повышает узнаваемость бренда и информирует пользователей о том, что просматриваемые ими страницы являются частью одного сайта.
Примечание: многие люди используют слова «идентичность» и «брендинг» взаимозаменяемо. Брендинг — это широкий термин, который описывает процесс развития осведомленности о компании, продукте или услуге. Процесс брендинга включает в себя рекламу, исследования рынка, отзывы клиентов и многое другое. Идентичность на самом деле является подмножеством брендинга, поскольку она касается только визуальных аспектов брендинга.
навигация
Очень важно, чтобы навигационная система сайта была проста для поиска и использования. Пользователи ожидают увидеть навигацию прямо вверху страницы. Планируете ли вы использовать вертикальные меню внизу страницы или горизонтальное меню по всей странице, навигация должна быть как можно ближе к верхней части макета. По крайней мере, все основные элементы навигации должны отображаться «над сгибом».
Над «Сгибом»
Сгиб , как называют его многие дизайнеры, — это то, где содержимое страницы заканчивается, прежде чем пользователи прокрутят вниз. Эта метафора получена из сгиба в газете. Если вы посмотрите на обложку свернутой газеты, большинство заголовков и самых больших новостей появятся в верхней части, так что самые важные новости можно сразу увидеть, когда газета свернута. Расположение сгиба на веб-странице зависит от размеров браузера и разрешения экрана пользователя. При разрешении 1024 × 768 пикселей, с учетом хрома браузера, то есть пространства, занимаемого самим приложением браузера в виде вкладок, кнопок, адресной строки и нижней строки состояния, сгиб обычно чуть больше 500 пикселей сверху.
содержание
Содержание король. Типичный посетитель сайта зайдет и покинет сайт в считанные секунды. Если посетители не могут найти то, что ищут, они, несомненно, закроют браузер или перейдут на другой сайт. Важно, чтобы основной блок контента был в центре внимания дизайна, чтобы посетители могли сканировать страницу на предмет необходимой им информации.
нижний колонтитул
Расположенный внизу страницы, нижний колонтитул обычно содержит информацию об авторских правах, контактную и юридическую информацию, а также несколько ссылок на основные разделы сайта. Отделив конечный контент от нижней части окна браузера, нижний колонтитул должен указывать пользователям, что они находятся внизу страницы.
Пробелы
Термин «пробел» (или отрицательное пространство) графического дизайна буквально относится к любой области страницы без типа или иллюстраций. Хотя многие начинающие веб-дизайнеры (и большинство клиентов) чувствуют необходимость заполнять каждый дюйм веб-страницы фотографиями, текстом, таблицами и данными, пустое место на странице так же важно, как и содержание. Без тщательно спланированного пробела дизайн будет ощущаться закрытым, как переполненная комната. Пробелы помогают дизайну дышать , направляя взгляд пользователя на страницу, но также помогают создать баланс и единство — две важные концепции, которые мы обсудим более подробно позже в этой главе.
В этот момент у нас была наша первоначальная встреча с мистером Смитом, нашим теоретическим клиентом, и это было полезно. Он очень подробно объяснил, чем занимается его бизнес и чего он хочет добиться от сайта. Несмотря на то, что нам еще не удалось увидеть фактический контент, мы можем использовать стандартные блоки анатомии веб-страницы, чтобы начать разработку макета. Хотя в дизайн многих макетов веб-сайта включены другие специфичные для сайта блоки, анатомия веб-страницы позволяет обобщить наиболее распространенные блоки.
Теперь, когда у нас есть эта информация, как мы можем использовать ее для создания основного макета для служб Смита? Пришло время для некоторой теории сетки, о которой мы расскажем далее, так что следите за обновлениями.
Принципы красивого веб-дизайна
Эта статья взята из книги Джейсона Беирда « Принципы красивого веб-дизайна» (второе издание которой уже вышло). Это третья часть первой главы.
Если вместо этого важнее цвет, то обязательно ознакомьтесь с существующей оцифровкой главы о цветах здесь, на фестивале дизайна .