Разработка современных web сайтов: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. В. Дронов

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

Например, The New Yorker мгновенно узнается благодаря использованию уникального шрифта Adobe Caslon Pro. В то время как более уникальные шрифты, такие как Blokletters-Balpen, начали использоваться стартапами и технологическими компаниями, такими как Zero.

Почему это полезно?

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

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

2. Большие и отзывчивые изображения героев

Вам не нужно выходить далеко за пределы популярного издательского сайта Medium.com, чтобы увидеть пример большого изображения героя:

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

Большие изображения-герои также часто размещаются на заднем плане с наложением текста и другого содержимого поверх, как на веб-сайте Uber. Независимо от используемого вами подхода, большие изображения могут помочь визуально рассказать вашу историю, не полагаясь только на текст.

Почему это полезно?

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

Тем не менее, обеспечение отзывчивости ваших изображений делает их удобными для пользователей.Посетители веб-сайта могут просматривать различные изображения — будь то фоновые изображения или изображения продуктов — и получать одинаковые впечатления независимо от того, с какого устройства они приходят.

3. Фоновое видео

Видео, которые автоматически воспроизводятся в фоновом режиме, могут многое добавить на страницу. Их можно использовать, чтобы рассказать историю и значительно сократить объем другого контента, необходимого для объяснения вашего бизнеса.

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

Это фоновое видео служит отличным способом заинтересовать посетителя перейти к основному видео.

Почему это полезно?

Фоновые видеоролики направлены на то, чтобы привлечь посетителей с момента, когда они попадают на вашу страницу. Видео позволяет вашему посетителю понять ключевые моменты вашей компании, даже не прочитав ни единой строчки текста.

Кроме того, наш мозг обрабатывает видео в 60 000 раз быстрее, чем текст. Хотя люди часто не решаются читать тяжелые блоки текста, видео выглядят легко и могут быть просмотрены очень быстро. Также помогает то, что скорость соединения увеличивается, а размеры мобильных устройств растут, что улучшает качество видео.

4. Полуплоская конструкция

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

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

Когда вы прокручиваете любой из квадратов на главной странице Uber, тень исчезает и снимает изображение позади нее.

Почему это полезно?

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

5. Меню гамбургеров

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

Скрытое меню, или гамбургер, меняет это положение. Это меню было распространено в веб-приложениях до того, как появилось в веб-дизайне — даже в Google Chrome вы можете найти гамбургер-меню с правой стороны.

Источник: движение UX

Не знаете, почему это называется гамбургер-меню?

Если вы задействуете свое воображение, три линии, которые уложены одна на другую, выглядят как котлеты для гамбургеров. Возьми?

Почему это полезно?

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

6. Гигантские изображения продуктов

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

Чтобы лучше понять, о чем мы говорим, давайте взглянем на страницу продукта для платформы веб-сайта HubSpot:

В верхней части этой страницы есть большое изображение, а по мере прокрутки страницы вниз появляются дополнительные подробные изображения продуктов. Изображения также являются адаптивными, что, как мы упоминали ранее, призвано обеспечить оптимальную работу зрителей с разных устройств.

Почему это полезно?

Увеличенные изображения продуктов помогают дизайнерам более эффективно и результативно выделять различные особенности продукта.

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

Эти большие изображения также удобны для сканирования. Они помогают посетителям получить четкое представление о функциях различных продуктов, передавая их через изображения, а не слова.

7. Дизайн карты

С развитием Pinterest дизайнеры и маркетологи увлеклись карточками.Отдельные карточки помогают визуально распределять информацию, поэтому посетители могут легко просматривать небольшие фрагменты контента, не перегружая их.

Домашняя страница Brit + Co служит отличным примером дизайна карты в действии:

Разбивая различные части содержимого на карточки, пользователи могут выбирать, какие статьи они хотят раскрыть. Это помогает сохранить ощущение чистоты и организованности домашней страницы, не полагаясь на тонны текста.

Почему это полезно?

Дизайн карточек становится все более популярным на сайтах B2B и B2C, потому что он помогает доставлять легко усваиваемые фрагменты информации пользователям.Использование этого дизайна на вашем сайте может помочь выделить несколько продуктов или решений бок о бок.

Имейте в виду, что ваши карточки должны быть отзывчивыми. Это означает, что по мере того, как размер экрана становится меньше или больше, количество и размер показываемых карточек должны соответственно адаптироваться.

8. Короткие видеоролики о продуктах или функциях

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

Яркий пример этого — от сотрудников InVision. Они демонстрируют этот короткий иллюстратор того, как легко использовать их продукт, перетаскивая дизайн прямо на их домашнюю страницу:

Почему это полезно?

Согласно журналу Inc. Magazine, 92% клиентов B2B смотрят онлайн-видео, а 43% клиентов B2B смотрят онлайн-видео при изучении продуктов и услуг для своего бизнеса. Поэтому компаниям B2B необходимо создавать видеоролики, объясняющие их продукты, поскольку они влияют на процесс принятия решений покупателем.

Эти короткие видеоролики позволят вашему потенциальному клиенту быстро понять ценность, не просматривая действительно долгий, подробный опыт. Конечно, оба имеют ценность, но более короткие видеоролики позволяют быстро понять, что лучше всего для начала воронки.

Примечание редактора: этот пост был первоначально опубликован в августе 2018 года и был обновлен для полноты.

Как создать современный веб-сайт

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

Я написал эту статью «Как создать современный веб-сайт» в хронологическом порядке. Этот процесс очень похож на то, как мы создаем веб-сайты в нашем агентстве веб-дизайна Jordan Crown.

Оглавление
Шаг 1: Создание карты сайта
Шаг 2: Начало работы над контентом
Шаг 3: Создание каркасов для ключевых экранов
Шаг 4: Придумайте общее направление стиля
Шаг 5: Создайте полноцветные мокапы для Ваши каркасы
Шаг 6: Разработка вашего веб-сайта
Шаг 7: Подготовка к запуску вашего веб-сайта
Шаг 8: Запуск — запуск вашего нового веб-сайта

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

Без промедления, приступим!

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

Тем не менее, отказ от создания карты сайта вызовет системные проблемы с вашим общим проектом.

Отсутствие карты сайта — все равно что уехать в отпуск без плана… Вы делали это раньше? Вам очень понравился отпуск?

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

Файлы Sitemap должны:

• Определите иерархию вашей страницы
  • Какие у вас страницы верхнего уровня?
  • Какие у вас страницы второго и третьего уровня?
• При необходимости добавьте полезные заметки
• Дайте вам общий обзор вашей компании в целом

Вот пример карты сайта, которую мы недавно создали для клиента:

Теперь, когда у нас создана карта сайта, пора перейти к содержанию.

Примечание. Шаги 2 и 3 очень связаны и в идеале должны выполняться параллельно.

Содержимое. Ну что сказать…

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

Если ваша тема обширна и вы пишете для широкой аудитории, писать может быть очень сложно.

Но если вы знаете, где ваше место на рынке, кто ваша аудитория, и у вас есть тема, которая вас интересует, слова просто начнут течь. Например, пока я пишу этот пост, я знаю…

• Где мы работаем на рынке . Моя компания, занимающаяся веб-дизайном, создает современные сайты на WordPress премиум-класса для небольшого числа специалистов. Мы не занимаемся какими-либо другими платформами, а занимаемся только маркетинговыми сайтами (то есть без пользовательских веб-приложений).
• Кто наша аудитория . Короче говоря, директора по маркетингу. Или другие люди, которые, по сути, работают в качестве директоров по маркетингу. Мы также знаем, что у нашего типичного клиента 15 или более сотрудников, он зарегистрирован и, скорее всего, занимается строительством, недвижимостью, консалтингом, производством или некоммерческой деятельностью. Мы работаем и с другими вертикалями, но похоже, что большинство наших клиентов попадают в эти ведра.
• Что мне нравится в . В этом случае избавьтесь от головной боли, когда дело доходит до перезапуска вашего сайта. Я не пишу на тему, о которой ничего не знаю (например, мотоциклы или зимние виды спорта), я пишу о том, что мне нравится.

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

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

