Дизайн сайта как делать: Как сделать дизайн сайта

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

Sait

access_time

26 августа, 2020

hourglass_empty

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, которые позволяют визуаллизировать ваш сайт в разных разрешениях.

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

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

Заключение

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

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

Дизайн сайта | Веб дизайн

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

Аспекты дизайна сайта, влияющие на SEO

Читабельный шрифт

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

Простая и удобная навигация

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

Располагающая цветовая схема

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

Контент на первом экране

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

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

Создать дизайн сайта самому бесплатно — Конструктор A5.ru

г. Москва,
пер. Подсосенский, д. 30 стр. 3 этаж , офис 1,18

Телефон: 8 800 500-21-84

Мы работаем ежедневно с 10:00 до 19:00

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

Возможности конструктора

Конструктор сайтов A5.ru предоставляет несколько возможных вариантов изготовления интернет платформы:

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

 

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

Почему выгодна работа с шаблонами:

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

 

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

Дизайн сайта в Фотошопе (Photoshop)

youtube.com/embed/FZ6S6DEYp-s?showinfo=0″/>

Если вы хотите освоить Adobe Photoshop, то я рекомендую вам не тратить время на самостоятельно изучение, а найти хорошие курсы Фотошопа.

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

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

Рис.1 Быстрый старт в Фотошоп

Поехали!

Дизайн сайта в Фотошопе: с нуля за 60 минут!

Для начала, это настройка рабочей области. Прежде всего, стоит зайти во вкладку “Window” в верхней панели и отключить все лишнее и включить все нужное. Во-первых — это “Character” — символы, цвета, слои, “Options”  — опции и “Tools”- инструменты. Просто поставьте эти галочки, дальше мы чуть подробнее про каждый инструмент поговорим. Просто бывает частая ошибка — очень много всего включено, на рабочей области бардак и совет такой — отключите все лишнее, включите вот только это, действительно необходимые инструменты (рис.2).

Рис.2 Настройка рабочей области

В фотошопе при создании дизайна сайта мы создаем макет (рис.3), где горячая клавиша ⌘N (Command N), вот таким образом я буду обозначать горячую клавишу в презентации — ⌘N на Mac-е, если вы пользуетесь Windows — то это CTRL+N (Control N). То есть вот этот вот “цветочек”- это CTRL на Windows. Стоит установить единицу измерения пиксели, разрешение — 72 пикселя на дюйм, режим цвета (цветовая палитра) — RGB 8 bit.

Кстати, рекомендую посмотреть прямо сейчас:

Рис.3 Настройка макета

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

Как создать дизайн сайта в фотошопе: фигуры и трансформация

Фигуры. Горячая клавиша “U”. Фигуры — это прямоугольник, прямоугольник с округленными углами, эллипс, многоугольник, прямая и фигура произвольной формы (рис.4).

Рис.4 Фигуры

Этот инструмент часто применяется в photoshop при создании дизайна сайта,  и находится  он на панели инструментов, да, вот он выделен, горячая клавиша “U”. С формами, с фигурами можно производить трансформации, мы сейчас это рассмотрим на примере фигур, то же самое можно делать и с картинками. Горячая клавиша ⌘Т — свободная трансформация (рис.5), т.е. мы двигаем объект, он у нас свободно изменяет свои размеры. Если мы нажимаем тоже ⌘Т и  берем за краешек и двигаем с SHIFT-ом (вот такой вот стрелочкой я буду обозначать нажатую клавишу SHIFT), мы видим, что размер, точнее пропорция объекта сохраняется.

Рис.5 Трансформация

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

Рис.6 Прямоугольник с округленными углами (неправильно)

Рис.7 Прямоугольник с округленными углами (правильно)

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

Выделение, перемещение. Вообще, для выделения объекта — горячая клавиша “V” для выделения и перемещения она называется move to и есть клавиша “А” для точечного перемещения (рис.8). В предыдущем примере мы видели, когда я выделял точки в прямоугольнике с округленными углами, вот я как раз нажимал эту горячую клавишу “А”, выделял точки и с ним уже дальше работал.

Рис.8 Выделение, перемещение

Копирование. Вот этот значок “⌥” — это на Mac-е “option” , если вы работаете на Windows, то это клавиша Alt (рис.9).

Рис.9 Копирование

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

Прозрачность. Клавишами от 1 до 0 мы можем изменять прозрачность объекта, “opacity” , так называемая. Вот я сейчас просто нажимаю сейчас будет 1 — это 10, 2 — 20, 30 и так далее и так до 100, т.е. 0 — это 100% прозрачности (рис.10).

Рис.10 Прозрачность

Дизайн сайта в photoshop: текст, выравнивание и цвет

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

Рис.11 Текст

Рис.12 Текст

При создании сайтов в Photoshop большую роль имеет выравнивание. Если у вас есть несколько объектов хаотичных, мы можем их выделить и выровнять. Сейчас я еще раз покажу, как это делается. Т.е. я выделяю все объекты, нажимаю “выровнять по верхнему краю” и равномерно распределить, беря за размер, за точку отсчета центр изображения. Т.е. по верхнему краю, посередине, по нижнему, то же самое по вертикали и так далее — это чтобы равномерно распределить объекты по, ну то есть равномерно распределить от первого к последнему (рис.13).

Рис.13 Выравнивание

Дальше группы слоев еще есть (рис. 14). “ ⌘G” — сгруппировать, “ ⌘ SHIFT G” — разгруппировать.

Рис.14 Группа слоев

Давайте продолжим создание сайта в фотошопе с нуля. Есть несколько эллипсов, несколько объектов, я их выделяю и группирую, они у меня находятся в папочке все. Можно группы в группы заносить, можно создавать папку из нескольких папок и так далее. Горячая клавиша “⌘ G”.

Цвет. Палитра с цветами, стоит установить цветовые координаты Hue, Saturation, Brightness , т.е. тон, насыщенность и яркость в палитре, в инструменте вот эта маленькая кнопочка, маленькая иконочка, нажмите на нее и установите HSB Sliders (рис.15).

Рис.15 Цвет

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

Как сделать дизайн сайта в фотошопе: картинки, смарт-объекты и маски

Картинки и смарт-объекты. Что важно сказать про это — смарт-объект не теряет в качестве при изменении размера, растровая картинка превращается в пятно (рис.16,17).

Рис.16 Картинки и смарт-объекты

Рис.17 Картинки и смарт-объекты

Давайте еще раз закрепим важные пункты о дизайне сайта в Фотошопе из прошедшей части урока. Я просто изменяю размер, смарт-объект, растровая картинка, увеличиваю, видим цветовое пятно. Смарт-объекты не теряют в качестве после уменьшения размера и последующего увеличения, т.е. можно спокойно их трансформировать и ресайдить. Картинки в дизайне сайта автоматически импортируются в Фотошоп как смарт-объекты, т.е. если вы добавляете картинку в Фотошоп, она превращается в смарт-объект. Особенность в том, что смарт-объекты нельзя редактировать. Имею ввиду, кисточкой что-то подтереть, подретушировать смарт-объекты не получится. Нужно либо заходить внутрь смарт-объекта, т.е. двойным кликом, либо просто, самый простой варинт — это кликнуть “растризовать”, кликнуть по изображению правой кнопкой мыши в слоях “Rastrize” и “Convert to smart oject”. Видим, когда “Растр” — это у нас просто изображение, когда “Smart object”, здесь появляется такая маленькая икононочка, надеюсь, вам видно. Нет иконочки, смарт-объект — есть иконочка.

