Разработка и развитие сайта студии дизайна DH-ART

dh-art.ru

Разработка сайта для студии дизайна DH-ART

Разработка сайта для студии дизайна интерьеров DH-ART — для меня это во всех отношениях знаковый проект.

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

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

Особенности дизайна и концепции сайта

Нестандартный дизайн сайта DH-ART (2013 год)

Как видно, у сайта довольно нестандартное расположение меню — справа от области контента. А 10-е гг. XXI века — это было время, когда слово «юзабилити» только начинало завоёвывать умы веб-разработчиков, а сеошники хором кричали, что для успешного SEO-продвижения сайта непременно надо, чтобы меню находилось слева. Или вверху. А лучше и вверху, и слева. Но мы, конечно, рискнули.

На самом деле, я до сих пор придерживаюсь того мнения, что для SEO нет большой разницы, где визуально на странице будет меню. Технически, с точки зрения вёрстки, оно должно быть «зашито» в определённые теги и располагаться в начале страницы. Это всё. А визуально вы можете расположить его хоть кольцом и по диагонали — это не имеет решающего значения.

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

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

Нестандартный дизайн сайта DH-ART (2013 год)

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

Ещё одна занимательная фишка дизайна сайта — это смена основного цвета по мере перехода из одного раздела в другой:

Нестандартный дизайн сайта DH-ART (2013 год)

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

Вы замечали такое? У себя или, может, у других людей. Состояние, когда «где-то виделось мне тут интересненькое, но не помню где именно, жёлтенький такой сайт…» Обычно никто не запоминает ни название сайта, ни форму логотипа, ни образы с баннеров, ни (тем более!) текст. А вот то, что сайт был «такой синенький с оранжевым» или «розовый с зелёненьким» — помнят. То-то и оно. Так что лично я считаю: не стоит слишком заигрываться с динамикой основного цвета.

Структура и функциональность сайта

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

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

Лирическое отступление о необычных названиях на сайте

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

оригинальные названия икеаИ вот что сразу хочу сказать. Идея с «Без целером» сама по себе интересная. Но, к сожалению, никому сходу не понятная. То есть если стоит задача создания коммерческого бренда с нуля, лучше всё-таки избегать злоупотреблений оригинальностью. Содержание — и бренда, и сайта, и всех названий на сайте — должно быть понятным и простым (и не нужно приводить в пример ИКЕА с её МЬЁЛШЭРТами и прочими УНДРЕДАЛЬями: во-первых, ИКЕА, как уже сложившийся международный бренд, может себе это позволить, и во-вторых, все её названия понятны носителям шведского как минимум). Впрочем, отдельные товары можете обозначать как хотите (если есть ресурсы вкладываться в продвижение не только товара, но и нового слова), а вот ключевые разделы сайта, составляющие основу его навигации, всё же лучше называть так, чтобы людям было понятно сразу: что это и зачем.

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

Выбор CMS

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

На тот момент я более или менее свободно ориентировалась в CMS Битрикс и Drupal. Всяческие конструкторы сайта типа UKOZ, разумеется, даже не рассматривались (причины см. в моей статье «Какой можно сделать сайт»).

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

Наполнение контентом и продвижение сайта

Создание информационного портала, тем более с коммерческими целями, пусть даже портала, посвящённого определённой теме (в данном случае — дизайну жилищной среды) — дело кропотливое и долгое. Примерно в течение года собирались фотографии, писались уникальные тексты (SEO-оптимизированные и обычные). И, как вы понимаете, большинство текстов писала сама Наталия. Потому что кто, если не Заказчик, знает больше о деле Заказчика? И кто, как не специалист, реально фанатеющий от своего дела, напишет о нём лучше?

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

В общем, со статьями и фотографиями было всё хорошо. Сайт планомерно двигался по запросам, связанным с архитектурным проектированием и продажей готовых проектов (решено было начать именно с этого блока, поскольку именно с проектирования начинается строительство, а от строительства уже следует дизайн интерьера и всё остальное). И я даже перешла с «удалёнки» в офис. То есть из фрилансера я стала интернет-маркетологом DH-ART.

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

Примерно через год естественная посещаемость сайта достигла 200 — 300 человек в день, а продвигаемые ключи вышли в топ.

Развитие сайта

В 2014 — 2015 гг. был реализован каталог проектов домов с фильтром по параметрам и возможностью написания обращения непосредственно со страницы каждого проекта.

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

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

Наконец, в 2017 году пришло решение «выстроить новый дом» для DH-ART, то есть создать новый сайт. С уже заранее продуманной структурой, удобной для расширения, современным адаптивным дизайном, функциональным интернет-магазином. Но это уже совсем другая история.