Чтобы сделать этот раздел более интересным, я добавляю пару примеров скриншотов. Каждый пример взят с одного из веб-сайтов наших клиентов и нашей компании по веб-дизайну Jordan Crown.

1. Услуги или содержание продукта

Страницы услуг / продуктов легко объединяются, если у вас есть четкое представление о том, что вы предлагаете на рынке. Эти страницы сложны, если в повседневной работе с у вас еще нет ясности в отношении того, чем на самом деле занимается ваша компания.

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

2. Ваше портфолио

Первый вопрос, на который вы должны ответить, — «какие товары или услуги мы предлагаем миру?».Если вы недостаточно ответите на этот вопрос, то, по всей вероятности, посетители вашего веб-сайта уйдут и отметят вашу компанию как не имеющую отношения к ним.

Но после того, как вы внесете ясность в свое предложение, вам нужно укрепить доверие.

Для некоторых компаний их портфель состоит из первоклассных продуктов, которые сами по себе являются портфелем. Для других они захотят рассказать истории о недавних проектах, над которыми они работали (это называется тематическими исследованиями).

Сильный портфель ваших продуктов или прошлых работ даст потенциальным посетителям вашего веб-сайта что-то, что соединит с .Например, если вы строительная компания, которая много работает в области медицины, потенциальный клиент, который ознакомится с тематическим исследованием, связанным со здравоохранением, может найти вашу компанию более привлекательной. Они могут подумать: «Ну, черт возьми, если компания ABC им доверяет, я уверен, мы сможем».

Если вы хотите знать, как создать современный веб-сайт, ваше портфолио является важным компонентом. Пропустите этот контент, и вы обнаружите, что на вашем веб-сайте нет скота (нет, я не из Техаса, но мне нравится это высказывание).

3.Свидетельства и обзоры

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

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

В качестве примера вы можете увидеть наше агентство, указанное на Clutch.co. Clutch — это каталог креативного агентства. Вспомните Angie’s List, но только для творческих людей. Если вы ищете другие магазины, с которыми можно поговорить, Clutch — отличный ресурс, так как отзывы взяты из реальных телефонных интервью с прошлыми клиентами.

Вот пример с нашего сайта, где мы рекламируем наши обзоры:

4.Ведущие страницы

Не совершайте ужасную ошибку, создавая отличный контент, но не создавайте для потенциальных клиентов способ сказать: «Привет, я заинтересован в вашем продукте» или «Эй, звучит здорово, как мне получить предложение?». После того, как вы четко изложили свое предложение, рекламировали свое портфолио и обзоры , вам нужно убедиться, что ваш веб-сайт является действенным .

Создайте прочную контактную форму или запросите форму предложения. Сделайте так, чтобы клиент мог легко связаться с вами. В противном случае вы можете упустить единственную возможность связаться с ними.

5. Биографические данные

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

Помните, когда вы пишете этот контент, людей обычно не волнует ваша история по отдельности… что более важно, так это то, как ваша история будет переплетаться с решением их проблем.При написании биографических материалов убедитесь, что вы не забываете своего клиента. Включите их в свою историю.

6. Ваша домашняя страница

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

Убедитесь, что ваше предложение на главной странице очень четкое. Не заставляйте людей догадываться, что вы делаете. Повысьте доверие, разместив отзывы прямо на своей домашней странице.

7. Другие страницы

Есть ли другие страницы / типы контента, которые важны для вашего сайта? Скорее всего, конечно! Но предыдущие шесть — основополагающих.

Другое содержимое может включать:

• Информация о работе / карьере
• Блоги
• Библиотеки ресурсов
• Пожертвования страниц
• Интернет-магазинов
• Список продолжается…

Хорошо, теперь, когда мы обсудили контент, следующая важная часть перестройки веб-сайта — это каркасные модели.

Поделитесь любовью: Считаете ли вы этот ресурс полезным? Если да, могу ли я посоветовать вам поделиться им в Facebook, Twitter или Linkedin?

Наш следующий шаг в «Как создать современный веб-сайт» — это этап создания каркаса.

Каркасы похожи на чертежи дома. Вместо того, чтобы просто создавать свой веб-сайт на основе карты сайта и вашего контента, вы должны потратить много времени на создание отдельных каркасов.Помните: «Унция профилактики стоит фунта лечения». Или, что еще лучше, в нашем контексте: «Унция из при планировании стоит фунта реструктуризации».

Подумайте об этом так. Ваша карта сайта — это большая картина, а каждый каркас — это процесс увеличения ваших планов. Если вы не вкладываете необходимое время в этот процесс, вы обнаруживаете, что постоянно реагируете, вместо того чтобы получать удовольствие от проекта.

Итак, вот как выглядит каркас. Это каркас домашней страницы, который мы создали для нашего некоммерческого клиента.

Каковы основные принципы создания каркасов?

• Держите их простыми — в нашей фирме, занимающейся веб-дизайном, мы предпочитаем использовать черно-белое изображение с простыми рамками. Это помогает быстро выполнять итерации, при этом эстетика дизайна не замедляет вас.
• Используйте реальный контент, когда можете — помните, когда я сказал, что в идеале фазы контента и каркаса должны выполняться параллельно? Контент поможет оживить ваши вайрфреймы.И наоборот, вайрфреймы будут сообщать о типе контента, который вам нужен по мере продвижения.
• Оставьте место для заметок — макеты должны состоять не только из рамок и меток, но и комментарии на полях помогут вам собрать всех членов вашей команды на одной странице.
• Сначала сконцентрируйтесь на ключевых экранах — в целом, нам нравится делать как можно больше каркасов, но важно сначала сосредоточиться на ключевых экранах. Проводите больше времени за экранами, которые окажут наибольшее влияние на ваш бизнес.Для большинства проектов мы стараемся сделать 10-25 каркасов.

Помните, когда вы создаете каркас, вы сосредотачиваетесь на функции, а не на форме. Форма, то есть эстетика дизайна, придет позже. Не объединяйте их, так как они требуют разных частей вашего мозга и действительно усложняют процесс.

Вот еще пара макетов для вдохновения:

Каркас макета продукта

Каркас персонала с аннотациями

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

Создание общего стилевого направления позволит вам собрать всех участников проекта на одной странице. Это также устранит ненужные изменения, поскольку заинтересованные стороны должны требовать , чтобы подписать это общее направление, прежде чем продолжить.

Есть несколько способов придумать стиль и творческое направление для своего веб-сайта. Мы склонны использовать так называемые доски настроения. Обычно мы предлагаем 3 или 4 из них нашим клиентам, и они выбирают, с каким из них двигаться дальше. Вот пример доски настроения, которую мы недавно создали:

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

После создания веб-сайта внести изменения может быть значительно сложнее, поэтому не выполняйте этот шаг слишком рано.

Создавайте свои мокапы за несколько раундов

В нашем агентстве нам нравится работать с 2-4 экранами одновременно. У многих компаний есть несколько заинтересованных сторон, которым необходимо одобрить творческую работу, поэтому сосредоточение внимания на 2–4 экранах помогает поддерживать хороший темп.

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

Вот несколько примеров макетов — обратите внимание, что скриншоты очень маленькие. Дело не в том, чтобы вдаваться в детали, а в том, чтобы показать вам, как проработка каждой отдельной страницы придаст вам ясности. Хотите узнать, как создать современный веб-сайт? Этот шаг является ключевым.

… а вот еще один образец набора для сайдинговой компании:

Избегайте отправки мокапов в виде вложений по электронной почте — как создать современный веб-сайт

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

