Дизайн большинства блогов терпит неудачу одним и тем же незаметным образом. Текст хороший, фотографии хорошие, но страница всё равно выглядит как простой список ссылок, которые никому не хочется прокручивать.
Хороший дизайн блога решает эту проблему за счет структуры, а не декора. Четкая сетка, читаемый заголовок, одно привлекательное изображение к каждой публикации — и читатель останется.
Приведенные ниже 12 примеров дизайна блогов — это реальные, работающие сайты. Каждый из них решает одну и ту же проблему: как сделать так, чтобы прокрутка постов воспринималась как место, достойное чтения, и каждый решает её по-своему.
Они охватывают фуд-фотографию, архитектуру, свадебную тематику, а также одного автора, у которого вообще нет фотографий. Позаимствуйте идеи оформления, подходящие для вашего блога.
Что делает дизайн блога успешным?
Если не обращать внимания на стиль, то можно заметить, что успешные блоги используют одни и те же структурные решения:
- Сетка, а не стопка. Двух-, трех- или четырехколоночная сетка позволяет читателю просматривать множество сообщений одновременно. Один вертикальный блок скрывает все сообщения, расположенные ниже первого.
- Заголовки, имеющие вес. В блоге заголовок привлекает больше внимания, чем миниатюра. В лучших дизайнах он имеет реальный размер и занимает достаточно места.
- Одно изображение на пост, при условии качественного исполнения. Единообразное изображение на каждой карточке превращает список ссылок в галерею.
- Карточная система с повторным использованием. Одинаковое соотношение сторон изображения, одинаковое расположение заголовка, одинаковый интервал во всех постах. Последовательность — это то, что воспринимается как задумано.
- Введение по темам. Категории, теги или боковая панель позволяют читателю выбрать нужное направление, вместо того чтобы прокручивать страницу вслепую.
Блоги Editorial Grid
Журнальный подход: многоколоночная сетка, в которой публикации рассматриваются как тематические статьи. Он подходит для блогов с обширным архивом и качественными изображениями.
Anwita + Arun
Анвита + Арун Они используют четырехколонную каменную сетку, и именно каменная кладка является самой продуманной частью. В их рекламе сочетаются высокие фотографии упаковки продукции с широкими изображениями готовых блюд.
Жесткая сетка сильно бы обрезала эти изображения. В случае с каменной кладкой каждое изображение сохраняет свою форму, поэтому страница остается живой, а не замкнутой. Под каждой карточкой размещаются дата, заголовок и короткий отрывок в одну строку.
Возьмите это: Если ваши изображения имеют разную форму, используйте сетку. Она позволяет сохранить естественные пропорции портретных и пейзажных снимков, вместо того чтобы обрезать все до квадрата.
In the Ether
В эфире Начинается с крупного заголовка «В эфире», выполненного тонким шрифтом с засечками, а затем переходит в двухколоночную сетку из больших изображений. Масштаб — это вся идея.
Крупный логотип, большие изображения, практически никакого лишнего «хрома». Он больше похож на обложку журнала, чем на ленту новостей, а именно такой стиль и нужен для тщательно отобранного блога.
Возьмите это: Крупный заголовок в виде текстового логотипа оформляет блог как публикацию, а не как список обновлений. Заголовочный блок должен иметь реальную высоту перед первым постом.
Atul Pratap Chauhan
Атул Пратап Чаухан Книга содержит четыре колонки фотографий интерьеров и гостиничного бизнеса, что легко может создать ощущение перегруженности. Заголовки, расположенные по центру и набранные мелким шрифтом, а также достаточное количество свободного пространства предотвращают это.
Шрифт неброский, интервал широкий, а изображения говорят сами за себя. Это плотная сетка, которая, тем не менее, создает ощущение спокойствия, а достичь такого баланса непросто.
Возьмите это: Четырехколоночная сетка может создавать ощущение спокойствия. Размещайте заголовки по центру, используйте мелкий шрифт и позвольте свободному пространству выполнять свою работу, чтобы плотность текста не переросла в беспорядок.
Kalina's Photography
Фотография Калины Это делает прямо противоположное тишине, и это работает. Заголовки постов огромные, набраны жирным шрифтом с засечками, который доминирует на каждой карточке больше, чем фотография.
Для блога о беременности и новорожденных такой заголовок, привлекающий внимание, — правильное решение. Люди ищут информацию по этой теме («как правильно рассчитать время для фотосессии во время беременности»), поэтому такой крупный шрифт вполне оправдан. Боковая панель «Последние публикации» позволяет видеть последние работы.
Возьмите это: Заголовки постов должны быть крупными. В блоге, который люди находят через поиск, заголовок продает больше, чем миниатюра, поэтому отведите ему доминирующую роль.
Минималистичные макеты блогов
Сдержанность как дизайнерское решение. В таких случаях список товаров сокращается до минимума, оставляя только самое необходимое.
Ryan Hainey
Райан ХейниБлог [имя автора] — самый сдержанный в этом списке. Заголовок «Блог» с засечками, сетка в две колонки, и под каждым изображением только дата. Ни заголовков, ни отрывков, ни тегов.
Для фотографа-архитектора такая уверенность воспринимается как хороший вкус. Изображения достаточно выразительны, чтобы самостоятельно занимать целую страницу, а если убрать метаданные, то внимание будет сосредоточено только на них.
Возьмите это: Если ваши фотографии качественные, то наиболее уверенный вариант оформления — это практически полное отсутствие текста (изображение плюс дата). Каждый удаленный текст делает изображение более выразительным.
Daniel Pullen
Дэниел Пуллен В левой боковой панели отображается фиксированная панель со ссылками на категории (Серфинг, Пейзажи, Культура), а остальные записи занимают остальную часть экрана в виде карточек, на которые заголовок накладывается поверх изображения.
Это удобный способ навигации по обширному архиву. Читатель может сразу перейти к нужной теме, а наложенные заголовки позволяют рассматривать каждую карточку как единый, аккуратный блок.
Возьмите это: Постоянно отображаемая боковая панель категорий помогает читателям ориентироваться в большом блоге по темам, вместо того чтобы прокручивать страницу вслепую. Наложите заголовок на изображение, чтобы каждая запись оставалась одним целым блоком.
Блоги, возглавляемые героями
Эти объявления начинаются с изображения во всю ширину экрана перед началом ленты новостей, при этом первый экран задает тон или излагает основную мысль.
Strike the Lights
Зажги свет Начинается всё с полноэкранной фотографии со съемочной площадки, поверх которой наложена всего одна строчка текста: что это за блог и кто его ведет. Затем начинаются посты.
Этот герой делает то, что большинство блогов пропускают. Еще до того, как вы прочитаете хотя бы один пост, вы поймете, что это образовательный блог работающего фотографа, рассказывающий о закулисье и о том, что происходит за кадром. Композиция сразу же задает тон.
Возьмите это: Начинайте с главного изображения, которое объясняет тематику блога. Одна строчка, сопровождаемая привлекательной фотографией, объяснит новому читателю, почему стоит остаться.
Madison LaRoc
Мэдисон Ларок Здесь используется самый традиционный шаблон, и в этом вся суть. Над фотографией пары, освещенной волнами, расположен баннер с надписью «Последние записи в блоге», а затем аккуратная трехколоночная сетка с датой и заголовком с засечками.
В этом нет ничего замысловатого, да и не нужно. Для свадебного фотографа спокойный, легко читаемый блог в три колонки — это именно тот стандартный, который большинство сайтов должны перенять, прежде чем пытаться сделать что-то более вычурное.
Возьмите это: Простой баннер с подписями на фоне трехколоночной сетки — это безопасный и читаемый вариант по умолчанию для большинства блогов. Прежде чем переходить к чему-то более сложному, убедитесь, что всё сделано правильно.
Выдающиеся системы создания эскизов и карточек
Карточка для блога — это больше, чем просто уменьшенная фотография. Эти трое рассматривают саму карточку, её накладку, её тег, её цвет как дизайн.
Misha Martin
Миша МартинВ блоге о путешествиях [имя автора] сочетаются видео и фотопосты, поэтому дизайн предусматривает соответствующие подписи. Рядом с каждой карточкой в двухколоночной сетке располагается небольшая категория («Видео»), а также дата и кнопка «Читать далее».
Метки — это небольшая деталь, которая действительно работает. Читатель, просматривая ленту, еще до перехода по ссылке понимает, какие посты являются видеороликами, а какие — текстовыми, что бережет его время.
Возьмите это: Каждую публикацию следует помечать видимым тегом, указывающим на формат (Видео, Руководство, Статья). Если в блоге используются разные медиафайлы, небольшая метка позволит читателям выбирать, что они хотят посмотреть или прочитать.
Waterhouse Wade
Уотерхаус Уэйд На сайте используется яркий заголовок фирменного цвета (теплая желтая полоса), а боковая панель «Последние публикации» отображается на самой странице статьи, а не только в списке.
Боковая панель — это самая удачная деталь. Когда читатель заканчивает статью, следующие публикации сразу же отображаются рядом, поэтому просмотр продолжается, а не прерывается. Яркий цвет заголовка позволяет бренду оставаться на виду на протяжении всей статьи.
Возьмите это: Добавьте боковую панель «Последние публикации» не только в основной раздел блога, но и на страницы статей. Это позволит превратить конец одной публикации в начало следующей.
Sinclaire Street
Синклер-стрит Блог, озаглавленный «Размышления», представляет собой сетку из двух колонок, состоящую из больших черно-белых уличных фотографий. Заголовки постов с засечками наложены поверх изображений, а монохромное оформление занимает всю нижнюю часть страницы.
Главное — сдержанность. Одна цветовая палитра, один шрифт, крупные изображения, и ничто не конкурирует с ними. Это воспринимается как целостная работа, а не как поток отдельных постов.
Возьмите это: Придерживайтесь одной цветовой палитры. Блог, полностью снятый и представленный в черно-белом цвете, воспринимается как единое, продуманное произведение, а не как набор несвязанных между собой постов.
Блоги с переадресацией текста без фотографий
Не в каждом блоге есть фотографии. Если фотографировать нечего, дизайн блога должен быть самодостаточным.
Danielle Berggren
Даниэль Берггрен Это писатель, у которого нет фотографий, и дизайн решает эту проблему напрямую. К каждой публикации прилагается индивидуальная иллюстрация-миниатюра с встроенным в неё заголовком.
«Авторское интервью с самим собой» и «Что делать, когда тьма становится невыносимой» представлены в виде графического оформления на тему звездного неба и темно-фиолетовых тонов.
Это самая сильная идентичность бренда в этом списке, и она существует именно потому, что не было фотографий, на которые можно было бы опереться.
Возьмите это: Нет фотографий? Создайте собственные графические миниатюры с заголовком, встроенным в каждую из них. Это обеспечит блогу, посвященному писательскому мастерству, визуальную целостность, которую бесплатно обеспечивает фотоблог.
Что общего у лучших дизайнов блогов?
Если поставить эти 12 пунктов рядом, то закономерность станет очевидной. Лучший дизайн блога — не самый нарядный. Это тот, где посторонний человек, бегло просмотрев сетку, прочитав заголовок, сразу поймет, что его ждет.
Они придерживаются одной системы карточек и неукоснительно её повторяют. Заголовок или изображение имеют достаточный размер, чтобы произвести впечатление, и вам никогда не приходится за них бороться.
Они предлагают доступ по темам, через боковую панель, теги или категории. И они подбирают макет в соответствии с содержанием: крупный шрифт для блогов, ориентированных на поиск, сетки практически без текста для фотографий, пользовательская графика для текстов.
Здесь больше проявляется сдержанность, чем пышность. Самые удачные дизайнерские решения скорее убирали лишнее, чем добавляли.
Подберите дизайн блога в соответствии с тем, что вы публикуете.
Единого идеального макета не существует. Правильный дизайн блога зависит от того, что вы публикуете и как часто. Вот честное руководство:
Если дизайн соответствует содержанию, страница воспринимается как продуманная заранее. Достаточно одного взгляда на неподходящий контент, и читатели это почувствуют, даже если не смогут объяснить причину.
Как создать свой собственный блог
Для всего этого вам не нужен дизайнер. Начните с сетки и карточки, потому что именно эти два решения определяют большую часть дизайна.
Выберите количество столбцов, подходящее для ваших изображений, укажите одно соотношение сторон для каждого изображения и задайте размер заголовка, который вы готовы повторять. Затем соблюдайте эти правила для всех ваших публикаций.
Для создания сайта, конструктор, ориентированный на портфолио, предлагает уже готовые шаблоны для блога в виде сеток, так что вы выбираете между удачными вариантами, а не создаёте сайт с нуля.
Если вы взвешиваете инструменты, наш обзор... лучшие платформы для ведения блогов для творческих людей Это то место, с которого следует начать. Как только вы выберете один из вариантов, вы можете начать свой создание блога и веб-сайта путешествие.
Все блоги, перечисленные выше, были созданы на основе Pixpaчто является достаточно точным показателем того, насколько широко распространены встроенные макеты, от Ryan Haineyупрощенная сетка для Danielle BerggrenИллюстрированные открытки.
Что бы вы ни строили, сначала правильно сделайте сетку и карту. Остальное — дело доработки.
Выводы
Дизайн блога — это, по сути, несколько хорошо продуманных и повторяющихся решений. Подходящая сетка для изображений, заголовок с достаточным пространством для текста, одно яркое изображение на пост и четкий ввод по теме.
Представленные здесь 12 примеров варьируются от минималистичного архитектурного блога до иллюстрированного блога писателя на космическую тематику. Все они работают по одной и той же причине: макет соответствует содержанию, а карточная система остается неизменной.
Выберите шаблон, наиболее близкий к тому, что вы публикуете, скопируйте структуру и адаптируйте её под себя.
Часто задаваемые вопросы о дизайне блога
Что делает дизайн блога удачным?
Хороший дизайн блога позволяет легко просматривать и читать посты, прокручивая их вниз. Обычно это означает многоколоночную сетку, единообразное изображение в каждом посте и заголовки, набранные в реальном размере.
Это также предоставляет читателям удобный способ поиска по категориям или тегам и адаптирует макет к содержанию, используя крупный шрифт для блогов с текстовым контентом и большие изображения для фотографий.
Какой дизайн блога будет для него оптимальным?
Единого идеального варианта оформления не существует, но двух- или трехколоночная сетка подходит для большинства блогов. Она позволяет читателям просматривать несколько постов одновременно, не прибегая к бесконечной прокрутке.
В блогах с большим количеством фотографий чаще используются изображения большего размера и меньшее количество столбцов, в то время как блоги с большим количеством текста выигрывают от более крупных заголовков и графических миниатюр, созданных специально для этих целей.
Сколько колонок должно быть в блоге?
Для большинства блогов достаточно двух-четырех колонок. Две колонки подходят для больших постов с большим количеством изображений, три — это оптимальный вариант для чтения, а четыре — для обширного архива с качественными фотографиями.
При увеличении количества сообщений более четырех, каждое из них уменьшается до тех пор, пока ничто не будет выделяться.
Должна ли каждая запись в блоге иметь изображение в качестве заставки?
Да. Единообразное изображение в каждой публикации — это самый важный фактор, превращающий обычный список ссылок в продуманную страницу блога.
Если у вас нет фотографий, как это часто бывает у авторов, создайте для каждой публикации собственное графическое изображение-миниатюру. Последовательность важнее источника.
Где можно найти вдохновение для дизайна блога?
Помимо представленных здесь 12 вариантов, лучшим источником являются живые галереи, поскольку они демонстрируют реальные блоги, а не концепции. Наша коллекция примеры веб-сайтов-блогов Это хорошее место для просмотра.
При осмотре изучите сетку и систему карточек, а не только цвета. Именно эту часть можно использовать повторно.
Сколько стоит разработка блога?
Если вы создадите блог самостоятельно с помощью конструктора сайтов, его стоимость будет такой же, как и у любого небольшого сайта: примерно цена тарифного плана плюс домен. Проверьте последние цены на тарифные планы актуальные данные.
Нанять дизайнера для создания блога на заказ обойдется от нескольких сотен до нескольких тысяч долларов, в зависимости от объема работы. Для каждого сайта из этого списка шаблон и удачный выбор оказались эффективными.