(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(93905182, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(93905182, 'hit', window.location.href);

Как нас заблочили на vc.ru, но мы всё равно провели акцию и бесплатно отрисовали 13 первых экранов сайтов

Всем привет, на связи веб-студия Молния. Мы делаем сайты на Тильде и пару дней назад решили бесплатно отрисовать первые экраны сайтов за комментарий на vc.ru. Рассказываем, как всё пошло не по плану, но акция состоялась. И, конечно, делимся результатами.

Мы давно думали о том, какой интерактив можно провести на vc.ru. Следили за коллегами по цеху и оценивали наши возможности и ресурсы. Так, чтобы было полезно, быстро и без бюрократических заморочек. Сначала хотели отрисовать несколько дизайн-концепций (это 3 первых блока, дизайн которых ложится в основу всего остального сайта) . Но их было бы не так много, могли возникнуть проблемы с контентом, а отдельно собирать пакет необходимой информации, прикреплять менеджеров для краткосрочной и быстрой акции не хотелось. Поэтому решили остановиться на первых экранах сайтов и отрисовать их за один день.

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

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

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

Natuska Toys

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

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

Стартап-секреты

Подкаст, который ведёт Дмитрий Беговатов. Он приглашает основателей стартапов, экспертов на откровенный разговор.

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

Хаермания

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

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

Использовали два типа типографики: мощную, острую и большую с посылом твёрдости, уверенности и несгибаемости; простую, рукописную, как будто кто-то дописал или исправил основную информацию. Основное целевое действие — перейти в YouTube, поэтому сделали акцент на кнопке, а с помощью всем знакомой иконки сделали это действие интуитивно понятным каждому пользователю. Динамику создали за счёт движения названия проекта «Хаермания» на одной половине блока. Контраст статичности и динамики притягивает внимание и правильно расставляет визуальные акценты на первом экране.

Zoomvision Production

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

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

При этом у нас сформировалась и вторая интересная концепция первого экрана, и мы решили показать обе. Во второй версии мы погружаем клиента в момент проведения съёмок. Фокус-пуллер дистанционно управляет объективом во время записи и на сайте можно увидеть, как это работает. А в режиссерском мониторе можно посмотреть видео из портфолио Zoomvision Production.

Сцена Групп

Компания занимаемся поставкой и монтажом под ключ звукового и светового оборудования для мероприятий разного масштаба.

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

iPrazdnik

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

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

Makowood

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

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

ProMETA

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

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

NoCode

Создание MVP для стартапов при помощи NoCode подхода.

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

Пасека Андрея Кукуева

Натуральный мёд и продукция пчеловодства напрямую с Алтая.

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

Skyray

Экспресс-полиграфия занимается печатью в любых форматах и практически на любых поверхностях: картины, баннеры, визитки фото и т. д.

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

Авторские деликатесы

Интернет-магазин доставки авторских деликатесов собственного производства в Новосибирске.

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

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

А для более близкого знакомства с Молнией переходите в наш телеграм-канал.

0
91 комментарий
Написать комментарий...
Viktor Mann

Объективно - говно же.

Ответить
Развернуть ветку
Априори

больше объективности богу объективности

Ответить
Развернуть ветку
Viktor Mann

Попроси 15 рублей у рук-ля студии - заслужила.

Ответить
Развернуть ветку
Априори

Спасибо за совет, даже с премией получилось)

Ответить
Развернуть ветку
88 комментариев
Раскрывать всегда