Möhtəşəm Veb Dizaynının Etməli və Olmasınlar

Təqib edildikdə, bu bələdçi, xüsusilə istifadə etməyi planlaşdırırsınızsa, olduqca dəyərli bir veb dizayn resursu olacaq vebsayt inkişaf proqramı gələcəkdə. Təcrübəsizdən təcrübəliyə qədər bu təlimatda hər kəs üçün bir şey var.

Böyük Veb Dizayn Prosesi Hamımızın eyni səhifədə olduğumuzdan əmin olmaq üçün “veb dizaynı” üçün əsas tərifdən başlayaq. Vikipediyaya görə veb dizayn:

"İnternet vasitəsilə elektron medianın çatdırılmasının konseptuallaşdırılması, planlaşdırılması, modelləşdirilməsi və icrası prosesi Veb brauzer tərəfindən şərh edilməsi və Qrafik istifadəçi interfeysi kimi göstərilməsi üçün uyğun İşarələmə dili şəklində" .

Veb dizayn prosesini tədqiqat işinin yazılması prosesi ilə müqayisə etmək olar. Konseptuallaşdırma/planlaşdırma mərhələsində veb-saytınızın naviqasiya strukturunu təsvir edən axın qrafikləri (kontur) yaradılır. Modelləşdirmə mərhələsində veb saytınızın hər bir bölməsi üçün skelet quruluşunu göstərən statik tel çərçivələri (kobud layihə) yaradılır. Tel çərçivələr yaradıldıqdan sonra məftil çərçivələrin tərtibatı əsasında veb səhifələrinizin dizaynını yaratmaq üçün qrafika, rəng və mətndən istifadə edilir. İcra mərhələsində dizaynınız veb-brauzerlər tərəfindən dəstəklənən formata çevrilir, mətn və məzmun əlavə edilir və nəhayət, veb saytınız dünyanın görməsi üçün internetdə canlı yayımlanır (son layihə).

Dizayn prosesinin hər üç mərhələsi eyni dərəcədə vacibdir. Bir çox veb-dizaynerlər vaxta qənaət etmək üçün və ya bunun lazım olmadığını düşündükləri üçün bir mərhələni atlayırlar. Ancaq məqsədiniz uğurlu dizayn və hörmətli veb sayt yaratmaqdırsa, hər üç mərhələ lazımdır. Üç mərhələdən istifadə olunsa belə, veb-dizaynerlərin edə biləcəyi bir çox səhvlər var ki, bu da keyfiyyətsiz, istifadəçi dostu olmayan veb-saytlara gətirib çıxaracaq. Şkafı pis veb dizayn təcrübələrindən təmizləmək və yaxşıları ilə bərpa etmək vaxtıdır.

Mərhələ 1: Konseptuallaşdırma və planlaşdırma
Bu mərhələ digər iki mərhələdən daha tez-tez atlanır. Əksər yazıçılar tədqiqat işləri üçün konturlar yaratmağı sevmirlər və əksər veb-dizaynerlər də axın qrafikləri yaratmağı sevmirlər. Tənbəl olmayın. Əgər səy göstərsəniz və veb saytınızı planlaşdırsanız, veb dizayn prosesinin yol boyu daha az səhvlə rəvan getməsini tapacaqsınız.

Veb saytınızı effektiv şəkildə konseptuallaşdırmaq və planlaşdırmaq üçün sizə lazım olacaq bir neçə şey var:

• beyin
• qələm və kağız
• (isteğe bağlı) axın sxemi proqramı
• veb saytınızın müxtəlif bölmələri haqqında ümumi fikir

Başlamaq üçün qələminizi və kağızınızı götürün və ya sevimli axın qrafiki proqramını işə salın. Biz Mac OS X üçün OmniGraffle Professiona-dan istifadə edirik ki, onun qiyməti hər lisenziyaya görə 150 ​​dollardır, lakin müntəzəm olaraq veb-saytlar yaratsanız, buna dəyər. Əgər siz kompüterdəsinizsə, o zaman SmartDraw istifadə edə biləcəyiniz böyük PULSUZ flowchart proqramıdır. Qələm və kağız yaxşı işləyir.

Axın sxemlərini yaratmağın bir çox üsulları var. Bu məqalənin uzunluğu və vaxt xatirinə sizə bunu etməyin ən əsas yolunu göstərəcəyik. Əgər axın sxemləri haqqında daha çox öyrənmək istəyirsinizsə, Google və ya Yahoo-da axın sxemlərini axtarın.

