Почему простой дизайн сайта лучше с научной точки зрения / Хабр

Исследование

, проведенное Google, имело два ключевых вывода:

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

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

Но почему?

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

Приступим!

Что же такое «прототип» сайта?

Если я скажу «мебель», какой образ появится у вас в голове?

Если вы похожи на 95% людей, вы подумаете о стуле.

Если я спрашиваю, какой цвет ассоциируется с «мальчик», вы думаете «синий» (а девочка — «розовый» и т.д.)

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

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

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

Если бы я сказал «сайт модной женской одежды», вы могли бы представить что-то вроде этого:

А теперь посмотрим на прототип сайтов «интернет-магазина одежды», заметили, что они все очень похожи и имеют схожую структуру сайта? (даже если этот сайт из другой страны).

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

Что такое когнитивная беглость?

Основная идея, лежащая в основе

когнитивной беглости

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

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

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

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

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

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

Что происходит, когда вы оправдываете ожидания?

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

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

До:

После:

Несколько ключевых изменений привели к огромным результатам:

• Простой и понятный дизайн и структура сайта;
• Гораздо более «открытый» дизайн с грамотным использованием пробелов;
• Изображения содержат один продукт с высоким разрешением и контрастными цветами.

Давайте ознакомимся со

статистикой

этого редизайна.

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

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

Визуальная обработка информации и сложность сайта

В этом

совместном исследовании

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

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

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

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

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

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

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

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

Каждый элемент передает тонкую информацию

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

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

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

Рассмотрим на примере редизайн логотипа MailChimp.

Когда они хотели, чтобы бренд «вырос», они не добавили обычное «Мы работаем с электронной почтой с 2001 года! Три миллиона человек доверяют нам! Вот почему мы классные! Бла бла бла…»

Было:

Стало:

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

Mailchimp прошел еще один редизайн логотипа в 2018 году:

Каковы были руководящие принципы для второго крупного редизайна?
Простота была первостепенной:

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

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

«Рабочая память» и Святой Грааль обращения

Согласно

исследованию

психолога из Принстона Джорджа А. Миллера, мозг взрослого человека способен хранить от пяти до девяти «кусочков» информации в своей краткосрочной или «рабочей» памяти.

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

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

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

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

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

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

7 способов создать простой сайт

1. Исследуйте свою аудиторию и сайты, которые они посещают больше всего.
   Посмотрите тематические исследования об изменениях дизайна в вашей категории.
2. Создайте коллаж для своего сайта со всеми «рабочими» компонентами, которые вы обнаружите.
3. Соблюдайте правила когнитивной беглости.
   Расположите элементы там, где посетители ожидают их найти.
4. Не добавляйте лишние элементы, если они не сообщают о том, что волнует вашего посетителя.
5. Меньше значит больше. Одно большое изображение обычно лучше, чем несколько маленьких; один столбец вместо трех; больше пробелов вместо большего количества «элементов».
6. Убедитесь, что ваш сайт соответствует ожиданиям по ценам, эстетике, скорости и т. д.
7. Сохраняйте оригинальность. «Прототип» сайта не означает, что каждый аспект вашего сайта должен соответствовать этой форме.

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

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

Заключение

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

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

Больше подобных статей можно читать на моём Telegram-канале
«Growth Lab» или на сайте «growth-lab.pro».

Высоких вам конверсий!

Простой хороший веб-дизайн

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

Почему же упрощение сайта является такой важной задачей? Давайте разберемся.

Преимущества простого веб-дизайна

1. Упрощается навигация;

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

2. Дизайн загружается молниеносно;

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

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

3. На контент начинают обращать внимание;

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

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

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

4. Меньше проблем с созданием;

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

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

5. Код отлаживается «на ура»;

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

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

6. «Легкий» сайт использует меньше трафика.

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

Как сделать сайт проще?

Все достаточно просто, стоит лишь запомнить несколько основных истин.

1. Не все декоративные элементы одинаково полезны;

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

2. Главный вопрос: «Этот элемент действительно настолько важен?»;

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

3. Там где простой дизайн, там и простой код;

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

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

4. Залог успеха — простая навигация.

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

Отличные примеры

Знакомство с некоторыми примерами простых сайтов будет не лишним.

 

 

 

 

 

 

via noupe.com

6 простых шагов к идеальному сайту

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

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

1. Поиск надёжного веб-хостинга.
2. Выбор платформы для создания сайта.
3. Настройка инструментов, необходимых для воплощения вашего дизайна в жизнь.
4. Создание макета сайта.
5. Работа над дизайном прототипа.
6. Проверка того, хорошо ли выглядит ваш дизайн на мобильных устройствах.

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

Шаг 1: Найдите надёжного хостинг-провайдера

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

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

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

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

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

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

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

Шаг 2: Выберите платформу для создания сайта

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

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

Существует множество вариантов CMS, которые вы можете выбрать, например WordPress:

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

Далее, давайте посмотрим на Joomla:

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

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

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

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

Шаг 3. Установите необходимые инструменты

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

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

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

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

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

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

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

Шаг 4: Создайте макет вашего веб-дизайна

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

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

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

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

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

Шаг 5: Начните работать над прототипом дизайна и доработайте его

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

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

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

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

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

Один быстрый совет, о котором следует помнить сейчас, — не слишком беспокойтесь о тексте вашего сайта и других типах контента. Чтобы ускорить подготовку прототипов, используйте текстовые заполнители и стоковые изображения (англ). Когда ваш макет будет готов, и всё будет находится там, где вы хотите, вы сможете заменить их тем контентом, который вы фактически будете использовать.

