Smer vizualne vsebine Kaj morate vedeti
The vizualna smer vsebine je manj široko razpravljal, vendar je ključen vidik visoko oblikovanega spletnega oblikovanja. Vsak obiskovalec "vpije" novo spletno stran na prvi strani - ne glede na to, ali to storijo zavestno ali ne.
Estetika igra pomembno vlogo, vendar je več o tem splošni občutek oblikovanja. Na ta občutek lahko vplivajo presledki, tipografija, simetrija, večinoma odnosov med elementi strani.
Oblikovalci si želijo obiskovalcev ostanite na strani in neprekinjeno se premikajte z zajemanjem njihove pozornosti in njihovo zanimanje za spletno mesto. Načela oblikovanja se morajo vedno osredotočiti pred funkcijo. To pomeni, da mora biti načrtovanje dopolnjujejo vsebino, ne vtisnite ga v zameno.
V tej objavi vam želim pokazati nekaj nasvetov o tem, kako lahko izboljšate svoje postavitve in vizualne vsebine na vašem spletnem mestu.
Osredotočite se na sestavo
Vsak posamezen del spletne strani gradi na celotno postavitev. Ta splošna postavitev ustvari kompozicijo, ki sledi pravilom geštaltske teorije, ki to navaja celota je vedno večja od vsote delov.
Posamezna področja strani se združijo v oblikujejo celoto. Elementi oblikovanja morajo zgraditi a gravitacijsko vlečenje o vsebini; vse na strani seveda vodijo obiskovalce navzdol, dokler ne dosežejo dna strani.
Zato so odnosi med različnimi deli vsebine (vizualni, besedilni, gumbi itd.) Zelo pomembni za oblikovanje.
Vaš cilj bi moral biti spodbujanje ljudi brskanje po spletnem mestu iz lastne naklonjenosti. Lažje je reči kot narediti, vendar se lahko veliko naučite preučevanje resničnih primerov.
Domača stran za Monkop je odličen primer vizualne hierarhije besedilo in sliko. Med elementi se uporablja veliko prostora, tipografija pa dopolnjuje blagovne znamke vektorskih ilustracij.
Ko se pomikate, boste opazili ravne horizontalne strani deljeno z barvami, obrobo in grafiko. Ti so zgrajeni z vzorce oblikovanja v mislih doslednost ponudbe strani.
Proti dnu boste našli razdelitev v dveh stolpcih s slikami na eni strani, besedilom na drugi strani. Tudi slike zamenjave v vzorcu levo-desno-levo. To opozarja, in razbije monotonijo med običajno stranjo ohranjanje naravnega toka vsebine.
A podoben estetski dizajn lahko najdete na spletni strani Picjumba, ciljne strani za fotografski dodatek za uporabnike Photoshop in Sketch.
Domača stran se osredotoča na logotip in predogled videa. Ko se pomikate, boste opazili prilagojene animacije, ki se premikajo po strani. Ta animacija resnično pritegne pozornost, in dobi gledalca zainteresirani, da se premikate.
Na splošno se stran počuti odprto in enostavno brskanje. Vsebina je razdeljena na horizontalne bloke z ostro tipografijo in čistimi ikonami.
Razmislite o različnih elementih strani skupaj, prostor med elementi, kontrast med barvami in različne oblike. Vse te stvari igrajo vlogo v celotni kompoziciji. Vsako spletno mesto seveda vsebuje določeno težo na vsebino.
Ni absolutnega odgovora, ker je za vsako spletno mesto drugačen. Na primer, nekatere povezave za navigacijo izgledajo bolje, ko so velike in prevelike. Drugi se bolje prilegajo, ko so majhna z velikimi črkami.
Predlagam, da preučite druge spletne strani v vaši niši. Resnično analizirajte, kako so sestavljeni. Poskusite znova zgraditi postavitve, da vidite, kateri elementi so končno oblikovali "skupaj".
Zadeva tipa Design
Način oblikovanja vaše tipografije bo vplivajo na smer vsebine na vašem spletnem mestu. To je povezano s hierarhijo tipov in slogi oblikovanja različnih elementov strani kot so odstavki, glave, seznami z označbami, kotacije in posebni elementi postavitve, kot so stolpci ali tabele.
Vizualije lahko vpliva tudi na postavitev, zato je dobro oblikovati vsebino z naravnim napredovanjem. Napišite vsebino na način, ki teče po strani, in ljudje berejo vsakem odstavku.
Največje orodje, ki ga imate na voljo, je za oko. Naučite se prepoznati razlike v tipografskih elementih in kako se nanašajo na druge elemente strani. Ustvarite povezave med razdelki strani, da ločite področja vsebine.
Nekaj stvari, ki jih lahko upoštevate:
- Velikost besedila
- Družina pisav
- Barvni kontrast
- Odseki strani
- Višina vrstice in robovi odstavkov
- Razmik med črkami in zgornje / male črke
Oglejte si na primer domačo stran Monitorja akcije. Zgornje navigacijske povezave uporabljajo vse kape z majhnimi črkami. Druge glave na strani sledite tem istim dizajnom vseh kape ki ustvarja občutek enotnosti.
Druge večje glave na spletnem mestu so veliko bolj izrazito, in res skočijo s strani. Samo s pregledovanjem značilnega oblikovanja glave bi moralo biti enostavno povejte razliko med glavo in njegovo seznanjeno kopijo telesa.
Slogi tipografskega oblikovanja v Monitorju akcije so odlični in ti naravno se razporedi v postavitev. Da bi dosegli takšen rezultat, je potrebno prakso, toda bolj ko poskušate, lažje bo.
Če želite izvedeti več o tem, vam priporočam naslednje povezave:
- Načela načrtovanja: vidna teža in smer
- Delo z vizualno težo v vaših modelih
- 19 Dejavniki, ki vplivajo na sestavo sestavine
Vodilna vsebina
Razumite to različne vrste spletnih strani imajo različne metode za vodenje obiskovalcev preko spletnega mesta. Na primer ciljne strani želijo voditi obiskovalce informacije, majhne ikone, posnetki zaslona, in pričevanja.
Druga spletna mesta, kot so blogi, običajno ne pripeljejo ljudi na domačo stran naenkrat. Večina ljudi zemljišča na strani članka, tako so postavitve bloga namenjene označite naslov, in pripravi ljudi vsebine. To je, če kakovostno pisanje prihaja v igro, ker želite bralcev visi off vsako besedo.
Potrebujejo socialna omrežja in spletne aplikacije kakovostno uporabniško izkušnjo, Torej je to nekoliko drugačna tema, vendar razmislite, kako je namenjen vir Facebooka spodbujanje pomikanja in interakcije med uporabniki.
Načini načrtovanja, ki jih uporabljate, da bodo ljudje brskali po spletnem mestu, bodo sčasoma. Toda na splošno je vaš cilj obiskovalce s smerjo vizualne vsebine.
Poglejmo si a Ciljna stran in a oblikovanje bloga da bi opazili razlike.
Kaktus je statični generator spletnega mesta za OS X. Njihova domača stran tesno sledi oblikovalskemu slogu Applea - veliko presledkov in tankih pisav sans-serif.
Vsebina je organizirana v stolpce, bloke in dele besedila s preprosto grafiko. Te iste estetike so skupna z izdelki Apple, Tako bodo uporabniki Mac-a uživali v tem slogu oblikovanja.
Informacije o izdelku - vključno s funkcijami in nastavitvami - so navedene na domači strani. Stran sama spodbuja drsenje z edinstveno vsebino, osnovnimi ikonami in izmeničnim vzorcem stolpcev levega / desnega vsebinskega bloka.
Cilj je zagotoviti informacije obstoječih uporabnikov, in prodati novih uporabnikov idejo o kaktusu.
Zdaj primerjajte to zasnovo z domačo stranjo za The Next Web. Vsebina je veliko bolj občasno na domači strani spletnega dnevnika, ker obstaja veliko različnih tem.
Pravokotniki ustvarjajo mrežni sistem, ki povzema več objav v eno postavitev. Cilj je v tem uporabnikom omogočite branje vsebine na strani. Ni pomembno, če obiskovalci kaj prenesejo, vendar je pomembno, če so držite se, da bi prebrali nekaj.
Način, kako lahko ljudje berejo, je z odlične fotografije in privlačnih naslovov. TNW to veliko opravi in njihova razporeditev je zgrajena za brskanje ljudi s sorodnimi sličicami za objavo v območju stranske vrstice in po vsebini.
Vodenje obiskovalcev do določene akcije je različno na vsaki strani. Lahko pa se veliko naučite s preučevanjem drugih uspešnih strani in učenjem kopiranja.
Zaupajte svojim očem
Posamezne oblikovne lastnosti lahko razložimo analitično, vendar se spremembe za vsako lokacijo spremenijo. Slika junaka s povezavo "Pomik naprej" ne deluje enako na vseh spletnih straneh.
Učenje oblikovanja je zelo veliko vizualni proces. Vaše oko za oblikovanje je najpomembnejši vidik. Moraš pravilno videli stvari da to ugotovite vizualna hierarhija. Če si ga lahko ogledate na drugih spletnih mestih, ga boste lahko posnemali na svojih spletnih mestih.
Najboljši nasvet je, da Samo zaupaj svojim očem. Ustvarite seznam priljubljenih spletnih mest in preživite vsakih 5 minut. Zapišite svoje najljubše elemente na stran in kako vplivajo na oblikovanje. To vam bo pomagalo internalizirajte te koncepte z vidika uporabniškega vmesnika / UX, raje kot uporabnikovo perspektivo.
Prav tako se ne bojte poskusiti stvari! Nihče ni bil dober pri oblikovanju prav z branjem člankov o oblikovanju. Da, pomagajo - dejansko lahko veliko pomagajo. Ampak ti potrebujejo do ustvarite stvari iz nič, da se naučite kaj dela in kaj ne.
Trenirajte svoje oči s preučevanjem postavitev spletnega mesta, ki vam je všeč, in jih ponovno ustvarite. Sčasoma boste ustvarili knjižnico vzorcev, kar bo olajšalo oblikovanje novih spletnih mest.
Zavijanje
Upajmo, da bodo ti nasveti začeli in vam dali osnovni načrt za spremljanje. To ni lahko postati spletni oblikovalec, vendar svet ne potrebuje talenta in nikoli ni bilo lažje naučiti se teh temeljnih konceptov.
Študija najboljši primeri spletnih strani z elementi strani, ki jih uživate. Vlak zaznavati odnose in hitro razviti potrebne spretnosti ponovite odnosov v svojem delu.
