Лучшие примеры блогов 2020 года

Брифинг

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

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

Конечно, когда заказчик даёт вам готовый и качественно прописанный брендбук, ваша задача — просто разобраться с ним (какие цвета, какие шрифты, какого рода будут картинки, фотографии и даже композиция). По сути, визуальный стиль сайта уже сделали за тебя, осталось спроектировать, грамотно всё расположить и сверстать. А вот если брендбука нет, то подбор шрифтов, цветов, да и визуального стиля в целом ложится на ваши плечи. Если, конечно, заказчик не приложил к ТЗ дизайнера. Но не стоит паниковать, разделите слона на части и действуйте пошагово.

Duotone и оверлей поверх изображений

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

Современные и эстетичные веб-дизайны применяющие дуотон:  

muller.it – итальянский продуктовый бренд красиво оформил сайт дуотон-видеобекграундом с добавлением мягкого градиента

cliquestudios.com – на главной странице сайта дизайн-агентства кейсы разграничены цветовыми фильтрами (overlay)

socialplayground.com.au – дуотон фото усиливают социальные доказательства, украшают главную и страницу «О нас»

Проектирование систем

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

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

На что смотреть при выборе темы

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

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

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

Оце­ни­вай­те сце­на­рии ваше­го сай­та. Как часто у вас будут выхо­дить новые ста­тьи? Чита­те­ли долж­ны нахо­дить нуж­ную ста­тью с глав­ной стра­ни­цы? Вам нужен блок «недав­ние ново­сти» или выде­ле­ние глав­ной ста­тьи? А сами ста­тьи — они боль­ше про текст или про кар­тин­ки? Если про текст, то дол­жен ли он быть чита­е­мым и круп­ным? А нуж­но ли вам как-то груп­пи­ро­вать ста­тьи? А будут ли у вас ста­тич­ные стра­ни­цы? А как вы их буде­те собирать?

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

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

Есть ли ком­по­нов­щик стра­ниц? Мно­гие темы Ворд­прес­са исполь­зу­ют пла­гин — ком­по­нов­щик стра­ниц (layout editor). Эта мини­про­грам­ма поз­во­ля­ет делать мно­го­ко­ло­ноч­ную вёрст­ку, встав­лять в стра­ни­цы гото­вые фор­мы обрат­ной свя­зи, кар­ты, интер­ак­тив­ные ком­по­нен­ты и всё подоб­ное. Тема с ком­по­нов­щи­ком удоб­нее, чем без.

Что за шриф­ты? Печаль­ная прав­да в том, что 90% кра­си­вых шриф­тов в замор­ских темах не име­ют рус­ской вер­сии, поэто­му все пре­крас­ные заго­лов­ки и рос­кош­ные кал­ли­гра­фи­че­ские над­пи­си у вас будут рабо­тать толь­ко на англий­ском. Шриф­ты, конеч­но, до какой-то сте­пе­ни мож­но заме­нить, но кирил­ли­че­ских (то есть рус­ских) по-прежнему маловато.

Делайте сложные вещи

Вы не задумывались, сколько клиентов действительно внедряют заказанные SEO-аудиты? Я бы не удивился, если б это цифра была на уровне 20%, не больше. Люди всегда ищут легкие пути, им не нравится заниматься тем, что требует дополнительных усилий.

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

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

Сайт образовательного учреждения

Старый сайт школы. Неплохой пример того, как Google Sites можно использовать для создания некоммерческих проектов в сфере образования. На сайте много страниц: с информаций об учреждении, режимом работы, видами деятельности, объявлениями для учащихся и родителей. Есть раздел «Школьный музей» с вставленными видео с YouTube, фотогалерея, опросы.

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

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

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

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

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

Сайт веб-студии

Это лицо фирмы. Нужна его всесторонняя оценка: насколько он удобен, соблюден ли принцип адаптивности, быстро ли загружаются страницы

Уделите особое внимание аспектам, которые хотели бы внедрить у себя.

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

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

Портфолио

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

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

Сроки

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

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

Стоимость

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

Дополнительный сервис

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

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

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

Рейтинг

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

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

Вас также может заинтересовать: Продвижение услуг в Интернете

Создание каркаса модели

Применяйте визуальный дизайн

Уточнение

— Выглядит тесновато? — Трудно читать текст?

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

