Обсуждая развитие веб-дизайна, появление новых трендов и стилей, рассматривая вопросы уместного и корректного использования цветов, шрифтов, геометрических элементов, спецэффектов, всегда хочется знать и видеть воочию как можно больше интересных приемов, увидеть, что нового появляется в мире, какие сайты создаются, какие «фишки» и «приемчики» открывают те или иные веб-мастера. Но, согласитесь, что действительно отличных и умопомрачительных проектов не так и много создается за, например, неделю, месяц, полгода... Нет, разумеется, все сайты хороши по своему, но чего-то изысканного и утонченного найти бывает не так просто.
Именно поэтому мы в блоге не так часто представляем материал, в котором бы исключительно и подробно рассматривали работы мировых веб-дизайнеров. Причина в том, что не так велик интерес смотреть на однотипные сайты или сайты, чей дизайн в той или иной мере использует похожие эффекты, параллаксы и прочее. Интереснее находить изюминки и отличия.
Так или иначе, но в этот понедельник пришло время с момента последнего аналогичного материала вновь обратиться к такой теме и попросту посмотреть на занимательные проекты. Несмотря на множественные тенденции начала 2018 года и доминирующие с конца прошлого, веб-дизайнеры продолжают увлекаться минимализмом, анимацией в разной степени, общей динамикой в изображениях и видео, даже 3D-графикой. Между тем, создают они весьма простые сайты с хорошим дизайном, о которых хочется сказать очень просто: «Хотите увидеть проявление эклектики в веб-дизайне? Проще простого, смотрите дальше».
Поскольку каждый сайт уникален сам по себе, мы не будем разбивать всю подборку на категории, обсуждать совокупность использования того или иного стиля или элемента. Нет. Мы просто будем в этот раз смотреть на отличные (по нашему мнению) сайты и разбираться в том, почему же они особенные.
Robbie Hall Creative
Сайт фотографа Робби Холла выглядит как готовая тема, например, для того же wordpress’a. Все словно бы стандартно, без излишеств, строго и… почему-то очень интересно и красиво. Дело как раз в том, что дизайнер создал его «от и до» на Bootstrap и этого не поймешь, пока не изучишь код сайта. Но в целом да, выбранная тема и оформление выглядят очень просто, эффективно и удобно. Иными словами: проверенное временем.
Florian Wacker
В данном случае, некоторым людям хочется сказать: «Какая ужасная типографика»; но тут появляется некоторая особенность. Дело в том, что мастер создал сайт исключительно на родном ему языке (немецком) и более никаких локализаций нет. Немецкий язык достаточно специфичен и сложен в сравнении с английским или французским. Не будем углубляться, но он имеет некоторое своеобразное написание и использование гласных и согласных букв, которых на стандартной клавиатуре qwerty попросту нет, существует использование артиклей с существительными и прочее, и прочее вплоть до правила переноса по слогам и разделения слов в словосочетании на строках. Учитывая это, обращая внимание на то, как написан текст на страницах сайта понимаешь, что в действительности все гармонирует, а типографика удобная.
Magic People Voodoo
Необычный минималистический сайт, созданный в графическом стиле, напоминающий более презентацию. Между тем, его удобно изучать, читать и на нем много анимации. Но она легкая, незаметная, по сути. Изюминкой дизайна стал их логотип-глаз, который…в общем, покликайте по нему сами.
Two Twenty Two
Два двадцать два представляет собой сообразный интерактивный проект с 3D-эффектом. С одной стороны, можно, двигая курсор, заметить, как все элементы дизайна приходят в небольшое и мимолетное движение; с другой же, очень много объемных предметов. На домашней странице можно увидеть разбросанные объемные леденцы, пиццу, коробки из Super Mario, солнцезащитные очки, объекты из Minecraft. Это интересно и весело, учитывая, что на протяжении всего сайта курсор тоже преображается. В остальном же, все прочие страницы выполнены в обычном плоском стиле, с приятными шрифтами и фотографиями. Но даже и они анимированы.
Patrick Heng
Смотря на этот сайт, хочется попросту сказать, что дизайнер «впихнул» в один проект все эффекты и трюки, которые знал. Их тут столько по количеству, что если начать все перечислять, можно или что-то забыть или… «свихнуться». Но что самое интересное и что нас привлекло к этому проекту! Как говорится: «вы не поверите». Смотрится вся эта совокупность безумно красиво и органично гармонично. Попросту приятно и интересно изучать. Нет аляповатости в красках, нет безумства мелких и крупных деталей.
Достиг веб-дизайнер этого отчасти благодаря использованию монохромной палитры, простых шрифтов, проработанной типографики (в которой четко определено как пишутся заголовки и основной текст, и подзаголовки, нет «прыганья» по размерам и нет множества шрифтов). Здесь много свободного пространства, элементов много, но есть, где им расположиться. Определенно, но все это в немалой степени повлияло на красочность и функциональность его работы.
Uncanny Valley
Этот проект в корне меняет наше понятие о минимализме. Дизайнеры решили исказить даже понятие о графичности. Иными словами, весь сайт, вся его конструкция искажена «от и до», словно мы сами оказались в Зазеркалье и окружены абстракцией и гротеском. И такой подход к визуализации работает. Более того, некоторые элементы и страницы имеют интерактивность.
Иными словами, данный сайт лучше смотреть самостоятельно и листать его, в противном случае, даже если пытаться понять его уникальность, многое останется незамеченным.
MoreSleep
Сайт дизайнерской студии изначально совершенно не способен привлечь внимание. Обычный макет, где портфолио работ и услуг пролистываются по горизонтали справа налево, а по четырем сторонам расположены ссылки и информация, меню небольшое вверху. Не аляповатые, чуть осветленные фотографии, изображения, спокойные строгие шрифты, брусковые. Ничего из того, о чем хотелось бы сказать: «Вау! Смотрите, да, это супер круто! Ох, ах!» и так далее.
Но вот незадача, достаточно перейти на страницу work и тут-то начинается все веселье. Обычный список в брутальном стиле, но стоит подвести курсор к какому-либо его пункту, сразу начинаются анимации, параллаксы, эффекты и открывается мини-информация о выбранной работе. В первый момент смотрится неожиданно, если можно так выразиться, но когда осознаешь, что и куда, становится просто весело. И да, это функционально и удобно в своем роде.
James Merrell Architects
В свое время мы рассказывали о том, что сайты об архитектуре, недвижимости имеют свои особенности в веб-дизайне и проектировать их по стандартам несколько сложнее и не всегда уместно. Для большинства из них действует негласный стандарт – презентационный стиль (а-ля PowerPoint). Но сайт Джеймса Меррела несколько отходит от стандартов. Он рассказывает об архитектурных проектах не как это делают в презентациях, а как делают в печатных публикациях и проспектах. Удобнее увидеть самостоятельно и прогуляться по страницам.
На сайте меню спряталось внизу страницы и почти всегда пропадает, если курсор не подвести в нижний левый угол. Но при этом все понятно и без него. Нажимая на изображения, ссылки, значок «+» вверху можно узнать все подробности и выбрать направление проектов. В целом, смотрится все весьма лаконично и удобно.
Prollective
Минималистический и профессиональный дизайн, хотя кто-то может посчитать это преувеличением. Здесь мало изображений и фотографий, но много текста и графики, точнее… градиентов. Причем градиентов не ярких, а пастельных тонов, которые появляются, даже если навести курсор на изображения. Да, проект нельзя отнести к художественному, весь акцент приходится на типографику, но при наличии иного фона или других оттенков, дизайн превратился бы в «кашу». Таким образом, стоит обратить внимание на то, как тонко подобраны цвета и их сочетание со шрифтами, размер и жирность, как окрашены кнопки и какая анимация существует. Многие увидят простенький светленький сайт. Мы же видим яркий и кричащий проект, который буквально голосит о том, чтобы по нему «прогулялись».
Pierre Georges
Наверное, это один из самых простеньких сайтов нашей весенней подборки 2018. Здесь все приятное, спокойное, функциональное. Большие изображения, крупный текст, удобный для больших мониторов и не требующий того, чтобы в браузере пользователи принудительно увеличивали масштаб страницы. Этим сайтом можно наслаждаться, изучать контент. Что в нем эдакого-разэтакого? Да потому, что эта простота брутальна и минималистична.
Contemple
В противовес простоте представляем еще один неимоверно навороченный анимацией сайт. Да уж, количества анимации в этом дизайне похоже на дикость, да еще музыкальное сопровождение сделано. Но занятно то, что анимация приятна глазу и в использовании. Да. Выбираете проект, кликаете, смотрите мгновенную (почти) анимационную загрузку, а потом наслаждаетесь плавностью прокрутки страницы, легкими движениями секций, когда на них попадает курсор. Знакомо? Мы рассказывали о похожем в начале материала.
Но именно потому мы также сказали, что не будем сортировать все примеры, ибо все они уникальны и особенны. И в данном случае это проявляется нагляднее. Two Twenty Two и Contemple похожи только парой «фишек», которые имеют разную реализацию. В общем и целом, каждый сайт выглядит самодостаточным, они даже характеры и настроения имеют разные. А это и говорит о мастерстве веб-дизайнеров. Взять идею, но изменить её и использовать так, чтобы это не было плагиатом.
IPG Mediabrands
Прекрасный пример корпоративного сайта. Каждый из нас бывал в банке или крупной компании, где всегда навалом всяких брошюр. И, разумеется, одну-две листал каждый в силу разных причин: в ожидании или из-за интереса.
И знаете что? Этот сайт выполнен именно как одна большая, многостраничная брошюра. И это удобно, это функционально и это красиво. Более того, используется контраст цветов (серые и желтые), черно-белые фотографии (об их значении мы рассказывали) и цветные, хорошая типографика, благодаря который текст читаем и быстро становится понятным. Небольшая анимация (не в количестве, а в качестве), быстрота работы. Что еще нужно корпоративному сайту?
Если вы спросите: каким может быть хороший сайт компании? Вот вам и ответ, вот этот самый пример.
Root Studio
Мы говорили в начале года о том, что в тренде яркие цвета, насыщенные и кричащие. Разумеется, в умеренном их применении, без… «фанатизма». Но дизайн сайта студии Root оказывает на пользователей двоякое впечатление. С одной стороны, кричащий и сочный желтый цвет может вызвать неприязнь. С другой, этот сайт интересно и удобно изучать. Своеобразные шрифты отлично сочетаются друг с другом, много свободного пространства, а потому элементы не жмутся и не теснятся; есть анимация, легкая графичность, фотографии и многое другое. Кто-то подумает, что сайт прост или скучен, но для нас – весьма хорош и скромен.
Заключение
Разумеется, сайтов хороших или отличных, навороченных спецэффектами или без них – очень много. Даже более того, у всех людей еще и вкусы разные, мнения и впечатления. Но так или иначе, из всего того разнообразия, что появляется ежедневно, выбрать действительно впечатляющие работы – непросто. Но приступая к макету, к продумыванию расположения элементов на странице, стоит иной раз взглянуть на проект, на его идею слегка отстраненно. Может, порой лучше меньше/больше минималистичности, без анимации, с крупными шрифтами. А может, сходить в ближайший банк или муниципальное учреждение и пролистать их брошюры?
Найти идеи можно буквально везде (даже если классику аниме смотреть). Другой вопрос в том, как эту идею изменить, под каким углом повернуть так, чтобы получилось пусть и не ново, но оригинально, с изюминкой. Все приведенные нами выше сайты не уникальны на 100%. Идеи и эффекты похожи. Но то, как они используются и придает особенность каждому сайту, повышает интерес к нему.