Seline Analytics
Тихий аналітичний стіл на теплий папір
Seline розміщений на теплому кам'яному фоні (#fafaf9) з єдиним яскравим блакитним акцентом — решта всіх кольорів нейтральна і взята зі шкали відтінків каменю Tailwind. Заголовки виконані з використанням спеціально розробленого геометричного шрифту без засічок (roobert) товщиною 400 з вузькою негативною міжбуквенною відстанню, що надає тексту неквапливу, майже шепітну впевненість, що контрастує зі звичайним стилем, що кричить, SaaS. Поверхні інтерфейсу користувача є плоскі білі картки, що ширяють над теплим фоном завдяки одній м'якій тіні 16px-розмиття; межі виконані тонкими лініями 1px-кам'яного відтінку, які щедро використовуються як основний структурний елемент замість важких роздільників або панелей. Макет дихає: контент максимальної ширини, центрований на щедрому вертикальному ритмі, з інтерактивними елементами управління у формі таблеток, ілюстрацією талісмана для надання індивідуальності та скріншотами панелі даних як доказ продукту. Загальне враження — редакційна аналітика: спокійна, монохромна, впевнена, де синій заклик до дії є найяскравішим елементом на сторінці завдяки навмисній стриманості всього іншого.
Сторінка має максимальну ширину, центрована приблизно на 1200px з великим вертикальним простором. Герой являє собою дворядковий текстовий блок, вирівняний по лівому краю, з однією виділеною фразою («простий і дієвий») блакитного кольору, за якою слідує рядок з двома закликами до дії (блакитна таблетка + примарна таблетка), потім рядок логотипів партнерів у відтінках сірого, потім рядок рейтингу довіри, потім рядок рейтингу довіри перекриває наступний розділ. Нижче лінії згину: рядки відгуків, що чергуються, в одноколонковій сітці, потім повноекранні розділи з описом функцій, текстом, вирівняним по лівому краю, і центрованими візуальними елементами продукту. Навігація являє собою мінімалістичну верхню панель - логотип зліва, центровані посилання навігації, вхід у систему + блакитний заклик до дії праворуч - з плаваючим кластером аватарів у середині навігації як підтвердження особистості. Проміжки між розділами широкі (96px), щоб створити редакційний ритм, а не нагромадження інформації.
Візуальна мова домінують скріншоти користувальницького інтерфейсу продукту — попередній перегляд панелі керування виконаний у вигляді фотографії, що змальована з використанням фільтра контрасту відтінків сірого (1) (0,94), який приглушує кольори даних до монохромного відтінку. Єдина людська фігура — це лінійний стікер-талісман (персонаж у капюшоні), намальований у стилі SVG тільки з контурами, розміщений один раз у кожному розділі як грайлива противага аналітичному контенту, з м'якою тінню для створення ефекту глибини, як у стікера. Логотип та гліфи бренду є невеликими чорними іскрами/полум'яними знаками. Фотографії відсутні - немає знімків у стилі лайфстайл, немає командних фотографій, немає зображень навколишнього середовища. Об'єкт (панель управління) – головний герой. Всі декоративні значки виконані в стилі контуру 1px або #0c0a09, або #3ba6f1, ніколи не заповнюються.
Палітра
Бренд
- Cyan Signal
#3ba6f1— Основний заклик до дії, активні посилання, обведення іконок бренду – єдиний колірний акцент на сторінці, який використовується економно, щоб привернути увагу до дії. - Cyan Edge
#3398e1— Синій колір використовується для виділення контурів дій, підписів до посилань та інтерактивних елементів. Не слід використовувати його як основний колір для закликів до дії.
Нейтральні
- Ink Black
#0c0a09— Основні заголовки, виділений основний текст, виразні іконки майже чорний колір з теплим відтінком. - Stone Canvas
#fafaf9— Фон сторінки — теплий кремовий відтінок, який сприймається як папір, а не як білий колір екрану. - Pure White
#ffffff— Поверхні карт, виступаючі панелі, заливка полів введення - за замовчуванням плоскі та без тіней. - Stone Border
#e8e6e5— Тонкі кордони на картках, у навігації та полях введення – це основний структурний елемент, а не роздільники. - Stone Muted
#d6d3d1— Додаткові рамки, ледь помітні фонові відтінки, декоративні роздільники. - Ash Gray
#a8a29e— Допоміжний текст, обведення іконок, відключені стани - читаний, але неактивний.
Друкарня
від 10 до 52px · 5 ступенів
- Roobert — заміна: Inter Tight or Satoshi · зображення 400, 500 · Шрифт для заголовків та оформлення тексту – унікальний геометричний шрифт без засічок з мінімальною негативною міжлітерною відстанню (-0.025em на 32px, -0.021em на 52px). Накреслення 400 на 52px - візитна картка шрифту: нетрадиційний, ледве вловимий, але авторитетний, але при цьому стриманий. Заголовки займають своє місце, не кричачи.
- Inter — заміна: Inter · зображення 400, 500, 600 · Основний шрифт для тексту, навігації, інтерфейсу користувача та заголовків — нейтральний універсальний шрифт для всього неекранного тексту. 14px з товщиною 400 та міжрядковим інтервалом 1,64 є переважним розміром для основного тексту (частота 1174). Позитивна міжлітерна відстань (0.004em) при малих розмірах забезпечує читання щільного інтерфейсу користувача.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | простора |
| Базовий крок | 8px |
| Радіус кнопок | 9999px |
| Радіус карток | 10px |
| Тіні | м'які тіні |
| Між секціями | 96px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Seline Analytics і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- ElevenLabs — Фоторепортаж у теплих кремових тонах із ненав'язливими заголовками. Блокнот у стилі Баухаус — папір кольору яєчної шкаралупи, чорне чорнило, один фіолетовий та помаранчевий акцент для демонстрації продукту.
- Awesomic — Редакційна цинкова сітка з помаранчевими розділовими знаками, що нагадують конфетті
- Monad — редакційний технічний журнал на теплому пергаменті
- Dub — матова панель управління Link на рисовому папері
- Notion — Теплий паперовий блокнот під полуденним сонцем
- Anthropic — Науковий польовий журнал на теплому пергаменті — спокійні поверхні кольору слонової кістки, редакційні заголовки із засічками та єдиний глиняний акцент, що з'являється лише тоді, коли потрібно діяти
- Calendly — Темно-синє чорнило на холодному мармурі
- Augen Pro — Презентація Apple на білому тлі — клінічний, невагомий, електричний синій як єдиний акцент у монохромному просторі
- Antimetal — Редакційна хроніка на кремовому папері – тихий ранок у науковому журналі, де стриманість свідчить про впевненість, а засічки виконують основну роботу.
- Perk — Електричний лайм на теплому пергаментному папері
- Ditto — Залита сонцем майстерня зі створення зразків польових кольорів. Теплі кремові поверхні, яскравий жовтий основний колір, глибокі темно-сині чорнила, органічні колірні форми, що розквітають за виробом
- Officevibe — Редакційний журнал на папір теплого кремового кольору. Уявіть собі вдумливе есе з управління персоналом, оформлене у вигляді продукту — курсивний шрифт із засічками, що ніби шепоче крізь сучасний синій інтерфейс.