Հիանալի վեբ դիզայնի անելիքներն ու անելիքները

Հետևելով այս ուղեցույցին, այս ուղեցույցը կդառնա բավականին արժեքավոր վեբ դիզայնի ռեսուրս, հատկապես, եթե նախատեսում եք օգտագործել կայքերի մշակման ծրագրակազմ ապագայում. Անփորձից մինչև փորձառու այս ուղեցույցը բոլորի համար ինչ-որ բան ունի:

Մեծ վեբ դիզայնի գործընթացը Պարզապես համոզվելու համար, որ մենք բոլորս նույն էջում ենք, եկեք սկսենք «վեբ դիզայնի» հիմնական սահմանումից: Ըստ Վիքիպեդիայի՝ վեբ դիզայնը հետևյալն է.

«Ինտերնետի միջոցով էլեկտրոնային մեդիա առաքման հայեցակարգման, պլանավորման, մոդելավորման և կատարման գործընթաց՝ Markup լեզվի տեսքով, որը հարմար է վեբ բրաուզերի կողմից մեկնաբանման և որպես գրաֆիկական ինտերֆեյսի ցուցադրման համար»: .

Վեբ դիզայնի գործընթացը կարելի է համեմատել հետազոտական ​​աշխատանք գրելու գործընթացի հետ։ Կոնցեպտուալիզացիայի/պլանավորման փուլում ստեղծվում են սխեմաներ (ուրվագծերը), որոնք ցույց են տալիս ձեր կայքի նավիգացիոն կառուցվածքը: Մոդելավորման փուլում ստեղծվում են ստատիկ մետաղալարեր (կոպիտ նախագիծ), որոնք ցույց են տալիս ձեր կայքի յուրաքանչյուր հատվածի կմախքի դասավորությունը: Լարային շրջանակների ստեղծումից հետո գրաֆիկական պատկերները, գույները և տեքստը օգտագործվում են ձեր վեբ էջերի դիզայնը ստեղծելու համար՝ հիմնվելով մետաղալարերի դասավորության վրա: Կատարման փուլում ձեր դիզայնը վերածվում է վեբ բրաուզերների կողմից աջակցվող ձևաչափի, ավելացվում են տեքստ և բովանդակություն, և վերջապես, ձեր կայքը ուղիղ եթերում հրապարակվում է համացանցում, որպեսզի աշխարհը տեսնի (վերջնական նախագիծ):

Նախագծման գործընթացի բոլոր երեք փուլերը հավասարապես կարևոր են: Շատ վեբ դիզայներներ բաց են թողնում մի փուլ, որպեսզի խնայեն ժամանակը կամ այն ​​պատճառով, որ նրանք չեն կարծում, որ դա անհրաժեշտ է: Այնուամենայնիվ, բոլոր երեք փուլերն էլ անհրաժեշտ են, եթե ձեր նպատակն է ստեղծել հաջող դիզայն և հարգելի կայք: Նույնիսկ եթե օգտագործվեն երեք փուլերը, կան բազմաթիվ սխալներ, որոնք կարող են թույլ տալ վեբ դիզայներները, որոնք կհանգեցնեն անորակ, ոչ օգտագործողի համար հարմար կայքերի ստեղծմանը: Ժամանակն է մաքրել կաբինետը վեբ դիզայնի վատ պրակտիկաներից և այն համալրել լավերով:

Փուլ 1. Հայեցակարգում և պլանավորում
Այս փուլն ավելի հաճախ է բաց թողնվում, քան մյուս երկու փուլերը: Գրողների մեծամասնությանը դուր չի գալիս հետազոտական ​​հոդվածների ուրվագծեր ստեղծելը, և վեբ դիզայներների մեծ մասը նույնպես չի սիրում սխեմաներ ստեղծել: Մի ծույլ մի եղիր. Եթե ​​ջանք գործադրեք և պլանավորեք ձեր վեբ կայքը, ապա դուք կգտնեք, որ վեբ դիզայնի գործընթացը հարթ է ընթանում՝ ճանապարհին թույլ տված ավելի քիչ սխալներով:

Կան մի քանի բաներ, որոնք ձեզ անհրաժեշտ կլինեն ձեր վեբ կայքը արդյունավետորեն հայեցակարգելու և պլանավորելու համար.

• ուղեղ
• թուղթ և գրիչ
• (ըստ ցանկության) հոսքի գծապատկերի ծրագրակազմ
• ընդհանուր պատկերացում ձեր կայքի տարբեր բաժինների մասին