Xromatik Saytları konseptuallaşdırarkən yaratdığımız axın cədvəlinə baxın. (1) Axın cədvəlinin yuxarısında biz vebsaytımızın adını qeyd edirik. (2) Sonra, biz vebsaytımızın hər bir əsas bölməsini daxil edirik: Əsas səhifə, Haqqında və Xidmətlər. Bu bölmələr veb saytınız üçün əsas naviqasiyadır. Hər bölmənin adlarının nə olacağı tamamilə veb saytınızın məzmunundan asılıdır. Mümkün qədər az bölmədən istifadə etməyə çalışın ki, ziyarətçiləriniz veb saytınızda gəzərkən sıxılmasınlar.

(3) Sonra, əsas səhifələrin hər birində qeyd olunacaq bütün ikinci dərəcəli səhifələri (alt bölmələri) əlavə edin. Ev üçün biz Professional Veb Dizaynı, Veb İnkişafı və Axtarış Mühərrikinin Optimizasiyası daxildir. İkinci naviqasiya əsas naviqasiyadan daha təsviri olmalıdır. Veb saytlarınızın naviqasiya iyerarxiyası nə qədər dərin olarsa, hər bir etiket bir o qədər təsviri olmalıdır.

Dos

• Az daha çox; əsas bölmələrin sayını minimuma endirmək. Veb saytımızda 6 bölmədən istifadə edirik ki, bu da kifayət qədər çoxdur
• İstər qələm və kağızdan, istərsə də axın cədvəli proqramından istifadə etməyinizdən asılı olmayaraq, hər şeyi mümkün qədər təmiz və mütəşəkkil saxlayın. Baxmayaraq ki, siz (və sizinlə işləyən hər kəs) axın sxemindən istifadə edəcək yeganə şəxslərdir, yenə də məntiqli olmalıdır -Sizin əsas bölmələr daha geniş terminlərdən istifadə etməlidir, ikinci dərəcəli və üçüncü dərəcəli terminlər isə daha təsviri olmalıdır.

Dontlar
Axın sxeminin yaradılması olduqca sadədir; Bununla belə, asanlıqla edilə bilən bir neçə səhv var:

• Bütün veb saytınız bir dar mövzuya diqqət yetirməyincə, əsas naviqasiyanızda çox təsviri terminlərdən istifadə etməyin - Eyni səhifədə bir neçə mövzunu birləşdirməyə çalışmayın. Bu mövzular üçün ümumi bölmə yaradın və həmin bölmədən alt bölmələr yaradın. Bu, alt bölmə (təsviri) veb səhifələrinin axtarış sistemlərində (Google, Yahoo, MSN, Ask) daha yaxşı reytinqə malik olmasını təmin edəcək. Qısa və təsviri sxem yaratdıqdan sonra ikinci mərhələyə keçməyə hazırsınız. veb dizayn prosesi:

Mərhələ 2: Modelləşdirmə
Modelləşdirmə mərhələsində statik “tel çərçivəsi” maketləri yaradılır. Hər bir maket vebsaytınıza daxil ediləcək veb-səhifələrin hər biri üçün planın çılpaq sümük skeletini göstərir. Bu mərhələ vacibdir, çünki dizaynımızda müxtəlif elementlərin harada yerləşdiriləcəyi barədə fikir verir. Bu elementlərdən bəziləri bunlardır:

• logo
• naviqasiya menyusu
• məzmun
• şəkillər, videolar

Bu maketləri yaratmaq üçün qələm və kağızdan və ya seçdiyiniz maket proqramından istifadə edə bilərsiniz. Əvvəllər Photoshop-dan istifadə edirdik, lakin son vaxtlar OmniGraffle Professional-dan istifadə edirik. OmniGraffle Photoshop qədər resurs tələb etmir və o, bizə tel kafes maketlərimizi daha tez yığmağa imkan verir.

Bundan əlavə, yaxınlıqda yaratdığınız cədvəl(lər)in olduğundan əmin olun, çünki veb saytınızda görünəcək bütün səhifələri ələ saldığınızdan əmin olmaq üçün vaxtaşırı bunlara istinad etməli olacaqsınız.

Budur, tel kafes maketinin necə görünəcəyinə dair nümunəmiz. Gördüyünüz kimi, heç bir rəng və ya qrafika daxil edilmir. Tel kafes maketi məhz belə olmalıdır – dizaynınızın skelet quruluşu. Məqsəd veb səhifənin hər bir elementinin harada yerləşdiriləcəyi barədə ümumi təsəvvürə malik olmaqdır.

Biz adətən yuxarı soldan başlayırıq və aşağıya doğru gedirik. Tel çərçivəsinin görünməsi üçün xüsusi bir yol yoxdur. Təsəvvürünüzü istifadə edin. Bununla belə, tel çərçivələrinizi yaradan zaman vebsaytın ən vacib elementlərini (loqo, naviqasiya menyusu, məzmunun yerləşdirilməsi, şəkillər/video yerləşdirmə) daxil etməyi unutmayın.

