Keys · Sayt dizaynı prosesi
Brifdən təhvilə
qədər.
Bir korporativ saytın bütün mərhələləri, işin getdiyi ardıcıllıqla: brif, sayt xəritəsi, wireframe-lər, vizual dizayn, desktop, planşet və mobil maketlər, komponent dəsti və developerə təhvil. Layihə özəl kapital şirkəti Northpeak Capital-dır. Onun prototipi açıla bilən real, adaptiv HTML-dir.
Bu səhifə kimin üçündür?
Hər hansı maketdən əvvəl: kim gəlir, nəyi tapmalıdır və sonra nə etməlidir. Sonrakı hər qərar bu üç karta qarşı yoxlanılır.
Üç oxucu, bir səhifə
- Uzunmüddətli tərəfdaş seçən təsisçilər
- Nəticələri və hesabatları yoxlayan investorlar
- Yüksək vəzifəli namizədlər və məsləhətçilər
On saniyədə etibar
- İnvestisiya tezisini ilk ekranda bildirmək
- Miqyası dörd sərt rəqəmlə sübut etmək
- Təkcə şirkətə yox, təsisçilərə də söz vermək
Hero-dan üç yol
- Yanaşmamız (təsisçilər)
- Portfelə baxın (hamı)
- İnvestor girişi (naviqasiyada, həmişə görünür)
Altı səhifə, bir aydın yol
Sayt xəritəsi dizayndan əvvəl razılaşdırılır, ona görə ana səhifə hər səhifəni əvəz etməli yox, sadəcə təqdim etməlidir. Aşağıda ana səhifənin bölmə ardıcıllığı: hər blok əvvəlkinin yaratdığı suala cavab verir.
- NaviqasiyaBeş səhifə + İnvestor girişi
- HeroBir cümlədə tezis, iki yol
- Əsas rəqəmlər€2.4bn · 31 · 7.2 yrs · 2009
- YanaşmaI–III nömrələnmiş üç sütun
- PortfolioCədvəl kimi beş şirkət, 31-inin hamısına link
- Təsisçi sitatıMüştərinin səsi ilə sübut
- MəqalələrSon üç material
- AltlıqOfislər, linklər, tənzimləyici məlumat
Əvvəl struktur, sonra üslub
Maket üçün boz bloklar, iyerarxiya üçün real başlıqlar. Müştəri strukturu burada — dəyişikliklər ucuz olanda təsdiqləyir. Vizual dizayndan sonra eyni səhifəni görmək üçün Yekun-a keçin: maket qalır, yalnız üslub dəyişir.
Hər kadrın içində sürüşdürün
Desktop · 12 sütun · maksimum 1280 en
Mobil · 390 · bir sütun
Sakit pul, isti işıq
Tam maketdən əvvəl təsdiqlənən bir səhifəlik qaydalar: inam üçün redaksiya serifi, faktlar üçün sadə sans, sakitlik üçün tünd göy və fil sümüyü, latun isə yalnız gözün düşməli olduğu yerdə.
Hero istiqaməti
Tünd göy qradiyent altında 55%-lik tünd fotoqrafiya — ağ şrift istənilən kəsimdə AA kontrastını saxlayır.
104 / 104Newsreader 300
60 / 63Bölmə başlığı
28 / 34Founders stay in the room
16 / 26Hər fakt, rəqəm və abzas üçün Inter 400.
11 · +18%Private equity · Mid-market
Dörd en, bir iyerarxiya
1440-da dizayn olunub, 1024 və 768-də yoxlanılıb, 390-da tamamlanıb. Oxuma ardıcıllığı heç vaxt dəyişmir; sütunlar, şrift ölçüsü və naviqasiya dəyişir. Hər dəyişiklik developer üçün yazılır.
Yekun desktop maketi
Yekun mobil maketi
| Element | Desktop ≥1101 | Planşet 701–1100 | Mobil ≤700 |
|---|---|---|---|
| Naviqasiya | 5 link + giriş | Linklər ≤900 → menyu | Loqo + menyu, 72 h |
| Hero başlığı | 104 / 104 | 80 → 68 | 54 |
| Hero düymələri | Yan-yana | Yan-yana | Alt-alta, tam en |
| Əsas rəqəmlər | 4 sütun | 4 → 2 sütun | 2 sütun |
| Yanaşma | 5 / 7 bölgü | Bölgü → alt-alta ≤900 | Alt-alta |
| Portfel cədvəli | 4 sütun | 4 sütun | Yalnız şirkət + il |
| Məqalələr | 3 kart | 3 → 2 + 1 | Sətirdə 1 |
| Yan kənar boşluğu | 64 | 40 | 22 |
Bir dəfə qurulur, hər yerdə istifadə olunur
Səhifə vəziyyətləri ilə doqquz komponentdən yığılıb. Daxili səhifələr (portfel, komanda, məqalələr) eyni dəsti istifadə edir, ona görə onların dizaynı da, qurulması da ucuz başa gəlir.
Founders stay in the room
Founders stay at the centre of every decision.
“They asked about our customers before our margins.”
Ingrid Solberg · CEO, Halvard SystemsTəxmin ediləsi heç nə qalmır
Qurulmuş prototipdən ölçülmüş ölçü işarələri, kod kimi dizayn tokenləri, səhifələrə görə təşkil olunmuş fayl, eksport edilmiş materiallar və qurulmadan sonra real cihazlarda QA yoxlaması. Böyütmək üçün ölçü işarəsinə klikləyin.
- Dizayn faylı · səhifələr
- 00 Üz qabığı və dəyişikliklərv1.4
- 01 Sayt xəritəsi və axınlar6 səhifə
- 02 Wireframe-lərD + M
- 03 Stil plitəsi1
- 04 Desktop 14406 kadr
- 05 Planşet 7686 kadr
- 06 Mobil 3906 kadr
- 07 Komponentlər9 + vəziyyətlər
- 08 Prototipkliklənən
- 09 Developerə təhvilspesifikasiyalar
/* northpeak-tokens.css · excerpt */
:root {
--np-navy: #0E1A2B;
--np-ivory: #F4EFE6;
--np-brass: #B08D57;
--np-display: 300 104px/1 Newsreader; /* 80 · 54 */
--np-h2: 300 60px/1.05 Newsreader; /* 50 · 40 */
--np-body: 400 16px/1.6 Inter;
--np-max: 1280px;
--np-gutter: 64px; /* 40 · 22 */
--np-section: 140px; /* 110 · 80 */
--np-button-h: 48px;
}
Developer nə alır
- Hər kadr üçün faylda yoxlana bilən spesifikasiyalar
- Tokenlər: rəng, şrift, aralıq, maket — CSS kimi
- Hər dəyişikliyin göstərildiyi breakpoint cədvəli
- Materiallar: hero 2880 px WebP + JPG, loqo SVG, favicon dəsti
- Vəziyyətlər: hover, fokus (2 px latun), aktiv, boş
- Qurulmuş saytda dörd endə QA yoxlaması
Sizin saytınız — eyni altı addımla.
Korporativ ana səhifə və onun şablonları üçün brifdən təhvilə qədər təxminən beş iş günü. Figma, Webflow, WordPress və ya əllə yazılmış HTML.