Սկսելու համար վերցրեք ձեր գրիչն ու թուղթը կամ գործարկեք ձեր սիրած սխեմաների ծրագիրը: Մենք օգտագործում ենք OmniGraffle Professiona-ը Mac OS X-ի համար, որն արժե 150 դոլար մեկ լիցենզիայի համար, բայց արժե այն, եթե կանոնավոր կերպով վեբկայքեր եք ստեղծում: Եթե ​​դուք համակարգչով եք, ապա SmartDraw-ը հոյակապ ԱՆՎԱՐ ծրագրաշար է, որը կարող եք օգտագործել: Այնուամենայնիվ, գրիչը և թուղթը լավ են աշխատում:

Գոյություն ունեն սխեմաների ստեղծման բազմաթիվ մեթոդներ: Մենք պատրաստվում ենք ձեզ ցույց տալ դա անելու ամենահիմնական եղանակը՝ հանուն ժամանակի և այս հոդվածի երկարության: Եթե ​​ցանկանում եք ավելին իմանալ սխեմաների մասին, որոնեք սխեմաներ Google-ում կամ Yahoo-ում:

Դիտեք հոսքի գծապատկերը, որը մենք ստեղծել ենք Chromatic կայքերը հայեցակարգելիս: (1) Հոսքերի գծապատկերի վերևում մենք նշում ենք մեր կայքի անվանումը: (2) Այնուհետև մենք ներառում ենք մեր կայքի յուրաքանչյուր հիմնական բաժին՝ Գլխավոր, Մասին և Ծառայություններ: Այս բաժինները ձեր կայքի հիմնական նավարկությունն են: Թե ինչ կլինի յուրաքանչյուր բաժնի անվանումը, ամբողջովին կախված է ձեր կայքի բովանդակությունից: Փորձեք օգտագործել հնարավորինս քիչ բաժիններ, որպեսզի ձեր այցելուները չծանրաբեռնվեն ձեր կայքում նավարկելու ժամանակ:

(3) Այնուհետև ավելացրեք բոլոր երկրորդական էջերը (ենթաբաժինները), որոնք նշված կլինեն հիմնական էջերից յուրաքանչյուրում: Տան համար մենք ներառել ենք Պրոֆեսիոնալ վեբ դիզայն, վեբ մշակում և որոնման համակարգերի օպտիմալացում: Երկրորդական նավարկությունը պետք է ավելի նկարագրական լինի, քան առաջնայինը: Որքան խորանա ձեր կայքերի նավիգացիոն հիերարխիան, այնքան ավելի նկարագրական պետք է լինի յուրաքանչյուր պիտակը:

Դոսը

• Ավելի քիչ է; նվազագույնի հասցնել հիմնական բաժինների քանակը: Մենք օգտագործում ենք 6 բաժին մեր կայքում, որն ավելի քան բավարար է
• Անկախ նրանից՝ դուք օգտագործում եք գրիչ և թուղթ կամ ծրագրակազմ, պահեք իրերը հնարավորինս մաքուր և կազմակերպված: Թեև դուք (և ձեզ հետ աշխատող բոլորը) միակն եք, ովքեր կօգտագործեն հոսքի գծապատկերը, այն դեռ պետք է իմաստալից լինի.

Նոնտերը
Հոսքերի գծապատկեր ստեղծելը բավականին պարզ է. Այնուամենայնիվ, կան մի քանի սխալներ, որոնք հեշտությամբ կարելի է թույլ տալ.

• Մի օգտագործեք շատ նկարագրական տերմիններ ձեր հիմնական նավիգացիայի մեջ, քանի դեռ ձեր ամբողջ կայքը չի կենտրոնանում մեկ նեղ թեմայի վրա. Մի փորձեք մի քանի թեմաներ միացնել նույն էջում: Ստեղծեք ընդհանուր բաժին այս թեմաների համար և այդ բաժնից ստեղծեք ենթաբաժիններ: Սա կդարձնի ենթաբաժնի (նկարագրական) վեբ էջերի հավանականությունը, որ ավելի լավ վարկանիշ ունենան որոնման համակարգերում (Google, Yahoo, MSN, Ask): Հակիրճ և նկարագրական աղյուսակ ստեղծելուց հետո դուք պատրաստ կլինեք անցնել երկրորդ փուլ: վեբ դիզայնի գործընթացի մասին.