Как видите, все ресурсы дизайна для этого примера проекта можно найти на вкладке «Творческий указатель».

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

Если вы не знаете, как разместить свою работу в Интернете, я бы порекомендовал проверить приложение invision.

Требовать выхода команды для ключевых вех на этапе создания макета

Какие из основных наборов макетов вам понадобятся? Экраны электронной торговли? Сервисные страницы? Биографические страницы? Установите с заинтересованными сторонами четкие ожидания относительно того, что для соблюдения желаемых сроков, когда набор будет одобрен, он станет окончательным.

Работа над сайтом похожа на работу дома. Всегда есть что переделать, поэтому вы должны противостоять тенденции к перфекционизму. Не поймите меня неправильно, вы хотите очень гордиться конечным продуктом, но вы должны установить пороговые значения, иначе ваш шестимесячный график может превратиться в 2 года. Поверьте, это происходит чаще, чем вы думаете.

После того, как ваши мокапы достигнут зрелости, покупайте их среди более широкой аудитории

Дело здесь не в том, чтобы добавить шлюз мнений, который заставит вас вернуться к чертежной доске.Вместо этого вы хотите убедиться, что не пропустили ничего серьезного. Более широкая аудитория может помочь вам увидеть несколько важных вопросов, которые ваша небольшая команда могла упустить.

При большом количестве мнений недостатка во мнениях не бывает, поэтому сосредоточьтесь на обратной связи, которая имеет наибольшее отношение к общим целям вашей компании.

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

Убедитесь, что ваш разработчик знаком с выбранной вами платформой

Независимо от того, используете ли вы WordPress, Drupal или другую хорошо поддерживаемую платформу, очень важно, чтобы ваш разработчик не врезался в систему в первый раз. Если это произойдет, вы можете обнаружить, что ваш веб-сайт станет неуправляемым всего через 6–12 месяцев.

Использовать программное обеспечение для контроля версий

для управления версиями позволяет вам регистрировать свой код в базе данных кода, где вы можете легко возвращаться между версиями. Это действительно важно, поскольку обеспечивает постоянное и регулярное резервное копирование.

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

Поделись любовью: Считаете ли вы этот ресурс полезным? Если да, могу ли я посоветовать вам поделиться им в Facebook, Twitter или Linkedin?

Используйте стороннее программное обеспечение и плагины с умом

Стороннее программное обеспечение (например, плагины) может быть очень полезным способом сэкономить деньги на сложных функциях. В нашей компании по веб-разработке мы обычно рекомендуем клиентам экономно использовать плагины и только от очень уважаемых компаний. Ключевые соображения здесь:

1. Стороннее программное обеспечение и плагины иногда не очень хорошо работают вместе — вы хотите минимизировать вероятность конфликта.
Плагины
2. с хорошей репутацией увеличивают вероятность того, что компания будет рядом, чтобы оказывать поддержку.
3. Убедитесь, что выбранный вами плагин имеет большое количество активных установок — это поможет вам понять, насколько активна компания-автор со своим плагином

После того, как ваш веб-сайт будет разработан и выставлен на проверку, вам нужно убедиться, что все работает правильно.Вот контрольный список запуска веб-сайта на ваше рассмотрение.

Корректура содержимого

Стоит подумать о том, чтобы несколько человек, как внутри, так и за пределами вашей организации, читали весь ваш веб-сайт (или, по крайней мере, ваши основные страницы).

• Синтаксис — ищите орфографические и грамматические ошибки
• Голос — как звучит общий голос? Есть ли какие-то страницы, которые не соответствуют общему тону сайта?
• Неработающие ссылки — упростите свою работу, используя онлайн-средство проверки неработающих ссылок. Шашку WC3 стоит попробовать.

Оптимизация конверсии

Затем убедитесь, что вы прорабатываете оптимизацию конверсии. Вот несколько указателей:

• Формы — убедитесь, что все формы работают правильно, отправив тестовые заявки.
• Призывы к действию — многие из ваших основных макетов должны включать в себя призывы к действию, такие как «запросить бесплатное предложение» или «запросить консультацию». Убедитесь, что они на месте и что сообщает клиенту, что делать дальше.
• Установите Google Analytics , чтобы отслеживать, какие страницы получают больше всего трафика. Не откладывай это. Отсутствие данных о посетителях за несколько месяцев затруднит принятие обоснованных решений.
• Скорость сайта — как быстро загружается ваш новый сайт? У Google есть бесплатный инструмент, который оценит вашу скорость, а также предоставит рекомендации. Кроме того, вы можете подумать об установке плагина кэширования, если вы работаете внутри WordPress.
• Рассмотрите CRM — если ваш веб-сайт будет генерировать потенциальных клиентов, за которыми вам нужно будет следить, подумайте об установке CRM, чтобы поддерживать свою организованность.

Поисковые системы

• Внутренние ссылки — одна простая идея, которую вы можете сделать, чтобы повысить удобство вашего сайта для поисковых систем, — это связать страницы вместе. Лично мне нравится делать ссылки на страницы связанных служб, когда я веду блог. Вы также можете сделать обратное и ссылаться на соответствующие блоги в своих услугах / продуктах.
• Мета-заголовки и описания — они очень важны для увеличения вашего рейтинга кликов в поисковых системах и на сайтах социальных сетей. Для простоты настройки рассмотрите возможность использования бесплатного плагина SEO, такого как Yoast.
• Карта сайта XML — убедитесь, что у вас есть готовые xml-файлы карты сайта. Этот файл поможет Google и другим поисковым системам легче перемещаться по вашему сайту. Если вы используете WordPress для своего веб-сайта, вам не составит труда найти бесплатный плагин, который поможет вам в этом.
• Установите сертификат SSL — сертификаты SSL делают ваш сайт более безопасным, и Google также указал, что безопасность сайта включена в их алгоритмы ранжирования.
• Создайте переадресацию 301 — если структура вашего URL-адреса меняется для вашего нового веб-сайта (совет: в большинстве случаев это так), вам необходимо создать переадресацию 301. Это гарантирует, что если посетитель пытается просмотреть страницу, которая больше не существует, он будет перенаправлен на соответствующую страницу вашего нового веб-сайта.

Прочие соображения

• Мобильное тестирование — Попробуйте загрузить свой веб-сайт на нескольких устройствах — Android, iPhone, планшетах и ​​т. Д. Как он работает? Если вы обнаружите какие-либо проблемы, обязательно ведите текущий список для своего веб-разработчика.
• Получите обратную связь извне — перед тем, как нажать кнопку запуска, рассмотрите возможность получения дополнительных отзывов извне. Возможные люди могут включать семью, клиентов, торговых партнеров или даже дружественных конкурентов.

Выберите хостинг-провайдера

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

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

Что ж, после уймы кропотливой работы сайт готов к запуску. Вот несколько последних шагов при запуске нового веб-сайта.

Резервное копирование вашего старого веб-сайта

Прежде чем двигаться дальше и отказаться от своего старого устаревшего веб-сайта, обязательно сделайте резервную копию. Зачем? На ум приходят две причины: 1) у вас может быть ценный контент на старом веб-сайте, который позже вы решите восстановить, или 2) у вас могут возникнуть вопросы относительно старого сайта, и наличие резервной копии поможет вам найти ответы.

Еще одна идея, которую стоит изучить, — оставить ваш старый веб-сайт на другом домене в течение 6–12 месяцев. Вы можете сделать что-нибудь вроде old.yourdomain.com. Если вы выберете этот маршрут, обязательно защитите старый сайт паролем, чтобы поисковые системы не отправляли на него трафик. После того, как вы уверены в новом веб-сайте, вы можете навсегда удалить старый.

Обновите записи DNS и проведите дополнительное тестирование

