Veb dizayn saytın necə göründüyünü və ziyarətçinin onda necə hərəkət etdiyini planlaşdıran işdir. O, rəng və şəkil seçməkdən daha genişdir: səhifədə ilk olaraq nəyin görünəcəyi, düymənin harada duracağı və formanın neçə sahədən ibarət olacağı da dizayn qərarıdır. Yaxşı dizayn gözəl görünən yox, ziyarətçini suala cavaba və müraciətə ən qısa yolla aparan dizayndır.
Qısa xülasə:
- Veb dizayn iki hissədən ibarətdir: UX (saytın necə işlədiyi) və UI (saytın necə göründüyü).
- Dizayn mərhələlərlə hazırlanır: tədqiqat, struktur, eskiz (wireframe), prototip, vizual dizayn və telefon versiyası.
- Yaxşı dizaynın ölçülə bilən qaydaları var: mətnin kontrastı, düymələrin ölçüsü, şriftin oxunaqlılığı və səhifənin sürəti.
- Sayt əvvəlcə telefon üçün düşünülür: Google saytları mobil versiyasına görə qiymətləndirir.
- Dizayn zövqlə yox, nəticə ilə qiymətləndirilir: neçə ziyarətçi müraciət etdi, neçəsi sifarişi tamamladı.
Veb dizayn nədir?
Veb dizayn ziyarətçinin saytda gördüyü və etdiyi hər şeyin planıdır. Dizayner bu suallara cavab verir: insan səhifəni açanda ilk nəyi görməlidir, növbəti addımı necə anlayacaq, qiyməti harada tapacaq, formanı doldurmaq nə qədər asan olacaq?
Dizaynı bəzək kimi başa düşmək ən geniş yayılmış yanlışdır. Bəzək "necə daha gözəl olar?" sualına cavab verir, dizayn isə "ziyarətçi məqsədinə necə daha tez çatar?" sualına. Ona görə dizayn rəngdən yox, saytın məqsədindən və strukturundan başlayır; bu mərhələni saytın strukturu necə qurulur yazısında izah etmişik.
UX və UI nə deməkdir və fərq nədir?
UX (user experience, istifadəçi təcrübəsi) insanın saytdan istifadə edərkən keçdiyi yoldur: axtardığını tapırmı, addımlar aydındırmı, harada ilişir. UI (user interface, istifadəçi interfeysi) isə bu yolun görünən hissəsidir: rənglər, şriftlər, düymələr, ikonlar, boşluqlar.
Nielsen Norman Group istifadəçi təcrübəsini belə tərif edir: bu, son istifadəçinin şirkət, onun xidmətləri və məhsulları ilə qarşılıqlı əlaqəsinin bütün tərəflərini əhatə edir (NN/g).
Restoran müqayisəsi ilə: UX masanı necə rezerv etdiyiniz, menyunun nə qədər aydın olduğu və hesabı nə qədər gözlədiyinizdir. UI isə interyer, qabların görünüşü və menyunun tərtibatıdır. İnteryeri gözəl, xidməti ləng restorana ikinci dəfə getmirlər; sayt da belədir.
| UX dizayn | UI dizayn | |
|---|---|---|
| Sual | Sayt necə işləyir? | Sayt necə görünür? |
| Nə ilə məşğuldur | Struktur, ssenarilər, addımların ardıcıllığı, formalar | Rəng, tipoqrafiya, düymələr, ikonlar, boşluqlar |
| Nəticəsi | Səhifələrin sxemi, eskizlər, prototip | Hazır maketlər, komponentlər dəsti (UI kit) |
| Necə yoxlanılır | İnsan tapşırığı yerinə yetirə bilirmi? | Mətn oxunurmu, brendə uyğundurmu, hər ekranda düzgündürmü? |
| Zəif olanda | Ziyarətçi azır və çıxır | Sayt etibarsız və köhnə görünür |
Kiçik layihələrdə hər iki işi bir dizayner görür və vəzifə "UX/UI dizayner" adlanır. Vacib olan adı yox, hər iki işin görülməsidir.
Sayt dizaynı hansı mərhələlərlə hazırlanır?
Peşəkar dizayn yeddi mərhələdən keçir və hər mərhələnin sifarişçiyə göstərilən nəticəsi olur:
| Mərhələ | Nə edilir | Nəticə |
|---|---|---|
| 1. Tədqiqat | Biznes, müştərilər və rəqiblər öyrənilir | Saytın məqsədi və auditoriyanın sualları |
| 2. Struktur | Səhifələr və menyu müəyyən edilir | Sayt sxemi |
| 3. Eskiz (wireframe) | Hər səhifənin blokları rəngsiz, sadə sxemlə çəkilir | Əsas səhifələrin eskizləri |
| 4. Prototip | Eskizlər bir-birinə bağlanır və kliklənən olur | Sınaqdan keçirilə bilən model |
| 5. Vizual dizayn (UI) | Rəng, şrift, şəkil və düymələr brendə uyğun hazırlanır | Əsas səhifələrin maketləri |
| 6. Adaptiv versiyalar | Hər səhifə telefon və planşet üçün ayrıca tərtib edilir | Mobil maketlər |
| 7. Təhvil | Maketlər və komponentlər proqramçıya ötürülür | Dizayn faylı və UI kit |
Eskiz mərhələsi çox vaxt buraxılır, çünki "boz qutular" sifarişçiyə maraqsız görünür. Halbuki məhz burada dəyişiklik ən ucuzdur: bloku eskizdə yerindən oynatmaq bir dəqiqə, hazır saytda isə saatlar çəkir.
Dizayn bu gün əsasən Figma proqramında hazırlanır: o, brauzerdə işləyir və sifarişçi maketə linklə baxıb şərh yaza bilir. Təhvil zamanı dizayn faylını da istəyin; o, saytın kodu kimi sizə məxsus olmalıdır.
Yaxşı dizayn nə ilə ölçülür?
"Bəyəndim" və "bəyənmədim" dizaynı qiymətləndirmək üçün zəif ölçüdür. Beynəlxalq standartlarda yoxlanıla bilən qaydalar var:
| Qayda | Tələb | Mənbə |
|---|---|---|
| Mətnin fonla kontrastı | Adi mətn üçün ən azı 4.5:1, iri mətn üçün 3:1 | WCAG 2.2 |
| Kliklənən elementin ölçüsü | Ən azı 24×24 piksel | WCAG 2.2 |
| Əsas məzmunun yüklənməsi (LCP) | 2.5 saniyə və ya daha az | web.dev |
| Kliklərə reaksiya (INP) | 200 millisaniyə və ya daha az | web.dev |
| Səhifənin "tullanmaması" (CLS) | 0.1 və ya daha az | web.dev |
Açıq boz fonda boz mətn dəbli görünə bilər, amma günəş altında telefonda oxunmur. Kiçik düymələr isə telefonda səhv kliklərə səbəb olur. WCAG-ın 24 pikseli alt həddir; platformalar daha iri ölçü tövsiyə edir: Google Android üçün ən azı 48×48 dp (Google), Apple isə iOS düymələri üçün standart olaraq 44×44 pt (Apple).
Bu rəqəmlərdən əlavə, üç sadə sınaq var:
- Beş saniyə sınağı. Saytı görməmiş insana ana səhifəni beş saniyə göstərin və soruşun: bu şirkət nə edir? Cavab verə bilmirsə, problem dizayndadır.
- Tapşırıq sınağı. "Qiyməti tap" və ya "qeydiyyatdan keç" deyin və kənardan baxın. Harada dayanırsa, orada düzəliş lazımdır.
- Baş barmaq sınağı. Saytı telefonda bir əllə istifadə edin. Əsas düymələrə barmaq çatmalıdır.
Mobil dizayn niyə birinci gəlir?
Sayt əvvəlcə telefon üçün dizayn edilir, sonra böyük ekrana genişləndirilir, çünki ziyarətçilərin çoxu telefondadır və Google saytı mobil versiyasına görə qiymətləndirir. Google bu keçidi "mobile-first indexing" adlandırır və 2023-cü ilin oktyabrında onun tamamlandığını elan edib (Google Search Central).
StatCounter-in 2026-cı il sentyabr məlumatına görə, Azərbaycanda veb trafikin 65.57%-i mobil telefonların, 34.01%-i isə kompüterlərin payına düşür (StatCounter). Yəni hər üç ziyarətçidən ikisi saytınızı telefonda görür.
Mobil dizaynın əsas qaydaları:
- Bir sütun. Telefonda məzmun yuxarıdan aşağı bir sütunda düzülür; üfüqi sürüşdürmə olmamalıdır.
- İri və aralı düymələr. Barmaq siçan oxundan böyükdür.
- Qısa formalar. Hər əlavə sahə müraciətlərin bir hissəsini aparır. Ad və telefon çox vaxt kifayətdir.
- Yapışqan əlaqə düyməsi. Zəng və WhatsApp ekranın aşağısında həmişə görünür.
- Yüngül şəkillər. Mobil internetdə ağır şəkil səhifəni gecikdirir. Bunu necə ölçmək lazım olduğunu sayt yavaş açılır yazısında göstərmişik.
Reklamdan gələn ziyarətçilərin demək olar hamısı telefondadır. Ona görə reklam üçün səhifə hazırlayanda maketə əvvəlcə telefonda baxın; bu barədə landing page bələdçisində ətraflı yazmışıq.
Dizayn satışa necə təsir edir?
Dizayn satışa birbaşa təsir edir, çünki ziyarətçinin qalıb-qalmayacağı ilk saniyələrdə həll olunur. Nielsen Norman Group-un 2011-ci ildə dərc etdiyi təhlilə görə, insanlar veb səhifəni çox vaxt 10–20 saniyə ərzində tərk edir; səhifə dəyərini bu müddətdə aydın göstərirsə, diqqət daha uzun qalır (NN/g).
İnsanlar səhifəni oxumur, gözdən keçirir: başlıqlara, ilk sətirlərə və vurğulanan sözlərə baxırlar (NN/g). Ona görə satan dizaynda:
- başlıq təklifi bir cümlə ilə deyir;
- hər ekranda bir əsas hərəkət var, düymənin üzərində "Göndər" yox, "Qiymət al" yazılır;
- uzun mətn qısa abzaslara, siyahılara və cədvəllərə bölünür;
- rəylər, rəqəmlər və real işlər qərar nöqtəsinin yanında dayanır;
- forma mümkün qədər qısadır.
Onlayn mağazalarda dizaynın qiyməti daha aydın görünür. Baymard İnstitutunun 50 tədqiqat üzrə hesabladığı orta göstəriciyə görə, səbətə məhsul əlavə edənlərin 70.22%-i alışı tamamlamır. ABŞ alıcıları arasında aparılan sorğuda səbəblər sırasında əlavə xərclərin yüksək olması (40%), hesab yaratmaq tələbi (18%) və uzun, mürəkkəb sifariş prosesi (17%) var (Baymard Institute). Bunların çoxu dizayn qərarıdır: yekun qiyməti əvvəlcədən göstərmək, qeydiyyatsız sifarişə icazə vermək, addımları azaltmaq.
Hazır şablon, yoxsa fərdi dizayn?
| Meyar | Hazır şablon | Fərdi dizayn |
|---|---|---|
| Qiymət və müddət | Ucuz və sürətli | Daha baha və daha uzun |
| Brendə uyğunluq | Şablonun icazə verdiyi qədər | Brend kitabına tam uyğun |
| Fərqlənmə | Eyni şablonu başqa saytlar da istifadə edir | Dizayn yalnız sizə məxsusdur |
| Struktur | Məzmun şablona uyğunlaşdırılır | Dizayn məzmuna və müştəri yoluna uyğun qurulur |
| Kimə uyğundur | İlk sayt, sınaq layihəsi, məhdud büdcə | Rəqabətli bazar, premium brend, mürəkkəb funksiya |
Şablon pis seçim deyil: məqsəd sadədirsə və büdcə azdırsa, düzgün başlanğıcdır. Problem şablonun gizli məhdudiyyətləri ortaya çıxanda başlayır; bunu ucuz sayt niyə baha başa gəlir yazısında nümunələrlə göstərmişik.
Veb dizaynda ən çox edilən səhvlər hansılardır?
- Dizaynı rəhbərin zövqünə görə qurmaq. Saytın oxucusu rəhbər yox, müştəridir.
- Ana səhifəni şüarla başlamaq. "Keyfiyyət və etibar" heç nə demir; "Bakıda ofis təmiri, 30 günə təhvil" hər şeyi deyir.
- Avtomatik dəyişən slayder. Ziyarətçi mətni oxumağa macal tapmır, əsas təklif isə ikinci-üçüncü slaydda itir.
- Zəif kontrast. Açıq fonda açıq mətn telefonda oxunmur.
- Telefon versiyasını sona saxlamaq. Kompüterdə gözəl görünən maket telefonda dağılır.
- Açılan pəncərələr. Səhifə açılan kimi çıxan endirim pəncərəsi oxumağa mane olur.
- Uzun formalar. On sahəli formanı az adam doldurur.
- Stok şəkillər. Real komanda və real obyektin şəkli gülümsəyən model şəklindən daha çox etibar yaradır.
Dizayneri və ya agentliyi necə qiymətləndirmək olar?
Dizayneri şəkillərə görə yox, işləyən saytlara görə seçin. Görüşdə altı sual verin:
- Canlı saytları göstərə bilərsinizmi? Maketin şəkli yox, açılan sayt. Onu öz telefonunuzda yoxlayın.
- Proses hansı mərhələlərdən ibarətdir? Struktur və prototip mərhələsi varmı, yoxsa birbaşa "gözəl maket" gəlir?
- Telefon versiyası ayrıca dizayn olunurmu?
- Mətnləri kim yazır? Dizayn real mətnlə hazırlanmalıdır; "lorem ipsum" ilə çəkilən maket real mətn gələndə dəyişir.
- Neçə düzəliş mərhələsi qiymətə daxildir?
- Dizayn faylı və UI kit bizə verilirmi?
Komanda seçiminin qalan meyarlarını Bakıda sayt hazırlayan şirkət necə seçilir yazısında toplamışıq.
Advertol-da dizayn necə aparılır?
Advertol-un sayt layihələrində dizayna keçməzdən əvvəl saytın strukturu və prototipi hazırlanır ki, məntiq əvvəlcədən razılaşdırılsın. Dizayn mərhələsində əvvəlcə əsas səhifələr təqdim olunur, sifarişçinin rəyi alınır, sonra qalan səhifələr eyni sistemdə davam etdirilir.
- Aston Martin. Sayt hazır şablonla yox, brend kimliyinə uyğun kodla qurulub: rəng palitrası, tipoqrafiya və boşluqların ritmi əvvəlcə brend dilinə uyğunlaşdırılıb, sonra koda köçürülüb.
- Padel 77. Klub üçün əvvəlcə brend kimliyi hazırlanıb, sayt isə həmin kimliyin üzərində qurulub; əsas hərəkət, yəni kortun onlayn rezervasiyası ön plandadır.
Advertol Bakıda yerləşən agentlikdir: sayt və mobil tətbiq hazırlanması, Meta və Google reklamı, SMM, CRM və AI avtomatlaşdırma bir komandada aparılır. Dizaynın kodla və marketinqlə bir plan üzrə aparıldığı layihə lazımdırsa, sayt və tətbiq hazırlanması xidmətinə baxın.
Tez-tez verilən suallar
Veb dizayner və proqramçı eyni adamdırmı?
Adətən yox. Dizayner saytın necə görünəcəyini və necə işləyəcəyini planlaşdırır, proqramçı isə bu planı koda çevirir. Konstruktorlarda bir nəfər hər iki işi görə bilər, amma mürəkkəb layihələrdə bunlar ayrı ixtisaslardır.
UX dizayn olmadan sayt hazırlamaq olarmı?
Texniki cəhətdən olar, amma bu, plansız tikilən ev kimidir. UX mərhələsi buraxılanda səhvlər sayt hazır olandan sonra üzə çıxır və düzəltmək baha başa gəlir. Kiçik saytda UX işi qısa ola bilər: struktur, bir neçə eskiz və bir sınaq.
Sayt dizaynı nə qədər vaxt aparır?
Müddət səhifələrin sayından və razılaşdırmanın sürətindən asılıdır. Bir səhifəlik landing üçün günlər, çoxsəhifəli korporativ sayt və ya onlayn mağaza üçün həftələr lazım olur. Ən çox vaxtı dizaynın özü yox, mətnlərin və sifarişçinin rəyinin gözlənilməsi aparır.
Figma nədir?
Figma sayt və tətbiq dizaynı üçün ən geniş yayılmış proqramlardan biridir. Brauzerdə işləyir, ona görə dizayner, sifarişçi və proqramçı eyni maketə linklə baxır və şərh yaza bilir. Sifarişçiyə proqramı öyrənmək lazım deyil; maketə baxmaq və rəy yazmaq kifayətdir.
Dizayn saytın Google-dakı mövqeyinə təsir edirmi?
Bəli, dolayısı ilə. Google səhifənin sürətini, mobil uyğunluğunu və istifadə rahatlığını nəzərə alır, bunların hamısı isə dizayn qərarlarından asılıdır. Ağır şəkillər, tullanan bloklar və telefonda oxunmayan mətn mövqeyə mənfi təsir edir.
Saytın dizaynını nə vaxt yeniləmək lazımdır?
Rəqəmlər bunu göstərəndə: ziyarətçi var, müraciət yoxdur; telefonda sayt çətin istifadə olunur; yeni xidmətlər köhnə struktura sığmır. "Dizayn köhnəlib" hissi təkbaşına səbəb deyil. Yeniləmədən əvvəl analitikada hansı səhifələrin ziyarətçi itirdiyinə baxın.
Nəticə
Veb dizayn saytın necə göründüyü və necə işlədiyidir; UX yolun rahatlığına, UI isə görünüşə cavab verir. Dizayn strukturdan başlayır, eskiz və prototipdən keçir, telefon üçün ayrıca tərtib edilir və nəticə ilə qiymətləndirilir. Maketə baxanda "gözəldirmi?" sualından əvvəl "müştərim burada axtardığını tapacaqmı?" sualını verin.
Saytınızın dizaynını qiymətləndirmək və ya yeni sayt üçün dizayn prosesini müzakirə etmək istəyirsinizsə, pulsuz strategiya görüşü təyin edin və ya Advertol komandasına yazın.
Mənbələr
- Nielsen Norman Group — The Definition of User Experience (UX)
- Nielsen Norman Group — How Long Do Users Stay on Web Pages?
- Nielsen Norman Group — F-Shaped Pattern of Reading on the Web
- W3C — WCAG 2.2, Contrast (Minimum)
- W3C — WCAG 2.2, Target Size (Minimum)
- web.dev — Web Vitals
- Google Search Central Blog — Mobile-first indexing has landed, 31.10.2023
- Google Accessibility Help — touch target size
- Apple — Human Interface Guidelines, Accessibility
- StatCounter — Desktop vs Mobile vs Tablet Market Share, Azerbaijan, sentyabr 2026
- Baymard Institute — Cart Abandonment Rate Statistics, 22.09.2025