Визуальный код яйца — собственный сайт-проект

ПроектВизуальный код яйца

Это наш собственный проект, а не заказ клиента: одностраничный сайт ко Всемирному дню яйца. Он показывает, как цвет, линия и фактура задают характер бренда при одном и том же силуэте. На странице 12 стилей яйца, данные Росстата по ценам, эксперимент «овал или яйцо» и блок студии с анкетой.

12стилей одного яйца
2вида карточек: рендер и эскиз
7карточек в эксперименте

Получить такой же разбор Хочу так же

Первый экран: яйцо на жёлтом фоне и крупный заголовок

Ниша: Собственный проект студии
Тип проекта: Собственный проект студии, не заказ клиента
Повод: Всемирный день яйца — вторая пятница октября
Формат: Одностраничный сайт: график, карточки, опрос
Адрес: eggdesign.ru
Что сделали: Сайт, Дизайн сайтов, Иллюстрации, 3D-рендеры
Ссылки: Сайт проекта

Ситуация

Что за страница и зачем она нам

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

Это работа для себя. В конце страницы стоит блок студии: «Сделаем такой же сайт — и приведём на него клиентов». Поэтому мы показываем её как пример того, какой сайт с графикой, 3D и интерактивом мы собираем.

Что сделали

Решение по шагам

01
Яичный курс: цены Росстата вместо картинки

Первый блок после заголовка — «Яичный курс»: средняя цена десятка куриных яиц в магазинах России по данным Росстата, с еженедельным обновлением.
- График с переключателем «Месяц», «Год», «3 года» и таблица данных
- Прогноз посетителя на неделю: «Подорожают» или «Подешевеют»
- Расчёт «Сколько яиц на ваши деньги» и список, где яйца стоят дороже всего
- На странице указано: Росстат публикует новые цены по средам в 19:00 мск
Блок «Яичный курс»: цена десятка яиц и график Росстата
02
Психология формы: шесть механизмов с источниками

Дальше — объяснение, почему форма цепляет. Каждый механизм — отдельная карточка с короткой мыслью и ссылкой на исследование. Один из блоков интерактивный: ползунок превращает идеальный эллипс в яйцо.
- «Кривая безопаснее угла» — со ссылкой на статью в Psychological Science
- «Асимметрия — ключ узнавания» — с ползунком
- Ссылки на источники собраны и в отдельном разделе внизу страницы
03
Двенадцать характеров одного яйца

Главный визуальный блок. Силуэт один, меняются цвет, линия, фактура и шрифт. Получилось 12 стилей: Люкс, Детский, Фермерский, Технологичный, Фастфуд, Швейцарский, Корпоративный, Бьюти, Гейминг, Гжель, Стрит и Конструктивизм.
- Переключатель «3D-рендер» и «Эскиз»: один и тот же стиль показан как картинка и как контурный рисунок
- Карточка открывается на весь экран, листается стрелками, есть слайдшоу
- У каждого стиля — одна строка про характер, например «Чёрный, тонкая золотая линия, засечки. Дорого и тихо.»
Семь яиц из разных материалов: форма одна, материал разный
04
Эксперимент «овал или яйцо»

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

Внизу страницы собраны мифы и правда о форме яйца, фразы «Главное в одной фразе», которые можно скопировать, и кнопки «Поделиться». Между блоками — пять коротких листков «Из портфеля» с шутками про форму, курс, бренд и овал.
- Раздел «Мифы и правда»
- Копируемые фразы и кнопки Telegram, VK и «Скопировать ссылку»
- Список источников: у каждого факта есть ссылка
06
Блок студии в конце страницы

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

Результат

Что получили в цифрах

12стилей одного яйца
7карточек в эксперименте
6механизмов восприятия
5коротких листков

Объём проекта: 12 стилей в двух видах — 3D-рендер и эскиз, 7 карточек эксперимента, 6 карточек про психологию формы и 5 коротких листков.

Страница работает как живой пример: в ней есть данные по ценам, интерактивный график, опрос с общей статистикой и анкета студии.

Это объём проекта, а не показатели трафика или заявок. Данных о посещаемости, ответах на опрос и заявках с анкеты у нас пока нет.

Скриншоты

Как выглядит проект

Нажмите на скриншот, чтобы открыть его крупно.

12 стилей одного яйца в режиме «3D-рендер»

Овал на бумаге рядом с яйцом — иллюстрация к эксперименту

Главный вывод

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

Сильный сайт держится на одной ясной идее, а не на количестве блоков
Интерактив — график, опрос, ползунок — даёт причину остаться на странице и вернуться