Как оформить страницу: Как оформить профиль в Instagram: инструкция для бизнеса

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

3. Создайте идентичность своего веб-сайта (или бренда)

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

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

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

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

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

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

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

Типографика

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

Хотя разница между этими терминами может показаться несерьезной для большинства дизайнеров, о ней следует помнить. Например, Times New Roman входит в семейство шрифтов Times.

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

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

Imagery

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

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

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

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

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

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

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

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

Голос

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

Стиль и индивидуальность

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

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

4. Создайте макеты и контент

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

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

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

Независимо от того, какой носитель вы используете при создании каркасного дизайна, в ваших интересах, по крайней мере, иметь эскизный дизайн (или каркасный дизайн с использованием предпочитаемого вами инструмента дизайна, подумайте о Figma, InVision, Adobe Xd и т. Д.).

Оптимизируйте каркас своего контента и до его разработки

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

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

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

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

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

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

Исследования, конечно.

Какие фразы и комбинации ключевых слов ассоциируются с веб-сайтами и контентом вашего конкурента? Какой вы наберете , чтобы найти ваш контент ?

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

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

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

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

Поблагодарите себя после запуска.

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

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

WordPress

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

Ссылки по теме: 5 причин, по которым пользователь WordPress перешел на Webflow

Wix & Squarespace

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

Shopify

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

Webflow

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

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

6. Создавайте свои высококачественные макеты в Webflow

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

Веб-сайты бывают трех разных форм: HTML, CSS и базы данных.

Для краткости, HTML (язык разметки гипертекста) — это контент на веб-странице и структура этого контента на веб-странице, CSS (каскадные таблицы стилей) — это то, как контент стилизован и представлен (подумайте о шрифтах, цветах, позиционировании, и т. д.), а в базах данных хранится контент.

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

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

Сборка с помощью конструктора

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

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

* перенаправление *

перенаправлено!

Ладно, откроем конструктор, а точнее Конструктор.

Чистый холст. Боковая панель компонентов. Другая боковая панель компонентов внутри компонента после выбора компонента.А теперь классы и настройки макета и другие параметры в этих классах и макетах? Хм.

С чего начать… ‍

С Webflow вы строите визуально. Те компоненты, которые вы видите на левой боковой панели, обычно реализуются с помощью CSS, HTML или Javascript. Тем не менее, Webflow не содержит кода, поэтому, если вы хотите начать сборку, просто перетащите выбранный компонент на холст. При перетаскивании компонента вы увидите вариант для дальнейших изменений (т.е. компоненты в выбранном компоненте) на правой боковой панели. Это классы внутри компонента, в которых вы можете стилизовать выбранный компонент.

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

Следовательно, вместо того, чтобы спрашивать себя, с чего начать, вопрос скорее в том, как вы хотите начать?

Начиная с нуля

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

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

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

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

Ссылки по теме: Учебник по Webflow: полное руководство для новичков

Использование шаблона

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

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

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

Наведя курсор на каждый элемент или блок div, вы можете понять, как работает интерфейс в конструкторе. Более того, если вы знакомы с платформами дизайна от Adobe, например, InDesign или Photoshop, вы сможете легко перемещаться по интерфейсу.

Поиграйте.

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

Вот почему был создан Webflow.

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

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

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

Выберите тот клонируемый объект, который привлекает ваше внимание, и нажмите «Открыть» в Webflow. Вам будет предложено, как и с шаблоном, для Дизайнера. То же самое и здесь.

Опять поиграйте.

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

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

Да, опять же, все так просто.

И если вы все еще застряли по какой-либо причине, вы всегда можете найти вдохновение в Webflow Showcase. Талант в изобилии!

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

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

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

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

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

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

Ваш дизайн готов, и он был одобрен вашими коллегами, что дальше?

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

Да, вы правильно прочитали, нажмите кнопку «Опубликовать».

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

Итак, ваш новый веб-сайт должен работать.

Да, это так просто, как и должно быть.

9. Управление, масштабирование и итерация соответственно

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

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

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

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

‍ Что это за название книги Стива Круга о дизайне и удобстве использования… ‍

О, да.

Не заставляйте меня думать!

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

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

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

Современный способ разработки и создания веб-сайтов

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

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

Webflow — это игровая площадка для дизайнеров, это ваша игровая площадка !

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

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

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

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

Звук невозможен?

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

Трехэтапный процесс разработки макета бизнес-сайта

Шаг 1. Сначала продумайте путь пользователя

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

А веб-сайт, который не обращает внимания на доступность или не имеет хорошего пользовательского опыта, имеет гораздо меньше шансов привлечь приличный объем трафика — в конце концов, UX и SEO идут рука об руку. Есть выбросы с небрежным UX, которые все еще привлекают множество пользователей — см. Craigslist. Но у компаний с лучшим UX, таких как Uber, Airbnb и Slack, гораздо больше шансов заново изобрести свои отрасли.

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

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

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

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

Хорошая навигация имеет три основных характеристики:

1. Простота
2. Четкость
3. Последовательность
   

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

Шаг 2. Получите правильную визуальную иерархию

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

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

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

Различные принципы дизайна помогают создать сильную визуальную иерархию.

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

Есть два основных шаблона сканирования глаз, которые люди используют для быстрого сканирования блоков контента:

1. F-образный шаблон
2. Z-образный шаблон
   

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

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

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

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

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

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

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

‍

Используйте пять основных строительных блоков дизайна, чтобы построить визуальную иерархию с HTML и CSS, понятную с первого взгляда:

1. Размер

В любом дизайне важно соотносить размер с важностью — самая важная информация должна быть самой большой на странице и требовать наибольшего внимания.

2. Цвет

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

3. Макет

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

В этом ежеквартальном издании Google используется карточный дизайн для организации контента на странице и поощрения их основной цели: подписки.Источник: Think with Google .

4. Интервал

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

5. Стиль.

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

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

Шаг 3. Сосредоточьтесь на кнопках призыва к действию

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

Вот что нужно учитывать при разработке кнопок.

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

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

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

Что еще вы хотели бы знать о верстке?

Мы хотим копнуть глубже, чем 101, по этой жизненно важной теме — так что дайте нам знать, что еще вы хотели бы узнать!

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

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

Иллюстрировано Прабхатом Махапатрой

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Панировочные сухари

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

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

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

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

Поиск

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

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

• Разместите окно поиска там, где пользователи ожидают его найти. Приведенная ниже диаграмма, основанная на исследовании A. Dawn Shaikh и Keisi Lenz, показывает ожидаемое местоположение поля поиска согласно опросу 142 участников. Исследование показало, что наиболее удобное место — это верхний левый или верхний правый угол каждой страницы веб-сайта.

• Используйте значок увеличительного стекла, чтобы привлечь внимание к области. Значок увеличительного стекла имеет универсальное значение — оно знакомо большинству пользователей. Nielsen Norman Group рекомендует использовать схематический значок, простейшую версию увеличительного стекла.

• Подберите размер поля ввода. Распространенная ошибка — сделать поле ввода слишком коротким.Конечно, пользователи могут ввести длинный запрос в короткое поле, но одновременно будет видна только часть текста, что не очень удобно. Фактически, когда окно поиска слишком короткое, посетители склонны использовать короткие неточные запросы, потому что более длинные запросы могут быть трудными и неудобными для чтения. Поле ввода из 27 символов соответствует 90% запросов.

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

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

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

Контентная стратегия

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

Вот несколько практических советов при рассмотрении вашей контент-стратегии:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Загрузка содержимого

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

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

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

Кнопки

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

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

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

Картинка

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

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

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

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

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

Видео

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

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

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

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

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

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

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

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

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

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

• Негативное пространство. Наряду с размером и цветом, пространство вокруг CTA играет важную роль в визуальной иерархии элементов. Белое (или отрицательное) пространство создает существенную передышку и отделяет кнопку от других элементов интерфейса.

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

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

Веб-формы

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

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

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

Анимация

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

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

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

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

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

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

Рекомендации для мобильных устройств

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

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

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

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

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

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

От клика к касанию

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

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

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

Доступность

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

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

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

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

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

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

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

Пользователи с дальтонизмом и слабовидением

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

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

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

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

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

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

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

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

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

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

Работа с клавиатурой

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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