После создания резервной копии поговорите со своим веб-разработчиком об обновлении записей DNS. Обычно требуется от пары часов до дня, чтобы ваше доменное имя начало показывать новый веб-сайт. Следите за происходящим, так как вы захотите провести дополнительное тестирование, когда оно появится:

• Переход по клику — Просматривайте каждую страницу веб-сайта, чтобы убедиться в правильности ее форматирования
• Мобильный — Провести дополнительное мобильное тестирование
• Формы — Убедитесь, что все формы работают правильно
• Обнаружение при поиске — Если вы используете WordPress, не забудьте настроить параметры, чтобы поисковые системы могли индексировать веб-сайт.
• Перенаправления 301 — Проверьте свои перенаправления 301, введя старые URL-адреса со своего старого веб-сайта.Убедитесь, что они ведут на соответствующие страницы нового веб-сайта
.
• SSL Cert — Если вы решили установить SSL-сертификат для HTTP S , убедитесь, что вы видите уведомление о безопасной блокировке в своем браузере при посещении своего веб-сайта
• Analytics — Убедитесь, что ваша аналитика настроена и отслеживается правильно

Поддерживайте актуальность программного обеспечения

После запуска вашего веб-сайта очень важно поддерживать его программное обеспечение в актуальном состоянии. Наша фирма по веб-разработке специализируется исключительно на WordPress. Для наших клиентов важно, чтобы они регулярно обновляли свои плагины и основное программное обеспечение WordPress. Вот несколько причин, по которым важно обновлять программное обеспечение:

• Проблемы с уязвимостями — Каждый раз, когда в популярном программном обеспечении обнаруживается уязвимость или слабое место, компания-разработчик программного обеспечения обычно незамедлительно вносит исправление для устранения проблемы. Но, к сожалению, очень часто хакеры публикуют уязвимость в Интернете, чтобы другие хакеры могли ею воспользоваться.Если на вашем веб-сайте установлено старое программное обеспечение, вы в значительной степени сидячая утка. Дайте ему время, и вы можете столкнуться с кризисом веб-сайта.
• Функции программного обеспечения — Помимо обеспечения безопасности вашего веб-сайта, вы захотите регулярно обновлять программное обеспечение, чтобы получать все новые и полезные функции вашей CMS и ваших плагинов.

Предупреждение : Каждый раз при обновлении программного обеспечения веб-сайта убедитесь, что вы сначала делаете резервную копию своего веб-сайта.Иногда обновление ядра или подключаемого модуля может вызвать проблемы, и вы хотите избежать сценария точки невозврата .

Заключение

Что ж, я хотел бы поблагодарить вас за то, что вы приложили все усилия и прочитали весь этот пост о том, как создать современный веб-сайт — мне, конечно, понравилось писать его! У вас есть вопросы? Напечатайте их в разделе комментариев ниже — я буду рад помочь!

Поделитесь любовью: Если вы нашли этот ресурс полезным, могу ли я предложить вам поделиться им на Facebook, Twitter или Linkedin?

Современный дизайн веб-сайтов • 10 лучших примеров и советов по созданию современного веб-сайта

Важность дизайна веб-сайта неоспорима — 75% мнения пользователей о веб-сайте и, следовательно, деловое доверие основывается именно на дизайне сайта. Кроме того, для появления этих суждений требуется всего 3,42 секунды! Вот почему так важно уделять внимание дизайну веб-сайта — если он не впечатлит ваших пользователей, с первого взгляда, ваш бизнес может просто потерпеть неудачу.

В этой статье мы познакомим вас с главными тенденциями веб-дизайна 2021 года, продемонстрируем лучшие примеры современного веб-дизайна и поделимся полезными советами по веб-дизайну, которые помогут вашему бренду выделиться среди конкурентов.

2021 Тенденции современного веб-дизайна

Хотите узнать, что привлекает современных клиентов и посетителей Интернета? Без лишних слов, давайте взглянем на самые невероятные тенденции веб-дизайна 2021 года.

1. Пустое пространство

Белое пространство стало трендом с тех пор, как веб-дизайнеры начали удивительно экспериментировать с ним в дизайне. Тенденция белого пространства продвигает философию простоты, которая ставит пустоту на первый план и подчеркивает важность минимализма внутри. На изображении ниже вы можете увидеть, как Fireart Studio использовала пустое пространство в веб-дизайне.

2. Полностраничные заголовки

Полностраничный дизайн заголовка стал одной из самых удивительных тенденций веб-дизайна в 2021 году.Дизайнеры UI / UX могут создавать различные версии заголовков, но наиболее распространенная настройка включает в себя ключевой текст или кнопки CTA слева от заголовка с визуально приятными картинками справа. Вы можете спросить, почему? Это потому, что пользователи обычно концентрируют внимание на верхнем левом углу веб-страницы.

3. Игривые курсоры

Игровые курсоры — это следующая одна из самых захватывающих тенденций веб-дизайна. Благодаря потрясающим визуальным эффектам и анимации игровые курсоры позволяют создавать совершенно новый, более захватывающий и динамичный опыт.Обычно это выглядит как бегунок мыши, который меняет свою форму и цвет или даже запускает анимацию при наведении курсора на некоторые объекты в пользовательском веб-интерфейсе. Эта тенденция может подарить вашим пользователям незабываемые впечатления от вашего сайта.

4. Динамическая прокрутка

Если вы хотите, чтобы ваш сайт выглядел действительно интерактивным и «живым», динамическая прокрутка — это то, что может помочь вам успешно реализовать его. Это одна из самых популярных тенденций веб-дизайна, которая появится в 2021 году. Эта тактика подразумевает применение разных скоростей прокрутки для переднего и заднего плана вашего веб-сайта, чтобы создать впечатляющий трехмерный эффект для посетителей.Здесь вы можете увидеть еще один отличный пример динамической прокрутки, созданный Fireart.

5. Пользовательские иллюстрации

Пользовательские иллюстрации — это то, что может помочь вам раскрыть индивидуальность вашего бренда в веб-дизайне. Они вызывают эмоции, создают впечатления и позволяют установить личную связь между брендом и посетителями сети. От банковского дела и здравоохранения до розничной торговли и разработки программного обеспечения, многие бренды из разных отраслей создают фирменный стиль иллюстраций и используют индивидуальные иллюстрации в дизайне веб-сайтов, чтобы выделиться среди сотен конкурентов.Проверьте, насколько гармонично иллюстрации могут дополнить ваш бизнес в Интернете, на примере дизайна веб-сайта, созданном Лоренцо Перничаро для Fireart Studio.

6. Цветовые тренды в 2021 году

В 2021 году мы можем рассматривать как жирные, так и пастельные палитры как одну из тенденций веб-дизайна. Цветовой спектр, используемый на веб-сайте, в основном зависит от отрасли и предполагаемого воздействия на восприятие посетителя Интернета, поскольку многие компании осведомлены о силе психологии цвета и применяют цвета соответствующим образом.Например, если компания стремится убедить пользователей в своей надежности и надежности, рекомендуется использовать синие тона, поскольку они часто связаны с этими функциями. Только подумайте о PayPal, Facebook, Twitter и других брендах, которые используют синюю палитру. Все они относятся к отраслям, в которых защита данных играет особую роль. Поэтому здесь особенно удачно применяется синий цвет.

7. Темный режим

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

Крупные бренды, такие как Google, уже осознали, что предоставление пользователям альтернативного варианта дизайна в темном режиме является ключом к успеху в цифровом мире. Это позволяет удовлетворить потребности более широкой целевой аудитории, завоевать их лояльность и предложить «темный» онлайн-опыт, которого нет у многих других компаний.

Коллаж