Шаг 6: Проверьте, хорошо ли выглядит ваш дизайн сайта на мобильных устройствах

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

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

Хорошей новостью является то, что большинство конструкторов страниц WordPress (таких как Beaver Builder) являются оптимизируемыми для смартфонов по умолчанию. Это означает, что используя их, проекты, которые вы создаёте, должны отлично смотреться на мобильных устройствах, без необходимости делать что-либо ещё.

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

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

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

Заключение

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

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

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

Интернет-агентство BINN » Почему простой дизайн сайта лучше с научной точки зрения

Почему простой дизайн сайта лучше с научной точки зрения

Масштабное исследование, проведенное Google, выявило два ключевых вывода:

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

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

Что такое «прототип» сайта?

Если вам назовут слово «мебель», какой образ появится у вас в голове? 95% людей думают о стуле. А если спросят, какой цвет — для мальчиков, а какой — для девочек? С большой вероятностью вы ответите, что для первых — синий, а для вторых — розовый. Потому что это паттерн, который укрепился в обществе. 

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

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

Если вам скажут «сайт модной женской одежды», вы можете представить что-то вроде этого:

Прототип «интернет-магазина одежды» выглядит так: 

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

Что такое когнитивная беглость?

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

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

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

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

Что происходит, когда вы оправдываете ожидания?

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

Сравните две версии сайта онлайн-магазина галстуков Skinny Ties.

До:

После: 

Несколько ключевых изменений привели к огромным результатам:

• Вторая версия следует прототипу по оформлению. Он сделан так, как «должен» выглядеть интернет-магазин; 
• Вторая версия более «свободная», много пустого пространства, которое не перегружает восприятие;  
• Каждый продукт помещён на отдельное изображение. 

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

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

Почему простой сайт легче обрабатывать? Логично, потому, что он простой! Чем больше цветовых и световых вариаций на странице (т. е. чем больше визуальная сложность), тем больше работы приходится выполнять глазу для передачи информации в мозг.

Как создать простой сайт?

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

---

По мотивам статьи: conversionxl.com

Что на самом деле означает простой дизайн? Правильный подход к созданию UI-kit для iOS

Простой дизайн – это клише. Мы все делаем вид, что стремимся к простому дизайну. Это звучит так же, как фраза: «Сделай мир лучше!» из сериала «Silicon Valley». Подобно эпитетам «минималистичный» и «ясный», кажется, что просто написав эти заезженные слова, мы повысим ценность дизайна. Но что означает простой дизайн? Думаю, что каждый человек понимает это по-своему.

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

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

— Как визуальный дизайн способствует отличному UX

Да, мы доверяем прекрасному.

Каждое утро я просматриваю свежие шоты Dribbble. Я люблю это занятие. Я считаю, что здесь рождаются тренды UI дизайна. Некоторое время назад, когда я более активно загружал файлы на Dribbble, я пытался понять, в чем заключается закономерность. Что заставляет популярные шоты выглядеть намного лучше остальных? Мы все это чувствуем, но можем ли мы объяснить почему?

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

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

«Анализ красоты» Уильяма Хогарта

«Попытки дать определение красоты можно разделить на две основные группы: теории, которые рассматривают красоту, как форму порядка, и теории, которые рассматривают красоту, как вид удовольствия».

Меня это особенно впечатлило – красота, как форма порядка. Думаю, это лучше всего объясняет потребность в наборах элементов интерфейса (UI kits). Они помогают упорядочить все стили.

Комплексное руководство по дизайну мобильных приложений

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

Старт

Начало, основа, полировка. Это три этапа. Я подробно объясню все шаги, так что в конце концов вы сможете сделать их самостоятельно, следуя этому процессу. И я расскажу, как бесплатно скачать UI kit, чтобы вы могли использовать его в новом проекте.

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

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

Строго линейный процесс

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

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

Итак, процесс выглядит примерно так:

Здесь нет этапа «Готово»

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

Определение

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

Цели

• Многоцелевой
• Дружелюбный и повседневный образ
• Сбалансированный – не слишком простой или корпоративный, не слишком модный
• Индивидуальный дизайн и уникальное ощущение (что-то отличное от стандартной формы Helvetica / SF)

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

Методы

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

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

 «В 1956 году была написана статья, которая стала одной из самых цитируемых в психологии. Она называлась «Магическое число семь, плюс- минус два: некоторые ограничения нашей способности обрабатывать информацию». Ее написал когнитивный психолог Джордж А. Миллер с факультета психологии Принстонского университета. Ее суть заключается в том, что количество перцептивных «фрагментов», которые средний человек может удерживать в рабочей памяти (компонент кратковременной памяти), составляет 7 ± 2. Эту формулу часто называют законом Миллера».

— Самое важное правило в UX-дизайне, которое все нарушают

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

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

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

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

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

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

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

Если мы попытаемся сделать все элементы «важными», мы достигнем точки, когда ничего не будет важным

Какая информация является основной, а какая второстепенной, третичной? Вы думаете, это понятно? Как вы думаете, если вы используете иерархию из более чем 7 (я бы сказал, более 3) блоков, пользователи не покинут сайт?

⚠️ Знаю, нечестно переделывать чужую работу, не зная контекста и требований. Но все же, уделяя особое внимание визуальным эффектам и влиянию на UX, Yolk UI kit изменил дизайн с правой стороны. Следуя целям и методам, которые я поставил ранее

Больше пустого пространства

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

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

— О веб-типографике

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

Более жирные, более заметные визуальные элементы

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

Меньше контрастных стилей шрифтов