— Трудно разобрать содержимое?

• Добавьте заголовки с более крупным шрифтом
• Добавьте больше интервалов между заголовками и абзацами

— Выглядит небрежно или непоследовательно?

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

Создание HTML–структуры

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

Персональные сайты разработчиков

Amber Weinberg

Клиенты фронтенд & WP разработчика: дизайнерские агенства / др. фрилансеры с готовым дизайн-макетом, которым нужен в кодинг. Амбер Вейнберг специализируется на кастомной Craft CMS разработке, HTML5 / CSS3-анимации и развлекается созданием приложений.

Amelia Rae Thompson

Дизайнерское & девелоперское портфолио и резюме Амелии Томпсон. Американка сочно оформила плоский одностраничный сайт.

Pamela Nehf

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

Nyree Mereus

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

Установка темы через панель хостинга

Если вы не люби­те все эти визу­аль­ные кон­со­ли и всё при­вык­ли делать через панель управ­ле­ния хостин­гом — это вари­ант для вас.

Для уста­нов­ки ска­чи­ва­ем файл с темой и рас­па­ко­вы­ва­ем по пути www.путь-к-блогу.ru/wp-content/themes/. Если фай­лы в архи­ве были в пап­ке — рас­па­ко­вы­ва­ем её туда цели­ком. А если в архи­ве лежат про­сто фай­лы без общей пап­ки, то по это­му адре­су созда­ём пап­ку с назва­ни­ем темы и рас­па­ко­вы­ва­ем всё туда.

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

Установка темы из магазина

Это самый про­стой спо­соб уста­нов­ки новой темы. Захо­дим в кон­соль адми­ни­стра­то­ра по адре­су www.адрес-блога.ru/wp-admin/ и выби­ра­ем в левом меню пункт «Внеш­ний вид» → «Темы».

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

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

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

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

Для настрой­ки и уста­нов­ки тем захо­дим в нуж­ный раздел. 

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

Пред­про­смотр темы «Highlight». Она нам понра­ви­лась, поэто­му нажи­ма­ем «Уста­но­вить», а затем — «Акти­ви­ро­вать».

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

Новая тема — в спис­ке уста­нов­лен­ных. Мож­но вер­нуть­ся к ста­рой в любой момент. 

Сочетание стилей

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

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

Гармоничного визуального эффекта можно добиться в таких сочетаниях как:

• Рисованный стиль и плоский дизайн;
• Красивая типографика и минимализм;
• Гранж и красивая типографика.

Вот несколько примеров таких сайтов.

Wemakefab.school by Alexander Laguta – Красивая типографика + Минимализм

Zendesk Support Ticketing System UI/UX Design for Web App by  Extej Design Agency– Рисованный стиль + Реализм

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

(Visited 94 times, 1 visits today)

Разделенный экран

Мода на разделение веб-страниц пополам появилась в результате эволюции Hero-изображений.

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

Сайты эффектно использующие вертикальное разделение экрана:

enginethemes.com – разделенный пополам объект (элемент фирменного стиля) в центре главного сплит-экрана представляет компанию WP-разработчиков (код внутри / дизайн визуально)

bigeyeagency.com – нестандартная навигация с разделением экрана для кейсов, фоновое видео с текстурой и фотоэффекты в бэкграундах (высветление, размытие, боке, двойная экспозиция)

special.bose.eu – логическое разделение контента на главной, ярко представляет продукцию Bose и упрощает навигацию по сайту

chekhov.withgoogle.com – разделенным контентом представлен опрос «Узнай себя в произведениях Чехова»

Креативное использование цветового брендинга

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

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

Познакомьтесь с полезной информацией: Особенности восприятия цвета в веб-дизайне. Как зацепить клиента

Договор на разработку дизайна сайта

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

Необходим учет таких условий:

Предмет договора (существующие условия).

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

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

Условия о передаче исключительного права.

Необходимо не только их наличие

Данный пункт крайне важно правильно составить. Иначе вы рискуете не получить право на готовый проект

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

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

Условия об установлении конкретных сроков.

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

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

Условия о выплате вознаграждения, сроки оплаты, ответственность, расторжение сделки и т.д.

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

Значимые условия.

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

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

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

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

Брутальный веб-дизайн

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