Коллаж — еще одна удивительная тенденция веб-дизайна, ожидаемая в 2021 году. Он добавляет больше аутентичности и уникальности дизайну веб-сайта, позволяя брендам выделиться среди других компаний в жесткой цифровой конкуренции. Коллажи все чаще используются на веб-сайтах. Людям нравится видеть их во время своих веб-путешествий, поскольку это еще одно место в сети, где они могут переключить внимание с обычных операций и цифровой деятельности на произведение искусства и немного расслабиться.

Многие современные коллажи могут удивить своей парадоксальностью, неожиданными сочетаниями «реалий», то есть вырезками из изображений, необычным стилем.

Трехмерный и геометрический дизайн

Абстрактный дизайн, геометрические фигуры и трехмерные элементы займут место в 2021 году. По крайней мере, мы ожидаем их появления в сети в ближайшее время. В последние годы многие компании активно внедряют технологии AR и VR в свой веб-опыт.Он породил новую тенденцию — трехмерный дизайн, который, как ожидается, охватит Интернет в следующем году. 3D-изображения, видеоролики с 36 видами и анимация будут появляться на веб-сайтах еще чаще.

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

Анти-дизайн

Будьте осторожны! Да, это не для всех. Эта тенденция веб-дизайна смелая, возмутительная и разрушительная. Он нарушает все правила дизайна и предлагает нам нечто совершенно иное, чем все упомянутые в Adobe методы. Антидизайн — это продолжение популярного в 2020 году брутализма. Он противостоит поп-культуре и призывает к оригинальности, смелости и свободе. Речь идет о выходе из зоны комфорта в непредсказуемый, хаотичный и красивый цифровой опыт.

5 советов по созданию современного веб-дизайна

Хотите узнать, как сделать сайт современным? Мы подготовили эти 5 проверенных советов по созданию веб-сайта. Посмотрите их:

Будьте минималистичны

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

Чтобы понять все лучше, загляните на этот сайт. Не задерживайтесь там надолго — у вас могут начать болеть глаза, потому что Арнгрен — прекрасный пример плохого дизайна веб-сайта.

Он устарел и очень запутан — по нему практически невозможно ориентироваться, так как на сайте полно некачественных изображений, кнопок, ссылок и даже анимации. Быть похожим на Арнгрена — большая ошибка, поэтому мы рекомендуем сделать ваш сайт минималистичным.

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

• Минималистичные веб-сайты загружаются намного быстрее, чем сложные веб-сайты, перегруженные изображениями, видео и анимацией.
• Минималистичные веб-сайты выглядят более профессиональными и заслуживающими доверия.
• Минималистичные веб-сайты просты в навигации и использовании, что важно для пользователей.
• Минималистичные веб-сайты позволяют пользователям сосредоточиться на содержании.

Минималистичный дизайн не имеет недостатков, если только вы не создадите практически пустой веб-сайт с единственной кнопкой, скрытой где-то внизу стартовой страницы.Так что просто будьте умеренно минималистичны, и все будет хорошо.

Используйте видео для фонового заголовка

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

Вы также можете выбрать полноэкранное видео, но в этом случае убедитесь, что оно не отвлекает ваших пользователей от контента. В противном случае даже самое интересное видео может испортить впечатление пользователей о вашем сайте и, следовательно, повлиять на ваш бизнес.

Обратите внимание на типографику

Никто не будет рад изучить ваш контент, если его трудно читать.Неправильный цвет шрифта — одна из самых частых и очевидных ошибок, но не единственная. Ознакомьтесь с нашими советами по работе с типографикой, чтобы создать действительно стильный и привлекательный дизайн:

• Выберите шрифт, который будет отражать идею вашего сайта. Например, нелогично использовать забавный шрифт для серьезного сайта, посвященного медицинским исследованиям.
• Выберите уникальный шрифт, который поможет вашим пользователям легко идентифицировать вас среди ваших конкурентов.
• Текст должен читаться без проблем, поэтому выбирайте правильный размер шрифта.Используйте разные размеры для текста и заголовков — этот трюк улучшит структуру текста и, следовательно, его читабельность.
• Используйте подходящий межстрочный интервал — не оставляйте слишком много места между линиями, но и не располагайте их слишком близко друг к другу.
• Не используйте слишком много разных цветов. Лучше остановиться только на нескольких из них; в противном случае ваш сайт превратится в раздражающую радугу.

Использовать призрачные кнопки

Кнопки-призраки имеют цветную рамку и не имеют цветной заливки.Такие прозрачные кнопки являются одними из самых популярных идей современного дизайна веб-сайтов, и они могут быть действительно хорошим выбором, если ваш сайт будет иметь минималистичный дизайн. Однако с этими кнопками нужно быть очень осторожными, так как иногда их трудно обнаружить. А что происходит с пользователями, когда они не могут найти нужную кнопку? Собственно, они уходят. Итак, вот несколько рекомендаций по правильному использованию призрачных кнопок:

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

Перейти к веб-дизайну на основе карточек

Дизайн карточек — еще один популярный тренд, и, в отличие от кнопок-призраков, у него нет недостатков. Итак, каждая карточка содержит изображение или значок и немного текста (название продукта, основную информацию о нем и т. Д.). Вот некоторые преимущества дизайна карты:

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

Карты — отличный выбор, вам нужно только правильно их спроектировать. Качественные изображения, подходящий текст и правильный интервал — вот три основных момента, на которые следует обратить внимание при работе над дизайном открыток.

5 примеров лучшего современного веб-дизайна

Список советов по современному веб-дизайну составлен, самое время показать вам самые интересные образцы. Итак, давайте начнем с первого примера дизайна веб-сайта.

Салат и Ко

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

Сайт не перегружен контентом, поэтому ориентироваться на нем чрезвычайно легко.

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

Brit + Co

Brit + Co — один из самых замечательных примеров веб-дизайна.Это медиа-компания для женщин, и они очень разумно использовали дизайн карточек. Проверьте их стартовую страницу — карточки хорошо организованы, поэтому сайт не выглядит беспорядочным. Напротив, ориентироваться здесь очень легко. Сами карточки имеют простой, но очень приятный дизайн, а содержимое очень легко читается благодаря правильным шрифтам и интервалам.

Керамика Денин

Deneen Pottery производит керамическую посуду, и ее веб-сайт выглядит великолепно. Есть классный заголовок видео, который объясняет, чем занимается эта компания.Ролик не отвлекает от контента — он просто отлично помещается на сайте. Кроме того, есть довольно большая кнопка-призрак, и ее очень легко найти благодаря ее размеру и расположению.

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

Мартышка

Marmoset — один из самых интересных примеров современного веб-дизайна. Это все о поиске музыки, лицензировании и некоторых других вещах, связанных с музыкой. Его дизайнеры использовали кнопки-призраки, но у них хорошее расположение и фон, поэтому у пользователей нет проблем с навигацией. На некоторых страницах также использовался дизайн карточек. Каждая карточка состоит из изображения и короткого названия, и интервалы между карточками допустимы. Более того, нет никаких проблем со шрифтами — контент, предлагаемый на этом сайте, читается.

Москот

В Moscot вы можете купить хорошие очки и насладиться действительно стильным дизайном. Просто загляните на их сайт и проверьте шрифты — они броские и узнаваемые! То же самое и с цветами. Кроме того, все ссылки и контент хорошо расположены, поэтому на страницах нет беспорядка. В шапке нет видео, но вы все равно можете найти его на стартовой странице — просто прокрутите немного, и вы его увидите.

Надеюсь, этот современный веб-дизайн вдохновит вас на эксперименты с вашим проектом.

Создание современного веб-дизайна — что теперь?

Итак, вы уже знаете, как создать модный дизайн веб-сайта, и у вас есть несколько примеров современного веб-дизайна, которые могут вдохновить вас. Мы надеемся, что это современное руководство по дизайну веб-сайтов поможет вам создать мощный онлайн-бизнес в 2021 году.

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

Обновление: 2020-12-18

10 самых горячих тенденций 2020 года + примеры