Наша цель – минимизировать когнитивную нагрузку. Просто выберите два стиля: для заголовка и для второстепенного текста. Давайте сравним его, например, со страницей раздела «Terms and Conditions» – увидев более шести разных стилей текста, вы понимаете, что не будете это читать.

Никакого плоского дизайна

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

Для меня старый образ 2013 года намного проще по сравнению с редизайном 2015 года

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

Мне кажется два новых стиля текстовых поле лучше

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

Единственная разница между полями ввода «Width» и «Height» и выбором «Scale» – это крошечный шеврон в дальнем правом углу

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

Похоже на улучшение?

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

Будьте последовательны

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

Инструменты

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

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

Основа

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

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

Сетка

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

Я загрузил файл iOS с сайта apple.com, чтобы воспользоваться рекомендациями Human Design, и убедиться, что мой комплект соответствует им. Я должен признать, что я фанат Apple, но с точки зрения определения руководящих принципов, думаю, что руководство Material Design для Android намного более подробны, и да – они лучше. К сожалению, Apple не использует строгую сетку для своих устройств, поэтому я создал свою с нуля.

Несколько лет назад макеты сетки стали популярными в веб-дизайне, и самым популярным фреймом была сетка 960px, а содержимое было разделено на 12 столбцов. Позже, когда мы перешли на мобильные устройства, я попробовал использовать тот же подход, но он не сработал, потому что на мобильных девайсах значительно меньше пространства, а полужирные элементы уменьшают наши возможности, поэтому нам нужны более узкие столбцы. Я по-прежнему стараюсь сохранить более жирный макет сетки для основных шаблонов, но нам нужна более тонкая сетка с меньшими приращениями. Например, пространство между кнопкой действия и ее меткой на панели навигации. В данном случае промежуток в 15pt – слишком большой, поэтому я выберу 5pt. Я упомяну этот момент в разделе «Компромиссы» ниже.

Ширина экрана iPhone 12 Pro составляет 390pt, поэтому я разделил его на 26 столбцов шириной 15pt.

iPhone 12 Pro. 26 столбцов. 15pt каждый

Высота 844pt. Согласно iOS Human Design, индикатор «Домой» занимает 34pt. Я перехожу к нижней панели навигации, высота которой составляет 83pt в соответствии с рекомендациями iOS, поэтому я постараюсь сохранить это значение, как можно ближе.

Затем я перехожу к верхней панели. Нам нужно более одного стандартного заголовка. Высота строки состояния составляет 44pt. Следующим шагом будет установка места для кнопок с обеих сторон и заголовка посередине.

Горизонтальная сетка

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

После определения высоты верхних панелей мы можем установить вертикальную сетку 5pt.

Да, знаю. Важно отметить, что это не лучший подход, потому что в X-коде вы не устанавливаете эти размеры в пикселях, но именно так это работает в Sketch и Figma. Несмотря на этот дисклеймер, наш единственный способ структурировать дизайн – использовать пиксели (точки).

Типографика

Я стараюсь придерживаться iOS Human Design, но стараюсь сделать все элементы совместимыми с вертикальной базовой ритмической сеткой 5pt.

Я всегда начинаю с основного текста и использую его для установки вертикального ритма. Наиболее заметным отличием от стандартного интерфейса является более жирный основной текст и большая высота строки (микропробелы). Такой подход поможет улучшить внешний вид интерфейса.

Чтобы достичь цели «дружелюбный и непринужденный дизайн», я буду избегать плоского квадратного изображения и применять красиво закругленные углы. Я бы выбрал шрифт FF Din Rounded Pro. Он прекрасен. И я покажу вам, как он будет соответствовать форме наших иконок.

Базовый макет

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

Мы должны объединить следующие компоненты:

• Верхние панели
• Нижние панели
• 1, 2 и 3 карточки

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

В итоге он выглядит так:

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

Иконки

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

• Линейные иконки
• Аналогичная ширина штриха (аналогична штриху типографики)
• Закругленные углы
• Сетка 5pt

Отличная статья Славы Шестопалова об оптических эффектах в интерфейсе

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

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

Шаблоны

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

• Логин
• Настройки
• Мой аккаунт
• Список постов
• Список изображений
• Статья
• Меню основной навигации

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

Вдумчиво добавляем цвета и мелкие детали. Я имею в виду осторожно и медленно

Базовые компоненты

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

Итак, это все необходимые компоненты:

• Поля ввода
• Кнопки переключения
• Слайдеры
• Кнопки
• Контейнеры для карточек

Те же экраны, та же информация. Но добавлены мелкие детали.

Полировка

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

• К какой категории относится мое приложение? (Это приложение “Финансы”, “Новости”, “Электронная коммерция” или “Музыка”?)
• Какие у меня конкуренты?
• Какие цвета они используют?
• Какие тренды сейчас в моде?
• Какие изображения мне нужны?
• Стоит ли применять какие-либо текстуры?
• Какие иллюстрации мне нужны?
• К какому тону голоса я стремлюсь?

Исследование

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

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

На мой взгляд, это самые популярные темы:

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

Экраны

• Музыкальный проигрыватель
• Список финансовых активов
• Галерея
• Экран профиля
• Чат
• Этапы оформления заказа

Компоненты

• ПИН-код входа
• Компоненты музыкального проигрывателя
• Карта активов
• Диаграммы
• Карты товаров для оформления заказа
• Календарь

Цвета

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

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

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

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

