Создать красивый сайт, интересное оформление сайта: самоучители, советы

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

Тренды

1. Цветовые гаммы

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

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

The L.A. Times является отличным примером стандартной цветовой схемы.

2. Шапка и боковые баннеры

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

Если блоги обычно используют баннеры 125 на 125 пикселей, то новостные сайты обычно тратят на баннер 300 на 250 пикселей или же используют длинные боковые баннеры.

Telegraph, к примеру, отводит 730 на 90 пикселей на баннер в области шапки.

3. Верхняя навигация

Хоть здесь и есть несколько исключений, но в большинстве своем новостные сайты используют место сразу под шапкой для основного навигационного меню. The New York Times и MSNBC – яркие примеры исключений из этого правила, они оба используют левую боковую панель для меню навигации.

Читайте также:  10 элементов лендинга, которые гарантированно повысят конверсию

А вот Times Online использует двойную панель навигации.

4. Области со вкладками контента

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

5. Обложки, основанные на сетке

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

Различия между блогами и новостными сайтами

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

Интеграция с соцмедиа

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

Конечно, новостные веб-сайты не отрицают важность соцмедиа, но они и не перебарщивают с использованием социальных сетей. Довольно часто вы можете встретить кнопку “digg it”, как на Huffington Post.

RSS фид

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

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

Комментарии

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

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

Примеры лучших новостных сайтов

The Onion

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

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

New York Times

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

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

Chicago Tribune

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

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

Times Online

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

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

image

Главное фото взято с сайта Depositphotos

Больше по веб-дизайну:

20 шагов к созданию идеального веб-сайта

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

Читайте также:  20 отличных примеров использования карточного UI

10 малоизвестных факторов, которые влияют на конверсию

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

Принцип MOBILE-FIRST

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

Дизайн в первую очередь под мобильные устройства — это даже не тренд, а необходимость. Проверьте, перешел ли сайт на mobile-first, в инструменте проверки URL в Search Console. 

С 1 июля 2019 года Mobile-first индексация в Google включается по умолчанию для всех новых доменов.

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

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

Постепенная загрузка контента (LAZYLOAD)

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

КАРТОЧНЫЙ ДИЗАЙН

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

image

«Разорванная» модульная сетка

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

Большие фото

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

Минималистичное меню

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

«Живой» дизайн

Добавляйте фишки, которые захватывают внимание пользователя:

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

Крутой дизайн сайтов: видео

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

Виды дизайна сайтов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Биржи дизайнеров

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

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

1.Биржа illustrators.ru.

На бирже выставлено много готовых интересных работ. Сразу же можно узнать стоимость выбранного варианта.

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

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

2.Биржа prohq.ru.

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

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

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

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

3.Биржа weblancer.net.

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

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

Фрилансеры уже предложили готовые дизайны сайтов.

Заказчику будет легко ориентироваться на этой бирже.

Каталоги готовых дизайнов сайтов

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

  1. Каталог bitrixtemplates.ru.

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

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

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

2.Каталог megagroup.ru.

Здесь также можно выбрать дизайн сайта в зависимости от категории.

Цены доступны при наведении курсора на выбранный продукт. Компания предлагает даже распродажу.

3.Каталог vigbo.com.

Еще один каталог дизайнов сайтов.

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

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

В заключение

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

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

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

Что входит в понятие «оформление сайта» в нашем понимании:

  1. Подбор цветовой гаммы для сайта;
  2. Формирование расположения текста, рисунков и видео материалов на страницах;
  3. Расположение информационных блоков (рекламы, комментариев, похожих статей и т.д.)
  4. Подбор шрифта (стиля и размера);
  5. Оформление элементов дизайна таким образом, чтобы было удобно посетителю.

Почему ещё важно ПРАВИЛЬНО оформить сайт?

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

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

Если на сайте

  1. Правильно подана информация;
  2. Выделены главные элементы статьи;
  3. Есть дополнительные тематические ссылки;
  4. Цвета не «выедают» глаз;
  5. Явно выражены основные достоинства сайта.

То:

  1. Человек дольше пробудет на странице;
  2. Просмотрит дополнительные страницы;
  3. Зарегистрируется;
  4. Оставит комментарий;
  5. Добавит сайт в закладки или социальные сети;
  6. Вернется на сайт ещё раз.

Следовательно:

  1. Сайт будет лучше ранжироваться в поисковой выдаче;
  2. Поисковые системы будут уважать проект;
  3. Ресурс получит ещё больше целевой аудитории.

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

Как оформить сайт правильно?

Чтобы хоть как-то структурировать наши советы, мы разобьём их на страницы и главные элементы.

