На этой неделе мы показали вам как создать веб-сайт. Теперь мы рассмотрим, как создать идеальный дизайн для вашего уголка Интернета. К концу этой статьи вы будете знать, как сделать следующее:
- Создать веб-страницу с нуля
- Дизайн веб-страницы
- Как протестировать фрейм веб-сайта
- Как создать прототип сайта
- Как использовать свой бренд на своем веб-сайте
Прежде чем начать – подумайте о своем времени и целях
В этом разделе мы подробно рассмотрим разработку веб-сайта, от ранних набросков макета до финального производства. Очень важно понимать, что создание больших качественных веб-сайтов — это трудоемкий итеративный процесс.
Этот процесс начинается сейчас, но будет продолжаться… вечно. Интернет — это постоянно меняющаяся арена, и ожидается, что он будет продолжать двигаться. Вы всегда будете работать над своим веб-сайтом, поскольку вы улучшаете его производительность с течением времени или меняете цели своего веб-сайта, чтобы реагировать на изменения на рынке.
Чтобы быстро что-то запустить, вам нужно быть очень стратегическим в том, что вы выбираете сделать в первую очередь. Вам не нужно сразу же запускать ВСЕ. Оглянитесь на свои цели и набросайте, как будет выглядеть наименьший возможный веб-сайт для достижения этих целей – минимально жизнеспособный продукт.
Теперь сосредоточьте все свое внимание на достижении этого. Если вы пойдете слишком далеко и слишком рано, вы застрянете на несколько недель. Будьте умны в выборе работы, которую вы выберете.
Возможно, все, чего вы сможете добиться на этой неделе, это создать одностраничный веб-сайт с вашим прототипом логотипа и текстом «скоро»! Это определенно лучше, чем ничего, и дает вам возможность расширить его позже.
Создание вашего веб-сайта может показаться сложной задачей, но по мере планирования веб-сайта вы поймете, какие страницы абсолютно необходимы для запуска, а какие страницы можно добавить позже. Лучше создать небольшой, высококачественный веб-сайт, чем большой сайт с множеством страниц, содержащих плохой или отсутствующий контент. Вы ничего не потеряете, если изначально уберете эти дополнительные страницы. Ожидается, что веб-сайты будут развиваться и меняться с течением времени, и вы сможете легко расширить свой веб-сайт после запуска.
Планирование страницы веб-сайта
Когда вы начинаете создавать свой веб-сайт, первое, что вам нужно продумать, — это то, с каких страниц он будет начинаться и как вы собираетесь связать их между собой, чтобы пользователи могли легко находить созданный вами контент.
Навигация невероятно важна для правильной работы. Если посетители не могут быстро найти то, что ищут, они уйдут так же быстро, как и пришли!
Обычно это решается с помощью панели навигации, которая остается закрепленной в верхней части страницы, когда пользователь прокручивает ее вниз. Навигация для 95% веб-сайтов представлена в виде панели вверху, которая сворачивается в значок на мобильных сайтах. Поэтому важно выбрать правильные страницы верхнего уровня для размещения в этой панели навигации. Вам не обязательно нужно, чтобы каждая страница была связана сверху, так как это приведет к тому, что панель очень быстро загромоздится, что затруднит навигацию.
Если ваш сайт требует много страниц, даже с момента запуска, вам нужно будет сгруппировать их по категориям и вложить их в раскрывающиеся меню в вашей навигационной панели. Вы видели это много раз на модных сайтах, где у них большой ассортимент товаров, разделенных на несколько категорий. Обычно они используют большие, просторные раскрывающиеся панели, чтобы разместить это. Лучшие примеры умудряются четко отображать большой ассортимент опций, не превращая его в беспорядочную кучу меню внутри меню. Если вы планируете модный бизнес или любой другой бизнес с разнообразным ассортиментом продукции, стоит потратить много времени на то, чтобы сделать навигацию правильной. Если люди не могут найти ваши товары, они не смогут их и купить.
Вернитесь к результатам маркетингового исследования, чтобы понять, чего хотят добиться посетители вашего сайта, и как можно быстрее доведите их до этой цели, не вызывая при этом путаницы.
Результаты маркетингового исследования также должны помочь в разработке общего дизайна вашего веб-сайта.
Дизайн веб-страницы
Один из моментов, о котором вам следует подумать при разработке веб-страницы с нуля, — это дизайн.
На прошлой неделе мы прошли создание мудборда, чтобы помочь установить внешний вид и ощущение вашего бренда и собрать воедино вдохновение. Вам стоит снова обратиться к этому для вашего веб-сайта. Вы даже можете создать целую мудборд, посвященную вдохновению для веб-сайта. Опять же, есть множество ресурсов, демонстрирующих невероятные дизайны веб-сайтов.
Ниже приведены некоторые ресурсы, которые могут помочь вам в этом процессе:
Каркас веб-сайта
Каркасное моделирование — распространенный и чрезвычайно полезный шаг в дизайне, независимо от того, создаете ли вы одностраничный лендинг-сайт или крупный интернет-магазин.
Он позволяет вам быстро экспериментировать с макетами без необходимости разрабатывать высококачественные проекты. Каркасирование можно выполнять с помощью ручки и бумаги, и этот процесс включает в себя создание макета каждой веб-страницы с использованием линий и полей для указания того, где можно разместить контент. Это позволяет вам быстро генерировать макеты и представлять поток страницы, не тратя на это много времени. Используйте это, чтобы продумать размещение призывов к действию (CTA), изображений, блоков текста и навигации.
Прототип веб-сайта
Это дополнительный шаг, который вы можете предпринять при создании своего веб-сайта. Это гораздо проще, чем кажется, поскольку не требует написания кода, поскольку существует множество приложений, разработанных для того, чтобы сделать этот процесс быстрым и простым.
Идея состоит в том, чтобы оцифровать ваши каркасы (вы по-прежнему можете использовать заполнители для текста и изображений) и использовать программное обеспечение для создания прототипов, чтобы связать их вместе и получить еще более четкое представление о структуре и навигации сайта.
Вы можете создавать статичные изображения в оттенках серого для ваших макетов каркаса в графическом редакторе, например, Photoshop, а затем загружать их на эти сайты прототипирования. Затем эти сайты позволят вам связать несколько прототипов вместе, чтобы создать макет вашего веб-сайта, который вы можете предварительно просмотреть и протестировать.
Многие из этих приложений позволят вам создавать проекты непосредственно в программе:
Вы можете начать использовать свои прототипы, чтобы определить, где вы собираетесь размещать свои сообщения, чтобы они были наиболее эффективными. Заменяя контент-заполнитель реальным контентом, убедитесь, что он работает на достижение вашей стратегии. Когда кто-то попадает на вашу целевую страницу, будет ли он точно знать, чем занимается ваш бизнес, в течение нескольких секунд? Быстро ли веб-сайт подталкивает их к действиям, которые вы хотите, чтобы пользователи выполняли?
Конечно, это касается как самих сообщений, так и того, где они размещены и представлены на странице.
Брендинговый дизайн веб-сайта
После того, как вы установили идеальные макеты, дизайн естественным образом будет соответствовать вашему бренду. Вам нужно применить работу, которую вы завершили на прошлой неделе, к вашему веб-сайту, поскольку последовательность является ключом к построению вашего бренда. Ваш веб-сайт должен выглядеть соответствующим образом и соответствовать остальной части вашей маркетинговой деятельности и коммуникации.
Выбранные вами фирменные образы будут иметь решающее значение для создания привлекательного и вовлекающего сайта. Высококачественные изображения необходимы для того, чтобы ваш сайт выглядел четко на множестве разных размеров. Размытое изображение создает плохое первое впечатление.
Логотип, который вы разработали на неделе брендинга, должен стать вашим первым пунктом назначения. Убедитесь, что он виден в верхней части вашего сайта на каждой странице. Многие сайты встраивают его в верхнее навигационное меню, которое, скорее всего, будет на каждой странице. Вы также можете использовать логотип для навигации, нажав на него, можно вернуться на домашнюю страницу сайта.
Расположение фирменных цветов
Применение цветовой палитры вашего бренда на вашем сайте гарантирует, что ваш бренд будет четко виден, одного этого может быть достаточно, чтобы сделать ваш сайт мгновенно узнаваемым. Ваш основной цвет бренда должен быть представлен последовательно на вашем сайте.
Вот распространенные места, где можно использовать основной цвет вашего бренда:
- Навигационные заголовки
- Основные цвета фона баннера (будьте осторожны, если у вас доминирующий цвет)
- Заголовки и подзаголовки страниц
- Текстовые гиперссылки
- Цвета кнопок (хотя вы можете выбрать контрастный цвет, чтобы сделать ваши призывы к действию более заметными)
- Цветные иконки
- Наложения поверх ваших стоковых фотографий
Вы можете использовать ваши вторичные цвета аналогичным образом, чтобы создать интерес, вариацию и контраст. Просто будьте последовательны в своем методе применения. Помните, вы можете использовать свое программное обеспечение для прототипирования, чтобы экспериментировать столько, сколько захотите. Тестирование вариаций и итерации ваших дизайнов являются ключом к быстрому достижению окончательного дизайна, которым вы довольны.
Выбор правильных изображений
При выборе хорошей графики для вашего веб-сайта следует использовать активы бренда, создание которых мы описали на 8-й неделе. Вот несколько дополнительных советов по их применению на вашем веб-сайте:
- Убедитесь, что выбранные вами изображения дополняют текст, который вы пишете. Они должны поддерживать ясное сообщение, которое вы пытаетесь донести.
- Будьте осторожны, размещая текст поверх изображений. Это может ухудшить читаемость. Применение акцентного цвета поверх может помочь, уменьшив шум на заднем плане.
- Большие изображения могут повлиять на время загрузки. Вы всегда можете сохранить их в формате jpeg, чтобы сжать размер файла, если это так.
- Избегайте акций, которые выглядят слишком общими или поддельными. Это действительно очевидно и повредит доверию и подлинности вашего сайта (подробнее об этом позже).
- Не переусердствуйте с изображениями. Изображения очень эффективны и могут отвлекать, если их слишком много. Помните о целях вашего веб-сайта и убедитесь, что каждое изображение играет свою роль и не мешает им.
Сосредоточиться на веб-сайте
Другим важным элементом веб-дизайна является то, как вы пишете и представляете свой контент таким образом, чтобы люди действительно потратили время на его прочтение. Написание эссе о продуктах на вашей домашней странице просто не работает и недостаточно увлекательно.
Часть этого решается с помощью четкого веб-шрифта с хорошим контрастом, размером и интервалом. Если вы используете темы, встроенные в платформу веб-сайта, то существует множество тем, которые, естественно, обладают отличной встроенной читабельностью. Однако это только половина дела. Усталость от чтения, особенно на экранах, очень реальна, и вам нужно быть умным, чтобы убедиться, что вы пишете и размещаете свой текст таким образом, чтобы его действительно читали.
Следуйте этим рекомендациям:
- Убедитесь, что ваш текст понятен и избегайте двусмысленности.
- Сохраняйте простую структуру предложения. Избегайте сложных слов и сочетаний.
- Быстро переходите к делу.
- Разбейте большие объемы текста на отдельные, более мелкие блоки с собственными заголовками.
- Не пытайтесь донести слишком много сразу. Определите, какую мысль пытается донести каждый текстовый блок, и придерживайтесь ее.
- Используйте изображения рядом с текстом, чтобы побудить людей читать.
- Используйте пустое пространство! Обеспечьте достаточное пространство (отступ) вокруг вашего контента, чтобы он не был переполнен.
Как убедиться, что ваш сайт удобен для мобильных устройств
Невероятно важно, чтобы ваш сайт работал гладко на мобильных телефонах и планшетах, поскольку сейчас так много людей потребляют контент через эти устройства. Google фактически будет наказывать сайты в своих поисках, если вы не выполните это!
К счастью, в наши дни это довольно просто. Большинство стандартных тем, которые идут с веб-платформой, должны использовать «адаптивный» дизайн. Это означает, что при уменьшении ширины экрана контент будет автоматически подстраиваться под этот новый размер, идеально!
Тем не менее, стоит проверить, что изображения и видео, которые вы используете, остаются видимыми при уменьшении масштаба, а текст по-прежнему читаемым. Если у вас нет нескольких разных типов планшетов и мобильных телефонов, вы можете задаться вопросом, как это проверить. Ну, самый быстрый способ — захватить левый или правый край вашего браузера (убедитесь, что он не на весь экран) и перетащить его влево или вправо, чтобы сделать окно больше или меньше. Вы увидите, как содержимое вашего веб-сайта изменится, когда вы это сделаете, и вы сможете проанализировать свои макеты при разных размерах. Существует также более точный метод, который подразумевает использование инструмента, встроенного в браузер Chrome:
- Щелкните правой кнопкой мыши на вашей веб-странице.
- Нажмите «Проверить» (откроется панель).
- В левом нижнем углу этой новой панели находится значок экрана и телефона (переключить панель инструментов устройства).
- Щелкните этот значок
Теперь вверху у вас есть несколько серых полос, которые позволяют вам имитировать то, как выглядит ваш браузер при определенных разрешениях. Есть даже раскрывающийся список для выбора популярных телефонов/планшетов и разрешений, которые они используют. Здорово!
Независимо от того, решите ли вы создать сайт своей компании самостоятельно или нанять агентство, которое сделает это для вас, существует множество расходов, связанных с разработкой сайта. Вам придется не только платить за доменное имя, хостинг и любую выбранную вами веб-платформу, но также будут постоянные сборы за обслуживание сайта.
Если вы наймете дизайнерское агентство, чтобы оно сделало это для вас, это будет большой стоимостью для вашего стартапа. Вам следует подумать, покроют ли ваши средства эти расходы или будет дешевле сделать это самостоятельно. Как мы показали в последних нескольких статьях, настройка веб-сайта намного проще, чем вы думаете. Хотя существуют расходы, связанные с обоими подходами к разработке вашего веб-сайта, вам нужно определить, какой из них более осуществим для вас.
Резюме
При разработке веб-сайта подумайте о том, как вы хотите, чтобы был представлен ваш бренд. Скорее всего, ваш веб-сайт будет одним из первых впечатлений, которые клиенты получат от вашего бренда. Это означает, что крайне важно правильно передать сообщение. Вам также нужно убедиться, что ваш веб-сайт удобен для пользователя и может использоваться на широком спектре устройств. Веб-сайт, который плохо выглядит на мобильных устройствах, может заставить пользователя уйти.
Вернитесь к своей стратегии и подумайте, как вы можете использовать свой дизайн, чтобы побудить пользователей перемещаться по веб-сайту так, как вам нужно, чтобы достичь желаемой цели.
После того как вы разработали и запустили свой веб-сайт, вам захочется проверить, действительно ли он выполняет свою задачу.
