Veb-dizayn mövzusu çoxdandır sanki tilsimə çevrilmişdi. Qrafik dizyanın müasir və dinamik sahəsi olan veb-dizayn haqqında bir neçə dəfə material hazırlamaq istəsəm də, nə üçünsə alınmırdı. Amma bu gün bu tilsimi də qırmış olacam. Açılış üçün dostum, fotoqraf Həbib Səmədovun şəxsi veb saytını hazırlayarkən çəkdiyim sadə dizaynı seçdim. Beləliklə prosesin ardıcıllığını izləyək.

İstər bu günkü materialdan, istərsə də bundan sonrakı veb-dizayn dərslərindən texniki cəhətdən qeyri-adi nə isə  gözləmək düz olmazdı. Sadəcə olaraq dizayn prosesinin ardıcıllığını, müasir veb elementlərin hazırlanma qaydasını, obyektlərin səhifələrdə yerləşdirilmə qaydalarını izləyərək praktikada tətbiq edə bilərsiniz.

İlk olaraq Photoshop-da yeni səhifə (Ctrl+N) yaradaq. Ölçülərini 1200px X 900px edək. Faylın adını da Portfolio qoyaq.   

Səhifədə obyektlərin düzgün yerləşdirilməsi üçün hər zaman köməyimizə bələdçi xəttlər (Guides) gəlir. Menyudan View - New Guide... əmrini verək. 

Birinci xətti 200px, sonrakını isə 1000px verək. 

Səhifənin fon rəngini ağ da saxlamaq olar. Lakin modern veb saytların fonları adətən açıq boz rəngdə olur. Tam ağ rəngli fon parlaq ekranlarda oxucunun gözünü yora bilir. 

Səhifənin yuxarı hissəsində, tam mərkəzdə loqonu yerləşdirdim.

Obyektin səhifənin ortasında yerləşdirilməsi üçün, obyekti və fonu Layers (F7) pəncərəsində qeyd edib, Nəzarət Panelindən Align Horizontal Lines düyməsini klik etmək lazımdır.  

Saytda menyunun və müəyyən hissələrin sərhəddlərini müəyyən etmək üçün nazik, tədricən itən xəttlərdən istifadə edəcəm.

1px-lik xətti çəkmək üçün Alətlər Panelindən Single Row Marquee Tool alətini aktivləşdirmək lazımdır.  

Səhifədə klik edib, yeni qat yaradıb (Shift+Ctrl+N), boz rəng veriririk. Xəttin müəyyən hissəsini silib, uclarını tədrici olaraq yox edirik. 

Xəttləri yuxarı hissədə menyu üçün və aşağı hissədə yerləşdirdim. 

Menyu üçün Century şriftini, 13px-lik ölçünü seçdim. Saytın bölmələrini bir sətrdə, tünd boz rəngdə, ALL CAPS (böyük hərflərlə) olaraq daxil etdim.

Menyunun hansısa bölümünün üzərinə kursoru yaxınlaşdıqda mətnin görünüşü dəyişməlidir ki, istifadəçi link-in aktiv olduğunu anlasın. Ona görə də nümunə olaraq Wedding yazısının rəngini bir az da tündləşdirdim, underline rejimini aktivləşdirdim. 

(indi fikir verirəm ki, şriftin ölçüsünü 13.51 olaraq vermişəm.))) Bu formada, tam olmayan göstərici daxil etmək yanlışdır.)

Saytın ana səhifəsinin əsas obyekti fləş slayd olacaq. Dizaynda bunu sadəcə bir böyük şəkil kimi göstərsək yetər. Dizayn monoxrom olsun deyə, rəngləri minimuma endirəcəm. Ona görə də slaydda ancaq ağ-qara fotolar olacaq. Dostumun mənim toyumdan çəkdiyi gözəl bir kadrı səhifənin mərkəzinə yerləşdirdim. 

Fotoqrafın Facebook sosial şəbəkəsindəki səhifəsini sayta bağlamaq üçün feysbukun ikonka-sını yenə ağ-qara (boz) olaraq dizaynın aşağı sağ hissəsinə qoydum. 

Müəllif və sayt sahibi haqqında məlumatı da səhifənin aşağı hissəsinə qoymağı unutmuruq.  

Sonda dizayn işini müştəriyə təqdim edərkən bəzi xırda elementlər var ki, onları unutmaq olmaz. Məsələn, saytın gələcək real görüntüsünü dizayn səviyyəsində təqdim edərkən kursor şəklini menyunun aktiv bölümünün üzərinə qoymaqla maraqlı effekt əldə edə bilərik.

Bundan başqa fləş üçün fotonun üzərində şəffaf, izahedici mətn də daxil etmək mümkündür. Müxtəlif mətn elementləri üçün şəffaflığı fərqli edib, yüngül dinamizm ala bilərik.

Saytın tam ölçülü yekun görüntüsünü isə bu linkdən görə bilərsiniz. Hələlik...