Я уже использую черный цвет с самого начала, но сейчас самое время, чтобы кое-что сказать о нем. Помните, как правило, использовать 100% черный – плохая идея. На эту тему есть несколько интересных статей, но просто отметим, что чистый черный текст на белом фоне не способствует удобочитаемости. В рекомендациях Material Design для Android предлагается использовать 87% непрозрачности черного в качестве цвета основного текста, но в моем случае это 86% #262626. Он немного легче и дополняет нашу дизайн-систему.

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

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

Текстуры, тени, закругленные углы

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

Легкий скевоморфизм

Я пытаюсь внести изменения в дизайн, чтобы сделать его более дружелюбным и повысить его уникальность. Я вернусь в прошлое с тонким взглядом на скевоморфизм и буду следовать подходу с закругленными углами, который мы установили ранее – что Apple сделала со своей последней версией Mac OS. Думаю, вы помните, насколько популярным был «неоморфный» стиль на Dribbble несколько месяцев назад. Честно говоря, думаю, что это слишком, поэтому когда говорю о скевоморфизме, я имею в виду что-то вроде работ Дэйва Руиса. Это один из лучших примеров этого стиля. Он вдохновлял меня с тех пор, как я работал над нашей темой Kiddo WordPress theme (2011!), но вскоре после этого Windows 10 и более поздние версии iOS 7 начали революцию «тренда плоского дизайна».

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

И снова… пустое пространство! Я уже объяснял, насколько это важно, и теперь вы могли видеть в этом главную черту стиля дизайн-системы.

Иллюстрации

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

Например, сейчас в моде 3D-иконки и иллюстрации. Вы могли видеть их на Revolut, поскольку они недавно применили его к своему последнему интерфейсу.

Изображения

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

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

Yolk UI kit

Компромиссы

⚠️ Сетка 8pt или 4pt – это самая распространенная сетка, которую вы можете найти в других приложениях. Легче использовать столбцы с шириной сетки и меньшие приращения внутри компонентов, таких как 2, 4, 8, 12, 16, 18, 24, 32, 36. В моем случае это 5px, и это ограничение.

⚠️ Большинство наборов иконок кратны 4, например, 12, 24 и 32 точки. Поэтому использование сетки 5pt – это компромисс, потому что не так просто применить иконки, если они мне нужны.

⚠️ Работа над размером iPhone 12 Pro и отказ от тестирования того, как компоненты выглядят на других устройствах iOS – не лучший подход, но это необходимо для объяснения процесса создания дизайн-системы.

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

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

⚠️ Я упомянул «дизайн-систему» ​​вместо «UI kit», но это означает нечто более обширное и подробное, и для этого требуется больше людей, участвующих в настройке руководств.

Возможности для улучшения

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

🔧 Я мог бы добавить более подробную информацию о наиболее подходящем типе изображений.

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

🔧 Я должен попробовать другие шрифты.

🔧 Иконок в наборе не бывает много. Мне нужно еще больше.

Вывод

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

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

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

Скачать Yolk

Ссылки:
How Visual Design Makes for Great UX
Beauty and Ugliness
The Most Important Rule in UX Design that Everyone Breaks
How Chunking Helps Content Processing
The power of white space
The Power Of Whitespace
Reading Online Text: A Comparison of Four White Space Layouts
Myth #28: White space is wasted space
Developing the Invisible
White space in UX design
The Evolution of Material Design’s Text Fields
Flat UI Elements Attract Less Attention and Cause Uncertainty
Optical Effects in User Interfaces

Стиль дизайна сайта | Стили оформления сайтов

Классический

Наиболее востребован в веб-дизайне — классический стиль.

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

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

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

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

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

Минимализм (с графикой)

 Минималистический стиль обладает рядом преимуществ:

• простота восприятия информации,
• акцентирование на главных элементах сайта.

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

Веб-2

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

• Простота
• Центральное выравнивание
• Небольшое количество колонок
• Выделение областей цветом
• Градиенты
• Слегка увеличенный размер шрифта
• Блоки с закругленными углами
• Глянцевые блики на кнопках
• Логотипы с зеркальным отображением
• Отсутствие привычной высокой шапки

Гранж

Стиль «гранж» позволяет делать дизайн менее однородным, более органичным и немного хаотичным. Гранж — противоположность вылизанного стиля web 2.0, протест гламуру, идеальной холодной красоте и ненастоящему.

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

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

Готический

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

Готический стиль в дизайне чаще всего используют для создания игровых или контент сайтов.

Векторный

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

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

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

Хай-тек

Дизайн сайта в стиле hi-tech определяет принадлежность к высоким технологиям. Целевой аудиторией являются посетители – новаторы, они энергичны, стремятся следовать в ногу со временем.

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

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

С эффектом параллакса

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

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

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

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

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

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

Минимализм (текстовый)

Чаще всего используется для создания контент-сайтов.

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

Сайт четко структурирован в соответствии с структурой документов и видов текстовой информации.

Органический

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

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

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

Ретро (винтажный)

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

• дизайн под античность и период до 20 века,
• дизайн в стиле культуры начала 20 века,
• дизайн в стиле пост-военного периода и более позднего времени (наиболее популярен период до 60-70-х годов)

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

Журнальный

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

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

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

Мультипликационный

Мультяшный стиль сайта — рисованный дизайн, стилизованный под мультфильмы или комиксы. Мультипликационный сайт:

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

Чаще всего применяется для создания веб-проектов для детей и мам.

Футуристический

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

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

 

Почему простой дизайн сайта лучше с научной точки зрения | Лаборатория Айтинти

Исследование Гугла показало: пользователю достаточно всего 1/30, чтобы оценить сайт НО! «Визуально сложные» сайты неизменно оцениваются как менее красивые, чем их простые аналоги. 

И вот почему

