Как сделать дизайн сайта? 8 базовых принципов

1. Совместите визуальную привлекательность с бизнес-целью

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

Возьмем следующие примеры:

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

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

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

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

Как разработать сайт, чтобы этого избежать?

Ответ сведем к следующим шагам:

• Запишите цель вашего сайта. Это может быть генерация потенциальных клиентов, увеличение продаж или более высокая вовлеченность.
• Запишите нишу вашего сайта. Например, товары для спорта, мода и красота, здоровье, домашние животные или продукты для электронной коммерции.
• Выберите цвета вашего логотипа, фона, кнопок, баннера и текста соответственно. Для логотипа, баннера и фона сайтов про моду и красоту наиболее эффективны мягкие цвета: светло-голубые или розовые.
• Для еды и напитков наиболее подходящими являются красный и желтый (McDonald's и Hungry Jacks - отличные примеры).
• И последнее, но не менее важное: разместите на своем веб-сайте информацию о вашей бизнес-цели.

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

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

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

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

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

Instagram у себя отлично реализовал этот закон.

Первое, что привлекает внимание, это фирменный знак «Instagram» в черном и стильном шрифте на простом белом фоне. Это также говорит о том, что это бренд о творчестве.

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

Следующий элемент, который привлечет внимание - это синяя кнопка с надписью «Войти через Facebook». Они могли бы легко вставить туда кнопку «Зарегистрироваться», но не сделали этого.

Это потому, что вам не нужно заполнять форму и напрямую входить в систему, используя свои учетные данные Facebook. И это помогает.

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

B. Золотое сечение

Золотое сечение - это метод дизайна, созданный в древние времена и до сих пор используемый современными дизайнерами! Этот принцип проверен временем и является надежным правилом для подражания.

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

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

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

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

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

C. Правило третей

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

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

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

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

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

D. Закон подобия

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

Три бренда Slack выделены красными горизонтальными линиями. Все они были помещены вместе в прямоугольник и равномерно распределены.

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

2. Сделайте так, чтобы сайт загружался быстрее

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

Если быть точным, ваш контент «выше сгиба» (до прокрутки) должен загружаться в течение 3 секунд (максимум) при нажатии или вводе в браузере.

Согласно Unbounce:

• Если загрузка вашего веб-сайта занимает на 100 миллисекунд дольше, чем обычно, коэффициент конверсии может снизиться на 7%.
• На страницах со временем загрузки 5 сек. коэффициент отказов примерно в пять раз выше, чем на страницах с временем загрузки 2 сек.
• 73% мобильных пользователей сталкиваются с веб-сайтами, которые загружаются слишком долго.

HostingTribunal, компания, которая специализируется на оценке сетевого хостинга, сообщила, что для интернет-магазина, приносящего 100 000 долларов ежедневного дохода, задержка в 1 секунду может потенциально привести к 2,5 миллионам долларов в год пропущенного дохода.

Будьте быстрыми!

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

3. Сделайте так, чтобы ваш сайт было легко найти

Ваш сайт должен быть легко доступен с помощью Google (или любой другой поисковой системы).

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

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

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

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

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

Социальные сети могут включать в себя страницы в Facebook, Twitter, LinkedIn и Instagram, так как число пользователей социальных сетей достигло 3,5 миллиарда к 2019 году.

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

4. Соблюдение формальных правил, правил конфиденциальности и Cyber Security

Готовьтесь к довольно пугающим новостям ... согласно недавнему открытию Cybint:

• В среднем хакерские атаки происходит каждые 39 секунд.
• Малые предприятия испытывают примерно 43% всех кибератак.
• Компании заплатят сумму, превышающую 2 триллиона долларов из-за киберпреступности в 2019 году.
• С 2013 года около 4 миллионов записей были украдены из-за ежедневной утечки данных.

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

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

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

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

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

4. Добавьте социальные доказательства или отзывы

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

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

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

5. Обеспечьте доступность

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

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

Примерно 1 из 7 человек в мире страдает от мигрени.

-Migraine Trust

Это составляет около 1,03 миллиарда человек, а около 80% страдающих мигренью страдают от фотофобии!

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

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

6. Сделайте фокус на удобстве использования

Это относится к тому, насколько веб-сайт удобен для пользователя, например: насколько легко посетители веб-сайта могут перемещаться по сайту, насколько видны кнопки запроса или призыва к действию (CTA) и как быстро пользователи могут найти необходимую информацию.

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

Вот некоторые факторы обзора юзабилити:

• Как сайт реагирует на клики пользователей?
• Различима ли ваша основная информация?
• Является ли навигация интуитивно понятной?
• Содержит ли макет только один элемент в фокусе пользователя?
• Есть ли опция «живого чата»?
• Постоянно ли видна панель поиска?
• Есть ли на нем другие валюты? (для электронной коммерции)
• Являются ли цвета естественными для глаз?
• Является ли содержание явным и простым для понимания?
• Хорошо ли используется пустое пространство?
• Есть ли у него актуальные и качественные картинки?

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

7. Убедитесь, что ваш сайт масштабируемый

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

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

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

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

8. Обеспечьте простоту обслуживания

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

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

Если вы используете систему управления контентом (CMS), такую как WordPress или Joomla, то это изменение не проблема. Все, что вам нужно сделать, это войти в свою CMS и отредактировать свой сайт так, как считаете нужным.

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

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

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

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

From Web Alive (https://www.webalive.com.au/good-website-design-principles/)

Подписывайтесь на наш Facebook. Лайфхаки для бизнеса на каждый день https://www.facebook.com/oaomtt/