Как оформить сайт красиво: Как красиво оформить главную страницу сайта

15 лучших примеров дизайна главной страницы сайта

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

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

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

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

Содержание статьи

Семь правил оформления главных страниц
1. FreshBooks: классика жанра
2. Airbnb: ориентация на действие
3. Pixelgrade: игра на контрасте
4. Mint: минимализм еще в тренде
5. Dropbox Business: ничего лишнего
6. 4 Rivers Smokehouse: вкусная фотография
7. Melyssa Griffin: личный бренд
8. Evernote: гармоничные цвета
9. Basecamp: мультяшный стиль
10. charity: water: убедительный призыв
11. TechValidate: баланс во всем
12. Medium: белый дизайн
13. Digiday: внимание на главном
14. KIND Snacks: яркая гамма
15. Ahrefs: четкий заголовок
Вместо заключения

Семь правил оформления главных страниц

1. Хорошая homepage четко отвечает на вопросы: «Что это за компания?», «Чем она занимается?» и/или «Что вы (посетитель) можете здесь делать?»

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

О том, почему это остается важным, лучше всех объясняет Стивен Кругг (Steven Krugg), автор бестселлера «Не заставляй меня думать» (Don’t make me think): «Если посетители не могут за пару секунд определить, чем именно вы занимаетесь, надолго они не задержатся».

2. Контент должен резонировать с потребностями целевой аудитории

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

3. Главная страница содержит убедительный оффер

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

4. Сайт оптимизирован под разные устройства и экраны

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

5. Дизайн включает в себя призывы к действию (CTA)

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

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

6. Тренды всегда меняются

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

7. Дизайн должен быть профессиональным

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

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

Читайте также: Лендинг vs главная страница: ключевые отличия

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

Главная страница сайта компании FreshBooks, занимающейся облачным бухгалтерским программным обеспечением, была выбрана в качестве классического примера дизайна потому что:

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

2. Airbnb: ориентация на действие 

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

• страница с порога встречает посетителей формой поиска доступного для бронирования жилья. Очень правильное решение, ведь большинству посетителей в первую очередь необходима именно она.
• форма поиска снабжена функцией автозаполнения: введенные пользователем в прошлый раз параметры поиска вводятся автоматически (при условии, что человек залогинился).
• главный призыв к действию («Начать поиск») контрастирует с фоном и поэтому хорошо заметен; дополнительный призыв для владельцев недвижимости виден не так хорошо, но ему тоже нашлось место на первом экране сайта.
• с главной страницы пользователи могут перейти к обзору экскурсий и мероприятий (нажав на вкладку «Впечатления»), доступных в том регионе, в который они намереваются поехать. Здесь же можно посмотреть, какие из этих предложений пользуются популярностью у других пользователей. Запись на тот или иной «ивент» происходит там же, где и бронирование жилья. Таким образом Airbnb усиливает предвкушение пользователей от будущей поездки.

Читайте также: Секреты юзабилити: намерение пользователя и поисковые фильтры

3. Pixelgrade: игра на контрасте

Главную страницу этой студии дизайна, которая создает темы для WordPress, отличают следующие черты:

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

4. Mint: минимализм еще в тренде 

Чем интересен этот пример от бесплатного персонального сервиса по управлению финансами:

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

Читайте также: 10 трендов веб-дизайна на 2020 год

Дизайн сайта файлового хостинга Dropbox:

• продолжает удивлять своей простотой и минимализмом. На первом экране присутствует только то, что действительно важно: большое вполне уместное изображение с поясняющим текстом и CTA-кнопка «Попробуйте бесплатно (30 дней)».
• главная страница да и весь веб-сайт Dropbox — это показательный пример незамысловатого, но вместе с тем эффективного дизайна. Здесь не так много текста и визуальных элементов, при этом сайт совсем не кажется пустым или пресным.
• подзаголовок такой же простой, но весьма убедительный: «Безопасное хранилище для файлов. Это умное рабочее пространство, в котором собраны рабочие группы, инструменты и данные». Понять, что предлагает Dropbox, можно за считанные секунды.

Чем интересен этот дизайн:

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

Читайте также: 36 потрясающих примеров использования эффекта параллакс-скроллинга на лендингах

Преимущества дизайна этого сайта, принадлежащего Мелиссе Гриффин, которая помогает предпринимателям монетизировать свой оффер и развивать свое сообщество:

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

8. Evernote: гармоничные цвета 

Чем привлекает этот дизайн от Evernote, популярного веб-сервиса для создания и хранения заметок:

• за годы своего существования Evernote превратился из простого приложения для заметок в полноразмерный бизнес-продукт. Этот факт довольно сложно отразить на главной странице, но Evernote удается сделать это, обозначив все основные офферы в нескольких ключевых преимуществах продукта.
• фирменное сочетание ярко-зеленого и белого цветов позволяет выделить основные этапы конверсионного пути.
• от простого заголовка и подзаголовка взгляд пользователя естественно перемещается на CTA-кнопку «Зарегистрируйтесь бесплатно».
• Evernote позволяет оформить регистрацию в один клик с помощью аккаунта Google: это очень удобно и экономит время.

Читайте также: F-паттерн: неверно понятый, но все еще актуальный (даже на мобильных)

9. Basecamp: мультяшный стиль

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

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

Читайте также: Когда главную страницу сайта лучше заменить лендингом?

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

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

Достоинства дизайна:

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

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

12. Medium: белый дизайн

Чем примечателен этот пример дизайна от платформы для социальной журналистики:

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

13. Digiday: внимание на главном  

Что интересного:

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

Читайте также: Нейромаркетинг: как привлечь внимание на лендинге?

Достоинства дизайна:

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

15. Ahrefs: четкий заголовок

Почему эта страница достойна внимания:

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

Читайте также: Анатомия шрифта: визуальный гайд по типографике

Вместо заключения

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

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

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

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

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

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

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

По материалам blog.hubspot.com Изображение: freepik.com

11-01-2013

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

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

Мария Жаренкова

дизайнер-фрилансер с опытом более десяти лет

👉 Проанализируйте конкурентов и соберите примеры

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

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

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

SiteSee — галерея стильных сайтов.

99designs — примеры логотипов и фирменных стилей, обложек и упаковок, сайтов и иллюстраций.

Pinterest — фотохостинг для поиска идей.

👉 Определите тип сайта

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

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

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

👉 Выберите: самописный сайт, CMS или конструктор

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

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

Примеры СMS: WordPress, 1c-bitrix.

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

Примеры конструкторов: Tilda, Wix.

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

Мария Жаренкова

дизайнер-фрилансер с опытом более десяти лет

👉 Создайте карту сайта

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

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

Нарисуйте карту сайта от руки или воспользуйтесь сервисами Gloomaps, Flowmapp или Writemaps.

👉 Создайте макет

Сделайте черновик будущего сайта. Он помогает определить расположение элементов, утвердить цветовую гамму и структуру страниц. Макет создают в онлайн-редакторах — например Sketch или Figma.

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

👉 Сверстайте и проверьте

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

Вебинары

Если у вас мало или нет опыта в дизайне, приходите на курс Skypro «Графический дизайнер». Мы учим делать сайты, рекламные баннеры, логотипы, анимацию и многое другое. Погружаем в профессию с нуля за 10 месяцев. Научитесь разрабатывать фирменный стиль для брендов, рисовать эффектные иллюстрации, работать с Figma, Photoshop, Illustrator, Tilda, Readymag. Изучите основы UX/UI-дизайна, композиции и типографики, анимационного дизайна. После курса у вас будет 15 работ в портфолио на Behance, а наш центр карьеры подготовит вас к собеседованиям.

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

Профессиональный веб-сайт erstellen | Мейлчимп

Designprinzipien und Ideen zur Erstellung einer Professionalellen Website, um deine Markenidentität online zu präsentieren

Wenn eine Website gut gestaltet ist, sei es mit einem Website-Builder oder mithilfe von Webdesignern und Entwicklern, präsentiert sie dein Angebot, unterstützt die Generierung von Geschäftkontakten, spricht deine bevorzugte Zielgruppe an und kommuniziert klar, dass du eine source bretrausredige. Интернет-магазин Wenn du einen einrichtest, solltest du außerdem eine benutzerfreundliche und sichere Plattform zum Verkauf von Produkten anbieten.

«Mithilfe einer guten Website kannst du eine starke Markenidentität aufbauen und deine Geschichte so erzählen, wie du es möchtest», so Jonathan Cook, Gründer/Entwickler bei Neon Hive, einer neuseeländischen Webdesign-Agentur. «Du hast die volle Kontrolle über jedes Element, bis hin zum letzten Pixel». Voraussetzung ist, dass du beim visuellen Design deiner Website bestimmte Richtlinien befolgst, um die Aufmerksamkeit der Benutzer mit einer benutzerfreundlichen Benutzeroberfläche effektiv zu gewinnen und zu halten.

Verwende die folgende schrittweise Anleitung und die Design-Tips, um eine beeindruckende Website zu erstellen, die den einzigartigen Wert deines Unternehmens vermittelt.

1. Lege Ziele und Prioritäten fest, bevor du loslegst

Wenn wir a erfolgreiches Webdesign und -entwicklung denken, denken wir Domain-Name, einen zuverlässigen Web-Host, Website-Farbschemata und Content-Management-Systeme. Ausschlaggebend für erfolgreiches Website-Designs sind jedoch klare Prioritäten. Starte dein Website-Projekt, indem du festlegst, был определен Unternehmen am wichtigsten ist, damit du weißt, welche Inhalte deine Website enthalten sollte.

«Schreibe auf, wie Erfolg aussieht und arbeite von dort aus zurück», sagt Jonathan. «Auf diese Weise kannst du entscheiden, был Teil deiner Website wird». Sieh dir die Seiten an und achte darauf, welche Informationen sie bereitstellen, wie sie ihre Marken kommunizieren und was sie anbieten, um die Aufmerksamkeit der Besucher zu gewinnen und zu halten. Sieh dir an, deiner Meinung nach gut funktioniert und was du besser machen möchtest.

Diese Liste von wichtigen Website-Elementen hilft dir dabei, eine Sitemap zu erstellen. Wie der Name schon sagt, ordnet eine Sitemap deine Website, indem sie die Seiten festlegt, die du haben wirst, und bestimmt, wie die Seiten miteinander verknüpft werden. Später hilft sie dir, deine Informationsarchitektur festzulegen.

Diese grundlegenden Arten von Seiten sollten auf deiner Website nicht fehlen.

• Домашняя страница:
  

Dies ist die Hauptseite deiner Website und daher часто умирают erste Seite, die neue Besucher sehen. Sie sollten die wichtigsten Informationen, die sie benötigen, zuerst sehen, um zu verstehen, was du anbietest, und sie sollten schnell verstehen, wie die Navigation funktioniert.

• Убер исп:
  

Hier finden Besucher die grundlegenden Informationen über dein Unternehmen, z. B. wie du angefangen hast, wo du ansässig bist, deine Mission und Profile deiner wichtigsten Teammitglieder. Du kannst auch Links zu Ladenöffnungszeiten und Standorten (falls vorhanden), Links zu Social Media-Seiten und Kontaktdaten einfügen.

• Услуги:
  

Je nachdem, in welchem ​​Sektor dein Unternehmen oder deine Organization tätig ist, kann eine Seite mit kurzen Erklärungen zu den Dienstleistungen, die du anbietest, oder Abbildungen deiner Produkte sowie Links zu den Detaillierten Seite, um mehr überense diezurezu, fürenseistungen neue Besucher sehr hilfreich sein.

• Стелланжбот:
  

Wenn du häufig auf dersuche nach neuen Teammitgliedern bist, könntest du eine Seite mit verfügbaren Positionen einrichten oder ein Formular bereitstellen, über das sich Personen nach offenen Stellen erkundigen können.

• Блог:
  

Wenn du regelmäßig Inhalte veröffentlichst, kann eine Blog-Seite ein zentraler Ort sein, an dem Besucher diese finden. Das können Produktoder Service-Updates, Artikel zu deinem Angebot, Profile neuer Projekte und andere Inhalte sein, die dazu beitragen, Website-Besucher über dein Unternehmen zu informieren.

2. Итак, создан каркас для визуализации веб-сайта. Ähnlich wie ein Baupplan für ein Haus Liefert er ein zwei Dimensions Bild des Layouts, der Struktur und der Funktionalität deiner Website.

Каркасы, созданные с помощью Zettel und Stift или digital с Веб-сайт-дизайн-инструменты или einem Веб-сайт-создатель erstellt werden, mit denen du die Struktur deiner Веб-сайт визуально коммуницирует kannst. Es gibt drei Arten von Wireframes – beim Aufbau deiner Website, gelangst du von einem zum nächsten und erreichst dabei mehr Detailtreue («Верность»).

• Каркасы низкого качества: Diese frühen, groben Skizzen – in der Regel einfache Formen und Platzhaltertexte – eignen sich gut zum Mapping des Navigationsflusses. «Konzentriere dich in dieser Phase lediglich auf den Inhalt und darauf, wie der Benutzer darauf reagieren wird, anstatt darauf, wie die Website tatsächlich aussehen wird», sagt Jonathan. «Dies ist die Planungsstufe, d. час du skizzierst die Website lediglich grob und machst dir Gedanken über die Hierarchie.“

• Каркасы средней точности: В более поздней фазе есть ночная фотография или Live-текст. Du erstellst Schwarz-Weiß-Renderings, die eine genaue Darstellung des Website-Layouts zeigen. Zur Erstellung dieser Renderings gibt es Tools, für die es kostenlose Testversionen gibt, zum Beispiel Sketch oder Balsamiq. «In diesem Stadium baust du das Gerüst deiner Website», — сказал Джонатан. «Du brauchst kein bestimmtes Design, aber du brauchst klare Linien und genaue Größenangaben».

• Высококачественные каркасы: In dieser letzten Phase des Designs erstellst du ein Modell, das aussieht wie deine eigentliche Website, mit Bildern, Farbschema und echten Texten. Jetzt kannst du Dinge wie Menüs und Interaktive Inhalte gestalten. «Hier fügst du Farben und Texte hinzu, aber es handelt sich noch nicht um einen funktionierenden Prototyp», сагт Джонатан. «Dies ist nach wie vor nur ein Beispiel für den Aufbau deiner Website».

3. Denke beim Design an deine Zielgruppe

Konzentriere dich in den Phasen des Website-Designs darauf, einen Asset für deine Zielgruppe zu erstellen. Das ist schließlich дер Sinn дер Sache. Stelle sicher, dass du in jeder Phase der Website-Entwicklung – von der Festlegung von Prioritäten über die Formatierung bis hin zur Navigation – an die Anforderungen deiner Zielgruppe denkst.

«So spannend es auch sein mag, eine völlig einzigartige und unorthodoxe Website zu erstellen, zuerst solltest du immer an den Endnutzer denken», sagt Jonathan.

Anhand dieser Checkliste kannst du für eine положительный Benutzererfahrung (UX) sorgen.

• Sorge für eine visuelle Иерархия:
  Eine Solide Hierarchie erleichtert es den Besuchern, schnell Informationen zu erhalten und zu verstehen, wo sie auf deiner Website mehr erfahren können. Zur visuellen Hierarchie zählen Absätze, Farben, Leerzeichen, Wiederholungen und mehr.
• Weniger ist mehr:
  Achte beim Design auf eine besucherfreundliche Erfahrung, indem du überlegst, ob die Benutzer die Elemente wirklich alle benötigen. Möglicherweise fügst du Features hinzu, die die Website kompliziert machen und die Navigation für deine Zielgruppe erschweren.
