Կայքի ֆոնը կարծես շնչառություն լինի։ Դրանք մեր առօրյա կյանքի մի մասն են կազմում, բայց մենք երբեք բավականաչափ ուշադրություն չենք դարձնում դրանց, քանի դեռ ակնհայտ սխալ չկա: Եվ ինչպես յուրաքանչյուր շնչառություն, կայքի ֆոնը ձեր կայքի հաջողության և կյանքի անբաժանելի մասն է. դրանք ստիպում են ձեր կայքի բոլոր մյուս մասերն ավելի լավ աշխատել:
Որո՞նք են կայքի նախապատմությունները:
Կայքի ֆոնը պատկերներ են, շաղ տալ գույն կամ դիզայն, որոնք լրացնում են ձեր կայքի էկրանը։ Նաև հաճախ այցելուի առաջին տպավորությունն է, որ թողնում է ձեր կայքում: ապրանքանիշ և բիզնես, ուստի կարևոր է, որ դուք ճիշտ հասկանաք: Կատարյալ ֆոնը կփոխանցի ձեր ապրանքանիշի պատմությունը, մինչդեռ սխալը կարող է դեն նետել ձեր հաղորդագրությունը: Ձեր կայքը նման է այն հագուստին, որը դուք կկրեք աշխատանքի հարցազրույցի կամ առաջին ժամադրության ժամանակ: Դուք պատրաստվում եք զվարճալի և մատչելի տեսք ունենալ կամ ինչ-որ բարդ և բացառիկ բան:
Իրականում, վեբ դիզայնի այս թվացյալ հիմնական ասպեկտում շատ ավելին կա, քան դուք կարող եք մտածել: Դա բավարար չէ, որպեսզի ձեր կայքի ֆոնը պարզապես լավ տեսք ունենա: Ճիշտ այնպես, ինչպես երբ գնում եք առաջին ժամադրության կամ աշխատանքի հարցազրույցի, դուք պետք է համոզվեք, որ պատմում եք ձեր պատմությունը, հաստատեք, որ ձեր հանդիպման վայրը հասանելի է և համոզվեք, որ դիմացինը վայելում է իր փորձը ձեզ հետ: Նմանապես, ակնկալվում է, որ վեբ կայքի նախապատմությունը կապահովի լավ օգտագործողի փորձ (UX) և ընթեռնելի ձեր լսարանի համար:
Կայքի հիմունքներ
Նախքան խորհուրդների մեջ մտնելը, կարևոր է, որ հիմնականը հանվի:
Հանդիպեք երկու տեսակի վեբ կայքի նախապատմություններին
Մարմնի ֆոն.
Մարմնի ֆոնն այն տարածքն է, որը ծածկում է էկրանի մեծ մասը: Այստեղ դուք կգտնեք ֆոներ, որոնք բաղկացած են նկարազարդումներից, հյուսվածքներից, ամբողջական պատկերներից կամ գունավոր գրադիենտներից: Հաճախ դա պարզապես սպիտակ է:
Ֆոնային բովանդակություն. Կայքի նախապատմություն.
Բովանդակության ֆոնը չի ընդգրկում ամբողջ էկրանը, այլ ավելի շուտ շրջապատում է այլ բաժինների շրջակայքը, օրինակ՝ պատկերը կամ տեքստը: Սա կառուցվածք է տալիս և օգնում է ընդգծել և առանձնացնել կայքի տարբեր բաժինները:
Պայծառ գարեջրի ապրանքանիշ
Հետաքրքիր բովանդակություն
Լրացուցիչ ժողովրդականության համար օգտագործեք վերնագրերը
Ձեր վերնագիրը ձեր էջի վերևն է և ձեր կայքի անհատականությունը ցուցադրելու կարևոր միջոց է: Սա հիանալի վայր է աչքի գրավիչ տարրեր օգտագործելու համար, ինչպիսիք են նկարազարդումները կամ գույնի շիթը, քանի որ այն հավանաբար չի շեղի հիմքում ընկած բովանդակությունից:
Կայքի գրավիչ վերնագիր
Ուշադրություն դարձրեք հակադրությանը
Համոզվեք, որ հաշվի եք առնում գունային հակադրությունը: Սխալ հակադրությունը կարող է դժվարացնել ձեր կայքի բովանդակությունը՝ դարձնելով այն այցելուների համար անհասանելի, ուստի համոզվեք, որ ստուգեք ձեր հակադրության հարաբերակցությունը:
Գնալ գրաֆիկա: Կայքի նախապատմություն
Գրաֆիկական տարրերի օգտագործումը ձեր կայքին տալիս է տարբերակիչ տեսք և պատմում է մի պատմություն՝ օգտագործելով միայն վիզուալներ: Բայց համոզվեք, որ գրաֆիկական տարրերի օգտագործման ոճը համընկնում է ձեր կայքի ընդհանուր ոճին, որպեսզի օգտվողներին ապահովեք հետևողական փորձ:
Կայքի ոճային ֆոն՝ գրաֆիկական տարրերով
Ընդլայնեք ձեր ֆոնը
Սպիտակ կայքերի ֆոնը պարզ և հավերժական ընտրություն է: Բայց վեբ դիզայնի ամբողջական ֆոնը (օրինակ՝ գրադիենտի, ամբողջական պատկերի կամ գունավոր պինդ բլոկի օգտագործումը) կարող է հսկայական ազդեցություն ունենալ ճիշտ կատարման դեպքում: Համոզվեք, որ պատկերը չափազանց պայծառ կամ մուգ կետեր չունի, որպեսզի այն չշեղի ձեր բովանդակությունից: Դուք ցանկանում եք, որ ձեր օգտվողները կարողանան հեշտությամբ և ակնթարթորեն կարդալ այն, ինչ ձերն է գործ.
Կայքի ամբողջական տեքստը
Ողջույն ասեք կարևոր իրադարձություններին
Կարևոր կետերը (շատ բարակ գծեր, որոնք բաղկացած են տարբեր գույներից ձեր կայքի առանձին հատվածների համար) օգնում են կոտրել մոնոխրոմատիկ բլոկները և բարելավել ընթերցանությունը:
8 խորհուրդ՝ կայքի կատարյալ ֆոն ստեղծելու համար
1. Օգտագործեք խելացի գունային ինտերֆեյս
Գույների և գունային համակցությունների ընտրությունը, երբ խոսքը վերաբերում է վեբ դիզայնի ֆոնին, կարևոր է, քանի որ դրանք նպաստում են այն բանին, թե ինչպես օգտվողները կկարդան ձեր կայքը: Վեբ դիզայնի գույնը կարող է օգնել գրավել ուշադրությունը, զգացմունքներ առաջացնել, ցանկություններ առաջացնել, ուշադրություն գրավել և օգտատերերի հավատարմություն ձեռք բերել:
Կայքի կարմիր ֆոն
2. Դարձրեք ձեր ֆոնային պատկերը գերընթեռնելի: Կայքի նախապատմություն
Կատարյալ ֆոնային պատկերը պետք է լավ տեսք ունենա, բայց ավելի կարևոր է, որ այն պետք է հիանալի տեսք ունենա: Իմաստ չկա ձեր կայքի համար գեղեցիկ ֆոնային պատկեր ընտրելը, եթե չկարողանաք կարդալ դրա վերևի տեքստը: Եթե դուք գտել եք կատարյալ պատկեր, բայց ձեր տեքստը բովանդակության վերևում ընթեռնելի չէ, փորձեք օգտագործել ծրագրակազմը լուսանկարների խմբագրում կամ CSS՝ փոխելու այնպիսի բաներ, ինչպիսիք են հակադրությունը, անթափանցիկությունը կամ նույնիսկ շերտերի դիմակներ ավելացնել: Եթե դա չի օգնում, փորձեք ընտրել ճիշտը տիպ և բուն բովանդակության համար նախատեսված տառաչափը:
Cidery կայքի ֆոնային պատկեր Gotza-ից հեշտ ընթերցվող տառատեսակով
3. Տվեք ֆոնի ամուր գույն
Լուսանկարը հարմար չէ ձեր կայքին: Ինչու չփորձեք օգտագործել մեկ միասնական գույն ձեր կայքի ֆոնի համար: Սա սովորաբար հիանալի միջոց է ապահովելու ձեր վեբկայքը ընթեռնելի, քանի դեռ հակադրությունը ճիշտ է: Պարզապես համոզվեք, որ գույնը համապատասխանում է ձեր ապրանքանիշին: արդյունաբերությունը և տպավորությունը ձեր բիզնեսի մասին. Օրինակ, տաք գույները, ինչպիսիք են կարմիրը և վարդագույնը, էներգետիկ ազդեցություն են ունենում օգտատիրոջ վրա և կարող են օգտակար լինել ֆիթնես ապրանքանիշերի համար, մինչդեռ սառը գույները, ինչպիսիք են կանաչը և կապույտը, հակված են հանգստացնող ազդեցություն ունենալ և իրականում ամենատարածված գույներն են, որոնք օգտագործվում են կայքերում:
Vegan խոհանոց. Կայքի ֆոնի ամուր գույն
4. Խուսափեք զբաղված ու խառնաշփոթ պատկերներից
Սա հատկապես կարևոր է պատկերի վրա տեքստ ավելացնելիս: Նույնիսկ եթե ցանկանում եք ընտրել ձեր կայքի համար տպավորիչ պատկեր, այն չպետք է շեղի այն հաղորդագրությունից և պատմությունից, որը ցանկանում եք պատմել: Օրինակ, լանդշաֆտները կարող են ստեղծել գերազանց վեբկայքերի ֆոնային պատկերներ, քանի որ դրանք գրավիչ են և ոչ խառնաշփոթ:
Մաքուր կայքի ֆոն
5. Դարձրեք այն նորաձեւ
Կայքի ֆոն, որը ձգտում է դարձնել ձեր կառուցվածք ժամանակակից և նոր. Փորձեք օգտագործել վեբ դիզայնի ամենամեծ միտումներից մի քանիսը, երկրաչափական ձևերը, ընկղմվող 3D տարրերը, փայլուն, փայլուն գունային սխեմաները, մուգ ռեժիմը կամ օգտագործելը Պանտոնի գույներ տարիներ իր դիզայնով: Պարզապես հիշեք, որ ինչ-որ նորաձև բան օգտագործելը հավերժական դիզայնում կարող է նշանակել, որ դուք ստիպված կլինեք թարմացնել ձեր ֆոնը ավելի շուտ, քան ուշ:
Կայքի ձանձրալի մութ ֆոն
6. Կատարեք անիմացիա: Կայքի նախապատմություն
Կայքի անիմացիոն ֆոնն իսկապես լավ միջոց է ձեր կայքը կյանքի կոչելու համար: Պարզապես համոզվեք, որ անիմացիան նուրբ է, որպեսզի այն չշեղի հիմնական պատկերից կամ հաղորդագրություններից կամ դուրս չգա դիզայնի առաջին պլանից: Քանի որ անիմացիան ունի նման էներգետիկ զգացողություն, լավ գաղափար է ներառել նուրբ գունային գունապնակ:
7. Գնացեք գրադիենտով: Կայքի նախապատմություն
Այո, 90-ականների միտումները վերադառնում են, ներառյալ այն, որը փոթորկեց դիզայնի աշխարհը՝ գրադիենտները: Նաև հայտնի է որպես գունային անցումներ, գրադիենտները մի գույնի աստիճանական միաձուլումն են մյուսի մեջ: Դրանք տեսողականորեն գրավիչ են և կարող են օգտագործվել որպես առանձին ֆոն կամ շերտավորվել լուսանկարի վրա՝ ձեր կայքը իսկապես փոփ դարձնելու համար:
Գրադիենտ կայքի ֆոն
8. Դարձրեք այն շարժական: Կայքի նախապատմություն
Մենք 2020 թվականին ենք։ Նույնիսկ եթե դուք զարգացնում եք ձեր կայքը աշխատասեղանի համակարգչի վրա, ճշմարտությունն այն է, որ առցանց բովանդակության մեծ մասը սպառվում է դրա միջոցով շարժական սարքեր. Համոզվեք, որ հաշվի եք առնում կայքի հետևյալ պատվիրանները՝ ձեր կայքը բջջային հեռախոսով հարմարավետ դարձնելու համար.
- Դարձրեք ձեր կայքը պատասխանատու:
- Դարձրեք մարդկանց փնտրած տեղեկատվությունը ավելի հեշտ գտնելու համար:
- Մի օգտագործեք Flash-ը:
- Ներառեք տեսադաշտի մետա թեգը:
- Միացնել ձևաթղթերի ավտոմատ լրացումը:
- Ձեր կոճակների չափերը բավականաչափ մեծ դարձրեք՝ բջջային հեռախոսով հարմարավետ աշխատելու համար:
- Օգտագործեք մեծ չափս տառատեսակ.
- Սեղմեք ձեր պատկերները և CSS-ը:
Կայքի ֆոնային պատկեր ընտրելիս համոզվեք, որ ընտրել եք այնպիսի պատկեր, որը լավ կտարածվի փոքր էկրանների համար: Օրինակ, իսկապես լայն պատկերը կարող է չաշխատել շարժական սարքի վրա:
Բջջային բարեկամական կայքի նախապատմություն
Ինչպես ստանալ ձեր երազանքների նախապատմությունը կայքում: Կայքի նախապատմություն
Ճիշտ ֆոն ընտրելը կարող է ձեր կայքը միջակից հասցնել հիանալիի: Հիշեք, որ օգտագործողի փորձը ամեն ինչ է, ուստի ընտրեք գույներ և պատկերներ, որոնք խոսում են ձեր այցելուների հետ, և համոզվեք, որ կայքի ֆոնային պատկեր ընտրելիս կարող եք հեշտությամբ կարդալ դրա վերևի տեքստը:
Հաշվի առեք ամուր ֆոնային գույները, ամեն գնով խուսափեք խառնաշփոթ պատկերներից և մտածեք ներառելու այնպիսի միտում, ինչպիսին է գրադիենտը կամ երկրաչափական ձևը՝ ժամանակակից և ժամանակակից մնալու համար: Փորձեք ձեր ուժերը անիմացիայի մեջ, եթե իսկապես ցանկանում եք առանձնանալ ամբոխից և միշտ ընտրեք այնպիսի ֆոն, որը լավ է չափվում փոքր էկրանների համար:
Ամենակարևորը՝ հիշեք, որ դիզայնում հստակ կանոններ չկան։ Իրականում, լավագույն նմուշները հաճախ չեն հետևում որևէ կանոնի: Ամենակարևորը ձեր օգտագործողի փորձն է: Օգտագործեք այս խորհուրդները որպես ելակետ և մի վախեցեք վստահել ձեր գեղարվեստական ռեֆլեքսներին:
ՀՏՀ։ Կայքի նախապատմություն.
1. Ինչու՞ է կարևոր կայքի ֆոնը:
Կայքի նախապատմությունը կարևոր է, քանի որ.
- Ստեղծում է առաջին տպավորությունՀետին պլանն առաջին բանն է, որ այցելուը տեսնում է և սահմանում է ամբողջ կայքի երանգը:
- Ազդում է բովանդակության ընկալման վրաՆախապատմությունն օգնում է ընդգծել հիմնական բովանդակությունը և բարելավել ընթերցանությունը:
- Արտացոլում է ապրանքանիշըՖոնը կարող է փոխանցել ապրանքանիշի արժեքներն ու ոճը՝ ստեղծելով համահունչ տեսողական ինքնություն:
2. Ինչ տեսակի ֆոներ կարող են օգտագործվել կայքում:
Կան տարբեր տեսակի ֆոն.
- Կոշտ գույներՊարզ և մինիմալիստական, հարմար է կայքերի մեծ մասի համար:
- ԳրադիենտներԳույների միջև անցումներն ավելացնում են խորություն և դինամիկա:
- ИзображенияԼուսանկարներ կամ նկարազարդումներ, որոնք կարող են ուժեղացնել տեսողական էֆեկտը:
- VideoԴինամիկ ֆոն, որը կարող է ուշադրություն գրավել և յուրահատուկ տպավորություն ստեղծել:
- Հյուսվածքներ և նախշերԱվելացրեք հետաքրքրությունը և կարող է ուժեղացնել տեսողական ընկալումը:
3. Ինչպե՞ս ընտրել կայքի համար հարմար ֆոն:
Նախապատմություն ընտրելիս հաշվի առեք.
- Կայքի նպատակներըՈրոշեք, թե ինչպիսի մթնոլորտ եք ցանկանում ստեղծել և ինչպես կարող է ֆոնը աջակցել դրան:
- Целевая аудиторияՀաշվի առեք ձեր լսարանի նախասիրությունները և ակնկալիքները:
- ԸնթեռնելիությունՀամոզվեք, որ ֆոնային տեքստը հեշտ է կարդալ:
- Ապրանքանիշի համապատասխանությունՆախապատմությունը պետք է համապատասխանի ձեր ապրանքանիշի ոճին և արժեքներին:
- Ներբեռնման արագությունՀամոզվեք, որ ֆոնը չի դանդաղեցնում կայքի բեռնումը:
4. Ինչպե՞ս ֆոնը դարձնել ընթեռնելի:
Ընթեռնելիությունը բարելավելու համար.
- Օգտագործեք հակապատկեր գույներԸնտրեք տեքստի և ֆոնի գույները բավարար հակադրությամբ:
- Ավելացրեք ծածկույթՊատկերների վերևում կիսաթափանցիկ ծածկույթները կարող են բարելավել տեքստի ընթեռնելիությունը:
- Ընտրեք պարզ նախադրյալներԲարդ և զբաղված ֆոնները կարող են ուշադրությունը շեղել հիմնական բովանդակությունից:
5. Ի՞նչ գործիքներ կարող եք օգտագործել ֆոն ստեղծելու համար:
Հանրաճանաչ գործիքները ներառում են.
- Adobe Photoshop և IllustratorՊատկերներ և գրաֆիկա ստեղծելու և խմբագրելու համար:
- CanvaԱռցանց գրաֆիկայի ստեղծման գործիք, սկսնակների համար հարմար:
- Figma և SketchԻնտերֆեյսի ձևավորման ծրագրեր, որոնք թույլ են տալիս ստեղծել ֆոն և դասավորություն:
- CSSԿոդով գրադիենտներ և այլ ֆոնային էֆեկտներ ստեղծելու համար:
6. Ինչպե՞ս օպտիմիզացնել պատկերները ֆոնի համար:
Պատկերները օպտիմալացնելու համար՝
- Սեղմել ֆայլերըՕգտագործեք անկորուստ սեղմման գործիքներ, ինչպիսիք են TinyPNG կամ ImageOptim:
- Ընտրեք ճիշտ ձևաչափըJPEG լուսանկարների համար, PNG՝ թափանցիկությամբ պատկերների համար, SVG համար վեկտորային գրաֆիկա.
- Անհատականացրեք չափերըՀամոզվեք, որ պատկերները համապատասխանում են էկրանի չափին՝ գերբեռնումից խուսափելու համար:
7. Ինչպե՞ս օգտագործել տեսանյութը որպես ֆոն:
Տեսանյութն օգտագործելու համար.
- Ընտրեք կարճ և հեշտ տեսանյութերՏեսանյութերը չպետք է դանդաղեցնեն կայքի բեռնումը:
- Անջատեք ձայնըՖոնային տեսանյութերը սովորաբար ցուցադրվում են առանց ձայնի՝ օգտատերերի ուշադրությունը չշեղելու համար:
- Ավելացրեք ծածկույթԿիսաթափանցիկ ծածկույթը կարող է բարելավել տեսանյութի տեքստի տեսանելիությունը:
8. Ինչպե՞ս ֆոնը դարձնել հարմարվողական:
Պատասխանատու ֆոնի համար.
- Օգտագործեք լրատվամիջոցների հարցումներըCSS մեդիա հարցումները կօգնեն ձեզ հարմարեցնել ձեր ֆոնը տարբեր էկրանների և սարքերի համար:
- Օգտագործեք համաչափ չափսերՀամոզվեք, որ ֆոնային պատկերները և տեսանյութերը չափված են ձեր էկրանի չափին համապատասխան:
- Փորձարկում տարբեր սարքերի վրաՍտուգեք, թե ինչպես է ֆոնի տեսքը շարժական սարքերի, պլանշետների և համակարգիչների վրա:
9. Ինչ սխալներից պետք է խուսափել ֆոն ընտրելիս:
Խուսափեք հետևյալ սխալներից.
- Ֆոնը չափազանց բարդ էԿարող է շեղել ուշադրությունը հիմնական բովանդակությունից:
- Անբավարար հակադրությունՏեքստը կարող է դժվար կարդալ ցածր հակադրություն ունեցող ֆոնի վրա:
- Մեծ ֆայլերԿարող է դանդաղեցնել կայքի բեռնումը և բացասաբար ազդել օգտատերերի փորձի վրա:
- Անհամապատասխանություն ապրանքանիշի հետՖոնը պետք է ներդաշնակ լինի ձեր ապրանքանիշի ընդհանուր ոճին և ուղերձին:
10. Ինչպե՞ս փորձարկել ֆոնը տարբեր սարքերի և բրաուզերների վրա:
Փորձարկման համար.
- Օգտագործեք մշակողի գործիքներԶննարկիչներն ունեն ներկառուցված գործիքներ՝ արձագանքելու և բրաուզերի համատեղելիությունը ստուգելու համար:
- Փորձարկում իրական սարքերի վրաԴիտեք կայքը մի շարք շարժական սարքերի, պլանշետների և համակարգիչների վրա:
- Օգտագործեք էմուլյատորներ և սիմուլյատորներԳործիքներ, ինչպիսիք են BrowserStack-ը կամ Sauce Labs-ը, թույլ են տալիս փորձարկել ձեր կայքը տարբեր սարքերի և բրաուզերների վրա:
Թողնել Մեկնաբանություն
Դուք պետք է լինի մուտք Ամսաթիվ մեկնաբանություն.