Лучшие 10 советов по веб-дизайну, чтобы получить идеальный сайт

Моя мантра: простая всегда лучше. Он обращает внимание на то, что важно для пользователя почти мгновенно. Кроме того, простота привлекательна.

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

У:

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

Не:

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

3. Направляйте глаза пользователя с помощью визуальной иерархии.

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

Эстетика
—

4. Выбирайте свои цвета стратегически.

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

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

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

У:

• Установите иерархию цвета. Используйте один цвет для основных элементов (первичных), основных (вторичных) и других менее важных элементов (фона).
• Придерживайтесь последовательных тем. Когда у вас установлена ​​установленная цветовая палитра, придерживайтесь ее. Держите свои основные, вторичные и фоновые цвета согласованными на всем сайте.

Не:

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

5. Не экономьте на фотографии.

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

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

У:

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

Не:

• Используйте очевидные stock photography. Оперативное слово «очевидно». Изображения на складе могут быть полезными, но только если пользователь не понимает, что это товар.
• Используйте низкие разрешения. Это эпоха высокой четкости, поэтому фотография с низким разрешением делает марку кажущейся старой или неудачной. Бонусный наконечник: используйте компрессор, чтобы уменьшить большие размеры файлов, чтобы вы могли получить свой торт и съесть его.

6. Оптимизируйте типографику для создания своего бренда.

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

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

Подобно цветам и фотографии, типография поставляется в разнообразных стилях, поэтому выбирайте ту, которая больше всего дополняет ваш бренд. Чтобы добавить немного утонченности в веб-дизайн Her Habesha выше, дизайнер Top Level Studio Ubique использует яркую, но стильную типографию для названий. Но обратите внимание, как типография меняется на тонкие, современные без засечек для названий продуктов ниже изображений для достижения баланса.

У:

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

Не:

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

Функциональность
—

7. Оптимизируйте навигацию.

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

8. Приоритет мобильных устройств.

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

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

У:

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

Не:

• Используйте сайты m.dot. Те мобильные сайты, которые имеют «м.» В своем URL-адресе, были ранним решением для мобильных мобильных моделей, прежде чем разработчики знали, что мобильный телефон обойдет рабочий стол. Сегодня они медленнее загружают и наносят ущерб SEO — лучшим вариантом является создание единого сайта, который работает на всех соответствующих устройствах.

9. Сделать текст легко читаемым.

10. Сообщайте, что вы хотите для своего дизайнера.

У тебя это есть! (Или, по крайней мере, ваш дизайнер делает.)

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

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

Хотите найти идеального дизайнера для вашего веб-дизайна?

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