Завдання
Замовник запускає синдикат скакових коней з нуля і хотів сайт із трьох сторінок: головна, About і Contact. Форма має просити тільки імʼя, пошту і телефон. У брифі прямо сказано: сучасна типографіка, багато повітря, ніякого «tweed and turf». При цьому логотипа, кольорів і фото на старті не було, вкладка з файлами порожня, все обіцяли прислати потім.
Звідси дві задачі. Перша: усе брендове має бути заглушкою, яку легко замінити. Друга: не вигадувати «17 перемог групи 1» і відгуки для синдикату, якого ще нема, а довіру будувати чесними речами: як влаштований вступ, що входить у частку, що буде з даними з форми.
Складність майданчика: у цьому брифі приймають тільки PNG, JPG і GIF. Ми все одно зібрали робочий сайт і дали на нього посилання в описі, щоб відрізнятися від колажів.
Навіщо і яка ідея
Спочатку дивилися, чого хоче замовник, а не що роблять інші. За 4 години після старту прийшло 86 робіт, і сітка була темно-синя й темно-зелена з золотими кнопками та ШІ-жокеєм на заході сонця. Ми вирішили, що це той самий «tweed and turf» у новій обгортці, і пішли у світлий бік: редакційний сайт з одним акцентом кольору.
Потім подивилися на справжні синдикати: westpointtb.com, myracehorse.com, highclereracing.co.uk, australianbloodstock.com.au. У всіх один скелет: доступні коні, що входить у частку, як вступити по кроках, хто стоїть за синдикатом, FAQ про гроші і одна кнопка. Наш скромний контент на цей скелет лягає без вигадок.
Головна ідея: сайт у стилі скакового листка. Колір бренду фарбує шовки жокеїв, у кожного коня своя кнопка «Register interest», а кнопка відкриває форму з уже вибраним конем. Підглянуте в лідерів ми зробили краще: калькулятор у однієї з робіт був картинкою з вигаданими цифрами, у нас він працює на живому сайті і чесно підписаний як приблизний.
Хід роботи
| Етап | Що відбувалося |
|---|---|
| Етап 1, розвідка | Бриф, замовник, формати. За 4 години після старту 86 робіт, майже всі темні з золотом. Рішення: світлий редакційний сайт з одним акцентом і PNG-дошки |
| Етап 2, близько чверті години | Підібрали фото на Unsplash, зібрали сайт v1 і 4 дошки, виклали демо на Vercel |
| Етап 3, розбір | 4 рецензенти розібрали 83 відкриті роботи з 93, відкрили 130 фрагментів макетів. Усі четверо зійшлися: чорно-біле фото на мініатюрі сіре, на обкладинці видно тільки головну, нема економіки частки і заспокійливих фраз біля форми |
| Етап 4, ще чверть години | Версія v2: кольорове фото, три сторінки і три телефони на обкладинці, частки в коней, калькулятор, довіра біля форми, дисклеймер, пʼята дошка. Демо оновлено і перевірено |
| Етап 5, подача | Робота #101: 5 PNG, опис на 984 знаки з посиланням на демо. Через API перевірено: статус active. На той момент у брифі 101 робота |
| Далі | Кінець прийому робіт, рішення замовника після 05.11 |
Чим робили
Чистий HTML і CSS плюс один main.js, три сторінки, без збірки і плагінів. Весь сайт важить 1,4 МБ. Кольори бренду живуть у трьох змінних на початку styles.css (--silk, --silk-2, --ink). Шовки жокеїв малюються скриптом із цих самих двох кольорів, тому сайт перефарбовується цілком, разом із формою жокеїв. Показали три палітри: кобальт, смарагд, вишня. Візерунки шовків hoops, chevron, quarters, sash, diamond задаються атрибутом у кожного коня.
Форма відправляється через безкоштовний Formspree. У демо вона працює в демо-режимі: перевіряє поля і показує «дякуємо», але нічого не шле. Замовнику треба вставити свій id форми у двох місцях. У кожної сторінки свій title і description, є robots.txt і sitemap.xml. Фото стокові з Unsplash за їхньою безкоштовною ліцензією, у підсумковому сайті 8 штук, усі джерела в CREDITS.md. Шрифт Archivo під ліцензією OFL.
Демо на Vercel, безкоштовний тариф Hobby. Для замовника SETUP.md на одну сторінку: як поміняти назву, логотип, кольори, фото, коней, підключити форму, викласти сайт і пройти SEO-чекліст. Дошки для подачі зібрані окремою HTML-сторінкою і зняті в PNG шириною 2400 px.
Результат
Сайт працює за посиланням. Головна: кольорове фото скачки в шапці, пілюля «Now taking enquiries», під шапкою смуга довіри з 4 пунктів, блок «How joining works» на синій смузі фірмового кольору. Скаковий листок: шовки, походження, тренер, смуга часток, статус, ціна «on enquiry» і своя кнопка в кожного коня. Калькулятор частки: слайдер від 5 до 25%, на 20% виходить $12,000 і $700 на місяць, цифри підписані як приблизні, реальні ціни замовник ставить одним рядком.
Contact просить тільки імʼя, пошту і телефон. Поруч пункти довіри, рядок про приватність, міні-FAQ, необовʼязковий вибір коня, приховане поле проти спаму і екран «Enquiry sent» після відправки. У футері дисклеймер, що володіння конем це спорт, а не інвестиція, і що фото ілюстративні. На телефоні кнопка «Enquire to join» закріплена внизу, форма стоїть одразу під заголовком, на ширині 375 px нема прокрутки вбік.
Що перевірили після деплою v2: усі сторінки і фото віддають 200 за 0,3-0,5 с. Калькулятор на 20% веде на contact.html?share=20, частка підставляється у форму, ?horse=2 вибирає «Horse 2», працюють помилки біля полів і екран після відправки.
Звірка з помилками конкурентів із розбору: у нас є мобільна версія (її не було приблизно у 61 з 83 робіт), світлий дизайн (темних із золотом приблизно 57), усі три сторінки (одну показали приблизно 31), форма рівно з трьох полів (зайві поля приблизно у 23), нема вигаданої статистики (приблизно 23 роботи з вигадками).
Чого ми поки не знаємо: чи сподобалось замовнику. На момент подачі жодна робота ще не була оцінена. Назва, коні, ціни і число часток це заглушки, а цифри калькулятора приблизні. Допишемо, коли прийде рішення.
Помилки і що винесли