Əgər səhifələrinizdən bəziləri eyni tərtibatdan istifadə edəcəksə, o zaman bu səhifələrin hamısını ələ salmaq lazım deyil (baxmayaraq ki, siz mütləq edə bilərsiniz). Sadəcə veb saytınızın hər hansı unikal tərtibatını maket etməyinizə əmin olun. Sonra özünüzə təşəkkür edəcəksiniz.

Ediləcəkdir

• bütün unikal səhifələrin maketi
• mühüm elementləri daxil edin (loqo, naviqasiya, məzmunun yerləşdirilməsi, şəkillər/video yerləşdirmə) -yuxarıdan başlayın və aşağıya doğru hərəkət edin -hər hansı bir səhifəni maket etməyi unutmamağınız üçün 1-ci mərhələdə yaradılmış axın sxeminizə istinad edin -saxla, saxla, saxla – kompüterdəki hər hansı bir şey kimi, maket(lər)inizi hər 10 dəqiqədən bir yadda saxlayın
• təmiz, istifadəçi dostu tərtibatlara diqqət yetirin -elementlərinizi etiketləyin ki, 3-cü mərhələdə onlara istinad etdiyiniz zaman onların nə olduğunu unutmayasınız, icra - ilham kimi digər veb saytlardan istifadə edin; Digər saytlardan elementlər götürüb onları özünüzə çevirməkdə heç bir qəbahət yoxdur (bax: “donts”)

Dont's

• qrafika və ya rəngləri daxil etməyin (bu, növbəti mərhələ üçündür) - maketlərinizi çox “məşğul” etməyin; təmiz, yaxşı təşkil edilmiş, istifadəçi dostu planlara diqqət yetirin - bu mərhələni qaçırmayın; ilk və sonuncu kimi vacibdir - əgər siz başqa vebsaytlardan elementlər götürsəniz, plagiat etmədiyinizə əmin olun; Dizaynınızın müəyyən elementlərini yaratmaq üçün başqa bir veb-saytdan ilham almaqla onların tərtibatını və rənglərini açıq-aşkar pozmaq arasında fərq var

Mərhələ 3: İcra
Üçüncü və son mərhələdə, icra, 1 və 2-ci mərhələdən planlaşdırma canlı, interaktiv veb-sayt yaratmağa kömək etmək üçün birləşdirilir.
Üçüncü mərhələ ən çox vaxt tələb edən mərhələdir, çünki siz 1) qrafika yaratmaq 2) məzmun yaratmaq və nəhayət, 3) veb-dizaynları şəkillərdən veb-brauzerlərin vebsaytınızı dünyaya təqdim etmək üçün istifadə etdiyi koda çevirmək olacaqsınız.

Üçüncü mərhələyə çatanda sizdə aydın təsəvvür olmalıdır:

• ziyarətçilərinizin bir yerdən digərinə necə keçəcəyi (mərhələ 1, axın sxemi) -veb səhifələriniz necə yerləşdiriləcək (mərhələ 2, tel kafes maketləri)

Bu iki şey haqqında dəqiq təsəvvürünüz yoxdursa, birinci və ikinci mərhələlərə qayıdın və onları inkişaf etdirməyə davam edin. Veb saytınızın dizaynı üçün aydın, qısa bir döyüş planı qurduğunuz zaman üçüncü mərhələnin ən asan olduğunu görəcəksiniz.

Qələmi və kağızı atın
3-cü mərhələdə siz Photoshop və ya başqa bir şəkil redaktə proqramından istifadə etməlisiniz, çünki veb saytınızın tərtibatını yaratmaq üçün rənglər və qrafiklərdən istifadə edəcəksiniz.

Biz adətən ilk olaraq “ana” səhifəni (indeks) yaratmağa başlayırıq. 2-ci mərhələdə yaratdığınız tel çərçivələrinizi yaratdığınız səhifələrin hər biri üçün şablon kimi istifadə edin. Bununla belə, bərk qutulardan istifadə etmək əvəzinə, qrafika, rəng və mətndən istifadə edin. Hər bir səhifə onların İnternetdə necə görünməsini istədiyiniz kimi görünməlidir, çünki bu dizayn prosesinin son mərhələsidir.

Naviqasiyanız üçün fon əlavə etdiyinizə əmin olun (lakin mətni şəklinizə əslində əlavə etməyin). CSS (cascading style sheets) istifadə edərək çevrildikdə naviqasiyanız şəkillər deyil, mətn şəklində olmalıdır. Şəkillər axtarış motorları tərəfindən taranmaq mümkün deyil (naviqasiyanızda istifadə olunan açar sözlər axtarış motorunun nəticələri səhifələrində indeksləşdirilməyəcək, yəni daha az adam veb saytınızı tapa biləcək).

