14 красивых примеров макетов журналов в веб-дизайне
Опубликовано: 2022-09-03В следующий раз, когда вы будете просматривать популярные печатные/бумажные газеты или журналы, обратите внимание на то, насколько различны макеты страниц от одного к другому. Некоторые макеты страниц четкие, чистые и легко читаемые.
Другие немного более стильные, возможно, вычурные. Тем не менее, все они соответствуют самым высоким стандартам дизайна и представляют контент четко, компактно и красиво.
Поддерживать эти высокие стандарты нелегко, но они последовательно достигаются. И чаще всего эти высокие стандарты дизайна отражаются в их веб-версиях, часто подталкивая к инновациям, тем более что им приходится доставлять контент на множество различных устройств и размеров экрана.
Дизайн веб-сайтов в журнальном стиле — очень популярный стиль макета, но довольно часто эти веб-сайты не черпают вдохновение из офлайн-журналов. Отличный способ выяснить, что работает лучше всего, — это внимательно изучить популярные онлайн-журналы, поскольку те, кто отвечает за дизайн печатных изданий, часто также вносят свой вклад в дизайн макетов онлайн-журналов.
Несмотря на то, что все они эстетически приятны, каждый из перечисленных ниже веб-сайтов в журнальном стиле имеет креативный и уникальный макет, все они ставят на первое место пользовательский опыт, и все они являются яркими примерами согласованности в дизайне. Вот как нужно делать веб-дизайн в журнальном стиле.
- 404-страничный веб-сайт Вдохновение
- О странице Сайт Вдохновение
- Панель администратора Веб-сайт Вдохновение
- Вдохновение для бизнеса и корпоративного веб-сайта
- Вдохновение веб-сайта с чистым дизайном
- Вдохновение для веб-сайтов колледжей и университетов
- Сайт дизайнерского агентства Inspiration
- Дизайн веб-сайта электронной коммерции Вдохновение
- Вдохновение для сайта с минималистичным дизайном
- Вдохновение для некоммерческого веб-сайта
- Вдохновение для одностраничного веб-сайта
- Вдохновение для веб-сайтов с прокруткой параллакса
- Вдохновение для веб-сайта фотографа
- Портфолио Дизайн Веб-сайт Вдохновение
- Страница ценообразования Веб-сайт Вдохновение
- Вдохновение веб-сайта ресторана и еды
- Вдохновение для дизайна карты сайта
- Вдохновение для дизайна спортивного сайта
- Руководство по стилю пользовательского интерфейса Дизайн Вдохновение
- Вдохновение для веб-сайта с ультраминимальным дизайном
Время
Домашняя страница Time в значительной степени опирается на визуальные эффекты, но так было всегда с печатной версией этого журнала на протяжении всей его истории. Тем не менее, веб-дизайнерам удалось предоставить зрителю множество вариантов выбора, в то же время избегая загроможденного внешнего вида.
Один из секретов успеха удобства использования и удобочитаемости этого веб-сайта заключается в опоре на визуальную иерархию . Посетитель всегда может увидеть, что представляет собой показанная история момента.
Грань
Назовите это мозаикой или головоломкой, но дизайн домашней страницы The Verge дает вам быстрое представление о том, что внутри, и позволяет быстро добраться туда, куда вы хотите.
Оформление тоже радует глаз. И беглый просмотр списка статей занимает всего секунду или две. Внутренние страницы иногда разбиты на карусели миниатюр изображений, что упрощает переход к конкретной истории или интересующей теме.
Житель Нью-Йорка
Поклонники бумажной версии The New Yorker не будут разочарованы оформлением онлайн-версии. Основное внимание уделяется содержанию, а стиль макета минималистичный и привлекательный.
Типографика The New Yorker знакома, так как типографика печатной версии постоянно поддерживается на всем сайте. Этот журнал отлично справляется с тем, чтобы его онлайн-зрители чувствовали себя как дома.
Проводной
Веб-сайт Wired демонстрирует почти сверхъестественную способность брать огромный выбор самых разнообразных тем (хотя большинство из них кажутся ориентированными на гиков) и упорядочивать их таким образом, чтобы на самом деле было удобно просматривать и превосходно читать.
Это достигается за счет умелого использования ширины столбцов, интервалов, отступов, удобного использования пустого пространства и приятного для глаз шрифта без засечек. Размер шрифта также дает представление о том, какие статьи, скорее всего, будут интересны большинству зрителей. Последовательность является правилом, и все различные части образуют единое целое на всем сайте.
Newsweek
Веб-сайт Newsweek продуманно структурирован, но он также имеет красиво оформленную адаптивную версию, поэтому вы можете просматривать его статьи на ходу.
Это особенно хорошая новость для мобильных пользователей, поскольку этот журнал известен множеством отличных статей и изображений. Он отлично справляется со сбором всего.
Блумберг
Bloomberg.com стал для многих цифровым направлением из-за его способности предоставлять новости, которые предлагают самые свежие новости и делают это в современном, удобном для пользователя формате.
Посетителям особенно нравится то, как этот онлайн-журнал, созданный для современного глобального веб-потребителя, умело объединяет свои самые мощные медиаресурсы.
GQ
Те, кто являются постоянными читателями GQ и привыкли к стильному способу подачи контента в офлайн-версии, найдут тот же знакомый вид в онлайн-версии.
Неудивительно, что первое, что вы видите, это баннер с модными изображениями, растянувшийся по ширине страницы. Прокрутите вниз, и список статей красиво выложен в стильной сетке.
Национальная география
Онлайн-версия National Geographic не разочаровывает. Сайт может похвастаться упрощенным дизайном, большими изображениями и удобным для чтения набором шрифтов.
Дорога и трек
Журнал Road and Track уже давно пользуется популярностью у автолюбителей благодаря своим проницательным статьям и фантастическим изображениям. Редакция этого журнала явно была готова к игре, когда было принято решение о создании онлайн-версии.
Прекрасные статьи и потрясающие фотографии по-прежнему там, а также очень удобная статическая панель навигации.
Ярмарка Тщеславия
Год назад Vanity Fair изменила дизайн своего веб-сайта, и результаты оказались более чем удовлетворительными. В новой онлайн-версии прекрасно сочетаются длинные статьи, которыми славится журнал, с краткими новостями, слайд-шоу, видеороликами и многим другим.
Редакторы веб-сайта также обратили внимание на тот факт, что многие посетители используют мобильные устройства. Они приложили огромные усилия, чтобы контент выглядел фантастически на всех платформах, и им это удалось.
Лос-Анджелес Таймс
The LA Times удалось создать один из крупнейших адаптивных веб-сайтов из когда-либо созданных . Читатели могут получить такой же первоклассный опыт чтения одной из крупнейших в мире газет на любом устройстве и с любым размером экрана.
Для этого веб-дизайнеры отказались от традиционной сетки страниц. Вместо этого подчёркивается яркая журналистика газет, устраняется беспорядок, и больше внимания уделяется уникальным голосам и мультимедиа газеты.
Следующая сеть
The Next Web (TNW) представлен в формате солидного одностраничного веб-сайта со смелым дизайном. Он отлично справляется с балансировкой потребностей бизнеса с сильным UX.
Контент находится в центре внимания, его много, но нет и намека на беспорядок.
Предприниматель
Entrepreneur, исчерпывающее руководство по решению проблем владения бизнесом, продается в газетных киосках уже 30 лет, но онлайн-издание определенно современно по своей структуре.
Домашняя страница может быть не особенно инновационной, но ее макет прост и удобен для восприятия. Этот журнал выходит ежемесячно и доступен как в печатном виде, так и в мобильном приложении.
Возраст рекламы
С момента своего появления в качестве широкоформатной чикагской газеты в 1930 году и до того, как она стала глобальным изданием, Ad Age теперь доступна как в печатном, так и в онлайн-издании, а также в ежедневных и еженедельных информационных бюллетенях по электронной почте.
За исключением выделенной статьи, темы занимают одинаковое место до тех пор, пока вы не прокрутите страницу или две вниз, после чего многие из них отображаются в виде позиций. Макет Ad Age легко воспроизвести .
Один из этих примеров или комбинация одного или двух могут вам подойти. Просто помните о важности последовательности в дизайне.