Как должен выглядеть сайт в 2022? Главные тренды дизайна — Дизайн на vc.ru
Последние несколько лет веб-дизайн претерпел массу изменений — от нагроможденных информацией и «сверстанных на коленке» страниц до футуристичной 3D-графики и кислотной ностальгии по 80-м и 90-м.
6665 просмотров
Меня зовут Лагойский Алексей Дмитриевич, я владелец агентства Welstate, поэтому мы постоянно следим за трендами.
В этой подборке попробуем разобраться, какой дизайн сайтов будет выглядеть модно сейчас и позволит спокойно оставаться в тренде еще пару лет, не требуя сбора креативной команды и срочного редизайна. Что в будущем сэкономит и силы, и бюджет : )
1. Сложные градиенты
Сложные градиенты позволяют оставить дизайнерам поле для творчества, а пользователям сайтов и интерфейсов – легче считывать информацию и буквально погружаться в контент страницы. Вы можете использовать фоновые видео с градиентами, комбинировать градиенты с плоскими или объемными элементами, или с крупной типографикой.
Высшим пилотажем будет, если вы позволите градиенту взаимодействовать с посетителем сайта: по клику или движению мыши, во время прокрутки страницы.
2. Дизайн «без дизайна»
Универсальное решение для тех, кто использует конструкторы сайтов или хочет самостоятельно создать эффектный сайт без навыков создания сложной графики. Однако, это не значит, что можно обойтись без правил композиции и чувства стиля ; )
В таком приеме важно соблюдать несколько правил: хорошо подобранные шрифты, воздух между элементами, игру контрастов (например, можно в качестве элементов дизайна использовать GIF-изображения в едином стиле, когда все остальное пространство – однородный фон и текстовое наполнение). Используйте крупные заголовки, один шрифт, контрастные цвета и минималистичную графику. Таким образом вы сможете сделать акцент на содержании. Но в таком проекте нельзя экономить на копирайтинге — текст выйдет на первый план.
К этому же тренды можно отнести прогрессивный минимализм или моноколорные решения.
3. Контрастные line-иллюстрации
Этот тренд перекликается с предыдущим пунктом, но здесь упор, все же, больше на иллюстрации: контрастные, с тонкими контурами. Дополняете такие изображения крупными заголовками и все, вы – прекрасны! Вообще, воздух и легкость, простота и лаконичность это то, что объединяет все тенденции, о которых мы сегодня рассказываем. Когда мы делаем лендинги, заказываем иллюстрации на фриланс-биржах, подбираем подходящие на стоках или рисуем сами (наши дизайнеры занимаются еще и иллюстрацией).
Для простых решений есть сервисы с бесплатными иллюстрациями, например, https://storyset. com/.
Hand drawn
Еще одно веяние – простые, нарисованные от руки иллюстрации (иногда на грани с детским рисунком), но с умелым взглядом профессионала. Такой подход делает сайт на 100% уникальным. А еще открывает возможность проявить собственный креатив на максимум. Владельцы бизнеса, которые любят участвовать в разработке и имеют под рукой iPad, смогут легко воплотить в жизнь даже самые смелые идеи и отправить свои иллюстрации разработчикам.
5. Ну очень крупная навигация
Типографика и навигация с каждым годом становятся все крупнее и крупнее, чтобы выделить главные смыслы и подчеркнуть акценты. И вряд ли этот тренд когда-то устареет, настолько он функционален.
Огромные буквы используются для создания кричащих и коротких заголовков, удержания внимания пользователя и облегчения навигации между разделами.
6. Метавселенная и аватары
Кому как, а новая реальность пришла к нам со всех сторон. С запуском метавселенной от бывшего Facebook (и еще с анонса animoji от Apple) появились и новые тенденции в дизайне. Например – использование аватаров вместо ваших фотографий на сайте, ключевые 3D-элементы в сочетании с кислотными цветами, техно-сетками и контрастными градиентами. Сюда же можно отнести прием, где роль графики выполняют только emoji.
7. Поведенческий дизайн
Behavior Design — тенденция на стыке дизайна + исследований поведения человека. Задача — вовлечь аудиторию, заинтересовать или вознаградить за определенные действия. Элементы поведенческого дизайна пришли к нам из приложений для фитнеса, которые постоянно отслеживают твой прогресс. Этот же прием используется, например, на сайте отелей, когда мы видим метку «этот отель сегодня забронировало 5 человек»7. Поведенческий дизайн
8. Возвращение арт-деко
Стиль ар-деко или арт-деко (от французского art déco, дословно «декоративное искусство») — влиятельное течение в интерьере, архитектуре и декоративном искусстве, впервые появившееся во Франции в 1920-х годах. Помним, что мода циклична и прямо сейчас арт-деко снова завоевывает мир, но уже в новом, обновленном формате. Арт-деко в веб-дизайне — это винтажная крупная типографика, правильные геометрические фигуры, журнальная верстка, золото. В общем, гламур и глянец в стиле «Великого Гэтсби».
Такая стилистика отлично вписывается в модные проекты, связанные с искусством.
9. Анимация + контент = ❤
Спрос на сложную продуктовую анимацию появился еще год назад, но есть уверенное подозрение, что этот тренд будет набирать обороты еще минимум год-два. Анимация ради анимации больше никому не интересна. Используйте ее для усиления смыслов, вовлечения посетителей или для эффектного вывода продукта на главную страницу вашего сайта. Сейчас многие no-code конструкторы предлагают решения для создания таких анимаций за пару-тройку часов. Превращайте посещение сайта из унылого скроллинга в увлекательное путешествие!
10. Монохромный дизайн
Цветовым минимализмом удивить сложyо, а вот моноколор в ближайшим будущем может стать новым модным трендом. Зачем выбирать 2-3 цвета, когда можно один? 👌 На самом деле, монохром очень интересная штука. Во первых – мы не перегружаем голову пользователя обработкой цветов, во вторых – остается пространство для творчества в шрифтах и элементах, которые смогут поддержать и усилить смысловую нагрузку цвета.
Заключение
Тренды и модные тенденции в веб-дизайн не приходят из ниоткуда. Если вы хотите быть на шаг впереди остальных – следите за мировыми трендами в разных областях: одежда, культура потребления, еда, интерьер, архитектура, искусство, технологии, и вы обязательно найдете там подсказки. Надеемся, что эта подборка сумела вас вдохновить и была вам полезна!
А если вы хотите сделать сайт и ищите, у кого заказать модный лендинг, обращайтесь.
Основные тренды веб дизайна 2023 — узнай первым!
От качества дизайна зависит успех всего сайта. Поэтому очень важно следить за трендом, понимать какие инструменты вошли в моду в сфере сайтостроения, а какие уже считаются устаревшими и остаются позади. К слову, тренды в веб-дизайне постоянно меняются, совершенствуются, модернизируются. То, что было актуально в 2021-2022 годах сбавляет свои обороты, уступая совершенно новым фишкам. И вам, как дизайнеру или современному предпринимателю, необходимо знать о них, чтобы результат разработки сайтов был не просто эффективным, а создавал правильное впечатление о компании, которой принадлежит веб-ресурс.
Поверьте, если вы будете следовать тренду веб-дизайна, ваша целевая аудитория обязательно по заслугам это оценит, конвертируясь из посетителя в постоянного клиента. А мы в этом с радостью вам поможем. В этой статье мы расскажем какие тенденции веб дизайна 2023 году становятся актуальными, а о каких следует уже забыть.
Тенденции дизайна сайтов 2023 — примеры и описание ключевых элементов
В первую очередь, тенденции в дизайне коснулись мобильных гаджетов. Только в прошлом году частота просмотров сайтов с помощью мобильных устройств превзошла использование ноутбуков и компьютеров. Логично, что дизайн адаптивной версии сайта должен соответствовать этому. Еще совсем недавно внешний вид адаптивной версии ресурса был ограничен — отсутствовали яркие элементы, которые добавляли вес страницам, различные полноформатные баннеры и триггеры из-за ограниченного размера дисплеев. Сегодня же, когда смартфоны и планшеты стали высокоинтеллектуальными, когда система распознает запрос голосом и появились голосовые боты, а производительность гаджета и размер диагонали его экрана позволяет включать в дизайн сайта абсолютно любые инструменты, для разработчиков появилось больше возможностей.
Это и повлияло на тренды web дизайна 2023 году.
Теперь перейдем, непосредственно, к визуальным элементам и стилям, которые набирают популярность и уже в следующем году будут в тренде.
Сторителлинг
Понятие сторителлинга пришло к нам с запада и надежно закрепилось в одном из направлении контента. Сегодня очень часто можно встретить сторителлинги в социальных сетях, которые убеждают читателя приобрести какой-нибудь товар или услугу, ссылаясь на историю о том, как он помог автору. Но несколько лет назад принцип сторителлинга закрепился в веб-дизайне, показав высокие результаты.
С помощью визуально оформленной истории, которая рассказывается посетителю, можно длительно удерживать его внимание, мотивируя к дальнейшим действиям: посмотреть сайт, узнать больше о компании, ее товарах или услугах.
Сторителлинг может выступать в виде видео, гиф-анимации или же разделен поблочно и размещен по всей длине странице. Это особенно удобно, если это длинная главная страница или посадочная.
Больше пространства
Тренд на большое белое пространства появился относительно недавно — в 2016-2017 годах. Однако он надежно осел в веб-дизайне благодаря своей способности концентрировать внимание на главном предложении.
Большое белое пространство визуально увеличивает экран, не позволяет пользователю потерять концентрацию. К тому же, этот цвет сочетается со всеми другими, поэтому в качестве акцентов или дизайнерских идей можно выбирать совершенно любые оттенки. И они будут смотреться просто замечательно.
Отзывчивые логотипы
Свежий тренд, который отныне будет всегда актуален. Адаптивные логотипы, которые в зависимости от размера экрана мобильного девайса могут автоматически подстраиваться под него, одним махом сразу смогут выполнить две функции: компания сохранит свой бренд перед целевой аудиторией независимо от его мобильного устройства и поисковая система при анализе мобильной версии сайта оценит поведенческий фактор, улучшив позиции ресурса в поисковой выдаче.
Студийные минималистические фото
Попробуйте яркие и многоэлементные фотографии на своем сайте заменить на высококачественные снимки, где изображен всего один элемент, отображающий идею и концепцию компании. Это сфокусирует внимание посетителя и не позволит ему отвлечься.
Сегодня такие снимки в тренде. И благодаря своему эффекту еще долго останутся в нем.
Кричащие цвета
Никто и никогда не сможет вам запретить использование ярких цветов в дизайне своего сайта, если они подчеркивают общую идею. Цвета передают эмоции, а эмоции — самое главное для пользователя. При виде сочных и кричащих цветов, правильно подобранных друг к другу, ваша целевая аудитория оценит по достоинству вашу смелость, оставшись на сайте и продолжив его пользование.
Тренды в веб-дизайне — динамичная структура. То, что еще вчера было модно и актуально, уже завтра может стать пройденным этапом, “прошлым веком”. Но мы привели примеры элементов дизайна, с помощью которых всегда удастся держаться на плаву, позиционируя свою компанию современной и успешной.
Нестандартное расположение блоков
Классический способ расположения блоков уже считается устаревшим. Нет, он не теряет своей эффективности, но благодаря новым методам преподнесения информации можно значительно ее повысить. Попробуйте структурировать информацию по методу ломаной сетки, хаотично разместив блоки по всей странице. Такое решение создает новый виток с точки зрения эстетики — он подогревает интерес пользователя и позволяет не выходить за рамки фирменного стиля даже узконаправленной компании.
Однако для использования данного способа размещения блоков необходимо очень тщательно продумать структуру сайта. Не забывайте, что мы читаем слева-направо, следовательно, вся самая важная информация должна быть с левой стороны.
Полноэкранное видео
Хотя инфоконтент позволяет максимально раскрыть компанию, ее конкурентные преимущества и услуги, полноэкранные видео могут справиться с этим не хуже. Во-первых, фоновые видео делают дизайн сайта необычным, современным, что увеличивает вовлеченность посетителя и приводит проект к большей эффективности.
Во-вторых, видео могут стать не худшей историей о компании. При этом пользователю не нужно скроллить страницу вниз, чтобы найти интересующую его информацию.
На самом деле фишка с полноформатными видео в качестве основного фона появилась уже давно. Она успела побывать на вершине популярности и уйти, как ненужный элемент, из-за невозможности поддержки мобильными устройствами и большого веса, что приводило к снижению скорости загрузки сайта. Но производительность гаджетов и технические возможности оптимизации вновь вернули видео в качестве основного фона в строй. А это значит, что они могут снова занять лидирующие позиции в разработке дизайна в 2023 году.
Кстати, видео может стать отличным дополнением к плоскому дизайну. Используйте его в качестве заставки и оно дополнит дизайн крутой имиджевой фишкой.
Геометрические формы и узоры
Эта тенденция относительно свежая. Она зародилась в 2016 году, получила развитие в 17-ом и продолжит набирать обороты популярности в 2023.
Смешивание различных геометрических форм может дать отличные результаты. Правильный подбор узоров и форм помогут создать целостную и привлекательную композицию, которая очень высоко ценится веб-пользователем. И, несмотря на то, что технология 2D постепенно сдает свои позиции, уступая 3D, подобные приемы могут значительно освежить концепцию дизайна, сделав его современным и очень интересным.
Синемаграфы: свежие тренды web дизайна 2023
Синемаграфы — вовсе не гифки, которые максимально заполонили Интернет. Нет, это современные статичные иллюстрации с частичной анимацией. Синемаграфы достаточно новое и свежее решение, которое обязательно следует задействовать при разработке трендового дизайна сайта. Судите сами, насколько они добавляют пикантность внешнему виду веб-страницы, раскрывая цель сайта и суть самого предложения, которое несет в себе проект.
Гиф-изображения (анимация)
Если синемаграфы — новинка в области дизайнинга, то анимация — это классика.
А классика, как известно, никогда не выходит из моды. Гифки максимально захватывают внимание и позволяют без длинный красноречивых описаний дать понять пользователю что ему предлагает компания, на сайте которой он находится.
Сочная графика и изображения
Привычным и стандартным фотографиям на сайте становится тесно. Изощренному потребителю нужно что-то новое, интересное, необычное и неординарное. На помощь приходит графика. Да не простая, а ультраяркая, пестрая, создающая акцент на себе. Оцените сами, как такая графика привлекает внимание и мотивирует посетителя к дальнейшим действиям — просмотреть весь сайт, чтобы убедиться в его настоящей крутости.
Если же яркая графика не смежна с тематикой сайта, то выручат фотографии или изображения. Но и они должны быть сочными и качественными.
Кстати, отличным решением станет задействовать полноформатную фотографию в качестве основного фона. В целом, этот прием больше актуален для лендингов, но вас никто не ограничивает.
Будьте уверены, подобное решение отлично впишется в сайт-визитку или промо.
3D-изображения
Дизайн с 3D-изображениями априори считается модным. Трехмерные технологии используются повсюду и активно воздействуют на стили веб дизайна 2023 году. А, учитывая, тенденции дополненной и виртуальной реальности, 3Д-графика обязательно получит еще больший толчок в будущем году.
Цвета в веб дизайне 2023
Хотите выделиться среди своих конкурентов? Яркие цвета сайта вам в помощь! Они значительно «удорожат» внешний вид сайта при использовании плоского дизайна. Для удобства выбора трендовых расцветок, можно воспользоваться палитрой Google.
Градиент
Не слишком новое, но все еще актуальное решение с точки зрения колористики для веб-дизайна сайта — использование градиентного перехода цветов. Достаточно простой инструмент, который дает прекрасный результат. Фон страницы, выполненный в градиенте, создает впечатление свежести и уникальности.
Уникальные шрифты
Согласитесь, было бы не совсем уместно разработать уникальный, интересный, продающий и яркий дизайн, и задействовать привычные шрифты, значительно ухудшив внешний вид сайта. Шрифты очень влияют на восприятие информации, и могут, как привлечь внимание читателя к сайту, так и заставить его закрыть вкладку. Кстати, применение уникальных шрифтов «вытянет» общий вид страницы, если ее дизайн будет достаточно скромным.
Полупрозрачные кнопки
Веб дизайн в 2023 году уходит в минимализм. Об этом свидетельствует и большое количество белого фона, и применение достаточно распространенных цветовых комбинаций: черного и белого, белого и серого. Поэтому свежим решением в следующем году станет использование полупрозрачных кнопок. Такие кнопки так же, как и непрозрачные, отлично выполняют свою функцию лидогенерации, но при этом смотрятся очень оригинально и не перегружают сайт.
Параллакс-эффект
Эффект параллакса ранее, практически, не использовался в оформлении веб-ресурсов.
Но в эпоху прогрессивности, когда технологии VR уже начали вовсю проявлять свои возможности, не использовать параллакс на сайте сравнимо с преступлением. Ведь такая фишка, как перемещение заднего фона и основных элементов с различной скоростью станет настоящей находкой для ультрамодных дизайнов сайтов. Будьте уверены, каждый посетитель обратит на это внимание и сочтет этот эффект за очень крутую имиджевую составляющую ресурса.
А ваш сайт готов к 2023 году?
Устаревший веб-дизайн сайта может значительно снизить его конверсию. Множество тяжелых элементов, сумбурное их расположение на странице, несоответствие цветов между собой, типовые и шаблонные решения отвлекают посетителя от конверсионной цели и снижают эффективность вашего бизнеса. Мы рекомендуем произвести редизайн сайта, задействовав модные тенденции, которые будут актуальны в следующем году. Ну, а если у вас еще нет сайта и вы только планируете им обзавестись, разработка сайта в нашей веб-студии поможет вам выйти в тренд, получив постоянный поток целевого трафика.
Автор — Игорь Кобылянский
Основатель студии
Антиспам поле. Его необходимо скрыть через css
Ваша оценка:
Ярослав Пенцарский
3. Коммуникационный сайт SharePoint для технологической отрасли
Быстро растущей рабочей силе требуются инструменты, которые помогут новым сотрудникам узнать друг друга и компанию.
Вот пример дизайна веб-сайта SharePoint, созданного с учетом этого:
Чем хорош этот шаблон?
- Он сразу привлекает ваше внимание, занимая верхнюю часть страницы.
- Все сотрудники получают свежее видеообъявление от генерального директора в начале страницы.
- Соответствующие приложения доступны сразу под заголовком.
- Информационная панель производительности позволяет всем сотрудникам быть в курсе того, как компания растет и оказывает влияние.
- Индивидуальные корпоративные цвета и тема сохраняют фирменный дизайн.
- Еженедельный опрос помогает сотрудникам и менеджерам оставаться на связи в быстро меняющейся среде.
Дизайн SharePoint для отдела компании
6. Сайт адаптации сотрудников SharePoint для быстрорастущей компании 7. Дизайн веб-сайтов SharePoint для промышленности (включая аэрокосмическую, оборонную, биотехнологическую)
Крупные промышленные организации производят продукты, на просмотр которых могут уйти годы, и в них участвуют тысячи сотрудников, многие из которых работают в производственных цехах.
Чтобы все были вовлечены и были в курсе, коммуникации должны быть сосредоточены на совместной миссии и долгосрочном воздействии, объединяя при этом разных сотрудников.
Ниже приведен пример хорошо сделанного коммуникационного сайта для промышленной организации:
Чем хорош этот шаблон?
- Создает импульс вокруг влияния и миссии компании, включая запуск нового продукта, рассказы сотрудников и информацию о компании в новостях. Часто промышленным продуктам требуются годы, чтобы запустить или показать результаты, и обмен информацией с сотрудниками помогает поднять моральный дух и энтузиазм по поводу совместной миссии.
- Привлекательная карусель новостей поддерживает изображения и видео, таргетинг на аудиторию и сегментацию.
- На странице представлены новости, доступные в различных форматах, включая мультимедийные.
- Отлично смотрится на больших экранах и киосках, чтобы держать сотрудников в курсе событий.
- Пользовательские корпоративные цвета и тема применяются в минималистичном и чистом макете.
- Сотрудники получают легкий доступ к приложениям и закладкам, а также к ресурсам сотрудников (формы, шаблоны и часто задаваемые вопросы).
- Инструменты вовлечения сотрудников помогают стимулировать взаимодействие и сотрудничество, в том числе сообщения о внутренней вовлеченности и социальная лента, чтобы информировать сотрудников о последних новостях отрасли.
Уроки для наилучших результатов внедрения в интрасети
Риск плохого взаимодействия с пользователем может не давать менеджерам спать по ночам, потому что это часто угрожает внедрению в интрасети и заинтересованным сторонам, но несколько корректировок и усовершенствований дизайна могут способствовать лучшему всестороннему опыту.
Современный дизайн веб-сайта SharePoint и настраиваемый внешний вид входят в тройку наиболее важных функций при создании интрасети. Визуальный и звуковой дизайн сотрудников на всех уровнях:
Упрощает и ускоряет утверждение
Достигает консенсуса с другими менеджерами (HR, внутренние коммуникации и ИТ)
Повышает вовлеченность и принятие сотрудников
Сокращение затрат за счет сосредоточения внимания на ценных функциях
Чтобы максимизировать свой потенциал для принятия, сочетайте современный дизайн со следующими ключевыми уроками:
Не представляйте стандартные шаблоны на утверждение
Заманчиво открыть SharePoint (особенно SharePoint Online) и использовать ванильные шаблоны, чтобы собрать макет и показать его пользователям и руководителям.
Однако плохое первое впечатление может значительно снизить вашу способность правильно оценивать потребности пользователей, получать их одобрение и способствовать принятию пользователями.
Вот почему:
- Требуется больше времени, чтобы настроить ванильные шаблоны из Lookbook SharePoint, чтобы получить правильный вид. С другой стороны, макеты дешевле создавать и обновлять, потому что у вас есть возможность быстро вносить изменения без какой-либо разработки или настройки.
- Пользователи редко понимают ограничения vanilla. Они хотят видеть искусство возможного, тогда как пресный дизайн вряд ли оправдает их ожидания.
Интересно, что даже самые сложные проекты совместимы с SharePoint Online.
Наблюдайте, как пользователи взаимодействуют с проектами перед их созданием
Вы должны обновлять свои требования, основываясь на том, что нужно пользователям, а не на том, во что вас пытается втиснуть ванильный шаблон.
Мы часто видим шаблоны, в которых вся страница усеяна новостями. Это то, что хотят видеть пользователи? Во время наших семинаров по дизайну пользователи говорят нам, что новости должны быть сбалансированы с легким доступом к рабочим ресурсам и другим функциям.
Отзывы пользователей также могут помочь вам уменьшить потребность в сложных интеграциях интрасети, которые не имеют ценности. Наблюдая, как пользователи взаимодействуют с прототипом дизайна или макетом, вы можете понять, что они безразличны к сложным виджетам, которые, по вашему мнению, могут быть ценными.
Заблаговременный сбор реальных отзывов может сократить затраты на разработку и управление проектами, а также уменьшить количество технических проблем. Полезное не должно быть сложным.
Построить прототип перед полномасштабным проектом
Когда дизайн будет окончательным, рассмотрите возможность создания простого прототипа и наблюдайте, как пользователи взаимодействуют с ним. Вы можете многое узнать о дизайне, наблюдая за взаимодействием с пользователем.
Например, мы всегда тестируем навигацию по сайту и поиск в интрасети с пользователями, потому что точный поиск является одной из самых больших проблем и жалоб со стороны сотрудников.
Это простое упражнение дает полезную информацию о том, как повысить точность поиска для данного клиента на целых 70%. Это также значительно экономит на доработке и предоставляет руководителям измеримые данные об улучшениях.
Когда мы представляем дизайн, мы используем аналитику данных, чтобы увидеть, как пользователи взаимодействуют с ним, раскрывая общую эффективность дизайна сайта SharePoint и точно определяя любые улучшения, необходимые для повышения удовлетворенности пользователей и принятия.
Вот некоторые из лучших советов, которые мы обнаружили в ходе этого процесса:
Избегайте больших изображений, которые никогда не меняются, потому что пользователи научатся прокручивать их и игнорировать целые разделы вашей интрасети
Обеспечьте быстрый доступ к инструментам и ресурсам, таким как быстрые ссылки, в начале страницы
Не размещайте слишком много кнопок и призывов к действию во внутренней сети, потому что пользователи находят это чрезмерным и иногда пропускают то, что им нужно.
Избегайте чрезмерного дизайна элементов интерфейса, которые могут затруднить чтение контента.0003
Что дальше?
Если вы нашли шаблоны интрасети SharePoint в этом посте полезными и вам нужна помощь в создании шаблона для вашей компании, мы будем рады вам помочь. Наша команда экспертов может создать дизайн сайта SharePoint, который будет одинаково привлекательным и эффективным.
Поговорите с нашим экспертом →
Ярослав Пенцарский — консультант по цифровым рабочим местам в ORIGAMI. Ярослав был удостоен награды Microsoft Most Valuable Professional 8 лет подряд и является автором и издателем 4 интранет-книг.
Ярослав также часто выступает на отраслевых конференциях и мероприятиях, таких как Microsoft SharePoint Conference и Microsoft Ignite.
Метки: примеры
современных веб-сайтов: более 20 вдохновляющих примеров (2023 г.
) современный веб-сайт: более 20 вдохновляющих примеров (2023 г.)Последнее обновление 2 января 2023 г.
Написано Джухил Мендпара
Я видел, как веб-дизайнеры хвалят полностью игровые веб-сайты или веб-сайты с большим количеством сложных 3D-анимаций как «ВАУ», «следующее поколение» и «действительно современный». Они хвалят тех за искусство, технические детали и «Вау! Смотри, что возможно!» этого.
Хотя такие веб-сайты и являются «современными веб-сайтами», они не являются хорошими современными веб-сайтами. Они ставят эстетику выше функциональности; хороший веб-сайт — это всегда «в первую очередь цель и функциональность, а затем искусство». оптимально размещать CTA, иметь удобную навигацию, поддерживать четкую иерархию, поддерживать правильные цветовые схемы, поддерживать индексацию страниц для SEO, демонстрировать отличный текст / историю и т. д. как на настольных, так и на мобильных устройствах.
Вы можете увидеть оба этих современных веб-сайта:
Сделано с Квадратное пространство
Вдохновленный и расположенный в Канзас-Сити бар Jones Bar-B-Q славится своими восхитительными вкусами. Ресторан начал свою работу еще в 1970 и с тех пор расширилась до производства соусов, которые можно купить в Интернете из любой точки мира.
Для веб-сайта они выбрали красную цветовую палитру, которая мгновенно создает у посетителей впечатление чего-то горячего или захватывающего.
С иерархической точки зрения первое, что заметит любой, — это изображение свежеприготовленного острого соуса. Затем они прочитают большой и жирный текст — СОУС, СДЕЛАННЫЙ С ЛЮБОВЬЮ В КАНЗАС-СИТИ — который намекает на историю соуса, которая разворачивается с текстом и великолепными картинками, когда посетитель прокручивает страницу вниз_._ Наконец, есть четкая панель навигации и выделенный призыв к действию.
Отличный пример современного сайта!
Сделано с Квадратное пространство
Бенджамин — фотограф, делающий удивительные снимки суровых условий, от одного взгляда на которые у вас похолодеет.
Его работа часто завершается в Исландии; вы можете найти изображения красивых пейзажей и животных, которые живут в дикой природе.
Если вы посетите его веб-сайт, вы сразу заметите, что его фотография является героем веб-сайта. На главной странице нет ничего, кроме полноразмерных фотографий, на которые он кликнул. Кроме того, есть только небольшая панель навигации, которая приведет вас к другим важным страницам.
Сделано с Квадратное пространство
Minna — компания по производству органического чая, продающая много разных вкусов чая в отдельных банках или в различных упаковках. Их чаи не содержат чрезмерного количества сахара, который вы найдете в большинстве чаев, но при этом имеют легкий и вкусный вкус.
Полноразмерное изображение заголовка, белое пространство на главной странице, эффект параллаксной прокрутки CSS и соответствующие цветные разделы — все это примеры современных тенденций веб-дизайна. Кроме того, мелкие детали, такие как добавление фактов о пищевой ценности и соответствующих сертификатов рядом с CTA «Заказ онлайн», повышают доверие посетителей к бренду.
Одна небольшая ошибка, которую следует избегать : Текст навигации недостаточно контрастирует с фоновым изображением, поэтому посетители с трудом увидят ссылку «Магазин чая».
Сделано с Квадратное пространство
Эйвери Кокс живет в Техасе, где она добавляет уникальный красочный и смелый стиль в дизайн помещений, которые она проектирует. Она приобрела опыт работы в Нью-Йорке с известными дизайнерами, что позволило ей применить полученные знания и применить их в своем бизнесе.
Красочное изображение красиво оформленной гостиной прямо наверху сразу привлекает внимание посетителей. Когда вы прокручиваете вниз, вы видите текст, который может быть лучше с точки зрения размера шрифта и иерархии, но в этом нет ничего важного. Ниже она добавила множество изображений своих работ по дизайну интерьера, что отлично подходит для лидов и конверсий.
Сделано с WordPress
CAS — международная некоммерческая организация, созданная для развития клеточного сельского хозяйства.
Они стремятся научно выращивать продукты животного происхождения для людей, чтобы исключить убой животных.
Их веб-сайт загружен необходимой информацией и интерактивными анимациями, но ничто не кажется неуместным. Посетители могут узнать все о проекте, прокручивая страницу сверху вниз. И есть немного другая, чем обычно, но простая навигация.
Сделано с Shopify
Dropps продает экологически чистые моющие средства, смягчители, кухонные полотенца и другие товары для стирки и кухни через свой магазин Shopify.
Их веб-сайт следует шаблону типичного современного веб-сайта: полноразмерное изображение в заголовке, хороший текст, удобная навигация, УТП, упомянутые прямо вверху, и минимальные и соответствующие анимации. Что мне особенно понравилось, так это их главный образ — сам образ многое говорит об их продуктах.
Сделано с Веб-поток
Мак и Пуя — свадебные фотографы. И дизайн их сайта такой же красивый, как и их фотографии.
Здесь много цветов, микро-анимаций, звуков, фотографий и деталей, но ничто на сайте не кажется ошеломляющим. Выбор шрифта, выбор значков и общий выбор дизайна идеально подходят для современного сайта портфолио фотографии.
Сделано с Wix
Джош из района залива, но много лет путешествовал, делясь своими талантами в музыке, танцах и актерском мастерстве. Вы можете найти музыку на его веб-сайте и ссылки на его канал YouTube на веб-сайте.
Джош хорошо распределил все по категориям и добавил релевантные высококачественные фотографии и портфолио для каждой категории, что поможет потенциальным клиентам перейти непосредственно к тому, что они ищут.
Сделано с WordPress
Sasaki работает уже более 65 лет и продолжает расти. Их стиль дизайна сочетает в себе множество различных взглядов, чтобы создать прогрессивную концепцию дизайна с устойчивостью на вершине.
Домашняя страница Sasaki имеет отличную анимацию, множество социальных доказательств и ссылки на все категории их работ.
Посетители могут узнать о любом из проектов Сасаки в пару кликов. Кроме того, мелкие детали, такие как изображения, слегка увеличивающиеся при наведении курсора, улучшают взаимодействие с пользователем.
Сделано с Квадратное пространство
Девон — гуру дизайна веб-сайтов Squarespace. Если вам нужен впечатляющий веб-сайт, это ваш парень. Кроме того, он проводит обучение в этих отделах и дополнительные плагины, которые также могут понадобиться.
Очевидно, он реализовал все современные принципы веб-дизайна для этого сайта. В качестве доказательства обратите внимание на высококачественное фоновое видео, иерархию шрифтов и использование анимации.
Сделано с Квадратное пространство
Возможно, вы видели Лин-Мануал Миранду в бродвейском шоу «Гамильтон». Он также является создателем этой пьесы и получил массу наград, в том числе «Грэмми», «Тони» и «Эмми».
Его личный веб-сайт демонстрирует, кто он есть, просто, но блестяще.
В нем используется отличная цветовая схема, есть отличные фотографии его и его работы, и он постоянно обновляется новыми новостями о нем и ссылками на его работы, если они публикуются на платформах OTT.
Сделано с Квадратное пространство
Как вы видите на главной странице веб-сайта, Fat Choy находится в Нью-Йорке и смешивает китайские и веганские вкусы. Они предлагают обедать в ресторане, на вынос и на открытом воздухе для своей клиентской базы прямо с веб-сайта.
Прямо в центре главного раздела веб-сайта есть четкий призыв к действию, и люди могут видеть свое меню в верхней строке меню. Кроме того, они довольно хорошо используют некоторые современные элементы дизайна веб-сайтов, такие как уникальная типографика и пользовательские иллюстрации.
Сделано с Shopify
Вы можете понять эту косметическую компанию по ее названию. Супер крутые продукты по уходу за кожей, которые обретают свой цвет благодаря натуральным фруктам и насыщены другими полезными веществами, такими как зеленый чай.
Этот чистый веб-сайт D2C посвящен только одному: продажам! Первые три раздела веб-сайта посвящены продажам: 1. Главный раздел показывает лучшие предложения. 2. Ниже у них есть раздел «Самые просматриваемые», в котором представлены бестселлеры. 3. Затем у них есть призывы к действию для своих коллекций. И разделы ниже, которые создают социальное доказательство и продвигают свой бренд — то, что хорошо дополняет цель веб-сайта электронной коммерции.
Помимо сосредоточения на цели, он также следует современным элементам эстетики дизайна веб-сайта. Например, в нем используется отличный шрифт, подходящая цветовая палитра, высококачественные фотографии продуктов, панель навигации по наведению курсора и многое другое.
Сделано с Квадратное пространство
Бренд Supernatural представляет захватывающий способ творчества на кухне на основе растений. Все их порошковые продукты и рецепты яркого цвета, лучше для вас и забавны для использования на кухне!
Раздел героев без копирования и призыва к действию придает веб-сайту чистый вид.
А желтая цветовая схема соответствует цветам их упаковки, рекламы и сообщений в социальных сетях, что придает ей последовательный брендинг.
Сделано с Shopify
Feastables — бренд шоколадных батончиков, созданный MrBeast — одним из самых популярных и влиятельных ютуберов.
Целевая страница веб-сайта с полуплоским дизайном использует классическую сине-розовую цветовую схему MrBeast. Он также содержит все элементы MrBeast, разбросанные по всему веб-сайту — массовые подарки, благотворительность, изображение Джимми, также известного как MrBeast, причудливые отзывы от Чендлера и других членов команды и т. д.
Помимо полного фирменного стиля MrBeast и современного веб-дизайна, веб-сайт имеет быструю и удобную навигацию, настройки специальных возможностей, живой чат / чат-бот, кнопки социальных сетей, логическую структуру и идеально расположенные CTA.
Сделано с Квадратное пространство
Melula — линия детской одежды из Дании, специализирующаяся на обуви.
Их коллекции красочны, уникальны и призваны отражать веселье и воображение ребенка.
Минималистский веб-сайт — один из лучших простых современных веб-дизайнов, которые я когда-либо видел. Целевая страница имеет незначительное количество текста и несколько кликабельных изображений/визуального дизайна супер-высокого качества, которые направляют в их интернет-магазин. Хотя в разделе Магазин происходит сравнительно больше, он также соответствует минималистской теме веб-сайта с большим количеством пустого пространства и отсутствием видимых кнопок призыва к действию.
С точки зрения современных тенденций дизайна веб-сайтов он идеально подходит для этого примеров современного дизайна сайта список. Однако я не уверен, что веб-сайт достигает цели — продаж и конверсий — эффективно.
Сделано с Shopify
Allbirds продает мужскую, женскую и детскую очень удобную повседневную обувь. Они сделаны из натуральных материалов, таких как шерсть, и предлагают уникальный выбор стиля.
На их веб-сайте есть отличный текст, действительно хорошие изображения и естественный поток для потенциальных покупателей. Кроме того, все оптимизировано для конверсий — например, обратите внимание на панель навигации: каждая ссылка ведет на коммерческую страницу; навигация к некоммерческим страницам, таким как контактная или информационная страница, размещена в нижнем колонтитуле.
У них также есть отличный ремаркетинг в магазине: всякий раз, когда посетитель посещает страницу продукта, но не покупает продукт, ему показываются эти продукты в разделе «Посмотрите еще раз» прямо вверху главной страницы (независимо от того, зарегистрирован ли посетитель). в или нет).
Сделано с Shopify
Эта компания предлагает стильные варианты обуви как для мужчин, так и для женщин. Их цель заключалась не только в создании прочной обуви, но и в создании моделей, подходящих для многих случаев. Они идеально подходят как для работы, так и для повседневной жизни на улице.
Хотя управляемые изображения слайд-шоу в верхней части не совсем соответствуют «современным тенденциям дизайна веб-сайтов», они компенсируют это большими полноразмерными изображениями, удобным меню навигации и изящной анимацией.
Сделано с Квадратное пространство
Oishii — японская компания, выпускающая Omakase Berry. Компания гордится качеством, а не количеством выращиваемых ягод, доступных в их местах в Нью-Йорке, Лос-Анджелесе или Нью-Джерси.
На своем веб-сайте они используют быстро загружающееся высококачественное полноразмерное фоновое видео для главного раздела. Видео демонстрирует свежесть и качество ягоды, что требует от посетителя реакции: «Отлично! Я хочу чтобы!’.
Помимо видео, у них есть фантастическая копия, последовательная цветовая схема, красивые изображения и хорошо расположенные кнопки действий.
Сделано с Квадратное пространство
Алексис Джонсон — художник-самоучка из Миннесоты.
Ее иллюстрации в основном состоят из чернил, но иногда она работает и с другими материалами, такими как пастель. Она продолжает свое собственное образование, исследуя различные формы искусства с каждым новым проектом, который она завершает.
Сайт ее художественного портфолио выполнен в минималистичном стиле. На главной странице она разместила галерею своих работ — вы можете нажать на фотографии, чтобы узнать больше о произведениях. Кроме того, вы можете перейти на две страницы сайта— О и Контакты —из меню навигации.
Сделано с Квадратное пространство
Давайте завершим список Squarespace — конструктором веб-сайтов, который используют многие веб-сайты в этом списке «Вдохновение современного веб-дизайна».
Очевидно, Squarespace разбирается в веб-дизайне. И я уверен, что они изучили бы все современные идеи дизайна и оптимизации коэффициента конверсии для создания своего веб-сайта, через который они продают свою SaaS для создания веб-сайтов.
В главном разделе главной страницы есть полноэкранное изображение и GIF-файл, демонстрирующий результаты (т. е. тип веб-сайта), которые вы получите, используя их продукт. Меню навигации безупречно и оптимизировано для привлечения посетителей на страницы с высоким намерением. Под разделом героев они продемонстрировали варианты использования, функции, социальное доказательство и многое другое с отличными изображениями, бесшовной анимацией и четким текстом.
Часто задаваемые вопросы
Что такое современный веб-сайт?
Современный веб-сайт — это веб-сайт, который соответствует последним тенденциям веб-дизайна и обычно создается с использованием современных технологий.
В контексте 2023 года современный веб-сайт будет означать отзывчивый и доступный веб-сайт с полноразмерными изображениями, яркими цветами, уникальной типографикой, пользовательскими иллюстрациями, большим количеством пустого пространства и т. д. В будущем это может означать 3D.