Стиль брутализм применяемый в веб-дизайнах:

gift.gucci.com – интерес к брутализму проявляют не только в веб дизайнерской среде: звездный бренд применяет не ради забавы

balenciaga.com – этот вид Web брутализма критик назвал минимализмом на стероидах (к примеру, mahzedahrbakery.com уже выглядит простым минималистичным сайтом)

Типовые ошибки при написании текстов на главную страницу

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

Ошибка №1: текст «о компании» на главной

Представьте, что Вы зашли на рынок в овощной павильон, чтобы купить яблок. И тут Вам с порога торговец начинает с задором рассказывать, сколько он торгует на рынке, кто его жена и т.д. Вам это интересно? Скорее всего, нет. Вам плевать на него. Вам нужны яблоки. То же самое и с главной страницей сайта – в 99% случаев Ваших пользователей интересует не кто Вы, а что предлагаете и в чем Ваши конкурентные преимущества.

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

Ошибка №2: описание отрасли

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

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

Ошибка №3: шаблоны

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

Ошибка №4: «вода»

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

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

Ни преимуществ, ни УТП, ничего, кроме «воды». С одной стороны может показаться, что такие тексты вызывают доверие, но посудите сами: Вы бы стали доверять человеку, который своей «душевной» беседой отнял у Вас кучу времени, так ничего по делу не сказав? Маловероятно.

Если хотите текстом вызвать доверие – решите задачу посетителя. Так будет и проще, и быстрее.

Ошибка №5: «тупики»

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

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

Ошибка №6: излишнее «мыкание»

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

Ошибка №7: «простыни»

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

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

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

Примеры удачного оформления главной страницы сайта

1. Пример удачного оформления отзывов

Слагаемые успеха:

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

2. Эко Хлеб

• Фотографии продуктов и отрисовка элементов выполнены с высоким качеством.
• Цветовая гамма, логотип и детали оформления соответствуют ретро-стилю.

3. CloudPassage: видео на главной странице

Секреты удачной главной страницы:

• Лаконичный дизайн без ненужных элементов. Текст, в котором заключена суть деятельности CloudPassage. Интересная дизайнерская находка для размещения видеоролика.
• Единственный призыв к действию и работа на опережение: потенциальные сомнения пользователей развеиваются фразами «Без кредитных карт», «Без обязательств».

4. Персона

Слагаемые успеха:

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

5. Carbonmade

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

6. Крошка Картошка

Известный бренд фастфуда на своем промо-сайте использовал сразу несколько интересных находок:

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

7. Evernote.com: пример страниц описания сайта

Слагаемые успеха:

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

CTA «Попробуй Evernote бесплатно» расположена удачно – на стыке полей разного цвета, поэтому привлекает внимание деликатно, но настойчиво

8. Бургер Кинг: шрифт как главный герой

• Удачное сочетание массивных букв, качественных фотографий и стилизованных элементов UI.
• Динамическая подгрузка твитов выводит социальные доказательства во flip-блоки.

9. Unlocking

Мы считаем эту главной страницу достойной подражания, потому что:

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

Подробнее

10. Apidura – бренд велотоваров из Великобритании

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

11. eWedding

К главной странице этого сайта стоит присмотреться, потому что:

• На ней нет ничего лишнего, все по делу, кратко и информативно.
• Призыв к действию подтверждается размещенной рядом фразой «Создайте свой бесплатный свадебный сайт за 5 минут».

12. Moosend. Пример успешного редизайна главной страницы

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

13. Tribute Media — маркетинговое агентство из США

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

Заключение

Будучи простой и интуитивно понятной системой построения сайтов (часто от перешедших слышно: «Наконец-то!») WP пригоден для самых различных задач. Эволюционируя, Вордпресс расширяет возможности использования как back-end и становится все более привлекательной средой для разработок на базе CMS. Это значит, что у WordPress есть будущее. Есть много причин для выбора WP в качестве движка сайта. Основные из них, это многомиллионное сообщество и то, что платформа уже благополучно миновала стадию, на которой к ней предъявлялись основные упреки. Реализуя связку WP + другие продвинутые решения (современные технологии в помощь), можно построить очень красивый, эффектный и быстрый сайт. Факт в том, что все новые уникальные и интересные WordPress дизайны обновляют рейтинги лучших сайтов мира.