• Sorge für einen klaren Handlungsaufruf (CTA):
  «Bestellung aufgeben», «Jetzt kaufen», «Registrieren», «Kontakt» и sonstige CTAs sollten leicht zu finden und intuitiv sein. Frage dich immer wieder, ob dein Website-Design so konzipiert ist, dass deine Zielgruppe weiß, wohin sie als nächstes klicken soll.
• Sorge dafür, dass sie zugänglich ist:
  Deine Website sollte responsiv und von jedem Gerät aus zugänglich sein. Überprüfe, wie unterschiedliche Aspekte Deiner Website auf PCs, Tablets und Handys aussehen und funktionieren. Vergewissere dich, dass den Benutzern Texte und Bilder auf verschiedenen Geräten richtig angezeigt werden können und dass sich Buttons und CTAs Problemlos auf verschiedenen Bildschirmen anklicken lassen.

4. Verwende Fotos, um deine Geschichte zu erzählen

Eine Website ist ein visuelles Erlebnis, также konzentriere dich auf Bilder, die deine Zielgruppe ansprechen, um zu vermitteln, worum es bei deiner Marke geht. Wenn du noch keine eigenen Fotos zur Veranschaulichung deiner Produkte oder Dienstleistungen hast, gibt es viele Quellen für Stock-Bilder. Веб-сайты, содержащие Unsplash, Pexels и Pixabay, содержат большие объемы информации, а также kostenlosen Bildern, mit denen du sofort loslegen kannst.

Jonathan schlägt vor, eine Serie von Stockbildern vom selben Set oder vom selben Fotografen auszusuchen. «Auf diese Weise kannst du dafür sorgen, dass der Stil deiner Website konsistent ist», sagt er. «Dies lässt deine Website Professionaleller und dein Unternehmen vertrauenswürdiger erscheinen».

Beachte diese Tipps, wenn du Bilder auswählst.

• Sorge dafür, dass deine Bilder eine Geschichte erzählen.
  Wähle ein Bild nicht nur deshalb aus, weil es hübsch aussieht. Überlege dir, ob das Bild zu deinem Inhalt passt und deine Marke zum Leben erweckt.
• Sei originell, auch wenn du Stock-Bilder verwendest.
  Triff nicht die offensichtlichste Wahl. Du willst kein Foto auswählen, das ein Besucher soft as Stock-Bild erkennt, das er bereits auf einem Dutzend anderer Websites gesehen hat.
• Sorge dafür, dass die Personen auf den Fotos deiner Zielgruppe ähneln:
  

So haben die Besucher das Gefühl, dass deine Website – und deine Marke, dein Produkt oder dein Service – etwas ist, mit dem sie sich identifizieren können und das sie brauchen.

• Sorge für einen einheitlichen Bildstil:
  Vergewissere dich, dass die visuellen Elemente deiner Website zu deiner Marke passen. Sorge für einheitliche Farben, Schriftarten und Bilder, sodass sie dein Markenbild stärken.
• Schneide Stock-Bilder zu, um mehr Wirkung zu erzielen:
  Wenn du z. B. selbstgemachtes Eis verkaufst und ein Bild findest, auf dem ein süßes Kind zu sehen ist, das mit seiner Familie Eisst, dann schneide das Foto so zu, dass das Kind im Vordergrund steht. Im Vergleich zu anderen Websites, auf denen das nicht zugeschnittene Bild verwendet wurde, wird es mehr Aufmerksamkeit erhalten und einzigartig aussehen.

«So spannend es auch sein mag, eine völlig einzigartige und unorthodoxe Website zu erstellen, zuerst solltest du immer an den Endnutzer denken».

5. Verfolge deine Performance и Verbesre dich mit der Zeit

Deine Website wächst mit deinem Unternehmen. Verfolge deine Performance von Anfang and mithilfe deiner Website-Berichte, um festzustellen, был функциональным и не был nicht. Nimm anschließend Anpassungen vor, um das Erlebnis für Benutzer zu verbessern – und deine Ergebnisse.

Интеграция с Google Analytics на веб-сайте, связанном с активацией и поиском, который включает в себя информацию о трафике, и он был отключен. A/B-тесты – более точные тесты разных версий. So kannst du feststellen, welche Elemente deiner Website am besten funktionieren, und dafür sorgen, dass dein CTA deine Besucher motiviert. «Wenn du CTAs erstellen möchtest, die zu einem unvergesslichen Web-Erlebnis beitragen, musst du ständig testen, is am besten funktioniert», Сагт Джонатан.

Eine Möglichkeit zu sehen, wie Benutzer mit deiner Website Interagieren, ist ein Heatmapping-Tool wie Hotjar, sagt Jonathan. Тепловое картирование включает в себя более четкие графические изображения, отображающие данные, полученные из них на месте. So siehst du, welche Bereiche deiner Website die meiste Aufmerksamkeit erhalten und wie sich dein Design und deine Iterationen zukünftig verbessern lassen.

„Da es sich um den Echtzeit-Traffic handelt, der nachverfolgt wird, eignet es sich sowohl für neue Websites als auch für Websites, die bereits lange online sind. «Und das Beste daran ist, dass die Darstellung der Heatmaps einfach und verständlich ist».

Achte auf Details

Denke bei der Gestaltung deiner Website daran, dass sie der Dreh- und Angelpunkt für deine Marketingaktivitäten ist. Vielleicht ist sie der erste Eindruck, den jemand von deinem Unternehmen hat, und da du möchtest, dass dieser Eindruck gut ist, solltest du keine halben Sachen machen.

Scheue keine Mühen, um es richtig zu machen, rät Jonathan. Stelle sicher, dass alle deine Funktionen auf Bildschirmen jeder Größe funktionieren, damit die Benutzer auf deiner Веб-сайт navigieren und sie nutzen können. Anderenfalls gehen sie einfach zur Konkurrenz.

«Ein kostengünstiges Webdesign beetet dir nicht die Flexibilität und Kontrolle, die du benötigst, um deinen digitalen Raum identifizierbar und funktional zu deinem eigenen zu machen», sagt er. „Jedes Element zählt – самостоятельная основа. Verzichte nicht auf Qualität.“

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

Обновлено 9 июля 2019 г.

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

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

Завоюйте доверие с помощью чистого, привлекательного дизайна веб-сайта

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

1 Сделайте макет простым.

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

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

2 Удобная навигация.

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

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

3 Используйте четкие призывы к действию.

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

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

4 С содержанием меньше значит больше.

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

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

5 Не бойтесь пробелов.

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

Google — лучший пример использования пробелов. Чище быть не может — просто пустая страница с логотипом и окном поиска.

6 Украсьте дизайн своего веб-сайта яркими цветами.

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

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

7 Используйте привлекательные, легко читаемые шрифты.

Используйте привлекательный, визуально сбалансированный и уникальный шрифт, чтобы сделать текст вашего веб-сайта четким и интригующим. Четыре самых популярных шрифта: Brandon Grotesque, Museo Sans, Railway и Playfair Display.

Бельгийский веб-сайт детской одежды Studio Aimee использует Brandon Grotesque для чистого и удобного шоппинга.

8 Привлекайте пользователей видео и богатыми изображениями.

Видео и изображения привлекают больше внимания, чем просто текст. Фактически, целевые страницы с видео могут повысить конверсию более чем на 80%. Используйте масштабируемые изображения (SVG), чтобы обеспечить высокое качество работы пользователей как на настольных компьютерах, так и на мобильных устройствах.

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

Поддерживайте интерес посетителей с помощью удобного веб-сайта

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

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

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

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

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

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

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

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

3 Используйте призывы к действию, чтобы упростить поиск.

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

У Square есть простой призыв к действию, побуждающий владельцев бизнеса начать продажи. Их кнопка CTA гласит: «Создать учетную запись Square». Это не намного проще.

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

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

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

5 Разделите содержимое заголовками разделов.

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

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

6 Говорите как настоящий человек.

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

Компания Zipcar делает свои услуги более понятными, а навигацию по сайту — более удобной благодаря легкому голосу бренда.

7 Подтвердите действия ваших посетителей.

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

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

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

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

1 Проведение тестов обеспечения качества (ОК).

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

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

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

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