Телеграм, WhatsApp  +380637610482
Валерій Данюк
Валерій ДанюкрозробникРозробка ІІ-інструментів для бізнесу. Якісно. Недорого.Написати у Telegram
Dala - прев'ю сайту в цьому стилі

Dala

сузір'я, що ширяє на чорному оксамиті

Dala є темним простором, де чорні порожнечі зустрічаються з єдиним яскравим фіолетовим акцентом, що переривається бурштиновими іскрами. Друкарня монолітна і невагома — шрифт PPNeueMontreal з зображенням 400 домінує в кожному заголовку у збільшеному масштабі (78–113px) з агресивною негативною міжлітерною відстанню, тому заголовки здаються скоріше скульптурними, ніж інформативними. Візуальним центром є сузір'я крихітних різнокольорових трикутних частинок, що утворюють органічну форму мозку, яка є фірмовим жестом бренду: знання, що візуалізується як розподілений інтелект, а не ієрархічні дані. Макет слід просторому двоколоночному ритму - збільшені заголовки, вирівняні по лівому краю, у поєднанні з великим основним текстом, що ширяють на чистому чорному тлі без панелей, рамок або карток. Компоненти навмисно зведені до своєї найістотнішої форми: одна фіолетова кнопка-таблетка, приховані текстові посилання та текстові блоки великого формату.

Розділи, що займають всю ширину сторінки, розташовані на чисто чорному полотні, максимальна ширина контенту ~1280px по центру. Головний розділ є асиметричним двоколоночним поділом: великий заголовок, вирівняний по лівому краю (113px), з основним текстом і закликом до дії в лівій половині, а візуалізація «мозку з частинок» займає праву половину у величезному масштабі. Наступні розділи чергують двоколоночну композицію (візуальний ліворуч/текст праворуч, потім текст ліворуч/візуальний праворуч), створюючи зигзагоподібний ритм читання. Проміжки між розділами досить великі (60-120px по вертикалі). Жодних карткових сіток, таблиць цін, багатоколоночних блоків з описом функцій — контент розміщується у просторих двоколонкових текстово-візуальних блоках. Навігація є мінімалістичною прозорою верхньою панеллю, без бічної панелі і мега-меню. Щільність розміщення елементів надзвичайно висока - один або два елементи на область перегляду ніколи не перевантажені інформацією.

Візуальне оформлення повністю процедурне та абстрактне – жодних фотографій, окрім командних портретів. Фірмовий візуальний образ - щільна хмара з тисяч крихітних трикутних частинок з контурами, виконаних у повному яскравому спектрі (фіолетові, янтарні, бірюзові, пурпурові, сині), що утворюють органічну форму мозку/нейрону. Це поле частинок анімоване і є одночасно і основним зображенням, і елементом фірмового стилю. Частки, що оточують, з меншою щільністю переміщаються по фону сторінки. Трикутники мають контури, товщину лінії 1-2px, гострі краї, насичені хроматичні кольори - ніколи не у відтінках сірого. Командні портрети відображаються у вигляді закруглених прямокутників (радіус 124px) без рамок або накладень. Жодних скріншотів продуктів, жодних фотографій у стилі лайфстайл, жодних 3D-рендерів — система частинок Є візуальним брендом.

Палітра

Бренд

  • Electric Iris #8052ff — Основні кнопки дій, логотип, фірмові акценти – єдиний насичений фіолетовий колір, що сигналізує про інтерактивність та ідентичність бренду на чорному тлі.

Нейтральні

  • Void #000000 — Полотно сторінки, фон розділів, негативний простір — домінуючою поверхнею є чистий чорний колір, а не темно-сірий, що створює порожнечу, що дозволяє хроматичним акцентам вільно розташовуватися.
  • Bone White #ffffff — Заголовки, основний текст, заливка іконок, активний стан навігації – єдиний типографічний колір, який забезпечує максимальну ієрархію на чорному тлі.
  • Ash Gray #9a9a9a — Приглушений навігаційний текст, напівпрозорий колір посилань, додаткові мітки — ховаються за основним текстом, не стаючи невидимими.
  • Silver Mist #bdbdbd — Додатковий текст, інформація на рівні підписів - найбільш тихий і сірий колір, що читається, для підтримки контексту.
  • Saffron Spark #ffb829 — Виділення тексту, акцентування посилань, привернення уваги за допомогою розділових знаків — теплий жовтий колір на фіолетовому фоні створює хроматичну напругу бренду.
  • Deep Verdant #15846e — Вторинна тонування поверхні, градієнтна зупинка логотипу - проявляється як темніший край градієнта бренду і у вигляді ледь помітних акцентних переходів.

Друкарня

від 12 до 113px · 10 ступенів

  • PPNeueMontreal — заміна: Inter · зображення 200, 400, 600, 700 · Єдиний шрифт для всіх контекстів інтерфейсу користувача. Для заголовків у розмірах для відображення (78-113px) використовується товщина 400 з міжлітерною відстанню -0.04em - та ж товщина, що й у основного тексту, але великий масштаб створює ієрархію. Товщина 200 (надлегкий шрифт) зарезервована для основного тексту 18px, це фірмове рішення: більшість сайтів AI/SaaS використовують 400 для основного тексту, але Dala зменшує товщину, щоб абзаци виглядали повітряними та неагресивними. Товщина 600 з міжлітерною відстанню 14px, міжлітерною відстанню 0.025em та використанням великих літер використовується для навігації та невеликих заголовків. Використання числа 400 як заголовків 113px, так основного тексту 15px незвичайно — це означає, що бренд покладається на масштаб, а чи не на товщину, створення ієрархії.

Інтервали та форма

ПризначенняЗначення
Щільністьщільна
Базовий крок6-18px
Радіус кнопок24px
Радіус карток24px
Тініні — межі замість тіней
Між секціями60-120px
Ширина сторінки1280px

ІІ збере ваш сайт у стилі Dala і наповнить його

  • Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
  • Перенесе контент зі старого сайту – достатньо вказати адресу.
  • Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
  • Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.

Схожі стилі

  • Linear — інструмент опівнічної точності
  • Resend — чорний оксамит з фіолетовим неоновим кольором
  • Ciridae — Порожнє приміщення з пульсацією вугілля, що тліє, — майже чорний собор, де єдиним теплим звуком є тонка лінія іржі, а кожна поверхня визначається швидше тонкими лініями, ніж тінню
  • Dovetail — Схема креслення під чорним місяцем – ледь помітні лінії графіка, білий шрифт, одна фіолетова іскра
  • Neon — Серверна кімната після настання темряви. Глибока темрява, де єдиними джерелами світла є дані та взаємодія між користувачами
  • Discord — Ігровий світ прихований за спливаючим вікном чату — кожен розділ є самодостатнім середовищем зі своїм власним освітленням і набором персонажів.
  • Aaru — Обсерваторія поля частинок опівночі
  • Atlas Card — Опівнічне сховище з єдиним сапфіровим променем - абсолютна чорна гладь, де єдине, що має значення, - це глибокий електричний синій колір
  • Midjourney — Біолюмінесцентний термінал у глибоководних районах океану. Глибоководний світ, де інтелект наочно генерує себе в потоках ASCII, а елементи управління виглядають як зразки, що слабо світяться.
  • Checkly — Центр управління польотами на дальній орбіті
  • Krea — галерея нуар опівночі
  • Wope — Wope – інтерфейс фіолетового горизонту. Уявіть собі темний стіл в обсерваторії, з-під скла якого піднімається світло-фіолетовий потік