У людей есть представление того как должен выглядеть тот или иной объект. Например, «сайт модной женской одежды» может выглядеть как-то так

Пример с магазином галстуков. До редизайна он выглядел так:

После редизайна так:

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

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

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

Это не означает, однако, что вы должны просто делать то, что делают все остальные (отдельная статья).

7 способов создать более простой сайт

1. Исследуйте свою аудиторию и сайты, которые они посещают больше всего. Посмотрите на тематические исследования об изменениях дизайна от указанных сайтов и как они повлияли на ключевые области.
2. Создайте коллаж для своего сайта со всеми «рабочими» компонентами, которые вы обнаружите.
3. Соблюдайте правила когнитивной беглости, когда вы выкладываете свой дизайн. Положите вещи там, где посетители ожидают их найти.
4. Положитесь на свои собственные цвета, логотип и шрифт, чтобы общаться четко и тонко. Не добавляйте копии или изображения, если они не сообщают о том, что волнует вашего посетителя.
5. Когда сомневаешься, меньше значит больше. Одно большое изображение обычно лучше, чем несколько маленьких; один столбец вместо трех; больше пробелов вместо большего количества «вещей».
6. Убедитесь, что ваш сайт соответствует ожиданиям по ценам, эстетике, скорости и т. д.
7. Сохраняйте оригинальность. Общепринятые «шаблоны» не всегда верны.

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

 

Краткий пересказ статьи https://conversionxl.com/blog/why-simple-websites-are-scientifically-better/#what-is-a-%E2%80%9Cprototypical%E2%80%9D-website. Простой перевод не даст понимания, поэтому я подал информацию несколько по иному.

Как быть эффективным с минималистичным веб-сайтом

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

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

Содержание

Принципы минимализма в веб-дизайне

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

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

Преимущества сохранения простого дизайна веб-сайта

Количество преобразований

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

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

Минимум Дизайн не устарел

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

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

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

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

Советы по созданию эффективного минималистского веб-сайта

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

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

Хорошая навигация

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

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

Использование отрицательного пространства (пробела)

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

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

Изучение типографики

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

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

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

Жирный шрифт

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

Шрифты без засечек

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

Расчесывание текстовых блоков

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

Использование меньшего количества контента

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

Иерархия

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

Умные цветовые палитры

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

Изображения

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

Витрина минималистичных сайтов

Лидия Амарух

Лидия Амарух всегда стремилась создавать, иллюстрировать и фотографировать все, что ее окружало. Сейчас она графический дизайнер, дизайнер UX / UI и дизайнер анимационной графики.

Джейми Сайк

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

Bluecadet

Они верят в силу технологий двигать людей.

Гай Мурхаус

Гай — дизайнер и технолог цифровых продуктов.

Малвен Ко

Malven Co. — это веб-студия / студия цифрового / интерактивного дизайна и разработки Криса Малвена, базирующаяся в Де-Мойне, штат Айова.

Патик Адас

Он — дизайнер продукта, который воплощает сложные технологии в полезный опыт.

Case Study Club

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

Повесьте DJ

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

Slimvoice

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

Колин Кини

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

Дизайн Evernote

Ссылки на закладки «Все в одном» для конструктора.

Пратибха Джоши

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

Нью-Йорк Монголия

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

Лист

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

FutureNow Conference

Безумие, собирающее новаторов, стартапов и энтузиастов технологий в Братиславе, сердце Европы.

Студия Оуам

Studio OUAM — креативное агентство, базирующееся в Париже и Бордо во Франции. Они специализируются на визуальной идентификации и создании бренда.

Equinusocio

Архитектор CSS / HTML из Монцы и член Open Source Design.

Эверест

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

Резо Зеро

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

The Cool Club

The Cool Club — это собрание самых известных и дальновидных мужчин и женщин со всего мира.Анте, пора заявить о своей славе.

Ариэль Бенинка

Ариэль — опытный дизайнер из Брисбена, Австралия. Она специализируется на дизайне и брендинге UX / UI.

Квартира

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

IFTTT

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

NeuBible

NeuBible — это современное приложение для чтения Библии, продуманное для приятного чтения без отвлекающих факторов.

Нуми

Numi — красивый калькулятор для Mac.

Пробуждение

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

Airtable

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

Минимум

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

Nuage

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

Svgsus

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

Завершение мыслей об этих простых примерах дизайна веб-сайтов

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

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

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

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

Ваш веб-сайт — это цифровая витрина вашего бизнеса.

Если его дизайн отсутствует, люди могут решить, что они не хотят иметь с вами дела.

Согласно исследованию, опубликованному Blue Corona, 48% людей определяют надежность бизнеса по дизайну веб-сайта.

И исследование ясно: чем проще, тем лучше.

Какое исследование, спросите вы?

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

1. Простой дизайн вне времени

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

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

Занятые дизайны теряют свою привлекательность и быстро устаревают.

Но история показала, что простые дизайны, такие как британский плакат Keep Calm and Carry On 1939 года , выдерживают испытание временем.

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

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

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

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

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

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

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

2. Простой дизайн, легче сканировать

Не секрет, что пользователи Интернета не читают каждое слово на вашем сайте.

По данным Adobe, 58% пользователей будут просматривать статьи , если они ограничены временем.

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

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

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

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

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

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

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

3. Простой дизайн — доступнее

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

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

К счастью, простой дизайн легче сделать доступным.

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

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

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

4. Простой дизайн лишает чувства продавца

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

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

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

Этот акцент на эстетике может сделать любой сайт более привлекательным.

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

5. Простая конструкция обеспечивает более быструю загрузку

