лучшие сайты с веб дизайном
20 лучших дизайнов сайтов 2020 года по версии Awwwards
Одно из самых важных качеств специалиста в сфере визуальной коммуникации – насмотренность. То есть быть в курсе последних…
Одно из самых важных качеств специалиста в сфере визуальной коммуникации – насмотренность. То есть быть в курсе последних проектов и трендов, а также уметь проанализировать, за счет чего проект стал успешным. Другими словами, опытный профессионал должен понимать, где потенциально провальный или отличный дизайн до того, как его раскритикуют или же, наоборот, высоко оценят.
Чтобы развить насмотренность, необходимо обладать обширными знаниями и следить за первоклассными проектами. Например, вы можете посмотреть подборку лучших дизайнов сайтов 2020 года по версии Awwwards и получить вдохновение для создания собственного креативного проекта.
1. Stock Photography Then and Now
Сайт представляет историю стоковой фотографии, кардинальные перемены в эстетике за последние 10 лет и взгляд в будущее этой сферы. Он был создан креативным агентством Advanced Team в сотрудничестве с ведущим мировым фотобанком Depositphotos.
2. Swab The World
Титулованное диджитал-агентство Locomotive разработало привлекательный сайт для платформы поиска доноров Swab The World, где каждый пациент может найти необходимую помощь.
3. The Year of Greta
В 2019 году журнал TIME назвал Грету Тунберг человеком года. Она попала на обложку издания и вдохновила бутик-студию Superhero Cheesecake на создание платформы, которая хронологически иллюстрирует, как Грета Тунберг стала лидером международного движения.
4. Pioneer — Corn Revolutionized
Благодаря студии цифрового дизайна Resn вы можете увидеть увлекательный процесс производства семян кукурузы от компании Pioneer.
5. Alan Menken
Креативная студия Hello Monday создала потрясающее портфолио для Алана Менкена – титулованного американского композитора и автора песен из всемирно известных мультфильмов “Русалочка”, “Красавица и чудовище”, “Аладдин” и многих других.
6. Sweet Punk
Новый сайт французского креативного агентства Sweet Punk представляет интересные проекты и мотивирует посетителей провести больше времени, изучая платформу.
7. Vide Infra
Агентство Vide Infra, которое специализируется на дизайнерских и технологических решениях для брендов, создало для себя увлекательной сайт, ставший одним из лучших в 2020 году по версии Awwwards.
8. Ali Ali
Еще одно вдохновляющее портфолио, достойное вашего внимания, – работа агентства цифрового дизайна Exo Ape для режиссера из Каира Ali Ali.
9. Mav Farm
Оцените потрясающий дизайн сайта для приложения Mav Farm. Компания Geex Arts, занимающаяся дизайном и веб-разработкой, вне конкуренции, когда необходимы трендовые и инновационные решения.
10. Altermind
Чтобы показать ценности и непобедимый дух консалтинговой фирмы Altermind, креативная студия Purée Maison создала сайт, который предлагает захватывающий пользовательский опыт.
11. Shape Studio
Shape Studio специализируется на пространственном дизайне для коммерческих клиентов. Их лаконичный и в то же время трендовый сайт создала титулованная студия из Бристоля – Green Chameleon (GC).
12. Acura: Beat That
Ищите вдохновение в геймдизайне? Посмотрите на гоночную игру Acura для мобильных устройств и компьютеров от Active Theory – агентства, которое создает потрясающие сайты, приложения, инсталляции и XR-проекты.
13. Nova Smart Home
Nova Smart Home – 3D-микросайт с увлекательным пользовательским опытом для тех, кто хочет больше узнать о продуктах для умного дома. Он был создан креативным агентством Ueno в рамках праздничной маркетинговой кампании.
14. Pest Stop Boys
Этот яркий интерактивный сайт от Herdl для службы дезинсекции Pest Stop Boys – отличный пример того, как можно визуализировать нишевые темы и эффективно доносить информацию аудитории.
15. Helias Oils
В дизайне сайта Helias Oils от диджитал-студии Buzzworthy используются трендовые цвета, эстетичные изображения и минималистичный макет, которые привлекают внимание и мотивируют посетителей узнать больше о продуктах и компании.
16. Ultima Gstaad Switzerland
EWM – швейцарское агентство по дизайну и разработке, которое создало первоклассный сайт для 5-звездочного отеля и SPA Ultima в Гштааде (Швейцария).
17. The Virtual Economy
Чтобы показать и описать будущее виртуальной экономики, агентство цифровых инноваций Gladeye сотрудничало с L’Atelier BNP Paribas. Результат совместной работы получился потрясающим!
18. Next Big Thing
Интересно, как выглядит сайт венчурной студии? Это платформа, созданная креативным агентством Serious Business для компании, которая поддерживает развитие новых венчурных проектов.
19. KD Capital
Независимое диджитал-агентство Spring/Summer помогло KD Capital визуализировать ценности и увлекательно представить проекты.
20. Fleava
Вы можете почерпнуть вдохновение на сайте диджитал-агентства Fleava, который презентует работы компании и позволяет в считанные секунды найти всю необходимую информацию.
Попробуйте регулярно изучать лучшие примеры дизайна сайтов, смотреть эстетически красивые фильмы и следовать сезонным трендам, чтобы быстро развить вкус в дизайне. Также посмотрите наши предыдущие подборки стильных сайтов от Awwwards:
20 лучших сайтов 2020 года: подборка экспертов
Совместно с автором телеграм-канала Now How Гаврилом Перовым мы вновь прошлись по главным трендам веб-дизайна и собрали впечатляющие примеры конкурсных работ. Листайте, переходите по ссылкам и получайте порцию вдохновения с каждого пункта подборки лучших сайтов 2020 года.
Смотрите также подборку лучших сайтов по итогам 2019 года.
Лучшие сайты с 3D-дизайном
«3D-дизайн в разных вариациях фигурировал почти во всех топовых сайтах в 2020 году, — говорит Гаврил. — На мой взгляд, самая лучшая интерпретация — когда видео или 3D-объекты дополняют, а не мешают типографике и другим элементам сайта».
1. Adidas — CHILE 20
Если вы когда-нибудь заказывали одежду онлайн, то не понаслышке знаете, как качественные фотографии влияют на выбор. Но Adidas и Foot Locker слишком круты, чтобы ограничивать презентацию новых моделей простой визуализацией.
Для последней версии культовой коллекции CHILE 20 дизайнеры агентства Active Theory создали три иммерсивных пространства с реалистичными 3D-визуализациями и хип-хопом. Чтобы попасть в одно из них с главной, нужно выбрать модель кликом, переместиться в другой — сделать свайп в сторону. Приятный бонус для фанатов: фоновый динамический паттерн с названием коллекции можно изменить, заменив «CHILE 20» на свое имя.
2. Beans Agency
Серия моушн-заставок с прорисованными в 3D персонажами делает серфинг по сайту настолько увлекательным, что можно зависнуть на на весь обеденный перерыв. Мы не шутим, лучше установите таймер.
3. Zenly
Сайт приложения Zenly раскрывает его возможности с помощью красочных 3D-иллюстраций и коротких текстов. Изначально приложение задумывалось как мобильная карта для обмена информацией о местоположении с друзьями и близкими, например, чтобы не потеряться в путешествии или решить, где удобнее собраться. На практике оказалось, что оно полезно в критических ситуациях — с помощью Zenly координируют свои действия пожарные.
Не в пример сложности графики, навигация по сайту самая простая: достаточно нескольких скроллов мышью, что перемещаться между мультяшными локациями и понять, как работает приложение.
4. Plink
Лендинг сервиса быстрых онлайн-платежей Plink с крутыми трехмерными анимациями — пример подхода «Content is first», к которому стремятся многие веб-дизайнеры. Кажется, всплывающие заголовки и текст лишь дополняют, но не отвлекают внимания от иллюстраций.
Эта работа студии Numbered из Амстердама отмечена жюри нескольких digital-конкурсов, таких как Awwwards и The FWA. По свежим релизам в их портфолио можно отслеживать тренды веб-дизайна.
5. VC Swipe
VC Swipe — сервис, который помогает инвесторам находить перспективные молодые стартапы, и наоборот. Система, основанная на искусственном интеллекте, связывает участников платформы с наиболее подходящими контрагентами по сделке.
Помимо впечатляющей 3D-анимации, на этом сайте очень приятная типографика и сетка. Инверсии и плавные переходы между контентными блоками делают навигацию визуально более приятной.
Лучшие сайты с минималистичным дизайном
«Минимализм — вечный тренд веб-дизайна, он всегда был, есть и будет. Но по сайтам ниже можно заметить, как он пытается искать новые формы, новые сетки, новые размеры и тому подобное, чтобы освежить себя».
6. Cellular Agriculture Society
Тренды веб-дизайна во многом отвечают социальным трендам. Именно поэтому среди лучших сайтов 2020 года неоднократно были отмечены некоммерческие и просветительские проекты, касающиеся проблем экологии и культуры потребления.
7. Fuse Media
Fuse Media — международное коммуникационное агентство. Эффектный, но при этом очень минималистичный сайт с акцентом на типографику и интерактивность. Дизайн легко передает довольно сложную и объемную информацию об услугах и проектах компании.
Источник: Fuse Media
8. Vide Infra
В этом году у студии веб-дизайна Vide Infra сложился авторитетный список достижений: вошли в Топ-10 креативных веб-разработчиков Рейтинга Рунета, в Топ-5 CSS Design Awards, номинированы на студию года на Awwwards. Вам еще нужны аргументы, чтобы заглянуть в их портфолио и увидеть лучшие сайты 2020 года?
Не только коммерческие проекты, но и сайт самой студии отмечен экспертами. Минималистичный дизайн, тонкие микроанимации и плавные переходы по сетке делают серфинг по сайту медитативно приятным.
9. Point
Point — дебетовая карта и приложение с системой вознаграждений, выпущенная одноименным банком в США. Пройдя по ссылке, вы можете подумать, что это обычный пример презентации мобильного приложения. Но обратите внимание, как обыграны цвета, насколько интересен дизайн самих карт и хорошо продуман фотоконтент.
Лучшие сайты с декоративными акцентами
«Вроде все тот же минимализм, но на фоне декоративных элементов, призванных очеловечить интерфейс, воспринимается как совсем иной стиль».
10. CoverMyMeds Careers & Culture
Вполне вероятно, что после просмотра этого сайта вы захотите сменить работу. Ведь то, как CoverMyMeds, компания-разработчик ПО для фармацевтической отрасли, презентуют HR-бренд и строящийся кампус, достойно восхищения. Сайт разработан креативной студией Dogstudio из Чикаго. Их лучшие сайты неоднократно попадали в мировые рейтинги.
На первый взгляд, этот сайт представляет собой хаотичную композицию фотографий, видео, 3D-визуализаций, декоративных акцентов и разбросанного тут и там текста. Но как только вы начнете смотреть ролики и знакомиться с командой, вы проникнитесь их миссией — помогать пациентам, оказавшимся в сложной ситуации. Спойлер: занимаясь серьезным делом, вовсе не обязательно быть слишком серьезным, достаточно оставаться собой.
11. Mazellier Design
Готовы поспорить: сайт Тиффани Мазелье из Франции станет одним из самых крутых портфолио дизайнеров-фрилансеров, что вам доводилось видеть. Не только потому, что в нем есть ссылки на лучшие сайты, разработанные с ее участием. Само портфолио отмечено жюри конкурсов CSS Design Awards и Awwwards.
Минималистичная скетч-анимация с мышонком при загрузке и микроанимации в виде пометок красной ручкой в тексте создают атмосферу легкого и непринужденного знакомства. Возможность поиграть курсором мыши с портретом Тиффани демонстрирует не только ее навыки в графическом дизайне и проектировании интерфейсов, но и чувство юмора.
12. NYLON
NYLON — популярный журнал и информационный портал о моде, развлечениях, музыке и стиле жизни. Казалось бы, здесь все та же старая и добрая многоколоночная история, что и в большинстве лайфстал-блогов. Но контрастные баннеры, яркие коллажи, декоративные шрифтовые акценты и «воздушные» пространства, свободные от контента, делают его в меру минималистичным и нескучным.
Сайты с лучшей типографикой
«В 2020-ом мы видели шрифты с засечками, как мне кажется, во всех возможных интерпретациях. Могу предположить, что в следующем году этот тренд в веб-дизайне будет только набирать обороты. Потому что на фоне гротескных шрифтов „а-ля Helvetica“ это все еще выглядит свежо».
13. Muteza
Для сайтов, связанных с косметикой и уходом за собой, визуал особенно важен. Он должен передавать эстетику, текстуры, настроение, ощущения и даже запахи, чтобы сформировать правильные ожидания от использования. Формула сыворотки для лица построена на растительных ингредиентах. Это находит отражение в декоративных элементах, фото и в начертании заголовков красивым шрифтом Florian Bold.
14. Æbele Interiors
Еще один очень элегантный сайт, на этот раз агентства дизайна интерьеров под ключ из Антверпена. Здесь стоит обратить внимание на сочетание главного шрифта с засечками с искусно вписанным тонким рукописным шрифтом. Особый шарм типографике придают плавные эффекты анимации в переходах между страницами.
Источник: Æbele Interiors
15. CUSP
CUSP — это команда дизайнеров, бренд-стратегов и разработчиков, ориентированная на создание комплексных решений для компаний мирового класса. Их сайт представляет собой одновременно и портфолио, и прямую демо-версию технических возможностей команды. Нетривиальная верстка, продуманная цветовая схема, крутые фотографии и микроанимации делают навигацию по сайту захватывающей и живой.
16. 2°C EARTH
Тексты и типографика в этом проекте заслуживают особенного внимания. Но главная особенность, конечно, в переключении путеводителя между настоящим и будущим. Если свайпнуть страницу влево, все фотографии становятся искаженными, а заголовки и содержание текстов меняется, например:
Исследование сайта 2°C EARTH — объемный интерактивный опыт. Найдите возможность уделить ему время.
Лучшие сайты с нестандартными решениями в UX
«Еще один яркий тренд: все чаще дизайнеры подходят к проектированию UХ („User Experience“, дословно „опыт пользователя“), вкладываясь в тот самый „experience“ по максимуму, транслируя его как „переживание“, „приключение“. В результате мы получаем так называемые фестивальные сайты, нацеленные на то, чтобы максимально погрузить пользователей в интерактив, вдохновить особенной атмосферой, создать ощущение не просто навигации, а полного управления всем происходящим внутри».
17. Everpost
Everpost — креативная калифорнийская компания, которая специализируется на видеопродакшне. Это становится понятно сразу по галерее тизеров на главной, которую можно прокручивать скроллом.
«Типичный лендинг стартапа, но на каких-то диких стероидах», — так охарактеризовал сайт Everpost Гаврил Перов. А мы заглянули на сайт разработчика Брайана Джеймса BryBry и пришли к заключению, что сказанное выше после «но» можно отнести ко всем его проектам. Неспроста они каждый год стабильно попадают в лучшие сайты на Awwwards с 2014 года.
18. Jam3 – FWA 100
Свою сотую победу в престижном для разработчиков конкурсе FWA (Favorite Website Awards), команда канадской студии Jam3 решила отметить. созданием еще одного конкурсного сайта, разумеется! К слову, сейчас в их копилке уже 106 отметок за лучшие сайты на FWA.
То, что получилось в итоге, сложно назвать сайтом. Это, скорее, арт-объект или инсталляция. Будьте готовы к бесконечному восторгу от путешествия в пространстве и времени. В любой момент можно кликнуть на иконку камеры в правом верхнем углу, чтобы сохранить потрясающие обои для рабочего стола с 3D-абстракциями.
19. Pioneer – Corn Revolutionized
С помощью гиперреалистичных 3D-визуализаций, инфографики и микроанимации дизайнеры показывают весь цикл выращивания культуры от одного семечка до огромных плантаций. Особенная интерактивная фишка сайта — возможность «управлять средой» вокруг растения, переключать параметры «ветер», «засуха», «вредители» и т. д. Так пользователи могут наблюдать изменения в состоянии растения и знакомиться с результатами испытаний. Если вас завораживают процессы создания чего-то большего из малого, определенно стоит посетить этот сайт.
Источник: Pioneer – Corn Revolutionized
20. Museum Without Walls
Международный проект «Музей без стен», организованный Британским Советом, начал развиваться в digital-пространстве за несколько лет до пандемии COVID-19. Но именно в 2020 году концепция музеев онлайн стала как никогда актуальной.
В этой интерактивной виртуальной галерее представлены избранные произведения искусства в его различных формах, включая фотографии, видео, перформансы, живопись и инсталляции. С точки зрения механики сайт работает очень просто и понятно, но выглядит необычно и свежо.
Лучшие сайты 2019 года: подборка экспертов
Совместно с авторами телеграм-канала Now How прошлись по главным трендам и собрали лучшие примеры веб-дизайна этого года. Листайте, переходите по ссылкам и погружайтесь в магию дизайна!
Лучшие сайты со скетчами
Скетч — один из горячих трендов этого года. Дизайнеры целенаправленно иллюстрируют сайты в таком стиле, чтобы управлять вниманием и подчеркивать главное. Ниже — лучшие примеры сайтов со скетчами.
1. Hellomonday
На главной странице сайта креативной нью-йоркской студии анимированная скетч-парочка развлекает читателя необычными превращениями и трюками, а с сеткой публикаций можно поиграть курсором мышки и пошевелить края у картинок.
Благодаря скетчам и игровым элементам в дизайне у сайта получилась легкая и непринужденная атмосфера. На такой не страшно зайти даже в понедельник, а значит, задача создателей студии выполнена — хороший дизайн делает жизнь лучше в любой день.
2. Lemonade
Lemonade — это страховая компания, расположенная в США. Миссия компании — сделать страховой бизнес более прозрачным и человечным, поэтому их сайт очень не похож на типичные сайты страховых компаний: он светлый, приветливый и будто нарисован от руки.
Самая интересная страница с отчетом о благотворительной деятельности буквально рисует читателю историю в цифрах и фактах, которые при прокрутке дополняются новыми разделами. В итоге анимация так захватывает, что не дочитать страницу просто невозможно:
Сайты с пластиковыми иллюстрациями
Дизайнеры всё чаще сотрудничают с художниками при создании сайтов. Фирменные изображения из тренда превращаются в хороший вкус, и пластиковые иллюстрации — один из примеров того, как можно выделиться и запомниться благодаря необычному дизайну.
3. Binaryblocks
Компания-разработчик онлайн-платформ и приложений использовала в дизайне сайта футуристичных пластиковых персонажей, необычные шрифты и черно-белый дизайн.
На главной странице посетителей встречает красивый видеоролик с метафоричными фигурами и презентацией о том, как брендам важно адаптироваться в быстро меняющейся цифровой среде.
Результат получился очень запоминающимся:
4. Life of Your Code от Google
На этом сайте Google иллюстрации — это не просто декорации, они часть игры, которая объясняет разработчикам, как устроен сервис хранения кода Cloud Run. В процессе игры можно собрать свой поезд из разных вагончиков-сервисов и посмотреть, как он работает.
Лучшие сайты с необычной типографикой
4. ЖК Композиция № 24
Для сайта ЖК Композиции дизайнеры использовали необычный шрифт с засечками Karloff Negative, который очень похож на шрифты с советских плакатов, а вместо привычных рубрик поверх фотографий наложены контрастные квадратные карточки.
С сайтом интересно взаимодействовать, хочется бродить по всем страницам и внимательно рассматривать детали:
5. Ladybird
Сайт-визитка одноименного фильма использует в оформлении готические и декоративные шрифты, красивые иллюстрации и аккуратную верстку: все ради того, чтобы передать атмосферу фильма.
Внутри спрятан милый тест с карточками, ответы на которые перекликаются с сюжетом из фильма, кадры из которого появляются после ответов. Желание пересмотреть Lady Bird гарантировано.
Если хотите сделать похожий дизайн, ныряйте в нашу подборку бесплатных готических шрифтов с шаблонами и выбирайте понравившиеся.
Лучшие сайты с брутальным дизайном
Брутализм — контр-тренд, в котором смешиваются фотография, видео, иллюстрация и провокативный дизайн. Сайты с таким дизайном противопоставляют себя милой эстетике, минимализму и стильному однообразию веб-дизайна последних лет. Зачастую их специально создают не в конструкторах, а при помощи HTML, поэтому они не выглядят супер-современно, но при этом сильно выделяются из общей массы. Брутализм идеально подходит для магазинов вещей, портфолио дизайнеров и молодежных брендов.
6. 2nd STREET USA
Сайт этого секонд-хэнд магазина уличной моды похож на модный журнал: внутри нетипичная верстка, крутые фотографии моделей и продуманная цветовая схема. Несмотря на нетипичную для интернет-магазина сетку, хаоса на сайте нет, наоборот, вся важная информация на виду.
Топ-20 лучших сайтов для вдохновения веб-дизайнеров
Вдохновение — вещь очень тонкая. Она не подчиняется законам логики и систематизации. Это значит, что прежде всего необходимо прислушиваться к своим ощущениям и пытаться понять, от чего возникают радость и воодушевление.
При этом важно понимать, что веб-мастера зачастую всё же принадлежат к визуалам. То есть они воспринимают окружающий мир прежде всего благодаря зрению. При этом понятие о красоте у всех разное. Поэтому полезно сравнивать свои творения с чужими. Лучше всего вдохновляться работами профессионалов. Для этого можно посещать сайты, специализирующиеся на веб-дизайне. Рассмотрим 20 ресурсов, где можно найти множество примеров удачного дизайна.
Этот ресурс многим уже хорошо знаком, но не сказать о нём просто невозможно. Среди веб-мастеров мало таких, кто ни разу его не посещал.
Здесь можно не только посмотреть множество удачных проектов, но и провести их анализ. Еженедельно разбирается новый сайт, определяются его преимущества и недостатки, и полученная информация, несомненно, очень поможет веб-мастеру в работе над его проектом.
Этот сайт является своеобразной соцсетью. Он предназначен для любителей творчества. Здесь можно найти множество идей не только для интернет-проектов в частности, но и для корпоративного стиля вообще.
На сайте представлено свыше полутора сотен приложений и тысячи шаблонов. Здесь веб-дизайнер может найти кучу идей для реализации своих целей.
Сами создатели интернет-проекта «Niice» нередко называют своё детище «Поисковиком со вкусом». Тут имеется множество различных картинок, которые пользователи могут применять на своих сайтах.
На сайте представлено множество примеров удачных дизайнов. Контент довольно часто пополняется. Можно найти интересные решения для своего сайта на любую тему.
На этом сайте представлена графика, которая может быть очень полезна веб-мастерам. Здесь есть иконки, фото, иллюстрации, векторная графика.
Этот сайт является хостингом для различных картинок и видеороликов. Среди представленных на выбор вариантов пришедшие за вдохновением веб-дизайнеры, непременно, найдут именно, что им требуется.
В блоге здесь можно почитать свежие новости в мире дизайна.
Свойственная немцам педантичность проявляется даже в творчестве. На сайте представлено множество тщательно продуманных работ.
Здесь объединены 2,5 тыс. сайтов, упрощающих поиск вдохновения для создания коммерческого проекта. Оказавшись на главной странице, пользователь сразу поймёт, куда следует переходить дальше, ведя поиск идей.
Лучшие из представленных здесь сайтов получают награды. Для победы требуется лишь выполнение одного условия – дизайн должен быть целостным.