62% предприятий обновляют свои сайты не реже одного раза в квартал и 30% — ежемесячно.

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

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

Как будет выглядеть современный дизайн веб-сайтов в 2020 году?

Современный дизайн веб-сайтов сильно отличается от того, что было 10 или даже пять лет назад.

Просто посмотрите график эволюции дизайна вашего любимого веб-сайта, и вы удивитесь, насколько сильно он изменился за эти годы.

Facebook был бы отличным примером — проверьте:

[Источник: Музей версий, TechCrunch] Веб-дизайн — это очень быстро развивающаяся область. Некоторые прорывные решения 2020 года могут устареть уже в 2022 году, а в 2024 году над ними будут смеяться.

Из-за этого вы, вероятно, задаетесь вопросом:

Что именно делает дизайн веб-сайтов современным в 2020 году?

Чтобы ответить на этот вопрос, позвольте нам выделить ключевые элементы современного красивого, функционального веб-сайта:

• Минимализм : Минимализм — это даже не тенденция в современном веб-дизайне — это стандарт. Вы найдете его влияние в большинстве ваших любимых блогов, интернет-магазинов или целевых страниц. Тонны пустого пространства, чистая типографика и скудный текст преобладают в небольших перспективных блогах и на корпоративных страницах крупных компаний.
• Скорость отклика : мобильные устройства генерируют 51,53% мирового веб-трафика. Адаптивный или ориентированный на мобильные устройства дизайн важен для обеспечения доступа к вашему веб-сайту с различных устройств с разными размерами экрана и операционными системами.
• Скорость : 47% людей хотят, чтобы ваш веб-сайт загрузился менее чем за 2 секунды, а 40% покинут его после 3 секунд ожидания. Медленные веб-сайты просто недопустимы в 2020 году. Оптимизация скорости загрузки вашего сайта должна быть одним из ваших главных приоритетов.

3 основанные на данных причины для модернизации дизайна вашего веб-сайта

Понимание преимуществ современного дизайна веб-сайтов означает возможность ответить на один ключевой вопрос:

Как модернизация моего веб-сайта повлияет на мою прибыль?

Вот три основных ответа на основе данных:

Причина №1: Он сотворит чудеса с имиджем вашего бренда

Посетителям веб-сайта нужно всего около 0,05 секунды, чтобы составить о нем мнение. (Тейлор и Фрэнсис онлайн)

Независимо от того, работаете ли вы на рынке B2B или B2C, ваш веб-сайт является одним из ваших главных активов. Это ваша визитная карточка, брошюра о продукте и инструмент для привлечения потенциальных клиентов — все в одном.

В большинстве случаев ваш веб-сайт является первой точкой контакта между вашим бизнесом и вашими клиентами.

Это означает, что их первые впечатления о вашем бренде будут основаны на вашем веб-сайте, и 94% из них будут связаны с дизайном.

Если сайт непривлекательный и устаревший, ваши клиенты будут воспринимать ваш бизнес как таковой.

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

Причина № 2: помогает SEO

68% пользователей начинают свое онлайн-путешествие с поисковой системы. (BrightEdge)

Дизайн веб-сайта играет важную роль в вашей стратегии SEO, хотя и косвенно.

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

Это основа для хорошего пользовательского опыта, который побудит ваших посетителей оставаться на вашем веб-сайте дольше, взаимодействовать с ним, повторно посещать или рекомендовать его другим пользователям.

В результате ваше время на странице увеличивается, а показатель отказов снижается. Эти два показателя являются индикаторами качества содержания Google и, как таковые, могут повышать или понижать ваши шансы попасть в 10 лучших результатов поиска по вашим целевым ключевым словам.

Причина № 3: Это увеличит ваш доход

62% предприятий увеличивают объем продаж за счет оптимизации своего веб-сайта для мобильных устройств. (Cision)

51,53% пользователей теперь выходят в Интернет через мобильные устройства, и до 40% всех онлайн-транзакций теперь совершаются на смартфонах и планшетах.

Если ваш веб-сайт оптимизирован для мобильных устройств, вы, вероятно, теряете более половины своей базы потенциальных клиентов.

Бренды все больше инвестируют в мобильные разработки или проекты, ориентированные на мобильные устройства, чтобы задействовать этот растущий сегмент рынка и увеличить онлайн-конверсии.

Топ-5 тенденций в дизайне пользовательских интерфейсов (UI)

Мы рассмотрели ключевые характеристики современного веб-дизайна и обоснованные причины инвестировать в него.

Теперь давайте рассмотрим более подробно самые важные тенденции современного веб-дизайна в 2020 году — начиная с дизайна пользовательского интерфейса:

Тренд пользовательского интерфейса №1: Негативное пространство

Минимализм остается популярным в веб-дизайне в 2020 году.

Один из самых распространенных элементов — негативное пространство.

Многие веб-дизайнеры обратились к тому, чтобы оставлять большие части веб-страниц полностью пустыми — и по нескольким веским причинам.

Целенаправленное и со вкусом использование отрицательного пространства может не только выделить веб-сайт из толпы, но и упростить навигацию, поскольку он визуально легче.

Хотя это в основном тенденция к UI, поскольку она связана с эстетической стороной веб-дизайна, она также может способствовать улучшению UX.

Негативное пространство может выделить описания продуктов и призывы к действию, выделив путь, который приведет ваших посетителей к конверсиям.

Apple — одна из первых, кто ввел негативное пространство в веб-дизайн. Обратите внимание, как изображения ноутбуков и синие призывы к действию мгновенно привлекают ваше внимание.

[Источник: Apple] Mozilla применила аналогичный подход к домашней странице своего браузера Firefox.Красочное изображение главного героя и ярлыки, ведущие на страницы продуктов, выделяются на пустом белом фоне.

[Источник: Mozilla] Использование отрицательного пространства на веб-сайте электронной коммерции может быть сложной задачей, если оно не соответствует видению вашего бренда. В случае с брендом одежды Palace — да. На их веб-сайте легко ориентироваться, а интенсивное использование белого пространства дополняет минималистичную андерграундную эстетику бренда.

UI Тенденция № 2: 3D-графика

Захватывающие 3D-визуальные эффекты не новость в веб-дизайне.Однако сейчас их используют больше веб-сайтов.

3D-графика раньше была очень дорогой в изготовлении и сильно сказывалась на скорости загрузки страницы.

Но это уже не так. В 2020 году 3D-изображения станут более доступными и популярными, чем когда-либо.

Графические дизайнеры теперь имеют доступ к многочисленным инструментам, которые делают 3D-моделирование менее трудоемким и трудоемким.

Кроме того, с появлением 5G и инновационных форматов изображений скорость загрузки страниц больше не является проблемой.

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

Но не забывайте использовать их умеренно. Слишком много 3D может показаться вульгарным и снизить производительность вашего сайта.

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

[Источник: Stripe] Однако Stripe будет сложно превзойти Beans Agency в использовании 3D для создания идентичности бренда.

Убедитесь сами:

[Источник: Beans Agency] Веб-сайт канадского цифрового агентства Turbulent — отличный пример того, как сделать шаг вперед в 3D.

[Источник: Turbulent] Все визуальные элементы анимированы и повторяют путь посетителя, создавая захватывающий опыт.

Тренд пользовательского интерфейса №3: ​​жирный шрифт

В 2020 году современный веб-дизайн означает использование типографики, которая сделает реальное заявление.

Обычные шрифты с засечками и без засечек по-прежнему широко используются. Но вряд ли они привлекают внимание.

Что привлекает внимание, так это жирный, негабаритный шрифт, который занимает большую часть экранов посетителей.

Нечетные интервалы и компоновка одинаково модны, но, как и в случае с 3D-графикой, не забывайте использовать их экономно. Они проходят тонкую грань между выделением вашего контента и нечитаемостью.

Швейцарское финансовое учреждение Golden Suisse не использует смелые шрифты на своем сайте.Однако они сочетают негабаритную типографику с отрицательным пространством, создавая веб-сайт, который выглядит минималистичным и современным.

[Источник: Golden Suisse] Французский интерактивный разработчик Флоран Биффи использует другой подход к типографике на своем веб-сайте портфолио. Здесь шрифт — это элемент дизайна, который производит впечатление, несмотря на то, что практически не читается.

[Источник: Флоран Биффи] Ярким примером смелой типографики может служить фотостудия The Badass Project. Шрифт на их домашней странице является анимированным, состоит из нескольких шрифтов, перекрывается с другими элементами и постоянно занимает весь ваш экран.

Тенденция пользовательского интерфейса №4: темный режим

Этот список был бы неполным без теперь повсеместного темного режима.

Несмотря на то, что впервые он был изобретен в мобильных приложениях, темный режим сейчас становится популярным в дизайне веб-сайтов.

Хотя это может показаться уловкой, темный режим имеет несколько преимуществ, которые оправдывают его широкое использование:

• Срок службы батареи увеличился на целых 63% на устройствах с экранами OLED.
• Более высокая контрастность , которая может помочь выделить ключевые элементы веб-страницы, такие как CTA
• Интерактивность , добавляемая опциональным темным режимом, заставит пользователей чувствовать больше контроля над своим опытом.

Независимая поисковая система DuckDuckGo — один из лучших примеров современного веб-дизайна, который реализует интерактивный темный режим и многое другое. Пользователи могут выбирать между шестью темами внешнего вида, две из которых являются вариантами темного режима.

[Источник: DuckDuckGo] Slack реализует аналогичное решение, позволяя пользователям переключаться между светлым и темным внешним видом, а также выбирать одну из нескольких цветовых схем выделения.

[Источник: Slack] Что касается веб-сайтов социальных сетей, Twitter был бы отличным примером реализации интерактивного темного режима.Фактически, пользователи могут выбирать из двух темных режимов, которые различаются, ну, насколько они темные.

Тренд пользовательского интерфейса № 5: Яркие цветовые комбинации

От 62% до 90% первого впечатления потребителей о продукте определяется цветом.

В 2020 году цвета как никогда важны в дизайне веб-сайтов. В этом году самая горячая цветовая тенденция — яркие, необычные сочетания неоновых, флуоресцентных и пастельных оттенков.

Возьмем для примера GlobeKit. Цвета не только яркие, но и динамичные, они смешиваются при прокрутке домашней страницы вниз.

[Источник: GlobeKit] Манильское агентство GnGn придерживается другого подхода. Цветовая палитра их веб-сайта более футуристична, а анимация более захватывающая.

[Источник: GnGn] Еще один интересный пример — это Material Interactivity — веб-сайт, разработанный Чонмином Кимом для демонстрации интерактивности Material Design от Google. Интересно, что он также демонстрирует цветовые тенденции 2020 года в очень минималистичной манере.

Топ-5 тенденций в области пользовательского опыта (UX) в веб-дизайне

В этом году в UX-дизайне по-прежнему используются технологии для персонализации опыта посетителей на сайте

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

Вот основные тенденции UX-дизайна в 2020 году:

Тенденция UX №1: разговорный UX

Разговорный UX-дизайн призван сделать взаимодействие посетителя с вашим веб-сайтом как можно более «человечным».

В дизайне веб-сайтов это может быть достигнуто с помощью встроенного чат-бота или интерактивности.

Хорошим примером разговорного дизайна является сайт Buzzworthy Studios. Что интересно, они интегрировали функции чат-бота в свой CTA.

[Источник: Buzzworthy Studios] Контактная форма, которая открывается при нажатии на CTA, представляет собой интерактивный пошаговый процесс, который протекает как естественный разговор с менеджером по продажам.

UX-тренд №2: человеко-ориентированное копирование

Еще одна заметная тенденция в UX-дизайне — копирование, ориентированное на человека. Его основная цель — показать вашей аудитории, что за вашим сайтом стоят реальные люди.

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

TurboTax использует копирование и дизайн, ориентированные на человека, чтобы передать чувство надежности и надежности.Просто обратите внимание, сколько раз в тексте встречается слово «гарантия» и его варианты!

[Источник: TurboTax] Их веб-сайт разработан, чтобы превратить такую ​​сложную и бюрократическую задачу, как налоговая декларация, в приятный и легкий пользовательский интерфейс.

UX-тенденция №3: рассказывание историй

Рассказ о вашем продукте или бизнесе на вашем веб-сайте — отличный способ привлечь и конвертировать посетителей.

Storytelling может помочь вам создать интимный, близкий пользовательский опыт.Из-за этого это горячая тенденция UX в 2020 году.

Веб-сайт винодельни Flat Top Hills — отличный пример мощного повествования.

[Источник: Flat Top Hills] Весь раздел «О компании» на веб-сайте вдохновляет посетителей узнать о философии и людях, стоящих за продуктами.

[Источник: Flat Top Hills] Такая близость делает пользовательский опыт посетителей более особенным и запоминающимся.

UX-тренд №4: минималистичная навигация

Следуя тенденции минимализма, минималистичная навигация — одна из ключевых тенденций дизайна UX в 2020 году.

Эта тенденция поддерживается одним ключевым преимуществом. Чем меньше меню и ярлыков доступно посетителям вашего веб-сайта, тем больше времени они могут потратить на изучение вашего контента, продуктов или услуг.

Сайт британского модельера Мартин Роуз следует этой логике. Несмотря на необычное расположение меню навигации посередине главной страницы, оно никогда не занимает центральное место.

[Источник: Мартин Роуз] Даже на странице каталога мало что отвлекает посетителей от изучения продуктов.

Тенденция UX № 5: Виртуальная и дополненная реальность

В 2020 году мировой рынок VR / AR вырос до 18,8 миллиарда долларов.

Хотя VR и AR все еще находятся в зачаточном состоянии и имеют значительные аппаратные ограничения, они сейчас являются одними из самых популярных тенденций веб-дизайна.

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

Примером веб-сайта, разработанного специально с учетом функциональности виртуальной реальности, может быть каталог 50 Years Of Swiss Music Chart.

3 новых дизайна веб-сайтов B2B, устанавливающие отраслевые стандарты

Какой смысл объяснять все эти современные тенденции веб-дизайна, не показывая их практического применения?

Давайте начнем с нескольких отличных примеров веб-сайтов B2B:

B2B Дизайн №1: MailChimp

MailChimp не нуждается в представлении. В течение многих лет он был популярным инструментом для маркетологов электронной почты.

[Источник: MailChimp] За последние несколько лет они расширили свою линейку продуктов, включив несколько других услуг по автоматизации маркетинга.И в процессе они создали образцовый веб-сайт B2B.

Их веб-дизайн может быть немного консервативным с точки зрения пользовательского интерфейса и UX, но он по-прежнему следует нескольким последним тенденциям:

• Яркие цвета : Как только вы открываете ее, домашняя страница встречает вас ярким оттенком желтого. Это своего рода фирменный цвет для MailChimp, и они используют его по всему веб-сайту, чтобы выделить важные разделы.
• Негативное пространство : MailChimp использует негативное пространство на своем веб-сайте зарезервировано, но стратегически.Визуальные элементы и текст на главной странице выделяются на белом фоне, сразу привлекая ваше внимание.
• Creative 404 page : MailChimp имеет одну из лучших страниц 404, которые мы когда-либо видели. В нем не только честная, несколько философская копия, но и встроенное пасхальное яйцо. Если вы нажмете на изображение лошади, вы будете перенаправлены в 8-битную игру HorseSnake. Какой твой старый добрый Змей, но … вместо этого ты играешь за лошадь!

B2B Дизайн № 2: Rocka

Использование таких компаний, как Athena и Poseidon, для продвижения на рынке услуг по созданию венчурных предприятий может показаться немного странным.

Но не в Року.

С одной стороны, их веб-сайт настолько прост и понятен, насколько это возможно. С другой стороны, это привлекает внимание и эстетично.

[Источник: Rocka] Вот почему:

• Умные визуальные эффекты : Нет, мы не шутили. Каждая из услуг Rocka представлена ​​трехмерным изображением классической статуи, подвешенной в ярко окрашенном негативном пространстве с морем анимированных геометрических форм на заднем плане. Минималистичный, запоминающийся и привлекательный — именно такой веб-страница должна быть в 2020 году.
• Простая навигация : Панель навигации в заголовке веб-сайта Rocka состоит всего из четырех кнопок без каких-либо дополнительных элементов дизайна. Это отличный пример минималистичной навигации, позволяющий легко просматривать веб-сайт и не теряться.
• Сильная типографика : Услуги и преимущества Rocka представлены огромными белыми печатными буквами. Они всегда резко контрастируют с фоном и привлекают внимание посетителя к важной информации.

Дизайн B2B № 3: Dialpad

Поставщик облачных телефонных услуг Dialpad кое-что знает о том, как донести свои преимущества до потенциальных клиентов.

[Источник: Dialpad] Их веб-дизайн — отличный пример того, как придать вашему сайту человеческое лицо. Все из-за того, что они внедрили следующие методы:

• Открытость и честность : Веб-сайт Dialpad спроектирован таким образом, чтобы обеспечивать прозрачность и индивидуальный подход на каждой странице.Например, вам не нужно усердно искать, чтобы узнать о руководстве и инвесторах компании. Они находятся в самом верху страницы «О компании» вместе с ключевой статистикой компании и фотографиями их деятельности по построению команды. То же самое и с социальным доказательством — оно легко доступно и может содержать отзывы и отзывы клиентов.
• Вдохновляет беседу : Веб-сайт Dialpad — отличный пример того, как успешно реализовать дизайн диалогового UX. В нем есть умный чат-бот, который появляется, как только вы попадаете на главную страницу.Не говоря уже о том, насколько случайна копия. Каждая часть веб-сайта создана таким образом, чтобы казалось, что вы имеете дело с реальным человеком.
• Трехмерная графика : Последнее, что выделяет веб-сайт Dialpad, — это использование трехмерных изображений. Просто откройте любую из их продуктовых страниц (кстати, каждая из них также имеет цветовую кодировку), и вы найдете слайд-шоу, объясняющее преимущества каждого продукта в красивом 3D.

3 новых дизайна веб-сайтов B2C, которые пользуются большой популярностью у целевой аудитории

В то время как дизайн веб-сайтов B2B обычно оптимизирован для повышения конверсии, веб-дизайнеры B2C склоняются к творческому выражению.Хотя, не жертвуя удобством использования.

Вот три потрясающих и функциональных дизайна B2C-сайтов:

B2C Дизайн №1: Фронкс

Fronks, производитель органического орехового молока, убедительно доказывает, почему вам не нужны сложные визуальные эффекты или копии для увеличения конверсии.

Их подход прост, увлекателен, прямолинейен и в то же время эффективен.

[Источник: Fronks] Вот несколько причин, почему:

• Короткий и прямой путь покупателя: Как только вы попадаете на главную страницу Fronks, у вас не остается иного выбора, кроме как пойти дальше и заказать немного орехового молока.Фактически, весь путь покупателя занимает всего три клика. Если вы хотите создать веб-сайт, который будет стимулировать продажи, вам следует воспользоваться этим подходом.
• UI выделяет продукт : кроме изображений продуктов, на веб-сайте Fronks нет других визуальных элементов. На самом деле, весь пользовательский интерфейс довольно спартанский — и это здорово, если вы хотите, чтобы посетители концентрировались только на вашем продукте.
• Краткая, но мощная копия : Вы знаете, что ваш копирайтинг эффективен, когда вам нужно всего три строки, чтобы сообщить о своем продукте.Именно так обстоит дело с Фронксом. Все тексты их веб-сайтов короткие, веселые и простые. Никакого маркетингового жаргона — только чистые факты.

Дизайн B2C № 2: Havenly

Если ваши продукты или услуги визуальны, ваш веб-сайт должен это отражать.

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

[Источник: Хэвенли] Их подход окупился. Вот почему:

• Потрясающие и убедительные визуальные эффекты : весь веб-сайт Havenly построен на изображениях их собственных работ, а копия делает шаг назад.Глядя на эти изображения, мы должны сказать — они довольно убедительны.
• Еще больше потрясающих визуальных эффектов : Когда реальных изображений недостаточно, Хэвенли обращается к простым, элегантным векторным иллюстрациям. Большая часть веб-сайта наглядна и чрезвычайно удобна для восприятия. «Покажи, а не говори» в лучшем виде.
• Привлекающий контент : Havenly хорошо знает свою аудиторию — и это видно в их блоге. Он охватывает все, что связано с дизайном интерьера, и включает в себя советы, истории из жизни и мнения.Хорошо проработанный и авторитетный, это отличный пример того, насколько мощным может быть контент.

Дизайн B2C № 3: Simply Chocolate

Simply Chocolate является свидетельством огромной силы интерактивности и анимации.

[Источник: Simply Chocolate] В конце концов, вы когда-нибудь видели веб-сайт, который бросает вам в лицо шоколад?

У нас тоже нет — но это не единственное, что делает сайт Simply Chocolate таким замечательным:

• Незабываемая интерактивность : веб-сайт Simply Chocolate делает их продукцию неотразимой.Они не просто демонстрируют свой продукт, хотя и делают это очень хорошо. Они побуждают вас оторвать обертку, взглянуть на полезное какао внутри и откусить его. Мы не преувеличиваем — это настоящий CTA.
• Причудливый макет : Simply Chocolate действительно выделяется жирным шрифтом на своем веб-сайте. Но вряд ли это главное — продукты. С другой стороны, меню навигации и логотип поворачиваются и смещаются в углы страницы. Ничто не отвлекает вас от знакомства с товарами во всей красе.
• Стратегическое использование цвета и изображений : Наконец, мы должны упомянуть стратегическое использование изображений и цвета Simply Chocolate. Когда вы прокручиваете главную страницу вниз, ваш экран всегда полностью посвящен одной конкретной плитке шоколада. В то время как верхняя часть экрана меняет цвет, чтобы соответствовать обертке, нижняя часть украшена анимированными ингредиентами указанной панели.

Выводы о современном дизайне веб-сайтов в 2020 году

Современный дизайн веб-сайтов — это постоянно развивающаяся область.Тенденции, которые делают его современным, меняются из года в год.

В 2020 году тремя основными принципами современного веб-дизайна являются:

• Минимализм
• Отзывчивость
• Скорость

Более того, есть три основные причины, по которым вам следует модернизировать дизайн своего веб-сайта в соответствии с этими принципами:

• Улучшит имидж вашего бизнеса
• Это поможет вашим усилиям по поисковой оптимизации
• Это увеличит ваш доход

Для этого попробуйте включить следующие тенденции UI / UX в дизайн своего веб-сайта.Они не только сделают ваш сайт современным и передовым, но и значительно улучшат впечатления ваших посетителей:

• Негативное пространство
• 3D Графика
• Полужирный шрифт
• Тёмный режим
• Яркие цветовые комбинации
• Разговорный UX
• Человекоцентрическая копия
• Рассказ
• Минималистичная навигация
• Виртуальная и дополненная реальность

За тенденциями в дизайне веб-сайтов сложно следить, поскольку они очень часто меняются.Но если вы хотите выделиться среди конкурентов, повысить осведомленность о своем бизнесе и увеличить свой доход, то приведенная выше тактика — ваш выбор!