Время загрузки сайта является критическим фактором для SEO и взаимодействия с пользователем.

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

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

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

Домашняя страница Zen Habits Лео Бабауты содержит минимум текста и без изображений. Он загружает самую последнюю запись и даже не включает строку меню в заголовке.

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

Небольшой объем текста на сайте обеспечивает молниеносную скорость. Неудивительно, что Zen Habits — один из самых успешных блогов в районе .

6. Простая конструкция, удобство использования

Весь смысл вашего веб-сайта в том, чтобы посетители могли его использовать.

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

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

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

После того, как вы упростили навигацию, улучшите домашнюю страницу .

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

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

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

7. Простой дизайн повышает коэффициент конверсии

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

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

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

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

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

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

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

Модернизация привела к модели 13.Коэффициент конверсии увеличился на 6%, а выручка увеличилась на 42,4%.

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

Этот упрощенный дизайн делает акцент на продуктах и ​​стимулирует продажи.

8. Простая конструкция упрощает сборку и ремонт

В разработке веб-сайта нет ничего «простого».

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

Никто не знает лучше, чем дизайнер, о важности чистого кода. Дизайнер интерфейсов Ярон Шон (Yaron Schoen) очень эффективно использует это на своем личном веб-сайте .

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

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

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

9 . Простой дизайн вызывает доверие

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

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

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

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

Это, по его словам, относится и к веб-сайтам.

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

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

Дизайн показывает, что ETQ серьезно относится к своей продукции.

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

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

10. Простой дизайн дешевле разместить

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

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

(Кроме того, эти ресурсов занимают много места, и ваш коэффициент конверсии резко упадет на .)

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

Например, на GoDaddy бесплатный план позволяет пользователю только 100 ГБ. Этого более чем достаточно для базового сайта, но сложный сайт может исчерпать пространство.

Другая крупная хостинговая компания, HostGator , имеет аналогичную схему привязки цен.

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

11. Простой дизайн выглядит более профессионально

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

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

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

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

12. Простой дизайн производит хорошее первое впечатление

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

Исследование, проведенное Google, показало, что визуальная сложность влияет на привлекательность сайта в течение 17 миллисекунд после посещения .

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

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

Предоставьте одно главное сообщение и сделайте акцент с помощью привлекательной графики и смелого и простого дизайна.

A Spacecraft For All производит первое впечатление с его четкой ориентацией на спутник, о котором идет речь на веб-сайте.

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

13. Google проще понять простой дизайн

Одним из факторов, влияющих на ваше место в результатах Google , является структура вашего сайта .

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

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

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

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

Adidas использует простое меню на своей домашней странице.

Однако при наведении курсора на меню оно раскрывается, показывая организованную структуру сайта.

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

14. Простой дизайн с научной точки зрения красивее

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

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

Исследование, проведенное Гарвардским университетом, показало, что цвет и сложность сайта составляют 48% от рейтинга визуальной привлекательности сайта.

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

Цель этого макета не в том, чтобы выиграть какие-либо дизайнерские награды (хотя вы не должны жаловаться, если вы это сделаете!), А в том, чтобы повысить привлекательность вашего сайта.

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

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

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

15. Простой дизайн делает акцент на содержании

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

У вас есть веб-сайт, на котором посетители будут действовать.

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

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

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

Хотя на странице есть еще несколько фрагментов контента, все они поддерживают главную кнопку «Бесплатная загрузка».

Но что, если ваша цель более долгосрочная?

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

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

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

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

16. Простой дизайн более запоминающийся

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

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

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

Простой дизайн — отличный способ сделать это.

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

Прекрасный образец запоминающегося дизайна — Universidade de Coimbra .

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

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

17. Простой дизайн позволяет формировать пользовательский опыт

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

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

Веб-сайт приложения Nizo создает особый пользовательский интерфейс. Он начинается с жирного заголовка и краткого описания.

Затем посетитель смотрит на фразу «приходит в магазин приложений» и видит iPhone.

При прокрутке множество технологических элементов собираются за пределами экрана и организуются рядом с iPhone.

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

Эта форма согласия — единственное взаимодействие на всей странице, и ваш глаз, естественно, находит ее внизу.

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

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

Заключение

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

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

К счастью, очистить макет несложно. Ищите части, которые нужно удалить, и сосредоточьтесь на простых формах и пустом пространстве.

Как вы упростите дизайн своего сайта?

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

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

Заказать звонок

5 советов по веб-дизайну для выдающегося сайта

Этот пост последний раз обновлялся 5 мая 2020 г. быть где угодно: от стильного до минималистичного, от игривого и яркого до элегантного и современного.

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

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

Советы по веб-дизайну для выдающегося веб-сайта

1. Сделайте свою домашнюю страницу минималистичной и свободной от беспорядка

2. Дизайн с визуальной иерархией

3. Создавайте легко читаемое содержание веб-сайта

4. Обеспечьте удобство навигации по вашему сайту

5. Оставайтесь мобильными

01.Сделайте свою домашнюю страницу минималистичной и свободной от беспорядка.

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

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

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

• Разместите содержимое: Используйте пробелы между элементами. Оставив некоторые области пустыми, вы придадите дизайну более просторный и сбалансированный вид. Что касается текста, пишите небольшими, удобочитаемыми абзацами.

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

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

02. Дизайн с учетом визуальной иерархии

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

Основными компонентами визуальной иерархии являются:

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

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

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

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

03. Создавайте легко читаемое содержимое веб-сайта.

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

Добиться удобочитаемости веб-сайта относительно легко; попробуйте следующие ключевые правила:

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

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