Маски. Alt click между слоями, т.е. мы наживаем Alt и кликаем между слоями(рис.18).

Рис.18 Маски

Рис.19 Маски

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

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

Настройка фотошопа для веб-дизайна: направляющие

Направляющие. Горячая клавиша “⌘R”, чтобы скрыть и показать линейки (рис.20).

Рис.20 Направляющие

При создании сайта в фотошопе используйте линейку — это черные штучки с цифрами, это они и есть. И горячая клавиша “ ⌘;” , чтобы скрыть и показать направляющие. Т.е. давайте на скриншоте на примере, я открываю линейки и просто перетаскиваю из углов направляющие, опять же направляющие нужны, чтобы ваш макет выглядел ровно, чтобы вы могли по этим направляющим ваши текстовые блоки, картинки и фигуры уметь выровнять. И стоит еще здесь проверить, чтобы единица измерения была “пиксели”. Нужно просто нажать правой кнопкой мыши на линейке и установить пиксели(рис.21). У нас везде все в пикселях должно быть.

Рис.21 Направляющие

Для экспорта мы заходим — “Файл”, “save for web”(сохранить для веб) и сохраняйте ваш макет, если вы делаете сайты, проще всего, самый простой формат, который  не требует настроек дополнительных — это “PNG 24” (рис.22).

Рис.22 Экспорт файла

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

И я напомню про горячие клавиши (рис.23).

Горячие клавиши в photoshop значительно ускорят работу при создании дизайна сайта.

“U” — прямоугольник, эллипс, фигуры.

“Т” — это текст.

“В” — выделение, перемещение объекта.

Клавиша “А” — для точечного выделения, помним про прямоугольник с округленными углами.

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

Alt clic между слоями — мы превращаем слои в маску, нижний слой становится маской, верхний слой на него накладывается.

“⌘Т” — трансформация, изменение размера.

“ ⌘G”, “ ⌘ SHIFT G” — группировка, разгруппировка в папки.

“ ⌘R” — скрыть и показать линейки.

“ ⌘;” — скрыть и показать направляющие.

И, думаю, всем известная клавиша “ ⌘Z” — отменить предыдущее действие и если мы зажимаем “Option” или “Alt” на Windows , ALT+Z — мы можем шагать назад по нашей истории изменений, а если мы зажимаем  ⌘SHIFT и нажимаем Z, то мы делаем шаг вперед. Т.е. с ALT-ом мы двигаемся назад, с SHIFT-ом мы можем сделать вперед, потом снова назад, вперед. Нажимаем  ⌘Z, откатываемся на предыдущее изменение.

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

Как делать веб дизайн сайта в Photoshop » SHOWSKILLS — быстрый поиск бесплатных online курсов

Будь вкурсе свежих уроков!

В категории: Обучение веб-дизайну

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

https://www. youtube.com/embed/i45cot-R224

1 119 просмотров

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

• 1-3 урока мы посветим разработке прототипа и дизайну;
• 4 урок мы будем работать с адаптивным дизайном нашего проекта;
• 5 урок рисовать макет для портфолио на Bechance.

1 этап разработки web-дизайна сайта

На первом этапе вам необходимо прописать текстовый прототип в Word или Блокноте.
В тексте нужно описать:

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

2 этап, настройка Фотошопа

Перейдём к настройкам: заходим в Photoshop. Для Windows: Меню/Редактирование/Настройки/Единицы измерения и линейка. Для Mac OS: Menu/Photoshop CC/Preferences/Units & Rulers.

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

3 этап, создание документа

Нажимаем CTRL+N или переходим в Меню/Файл/Создать. Указываем параметры — Ширина: 1920, высота: 1080px и установить галочку Монтажные области/Artboards. Разрешение 72px (Пиксели/Дюйм). Очень важно указать следующий параметр — Цветовой режим: Цвет GRB, 16BIT, для более плавного отображения градиентов. В этом же окне мы можем указать цвет заднего фона. После всех настроек можно создать документ.

4 этап, настройка сетки

Переходим в Меню/Просмотр/Новый макет направляющих. Данный инструмент позволяет настраивать сетку. Вам не нужно качать никаких исходников для Bootstrap или 980grid. Данный инструмент отлично подходит для этих целей. Чтобы создать Bootstrap-сетку вам необходимо указать следующие параметры: 12 столбиков, Ширина 70 пикселей, с отступами 30 пикселей. Либо используйте так как указано в видео: 24 column, Width 60px, Gutter 20px. Также есть возможность удалить существующие направляющие, требуется установить галочку Clear Existing Guides.

Приятного просмотра…

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

Оставьте свой отзыв, для улучшения качества. Сейчас: 0 отзывов

Дизайн сайтов. Как самостоятельно сделать шаблон дизайна сайта?

Как сделать дизайн сайта в фотошопе?

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

1. Создать новый документ.
2. Добавить фон.
3. Добавить картинки.
4. Настроить стандартные кнопки.
5. Наполнить блоки текстовым контентом.
6. Оценить результат.

Шаг 1

Начнем с самого начала. Просто запустите Photoshop и создайте новый документ (CTRL + N) с параметрами, указанными на скрине ниже.

Шаг 2

Теперь вы должны добавить подходящий узор на свой фон.

Layer Style->Blending options->Pattern Overlay.

Шаг 3

Вы хотите создать потрясающий дизайн? Тогда используйте сетчатую структуру для проектирования. Поместите сетчатую структуру в ваш дизайн сайта с интервалами 60px и 20px.

Шаг 4

Итак … теперь пришло время создать меню для будущего сайта. Используйте инструмент Rounded Rectangle для его создания (радиус — 3 px). Ширину для меню возьмем — 940 px, а высоту — 34 px.

Чтоб сделать это меню более привлекательным, перейдите в Blending Options->Drop Shadow. Используйте настройки, которые вы можете увидеть на скриншотах:

Blending options->Inner Shadow

Для меню выбран цвет #6bafff.

Шаг 5

Давайте добавим текст в наше меню. Используйте для этого инструмент Horizontal Type Tool. Вы можете создать свой дизайн с любым шрифтом, который вам нравится. В примере использовался шрифт Aller [bold]. Размер 14px.

Шаг 6

