Как сделать качественный дизайн сайта
Создание сайта в 2021 году: полный гайд с примерами
Время чтения: 27 минут Нет времени читать? Нет времени?
Запуск сайта – один из самых важных шагов для современного бизнеса. Особенно это касается тех, кто начал работать / перешел в онлайн совсем недавно. Увы, создать сайт один раз и навсегда тоже нельзя: тем, кто представлен в интернете уже давно, тоже нужно подстраиваться под тренды и изменения. Вместе разберем, что нужно любому сайту для успеха в 2021 году, и поделимся примерами из практики «Текстерры».
Найти УТП
Первое, что нужно сделать в подготовке сайта, – найти свою особенность. Это не значит, что у вас должны быть уникальные картинки и 80 % + по «Адвего» (хотя и это, безусловно, тоже). Уникальность в 2021 году – это необычная черта бизнеса, которая отличает его от остальных. Акцентируйте на этом внимание, иначе рискуете затеряться в информационном шуме.
К примеру, коммерческое предложение СОИК — производство полезной профилактической продукции из фитосырья. Их уникальность состоит в том, что они не просто продают травяные и фиточаи, но и подсказывают клиентам, для чего нужен каждый ингредиент в сборнике.
Еще один пример того, как уникальность помогает в продажах – SMM-продвижение тренажеров для реабилитации (здесь и далее ссылки ведут на кейсы «Текстерры» – прим. ред.). Из-за специфики этой тематики конкуренты просто боятся заходить в соцсети, так как считают: «Раз здесь сложно достучаться до тех, кто принимает решение о покупке, зачем тратить время и нервы?» И это большая ошибка!
Мы решили сделать смелый и в своем роде уникальный подход к делу – начали продвигать тренажеры конечному потребителю (тем, кто занимается в этих центрах).
Специалисты «Текстерры» решили создать магазину образ друга-эксперта, благодаря чему люди начали доверять бренду. Это значит, что многие люди с ограниченными возможностями передвижения рассмотрят приобретение тренажера домой или порекомендуют тренерам конкретного поставщика.
Если вернуться к сайтам, можно обратить внимание на магазин игрушек и колясок для кукол Buggy Boom. Обычно сайты с продукцией для детей делаются невероятно яркими, прямо как карандаши в наборе «12 цветов». Мы решили отойти от стандартного шаблона, сделав портал в насыщенных, но при этом сложных оттенках.
Выбирать товары здесь будет приятно как чадам, так и их родителям. Яркие картинки привлекут младшее поколение, а взрослым «зайдет» подбор благородных цветов.
Материалы, которые помогут найти и сформулировать особенность бизнеса:
Подготовительные работы
Подготовка – самая важная часть разработки. Даже опытные специалисты не создадут Сайт Мечты, пока не составят четкое ТЗ, что возможно только после проведения всех подготовительных работ в полном объеме.
Анализ ниши и конкурентов
Вы должны понять, с кем придется соперничать за внимание и кошелек пользователя. Проведите конкурентную разведку в своей нише. Обратите внимание на то, как устроены сайты конкурентов, их УТП, качество и манеру ведения соцсетей.
Статьи, которые помогут провести грамотный анализ и не совершить ошибок:
SWOT-анализ бизнеса
Определите сильные и слабые стороны компании, возможности и угрозы, которые есть на ее горизонте. Поймите, как будет выглядеть то УТП, которое вы будете продвигать через интернет, в глазах потребителя и конкурента.
К примеру, дружественные консультанты в магазине – это офлайн-УТП, которое будет побуждать клиентов пользоваться вашими услугами вне интернета. Каким будет УТП для тех, кто пользуется вашими услугами в интернете? Решайте сами, анализируя конкурентов. Это может быть мгновенная доставка «под дверь», предоставление десятков тестеров / семплов по первому щелчку и т. д.
Продумайте посыл, ядро и приблизительный «скелет» сайта
Вы проанализировали конкурентов и нашли веб-УТП? Поздравляем, теперь это нужно красиво оформить. Продумайте посыл и миссию сайта.
Решите, как будет выглядеть сайт. Создайте примерную структуру, стиль и манеру подачи. После этого шага у вас на руках будет «план» сайта в голове Пора искать команду, которая поможет достичь желаемого.
Это касается любого бизнеса, от большого интернет-магазина до лендинга зоогостиницы. Везде должна быть заранее продуманная структура, иначе пользователь не поймет ваше предложение и сбежит к конкурентам.
Выбор стратегии + ключевые слова
Сформировали стратегию сайта и его карту? Можно собирать ключи. Необязательно сразу делать «большое дерево». Иногда, при работе с ключами вы будете замечать, что какие-то запросы неинтересны ЦА. При этом «деревянная» структура обязательна: не нужно продвигать на одной странице доставку суши в Москве и в Новосибирске.
Создайте раздел «Доставка суши», а уже от него выстраивайте «ветки» в те города, где будете работать. С такой структурой и продвигать будет проще, и в будущем легче масштабироваться.
Если что-то «не зайдет», будет легко это удалить, не зацепив при этом остальные страницы сайта. Лучше «инвестировать» время и внимание в те части проекта, которые точно дадут отдачу. Или где хотя бы чувствуется перспектива 🙂
Выбор CMS
CMS (система управления контентом) – одна из важнейших вещей в сайтостроении. Верно подобранная «админка» поможет реализовать все задумки, быстро масштабироваться и работать без критических багов. Для текста идеально подойдет WordPress, хорошо будет работать Tilda. Магазинам лучше присматриваться к «Битриксу» и Shoptet.
Изучайте, какие админки больше всего подойдут под вашу специализацию и выбирайте ту, которая подойдет вам как по скорости, так и по удобству работы:
Подготовительная работа с Google и «Яндексом»
После того, как вы приобрели веб-адрес, нашли хостинг, продумали УТП и структуру сайта, можно переходить к подготовительной работе в поисковиках.
Работа с ядром и структурой сайта
Первое, что нужно сделать после покупки хостинга – проработать основу сайта (можно это делать еще раньше, никто не запрещает). Дальше на нее, как на скелет, будут наслаиваться остальные части, пока вы не получите готовый к сдаче портал.
Создание семантического ядра
Здесь вступают в дело SEO-специалисты. Они должны найти ключи на каждую из страниц, не забывая о низкочастотных и больших запросах. Если вы начинающий бизнес, у которого нет больших денег на рекламу, они будут вашим спасением.
Если нужно жестко экономить, собирать семантическое ядро придется самостоятельно. В этом помогут наши материалы:
В высокочастотных запросах нереальная конкуренция, и, если сфера уже сформирована, там точно есть свои «мастодонты», до которых еще нужно расти / вливать огромные средства в рекламу. Запросы «средней частоты» универсальны – по ним довольно часто переходят, хотя конкуренция еще не такая большая.
Если видите, что семантическое ядро и «эскизная» структура сайта отличаются, не бойтесь менять структуру. В будущем ее всегда можно расширить / уменьшить, а сейчас вам нужно откликаться на как можно большее количество релевантных запросов.
Удаление «мусорных» запросов
Мусорные запросы – те, которые идут по вашей теме, но при этом не соответствуют тематике сайта. Используйте отсев по стоп-словам, специфической лексике, географии и путем проверки орфографии.
К примеру, у вас есть 2 запроса: «купить молотый кофе в москве» и «купить молатый кохфа в маскве». Удаляйте второй с чистым сердцем: поисковик все равно исправит на первый и покажет в выдаче именно его.
Минимизация слов с высокими Keyword Difficulties
Keyword Difficulty – индекс, который показывает, насколько сложно будет обогнать своих конкурентов в поисковике Google. Всего оценки группируются по 3 большим блокам:
Продумайте линкбилдинг-стратегию
Подумайте, где можете себя рекламировать, как именно будете наращивать ссылочную массу на сторонних сайтах. Внутренние перелинки важны и нужны, но без сторонних ссылок никуда. Вам нужно как самим ссылаться на сторонние сайты (с хорошим рейтингом и ТИЦ), так и получать цитирование от таких порталов. Подумайте, как достичь этого в вашем случае.
Дизайн сайта
Первое, что будет видеть юзер на портале – его внешний вид. Нужно идти в ногу со временем и внедрять фишки 2021 года. Необязательно пытаться соответствовать всему и сразу, иначе через год снова придется все переделывать. Берите только то, что сочетается с фирменным стилем и будет одинаково хорошо смотреться и сейчас, и через несколько лет.
Трехмерность
Кажется, этот тренд выработал стабильные «качели»: объемность возвращается раз в 2-3 года, после чего исчезает в угоду 2D и снова возвращается. В 2021 году в тренде будут реалистичные 3D-элементы (главное, чтобы они были без эффекта «зловещей долины»).
Объемность
Пользователи MacOS Big Sur уже успели заценить «объемные иконки». Этот тренд постепенно заходит и в веб-дизайн, так что следует ожидать объемности и даже внедрять ее у себя.
Слои, плавающие элементы
Если Форрест Гамп говорит, что «жизнь – это коробка конфет», то мы говорим, что сайты в 2021 году – настоящий слоеный пирог. За несколько лет моды на скролл-эффекты пользователям поднадоели. Современный юзер хочет видеть максимальную легкость.
Проще всего этого достичь через работу со слоями. Тогда можно создать иллюзию того, что часть контента буквально парит в «воздухе». Это именно то, что нужно уставшему от жизненных перипетий пользователю.
Отличный пример такой «легкости» – сайт дизайн-студии LEVELLEN. Работа с пустым пространством дали ему нужную воздушность.
Когда вы смотрите на рекламу автомобиля, ваш глаз не выцепляет отдельные детали. Лучик света, отражающийся от зеркально чистого седана не «продает» вам автомобиль, но помогает погрузиться в атмосферу снимка и представить себя за рулем этого автомобиля. На подобных фото редко бывают продуманные графические элементы, подписи или подсказки в духе «Суперуютный и удобный седан», и все-таки они работают. Также я воспринимаю проработку деталей на сайте. Здесь важно не то, насколько много графики вы используете, а то, поможет ли это пользователю вообразить себя обладателем товара. Спойлер: скорее всего, нет.
Хороший дизайн как картина или тот снимок из рекламы автомобиля – несет в себе задачу сконцентрировать внимание на основном. Если в дизайне появляются дополнительные элементы, которые не несут информации, они помешают сконцентрировать внимание на продукте.
Какие детали использовать можно?
Во-первых, это действительно важная (!) информация: характеристики продукта, условия его приобретения. Текст должен быть четко структурирован, тут требуется работа со стилями текста, акцентными шрифтами, размерами. Допустимы фотоматериалы. Графические элементы должны делать акцент на свойствах продукта или дополнять текстовую информацию.
Поэтому старайтесь писать контент коротко и ясно, а графику использовать только там, где без нее действительно не обойтись. В итоге структура и информативность являются главным козырем в детализации дизайна, а не количество графики или текста, которое вы могли бы создать.
Микс графики и фото
Тренд на сочетание графических элементов с фотографиями начался где-то в середине 2018 и пока что не думает сбавлять обороты. Возьмите его на вооружение: это простой и быстрый способ вдохнуть «жизнь» в графическую составляющую сайта и связать фото в одну композицию.
Это правило отлично иллюстрирует сайт компании LISTME. Благодаря необычной анимации сразу видно, как индивидуально подобранное озеленение оживит даже серый офис.
Этот прием также использует языковая школа LEXXIS. Благодаря этому сайт смотрится более «живым» и современным.
Мы в работе часто миксуем фото и графику, чтобы разнообразить визуал. Можно просто поставить квадратное фото, и получится скучная статичная композиция. А можно это фото закруглить, поставить тень, создав эффект полета, геометрические формы – это добавит динамики. И вот уже из скучного шаблонного решения мы получаем уникальную работу.
Так было и в проекте lexxis. Мы столкнулись с тем, что тематика весьма объемная по количеству контента. Убрать или сократить его нельзя. Остается только разнообразить и добавить воздуха, для чего мы взяли фирменный красно-бордовый цвет, который бы частично разгружал страницу, немного перетягивая внимание на себя. Заключили его в форму круга с обводкой и различными способами обыграли в дизайне. Добавили на них легкую анимацию, и вот, казалось бы, строгий, лаконичный сайт с типографикой и засечками становится легком для восприятия разными возрастными группами.
Векторная графика
Нужно подстраиваться под мобильного юзера. Но как это сделать, если один сидит с «тапка» с диагональю 3,5 дюйма, у второго – iPhone 11 Pro Max, а третий меняет телефоны на Android, как перчатки? Только через векторную графику! У нее нет привязки к пикселям, она легко масштабируется и адаптируется к любой диагонали, от умных часов до 4К-телевизора.
Именно так мы и сделали при создании сайта доставки «Имеретинская лавка». Основные элементы выполнены в векторе, поэтому легко масштабируются для просмотра с любого девайса.
Больше цифр, данных и исследований
За 2020-й среднестатистический юзер так насмотрелся на Fake News, что теперь дует на холодное. Если хотите взрастить любовь к своему бизнесу с самого начала, делитесь цифрами, учите их интересному. Продумайте, как правильно подать всю эту аналитику.
Например, общероссийский таможенный представитель TAISU-ТБ прямо на титульной странице сайта предоставил сертификаты качества и список довольных клиентов.
Темные цвета
После появления темных тем в 2019 году, эта особенность дизайна и не думает сдавать обороты. Темный фон смотрится элегантно и не «выжигает глаз» как темный текст на белоснежном фоне. Более того, такие темы способствуют экономии энергии и увеличивают срок службы OLED-экранов.
Именно таким мы сделали сайт для видеостудии «Видеозаяц.РФ». Он умело сочетает темную тему, векторную графику и работу со слоями.
При выборе цветов для интерфейса отталкивайтесь не сколько от трендов, но и от самого бренда, сервиса и продукта. Темная «тема» далеко не для всех, но никто не запрещает «играться» с оттенками серого 😉
Уже почти год дизайнеры активно используют в работе темные темы. Увы, масштабировать их опыт на всех не удастся: есть тематики, которые этого просто не предусматривают. В Рунете темные цвета обычно ассоциируются с люксовым сегментом или геймингом – здесь это будет максимально органично и гармонично.
В рамках проекта «ВидеоЗаяц» мы решили немного отклониться от негласных правил и разработать дизайн под конкретный запрос – отстроиться от конкурентов и показать премиальность продукта. С помощью выбранных цветов мы подчеркнули, что компания работает на рынке motion-анимации и других сложных механик.
SEO-оптимизация сайта
SEO-оптимизация – ключ к вершине выдачи. Выделяем основные этапы работы, которые помогут достичь желаемого.
Базовая оптимизация
Как уже говорилось выше, нужно продумать структуру. Чем больше у нее разветвлений, тем лучше. Следующие базовые требования будут поданы списком, чтобы вы могли быстро проверить свой сайт по этим параметрам.
Если это интернет-магазин с карточками товаров, отзывы должны быть всегда.
Во-первых, их можно использовать для SEO. Например, сделав Н2-заголовком и подставлением туда информации из H1. Пример: страница «Акустика FENDER CD-60 DREAD V3 DS BLK WN» – «Мой отзыв о товаре Акустика FENDER CD-60 DREAD V3 DS BLK WN». Это позволит продвинуть запрос со словом «отзыв».
Во-вторых, само по себе поле для отзывов уже вызывает доверие пользователей. Да, даже если отзывов там нет: человек хотя бы поймет, что отзыв может добавить любой покупатель, система прозрачна.
Если на сайте больше 1 тыс. товаров, очевидно, что на какие-то товары отзывов не будет. В таких карточках стоит написать что-нибудь в духе «Ищем героя, который сделает 1 шаг в оценке товара».
Оставляйте на сайте и негативные, и позитивные отзывы. Негативные нужно отработать, чтобы расположить к себе пользователя, показать свою честность потенциальному покупателю и помочь сделать выбор (многие принимают решение именно на основе таких отзывов).
Кстати, отзывы размечайте с помощью микроразметки Schema.org.
В видео рассказали о самых частых ошибках в продвижении сайта. Многие из них связаны с SEO.
Скорость работы и загрузки сайта
Чем выше скорость работы, тем меньше людей будет «бесить» долгая загрузка. Это означает то, что они дольше будут сидеть на сайте. В 2021 году стремиться нужно к следующим показателям:
Для ускорения сайта делается следующее.
Работа с контентом
Приступаем к самому волнующему моменту – наполнению сайта информацией. Настроение 2021 года следующее.
«Русский Арболит» – вообще очень интересный и особенный проект. Например, в дизайне мы используем белые и голубые тона. Они нехарактерны для этой ниши: конкуренты в основном используют коричневый и зеленый, ориентируясь на ассоциации с теплом и натуральностью. Мы сознательно выбрали необычную палитру.
Во-первых, для нас было важно подчеркнуть, что в производстве используется чистая вода (это принципиально для технологии, и мы везде говорим об этом).
Во-вторых, компания достаточно крупная и работает в разных направлениях: производство блоков, строительство домов, продажа франшизы. Крупные корпорации обычно охотно используют белые, голубые, синие тона.
С контентом тоже вышла интересная история: мы отрабатывали преимущественно ВЧ-запросы, но «с хвостами». Не просто «чем утеплить дом», а «чем утеплить дом из арболита», не просто «как рассчитать количество строительных материалов», а «как рассчитать количество строительных материалов для дома из арболита». Конечно, писали исчерпывающие лонгриды по теме основного запроса, делая поправку на арболит.
Благодаря такой работе SEO-специалиста, инженера и технолога у нас получались крепкие материалы, интересные и небольшой части людей, которые уже решились на покупку именно арболита, и широкой аудитории в целом. Последних мы тоже ненавязчиво «конвертили» из блога и экспертизой, и тем, что по ходу дела постоянно рассказывали о преимуществах арболита.
Проверка на санкции поисковиков
После проработки основной части сайта, стоит выяснить, нормально ли к нему относятся поисковики, не занесли ли портал под фильтр. Для этого нужно проверить, не нарушает ли он основные «правила» честной работы.
Самые частые причины «фильтрации»:
Это только вершина айсберга, который с каждым годом только растет. Самые актуальные списки можно найти у самого «Яндекса» и Google.
Работа с локальностью
Вот мы уже практически на финишной прямой. Осталось показать поисковой системе, на какой регион работает сайт. Делается это следующим образом:
Usability: пользователь во главе угла
Закончить стоит проверкой «удобности» сайта.
Дополнительная проверка: закрепляем пройденное
Вы думали, что это все? Ну уж нет, если взялись за работу с сайтом, лучше прямо перед самым запуском перепроверить следующее.