03 июляАнастасия Матвеева
Как создать индивидуальную концепцию дизайна страницы на Facebook

“Если хочешь сделать что-то хорошо, сделай это сам” — вспомнили мы и решили задизайнить страницу нашего агентства на Фейсбуке самостоятельно. Перед нами стояла нелегкая задача, однако, мы успешно с ней справились.

Итак, задача: сделать дизайн иконок на страницу услуг в FB (по одной на каждую услугу), а также новую шапку профиля.

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


Разработка концепции

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

В итоге в голову вдарила ностальгия, и решение озарило нас внезапно: WordArt. Так как последние версии MS Word уже не позволяют насладиться тем потрясающим функционалом WordArt, что был в версии 95-го года, мы обратились в гугл, где моментально нашли Online Word Art Generator. Спасибо, интернет.

Безымянный.png


Создание иконок на страницу услуг

Дело оставалось за малым: создать иконки. Мы условно разделили услуги на 4 категории: SEO, Performance, All-in и Other. Каждая из категорий имела свой собственный стиль WordArt и цвет.

Отдельно стоит поговорить о выборе цветовой гаммы. Мы хотели сохранить соотнесенность с нашими корпоративными цветами — оранжевым и синим, и отразить их в иконках наших основных направлений: SEO и Performance. Как известно, WordArt предлагает ограниченный выбор стилей с конкретными цветами, так что пришлось выбирать из того, что есть. Таким образом, услуги, связанные с SEO, получили (почти) оранжевый стиль под названием “Superhero”, а услуги Performance-направления — сине-голубой стиль “Blues” — ему отдали большее предпочтение, чем, например, стилю “Red Blue” из-за большей узнаваемости.   

comparison.png

Сравнение стилей WordArt “Blues” и “Red Blue”. Первый более знаком пользователю, второй выглядит непримечательно


Категория All-in по понятным причинам получила разноцветный стиль с неочевидным названием “Rainbow”, а категории Other с остальными услугами достался стиль “Purple” — просто он понравился нам больше остальных.

styles.png

Выбранные стили WordArt


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

В итоге получилось следующее:

SEO интернет-магазины.jpg  SMM.jpg

Иконки для услуг “SEO-продвижение интернет-магазинов” и “Маркетинг в социальных сетях (SMM)”


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

SEO_ONLINE_SHOPPING.jpg  SMM2.jpg  COMPLEX.jpg  WEB3.jpg


WordArt выглядел узнаваемо, однако, как сказал наш сооснователь, “недостаточно концептуально и презентабельно”. И действительно, на странице с перечислением услуг иконки с WordArt выглядели слишком обычно:

Безымянный3.png

Раз уж решили играть на ностальгии, нужно идти до конца. Но как можно улучшить иконки с WordArt так, чтобы сразу стал понятен наш посыл? И ответ снова не заставил себя ждать: инструмент заливки в Paint. Благодаря ему, иконки получились сочными и достаточно аутентичными, а главное — моментально считывалась наша идея. Теперь страница со списком наших услуг на FB наполнена яркими ностальгическими иконками, чему мы несказанно рады.

SEO_ONLINE_SHOPPING V.jpg  SMM2 V.jpg  COMPLEX V.jpg  WEB3 V.jpg


Создание шапки на главную страницу на ФБ

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

шапка3.png


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


Вывод

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

Мы очень любим и умеем продвигать крупные и нестандартные проекты

Анастасия Матвеева

Смотрите также


Блог

18 сентября

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

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

27 августа
Завершив генерацию посадочной страницы и запустив рекламу, пользователи задаются вопросом возможного итога кампании. С помощью Яндекс.Метрики можно оценить, насколько эффективно работает сайт, опираясь на различные показатели, главным из которых является конверсия - отношение выгодных для владельца сайта действий посетителей ресурса к числу посещений вообще. Но как понять, какое из действий целевое (или выгодное), а какое нет? Для этого владельцу ресурса необходимо задать цель.
Все посты