Все кнопки меню являются ссылками, и вы должны показать, что они активны. Поэтому возьмем, к примеру, create — это прямоугольник (цвет, который для него использовался: # 5a90e5).

Результат:

Шаг 7

На каждом приличном сайте есть форма поиска. Используйте инструмент Rounded Rectangle (радиус — 3px), чтоб создать форму поиска со следующими параметрами: 124px и 26px.

Добавляем внутреннюю тень:Blending Options->Inner Shadow.

Создайте один прямоугольник с размерами 41px и 32px.

Blending Options->Drop Shadow

Blending Options->Inner Shadow

Blending Options->Color Overlay (цвет — #6bafff)

Теперь пришло время добавить привычный для функции поиска значок. Откройте Linecons Free->Vector Icons Pack и найдите там значок поиска.

И вот результат:

Шаг 8

Связь с социальными сетями очень полезна и важна для любого сайта. Попробуем создать простую кнопку Facebook.С помощью инструмента Rounded Rectangle (радиус — 3px) создаем кнопку.

Затем используем инструмент Rectangle (закругленный), чтоб создать квадрат (удерживая кнопку Shift) с размером — 16 px.

Выберите инструмент Pen Tool  и отрежьте половину этого квадрата.

Нажмите Edit->Transform->Rotate, чтоб поместить этот треугольник на левую сторону прямоугольника. Выделите все слои кнопки Facebook и объедините их (Ctrl + E).

Blending Options->Inner Shadow:

Blending Options->Color Overlay (#c1cac5 )

Теперь добавьте текст Перейти или т.п. на кнопку Facebook.

Попробуйте создать свой логотип Facebook для этой кнопки. Например, вы можете использовать букву F, и выделить ее синим цветом (# 5a90e5).

Результат:

Шаг 9

Создайте новую форму: ширина 940px, высота 372px.

Как всегда, добавьте тень:

И границу: Blending Options->Stroke (20px, цвет # 6bafff).

Шаг 10

Добавьте в свой дизайн стандартные иконки. Не забудьте использовать сетку, расстояние — 180px.

Шаг 11

Добавьте текст. Вы должны использовать тот же шрифт, который использовали для панели меню. Установите размер шрифта на 30px.

Поиграйте с настройками смешивания: добавьте белую тень, цветное наложение (# 6aaefd) и внутреннюю тень, чтоб получить вот такой результат:

Шаг 12

Заполните четыре столбца (ширина каждого — 240 px) текстовым контентом. Лучше добавить разный текст в каждый столбец.

Шаг 13

Создайте кнопку Читать дальше с помощью инструментов, которые мы использовали ранее. Blending options->Inner Shadow, Drop Shadow, Color Overlay (# 919392).

Step 14

Добавьте текст Читать далее или что-то подобное на кнопку.

Шаг 15

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

Шаг 16

Ваш следующий блок может быть разделом на любую тематику. Используйте инструмент Rounded Rectangle для создания квадрата (удерживайте нажатой кнопку Shift). Радиус — 3px, ширина и высота — 138px.

Перейдите в Blending options ->Stroke, чтоб ввести настройки: размер-20px, цвет # 919392.

Скопируйте и вставьте этот элемент 5 раз. Поместите эти квадраты с интервалом 20px и добавьте на них фото партнеров, сотрудников и т.д.

Шаг 17

Футер сайта так же важен, как и заголовок. Спросите себя: “Что вы хотите, чтоб ваши посетители делали, когда они дошли до нижней части страницы сайта?” Ответ, который вы получите, станет отличной отправной точкой для разработки футера вашего сайта.

Добавьте градиент, например # 3a8df1 — # 6bafff.

Шаг 18

Добавьте еще три блока в футер на свой выбор, учитывая ответ на вышеуказанный вопрос. Используйте шрифт Arial Regular для заголовков (30px) и добавьте стили, например, как на скриншоте ниже:

Используйте шрифт Arial Regular для текста в разделах (12px).

Поместите несколько стандартных значков в один из разделов футера — RSS, Google Plus + или Twitter.

Ну, собственно и все! Результат:

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

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

3

Выберите платформу

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

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

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

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

А как насчет WordPress?

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

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

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

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

Создание веб-сайтов: конструкторы веб-сайтов

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

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

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

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

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

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

«Я был искренне удивлен, что [создать веб-сайт] удалось так быстро. Я не думал, что все будет сделано за час ».

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

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

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

Squarespace оказался настоящим хитом и среди наших пользователей. Вот лишь пара их мыслей:

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

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

Squarespace предлагает 14-дневную бесплатную пробную версию. Узнайте, почему креативщики так его любят.

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

Weebly действительно проявляет себя, когда вы начинаете изучать его функции — их сотни на выбор, и большинство из них великолепны! Чтобы лучше понять, в чем заключаются сильные стороны Weebly, взгляните на наши оценки:

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

«Я думаю, что шаблоны Weebly — хороший способ познакомить вас со структурой и представлением веб-сайта.»

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

Бесплатный план Weebly позволяет «попробовать, прежде чем вы сделаете это». Посмотрите, о чем идет речь.

Разработка веб-сайтов: платформы электронной торговли

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

Shopify Pros	Shopify Cons
Продавайте по нескольким каналам, включая Facebook, Instagram, Amazon и eBay	Вы должны создать свою витрину между редактором и панелью инструментов, что означает, что у вас будет переключаться между двумя
Блестящая система инвентаризации, которая помогает вам управлять своим магазином	Единственная платформа для обеспечения собственной комиссии за транзакцию с Shopify Payments
Первое место в нашем исследовании характеристик продаж и оценки клиентов	Контент не не переформатируется автоматически, если вы переключаетесь на другую тему.

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

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

Здесь вы можете увидеть, как Shopify показал себя при тестировании нашей платформы электронной коммерции:

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

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

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

14-дневная бесплатная пробная версия Shopify позволяет вам по-настоящему почувствовать платформу, прежде чем решить, стоит ли инвестировать

«Но убежище» разве ты уже накрыл Wix? » Что ж, да, но создание интернет-магазина с Wix — это совсем другая игра!

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

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

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

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

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

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

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

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

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

BigCommerce — это мощный конструктор интернет-магазинов с множеством встроенных инструментов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Global navigation

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

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

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

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

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

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

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

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

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

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

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

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

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

На веб-сайте Best Buy хлебные крошки поддерживают основную навигацию. Имиджевый кредит Best Buy.

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

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

Поиск

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

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

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

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

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

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

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

Большое поле ввода Amazon позволяет посетителям видеть весь поисковый запрос. Изображение предоставлено Amazon.

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

Разработка отдельных страниц

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

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

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

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

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

Пример пошагового процесса оформления заказа. Изображение предоставлено Виттеей.

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

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

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

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

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

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

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

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

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

Пример F-образного узора на сайте CNN. Изображение предоставлено CNN.
Пример шаблона Z-сканирования на сайте Basecamp. Изображение предоставлено Basecamp.

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

В этом примере выделяется призыв к действию «Выберите план». Изображение предоставлено MailChimp.

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

Пример высококачественного мокапа, созданного в Adobe XD. Изображение предоставлено Coursetro.

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

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

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

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

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

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

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

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

Тонкая анимация (например, индикатор загрузки Tumblr) сообщает пользователю, что загружается больше контента. Изображение предоставлено Tumblr.

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

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

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

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

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

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

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

Кнопки

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

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

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

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

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

Картинка

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

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

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

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

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

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

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

Пример пиксельного изображения плохого размера (слева) по сравнению с изображением правильного размера (справа). Изображение предоставлено Adobe.

Видео

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

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

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

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

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

Согласно исследованиям, пользователи предпочитают более короткие видеоролики более длинным. Изображение предоставлено D-MAK Productions.

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

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

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

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

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

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

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

Зеленая кнопка CTA здесь спрыгивает со страницы и привлекает внимание посетителя.Изображение предоставлено Mozilla.

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

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

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

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

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

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

Веб-формы

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

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

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

Для удобства заполнения форм сгруппируйте связанные поля вместе. Изображение предоставлено Nielsen Norman Group.

Анимация

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

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

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

Анимация может помочь пользователям понять проблемы, например, если они ввели неправильный пароль. Изображение предоставлено The Kinetic UI.

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

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

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

Пример перехода между состояниями на корпоративном сайте. Изображение предоставлено Ramotion.

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

Фирменная анимация может создать поистине незабываемые впечатления. Изображение предоставлено Heco.

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

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

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

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

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

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

В этом примере Guardian использует шаблон Priority + для навигации по разделам. Изображение предоставлено Брэдом Фростом.

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

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

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

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

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

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

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

Доступность

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

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

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

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

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

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

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

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

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

WebAIM Color Contrast Checker сообщит вам, соответствует ли ваш коэффициент контрастности стандартам WCAG.Изображение предоставлено WebAIM.

Дальтоники и слабовидящие

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Снимок экрана с характеристиками дизайна Adobe XD. Изображение предоставлено Adobe XD.

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

Заключение

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

Руководство для начинающих: как научиться веб-дизайну дома | Винсент Ся

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

Визуализация + взаимодействие = ядро ​​веб-дизайна

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

Освоить базовые правила визуального дизайна

Изучить дизайн макета

Изучить принципы цвета

Освоить базовые знания интерактивного дизайна

Придется овладеть PS и другим инструментом макета веб-интерфейса

Понимать базовый язык кодирования (HTML, CSS)

Знаком с продуктом компании и группой пользователей

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

Знать о SEO

Макет, цвет, графика, шрифт, контент

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

1. HTML и CSS: проектирование и создание веб-сайтов

2. Изучение веб-дизайна: руководство для начинающих

3. Не заставляйте меня думать: здравый подход к веб-удобству

4. Изучение веб-дизайна Pages Functional

5. Проектирование в соответствии с веб-стандартами

Treehouse

Lynda

Udemy

1. Smashing Magazine

2. Блог Mockplus

3. Webdesigner Depot

4. Webdesignledger

6.Взлом UI

7. 1stwebdesigner

8. WEBAPPERS

1. W3Schools

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

2. Google Code University

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

3.Code Avengers

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

30 дней для изучения HTML и CSS

Руководство по HTML и CSS для новичков

Не бойтесь Интернета

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

Веб-дизайн для начинающих: простое (но полное) руководство

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

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

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

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

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

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

Найдите вдохновение у других дизайнеров

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

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

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

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

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

Ищите источники вдохновения за пределами сети

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

Обратите внимание на типографику

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

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

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

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

Изучение истории искусства еще больше расширит ваши дизайнерские знания.

‍

Изучите различные типы дизайна

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

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

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

‍

Подготовьте контент перед тем, как начать

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

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

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

Сохраняйте свой дизайн простым и интуитивно понятным

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

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

Основы взаимодействия с пользователем (UX)

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

UX ориентирован на понимание вашей аудитории. Что они ищут — и как ваш дизайн упростит поиск? UX — это проникновение в головы вашей аудитории и возможность увидеть ваш дизайн их глазами.

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

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

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

Основные сведения о пользовательском интерфейсе (UI)

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

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

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

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

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

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

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

Макет

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

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

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

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

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

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

Цвет

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

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

Монохромный

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

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

Дополнительные

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

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

Типографика

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

‍

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

-Hermann Zapf

Итак, какие правила вы, начинающий дизайнер, должны знать?

Типографика информирует тон

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

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

Засечки в сравнении с шрифтами без засечек

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

Ознакомьтесь с различиями между PT Serif и PT Sans (без засечек).

Вот PT Serif:

А вот PT Sans:

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

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

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

Орнамент против практичности

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

Типографские особенности

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

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

Начните проектировать

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

Получить отзыв

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

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

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

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

Webflow делает веб-дизайн доступным для начинающих

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

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

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

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

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

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

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

Особенно, если у вас есть супер подробное (но легкое для сканирования и понимания) руководство, подобное этому.

Сегодня мы рассмотрим основы создания веб-сайта, начиная … сейчас!

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

Что такое веб-дизайн?

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

В основном.

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

Отсюда «посмотрите» (что люди видят на вашем сайте) и «почувствуйте» (насколько легко использовать ваш сайт).

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

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

В наши дни вы можете быть дизайнером, не зная ничего из этого, благодаря конструкторам веб-сайтов «Что вы видите, то и получаете» (наш любимый — Wix) и системам управления контентом, таким как WordPress (которые вы можете получить с дешевым хостингом и одним нажмите установить с Hostgator).

Эти инструменты для создания веб-сайтов делают тяжелую работу по созданию кода за вас, поэтому вы можете использовать свои базовые компьютерные навыки (перетаскивание объектов с помощью мыши, нажатие кнопок, копирование / вставка) для создания веб-сайтов.Быстро и просто.

Что означает «взгляд»

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

Цвета

Какого цвета ваш текст? Как насчет фона за этим текстом? Ваше меню заголовка? Кнопки?

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

Шрифты

Шрифты определяют, как выглядит текст на вашем сайте. Одни и те же слова могут казаться супер-примитивными (например, всегда стильная Helvetica) или непринужденными и дружелюбными (#comic sans) только на основе шрифта!

Графика / Изображение / Видео

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

Фотографии, разумеется, сделал бы фотограф.

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

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

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

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

Письменные материалы

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

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

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

Что значит «чувствовать»

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

Макет

Макет — это способ размещения графики, текста и кнопок на странице.

Макет

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

Навигация

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

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

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

Цель таких элементов навигации — упростить людям поиск нужных страниц и информации в нужное время.

Совместимость

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

Ваш сайт должен будет выглядеть и функционировать немного иначе для экрана телефона с диагональю 6 дюймов, где люди должны касаться предметов пальцами, чем на экране ноутбука с диагональю 15 дюймов, где люди используют свою мышь / трекпад (совет от профессионала: если вы Мы собираемся заняться созданием веб-сайтов, купите себе мышку; даже трекпады Apple намного сложнее использовать).

Веб-дизайн и веб-разработка

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

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

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

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

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

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

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

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

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

Кто такой веб-дизайнер?

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

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

Дизайнер пользовательского интерфейса (UI)

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

Только визуальный «вид», эстетика, а не какие-либо «ощущения».

Итак, когда многие люди говорят «веб-дизайнер», они обычно имеют в виду именно это…

Дизайнер взаимодействия с пользователем (UX)

Но в мире веб-дизайна есть еще один конец — «ощущение» вашего веб-сайта.

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

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

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

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

Кто такой веб-разработчик?

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

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

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

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

В этот момент вы определенно выигрываете.

И тогда вам понадобится помощь одного из трех типов веб-разработчиков.

Backend разработчик

Backend-разработчики — это ребята и девчонки, которые работают над основной структурой веб-сайта.

Они используют такие языки, как Java, SQL и C ++, для получения определенной информации из баз данных, загрузки страницы при нажатии кнопки, отправки новой записи из одной из ваших контактных форм в такую ​​программу, как MailChimp, чтобы вы могли заниматься маркетингом по электронной почте.

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

Фронтенд-разработчик

Frontend-разработчики создают HTML, CSS и Javascript, благодаря которым посетители вашего сайта видят то, что видят посетители вашего сайта.

Вам нужна кнопка здесь? Разработчик интерфейса добавит это в код.

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

Разработчик полного стека

Теперь, когда мы знаем о фронтенд-разработчиках / бэкэнд-разработчиках, это легко: разработчик полного стека — это просто тот, кто может помочь с обоими сторонами «стека веб-разработки».”

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

Короткий и длинный ответ: нет!

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

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

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

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

Что хорошо подводит нас к нашему пошаговому руководству по созданию веб-сайта…

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

Да, первый шаг в разработке веб-сайта — это в некоторой степени философский вопрос: каковы ваши причины вообще создать сайт?

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

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

Вы учитесь создавать сайты, чтобы зарабатывать деньги, создавая сайты для других людей?

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

Почему спросите вы?

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

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

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

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

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

• Список общих вопросов о веб-сайте, который вы разрабатываете
• Некоторое понимание трех основных целей, которые может иметь веб-сайт
• Некоторые примеры типов сайтов, которые вы, возможно, захотите построить

Во-первых, те В общем, обратитесь к своему буддийскому монаху / Эйнштейну по вопросам:

• Зачем вам веб-сайт?
• Как для вас выглядит «успешный» веб-сайт?
• Как вы думаете, кто ваша аудитория / посетители?
• Что они получают, заходя на ваш сайт?
• Что вы хотите, чтобы они сделали, когда они перейдут на ваш сайт?
• Как идея вашего веб-сайта соотносится с другими?
• Вы хотите зарабатывать на своем сайте?

Последний хорошо подводит нас к:

3 основные цели веб-сайта

На высоком уровне веб-сайт может сделать для вас три вещи:

1. Укрепите свой авторитет
2. Привлекайте потенциальных клиентов
3. Продавайте продукты

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

Второй, с технической точки зрения, немного сложнее, но не намного.

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

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

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

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

6 типов сайтов

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

Вот несколько примеров на ваше рассмотрение (вставьте сюда широкий, размахивающий жест):

Блог

Сердце и душа блогового веб-сайта (такого как этот) — это всемогущий пост в блоге (как этот!).

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

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

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

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

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

Портфолио

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

Вот несколько отличных примеров:

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

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

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

Брошюра

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

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

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

Примеры сайтов с твердыми брошюрами:

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

С другой стороны…

Профессиональные услуги

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

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

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

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

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

Примеры:

Электронная торговля

Это просто, потому что вы точно знаете такой сайт — Amazon.

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

Смысл этих: получать трафик, продавать.

Некоторые примеры:

Шаг 2. Выберите платформу своего веб-сайта

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

Что, черт возьми, это значит?

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

Технически есть много способов сделать это.

Реально есть два основных способа:

Конструкторы сайтов

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

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

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

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

Wix

Лучшее во всем

Wix

Простота использования: 4/5
Настройка: 5/5
Скорость: 5/5
Поддержка: 5/5
Стоимость: 5/5

Wix — это то, что мы называем «конструктором веб-сайтов» — он действительно устанавливает стандарты для всех остальных.

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

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

Ознакомьтесь с полным обзором Wix здесь.

Gator Конструктор сайтов

Самый дешевый… и это неплохо!

Gator Builder

Простота использования: 4/5
Настройка: 5/5
Скорость: 5/5
Поддержка: 5/5
Стоимость: 4/5

Итог

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

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

Ознакомьтесь с полным обзором Gator Website Builder здесь.

Конструктор веб-сайтов с постоянным контактом

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

Постоянный контакт Builder

Простота использования: 4/5
Настройка: 5/5
Скорость: 5/5
Поддержка: 5/5
Стоимость: 4/5

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

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

Ознакомьтесь с нашим обзором конструктора веб-сайтов Constant Contact здесь.

WordPress

Другой основной платформой для разработки, создания и запуска веб-сайтов является WordPress.

Это «Система управления контентом» (CMS), которая упрощает создание и настройку сайтов, не зная, как программировать.

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

Сама по себе

WordPress на 100% бесплатна, что довольно круто.

Тем не менее, вам придется заплатить за хостинг и доменное имя, но общая сумма будет дешевле, чем использование конструктора веб-сайтов (особенно когда вы получаете нашу скидку до 61% и бесплатный домен через HostGator!).

HostGator

Особенности: 4/5
Скорость / Время работы: 5/5
Поддержка: 4/5
Стоимость: 4/5

Компромисс: предстоит еще много работы.

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

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

Ознакомьтесь с полной информацией о том, «что такое WordPress» здесь!

Шаг 3. Выберите шаблон или тему

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

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

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

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

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

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

• Некоторые темы / шаблоны поставляются с набором предварительно созданных страниц, поэтому такие вещи, как ваша домашняя страница, страница о странице и страница контактов, уже запущены; другие просто дадут вам несколько стандартных цветов / шрифтов и типов макетов страниц, тогда вам придется создавать нужные страницы с этой отправной точки — это немного больше работы, но вы все равно получите фору по сравнению с людьми делаю все с нуля.
• Темы и шаблоны для лучших платформ веб-сайтов можно настраивать, поэтому вы можете сделать свой сайт именно таким, каким вы хотите, но может быть полезно найти тот, в котором уже создано 70-80% того, что вы хотите — экономит время на добавление / перестановку вещей позже.

Наши любимые темы WordPress

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

Вот быстрый и грязный вариант, если вы больше заняты в режиме чтения, чем чтение:

Советы по выбору темы или шаблона сайта

Будьте проще

Именно здесь действительно важно знать цель вашего сайта.

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

Но эти вещи могут отвлекать посетителей.

Они могут усложнить настройку вашего сайта.

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

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

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

Узнайте о конкурсе

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

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

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

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

Просто найдите несколько основных хороших / плохих фигур и продолжайте двигаться!

Обратите внимание на шрифты и цвета

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

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

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

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

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

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

Не забывайте о мобильных

Вы, наверное, читаете этот пост на своем телефоне.

Откуда мы можем это знать?

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

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

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

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

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

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

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

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

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

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

Просто потому, что все упоминают «SEO».

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

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

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

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

Шаг 4. Выберите начальный брендинг

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

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

«Но подождите, разве я не должен определиться со шрифтами и цветами, прежде чем выбирать шаблон? Разве это не изменит мой выбор шаблона? »

Хороший вопрос. И нет, не надо.

Ну, можно, но не обязательно.

Почему?

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

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

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

Может быть, вам стоит их изменить, но может и не потребоваться.

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

При этом цвет и шрифты являются важными частями разработки веб-сайта.

Итак, давайте рассмотрим несколько основ каждого из них.

Цветовые схемы веб-сайта

Color — это огромная часть определения дизайна вашего веб-сайта и бренда в целом.

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

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

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

Краткая версия…

Вот основные значения цвета в отношении брендинга и веб-сайтов:

• Черный олицетворяет роскошь, мощь, элегантность и изысканность.
• Серый олицетворяет простоту, нейтралитет, логику и «будущее».
• Красный олицетворяет срочность, волнение, опасность и страсть.
• Розовый олицетворяет сладость, женственность, невинность и романтичность.
• Желтый олицетворяет оптимизм, жизнерадостность и молодость.
• Orange олицетворяет творческий подход, дружелюбие и энтузиазм.
• Фиолетовый олицетворяет успех, мудрость, богатство и королевскую власть.
• Зеленый олицетворяет здоровье, богатство, умиротворение и природу.
• Синий олицетворяет безопасность, стабильность, доверие и спокойствие.

Круто, а как выбрать цвета для своего сайта?

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

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

Создаете сайт под шикарный (он же дорогой) ресторан? Черный, красный и фиолетовый — хорошие отправные точки.

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

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

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

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

И он выдаст вам шестнадцатеричные коды (например, «# 231885»), которые вы будете использовать, чтобы сообщить конструктору вашего веб-сайта / WordPress, какой именно цвет использовать в определенных местах (вместо того, чтобы полагаться на свои глаза, чтобы попытаться сопоставить — это просто не про ход лол).

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

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

• Ваш логотип
• Вкладки меню
• Кнопки с призывом к действию
• Фоны для важной информации
• Заголовки

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

• Подзаголовки
• Фон для информации, которая важна, но не самая важная
• Эффекты наведения

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

Ду. Точнее / услужливо:

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

Шрифты для веб-сайтов

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

Будет ли ваш сайт освещать серьезный бизнес? Тогда на помощь придут классические, стильные шрифты, такие как Baskerville и Arial.

Хотите сделать что-нибудь более веселое и беззаботное? Copse или Museo — хорошее место для начала.

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

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

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

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

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

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

Но чтобы помочь вам начать работу, вот пара удобной инфографики от наших друзей из DesignMantic:

SourceSource

Шаг 5. Создайте макеты своего веб-сайта и начальные страницы

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

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

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

НО любой сайт, который вы собираетесь создать (независимо от того, используете ли вы конструктор, такой как Wix или хостинг WordPress / HostGator), будет иметь следующее:

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

Для записи, хотя мы на 99,9874% уверены, что вы это уже знаете: домашняя страница — это главная страница сайта, та, на которую вы попадаете, когда переходите на «thewebsite.com»

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

Несколько советов по созданию домашних страниц:

• Обязательно используйте привлекающие внимание визуальные эффекты.
• Если это веб-сайт для привлечения потенциальных клиентов или электронной коммерции, обязательно включите хотя бы один «призыв к действию» или CTA — что-то вроде «свяжитесь с нами, чтобы узнать цену» или «купите сейчас».
• Если у компании есть какие-то отзывы или значки доверия (например, «BBB Accredited»), приклейте туда этих плохих парней.
• Убедитесь, что есть удобные для просмотра и чтения разделы, которые рассказывают, чем занимается бизнес / организация / человек и почему посетители должны заботиться.
• Включите контактную информацию или форму подписки на рассылку, если это является частью цели веб-сайта.

О странице

Мы также уверены, что вы тоже знаете эту страницу.

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

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

И убедитесь, что эта страница отвечает на следующие вопросы:

• Как началась деятельность компании / организации?
• Для кого этот сайт?
• Чем отличается этот сайт / бизнес?

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

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

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

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

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

Продукт / Услуги / Портфолио стр. (Ы)

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

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

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

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

Рекомендации по макету веб-страницы

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

Но, возможно, вам не совсем нравятся некоторые из этих вариантов.

Или вы из тех, кто просто любит настраивать вещи, чтобы они были более «вашими».

Что ж, нам нравится такая творческая искра.

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

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

Плохие макеты расстраивают и заставляют людей прыгать с вашего сайта быстрее, чем ваш дядя-алкоголик съедает 12 упаковок Bud Light (никакого неуважения к дяде Джимми, но, черт возьми, остынь).

Некоторые общие элементы хорошей планировки:

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

Макеты веб-сайтов, которые работают

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

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

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

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

F

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

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

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

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

Зигзаг

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

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

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

Избранное изображение

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

Фото во весь экран

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

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

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

Сетка

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

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

Шаг 6. Создайте, найдите и добавьте свой контент

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

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

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

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

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

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

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

Написание копии для сайтов

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

Знайте свою целевую аудиторию

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

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

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

Итак, мы часто используем слова «начало работы» и «как новичок».

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

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

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

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

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

Знайте особенности, преимущества и возражения

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

Вы знаете, какие товары или услуги вы продаете — очевидно, вам следует о них написать?

Не совсем так.

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

Они заинтересованы в себе.

Их проблемы. Их потребности. Их мечты.

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

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

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

Высокий уровень понимания:

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

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

Поместите важные вещи наверх

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

В случае страниц вашего веб-сайта это справа вверху.

Если вы не привлекаете внимание и интерес посетителей в первые пару секунд, пока они находятся на вашем сайте / странице, прямо вверху они уйдут и найдут одно из миллиона других занятий в Интернете. (видео с кошками и Instagram, вероятно, находятся в верхней части этого списка).

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

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

Когда престижное, высокоинтеллектуальное издание, такое как Harvard Business Review, предлагает нам перестать казаться умными, мы здесь, в CaPW, принимаем это к сведению.

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

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

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

Так что говорите просто и ясно.

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

Например, мы хотели удостовериться, что вы знаете, что WordPress является CMS далее в этом посте, но объяснили, что это означает «Система управления контентом», и это в основном способ создания веб-сайтов без необходимости писать код.

Нам нравится использовать такие инструменты, как Grammarly и Hemmingway app, чтобы выяснить, не слишком ли сложно наше письмо — и вы тоже должны!

Сохраняйте дружелюбие

Это рифф на последней подсказке.

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

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

Поиск изображений и графики для вашего веб-сайта

Изображения веб-сайтов — мощная штука.

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

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

Несколько советов и список:

Совет 1. Выбирайте высокое качество

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

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

Но вы хотите убедиться, что вы используете изображения, ширина / высота которых не меньше пространства, которое вы пытаетесь заполнить на своем сайте (например, если вы создали страницу с размером 1020 x 870 пикселей для изображения, не пытайтесь растянуть изображение 750 × 420, чтобы оно уместилось).

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

Совет 2. Будьте уникальны

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

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

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

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

Смотрите наш список ниже, где их можно найти!

Совет 3. Изображения должны иметь значение

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

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

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

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

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

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

Совет 4: лица хороши

Люди — особенная вещь. # глубокие мысли

r / iamverysmart шутит в сторону, за силой зрительного контакта и лиц в маркетинге / веб-дизайне стоит много психологии.

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

Где найти изображения для вашего сайта

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

Нужно ли платить за качественные фотографии?

Вовсе нет. Изображения в этом посте в основном бесплатные (некоторые мы сделали сами и платим людям за их помощь).

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

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

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

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

Где ??

Отличные места, где можно найти бесплатные стоковые фото

Хорошие места для поиска платных стоковых фотографий

Сладкие места для получения нестандартной графики (не слишком много)

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

Хорошо, это был путь, но мы дошли до конца…

Сейчас!

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

И мы также постоянно публикуем поток суперполезных видео на Youtube!

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

Успех! Теперь проверьте свою электронную почту, чтобы подтвердить подписку и получить доступ к первому дню электронного курса!

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

Пошаговое руководство для начинающих (2021 г.)

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

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

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

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

вещей, необходимых для создания веб-сайта

• Доменное имя (ваш собственный веб-адрес, www.YourSite.com)
• Хостинг веб-сайтов (услуга, на которой размещается ваш веб-сайт)
• WordPress (бесплатная, часто используемая платформа для веб-сайтов)

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

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

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

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

Готовы? Приступим…

1. Выберите доменное имя

Первое, что вам понадобится для создания веб-сайта, — это доменное имя.

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

Доменное имя этого веб-сайта: websitesetup.org . Твое может быть что угодно.

Доменные имена могут стоить от 10 до 50 долларов в год. Обычная цена — около 15 долларов.

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

• Если вы создаете веб-сайт для бизнеса , ваше доменное имя должно совпадать с названием вашей компании.Например: YourCompanyName.com
• Если вы планируете создать для себя личный веб-сайт , тогда YourName.com может стать отличным вариантом.
• Используйте «общее» расширение доменного имени, например .com , .net и .org , если ваша цель — международные посетители или посетители из США. Используйте «локальное» расширение доменного имени, например .de , .r или .ru , если ваша цель — посетители, ориентированные на страну.

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

Если у вас еще нет доменного имени, регистрировать его не нужно.

Мы покажем вам, как получить доменное имя бесплатно в течение первого года (шаг 2):

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

Помимо доменного имени вам также понадобится хостинг веб-сайтов (веб-хостинг).

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

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

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

• БЕСПЛАТНОЕ доменное имя с SSL (для безопасности)
• Установка WordPress в один клик (бесплатно)
• Пользовательские учетные записи электронной почты
• Неограниченная или безлимитная пропускная способность (без ограничений по трафику)
• Служба поддержки клиентов, желательно 24/7 онлайн-чат

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

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

Планы хостинга

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

1) Чтобы получить учетную запись веб-хостинга, просто посетите Bluehost и нажмите «Начать сейчас».

2) Затем выберите свой план веб-хостинга (выбор плюс полностью неограничен, а базовый лучше всего подходит для новых сайтов):

3) Далее выберите и зарегистрируйте доменное имя (бесплатно в течение первого года):

Имейте в виду, что Bluehost не предлагает доменные окончания для конкретных стран, такие как .de , .fr или .ru . Если они вам нужны, вы можете купить их отдельно на Domain.com или GoDaddy.com.

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

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

3. Настройка веб-сайта WordPress (через веб-хостинг)

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

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

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

Если вы не используете Bluehost в качестве веб-хостинга, не волнуйтесь. У многих провайдеров веб-хостинга «установка WordPress» находится где-то в cPanel хостинга. Если вы имеете дело с веб-хостингом, который не предоставляет « установка в один клик », попробуйте настроить WordPress вручную.

1) Установка сайта WordPress на Bluehost

1. Войдите в свою учетную запись Bluehost
2. Щелкните «Мои сайты», а затем «Создать сайт».
3. Укажите основную информацию о своем сайте, и установка WordPress начнется.Все будет на автопилоте.
4. Когда установка будет завершена, Bluehost покажет вам данные для установки и входа в систему. Обязательно сохраните эту информацию в надежном месте.

2) Проверьте свой сайт, введя адрес своего домена

После установки WordPress вам следует проверить, все ли работает.

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

Если WordPress правильно установлен, то вы увидите очень простой веб-сайт вроде этого:

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

3) Проверьте настройки SSL / HTTPS

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

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

1. Войдите в свой портал Bluehost
2. Нажмите «Мои сайты»
3. Найдите свой сайт и нажмите «Управление сайтом»
4. Перейдите на вкладку «Безопасность»
5. В разделе «Сертификат безопасности» вы найдете статус «Бесплатный сертификат SSL».

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

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

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

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

Начиная с:

1) Выберите тему для своего веб-сайта

Темы

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

Самое главное, что в сети доступны тысячи бесплатных и платных тем WordPress.

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

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

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

Мы собираемся использовать эту тему в этом руководстве в будущем.

2) Установите понравившуюся тему

Перейдите в административный интерфейс WordPress. Вы можете найти его по адресу YOURSITE.com/wp-admin .Используйте имя пользователя и пароль, полученные при установке WordPress.

1. На боковой панели выберите «Темы → Добавить новые».
2. В поле поиска введите «Neve» и нажмите кнопку «Установить» рядом с названием темы (вам нужно навести указатель мыши на поле темы):
3. После завершения установки нажмите кнопку «Активировать», которая появится вместо кнопки «Установить».
4. Вы увидите сообщение об успешном выполнении, которое позволит узнать, что установка прошла должным образом.

3) Импорт дизайна (только для пользователей Neve Theme)

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