Цветовая гамма сайта

Создавая дизайн сайта, или дорабатывая его элементы, вы обязаны просто помнить о простом правиле: «На сайте должно быть не более 5-ти цветовых оттенков». Выбирать эти оттенки тоже нужно уметь, так как далеко не все цвета сочетаются. Помочь с этим могут специализированные сайты. Мне, например, очень по душе www.colourlovers.com – тут можно с легостью подобрать желаемую цветовую гамму с точными номерами цветов, а главное — посмотреть как они сочетаются. После чего, старайтесь во всех элементах использовать только эти цвета и оттенки.

Оформление главной страницы сайта

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

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

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

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

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

Оформление внутренней страницы сайта

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

  1. На самом видном месте (в центре странице) должен находиться тот контент, за которым пришел человек (статья, видео ролик, фотографии и описание товара и т.п.).
  2. На втором месте по важности должна находиться реклама (дабы по ней кликали), либо же кнопка или форма для оформления заказа. Это нужно сделать для того, чтобы клиент просто так не ушел от вас. Возможно, это несколько назойливо, однако если знать меру (дозировать рекламу и не делать форму/кнопку большой), то всё будет отлично. Такие элементы помещают обычно после статьи или с правой или левой стороны, как можно выше.
  3. На третьем месте по важности будет находиться навигация по сайту: меню, похожие товары/статьи и другие интересные и полезные ссылки. Этими ссылками мы забиваем остальное пустое место, но опять же, не перебарщиваем, дабы сайт «дышал».

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

Отдельное место занимает оформление текста. Несмотря на его содержание, он должен визуально легко читаться, с первого взгляда должна быть сразу понятна суть, структура, важные фразы и наглядные примеры. Даже и не думайте о сплошных «простынях» текста, где нет даже элементарных абзацев. Для того чтобы текст смотрелся интересно — стоит использовать максимум возможных выделений в нём (но без фанатизма): жирный, курсив, маркеры, цитаты и т.п. Кроме того, не идите на поводу у непрофессиональных SEO-оптимизаторов, которые твердят, что нужно выделять ключевые слова в тексте – это глупость, за которую поисковые системы серьезно наказывают (фильтром, а иногда даже баном). Также можно использовать заголовки, они визуально структурируют статью для пользователей, это в принципе нравится поисковым системам, но если вы не разбираетесь в заголовках, то лучше их вообще не использовать.

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

Оформление «шапки» сайта и «подвала»

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

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

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

Оформление боковой колонки (сайд-бара) сайта

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

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

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

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

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

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

image

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

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

Содержание:

ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ САЙТА

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

image

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

Для этого нужно, чтобы пользователи:

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

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

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

image

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

Также посетителю должно быть максимально удобно.

Т.е. на что следует обратить внимание:

  1. Цветовая гамма Интернет-ресурса.
  2. Правильное соотношение текста, картинок и видео.
  3. Удобное расположение блоков с информацией: похожие статьи, ссылки и т.д.
  4. Читабельность текста, т.е. правильно подобранный стиль и размер шрифта.
  5. Удобство навигации по разделам.

ВИЗУАЛЬНАЯ СОСТАВЛЯЮЩАЯ

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

Чтобы ваш сайт не походил на «цыганскую свадьбу», необходимо, чтобы было использовано не больше 3-4 цветов.

image

А чтобы они сочетались между собой, помогут следующие ресурсы:

Генератор Цветовых Схем — выбирает сочетания из соображения комфортности для человеческого глаза.

Colorup Tikkurila — множество вариантов цветов и оттенков.

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

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

Color hunter — множество готовых вариантов.

MaterialMixer — есть возможность смешать 2 цвета и посмотреть их сочетание.

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

ГЛАВНОЕ О ГЛАВНОЙ СТРАНИЦЕ

Главная страница, как ваше лицо. Поэтому старайтесь обратить на нее особое внимание.

image

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

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

Укажите выгоды от ваших услуг, отзывы благодарных учеников.

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

О ДРУГИХ СТРАНИЦАХ

Если на них располагаются статьи, то убедитесь в качественном оформлении. Чтобы текст был разбит на абзацы по 4-5 строчек и имелись подзаголовки на каждые 5-8 абзацев. Не забудьте про уникальные тематические картинки.

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

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

image

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

ОФОРМЛЕНИЕ ПОДВАЛА САЙТА И ШАПКИ

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

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

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

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

Было полезно, и хотите отблагодарить? Тогда ставьте «+» в комментариях и делитесь ссылкой с друзьями.

Команда Sell Skill желает вам успехов и процветания!

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий