Дизайн и юзабилити / Журнальная индустрия последнего поколения в помощь веб-дизайну. Об одном интересном источнике черпания вдохновения для макетов сайтов

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

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

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

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

Журнальная индустрия последнего поколения в помощь веб-дизайну
Контраст. Светлые, серебряные часы на темном фоне смотрятся очень дорого и эффектно. Интересный шрифт в логотипе. Такой стиль шрифта очень подходит к fashion тематике.

Журнальная индустрия последнего поколения в помощь веб-дизайну
Листок слева. Заголовок, короткий текст, картинка, заголовок, короткий текст, картинка, и так далее. Такие блоки воспринимаются очень легко и прочесть их даже не сложно, а наоборот интересно. Следует учесть, что у каждого блока разный стиль, а не все по шаблону. Текстовые блоки очень короткие в длину. И такие тексты просто проглатываются, их читать не напряг.
А справа хороший пример оформления стартовой страницы. Хотя и какую-нибудь внутреннюю можно так зафигачить.

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

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

Журнальная индустрия последнего поколения в помощь веб-дизайну
Листок слева. Справа сами серьги, а слева их применение, то есть как они уже смотрятся на девушке. И посередине узенький текстик. Опять желание читать есть :)

Журнальная индустрия последнего поколения в помощь веб-дизайну
Справа. Контраст черного и белого текстовых блоков заставляют обратить внимание как на тексты черного блока, так и на тексты белого. Тут мы не можем не прочитать какой-то из этих блоков, так как они разных цветов. Хороший прием для тех, кто хочет привлечь внимание как к одному, так и ко второму текстовому блоку.
Что в журнале пестрит везде и то, чего в веб-индустрии еще мало — это разные по размеру текстовые блоки. Заголовок гигантский, вступительный текст большой, потом еще подзаголовки возле каждого блока и наконец обычный текст.

Журнальная индустрия последнего поколения в помощь веб-дизайну
Здесь конечно много налеплено, но все равно воспринимается не тяжело, а легко. Я думаю причина в том, что между каждым блоком достаточно много воздуха. И поэтому забитая до отказа страница не воспринимается тяжело. Этим примером можно вооружиться каким нибудь порталам. Просто сделать воздушные блоки между множеством разделов и будет легкость восприятия и возможность сосредотачиваться без проблем на каждом отдельном блоке. А разное оформление отдельных блоков заставляет просматривать каждый. Это тоже фишка. Если в сайте, например в портале много блоков, то утомляет, если все они одинаково оформлены. И каждый уже смотреть в лом. А если все оформить по разному, будет не в лом затормозить свое внимание на каждом блоке.

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

Журнальная индустрия последнего поколения в помощь веб-дизайну
Слева. Вся сила в простоте. Огромная качественная фотка, потом интригующий заголовок «Он идет». Не написано кто именно в начале и именно это придает этому человеку еще значимости.
Справа. Как насчет такого приподнесения информации на сайтах на трех тонких столбиках. Ведь так проще читать. Многие наоборот зарезинивают свои сайты и так растягивают текст, что читать в лом.

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

Журнальная индустрия последнего поколения в помощь веб-дизайну
Вот это я понимаю заголовки. «Запах денег» и «Вся роскошь ухода в питании» Хотя рекламируется парфюм и крем, однако вся серьезность этим продуктам придается заголовками и золотым оформлением. Может туда вообще положили навоз, однако с таким оформлением и заголовками можно продать что угодно :)

Журнальная индустрия последнего поколения в помощь веб-дизайну
Здесь текста уже побольше, но интересные картинки и разбивка текстов на 2 блока, придают более легкий вид и говорят, что все таки это возможно прочитать :)

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

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

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

В общем, в журнальчиках можно увидеть много интересного и поучительного для веб-дизайна. Это конечно сугубо мое субъективное мнение. Если кого-то удалось вдохновить, то я рад. Если нет, то я все равно рад, так как в процессе изучения журнала сам кое в чем разобрался :)

 

Комментарии (13)

RSS свернуть / развернуть
+
0
avatar _AXE_
  • 14 / февраля / 2012 00:19
Черпать вдохновение в удачных интерфейсах зарубежный компаний.
+
0
avatar yakooobin
  • 14 / февраля / 2012 00:25
Интерфейсы интерфейсами, это да конечно
Но, я не об этом сейчас

А о том, что в бумаге можно найти очень много полезных примеров
+
0
avatar _AXE_
  • 14 / февраля / 2012 00:34
Хм… я встречал много утверждений веб-дизайнеров о том что как раз не нужно брать идеи из полиграфии. Полиграфия это другое, как огурец и помидор.
+
0
avatar yakooobin
  • 14 / февраля / 2012 00:37
сейчас послушаем, что скажет профи :)
+
0
avatar _AXE_
  • 14 / февраля / 2012 00:44
Мнения «профи» могут тоже разделяться.
+
0
avatar KirillIvanov
  • 14 / февраля / 2012 00:28
Я обожаю журнальный дизайн. Вот пример реализации журнального дизайна на сайте.
+
0
avatar yakooobin
  • 14 / февраля / 2012 00:36
я в твоих работах уже давно увидел журнальный стиль :)
+
0
avatar yakooobin
  • 14 / февраля / 2012 00:37
А что ответишь на этот коммент? :)
Хм… я встречал много утверждений веб-дизайнеров о том что как раз не нужно брать идеи из полиграфии. Полиграфия это другое, как огурец и помидор.
+
+1
avatar KirillIvanov
  • 14 / февраля / 2012 01:42
Вдохновляться журналами — это же не означает что все свои сайты рисовать как журнал.
Где-то подходит, где-то нет.
+
0
avatar _AXE_
  • 14 / февраля / 2012 00:43
Тогда давай уточню свою позицию. Вдохновение можно черпать откуда угодно, хоть наблюдая рассветы и закаты. Из полиграфии можно позаимствовать только оформление текста (оформление цитат, врезок и др. аттрибутов). Но оформить текст как на картинке №3 будет перебором. А как на картинке 2 или 3 можно оформлять только главные странички продуктовых сайтов (например, когда продукт новая модель автомобиля) и т.д.
+
0
avatar gorgtown
  • 14 / февраля / 2012 01:46
А мне один верстальщик посоветовал посмотреть популярные газеты, эдак 80-е. Для юзабилити.

По его словам в совковое время умели делать «с умом». Но никак не доходят руки.
+
0
avatar KirillIvanov
  • 14 / февраля / 2012 01:57
Вот пример Итальянского Вог. Журнальный дизайн. Все четко. Красиво. Почему нет?
+
-1
avatar KirillIvanov
  • 14 / февраля / 2012 02:07
Вот еще один журнал. Супер сделано.

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.