Փուլ 2. Մոդելավորում
Մոդելավորման փուլում ստեղծվում են ստատիկ «wireframe» մակետներ: Յուրաքանչյուր մոդելավորում պատկերում է ձեր կայքէջում ներառված յուրաքանչյուր վեբ էջերի դասավորության մերկ կմախքը: Այս փուլը կարևոր է, քանի որ այն մեզ պատկերացում է տալիս, թե որտեղ են տեղադրվելու մեր դիզայնի տարբեր տարրերը: Այս տարրերից մի քանիսն են.

• լոգոն
• նավիգացիոն մենյու
• պարունակություն
• նկարներ, տեսանյութեր

Այս մոդելները ստեղծելու համար կարող եք օգտագործել գրիչ և թուղթ կամ ձեր նախընտրած մակետների ծրագրակազմը: Նախկինում մենք օգտագործել ենք Photoshop-ը, սակայն վերջերս մենք օգտագործում ենք OmniGraffle Professional-ը: OmniGraffle-ն այնքան էլ ռեսուրսներ չի պահանջում, որքան Photoshop-ը, և այն թույլ է տալիս մեզ շատ ավելի արագ հավաքել մեր լարային շրջանակի մոդելները:

Բացի այդ, համոզվեք, որ մոտակայքում ունեք ձեր ստեղծած գծապատկեր(ներ), քանի որ ձեզ հարկավոր է ժամանակ առ ժամանակ հղում կատարել դրանց՝ համոզվելու համար, որ դուք ծաղրում եք բոլոր էջերը, որոնք կհայտնվեն ձեր կայքում:

