Եթե ցանկանում եք նախագծել և ստեղծել վեբ էջեր, ապա այս գործընթացը շատ ավելի հեշտ կլինի, եթե նախապես պլանավորեք: Պլանավորման փուլում դիզայները և պատվիրատուն կարող են միասին աշխատել ՝ գտնելու իրենց կարիքներին համապատասխանող ձևաչափ և դասավորություն: Պլանավորման գործընթացը ազդում է կայքի ոճի կամ ոճի վրա, կարելի է ասել, որ սա վեբ դիզայնի ամենակարևոր կողմն է, հատկապես, եթե դա բիզնես նպատակների համար է:
Քայլ
Մաս 1 -ից 4 -ը. Հիմնական կառուցվածքի ստեղծում
Քայլ 1. Որոշեք կայքի գործառույթը:
Եթե դուք ստեղծում եք անձնական կայք, հավանաբար արդեն գիտեք պատասխանը: Այնուամենայնիվ, եթե դուք ստեղծում եք կայք մեկ այլ կազմակերպության, ընկերության կամ անձի համար, ապա պետք է պարզեք, թե ինչ են նրանք ցանկանում և կայքի ֆունկցիոնալությունը: Այն ամենը, ինչ այստեղ նշում եք, ուժի մեջ կմտնի վեբ էջի ավարտից հետո:
- Արդյո՞ք կայքը պահանջում է Storefront: Պե՞տք է օգտվողի մեկնաբանությունները տրվեն: Արդյո՞ք օգտագործողը պետք է հաշիվ ստեղծի ավելի ուշ: Կայքի հոդվածը կողմնորոշվա՞ծ է: Թե՞ պատկերին կողմնորոշված: Այս և այլ հարցեր կօգնեն ձեզ նախագծել և ձևավորել կայքը:
- Պլանավորման այս գործընթացը կարելի է նկարել գծագրության մեջ, հատկապես, եթե դա մեծ ընկերության համար է, և շատ մարդիկ ներգրավված են այս նախագծի ստեղծման մեջ:
Քայլ 2. Ստեղծեք կայքի քարտեզի դիագրամ (կայքի քարտեզ):
Կայքի քարտեզի դիագրամը նման է հոսքի գծապատկերին ՝ ցույց տալով, թե ինչպես են օգտվողները մեկ էջից անցնում մյուսին: Այս փուլում ձեզ հարկավոր չէ վեբ էջ, այլ միայն հասկացությունների ընդհանուր հոսք: Դուք կարող եք օգտագործել համակարգչային ծրագիր ՝ դիագրամներ ստեղծելու կամ ձեր սեփականը թղթի վրա ուրվագծելու համար: Օգտագործեք այս դիագրամը ՝ ցուցադրելու հիերարխիկ դասավորության և վեբ էջերի միացման հասկացությունները:
Քայլ 3. Փորձեք քարտի կազմման եղանակը:
Խմբային վեբ զարգացման հանրաճանաչ մեթոդներից է մի շարք քարտերի օգտագործումը `բոլորի սպասելիքները պարզելու համար: Վերցրեք մի շարք նշումների քարտեր և յուրաքանչյուրի վրա առանձին գրեք վեբ էջի հիմնական բովանդակությունը: Կազմակերպեք այս քարտերը ձեր թիմի հետ միասին `գտնելու լավագույն հայեցակարգը: Այս մեթոդը հարմար է օգտագործման համար, երբ դուք համագործակցում եք ուրիշների հետ վեբ էջերի ստեղծման գործում:
Քայլ 4. Օգտագործեք թուղթ և տեղեկատախտակ կամ գրատախտակ:
Սա փոքր բյուջեով պլանավորման օրիգինալ մեթոդ է, կարող եք արագ ջնջել կամ տեղափոխել բովանդակությունը և փոխել հոսքը: Նկարեք ձեր վեբ դիզայնը թղթի վրա, այնուհետև թերթերը միացրեք թելով կամ գծեր գծեք գրատախտակին: Այս մեթոդը շատ հարմար է ուղեղային փոթորկի նիստերում օգտագործելու համար:
Քայլ 5. Ստեղծեք բովանդակության գույքագրում:
Իրականում, դա ավելի նպատակահարմար է օգտագործել ցանցերի վերափոխման համար, քան նոր վեբ ձևավորումների ժամանակ: Տեղադրեք յուրաքանչյուր ավարտված բովանդակություն կամ վեբ էջ աղյուսակի մեջ: Նշեք բովանդակության կամ էջի յուրաքանչյուր մասի նպատակը ՝ օգտագործելով այս ցուցակը ՝ որոշելու, թե ինչ հեռացնել և ինչ պահել: Դուք կարող եք պարզեցնել վեբի կառուցվածքը և հետագայում պարզեցնել վերափոխման գործընթացը:
Մաս 2 4 -ից. Հիմնական HTML ուրվագծի ստեղծում
Քայլ 1. Ստեղծեք լարային շրջանակ ՝ վեբ էջի հիերարխիա հաստատելու համար:
Հիմնական HTML ձևանմուշը այն կայքի նախագիծն է, որը դուք կկառուցեք ՝ օգտագործելով միայն ամենաանհրաժեշտ պիտակները և նմուշի (բլոկներ/կաղապարներ) բովանդակությունը: Այս շրջանակը պատասխանում է «Ի՞նչ է տեսանելի համացանցում և որտե՞ղ» հարցին: Այս ուրվագծի ստեղծման մեջ ձևավորում և ձևավորում չի պահանջվում:
- Նախքան ոճի պարամետր ընտրելը, կարող եք տեսնել բովանդակության կառուցվածքը և հոսքի աղյուսակը հիմնական ուրվագծով:
- Հիմնական HTML ձևանմուշները ստատիկ չեն, ինչպես PDF- ները կամ պատկերները, նոր կառույցներ ստեղծելու համար կարող եք արագ սահեցնել նմուշի բովանդակության միջով:
- Հիմնական շրջանակը ինտերակտիվ է, որն օգուտ է բերում ինչպես վեբ ծրագրավորողներին, այնպես էլ հաճախորդներին: Քանի որ այս հիմնական շրջանակը գրված է պարզ HTML կոդով, դուք դեռ կարող եք նավարկել այն և իմանալ, թե ինչպես է աշխատում վեբ էջերի փոխարկումը: Դա հնարավոր չէ անել PDF- ով:
Քայլ 2. Փորձեք Մոխրագույն տուփի մեթոդը:
Արգելափակեք կամ ընդգծեք ձեր կայքի բովանդակությունը Gray Box- ում, ամենակարևոր բովանդակությունը վերևում է: Բաժանեք բովանդակությունը մեկ սյունակում: Օրինակ, եթե էջը «Ընկերության մասին» է, ապա ընկերության մասին մանրամասն տեղեկությունները վերևում են, որին հաջորդում է անձնակազմի ցուցակը, այնուհետև կոնտակտային տվյալները և այլն:
Սա չի ներառում վերնագրեր և տողատակներ: Մոխրագույն արկղը բովանդակության տեսողական ներկայացում է, որը կհայտնվի համացանցում:
Քայլ 3. Փորձեք հիմնական ուրվագիծ ստեղծող ծրագիրը:
Կան տարբեր ծրագրեր, որոնք կարող եք օգտագործել հիմնական վեբ շրջանակ ստեղծելու գործընթացում: Վեբ ծրագրավորման կոդի (լեզվի) քանակը, որը պետք է յուրացնել, տարբեր է յուրաքանչյուր ծրագրի համար: Բավական հայտնի ծրագրերից մի քանիսը ներառում են.
- Նախշերի լաբորատորիա: Այս կայքը նվիրված է «ատոմային դիզայնին», յուրաքանչյուր բովանդակություն համարվում է «մոլեկուլ», որը կազմում է ավելի մեծ վեբ էջ:
- Jumpcharts. Այս վեբ էջը տրամադրում է վեբ վրա հիմնված պլանավորման և շրջանակման ծառայություններ: Այս կայքերը վճարովի են և պահանջում են բաժանորդագրություն, բայց դուք կարող եք արագ կառուցել վեբ շրջանակներ ՝ առանց վեբ ծրագրավորման շատ կոդերի տիրապետելու:
- Wirefy. Wirefy- ն այլ կայք է, որն առաջարկում է «ատոմային դիզայն»: Վեբ մշակողները կարող են գործիքը ստանալ անվճար:
Քայլ 4. Օգտագործեք պարզ HTML նշագրում:
Լավ հիմնական ձևանմուշը հեշտությամբ կվերածվի սկզբնական կայքի: Այս կաղապարը ստեղծելու ընթացքում շատ մի մտածեք վեբ ոճավորման մասին: Օգտագործեք նշագրում, որը կարելի է հեշտությամբ հասկանալ և փոխել:
Պարզ հիմնական շրջանակը շատ ավելի լավ է: Նշում ստեղծելու նպատակը կառույց կառուցելն է: Տեսողական տեսքը հետագայում կարող է ճշգրտվել CSS- ի և առաջադեմ նշման միջոցով:
Քայլ 5. Ստեղծեք հիմնական ուրվագիծ յուրաքանչյուր վեբ էջի համար:
Ձեզ կարող է գայթակղվել յուրաքանչյուր վեբ էջը հավասարեցնել մեկ հիմնական ուրվագծի: Փաստորեն, սա միայն կդարձնի ձեր կայքը պարզ և ձանձրալի: Ստեղծեք տարբեր ուրվագիծ յուրաքանչյուր էջի համար, կհասկանաք, որ յուրաքանչյուր էջ կարիք ունի իր ձևավորման:
Մաս 3 -ից 4 -ը. Բովանդակության ստեղծում
Քայլ 1. Նախքան վեբ էջ ստեղծելը պատրաստեք բովանդակությունը:
Շատ ավելի հեշտ կլինի ձեր վեբ դիտումը նախադիտելը, եթե արդեն ունեք իրական բովանդակություն `նմուշներ կամ տեղապահներ օգտագործելու փոխարեն: Անհրաժեշտ չէ չափազանց շատ բովանդակություն ունենալ, բայց ձեր ծաղրածուն շատ ավելի լավ տեսք կունենա, եթե օգտագործեք սկզբնական պատկերի պատճենը:
Պարտադիր չէ, որ ունենաք հոդվածի ամբողջ նյութը, բայց գոնե այն պետք է ունենա փաստացի վերնագիր:
Քայլ 2. Հիշեք, որ հիանալի բովանդակությունը միայն տեքստ չէ:
Ինտերնետը շատ ավելի բարդ է, քան տեքստի պարզ վեբ էջը: Այցելուներին գրավելու և հրավիրելու հիանալի կայք ստեղծելու համար ձեզ անհրաժեշտ է տարբեր բովանդակության բազմազանություն: Օրինակ:
- Նկար
- Ձայն
- Տեսանյութեր:
- Վեբ փոխանցում կամ վեբ հոսք (Twitter)
- Ֆեյսբուքյան ինտեգրում
- RSS
- Վեբ հոսք
Քայլ 3. Օգնություն խնդրեք պրոֆեսիոնալ լուսանկարչից:
Եթե ցանկանում եք լուսանկարներ ներառել ձեր կայքում, առաջին տպավորությունը, որ կստանաք ձեր կայքից, շատ ավելի լավ կլինի, եթե այն լցված լինի պրոֆեսիոնալ լուսանկարչությամբ: Մեկ լավ լուսանկարն արժե ավելի քան քսան ցածրորակ լուսանկար:
Փնտրեք լուսանկարչության արվեստի նոր շրջանավարտ ՝ որպես ավելի էժան լուծում, քան պրոֆեսիոնալ լուսանկարիչը, ով երկար ժամանակ զբաղվում էր այդ բիզնեսով:
Քայլ 4. Գրեք որակյալ հոդվածներ:
Վեբ էջում գրված բովանդակությունը կորոշի ձեր վեբ տրաֆիկի չափը: Թեև դիզայնի այս գործընթացում պետք չէ շատ անհանգստանալ բովանդակության ստեղծման համար, բայց ցավ չի պատճառի դրա մասին մտածելը, քանի որ ձեր կայքի գործարկումից հետո ձեզ նույնպես պարբերաբար անհրաժեշտ կլինի բովանդակություն:
Բացի հոդվածի բովանդակությունից, կա գրավոր նյութ, որը դուք նույնպես պետք է ունենաք վեբ էջ կազմելու գործընթացում: Օրինակ ՝ կոնտակտային տվյալները, ընկերության անվանումը կամ որևէ այլ բան, որը մի քանի անգամ կօգտագործվի կայքում:
Մաս 4 -ից 4 -ը. Հայեցակարգերը վեբ կայքերի վերածելը
Քայլ 1. Կազմակերպեք հիմնական տարրերը:
Այս տարրերի դասավորությունը վերաբերում է ձեր կայքի յուրաքանչյուր էջին, օրինակ ՝ վերնագրեր, ծանոթագրություններ և նավարկության ընտրացանկեր: Տեղադրեք այն շատ պարզ ոճով, որպեսզի կարողանաք ստուգել, թե ինչպես են բոլոր էջերը նայում: Սա հատկապես օգտակար է, երբ դուք անցնում եք վեբ դասավորության գործընթացին:
Շատ մի անհանգստացեք մանրամասների համար, փորձեք նախադիտել (նախադիտել), թե ինչ տեսք ունի վերնագիրը:
Քայլ 2. Ստեղծեք պարզ դասավորություն:
Սկսեք ՝ ժամացույցի դիրքը հիմնական ուրվագծային սյունակից տեղափոխելով էջի իրական վայր: Օրինակ, գուցե ցանկանաք նավարկության ընտրանքային ընտրացանկը տեղափոխել էջի ձախ մաս, իսկ վերնագրերի ցանկը ՝ աջ:
Շարունակեք փորձարկել բազմաթիվ էջերի վեբ դասավորություններ, մինչ հաջորդ քայլին անցնելը: Թույլ տվեք ուրիշներին նայել դրան ՝ տեսնելու, թե արդյոք ձեր ստեղծած դասավորությունը կենդանի է թվում:
Քայլ 3. Ստեղծեք նմանակ:
Օգտագործեք Photoshop- ի նման ծրագիր ՝ ձեր վեբ կայքի ծաղրեր կամ օրինակներ ստեղծելու համար: Որպես ուղեցույց օգտագործեք ձեր կազմած դասավորությունը: Դուք կարող եք ավելի արագ կատարել ծաղրուծանակներ և ստանալ ցանկալի արդյունքներ պատկերի մշակման ծրագրով: Այս պատկերների արդյունքները հետագայում կարող են օգտագործվել որպես հղում վեբ ծրագրավորման կոդի գրման գործընթացում:
Տեղադրեք իրական բովանդակությունը մակետի մեջ `այն լավ տեսք ունենալու համար:
Քայլ 4. Փոխարինեք օրինակելի հայեցակարգը բնօրինակ բովանդակությամբ:
Վեբ էջերին ավելացնել բովանդակություն և տարրեր: Առայժմ մի քրտնեք վեբ ոճի կարգավորումները, պարզապես ամեն ինչ տեղադրեք ճիշտ վայրում: Սա կօգնի ձեզ վերանայել վեբ ոճի փոփոխությունները, որոնք հետագայում կկատարեք:
Քայլ 5. Ստեղծեք վեբ ոճի ուղեցույց:
Շատ կարեւոր է պահպանել ոճերի խառնուրդ, հատկապես մեծ կայքերի համար: Եթե կայքը նախատեսված է բիզնես նպատակների համար և արդեն ունի իր ապրանքանիշը կամ ոճը, այն պետք է ներառվի կայքի ձևավորման մեջ: Վեբ էջի ոճի ուղեցույց ստեղծելիս պետք է հաշվի առնել.
- Նավիգացիա
- Գլխավոր նշում
- Պարբերություն
- Շեղագիր բնույթ
- Համարձակ բնավորություն
- Հղումներ (ակտիվ, անգործուն, սավառնել)
- Պատկերի օգտագործումը
- Սրբապատկեր
- Բռնակ
- ցուցակ
Քայլ 6. Կիրառեք վեբ ոճը:
Երբ կգտնեք ճիշտ ոճն ու դիզայնը, իրականացրեք այն: CSS- ը վեբ էջում կամ ամբողջ կայքում ոճեր ներդնելու ամենահեշտ ձևերից մեկն է: CSS- ի օգտագործման մանրամասներն ավելի լավ հասկանալու համար տե՛ս հետևյալ հրահանգները:
