Как делать дизайн сайтов: Как сделать дизайн сайта / Skillbox Media

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

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

Тем не менее, BigCommerce показал себя более чем достойно благодаря нашему исследовательскому тестированию:

4.1

из 5

Простота использования

3.3 из 5 звезд

Гибкость дизайна

4,6 из 5 звезд

Особенности веб-сайта

3,6 из 5 звезд

Помощь и поддержка

3,4 из 5 звезд

Соотношение цены и качества

900 5 звезд0002 Оценка клиента

3,1 из 5 звезд

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

BigCommerce предлагает 15-дневную бесплатную пробную версию, чтобы вы могли встать на ноги.

Попробуйте BigCommerce бесплатно

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

Шаблон, иногда называемый темой, представляет собой макет вашего сайта . Думайте о шаблоне как о структуре вашего дома — он формирует его основной вид, прежде чем вы заполните его всеми своими вещами.

Большинство платформ предлагают вам на выбор ряд шаблонов, предварительно заполненных примерами контента.

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

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

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

На примере кофейни стоит посмотреть, что делают другие кафе.

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

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

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

Цветовая схема

Цвет — один из важнейших инструментов коммуникации бренда. На самом деле, согласно Color Matters, фирменный цвет может повысить узнаваемость бренда на 80%.

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

Большинство брендов имеют один доминирующий цвет, а затем два или три второстепенных цвета. Синий — самый популярный цвет: треть из 100 ведущих брендов используют его в своем логотипе.

Если вы хотите, чтобы ваш сайт соответствовал современным тенденциям, вам подойдут яркие цвета. Эксперты по цвету Pantone недавно выбрали «Живой коралл» цветом года на 2019 год:

Стиль шрифта

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

Естественно, белые воротнички захотят использовать классические стили шрифта. Такие шрифты, как Arial и Helvetica, являются синонимом профессионализма и поэтому имеют смысл при обсуждении серьезных вопросов.

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

Как правило, следует избегать использования шрифта Comic Sans. То есть, если вы не планируете детский день рождения!

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

Изображения

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

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

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

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

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

Ниже мы обсудим технические особенности обоих и объясним, почему они важны.

Позиционирование

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

Это изображение взято из исследования Нейлсона, в ходе которого группа отслеживала движение глаз читателей на веб-странице.

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

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

Оптимизация

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

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

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

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

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

Метаданные

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

Сжатие изображений

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

Чтобы представить это в некотором контексте:

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

Источник: Unbounce

Итак, что вы можете с этим поделать? Почему изображение сжатие , конечно же!

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

Альтернативный текст изображения

Наряду со сжатием изображений, другой важной частью SEO является сообщение Google, что представляет собой изображение. В отличие от текста, поисковые системы не могут «читать» изображения, поэтому, добавляя замещающий текст к изображению, вы эффективно помогаете им понять, что на нем изображено.

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

Squarespace SEO Review – Как получить высокий рейтинг в Squarespace.   

Мобильная отзывчивость

Это большая проблема. В 2018 году 58% всех просмотров в Интернете приходилось на мобильные устройства. Вот почему Google отдает предпочтение веб-сайтам, которые правильно форматируются на мобильных устройствах. Если у вас нет, у вас серьезная проблема.

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

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

Внутренние ссылки

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

«E.A.T» означает «Экспертность, авторитетность и надежность». Подробно описывая тему и размещая внутренние ссылки на дополнительный контент, связанный с ней, вы показываете поисковым системам, что действительно разбираетесь в своих вещах, что, в свою очередь, должно помочь вам занять высокие позиции.

На этом этапе давайте кратко подведем итоги того, что вы должны были сделать к настоящему времени:

• Определили цель вашего веб-сайта
• Изучили последние тенденции веб-дизайна и провели анализ конкурентов
• Определились с платформой и темой для создания веб-сайта
• Приняли решение о брендинге (цветовая схема, стиль шрифта и т. д.)
• Создали свой веб-сайт и оптимизировали его содержимое пора проверить, все ли работает, прежде чем запускать!

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

  Некоторые общие вещи, которые вы хотите проверить:

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

  Более подробную информацию вы можете найти множество контрольных списков UX (пользовательский опыт) онлайн. Важно быть как можно более тщательным, прежде чем вы начнете жить. Думайте об этом как о открытии ресторана:

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

  Всегда уделяйте время тщательной проверке своего веб-сайта перед его запуском — учитывается первое впечатление. После этого все готово: опубликуйте свой сайт и отправьте его в онлайн-мир!

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

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

  Большинство платформ имеют собственную встроенную аналитику или, по крайней мере, приложение, которое можно установить. Кроме того, вы можете подключить свой сайт к Google Analytics, чтобы отслеживать такие вещи, как:

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

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

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

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

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

  Проектирование веб -сайтов: 8 шагов

  1. Определите цель и стратегию вашего сайта
  2. ИССЛЕДОВАНИЕ ПОСЛЕДНЕЕ ТРЕНДЫ веб -дизайна. на вашем брендинге
  3. Добавьте и оптимизируйте свой контент
  4. Опубликуйте свой веб-сайт
  5. Анализируйте и улучшайте

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

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

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

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

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

  Попробуйте Wix бесплатно

  Попробуйте Shopify бесплатно

  Сколько стоит разработка веб-сайта?

  Многие конструкторы сайтов предлагают бесплатные планы. Тем не менее, это все равно будет стоить вам немного, если вы серьезно относитесь к своему сайту. Например, доменное имя стоит около 10-15 долларов в год. Если у вас ограниченный бюджет, мы рекомендуем использовать дешевый план создания веб-сайтов, который стоит около 5–15 долларов в месяц.

  Нанять веб-дизайнера или сделать самому?

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

  На какой платформе лучше всего создавать сайт?

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

  Должен ли я использовать WordPress или конструктор сайтов?

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

  Как заработать на сайте?

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

  Website Builder Expert стремится предоставить вам достоверные данные. Вот почему мы проводим собственное исследование и получаем прямое, личное понимание. Нажмите здесь для получения дополнительной информации.

  Дизайн веб-страниц: подробное руководство

  Иллюстрации Прабхата Махапатры

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

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

  Проектирование пользовательских потоков

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

  Информационная архитектура

  Информационная архитектура (ИА) — это дисциплина, позволяющая четко и логично организовать информацию для ваших посетителей. Информационные архитекторы анализируют, как пользователи структурируют информацию, и создают иерархию, соответствующую ожиданиям пользователя. Хорошая IA — это результат тщательного исследования пользователей и тестирования удобства использования.

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

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

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

  Тестирование дерева — это надежный метод определения того, могут ли пользователи работать с предлагаемой структурой меню. Изображение предоставлено Nielsen Norman Group.

  Глобальная навигация

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

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

  При проектировании навигации учитывайте несколько моментов:

  • Выберите шаблон навигации в соответствии с потребностями пользователя. Навигация должна соответствовать потребностям большинства посетителей вашего сайта. Например, лучше избегать навигации по меню-гамбургеру, если большинство ваших пользователей не знакомы со значением самого значка.
  • Приоритет параметров навигации. Хорошая команда дизайнеров расставит параметры навигации по приоритетам в соответствии с общими задачами пользователя, принимая во внимание как приоритет, так и частоту задач.
  • Сделать его видимым. Минимизируйте когнитивную нагрузку пользователя, сделав важные параметры навигации постоянно видимыми. Когда мы скрываем параметры навигации, мы рискуем, что посетители не смогут их найти.
  • Сообщить текущее местоположение. Отсутствие указания текущего местоположения посетителя является распространенной проблемой на многих веб-сайтах. Если посетителям приходится спрашивать «Где я?», это явный признак того, что над навигацией нужно поработать. Для крупных веб-сайтов предлагайте индикаторы местоположения, такие как хлебные крошки.

  Визуальный и функциональный дизайн веб-ссылок

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

  • Признайте разницу между внутренними и внешними ссылками. Пользователи ожидают разного поведения внутренних и внешних ссылок. Все внутренние ссылки должны открываться в одной вкладке, чтобы посетители могли использовать кнопку «назад».
  • Изменить цвет посещенных ссылок. Если посещенные ссылки не меняют цвет, пользователи могут непреднамеренно повторно посещать одни и те же страницы несколько раз.
  • Перепроверьте все ссылки. Разочаровывает появление страницы с ошибкой 404. Используйте такие инструменты, как Dead Link Checker, чтобы найти неработающие ссылки на вашем сайте.

  Кнопка «Назад» в браузере

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

  «Хлебные крошки»

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

  Хотя этот элемент не требует особых объяснений, стоит упомянуть несколько моментов:

  • Не используйте хлебные крошки в качестве замены основной навигации. Посетители должны использовать главное меню для навигации; панировочные сухари должны только поддерживать посетителей в этом. Когда посетители полагаются на хлебные крошки как на основной метод навигации, а не на дополнительную функцию, это явный признак плохого дизайна навигации.
  На веб-сайте Best Buy «хлебные крошки» поддерживают основную навигацию. Кредит изображения Best Buy.
  • Четко разделите каждый уровень. В качестве разделителей используйте стрелки, а не косые черты. Косая черта (/) может легко конфликтовать с категориями продуктов на веб-сайтах электронной коммерции. Если вы собираетесь использовать косую черту, убедитесь, что ни одна категория товаров не будет иметь косую черту:
  Пример плохой структуры хлебных крошек; Пользователям может быть сложно различать разные уровни этой навигационной цепочки.

  Поиск

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

  Учтите несколько основных правил при разработке окна поиска:

  • Разместите окно поиска там, где пользователи ожидают его найти. На приведенной ниже диаграмме, основанной на исследовании А. Дона Шейха и Кейси Ленц, показано ожидаемое местоположение поля поиска согласно опросу 142 участников. Исследование показало, что самое удобное место — верхний левый или верхний правый угол каждой страницы веб-сайта.
  Согласно одному исследованию, верхний левый или верхний правый угол ваших страниц — лучшее место для окна поиска. Изображение предоставлено Эриком Меллером.
  • Используйте значок увеличительного стекла, чтобы привлечь внимание к области. Значок увеличительного стекла имеет универсальное значение — он знаком большинству пользователей. Nielsen Norman Group рекомендует использовать схематическую иконку, простейшую версию увеличительного стекла.
  Чтобы привлечь внимание к строке поиска, используйте значок в виде увеличительного стекла. Имиджевые кредитные иконки8.
  • Соответствующий размер поля ввода. Слишком короткое поле ввода является распространенной ошибкой. Конечно, пользователи могут ввести длинный запрос в короткое поле, но одновременно будет видна только часть текста, что не очень удобно для использования. На самом деле, когда окно поиска слишком короткое, посетители, как правило, используют короткие, неточные запросы, потому что более длинные запросы могут быть трудными и неудобными для чтения. 27-символьное поле ввода вмещает 90% запросов.
  Большое поле ввода Amazon позволяет посетителям видеть весь свой поисковый запрос. Изображение предоставлено Amazon.
  • Разместите окно поиска на каждой странице. Показывать окно поиска на каждой странице, чтобы пользователи могли получить к нему доступ независимо от того, где они находятся на веб-сайте.

  Дизайн отдельных страниц

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

  Стратегия контента

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

  Вот несколько практических советов по поводу стратегии содержания:

  • Предотвращение информационной перегрузки. Слишком много информации на странице может легко перегрузить посетителей. Есть несколько простых способов минимизировать информационную перегрузку. Одним из распространенных методов является разбиение контента на фрагменты: разбиение контента на более мелкие фрагменты, чтобы помочь пользователям лучше понять и обработать его. Форма оформления заказа является прекрасным примером этого. Отобразите не более пяти-семи полей ввода за раз и разбейте процесс оформления заказа на простые шаги, как показано на этом снимке экрана:
  Пример пошагового процесса оформления заказа. Кредит изображения Witteia.
  • Избегайте жаргона и отраслевых терминов. Каждый неизвестный термин или фраза, появляющиеся на странице, значительно затрудняют понимание информации посетителями. Беспроигрышным вариантом будет писать для всех уровней чтения и подбирать слова, понятные и понятные каждому.
  • Минимизируйте длинные предложения. Пишите небольшими сканируемыми сегментами. Согласно книге Роберта Ганнинга «Как снять туман с делового письма», предложения должны состоять из 20 слов или меньше.
  • Избегайте заглавных букв. Текст, набранный заглавными буквами, подходит для аббревиатур и логотипов. Но лучше избегать всех заглавных букв для абзацев, меток форм, ошибок и уведомлений. В своей книге «Разборчивость печати» Майлз Тинкер упоминает, что использование заглавных букв резко снижает скорость чтения.

  Структура страницы

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

  • Сделайте это предсказуемым. Изучите веб-сайты своих конкурентов, определите общие шаблоны проектирования и согласуйте их с ожиданиями пользователей, используя шаблоны проектирования, знакомые вашей целевой аудитории.
  • Использовать сетку компоновки. Сетка макета делит страницу на основные области и определяет отношения между элементами с точки зрения размера и положения. С помощью сетки объединение разных частей страницы в единый макет становится намного проще.
  Сетка из 12 столбцов хороша для дизайна веб-страницы. Сетки макетов Adobe XD помогают дизайнерам создавать согласованные, организованные дизайны для разных размеров экрана и управлять пропорциями между элементами. Изображение предоставлено Adobe XD.
  • Используйте каркас низкой точности для приватизации основных элементов. Wireframing может сэкономить много времени веб-дизайнерам. Прежде чем строить страницу с реальными элементами, создайте каркас, проанализируйте его и удалите все ненужное.
  Пример низкокачественного каркаса, созданного в Adobe XD. Изображение предоставлено Тимом Хайксом.

  Визуальная иерархия

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

  • Используйте естественные шаблоны сканирования. Как дизайнеры, у нас есть большой контроль над тем, куда смотрят люди, когда просматривают страницу. F-образный шаблон и Z-образный шаблон — это два естественных шаблона сканирования, которые могут помочь вам установить правильный путь для глаз посетителя. Для страниц с большим количеством текста, таких как статьи и результаты поиска, шаблон F лучше, тогда как шаблон Z хорош для страниц, которые не ориентированы на текст.
  Пример F-образного паттерна на сайте CNN. Кредит изображения CNN.
  Пример шаблона Z-сканирования на сайте Basecamp. Изображение предоставлено Basecamp.
  • Визуально определите приоритет важных элементов. Сделайте важные элементы, такие как основной контент или основные кнопки призыва к действию, центральными точками, чтобы посетители сразу их увидели.
  В этом примере выделяется призыв к действию «Выберите план». Кредит изображения MailChimp.
  • Создавайте макеты, чтобы прояснить визуальную иерархию. Мокапы — это высокоточные артефакты дизайна, которые позволяют дизайнерам увидеть, как будет выглядеть окончательный макет. Переупорядочивать элементы в инструменте веб-дизайна намного проще, чем делать это с помощью кода.
  Пример высокоточного макета, созданного в Adobe XD. Кредит изображения Coursetro.

  Поведение при прокрутке

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

  Зная это, вы можете улучшить взаимодействие с пользователем с помощью следующих советов:

  • Поощряйте пользователей прокручивать страницу. Несмотря на то, что люди обычно начинают прокручивать страницу, как только она загружается, контент вверху страницы по-прежнему очень важен. Разместите самый привлекательный контент наверху:
    • Хороший введение . Отличное введение задает контекст содержания и отвечает на вопрос посетителя: «О чем эта страница?»
    • Привлекательные образы . Хорошие изображения могут сопровождать текст и помогать посетителям лучше понять идею или тему.
  В этом примере Tesla использует мощные изображения, чтобы показать преимущества и особенности Model X. Изображение предоставлено Tesla.
  • Ориентируйте своих пользователей. При создании длинных страниц помните, что посетителям по-прежнему требуется чувство ориентации (их текущего местоположения) и чувство навигации (другие возможные пути). Длинные страницы могут затруднить навигацию для пользователей; если верхняя панель навигации теряет видимость, когда пользователь прокручивает страницу вниз, ему придется прокручивать всю страницу вверх, когда он находится глубоко внутри страницы. Очевидным решением этой проблемы является липкое меню, которое показывает текущее местоположение и всегда остается на экране в постоянной области.
  Пока вы думаете о том, как спроектировать веб-страницу таким образом, чтобы свести к минимуму затраты на взаимодействие с пользователем, одним из решений является использование липкой навигации, активируемой прокруткой. Кредит изображения Zenman.
  • Обеспечивает визуальную обратную связь при загрузке нового содержимого. Это особенно важно для веб-страниц, содержимое которых загружается динамически, например для новостных лент. Поскольку загрузка содержимого во время прокрутки должна быть быстрой (не более 2-10 секунд), вы можете использовать зацикленную анимацию, чтобы показать, что система работает.
  Тонкая анимация (например, индикатор загрузки Tumblr) сообщает пользователю, что загружается больше контента. Изображение предоставлено Tumblr.
  • Не злоупотребляйте прокруткой. Пользовательский контроль и свобода являются одними из ключевых эвристик дизайна пользовательского интерфейса, придуманных Якобом Нильсеном. Захваченная прокрутка раздражает большинство пользователей, потому что она лишает контроля и делает поведение прокрутки совершенно непредсказуемым. Когда вы разрабатываете веб-сайт, позвольте пользователю управлять своим просмотром.
  На странице регистрации Tumblr используется перехват прокрутки, что не совсем удобно для пользователей. Изображение предоставлено Tumblr.

  Загрузка контента

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

  • Убедитесь, что регулярная загрузка не занимает много времени. Наша естественная продолжительность концентрации внимания очень низкая. Согласно исследованию Nielsen Norman Group, 10 секунд — это предел! Когда посетителям приходится ждать загрузки веб-сайта, они могут разочароваться и уйти. Даже с самым красивым индикатором загрузки пользователи все равно уйдут, если это займет слишком много времени.
  • Использовать каркасные экраны во время загрузки. Многие веб-сайты используют индикаторы выполнения, чтобы показать, что данные загружаются. Хотя намерение индикатора прогресса хорошее, поскольку он обеспечивает визуальную обратную связь, результат может быть отрицательным. Как отмечает Люк Вроблевски, «индикаторы прогресса по определению привлекают внимание к тому факту, что кому-то нужно подождать. Это похоже на то, как тикают часы — когда вы это делаете, кажется, что время идет медленнее».

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

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

  Кнопки

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

  • Убедитесь, что интерактивные элементы действительно выглядят кликабельными. Внешний вид объекта говорит пользователям, как его использовать. Визуальные элементы, которые выглядят как ссылки или кнопки, но на которые нельзя нажать, например подчеркнутые слова, которые не являются ссылками, или элементы с прямоугольным фоном, но не кнопками, могут легко запутать пользователей.
  • Пометьте кнопки в соответствии с тем, что они делают. Ярлык любого активного элемента интерфейса всегда должен указывать на то, что он будет делать для пользователя. В этом могут помочь описательные метки — пользователи будут чувствовать себя более комфортно, если поймут, какое действие выполняет кнопка. Расплывчатые метки, такие как «Отправить», или абстрактные метки, как в приведенном ниже примере, не предоставляют достаточно информации о действии.
  Хорошим советом по дизайну веб-сайта является четкость текста кнопки, чтобы пользователи понимали, что делает элемент интерфейса. Кредит изображения UX имеет значение.
  • Дизайн кнопок последовательно. Пользователи запоминают детали, сознательно или нет. При просмотре веб-сайта они связывают форму определенного элемента с функциональностью кнопки. Следовательно, визуальная согласованность не только будет способствовать красивому дизайну, но и сделает поведение элемента более предсказуемым для посетителей. Изображение ниже прекрасно иллюстрирует этот момент. Использование кнопок трех разных форм заставит пользователя запутаться.
  При разработке кнопок единообразие обеспечивает удобство использования. Изображение предоставлено Ником Бабичем.

  Изображения

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

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

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

  Видео

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

  Если вы хотите использовать видео на своем сайте, учтите следующие рекомендации:

  • По умолчанию отключить звук с возможностью включения. Когда пользователи заходят на страницу, они не ожидают, что на ней будет воспроизводиться какой-либо звук. Если они находятся в общественном месте и не носят наушники, им может не понравиться внезапный и неожиданный звук. В большинстве случаев пользователи покидают веб-сайт, как только он воспроизводится.
  Видеоролики Facebook воспроизводятся автоматически, как только пользователь достигает их, но звук не воспроизводится, если пользователь не разрешит его. Кредит изображения Facebook.
  • Делайте промо-ролики как можно короче. Согласно исследованию D-Mak Productions, короткие видеоролики более привлекательны для большинства пользователей. Держите бизнес-видео в диапазоне от двух до трех минут.
  Согласно исследованиям, пользователи предпочитают более короткие видеоролики более длинным. Изображение предоставлено D-MAK Productions.
  • Предоставьте альтернативный способ доступа к содержимому. Всегда старайтесь разрабатывать свои продукты для пользователей с различными способностями, в том числе для тех, кто не слышит и не видит. Для доступности включите субтитры и полную расшифровку видео.
  Субтитры сделают ваш видеоконтент более доступным для пользователей с нарушениями слуха или зрения. Изображение предоставлено TED.

  Кнопки призыва к действию (CTA)

  Призывы к действию (CTA) — это кнопки, которые направляют пользователей к вашей цели конверсии. Весь смысл дизайна CTA заключается в том, чтобы направить посетителей к определенному действию. Некоторые распространенные примеры призывов к действию:

  • «Начать пробную версию»
  • «Скачать книгу»
  • «Подписаться на обновления»
  • «Получить консультацию»

  При разработке кнопки CTA учитывайте несколько моментов:

  • Размер. Ваш CTA должен быть достаточно большим, чтобы привлечь внимание. Быстрый пятисекундный тест поможет определить нужный размер. Просмотрите веб-страницу в течение пяти секунд, а затем перечислите элементы, которые вы помните. Если CTA входит в число элементов, то поздравляю! Он соответствует размеру.
  • Визуальное преимущество. Вы можете сделать некоторые кнопки более заметными, сделав их более заметными. Контрастные цвета лучше всего подходят для призывов к действию и создают эффектные кнопки.
  Зеленый цвет кнопки призыва к действию выскакивает за пределы страницы и привлекает внимание посетителя. Изображение предоставлено Mozilla.
  • Негативное пространство. Наряду с размером и цветом, пространство вокруг CTA играет важную роль в визуальной иерархии элементов. Белое (или негативное) пространство создает необходимую передышку и отделяет кнопку от других элементов интерфейса.
  В предыдущей версии домашней страницы Dropbox был хороший пример использования пустого пространства для всплывающего основного призыва к действию. Синий призыв к действию «Зарегистрируйтесь бесплатно» выделяется на голубом фоне. Изображение предоставлено Dropbox.
  • Этикетки. Используйте текст, ориентированный на действие, для меток CTA, так как это побудит посетителей к действию. Используйте сильные глаголы, такие как «Начать», «Получить» или «Присоединиться».
  Evernote предлагает один из самых распространенных, но все же эффективных текстов, ориентированных на действие, для CTA. Изображение предоставлено Evernote.

  Совет: Используйте «тест на размытие», чтобы проверить CTA. Тест размытия — это быстрый способ определить, пойдет ли взгляд пользователя туда, куда вы хотите. Сделайте скриншот своей страницы и примените эффект размытия в Adobe XD (см. пример на Charity Water ниже). Глядя на размытую версию вашей страницы, какие элементы выделяются? Если вам не нравится то, что вы видите, пересмотрите.

  Тест на размытие — это метод выявления фокуса дизайна и визуальной иерархии. Изображение предоставлено Charity Water.

  Веб-формы

  Заполнение форм — один из наиболее важных видов взаимодействия пользователей в сети. Пользователи должны иметь возможность заполнять формы быстро и без путаницы.

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

  • Спрашивайте только то, что требуется. Каждое дополнительное поле, добавленное в форму, повлияет на коэффициент конверсии. Чем больше вы спрашиваете, тем меньше у пользователей будет мотивации предоставлять данные. Всегда думайте о том, почему вы запрашиваете определенную информацию у пользователей и как вы будете ее использовать.
  • Упорядочить форму логически. Например, запрос чьего-то адреса перед именем может показаться странным.
  • Сгруппируйте связанные поля вместе. Группировка создает поток от одного набора вопросов к другому. Группировка связанных полей вместе также помогает пользователю разобраться в информации.
  Для удобства заполнения формы сгруппируйте связанные поля вместе. Изображение предоставлено Nielsen Norman Group.

  Анимация

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

  Вот несколько случаев, когда анимация может улучшить взаимодействие с пользователем:

  • Визуальная обратная связь о действиях пользователя. Хороший дизайн взаимодействия обеспечивает обратную связь. Визуальная обратная связь полезна, когда вам нужно проинформировать пользователей о результате операции. Если есть проблема, функциональная анимация может предоставить эту информацию. Например, анимация встряхивания может указывать на то, что пользователь ввел неправильный пароль.
  Анимации могут помочь пользователям понять проблемы, например, если они ввели неправильный пароль. Кредит изображения Кинетический пользовательский интерфейс.
  • Просмотр состояния системы. Одна из 10 эвристик Якоба Нильсена для удобства использования, видимость состояния системы остается одним из самых важных принципов в дизайне пользовательского интерфейса. Пользователи хотят знать свой текущий контекст в системе в любой момент времени, и веб-сайт должен сообщать пользователю, что происходит, с помощью соответствующей визуальной обратной связи. Загрузка и выгрузка данных — типичные операции в Интернете, и они отлично подходят для функциональной анимации. Например, анимированная полоса загрузки показывает, насколько быстро выполняется процесс, и задает ожидаемую скорость выполнения действия.
  Пример уникальной анимации прогресса загрузки. Изображение предоставлено xjw.
  • Навигационные переходы. Навигационные переходы — это перемещения между состояниями на веб-сайте, например, из представления высокого уровня в подробное представление. Функциональная анимация создает связь между двумя состояниями и плавно переносит пользователей между ними.
  Пример перехода состояния на корпоративном сайте. Кредит изображения Ramotion.
  • Эффекты параллакса. Параллакс — это популярный прием в веб-дизайне, при котором при прокрутке фон перемещается с другой скоростью, чем содержимое переднего плана. Этот эффект может привнести ощущение динамики и движения в веб-макеты. (Узнайте больше о лучших практиках параллакса здесь.)
  • Брендинг . Хорошо продуманная анимация устанавливает эмоциональную связь с посетителями. Это может подчеркнуть сильные стороны продукта и сделать пользовательский опыт по-настоящему восхитительным и запоминающимся.
  Фирменная анимация может создать поистине незабываемые впечатления. Кредит изображения Heco.

  Мобильные устройства

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

  Адаптивный дизайн

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

  • Стремитесь к макету с одним столбцом. Макет с одним столбцом обычно лучше всего работает на экранах мобильных устройств, поскольку он хорошо масштабируется между различными разрешениями устройств и между «портретным» и «альбомным» режимами.
  • Используйте шаблон «Приоритет+» для определения приоритетов навигации по контрольным точкам. Priority+ — это термин, придуманный Майклом Шарнаглом для описания навигации, которая показывает наиболее важные элементы и прячет менее важные элементы за кнопкой «больше». Этот тип навигации использует доступное пространство экрана; по мере увеличения пространства увеличивается и количество доступных вариантов навигации, что приводит к лучшей видимости и большей вовлеченности.

  Этот шаблон особенно хорош для веб-сайтов с большим количеством различных разделов и страниц, таких как новостной веб-сайт или интернет-магазин крупного розничного продавца. В приведенном ниже примере скриншота The Guardian использует шаблон Priority+ для навигации по разделам. Менее важные элементы отображаются, когда пользователь нажимает кнопку «Все».

  В этом примере The Guardian использует шаблон Priority+ для навигации по разделам. Изображение предоставлено Брэдом Фростом.
  • Соответствующий размер изображений для дисплеи и платформы. Веб-сайт должен адаптироваться, чтобы идеально выглядеть на всех различных устройствах и во всех различных разрешениях. Создание красивых изображений в Интернете — одна из основных проблем, с которыми сталкиваются веб-дизайнеры при создании адаптивных веб-сайтов. Чтобы упростить эту задачу, вы можете использовать такие инструменты, как генератор контрольных точек адаптивного изображения, для интерактивного создания контрольных точек для изображений.
  Генератор контрольных точек для адаптивных изображений помогает управлять изображениями разных размеров, позволяя создавать контрольные точки для адаптивных изображений в интерактивном режиме. Кредит изображения Отзывчивые точки останова.

  От интерактивных к сенсорным

  В мобильной сети касания пальцем (не щелчки мышью) создают взаимодействие. Это означает, что при разработке сенсорных целей и взаимодействий применяются разные правила.

  • Сенсорные мишени подходящего размера. Все интерактивные элементы (такие как ссылки, кнопки и меню) должны быть нажимаемыми и немного крупнее. Обратитесь к исследованию MIT Touch Lab, чтобы выбрать правильный размер кнопок. Исследование показало, что 10 × 10 миллиметров — это хороший минимальный размер сенсорной мишени. Это правило работает как для разработки приложений, так и для веб-сайтов.
  Пользователям труднее нажимать на меньшие мишени, чем на большие, поэтому убедитесь, что размер ваших кнопок соответствует размеру. Изображение предоставлено Apple.
  • Более сильные визуальные признаки интерактивности. На мобильных устройствах нет состояния наведения для дополнительной визуальной обратной связи с пользователем. Таким образом, используйте визуальные дизайнерские решения, которые позволяют пользователям правильно предсказать, как поведет себя элемент интерфейса, просто взглянув на него. Например, для кнопок рассмотрите возможность использования квадратной формы с тонкой тенью.
  Пример дизайна кнопки CTA с хорошими визуальными обозначениями. Изображение предоставлено Ником Бабичем.

  Доступность

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

  Пользователи с плохим зрением

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

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

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

  Важнейшей характеристикой текста и других жизненно важных элементов веб-сайта является удобочитаемость, которая требует наличия достаточного контраста между текстом и фоном. Чтобы текст был удобочитаемым для людей с нарушениями зрения, W3C’s Web Content Accessibility Guidelines (WCAG) включает рекомендацию по коэффициенту контрастности. Они рекомендуют следующие коэффициенты контрастности для основного текста и текста изображения:

  • Мелкий текст должен иметь коэффициент контрастности не менее 4,5:1 относительно фона. Предпочтительно соотношение 7:1.
  • Крупный текст (жирный 14 пунктов и обычный 18 пунктов и выше) должен иметь коэффициент контрастности не менее 3:1 по отношению к фону.
  В этом примере плохой контрастности строки текста не соответствуют рекомендациям по соотношению и плохо читаются на их фоне. Изображение предоставлено Ником Бабичем. В этом примере лучшего контраста строки текста соответствуют рекомендациям по соотношению цветов и контрастности и читаются на их фоне. Изображение предоставлено Ником Бабичем.

  Вы можете использовать средство проверки цветового контраста WebAIM, чтобы быстро определить, находитесь ли вы в оптимальном диапазоне.

  Средство проверки цветового контраста WebAIM сообщит вам, соответствует ли ваш коэффициент контрастности стандартам WCAG. Кредит изображения WebAIM.

  Пользователи с цветовой слепотой и слабовидящие

  По оценкам, 4,5% населения мира страдают дальтонизмом (это 1 из 12 мужчин и 1 из 200 женщин), 4% страдают слабым зрением (1 из 30 человек) и 0,6 % слепые (1 из 188 человек).

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

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

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

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

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

  Слепые пользователи

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

  Рассмотрим два примера: во-первых, Threadless, популярный магазин футболок. На скриншоте ниже эта страница мало что говорит об элементе. Единственная доступная текстовая информация — это сочетание цены и размера.

  Пример страницы электронной коммерции, на которой отсутствует подробная информация о товаре. Кредит изображения Безрезьбовой.

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

  В этом примере страница электронной коммерции содержит достаточно подробной информации о продукте. Кредит изображения ASOS.

  При создании текстовых альтернатив изображениям следуйте этим рекомендациям:

  • Все «значимые» изображения требуют описательного альтернативного текста. («Значащая» фотография добавляет контекст к информации на странице.)
  • Текстовая альтернатива не нужна, если изображение носит исключительно декоративный характер и не несет никакой полезной информации для пользователя.

  Удобный интерфейс с клавиатурой

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

  Вот самые основные правила навигации с помощью клавиатуры:

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

  Подробные требования к взаимодействию с клавиатурой можно найти в разделе «Шаблоны проектирования и виджеты» документа W3C «WAI-ARIA Authoring Practices».

  Тестирование

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

  Итеративное тестирование

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

  Цикл обратной связи «Создание-Измерение-Изучение» Эрика Райса является важной частью процесса проектирования и тестирования. Изображение предоставлено Эриком Райсом.

  Проверка времени загрузки страницы

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

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

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

  Что обычно вызывает медленную загрузку?

  • Объекты тяжелого содержимого (такие как встроенное видео и виджеты слайд-шоу)
  • Неоптимизированный внутренний код
  • Проблемы, связанные с аппаратным обеспечением (инфраструктура не позволяет быстро выполнять операции).

  Такие инструменты, как PageSpeed ​​Insights, помогут вам найти причины.

  A/B-тестирование

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

  A/B-тестирование поможет вам понять, какая версия вашего дизайна обеспечивает лучшую конверсию. Кредит изображения VWO.

  Передача дизайна

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

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

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

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

  Заключение

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

  Words by
  Ник Бабич

  Ник Бабич — UX-архитектор и писатель. Ник провел последние 10 лет, работая в индустрии программного обеспечения, уделяя особое внимание исследованиям и разработкам. Он считает рекламу, психологию и кино среди множества своих интересов.

  So gestalten Menschen, die keine Designer sind, eine Professionalelle Веб-сайт

  Designprinzipien und Ideen zur Erstellung einer Professionalellen Website, um deine Markenidentität online zu präsentieren

  Wenn eine Website gut gestaltet ist, sei es mit einem Website-Builder oder mithilfe von Webdesignern und Entwicklern, präsentiert sie dein Angebot, unterstützt die Generierung von Geschäftkontakten, spricht deine bevorzugte Zielgruppe an und kommuniziert klar, dass du eine source bretrausredige. Интернет-магазин Wenn du einen einrichtest, solltest du außerdem eine benutzerfreundliche und sichere Plattform zum Verkauf von Produkten anbieten.

  «Mithilfe einer guten Website kannst du eine starke Markenidentität aufbauen und deine Geschichte so erzählen, wie du es möchtest», so Jonathan Cook, Gründer/Entwickler bei Neon Hive, einer neuseeländischen Webdesign-Agentur. «Вы имеете полный контроль над одним элементом, а не над другим пикселем».

  Das Gute ist, dass du, wenn du loslegst, ganz alleine eine beeindrukende Website erstellen kannst. Voraussetzung ist, dass du beim visuellen Design deiner Website bestimmte Richtlinien befolgst, um die Aufmerksamkeit der Benutzer mit einer benutzerfreundlichen Benutzeroberfläche effektiv zu gewinnen und zu halten.

  Verwende die folgende schrittweise Anleitung und die Design-Tips, um eine beeindruckende Website zu erstellen, die den einzigartigen Wert deines Unternehmens vermittelt.

  1. Lege Ziele und Prioritäten fest, bevor du loslegst

  Wenn wir a erfolgreiches Webdesign und -entwicklung denken, denken wir Domain-Name, einen zuverlässigen Web-Host, Website-Farbschemata und Content-Management-Systeme. Ausschlaggebend für erfolgreiches Website-Designs sind jedoch klare Prioritäten. Starte dein Website-Projekt, indem du festlegst, был определен Unternehmen am wichtigsten ist, damit du weißt, welche Inhalte deine Website enthalten sollte.

  „Schreibe auf, wie Erfolg aussieht und arbeite von dort aus zurück“, sagt Jonathan. «Auf diese Weise kannst du entscheiden, был Teil deiner Website wird».

  Es kann hilfreich sein, wenn du dir andere Websites in deiner Branche ansiehst, um dir Inspiration für das Design zu Holen. Sieh dir die Seiten an und achte darauf, welche Informationen sie bereitstellen, wie sie ihre Marken kommunizieren und was sie anbieten, um die Aufmerksamkeit der Besucher zu gewinnen und zu halten. Sieh dir an, deiner Meinung nach gut funktioniert und was du besser machen möchtest.

  Diese Liste von wichtigen Website-Elementen hilft dir dabei, eine Sitemap zu erstellen. Wie der Name schon sagt, ordnet eine Sitemap deine Website, indem sie die Seiten festlegt, die du haben wirst, und bestimmt, wie die Seiten miteinander verknüpft werden. Später hilft sie dir, deine Informationsarchitektur festzulegen.

  Diese grundlegenden Arten von Seiten sollten auf deiner Website nicht fehlen.

  • Домашняя страница:
    

  Dies ist die Hauptseite deiner Website und daher часто умирают erste Seite, die neue Besucher sehen. Sie sollten die wichtigsten Informationen, die sie benötigen, zuerst sehen, um zu verstehen, was du anbietest, und sie sollten schnell verstehen, wie die Navigation funktioniert.

  • Убер исп:
    

  Hier finden Besucher die grundlegenden Informationen über dein Unternehmen, z. B. wie du angefangen hast, wo du ansässig bist, deine Mission und Profile deiner wichtigsten Teammitglieder. Du kannst auch Links zu Ladenöffnungszeiten und Standorten (falls vorhanden), Links zu Social Media-Seiten und Kontaktdaten einfügen.

  • Услуги:
    

  Je nachdem, in welchem ​​Sektor dein Unternehmen oder deine Organization tätig ist, kann eine Seite mit kurzen Erklärungen zu den Dienstleistungen, die du anbietest, oder Abbildungen deiner Produkte sowie Links zu den detailslierten Sejten, um mehr überense diezurenfestungen, neue Besucher sehr hilfreich sein.

  • Стелланжбот:
    

  Wenn du häufig auf dersuche nach neuen Teammitgliedern bist, könntest du eine Seite mit verfügbaren Positionen einrichten oder ein Formular bereitstellen, über das sich Personen nach offenen Stellen erkundigen können.

  • Блог:
    

  Wenn du regelmäßig Inhalte veröffentlichst, kann eine Blog-Seite ein zentraler Ort sein, an dem Besucher diese finden. Das können Produktoder Service-Updates, Artikel zu deinem Angebot, Profile neuer Projekte und andere Inhalte sein, die dazu beitragen, Website-Besucher über dein Unternehmen zu informieren.

  2. Итак, создан каркас для визуализации веб-сайта

  . Этот каркас является основой для веб-сайта. Ähnlich wie ein Baupplan für ein Haus Liefert er ein zwei Dimensions Bild des Layouts, der Struktur und der Funktionalität deiner Website.

  Каркасы, созданные с помощью Zettel und Stift или digital с помощью веб-сайта-дизайна-инструментов или веб-сайта-создателя erstellt werden, mit denen du die Struktur deiner Website visuell kommunizieren kannst. Es gibt drei Arten von Wireframes – beim Aufbau deiner Website, gelangst du von einem zum nächsten und erreichst dabei mehr Detailtreue («Верность»).

  • Каркасы низкого качества: Diese frühen, groben Skizzen – in der Regel einfache Formen und Platzhaltertexte – eignen sich gut zum Mapping des Navigationsflusses. «Konzentriere dich in dieser Phase lediglich auf den Inhalt und darauf, wie der Benutzer darauf reagieren wird, anstatt darauf, wie die Website tatsächlich aussehen wird», sagt Jonathan. «Dies ist die Planungsstufe, d. час du skizzierst die Website lediglich grob und machst dir Gedanken über die Hierarchie.“

  • Каркасы средней точности: В более поздней фазе есть ночная фотография или Live-текст. Du erstellst Schwarz-Weiß-Renderings, die eine genaue Darstellung des Website-Layouts zeigen. Zur Erstellung dieser Renderings gibt es Tools, für die es kostenlose Testversionen gibt, zum Beispiel Sketch oder Balsamiq. «In diesem Stadium baust du das Gerüst deiner Website», — сказал Джонатан. «Du brauchst kein bestimmtes Design, aber du brauchst klare Linien und genaue Größenangaben».

  • Высокоточные каркасы: In dieser letzten Phase des Designs erstellst du ein Modell, das aussieht wie deine eigentliche Website, mit Bildern, Farbschema und echten Texten. Jetzt kannst du Dinge wie Menüs und Interaktive Inhalte gestalten. «Hier fügst du Farben und Texte hinzu, aber es handelt sich noch nicht um einen funktionierenden Prototyp», сагт Джонатан. «Dies ist nach wie vor nur ein Beispiel für den Aufbau deiner Website».

  3. Denke beim Design an deine Zielgruppe

  Konzentriere dich in den Phasen des Website-Designs darauf, einen Asset für deine Zielgruppe zu erstellen. Das ist schließlich дер Sinn дер Sache. Stelle sicher, dass du in jeder Phase der Website-Entwicklung – von der Festlegung von Prioritäten über die Formatierung bis hin zur Navigation – an die Anforderungen deiner Zielgruppe denkst.

  «So spannend es auch sein mag, eine völlig einzigartige und unorthodoxe Website zu erstellen, zuerst solltest du immer an den Endnutzer denken», Сагт Джонатан.

  Anhand dieser Checkliste kannst du für eine положительный Benutzererfahrung (UX) sorgen.

  • Sorge für eine visuelle Иерархия:
    Eine Solide Hierarchie erleichtert es den Besuchern, schnell Informationen zu erhalten und zu verstehen, wo sie auf deiner Website mehr erfahren können. Zur visuellen Hierarchie zählen Absätze, Farben, Leerzeichen, Wiederholungen und mehr.
  • Weniger ist mehr:
    Achte beim Design auf eine besucherfreundliche Erfahrung, indem du überlegst, ob die Benutzer die Elemente wirklich alle benötigen. Möglicherweise fügst du Features hinzu, die die Website kompliziert machen und die Navigation für deine Zielgruppe erschweren.
  • Sorge für einen klaren Handlungsaufruf (CTA):
    «Bestellung aufgeben», «Jetzt kaufen», «Registrieren», «Kontakt» и sonstige CTAs sollten leicht zu finden und intuitiv sein. Frage dich immer wieder, ob dein Website-Design so konzipiert ist, dass deine Zielgruppe weiß, wohin sie als nächstes klicken soll.
  • Sorge dafür, dass sie zugänglich ist:
    Deine Website sollte responsiv und von jedem Gerät aus zugänglich sein. Überprüfe, wie unterschiedliche Aspekte Deiner Website auf PCs, Tablets und Handys aussehen und funktionieren. Vergewissere dich, dass den Benutzern Texte und Bilder auf verschiedenen Geräten richtig angezeigt werden können und dass sich Buttons und CTAs Problemlos auf verschiedenen Bildschirmen anklicken lassen.

  4. Verwende Fotos, um deine Geschichte zu erzählen

  Eine Website ist ein visuelles Erlebnis, также konzentriere dich auf Bilder, die deine Zielgruppe ansprechen, um zu vermitteln, worum es bei deiner Marke geht. Wenn du noch keine eigenen Fotos zur Veranschaulichung deiner Produkte oder Dienstleistungen hast, gibt es viele Quellen für Stock-Bilder. Веб-сайты, содержащие Unsplash, Pexels и Pixabay, содержат большие объемы информации, а также kostenlosen Bildern, mit denen du sofort loslegen kannst.

  Jonathan schlägt vor, eine Serie von Stockbildern vom selben Set oder vom selben Fotografen auszusuchen. «Auf diese Weise kannst du dafür sorgen, dass der Stil deiner Website konsistent ist», sagt er. „Dies lässt deine Website Professionaleller und dein Unternehmen vertrauenswürdiger erscheinen.“

  Beachte diese Tipps, wenn du Bilder auswählst.

  • Sorge dafür, dass deine Bilder eine Geschichte erzählen.
    Wähle ein Bild nicht nur deshalb aus, weil es hübsch aussieht. Überlege dir, ob das Bild zu deinem Inhalt passt und deine Marke zum Leben erweckt.
  • Sei originell, auch wenn du Stock-Bilder verwendest.
    Triff nicht die offensichtlichste Wahl. Du willst kein Foto auswählen, das ein Besucher soft as Stock-Bild erkennt, das er bereits auf einem Dutzend anderer Websites gesehen hat.
  • Sorge dafür, dass die Personen auf den Fotos deiner Zielgruppe ähneln:
    

  So haben die Besucher das Gefühl, dass deine Website – und deine Marke, dein Produkt oder dein Service – etwas ist, mit dem sie sich identifizieren können und das sie brauchen.

  • Sorge für einen einheitlichen Bildstil:
    Vergewissere dich, dass die visuellen Elemente deiner Website zu deiner Marke passen. Sorge für einheitliche Farben, Schriftarten und Bilder, sodass sie dein Markenbild stärken.
  • Schneide Stock-Bilder zu, um mehr Wirkung zu erzielen:
    Wenn du z. B. selbstgemachtes Eis verkaufst und ein Bild findest, auf dem ein süßes Kind zu sehen ist, das mit seiner Familie Eisst, dann schneide das Foto so zu, dass das Kind im Vordergrund steht. Im Vergleich zu anderen Websites, auf denen das nicht zugeschnittene Bild verwendet wurde, wird es mehr Aufmerksamkeit erhalten und einzigartig aussehen.

  «So spannend es auch sein mag, eine völlig einzigartige und unorthodoxe Website zu erstellen, zuerst solltest du immer an den Endnutzer denken».

  5. Verfolge deine Performance und verbesrere dich mit der Zeit

  Deine Website wächst mit deinem Unternehmen. Verfolge deine Performance von Anfang and mithilfe deiner Website-Berichte, um festzustellen, был функциональным и не был nicht. Nimm anschließend Anpassungen vor, um das Erlebnis für Benutzer zu verbessern – und deine Ergebnisse.

  Интеграция с Google Analytics на веб-сайте, связанном с активацией и поиском, который включает в себя информацию о трафике, и он был отключен. A/B-тесты – более точные тесты разных версий. So kannst du feststellen, welche Elemente deiner Website am besten funktionieren, und dafür sorgen, dass dein CTA deine Besucher motiviert. «Wenn du CTAs erstellen möchtest, die zu einem unvergesslichen Web-Erlebnis beitragen, musst du ständig testen, is am besten funktioniert», Сагт Джонатан.

  Eine Möglichkeit zu sehen, wie Benutzer mit deiner Website Interagieren, ist ein Heatmapping-Tool wie Hotjar, sagt Jonathan. Тепловое картирование включает в себя более четкие графические изображения, отображающие данные, полученные из них на месте. So siehst du, welche Bereiche deiner Website die meiste Aufmerksamkeit erhalten und wie sich dein Design und deine Iterationen zukünftig verbessern lassen.

  „Da es sich um den Echtzeit-Traffic handelt, der nachverfolgt wird, eignet es sich sowohl für neue Websites als auch für Websites, die bereits lange online sind. «Und das Beste daran ist, dass die Darstellung der Heatmaps einfach und verständlich ist».

  Achte auf Details

  Denke bei der Gestaltung deiner Website daran, dass sie der Dreh- und Angelpunkt für deine Marketingaktivitäten ist. Vielleicht ist sie der erste Eindruck, den jemand von deinem Unternehmen hat, und da du möchtest, dass dieser Eindruck gut ist, solltest du keine halben Sachen machen.

  Scheue keine Mühen, um es richtig zu machen, rät Jonathan. Stelle sicher, dass alle deine Funktionen auf Bildschirmen jeder Größe funktionieren, damit die Benutzer auf deiner Веб-сайт navigieren und sie nutzen können. Anderenfalls gehen sie einfach zur Konkurrenz.

  «Ein kostengünstiges Webdesign beetet dir nicht die Flexibilität und Kontrolle, die du benötigst, um deinen digitalen Raum identifizierbar und funktional zu deinem eigenen zu machen», sagt er. „Jedes Element zählt – самостоятельная основа. Verzichte nicht auf Qualität.“

  Как создать современный веб-сайт (9 простых шагов)

  Не знаете, как создать веб-сайт? Это пошаговое руководство проведет вас через ключевые этапы.

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

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

  9 шагов к разработке веб-сайта в 2022 году

  Давайте рассмотрим 9 этапов, через которые вы пройдете при разработке веб-сайта:

  1. Определите объем и цели вашего веб-сайта

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

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

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

  Почему этот сайт должен существовать?

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

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

  Чего должен достичь этот сайт?

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

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

  Как веб-сайт будет служить своей цели и задачам?

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

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

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

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

  2. Исследуйте и планируйте контент

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

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

  Черпайте вдохновение из современных тенденций веб-дизайна и галерей, таких как Dribbble или Made in Webflow. Обратите внимание на элементы дизайна, формулировку или организацию контента, которые, по вашему мнению, могут хорошо послужить вашей аудитории.

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

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

  3. Создайте фирменный стиль

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

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

  Цветовая схема

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

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

  Типографика

  Шрифт, гарнитура и типографика взаимосвязаны, но не взаимозаменяемы. Гарнитуры похожи на родителя — набор глифов или букв в определенном стиле. Шрифты похожи на детей, это разновидность шрифта с определенным весом или размером. Например, Arial — это шрифт, а Arial Black (жирная, более толстая версия) — это шрифт.

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

  ‍

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

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

  Изображения

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

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

  Подпись: Сайт-портфолио Базиля и Веб-сайт Шууги

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

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

  Оба веб-сайта являются яркими примерами гармоничного сочетания цвета, типографики и изображений.

  Голос и тон

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

  Тон может меняться в зависимости от ситуации. Например, тон ваших сообщений в социальных сетях может быть забавным, а иногда и немного язвительным. Тем не менее, вы не хотели бы привносить какую-либо язвительность в тон своих электронных писем службы поддержки. В Webflow мы определяем тон как «Аудитория + контекст + контент = тон». Вы можете ознакомиться с нашими рекомендациями по голосу и тону для получения более подробной информации о том, как мы их разработали.

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

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

  4. Создайте вайрфреймы и начертите копию сайта

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

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

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

  Каркас, созданный Дереком Кларком

  ‍

  Копирование сайта и систематизация веб-страниц

  Хотя многие каркасы включают текст lorem ipsum в качестве заполнителя, лучше быть более преднамеренным с вашей копией. Вам не нужно дорабатывать текст, но вы должны иметь четкое представление о назначении каждого блока текста. Кендра Рейни, руководитель отдела контента в Edgar Allan, рекомендует писать «условный текст» — контент, включающий направленный текст.

  Например, вместо того, чтобы использовать текст lorem ipsum для заголовка, напишите «Захватывающий заголовок, который подчеркивает особенность продукта». Или вместо «отзыва» напишите «краткий отзыв от клиента о том, как этот продукт помог повысить его производительность».

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

  При планировании различных страниц веб-сайта подумайте, какие ключевые слова можно связать с содержанием. Например, если вы создаете веб-сайт электронной коммерции, вам могут понадобиться страницы категорий продуктов на основе ключевых слов с большим объемом поиска. И если вы планируете писать сообщения в блоге (что также отлично подходит для SEO), вы можете создать подкаталог «/blog», где будут храниться все эти сообщения.

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

  5. Выберите предпочитаемый конструктор сайтов

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

  Очевидно, что мы склоняемся к Webflow, но WordPress, Wix, Squarespace и Shopify также являются распространенными платформами, используемыми для веб-дизайна, веб-разработки, CMS и электронной коммерции. Однако стоит отметить, что каждая из этих платформ имеет свои ограничения и недостатки.

  WordPress

  WordPress лучше всего подходит для ведения блога. Хотя он может функционировать как статическая, так и динамическая CMS, вам придется приобрести темы WordPress и заплатить за плагины WordPress, чтобы получить эту функциональность. Многие дизайнеры перешли с WordPress на Webflow и никогда не оглядывались назад.

  Wix и Squarespace

  Wix и Squarespace — это конструкторы веб-сайтов «что видишь, то и получишь» (WYSIWYG), которые могут понравиться новичкам без опыта проектирования или программирования. Однако ограничения платформы затрудняют настройку дизайна. Из-за этого веб-сайты, созданные с помощью Wix и Squarespace, иногда имеют стандартный шаблонный внешний вид, из-за которого все они выглядят одинаково. Трудно выделиться перед целевой аудиторией, если ваш сайт похож на сайт ваших конкурентов. Но вам не нужно верить нам на слово — дизайнер-фрилансер Антонио Сегурадо рассказал, как переход с Squarespace на Webflow помог ему обрести свободу дизайна и создать великолепный индивидуальный веб-сайт.

  Shopify

  Shopify отлично подходит для электронной коммерции, но если вам нужно нечто большее, чем интернет-магазин, он довольно ограничен. И, как и на сайтах Wix и Squarespace, вы рискуете, что ваш интернет-магазин Shopify будет похож на несколько других, выбравших такой же макет. Если вам нравится функциональность электронной коммерции Shopify, но вам нужны дополнительные возможности настройки, рассмотрите возможность использования интеграции Webflow Shopify.

  Webflow

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

  6. Начните создавать свой веб-сайт

  Хотя вам не нужно знать, как кодировать, чтобы использовать Webflow, все же полезно понимать основы веб-дизайна, поэтому давайте сделаем краткий обзор HTML, CSS и баз данных:

  • HTML (язык гипертекстовой разметки) — содержимое веб-страницы и структура этого содержимого на веб-странице и т. д.)
  • Базы данных — это место, где хранится контент.

  Как правило, вам нужен код для преобразования этих элементов в веб-страницу, а затем и в веб-сайт в целом, а также база данных для хранения этого кода. Однако Webflow делает это за вас, объединяя эти компоненты в дизайнере и редакторе Webflow.

  Примечание. Для запуска веб-сайта также требуются веб-сервер, браузер, веб-хостинг и DNS, которые встроены в платформу Webflow.

  С Webflow у вас есть несколько вариантов: спроектировать с нуля, начать с шаблона, использовать клонируемый или использовать комбинацию.

  Дизайн с нуля 

  С Webflow вы строите визуально. Те компоненты, которые вы видите на левой боковой панели конструктора, обычно реализуются с помощью CSS, HTML или Javascript. Когда вы перетаскиваете выбранные компоненты на визуальный холст в Webflow, весь этот код пишется для вас в фоновом режиме. Если начинать с нуля звучит пугающе, подумайте о том, чтобы пройти бесплатный ускоренный курс Webflow 101, который поможет вам приступить к созданию своего первого веб-сайта.

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

  Начните с шаблона

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

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

  Использование клонируемого

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

  Например, если вы уже настроили подкаталог /blog, вы можете добавить клонируемый параметр Time to Read для оценки времени чтения каждого сообщения. Вы можете клонировать взаимодействия, кнопки или целые веб-сайты портфолио, в зависимости от того, что вам нужно для вашего собственного веб-сайта.

  Когда вы найдете понравившийся клон, вы можете открыть его прямо в Webflow и начать играть.

  7. Проведите пользовательское тестирование и соберите отзывы коллег

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

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

  На этом этапе вы ищете отзывы о двух вещах: общем внешнем виде веб-сайта и пользовательском опыте, который сайт обеспечивает. Вы можете собирать и систематизировать отзывы разными способами, например с помощью Google Forms или Typeform, ответов Airtable, доски Miro или даже письменных заметок, которые вы записываете, обсуждая сайт с вашими рецензентами.

  8. Опубликуйте свой веб-сайт

  Если вы используете Webflow в качестве платформы для создания веб-сайтов, нажмите «Опубликовать»! Webflow уже предлагает хостинг на платформе, поэтому все, что вам нужно, — это ваш собственный домен. Если вы еще не настроили свой домен, вы можете купить его в предпочитаемом вами сервисе или перейти через домены GoDaddy или Google непосредственно в Webflow.

  9.

  Управление, масштабирование и развитие

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

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

  Вам необходимо измерить производительность веб-сайта с помощью таких инструментов, как Google Search Console и PageSpeed ​​Insights, среди прочих. Производительность может относиться к техническим аспектам, таким как время загрузки вашего сайта или то, как ваш сайт работает в результатах поиска. Эта информация послужит основой для ваших будущих стратегий оптимизации веб-сайта.

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

  Стратегические изменения могут резко увеличить посещаемость вашего сайта поисковыми системами. Фактически, одна компания увеличила трафик на 300% с помощью четырех стратегий SEO, в то время как другая использовала алгоритмическое SEO для создания 300 целевых страниц в неделю, увеличив количество показов со 100 до 6000 за считанные недели.

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

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

  Как создать веб-сайт

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

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

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

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

  1. Иметь четкое видение и план
  2. Знать последние тенденции
  3. Выбрать конструктор веб-сайтов
  4. Вычислить, сколько будет стоить веб-сайт
  5. Найдите свой шаблон
  6. Создайте собственный бренд
  7. Добавьте контент на свой сайт
  8. Добавьте блог на свой сайт
  9. Добавьте интернет-магазин
  10. Публикуйте
  11. Тестируйте свой сайт везде
  12. 0 Совершенствуйте свой SEO
  13. 0 Получайте отзывы и вносите изменения
  14. Держите его в курсе

  Шаг 1 — Имейте четкое видение и план

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

  Какова цель вашего веб-сайта?

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

  Убедитесь, что вы поставили перед собой цели и решите, какой веб-сайт будет лучше всего отражать присутствие вашего бренда в Интернете.

  Шаг 2. Знайте последние тенденции

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

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

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

  Шаг 3. Выберите конструктор веб-сайтов

  Существуют десятки популярных платформ для создания веб-сайтов. Мы написали статью о лучших конструкторах веб-сайтов на 2021 год. В нее вошли самые известные компании, включая Wix, Squarespace, Shopify и Weebly. Эти компании упрощают создание веб-сайтов, но они созданы для широкой аудитории. На их веб-сайтах есть несколько красивых шаблонов, но возможности их настройки для конкретных целей ограничены. Пользователи в определенных нишах могут найти варианты шаблонов от этих компаний немного ограничивающими. Одним из слабых мест, как правило, являются инструменты, необходимые творческим профессионалам. Да, почти все конструкторы сайтов позволят вам сделать простое портфолио. Но было бы неплохо иметь конструктор веб-сайтов, в котором было бы много красивых шаблонов для этого важного портфолио? В конце концов, работа каждого художника требует немного другого!

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

  Создайте свой профессиональный веб-сайт легко и быстро с помощью Pixpa.

  Начать бесплатную пробную версию
  

  Вот как начать работу с веб-сайтом Pixpa.

  Шаг 4. Определите, сколько будет стоить веб-сайт

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

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

  Шаг 5. Найдите свой шаблон

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

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

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

  Шаг 6. Создайте собственный бренд

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

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

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

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

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

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

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

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

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

  Шаг 7. Добавьте контент на свой веб-сайт

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

  Совет профессионала: ваш сайт-портфолио должен представлять собой небольшую коллекцию ваших лучших работ.

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

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

  Вот видео о том, как добавить контент на свой веб-сайт Pixpa.

  Шаг 8. Добавьте блог на свой веб-сайт

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

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

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

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

  Фотограф Миша Мартин Блог Веб-сайт

  Шаг 9. Добавьте интернет-магазин

  У вас есть продукт, который вы хотите продать? Шаблоны Pixpa позволяют добавить магазин электронной коммерции к любому дизайну.

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

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

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

  Шаг 10. Публикация

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

  Шаг 11. Тестируйте свой сайт везде

  Однако не останавливайтесь на достигнутом. Всегда есть мелочи, которые застают вас врасплох и выглядят по-другому при проверке. Ваш первый шаг после публикации должен состоять в том, чтобы открыть сайт на как можно большем количестве различных устройств и браузеров. Поэкспериментируйте с настройками, цветами и макетами, пока все не будет выглядеть великолепно. Посмотрите на это на компьютерах, планшетах и ​​телефонах. Затем разветвляйтесь. Попросите своих друзей и семью провести «бета-тест» для вас. Возьмите его на тест-драйв и получите некоторые отзывы. Быстро загружается? Есть ошибки? Если у вас есть магазин, работает ли корзина и касса? Установите код купона на 100-процентную скидку и попросите друзей сделать пробные покупки. Однако не забудьте удалить этот код позже!

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

  Веб-сайт фотографии Оливии Джонс

  Шаг 12. Совершенствуйте SEO

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

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

  Самые простые ключевые слова для хорошего ранжирования должны быть как можно более конкретными. Например, добиться высокого рейтинга вашей страницы в разделе «художники-пейзажисты» может быть очень сложно. Так что будьте как можно более конкретными. Что вы делаете? Как насчет «Художника Смоки-Маунтинс в Эшвилле, Северная Каролина»? Если вы в основном продаете на местном уровне, добавление вашего города может быть большим подспорьем. Если вы работаете в одной среде или по одному предмету, включение этих предметов также полезно.

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

  Шаг 13. Получение отзывов и внесение изменений

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

  Шаг 14. Обновляйте

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

  Вспомните, когда вы в последний раз посещали веб-сайт малого бизнеса и понимали, что это всего лишь цифровая версия бумажного флаера. У них, вероятно, был такой же макет, информация и брендинг с тех пор, как они открылись несколько десятилетий назад. С одной стороны, хорошо, что они заработали! Но с другой стороны, они могли бы работать намного лучше. Веб-сайты — это ваш центр в киберпространстве. Постоянно добавляя и обновляя контент, вы сохраняете сайт свежим и актуальным. И последнее: чем больше обновлений вы сделаете, тем лучше будет ваша SEO-эффективность! Чтобы получить несколько полезных советов, прочитайте нашу статью о том, как создать и поддерживать профессионально выглядящий веб-сайт для малого бизнеса.

  Заключение

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

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

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

  Начать бесплатную пробную версию
  

   

  10 шагов для повышения вовлеченности пользователей

  Веб-строительство Создание

  16 сентября 2022 г.

  Майша Р.

  20 мин Чтение

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

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

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

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

  Загрузить электронную книгу: Создайте свой первый веб-сайт за 9 летEasy Steps

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

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

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

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

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

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

  1. Определите цель вашего веб-сайта
  2. Ищите вдохновение для веб-дизайна
  3. Выберите платформу веб-сайта
  4. Выберите тему
  5. Настройте свой сайт
  6. Настройте страницы
  7. Оптимизируйте навигацию сайта16 для мобильных устройств 90 -friendly
  8. Проверьте производительность своего сайта и запустите его
  9. Отслеживайте свой сайт и улучшайте его по ходу работы

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

  1. Определите цель вашего веб-сайта

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

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

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

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

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

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

  2. Исследования для вдохновения в области веб-дизайна

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

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

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

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

  3. Выберите правильную платформу веб-сайта

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

  Одной из популярных платформ для веб-сайтов является WordPress, система управления контентом (CMS). Он отлично подходит для создания различных веб-сайтов — от цифровых резюме и онлайн-каталогов до крупных магазинов электронной коммерции. Его надежные инструменты для ведения блогов также делают его популярным выбором для создателей контента.

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

  В Hostinger наши планы виртуального хостинга стоят от 1,99 долларов США в месяц до 3,99 долларов США в месяц . Все подписки включают гарантию безотказной работы 99,9% , бесплатный сертификат SSL и регулярное резервное копирование для обеспечения безопасности файлов.

  Plan Features

  Websites

  Email Accounts

  Bandwidth

  Free SSL

  Free Domain

  Allocated Resources

  Single

  $1.99/mo

  100 GB

  Premium

  $2.99/mo

  Unlimited

  Безлимитный

  Бизнес

  $3,99/мес

  Безлимитный

  Безлимитный

  Если вам понадобится помощь в настройке, наша служба поддержки 24/7 будет готова помочь вам через чат.

  Вот основные преимущества использования WordPress:

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

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

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

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

  Ниже приведены некоторые преимущества использования Zyro Website Builder:

  • Управляемый облачный хостинг. Этот создатель веб-сайта позаботится о настройке и обслуживании серверной части для своих клиентов.
  • Бесплатные инструменты ИИ. Эти функции могут помочь вам провести мозговой штурм вашего личного бренда или визуальной идентификации компании, начиная от названия компании и заканчивая логотипом и слоганом. Генератор контента AI также отлично подходит для создания шаблонов веб-копий.
  • Встроенные инструменты SEO. В отличие от WordPress, нет необходимости устанавливать расширение для оптимизации вашего сайта для поисковых систем. Zyro Website Builder оснащен функциями редактирования замещающего текста изображения, изменения URL-адреса страницы и вставки метаданных для страниц результатов поисковой системы (SERP).
  • Универсальные функции интернет-магазина. Отслеживание заказов, управление запасами, применение скидок и несколько вариантов онлайн-платежей доступны для пользователей Zyro eCommerce и eCommerce plus. Кроме того, создатель сайта не взимает комиссию.

  Планы Zyro Website Builder варьируются от 1,99 долл. США в месяц до 13,99 долл. США в месяц . Все подписки поставляются с бесплатным SSL-сертификатом , удалением рекламы, стоковыми фотографиями через Unsplash и настраиваемым значком для брендинга вашего сайта.

  Помимо Zyro, другие популярные конструкторы веб-сайтов на рынке включают Squarespace, Weebly и Webflow.

  После выбора создателя веб-сайта обязательно получите доменное имя, которое посетители вставляют в свой браузер для открытия сайта, например, example.com.

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

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

  Не забудьте выбрать подходящее расширение доменного имени. Обычно используется TLD .com , который является обычным для коммерческих веб-сайтов. Цена начинается с $8,99/год . Выберите домен верхнего уровня с кодом страны, если вы хотите ориентироваться на определенный рынок. Например, если ваш бизнес работает в США, хорошей идеей будет регистрация домена .us .

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

  4. Выберите тему веб-сайта, соответствующую вашей цели

  После выбора платформы веб-сайта и доменного имени следующим шагом в изучении дизайна веб-сайта является выбор темы или шаблона.

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

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

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

  Стоимость одной темы обычно начинается от $40/лицензия и выше до сотен долларов.

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

  Подписка Template.net начинается с 3,99 долларов США в месяц , включая неограниченное использование бесплатных стоковых изображений, шрифтов и иллюстраций.

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

  • Набор функций. Лучше всего выбрать тему с функциями, подходящими для целей вашего сайта. Например, те, кто владеет интернет-магазином, могут захотеть использовать тему с готовой страницей магазина, а также макеты для бестселлеров и товаров со скидкой.
  • Варианты настройки. Проверьте варианты шрифта, цвета и макета, предоставляемые темой. Некоторые разработчики могут также включать несколько готовых страниц и наборов значков.
  • Оперативность. Проверьте, может ли тема веб-сайта адаптироваться к размерам экрана настольного компьютера, планшета и мобильного телефона.
  • SEO. Разработчики темы могут заявлять, что их продукт имеет чистый и легкий HTML-код, который отлично подходит для производительности и SEO. Один из способов убедиться, что это правда, — проверить файл с помощью службы проверки разметки.
  • Совместимость с расширениями. Используйте тему, которая хорошо работает с подключаемыми модулями WordPress, которые вы планируете использовать, чтобы не нарушить работу веб-сайта.
  • Совместимость с браузером. Тема должна хорошо выглядеть и правильно работать во всех основных браузерах, таких как Google Chrome, Safari и Firefox.
  • Рейтинги и отзывы. Они могут указать, правильно ли работает тема и какие проблемы с ней возникали у предыдущих клиентов.
  • Последнее обновление. Желательно, чтобы команда разработчиков обновляла продукт каждые шесть месяцев. Использование устаревшей версии может сделать ваш сайт уязвимым для проблем с безопасностью.
  • Служба поддержки клиентов. Посмотрите, какие каналы предлагает разработчик, чтобы помочь с темой. Многие предлагают руководства пользователя, документацию или поддержку по электронной почте.

  Что касается разработчиков веб-сайтов, таких как Zyro или Squarespace, шаблоны обычно предоставляются бесплатно в специальной библиотеке.

  Все шаблоны в коллекции Zyro Website Builder с самого начала имеют современный и адаптивный дизайн. Они относятся к различным отраслевым категориям, начиная от веб-сайтов электронной коммерции и фотографий и заканчивая базовыми целевыми страницами.

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

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

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

  5. Настройка веб-дизайна

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

  Для тех, кто использует WordPress в качестве платформы, откройте Theme Customizer , выбрав Dashboard -> Appearance -> Customize .

  Имейте в виду, что настраиваемость вашего веб-сайта зависит от темы.

  Например, Twenty Twenty-One от WordPress позволяет редактировать цвет фона и изображение, но нет встроенных настроек для изменения шрифта. Однако для этого можно вставить собственный код CSS.

  С другой стороны, в премиальной теме Astra можно изменить цвета, семейство шрифтов, формы кнопок и макет.

  Пользователи Zyro Website Builder могут перейти на Dashboard -> Edit Website. Это даст вам доступ к редактору перетаскивания, где вы можете изменять стили дизайна и добавлять новые элементы сайта с боковой панели.

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

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

  Ниже приводится краткое объяснение того, что передают все основные цвета:

  • Красный. Символизирует любовь, аппетит или силу. Известные бренды, использующие этот цвет, включают Coca-Cola, Netflix и Target.
  • Оранжевый. Символ дружелюбия или осторожности. Amazon использует этот цвет в своем логотипе.
  • Желтый. Относится к ясности и молодости. Также часто используется для привлечения внимания. Энергетическая компания Shell использует этот цвет в своем бренде.
  • Зеленый. Часто ассоциируется со здоровьем, деньгами и природой. Spotify, Starbucks и Whole Foods — некоторые известные бренды, использующие этот цвет.
  • Синий. Символизирует безопасность и доверие. Это также популярный выбор среди технологических брендов, таких как Facebook и Microsoft.
  • Фиолетовый. Демонстрирует царственность, мудрость и красоту. Вы можете найти этот цвет в конфетах таких брендов, как Cadbury и Milka.

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

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

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

  Сайт Ritual — отличный пример удачной цветовой гаммы.

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

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

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

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

  Согласно Canva, существует три основных типа шрифтов:

  • Serif. Известные примеры включают Times New Roman и Cambria. Эти шрифты имеют декоративные окончания на штрихах. Поскольку они обычно символизируют авторитет и формальность, они более популярны среди финансовых, государственных или юридических агентств.
  • Без засечек. Helvetica и Arial — известные представители этого типа шрифта. Штрихи имеют ровную ширину и не имеют концов. Технологические и стартап-бренды обычно используют их, поскольку эти шрифты обычно передают модернизм.
  • Скрипт. Эти шрифты имеют рукописный и курсивный стиль. Как правило, они символизируют творчество или элегантность. Таким образом, они более широко используются в сфере моды, продуктов питания или напитков.

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

  Сайт Great Jones — отличный пример такой практики. Он использует Cooper Black для логотипа и заголовков, а Hope Sans зарезервирован для подзаголовков, ссылок и цитат.

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

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

  После настройки цветовой схемы и шрифтов перейдите к следующему разделу.

  6. Настройка основных страниц

  Как правило, сайт содержит следующие веб-страницы: 

  • Домашняя страница.
  • О странице.
  • Контактная страница.
  • Страница блога.
  • Страница продукта или услуги.

  Чтобы создать веб-страницу на WordPress, перейдите в Pages -> Add New в панели администратора. Вот как выглядит интерфейс, если вы используете редактор Gutenberg:

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

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

  Давайте рассмотрим, как должна выглядеть каждая веб-страница: 

  Домашняя страница

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

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

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

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

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

  Страница «О нас»

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

  На этой странице о зубной пасте Bite, например, есть УТП компании, фотография основателя и ознакомительное видео.

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

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

  Контактная страница 

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

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

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

  Вот несколько советов по созданию страницы контактов:

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

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

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

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

  Страница блога

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

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

  Веб-сайт Куки и Кейт — хороший пример этой структуры:

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

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

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

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

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

  Страница продукта или услуги

  Эта веб-страница необходима тем, кто ведет сайт электронной коммерции или бизнес-сайт. В этой категории есть два типа страниц:

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

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

  Тем не менее, вот несколько общих советов, которым вы можете следовать:

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

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

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

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

  7. Оптимизация взаимодействия с пользователем

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

  Навигация 

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

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

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

  Вот пример с ASOS:

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

  Веб-сайт Damn Good Beauty — отличная демонстрация этого:

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

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

  Визуальная иерархия

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

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

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

  Во многих случаях этот формат просто чередует размещение текста и изображения зигзагом, как в этом примере с сайта Trello:

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

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

  Скорость страницы

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

  Размер элементов веб-дизайна может существенно повлиять на время загрузки сайта. Например, если изображение больше 1 МБ, скорее всего, пострадает скорость. Google рекомендует, чтобы размер каждой страницы веб-сайта не превышал 500 КБ.

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

  • Оптимизируйте медиафайлы. Используйте инструменты сжатия, чтобы уменьшить размер файла. Для изображений обязательно используйте метод без потерь, чтобы предотвратить потерю качества изображения.
  • Создайте минималистичный дизайн. Другими словами, размещайте на сайте только самые необходимые элементы.
  • Если у вас есть доступ к файлам сайта, уменьшите их. Удалите все ненужные строки, пробелы и нефункциональные символы, так как они добавляют коду веса. Пользователи WordPress могут вручную минимизировать файлы CSS, HTML и JavaScript или использовать плагин.

  Доступность

  Исследования показывают, что когда веб-сайт недоступен, 71% инвалидов покинут его. Только в США проживает более 61 миллиона человек с ограниченными возможностями, поэтому неспособность удовлетворить эту демографическую группу может значительно повлиять на ваш веб-трафик.

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

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

  Вот несколько способов улучшить доступность веб-сайта:

  • Включить замещающий текст для изображений. Помимо того, что они отлично подходят для SEO, они также полезны для приложений, которые переводят веб-контент в речь или шрифт Брайля для слабовидящих людей.
  • Помните о доступности клавиатуры. Некоторые физические недостатки затрудняют использование мыши или сенсорной панели для навигации. Убедитесь, что каждый интерактивный элемент на веб-сайте можно использовать с помощью клавиши Tab, например ссылки, кнопки призыва к действию и формы.
  • Используйте удобочитаемые и осмысленные URL-адреса. Еще одна хорошая SEO-практика, улучшающая доступность. Убедитесь, что ссылка и ее якорный текст содержат достаточно информации о веб-странице.
  • Используйте средство исправления специальных возможностей. Такие инструменты могут предоставлять все функции, необходимые для удобства использования веб-сайта людьми с ограниченными возможностями. Модный бренд Zara использует сервис EqualWeb, как показано ниже:

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

  8. Сделайте свой веб-сайт удобным для мобильных устройств

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

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

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

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

  9. Протестируйте свой веб-сайт и запустите его

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

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

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

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

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

  После сбора результатов и внесения некоторых корректировок не стесняйтесь опубликовать свой веб-сайт.

  10. Отслеживайте и настраивайте свой сайт по ходу работы

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

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

  • Просмотры страниц. Показывает, сколько страниц просматривает пользователь после перехода на веб-сайт.
  • Средняя продолжительность сеанса . Этот показатель показывает, сколько минут человек проводит на веб-сайте после его первого посещения. Как правило, хорошее число, к которому нужно стремиться, составляет от двух до трех минут.
  • Курсы конвертации. Процент посетителей веб-сайта, выполнивших желаемое действие, например, купивших продукт или подписавшихся на рассылку новостей по электронной почте.
  • Показатели отказов. Доля пользователей, которые покидают сайт, не предприняв никаких действий. Ориентиром для интернет-магазина является 20%-45% , а на веб-сайте, не связанном с электронной коммерцией, это 35%-60% посетителей.
  • Источники трафика. Люди могут посещать сайт через поисковые системы, социальные сети, электронную почту, онлайн-рекламу или ссылающиеся веб-сайты. Знание этого может помочь выяснить, какие маркетинговые каналы наиболее эффективны для вашего бизнеса.
  • Демография аудитории. Может раскрывать пол, возраст и интересы посетителей сайта. Такая информация может помочь разработать более целенаправленную маркетинговую стратегию.

  Google Analytics предоставляется бесплатно, и для начала работы требуется только учетная запись Google. Пользователи WordPress могут вручную добавить идентификатор отслеживания в файл functions.php или использовать плагин для подключения инструмента к своему веб-сайту.

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

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

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

  • Удобство для пользователя. Все функции и элементы должны быть доступны и просты в использовании.
  • Организованная структура. Организация страниц должна быть логичной, чтобы облегчить пользователю поиск нужной информации.
  • Читаемость. Шрифты, цвета и расположение должны обеспечивать удобство сканирования содержимого.
  • Эстетическая однородность. Все веб-страницы должны использовать одинаковые элементы дизайна для сохранения визуальной гармонии, индивидуальности бренда и простоты использования.
  • Оптимизация скорости. Каждая особенность дизайна должна иметь функцию, которая приносит пользу пользователю и цели веб-сайта. Не может быть избыточности, которая могла бы повлиять на время загрузки.

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

  • Наборы значков или иллюстраций. Они отлично подходят для того, чтобы сделать любой веб-сайт более привлекательным. В DrawKit есть несколько бесплатных наборов для различных отраслевых категорий. Многие доступные художники также доступны на дизайнерских площадках, таких как Fiverr или Upwork.
  • Стоковые фотографии. Выбирайте фотографии с человеческими лицами, поскольку при правильном использовании они вызывают доверие. Unsplash — отличное место для бесплатного поиска таких изображений. Обязательно выбирайте только качественные изображения, чтобы поддерживать доверие.
  • Плагин конструктора страниц . Этот тип инструмента предназначен для пользователей WordPress, которые хотят внедрить опыт использования конструктора веб-сайтов с перетаскиванием в CMS. Известный пример — Elementor.
  • Производитель логотипов . Рассмотрите этот инструмент, если у вас еще нет брендинга для вашего бизнеса и вы не хотите нанимать дизайнера. Он может создать профессионально выглядящий логотип за считанные минуты.
  • Канва . Это бесплатное программное обеспечение для дизайна отлично подходит для создания баннеров для веб-сайтов и избранных изображений для сообщений в блогах. Он также отлично подходит для редактирования фотографий в последнюю минуту и ​​маркетингового контента в социальных сетях.

  Заключение

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

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

  No related posts.

  0
  • Вперед Шаблоны для емейл рассылки: 100+ HTML шаблонов для email рассылок бесплатно
  • Назад Сделать из фото мультяшку: Создайте мультяшную картинку из фото онлайн.

  Добавить комментарий Отменить ответ

  Ваш адрес email не будет опубликован. Обязательные поля помечены *

  Комментарий *

  Имя *

  Email *

  Сайт

  Рубрики
  Рубрики
  • Css
  • Html
  • Http
  • Javascript
  • Linux
  • Photoshop
  • Адаптив
  • Верстка
  • Вопросы и ответы
  • Макет
  • Развитие сайтов
  • Разное
  • Сайт
  • Советы
  • Шаблон
  • Шаблоны
  • Шрифт
  • Шрифты