Dizaynlarınızdan məmnun olduğunuzda və onların İnternetdə yerləşdirilməyə hazır olduğunu hiss etdikdə, CSS əsaslı tərtibat yarada bilmək üçün dizaynları ayırmağın vaxtı gəldi. Dizaynlarınızı CSS-ə çevirmək və ya veb saytınızı CSS-də qeyd etmək haqqında ətraflı məlumat üçün w3schools.com saytına daxil olun. İnternetə nəzər saldıqdan sonra biz CSS-ə uyğun şəkilli dərslik tapa bilmədik – ona görə də yaxın həftələrdə bizdən birini gözləyin. Dizaynlarınızı CSS-ə çevirmək son dərəcə vacibdir, çünki masa tərtibatı keçmişdə qalıb.

Budur, 2-ci mərhələdə istehza etdiyimiz tərtibatın demək olar ki, tamamlanmış vebsaytına bir nümunə. Bu, birbaşa veb brauzerimizdən götürülüb və gördüyünüz kimi, indi loqo, rənglər, gözəl naviqasiya sistemi, altbilgi, və ən əsası, təmiz, mütəşəkkil bir tərtibat.
Mərhələ 1 və 2-də planlaşdırma sayəsində planımız yaxşı təşkil edilmiş və istifadəsi asandır.

Dos

• 2-ci mərhələdə yaradılmış şablonlarınıza istinad edin; orijinal tərtibatınızdan yayınmaq yaxşı olsa da, buna ehtiyac yoxdur
• faktiki dizaynınızı yaratmazdan əvvəl bir az araşdırma aparın; digər saytlardan ideyalar əldə edin və onları özünüz edin (plagiat olmadan)
• veb-səhifələrinizin son görünüşünü yaratmaq üçün rəng və qrafikləri daxil edin - dizaynlarınızı şəkillərdən veb-brauzerlər tərəfindən başa düşülən işarələrə çevirmək üçün CSS-dən (cascading style sheets) istifadə edin - səhifələrinizi hiperlinklərlə kodlaşdırarkən 1-ci mərhələdən başlayaraq hərəkət sxeminizə istinad edin; veb saytınızdakı bütün bağlantıları (və ya əksəriyyətini) hər səhifədə ehtiva edən açılan menyudan istifadə etmək daha yaxşıdır; bu, daha asan naviqasiyaya imkan verəcək və həmçinin axtarış motoru hörümçəkləri dayandıqda səhifələrinizin taranmasını asanlaşdıracaq; CSS açılan menyuları əldə etmək üçün əla yer DynamicDrive.com-dadır - Photoshop və ya istifadə etdiyiniz hər hansı şəkil redaktə proqramında işləyərkən dizaynınızı yekunlaşdırın; işarələmə (koda) çevrildikdən sonra dizaynınızda dəyişiklik etmək ağrılı ola bilər.

Dontlar

• CSS-ə çevirərkən mətni naviqasiya menyularınıza daxil etməyin; şəkil mətnindən istifadə etmək əvəzinə, axtarış motoru hörümçəkləri tərəfindən oxuna bilən adi mətndən istifadə edin
• çevirərkən cədvəllərdən istifadə etməyin; CSS-də kitab almaq lazım olsa belə, buna dəyər; masalar ölüb
• yalnız vaxta qənaət etmək üçün ilk iki mərhələni qaçırmayın; veb dizayn prosesinin əvvəlindən başlasanız, veb saytınız daha yaxşı olacaq (sonda deyil)
• CSS üçün kəsilmiş şəkillərinizi sıxışdırmağı unutmayın; böyük şəkil faylları səbəbindən yavaş yüklənən veb saytdan daha pis bir şey yoxdur; Photoshop-da "Veb üçün optimallaşdırılmış saxla" seçimi var (CS3 - "Veb və Cihazlar üçün Saxla")

Proses Mükəmməl Edir
Bu məqalədə təsvir olunan kimi veb dizayn prosesini izləməklə, siz yaxşı təşkil edilmiş, asanlıqla naviqasiya edilə bilən və çox istifadəçi dostu veb sayt yaratmaq şansını artırırsınız. İcazə verin - əgər ziyarətçilər veb saytınızı gəzməyə cəhd edərkən itirilsələr və ya çaşqınlarsa, onlar geri düyməsini vurub daha istifadəçi dostu veb sayt axtara bilərlər. İnsanlar veb saytlarda yol tapmaq barədə düşünməyi sevmirlər. Onları düşünməyə vadar etməyin. Veb saytınızı 1-ci mərhələdən 3-cü mərhələyə qədər planlaşdırmaqla düşünürsünüz və daha çox insanın vebsaytınızı ziyarət etməkdən həzz alacağını görəcəksiniz.