Ահա մեր օրինակը, թե ինչպես պետք է նայվի wireframe mockup-ը: Ինչպես տեսնում եք, գույներ կամ գրաֆիկա ներառված չեն: Հենց այսպիսին պետք է լինի Wireframe Mockup-ը` ձեր դիզայնի կմախքի դասավորությունը: Նպատակն այն է, որ կարողանանք ընդհանուր պատկերացում ունենալ, թե որտեղ է տեղադրվելու վեբ էջի յուրաքանչյուր տարրը:

Մենք սովորաբար սկսում ենք վերևի ձախից և շարժվում դեպի ներքև: Չկա կոնկրետ ձև, որով լարային շրջանակը պետք է տեսք ունենա: Օգտագործեք ձեր երևակայությունը: Այնուամենայնիվ, համոզվեք, որ ձեր լարային շրջանակները ստեղծելիս չմոռանաք ներառել կայքի ամենակարևոր տարրերը (լոգո, նավիգացիոն ընտրացանկ, բովանդակության տեղադրում, պատկերներ/տեսանյութերի տեղադրում):

Եթե ​​ձեր էջերից մի քանիսը կօգտագործեն նույն դասավորությունը, ապա անհրաժեշտ չէ ծաղրել այդ բոլոր էջերը (թեև դուք, իհարկե, կարող եք): Պարզապես համոզվեք, որ ձեր վեբկայքի ցանկացած եզակի դասավորություն է: Դուք ինքներդ ձեզ ավելի ուշ շնորհակալություն կհայտնեք:

Անելիքները

• բոլոր եզակի էջերի մոդելավորում
• ներառել կարևոր տարրեր (լոգո, նավարկություն, բովանդակության տեղադրում, պատկերներ/տեսանյութերի տեղադրում) -սկսել վերևից և շարժվել ներքև. հղում կատարել 1-ին փուլում ստեղծված ձեր սխեմայի վրա, որպեսզի չմոռանաք կեղծել որևէ էջ - պահպանել, պահպանել, Save – ինչպես համակարգչի ցանկացած այլ դեպքում, պահեք ձեր մոդել(ներ)ը մոտավորապես 10 րոպեն մեկ
• կենտրոնանալ մաքուր, օգտագործողի համար հարմար դասավորության վրա. պիտակավորել ձեր տարրերը, որպեսզի չմոռանաք, թե դրանք ինչ են, երբ դրանք հղում եք կատարում 3-րդ փուլում, կատարումը. Ոչ մի վատ բան չկա այլ կայքերից էլեմենտներ վերցնելու և դրանք ձեր սեփականությունը դարձնելու մեջ (տե՛ս «դոնտերը»)

The Dont-ը

• մի ներառեք գրաֆիկա կամ գույներ (դա հաջորդ փուլի համար է) - մի դարձրեք ձեր մոդելները չափազանց «զբաղված»; կենտրոնանալ մաքուր, լավ կազմակերպված, օգտագործողի համար հարմար դասավորությունների վրա. մի բաց թողեք այս փուլը. այն նույնքան կարևոր է, որքան առաջինը և վերջինը. եթե տարրեր եք վերցնում այլ կայքերից, համոզվեք, որ գրագողություն չեք անում. տարբերություն կա մեկ այլ կայքէջից ոգեշնչվելու՝ ձեր դիզայնի որոշակի տարրեր ստեղծելու և դրանց դասավորությունն ու գույները բացահայտորեն ջարդելու միջև։

Փուլ 3. Կատարում
Երրորդ և վերջին փուլում՝ կատարման, 1-ին և 2-րդ փուլերի պլանավորումը համակցված է՝ աջակցելու կենդանի, ինտերակտիվ կայք ստեղծելուն:
Երրորդ փուլը շատ ժամանակ է պահանջում, քանի որ դուք կկատարեք 1) գրաֆիկայի ստեղծում, 2) բովանդակության ստեղծում և վերջապես, 3) վեբ ձևավորումները պատկերներից կոդերի վերածելու համար, որոնք վեբ բրաուզերներն օգտագործում են ձեր կայքը աշխարհին ներկայացնելու համար:

Երրորդ փուլ հասնելուն պես դուք պետք է հստակ պատկերացնեք.

• ինչպես ձեր այցելուները կհասնեն մի վայրից մյուսը (փուլ 1, հոսքի գծապատկեր) - ինչպես կդասավորվեն ձեր վեբ էջերը (փուլ 2, wireframe mockups)

Եթե ​​դուք հստակ պատկերացում չունեք այս երկու բաների մասին, վերադարձեք առաջին և երկրորդ փուլերին և շարունակեք զարգացնել դրանք: Դուք կիմանաք, որ երրորդ փուլն ամենահեշտն է, երբ ձեր վեբ կայքի նախագծման համար կառուցեք հստակ, հակիրճ մարտական ​​պլան:

Խորտակեք թուղթն ու գրիչը
3-րդ փուլում դուք պետք է օգտագործեք Photoshop կամ պատկերի խմբագրման մեկ այլ ծրագիր, քանի որ ձեր կայքի դասավորությունը ստեղծելու համար կօգտագործեք գույներ և գրաֆիկա:

Մենք սովորաբար սկզբում սկսում ենք ստեղծել «հիմնական» էջը (ինդեքսը): Օգտագործեք ձեր լարային շրջանակները, որոնք ստեղծել եք 2-րդ փուլում, որպես ձևանմուշ ձեր ստեղծած էջերից յուրաքանչյուրի համար: Այնուամենայնիվ, ամուր տուփեր օգտագործելու փոխարեն, փոխարենը օգտագործեք գրաֆիկա, գույներ և տեքստ: Յուրաքանչյուր էջ պետք է լինի ճիշտ այնպես, ինչպես ցանկանում եք, որ դրանք նայեն համացանցում, քանի որ սա նախագծման գործընթացի վերջին փուլն է:

Համոզվեք, որ ներառեք ձեր նավիգացիայի ֆոնը (բայց իրականում մի ավելացրեք տեքստը ձեր պատկերին): Երբ փոխակերպվում եք CSS-ի միջոցով (կասկադային ոճի թերթիկներ), ձեր նավարկությունը պետք է լինի տեքստի և ոչ թե պատկերների տեսքով: Պատկերները որոնողական համակարգերի կողմից չեն կարող սողալ (ձեր նավիգացիայի մեջ օգտագործվող հիմնաբառերը չեն ինդեքսավորվեն որոնման արդյունքների էջերում, ինչը նշանակում է, որ ավելի քիչ մարդիկ կկարողանան գտնել ձեր կայքը):

Երբ դուք գոհ եք ձեր դիզայնից և զգում եք, որ դրանք պատրաստ են տեղադրվելու ինտերնետում, ժամանակն է բաժանել դիզայնը, որպեսզի կարողանաք ստեղծել CSS-ի վրա հիմնված դասավորություն: Ձեր դասավորությունները CSS-ի փոխարկելու կամ ձեր կայքը CSS-ում նշելու մասին լրացուցիչ տեղեկությունների համար այցելեք w3schools.com: Ինտերնետում փնտրելուց հետո մենք չկարողացանք գտնել «պատկերից դեպի CSS» արժանապատիվ ձեռնարկ, այնպես որ սպասեք մեզ մոտակա շաբաթներին: Ձեր ձևավորումները CSS-ի վերածելը չափազանց կարևոր է, քանի որ աղյուսակի դասավորությունը անցյալի բան է:

Ահա դասավորության գրեթե ավարտված վեբկայքի օրինակ, որը մենք ծաղրել ենք 2-րդ փուլում: Սա վերցված է անմիջապես մեր վեբ բրաուզերից և ինչպես տեսնում եք, այժմ կա պատկերանշան, գույներ, գեղեցիկ նավիգացիոն համակարգ, ստորագիր, և ամենակարևորը՝ մաքուր, կազմակերպված դասավորություն։
1-ին և 2-րդ փուլերի պլանավորման շնորհիվ մեր դասավորությունը լավ կազմակերպված է և հեշտ օգտագործման համար:

Դոսը

• հղում կատարել ձեր կաղապարներին, որոնք ստեղծվել են 2-րդ փուլում. թեև լավ է շեղվել ձեր սկզբնական դասավորությունից, ձեզ դա պետք չէ
• կատարեք որոշակի հետազոտություն նախքան ձեր իրական դիզայնը ստեղծելը. Ստացեք գաղափարներ այլ կայքերից և դարձրեք դրանք ձեր սեփականը (առանց գրագողության)
• ներառեք գույներ և գրաֆիկա՝ ձեր վեբ էջերի վերջնական տեսքը ստեղծելու համար. օգտագործեք CSS (կասկադային ոճի թերթիկներ)՝ ձեր ձևավորումները պատկերներից վեբ բրաուզերների կողմից հասկանալի նշագրման փոխարկելու համար. Հղում կատարել ձեր գծապատկերը 1-ին փուլից՝ ձեր էջերը հիպերհղումներով կոդավորելիս. ավելի լավ է օգտագործել բացվող մենյու, որը ներառում է ձեր կայքի բոլոր (կամ մեծամասնությունը) հղումները յուրաքանչյուր էջում. դա թույլ կտա ավելի հեշտ նավարկություն իրականացնել, ինչպես նաև կդարձնի ձեր էջերը ավելի հեշտ սողալը, երբ որոնողական համակարգի սարդերը կանգ են առնում: CSS-ի բացվող ընտրացանկերը ստանալու հիանալի վայր է DynamicDrive.com-ում. վերջնականացրեք ձեր դիզայնը Photoshop-ում կամ պատկերների խմբագրման ցանկացած ծրագրաշարում աշխատելիս; Ձեր դիզայնում փոփոխություններ կատարելը կարող է դժվար լինել, երբ այն վերածվի նշագրման (կոդ)

Նոնտերը

• CSS-ի փոխարկելիս տեքստը մի՛ ներառեք ձեր նավիգացիոն ընտրացանկերում. պատկերի տեքստ օգտագործելու փոխարեն օգտագործեք սովորական տեքստ, որը ընթեռնելի է որոնման համակարգի սարդերի կողմից
• մի օգտագործեք աղյուսակներ փոխակերպման ժամանակ; նույնիսկ եթե ձեզ հարկավոր է գիրք գնել CSS-ով, արժե այն. սեղանները մեռած են
• Մի շրջանցեք առաջին երկու փուլերը՝ պարզապես ժամանակ խնայելու համար. Ձեր կայքը ավելի լավը կլինի, եթե սկսեք վեբ դիզայնի գործընթացի սկզբից (վերջից փոխարեն)
• Մի մոռացեք սեղմել ձեր պատկերները, երբ դրանք կտրված են CSS-ի համար. Չկա ավելի վատ բան, քան դանդաղ բեռնվող կայքը մեծ պատկերային ֆայլերի պատճառով. Photoshop-ն ունի «Save Optimized For Web» տարբերակը (CS3 – «Save for Web and Devices»)

Գործընթացը կատարյալ է դարձնում
Հետևելով վեբ դիզայնի գործընթացին, ինչպիսին է այս հոդվածում պատկերվածը, դուք մեծացնում եք լավ կազմակերպված, հեշտությամբ նավարկելի և շատ հարմար վեբ կայք ստեղծելու հնարավորությունները: Թույլ տվեք հասկանալ, որ եթե այցելուները կորչեն կամ շփոթվեն ձեր վեբկայքում զննելու փորձի ժամանակ, նրանք կարող են սեղմել «Հետ» կոճակը և փնտրել ավելի հարմար կայք: Մարդիկ չեն սիրում մտածել, երբ խոսքը գնում է կայքերում իրենց ճանապարհը գտնելու մասին: Մի ստիպեք նրանց մտածել: Դուք մտածում եք՝ պլանավորելով ձեր կայքը 1-ին փուլից մինչև 3-րդ փուլ, և դուք կտեսնեք, որ ավելի շատ մարդիկ հաճույք կստանան այցելելով ձեր կայքը: