Family Studio WE2 Concept Walkthrough Презентация концепта
Concept Preview · For Client Review Концепт-превью · Для клиента

Estelle Karaoke Bar — a Brooklyn nightlife concept built for the way guests actually sing, drink, and book. Estelle Karaoke Bar — концепт бруклинского ночного места, построенный под то, как гости реально поют, заказывают и бронируют.

A walkthrough of every feature in the concept — what it does, why it's there, and how it performs on phone vs desktop. Switch language or theme in the top bar. Use the button at the bottom to open the live site. Разбор каждой фичи концепта — что делает, зачем нужна, как ведёт себя на телефоне и десктопе. Язык и тему — в шапке. Кнопка внизу открывает живой сайт.

Hero on mobile
01 / 09 Mobile-firstMobile-first

A first impression that actually converts on a phone Первый экран, который реально конвертит на телефоне

Most of Estelle's traffic is mobile — people deciding "where do we sing tonight?" on the way to dinner. The hero opens with the brand "ESTELLE" set in flickering pink neon, and the tagline "where every night becomes a melody" in a hand-drawn script. Two CTAs are above the fold: Reserve a Table (primary) and Call Now (instant). Основной трафик у Estelle — мобильный. Люди решают «куда сегодня?» по пути на ужин. На первом экране — название «ESTELLE» розовым неоном с эффектом мерцания и подпись «where every night becomes a melody» рукописным шрифтом. Два CTA сразу видны: Reserve a Table (основной) и Call Now (мгновенный).

  • Info pills — "Open 7 Days · 8 PM – 4 AM · 50,000+ Songs · Brooklyn, NY" — answer the obvious questions instantlyИнфо-пилюли — «Open 7 Days · 8 PM – 4 AM · 50,000+ Songs · Brooklyn, NY» — мгновенно отвечают на типовые вопросы
  • Custom display fonts — Monoton (neon signage), Bebas Neue (impact), Pacifico (script accents) — replace the generic restaurant feel of the previous siteПодобраны клубные шрифты — Monoton (неоновая вывеска), Bebas Neue (плотный sans), Pacifico (рукописные акценты) — уходят от «ресторанного» ощущения старого сайта
Play the Vibe — beat playing with light show
02 / 09 Both versionsОбе версии

"Play the Vibe" — sound + a club light show «Play the Vibe» — звук + клубная светомузыка

A signature interactive feature. One tap launches a 124 BPM tech-house beat synthesised live in the browser — kick, hi-hat, clap, sub-bass, pluck arp, filtered stab. Simultaneously a full-screen overlay turns on with sweeping gobo lights, magenta & cyan haze pads pulsing on every beat, three lasers, and white strobe flashes. Off by default, opt-in only. Сигнатурная интерактивная фича. Один тап включает tech-house бит на 124 BPM, синтезированный прямо в браузере — kick, hi-hat, clap, sub-bass, pluck arp, filtered stab. Одновременно включается полноэкранный overlay со светомузыкой: сводящие лучи прожекторов, magenta & cyan haze пульсирующие в такт, 3 лазера, белые strobe-вспышки. Выключено по умолчанию — только по согласию гостя.

  • Mobile-fixed control — the play button lives in the header on phones, replacing the duplicate Reserve. Always one tap away to pauseЗакреплённая мобильная кнопка — play живёт в шапке на телефонах вместо дублирующей Reserve. Всегда в одно нажатие можно поставить на паузу
  • Light show synced to the kick — strobe and haze pulse on every 484 ms beatСветомузыка синхронизирована с битом — strobe и haze пульсируют каждые 484 ms (под kick)
  • No MP3 file required — works offline, swap to a real DJ mix or licensed track laterНе нужен MP3-файл — работает офлайн, потом легко заменить на реальный DJ-микс или лицензионный трек
Experience grid — 4 selling-point cards
03 / 09 Desktop viewДесктоп

Four selling points, one scroll Четыре главных козыря — за один скролл

Right after the hero we lay out the four reasons to choose Estelle: 50K+ song catalogue, signature cocktails, late-night kitchen, private rooms. Each card has its own neon hover (pink, cyan, yellow, purple) and a real photo. This is the elevator pitch — visible inside three seconds, even if the visitor scrolls fast. Сразу под hero идут четыре главные причины выбрать Estelle: 50K+ каталог песен, фирменные коктейли, ночная кухня, private rooms. У каждой карточки свой неоновый hover (розовый, cyan, жёлтый, фиолетовый) и фото. Это elevator pitch — заметно за 3 секунды даже при быстром скролле.

  • Quad-color hover — each card lights up its own neon, reinforcing the brand paletteHover в четырёх цветах — каждая карточка светится своим неоном, усиливая палитру бренда
  • Image stagger — scaling, gradient overlay, content slides in on scroll-into-viewStagger-анимация — масштаб, градиент, появление контента при попадании в viewport
Daily Special and Star Special blocks
04 / 09 Desktop viewДесктоп

Daily Special, Happy Hour & Star Special — built-in promo engine Daily Special, Happy Hour и Star Special — встроенный промо-движок

A dedicated section the previous site didn't have at all. Seven day cards (Sun → Sat) with prices and descriptions, a glowing Happy Hour banner ($4 shot, $5 draft, $5 wine, $6 cocktail), and six Star Special cards (BYOB, Wedding, Birthday, Business, Kids Party, K-POP). Demo data is shown — easily edited from a single object in the code, or wired to a real admin panel later. Отдельная секция, которой на старом сайте не было совсем. Семь карточек по дням недели (вс → сб) с ценами и описаниями, светящийся Happy Hour баннер ($4 shot, $5 draft, $5 wine, $6 cocktail), и шесть карточек Star Special (BYOB, Wedding, Birthday, Business, Kids Party, K-POP). Сейчас демо-данные — легко правятся в одном объекте в коде или потом подцепляются к админке.

  • Repeat-visit driver — gives guests a reason to come back on Tuesday after a Saturday visitДвигатель повторных визитов — у гостя есть повод вернуться во вторник после субботы
  • Per-day theme — each card has a unique gradient + photo + neon accent colorТема для каждого дня — у каждой карточки свой градиент, фото и неон-акцент
  • Pacifico script labels — match the vibe of the existing Estelle promo screenshotsPacifico-скрипт для названий — повторяет стиль существующих промо-постеров Estelle
Menu on desktop with category tabs
05 / 09 Desktop viewДесктоп

Menu — quick browse on the page, full card in a modal Меню — быстрый просмотр на странице, полное в модалке

Five tabbed categories — Platters, Snacks & Bites, Signature, Cocktails, Drinks. Each tab loads a clean grid of items with thumbnail, name, price and one-line description. Signature plates get a shimmering pink star and a pink-tinted card. A single button — Open Full Menu — opens a wide modal with every item from every category. Пять табов категорий — Platters, Snacks & Bites, Signature, Cocktails, Drinks. На каждом — аккуратная сетка позиций с миниатюрой, названием, ценой и однострочным описанием. Сигнатурные блюда отмечены розовой звездой и тонированной карточкой. Кнопка Open Full Menu открывает широкую модалку со всеми позициями.

  • One image per category — placeholder for the demo, swap for real product photography per category in 5 lines of codeОдна картинка на категорию — placeholder для демо, ваши фото подставляются в 5 строк кода
  • Real prices — every dish on the live menu has its current price already wired inРеальные цены — все блюда из текущего меню уже с актуальными ценами
  • Signature toggle — flagging an item as featured is a one-line edit (signature: true)Флаг сигнатурного блюда — одна строка (signature: true)
Menu on mobile — horizontal-scroll tabs
06 / 09 Mobile viewМобильный

Menu adapts to a single thumb Меню — под один большой палец

On a phone the category tabs become a horizontally-scrollable strip — visitors swipe left to find Cocktails or Drinks instead of squeezing all five tabs onto a 380-pixel screen. Each menu row drops to two-column-on-image / one-line-description layout, with the price always anchored to the right edge of the card. На телефоне табы категорий превращаются в горизонтальную ленту — гость свайпает влево к Cocktails или Drinks вместо того чтобы пытаться уместить 5 табов на 380px. Каждая строчка меню перестраивается в двухколоночный «иконка + описание», цена всегда приклеена к правому краю карточки.

  • Edge-to-edge scroll-strip — categories spill past the viewport edge to hint there's moreЛента в обе стороны — табы выходят за границу экрана, подсказывая что есть ещё
  • Compact card height — 72×72 thumbnail vs 88×88 on desktop, keeps the list readable on small screensКомпактная высота карточки — миниатюра 72×72 вместо 88×88 на десктопе, читается на маленьком экране
Booking form with progressive steps and inline calendar
07 / 09 Both versionsОбе версии

Booking that doesn't scare anyone off Резервация, которая не отпугивает

Standard reservation forms show all 8 fields at once and feel like a tax return. Ours opens with a single field — Full name — and unlocks each next step only when the previous is valid. Phone has a US-format mask. Event type is a grid of 8 cards with emoji and tags ("Free Shot", "Champagne"). Guests is a neon slider 1–30+. Date opens an inline neon calendar (no default browser picker). Submit shows a custom success modal with working hours and a direct phone line. Стандартные формы резервации сразу показывают 8 полей и выглядят как налоговая декларация. У нас сначала видно только одно поле — Full name — следующий шаг разблокируется только когда предыдущий заполнен. На телефоне маска US-формата. Тип события — сетка из 8 карточек с эмодзи и метками («Free Shot», «Champagne»). Количество гостей — неоновый слайдер 1–30+. Дата открывает inline-календарь в стиле сайта (никакого дефолтного браузерного пикера). После отправки — кастомная success-модалка с рабочими часами и прямым телефоном.

  • Progressive disclosure — 5 steps revealed one at a time, each previous step gets a green ✓ tickПоэтапное раскрытие — 5 шагов открываются по одному, у пройденных появляется зелёная галочка ✓
  • Inline custom calendar — neon styling, weekday headers, today highlighted in cyan, selected day in pinkInline кастомный календарь — в стиле сайта, заголовки дней недели, сегодня — cyan, выбранный — розовый
  • Phone mask — auto-formats to +1 (XXX) XXX-XXXX as you typeМаска телефона — автоформат +1 (XXX) XXX-XXXX по мере ввода
  • Success modal — animated checkmark, working hours block, direct call linkSuccess-модалка — анимированная галочка, блок с рабочими часами, прямая ссылка на звонок
Mobile gallery with sticky Call · Reserve · Instagram bar
08 / 09 Mobile viewМобильный

Sticky mobile bar — call, reserve, follow in one tap Закреплённый мобильный бар — call, reserve, follow в одно касание

A persistent three-button bar at the bottom of every mobile screen: Call, Reserve (highlighted), Instagram. The visitor never has to scroll back to take an action — the most common conversions are always one thumb-tap away. Above it on the Visit page: a dark-styled Google Map matching the site's palette, address, hours, and Open in Maps / Instagram CTAs. Постоянная панель из трёх кнопок внизу любого мобильного экрана: Call, Reserve (выделена), Instagram. Гостю не нужно скроллить обратно чтобы совершить действие — самые частые конверсии всегда в одно касание. Над ней на странице Visit — карта Google в тёмном стиле сайта, адрес, часы и CTA «Open in Maps» / «Instagram».

  • Always-visible CTAs — no thumb gymnastics to call or book from anywhere on the siteCTA всегда видны — звонок и бронирование доступны с любой точки сайта
  • Dark map theme — Google Maps inverted with hue rotation, blends with the neon paletteТёмная тема карты — Google Maps с инверсией и hue-rotation, в палитре сайта
  • Real Google reviews — 4.3 ★ rating from 553 reviews surfaced as social proof, with 6 actual quoted guest reviewsРеальные Google-отзывы — рейтинг 4.3★ из 553 отзывов как social proof, 6 настоящих цитат гостей
Disco-ball cursor on the live site
09 / 09 Desktop onlyТолько десктоп

A disco-ball cursor — the desktop signature touch Курсор-диско-шар — фирменная деталь десктоп-версии

On desktop the system mouse pointer is replaced with a fully-rendered SVG disco ball: silvery sphere with latitude/longitude grid mirror facets, magenta + cyan + yellow color spotlights reflecting the room's neon, white twinkling sparkles around the edge, and a slow rotation. It scales up on hover over interactive elements — buttons, cards, menu items. A small detail that adds personality to the desktop experience. На десктопе системный курсор заменён на полностью отрисованный SVG диско-шар: серебристая сфера с сеткой меридианов и параллелей (зеркальные фасетки), magenta + cyan + жёлтые световые пятна, отражающие неон зала, белые искры по краю, медленное вращение. На hover над интерактивными элементами — кнопками, карточками, пунктами меню — увеличивается. Мелкая деталь, которая добавляет десктоп-версии индивидуальности.

  • Pure SVG — no images, no external assets, scales perfectly on any displayЧистый SVG — без картинок и внешних ассетов, идеально масштабируется на любом дисплее
  • Hover state — grows ~35% larger and pulses faster over clickable elementsHover-состояние — увеличивается на ~35% и пульсирует быстрее над кликабельными элементами
  • Auto-disabled on touch devices — phones and tablets keep the native cursorАвтоматически отключается на тач-устройствах — на телефонах и планшетах остаётся системный курсор
Behind WE2 За кадром WE2

A small team. Full ownership. Маленькая команда. Полная вовлечённость.

No middlemen, no project managers. You talk directly to the people building your site. Без посредников и менеджеров. Вы общаетесь напрямую с теми, кто делает ваш сайт.

Margarita — Designer
Margarita
Designer · New York Дизайнер · Нью-Йорк

Crafts the visual language — from the first mood frame to the final polish on every screen. Создаёт визуальный язык — от первого мудборда до финальной полировки каждого экрана.

Danil — Developer
Danil
Developer · Ukraine Разработчик · Украина

Builds it, ships it, makes it fast. Hands-on with every line of code that goes live. Собирает, запускает, делает быстрым. Лично участвует в каждой строчке кода.

Ready to look around? Хотите посмотреть в живую?

Click the button below to open the live concept site. Try it on a phone — that's where most of Estelle's traffic lives. Нажмите кнопку внизу — откроется живая версия концепта. Откройте с телефона — основной трафик Estelle оттуда.

Studio capacity

We take a limited number of projects each month to keep every site hand-crafted. Каждый месяц мы берём ограниченное число проектов — чтобы каждый сайт делался руками.

7/10 projects booked проектов в работе 3 spots left this month