• Типы шрифтов: Мир типографики предлагает множество типов шрифтов в нашем распоряжении. Вы можете выбирать между шрифтами с засечками (с небольшими выступающими линиями на концах букв, как Times New Roman) или без засечек, что буквально означает «без засечек».” Шрифты без засечек обычно лучше всего подходят для длинных онлайн-текстов, например того, который вы сейчас читаете. Вы также можете создавать интересные сочетания шрифтов, смешивая эти разные типы вместе. Есть также много экранных шрифтов, которые больше связаны с декоративной составляющей, например шрифты сценария, которые выглядят рукописными. Если вы собираетесь использовать один из них, не используйте его слишком часто, чтобы избежать ошеломляющего эффекта.

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

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

04. Убедитесь, что по вашему сайту легко ориентироваться.

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

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

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

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

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

05. Оставайтесь мобильными

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

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

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

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

Чейз Лепард

Менеджер сообщества и социальных сетей

Иден Спивак

Эксперт и писатель по дизайну

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

Исследование, проведенное Google, привело к двум ключевым выводам:

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

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

Другими словами, исследование показало, что чем проще дизайн, тем лучше .

Но почему?

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

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

Что такое «прототип» веб-сайта?

Если я сказал «мебель», какой образ приходит вам в голову? Если вы похожи на 95% людей, вы думаете о стуле. Если я спрошу, какой цвет представляет «мальчик», вы подумаете «синий» (а девочка — «розовый»; автомобиль — «седан»; птица — «малиновка» и т. Д.).

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

9 Убийц доверия к веб-сайтам

Алекс Биркетт

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

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

Если бы я сказал «сайт модной женской одежды», вы могли бы представить себе что-то вроде этого:

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

(Источник изображения)

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

Какое значение имеет когнитивная беглость?

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

Как объясняет UXmatters:

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

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

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

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

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

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

Пример из практики: что происходит, когда вы оправдываете ожидания?

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

Однако, когда опыт не хватает, вы чувствуете это сразу. Возьмем, к примеру, интернет-магазин галстуков Skinny Ties, который на самом деле не выглядел как сайт электронной торговли до редизайна:

Раньше:

После:

Несколько ключевых изменений привели к огромным результатам:

• Следующие прототипные темы макета электронной коммерции;
• Намного более «открытое» использование пробелов;
• Изображения представляют собой единый продукт с изображениями с высоким разрешением и контрастными цветами.

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

.

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

Визуальная обработка информации и сложность сайта

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

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

(Вы можете пройти тот же тест здесь.)

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

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

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

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

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

Исследователь Саул МакЛеод объясняет, что

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

Каждый элемент передает тонкую информацию

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

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

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

Хотя это отдельная статья, рассмотрим редизайн логотипа MailChimp. Когда они хотели, чтобы бренд «вырос», они не добавляли обычное «Мы занимаемся электронной почтой с 2001 года! Нам доверяют три миллиона человек! Вот почему мы такие классные! Бла, бла, бла… »

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

Mailchimp прошел через еще один редизайн логотипа в 2018 году:

Каковы были руководящие принципы для второго крупного редизайна? Простота была превыше всего:

Значок Фредди долгое время был основным знаком нашего бренда. Мы немного упростили его, изменив его форму и мелкие детали, чтобы он отлично смотрелся при любом размере.

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

«Рабочая память» и Святой Грааль обращения

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

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

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

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

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

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

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

7 способов создать более простой веб-сайт

1. Изучите свою аудиторию и сайты, которые они посещают чаще всего. Поищите тематические исследования об изменениях дизайна на указанных сайтах и ​​о том, как они повлияли на ключевые области.
2. Создайте mashup для своего собственного сайта со всеми «рабочими» компонентами, которые вы обнаружите.
3. Соблюдайте правила когнитивной беглости при разработке дизайна. Разместите вещи там, где посетители ожидают их найти.
4. Положитесь на собственные цвета, логотип и шрифт , чтобы общаться четко и тонко.Не добавляйте копии или изображения, если они не сообщают о том, что волнует вашего посетителя.
5. Если есть сомнения, лучше меньше, да лучше. Одно большое изображение обычно лучше, чем несколько маленьких; один столбик вместо трех; больше пробелов вместо большего количества «всякой всячины».
6. Убедитесь, что ваш сайт соответствует ожиданиям по цене, эстетике, скорости и т. Д.
7. Сохраните оригинальность. «Типичный» сайт не означает, что каждый аспект вашего сайта должен соответствовать этому шаблону.

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

Заключение

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

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

У вас тоже будет красивый сайт.

Как создать простой, но уникальный и функциональный веб-сайт?

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

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

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

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

Оставайся простым

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

Должен быть информативным

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

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

Выберите правильные цвета

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

Используйте правильные шрифты

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

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

Разрешите вашему сайту общаться с пользователями

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

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

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

Он должен быть уникальным

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

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

Заключение

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

Простота в хорошем веб-дизайне: преимущества и способы — до

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

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

Преимущества простых сайтов

1.Легче ориентироваться

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

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

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

2. Простые конструкции загружаются быстрее

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

3. Контент более «сканируемый»

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

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

4. Простые сайты быстрее проектировать и создавать

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

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

5. Простой код легче отлаживать

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

Ищите способы упростить код с самого начала. Такие вещи, как объединение свойств и определений CSS, могут сделать ваши таблицы стилей намного короче. Комбинирование таблиц стилей или файлов JavaScript также может значительно упростить общий код. И воспользуйтесь преимуществами автоматизированных программ, которые могут вырезать ненужную разметку из ваших таблиц стилей, скриптов и других файлов перед их загрузкой (просто убедитесь, что вы дважды проверили, что все по-прежнему работает, как задумано).

6. Чем меньше размер файла, тем меньше места на сервере

Как уже упоминалось, простые сайты обычно имеют меньший размер файлов, чем сложные. Это означает, что ваши сайты будут занимать меньше места на сервере и пропускной способности, чем другие сайты. Хотя это может не иметь большого значения для сайта с несколькими тысячами посетителей в месяц или с ограниченным содержанием, для сайта с большим количеством страниц и большим количеством посетителей это действительно может дать огромную экономию. Учтите, что некоторые минималистичные домашние страницы с небольшим количеством изображений могут быть менее 100 КБ, в то время как более сложные сайты могут иногда достигать 1 МБ.Это означает, что вы можете получить в десять раз больше трафика с помощью простого сайта по той же цене, что и более сложный. Если у вас много контента или много посетителей, имеет смысл упростить ваш сайт и уменьшить размеры файлов.

Как упростить ваши сайты

Удалить лишние декоративные элементы

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

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

Спросите себя: «Действительно ли этот элемент важен?»

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

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

Убедитесь, что серверная часть вашего сайта такая же простая, как и интерфейс

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

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

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

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

Эта статья изначально опубликована 21 сентября 2009 г. и обновлена ​​17 сентября 2020 г.

Дизайн сайтов | Цифровой маркетинг для Fargo, Moorhead и Detroit Lakes

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

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

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

Посмотреть портфолио на нашем сайте

Пользовательские сайты, опция

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

Все наши настраиваемые веб-сайты обеспечивают легкий доступ к возможности добавлять / изменять / удалять метатеги прямо через вашу панель CMS. Конечно, мы завершаем все это за вас еще до того, как сайт заработает, так что вы можете просто «настроить» систему по мере продвижения вперед. Свяжитесь с нами, чтобы получить оценку без обязательств , или позвоните нам по телефону 218-297-1500 сегодня.

Интернет-магазины / сайты покупок

Если вам нужно вывести свой бизнес в онлайн-режим , чтобы посетители могли покупать ваши продукты и услуги , тогда позвоните нам. Мы создаем веб-сайтов электронной коммерции , которые используют платформу Big Commerce Platform . Это обеспечивает организованный, эффективный и беспроблемный процесс покупок для ваших посетителей в Интернете. Мы с нетерпением ждем, чтобы помочь вам!

Конструктор сайтов «Шаблон» Опция

Простое создание веб-сайтов также имеет конструктор веб-сайтов, который доступен вам, если вы более ориентированы на «бюджет».Эти веб-сайты отлично подходят для малых и новых предприятий, которые только начинают или имеют бюджет, который может не подходить для создания настраиваемого веб-сайта. Эту систему веб-сайтов можно приобрести самостоятельно, и вы ее создадите, или упростите ее для себя и попросите Simple Website Creations создать ее для вас. Позвоните Simple Website Creations по телефону 218-297-1500 сегодня, чтобы узнать больше об этой системе.

Вы также можете просмотреть и приобрести пакет Website Builder самостоятельно, НАЖМИТЕ ЗДЕСЬ.

Хостинг веб-сайтов и SSL

Simple Website Creations также обеспечивает хостинг веб-сайтов , а также установку Secure Socket Layer (SSL).Мы предлагаем эффективный и доступный хостинг веб-сайтов всего за 239,88 долларов в год, а стандартные SSL всего за 84,99 долларов в год. Мы берем на себя всю работу, чтобы вам не приходилось делать это.

Администрирование веб-сайтов и миграционные услуги

Если у вас в настоящее время есть свой веб-сайт с дизайнерским агентством или хостинг-провайдером , и вы недовольны услугами, которые вы получаете, позвоните в Simple Website Creations по телефону 218-297-1500, чтобы мы могли связаться с вами. сообщил о услугах администрирования веб-сайта , которые у нас есть.Помните, что … «Лучше просто!»

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

Планы начинаются от 179 долларов в месяц.

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

Мы поддерживаем профили в Facebook, Instagram, LinkedIn и Twitter. Позвоните нам по телефону 218-297-1500 или СВЯЖИТЕСЬ С НАМИ, чтобы узнать больше о нашей службе управления социальными сетями .

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

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

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

Позвоните нам по телефону 218-297-1500 или СВЯЗАТЬСЯ С НАМИ прямо сейчас, чтобы начать работу.

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

Текущее SEO

Simple Website Creations предлагает постоянные услуги SEO варианта.Эти варианты предоставляют такие услуги, как все протоколы обычного поиска, а также многие другие, чтобы помочь найти ваш сайт и повысить его в списке. Мы предоставляем такие услуги, как отправка каталогов, анализ контента, анализ поисковых запросов и многое другое. Чтобы узнать больше об этой услуге или начать работу, позвоните нам сегодня по телефону 218-297-1500.

Ознакомьтесь с нашими постоянными вариантами пакетов SEO и ценами.

Органическое SEO

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

Мы также предлагаем пакетов Organic SEO клиентам, не являющимся клиентами нашего веб-сайта, за символическую плату. Позвоните нам по телефону 218-297-1500 или СВЯЖИТЕСЬ С НАМИ, чтобы узнать больше.

Simple Website Creations также предлагает услуги по дизайну таких вещей, как печатная графика, визитки, реклама в журналах и, конечно же, дизайн логотипа / редизайн!

Дизайн логотипа

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

Печатный маркетинг

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

Позвоните нам по телефону 218-297-1500 или СВЯЖИТЕСЬ С НАМИ, чтобы начать работу.

.