Вы увидите это приветственное сообщение:

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

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

Для целей этого руководства мы выберем первый в списке — «Оригинал».

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

Нажмите кнопку «Импорт», чтобы все заработало.Примерно через минуту вы увидите сообщение об успешном выполнении.

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

Мы рассмотрим некоторые из этих вариантов ниже:

4) Добавить логотип

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

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

Когда у вас будет готов логотип, вы можете добавить его на свой сайт. Перейдите в «Внешний вид → Neve Options» и щелкните ссылку «Загрузить логотип».

Вот что вы увидите:

Этот интерфейс называется WordPress Customizer и позволяет редактировать различные аспекты внешнего вида вашего веб-сайта. Для начала вы можете загрузить свой логотип. Для этого нажмите кнопку «Выбрать логотип» в верхнем левом углу.

WordPress даст вам возможность обрезать логотип, но вы можете пропустить это.

Вскоре вы увидите свой логотип в углу страницы.

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

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

5) Изменить цветовую схему и шрифты веб-сайта

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

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

Смена шрифтов работает аналогично:

1. Щелкните ссылку «Настроить шрифты» на панели «Внешний вид → Параметры Neve».
2. Neve позволяет вам выбирать из всего каталога системных шрифтов и шрифтов Google.
3. Просто щелкните поле «Семейство шрифтов» и выберите нужный шрифт.
4. После этого вы можете настроить отдельные шрифты, используемые для ваших заголовков.

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

1. Чтобы настроить шрифт, используемый для основного раздела вашего сайта, нажмите кнопку со стрелкой в ​​левом верхнем углу.
2. Щелкните «Общие». Вы попадете на аналогичную панель параметров, но на этот раз вы настраиваете основной шрифт.
3. Нажмите «Опубликовать» и «X», когда закончите.

6) Добавить боковую панель

Еще одна вещь, которую вы можете сделать на панели «Внешний вид → Невидные параметры», — это настроить, как вы хотите, чтобы ваша боковая панель выглядела.Нажмите «Content / Sidebar», чтобы начать.

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

7) Добавить виджеты (бесплатные надстройки WordPress)

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

Чтобы настроить виджеты, перейдите в «Внешний вид → Виджеты». Вы увидите это:

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

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

8) Экспериментируйте с созданной вами темой

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

Чтобы увидеть их все, перейдите в «Внешний вид → Настроить». Это запустит основной интерфейс Настройщика со всеми его настройками и предустановками.

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

5. Добавьте контент / страницы на свой веб-сайт

Страницы — это суть вашего веб-сайта. Трудно представить веб-сайт без каких-либо страниц, правда?

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

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

Для большинства веб-сайтов необходимы следующие страницы:

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

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

1) Создание домашней страницы

Если вы используете Neve, ваша домашняя страница выглядит примерно так:

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

Для этого просто нажмите кнопку «Редактировать с помощью Elementor» на верхней панели.

Вы увидите интерфейс конструктора страниц Elementor.

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

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

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

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

Вы увидите список всех доступных блоков контента.

Возьмите любой из блоков и перетащите их на холст страницы.

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

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

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

2) Создание страниц, таких как «О нас», «Услуги», «Контакты»

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

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

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

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

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

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

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

Просто выберите разные блоки страниц из библиотеки шаблонов. Например, они должны отлично работать на странице services :

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

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

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

Как всегда, не забудьте нажать «Опубликовать», когда закончите.

3) Создайте страницу блога

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

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

Щелкните ссылку «Просмотр», чтобы увидеть страницу своего блога в действии.

Добавление новых сообщений в блог:

Чтобы добавить новые сообщения в блог, просто перейдите к «Записи → Добавить новые».

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

6. Настройка меню навигации

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

Перейдите в «Внешний вид → Меню» и оттуда нажмите «Создать новое меню».

Вот как шаг за шагом создать первое меню:

1. Начните с добавления заголовка.Название меню на самом деле не имеет значения, но оно помогает отличить ваше меню от других меню (да, у вас может быть несколько).
2. Выберите страницы для добавления в ваше меню. Вы также можете добавить в меню другие элементы — например, сообщения или пользовательские ссылки.
3. Нажмите кнопку «Добавить в меню», чтобы добавить выбранные страницы в ваше меню.
4. Перетаскивайте элементы меню, чтобы расположить ссылки по важности.
5. Выберите место отображения меню. Это отличается от темы к теме, в этом случае, установите ваше меню в «Основное» место, чтобы отобразить меню в заголовке.
6. Наконец, сохраните свое меню.

На этом этапе вы увидите свое меню на главной странице во всей красе.

7. Добавьте интернет-магазин / электронную коммерцию

Последнее, что мы сделаем в этом руководстве, — это создадим интернет-магазин.

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

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

Как работает электронная коммерция на WordPress

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

Все это делается с помощью плагина WooCommerce.

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

У нас есть отдельное руководство о том, как запустить WooCommerce на вашем сайте WordPress. Мы приглашаем вас зайти туда и прочитать подробные инструкции по установке. Выполните шаги 3 и 4 , а затем вернитесь сюда.

… Итак, если WooCommerce установлен на вашем сайте, а продукты добавлены в ваш каталог, вы заметите, что в процессе WooCommerce автоматически создает новые страницы.Эти страницы:

• «Корзина» — корзина вашего магазина
• «Оформление заказа» — страница оформления заказа, на которой покупатели могут завершить свои покупки
• «Моя учетная запись» — профиль каждого покупателя; хранит прошлые заказы, текущие данные и другую личную информацию; клиент всегда может отредактировать свою информацию
• «Магазин» / «Товары» — главная страница магазина — та, где указаны ваши товары

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

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

Вы также заметите новый значок корзины в главном меню вашего сайта.

На этом этапе ваш магазин электронной коммерции полностью готов к работе. Это означает, что ваши клиенты могут прийти и сделать покупки. Вы увидите их заказы в админке WordPress в разделе «WooCommerce → Заказы».

Поздравляем — вы готовы к запуску!

Чтобы быстро резюмировать шаги, которые вы выучили:

Последнее, но не последнее — продолжайте улучшать свой веб-сайт

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

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

Если вы успешно выполнили это руководство, подумайте о том, чтобы оставить свой отзыв на нашу электронную почту — [электронная почта защищена] Это очень много значит для нас!

10 принципов хорошего веб-дизайна — Smashing Magazine

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

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

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

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

Принципы хорошего дизайна веб-сайтов и рекомендации по эффективному веб-дизайну

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

Как думают пользователи?

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

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

• Пользователи ценят качество и надежность. Если страница предоставляет пользователям высококачественный контент, они готовы скомпрометировать контент с помощью рекламы и дизайна сайта. Это причина того, почему не очень хорошо спроектированные веб-сайты с высококачественным контентом с годами набирают много трафика. Контент важнее дизайна, который его поддерживает.
• Пользователи не читают, они сканируют. Анализируя веб-страницу, пользователи ищут какие-то фиксированные точки или якоря, которые будут вести их по содержимому страницы. Пользователи не читают, они сканируют. Обратите внимание, как «горячие» области резко переходят в середину предложений. Это типично для процесса сканирования.
• Интернет-пользователи нетерпеливы и настаивают на немедленном вознаграждении. Очень простой принцип: если веб-сайт не соответствует ожиданиям пользователей, значит, дизайнер не выполняет свою работу должным образом, и компания теряет деньги.Чем выше когнитивная нагрузка и чем менее интуитивно понятна навигация, тем больше пользователи готовы покинуть веб-сайт и искать альтернативы. [JN / DWU]
• Пользователи не делают оптимального выбора. Пользователи не ищут самый быстрый способ найти нужную информацию. Они также не сканируют веб-страницу линейно, последовательно переходя от одного раздела сайта к другому. Вместо этого пользователи довольны; они выбирают первый разумный вариант. Как только они находят ссылку, которая, как кажется, может привести к цели, очень высока вероятность того, что по ней сразу же нажмут.Оптимизация сложна и занимает много времени. Удовлетворение более эффективно. [видео] Последовательное чтение не работает в Интернете. Правый снимок экрана на изображении внизу описывает путь сканирования данной страницы.
• Пользователи следуют своей интуиции. В большинстве случаев пользователи не могут прочитать информацию, предоставленную дизайнером. По словам Стива Круга, основная причина этого в том, что пользователям все равно. «Если мы находим что-то, что работает, мы придерживаемся этого. Для нас не имеет значения, понимаем ли мы, как все работает, если мы можем их использовать.Если ваша аудитория будет вести себя так, как будто вы разрабатываете рекламный щит, тогда создавайте отличные рекламные щиты ».
• Пользователи хотят иметь контроль. Пользователи хотят иметь возможность управлять своим браузером и полагаться на единообразное представление данных на всем сайте. Например. они не хотят, чтобы новые окна открывались неожиданно, и они хотят иметь возможность вернуться с помощью кнопки «Назад» на сайт, на котором они были раньше: поэтому рекомендуется, чтобы никогда не открывал ссылки в новых окнах браузера. .

1. Не заставляйте пользователей думать

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

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

Рассмотрим пример. Beyondis.co.uk утверждает, что находится «за пределами каналов, продуктов, распространения». Что означает ? Поскольку пользователи склонны исследовать веб-сайты в соответствии с шаблоном «F», эти три оператора будут первыми элементами, которые пользователи увидят на странице после ее загрузки.

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

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

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

2. Не теряйте терпение пользователей

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

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

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

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

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

3. Умейте фокусировать внимание пользователей

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

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

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

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

4. Стремление к раскрытию функций

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

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

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

5. Используйте эффективное письмо

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

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

Eleven2.com сразу переходит к делу. Никаких милых словечек, никаких преувеличенных заявлений. Вместо этого цена: именно то, что ищут посетители.

Оптимальным решением для эффективного письма является использование

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

6.Стремление к простоте

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

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

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

7. Не бойтесь белого пространства

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

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

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

8. Эффективное общение с помощью «видимого языка»

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

• Организуйте : предоставьте пользователю ясную и последовательную концептуальную структуру.Согласованность, компоновка экрана, взаимосвязи и возможность навигации — важные концепции организации. Ко всем элементам следует применять одни и те же соглашения и правила.
• Экономьте : делайте больше с наименьшим количеством подсказок и визуальных элементов. Следует учитывать четыре основных момента: простота, ясность, различимость и акцент. Простота включает только самые важные для общения элементы. Ясность : все компоненты должны быть спроектированы таким образом, чтобы их значение не было неоднозначным. Самобытность : важные свойства необходимых элементов должны быть различимы. Акцент : самые важные элементы должны быть легко различимы.
• Общайтесь : сопоставьте презентацию с возможностями пользователя. Пользовательский интерфейс должен сохранять баланс разборчивости, удобочитаемости, типографики, символики, нескольких представлений, а также цвета или текстуры для успешного взаимодействия. Используйте макс. 3 шрифта максимум 3 кеглем — максимум 18 слов или 50-80 символов в строке текста.

9. Условные обозначения — наши друзья

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

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

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

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

10. Тестируйте рано, тестируйте часто

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

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

Следует иметь в виду несколько важных моментов:

• согласно Стиву Кругу, тестирование одного пользователя на 100% лучше, чем отсутствие тестирования , а тестирование одного пользователя на ранней стадии проекта лучше, чем тестирование 50 ближе к концу.Согласно первому закону Бема, ошибки наиболее часты при разработке требований и при проектировании и тем дороже, чем позже они устраняются.
• тестирование — это итерационный процесс . Это означает, что вы что-то проектируете, тестируете, исправляете, а затем снова тестируете. Могут быть проблемы, которые не были обнаружены во время первого раунда, поскольку пользователи были практически заблокированы другими проблемами.
• тесты удобства использования всегда дают полезные результаты . Либо вам укажут на проблемы, которые у вас есть, либо укажут на отсутствие серьезных недостатков в дизайне, что в обоих случаях является полезным пониманием для вашего проекта.
  

  No related posts.