Vizualni smjer sadržaja što trebate znati
vizualni smjer sadržaja je manje široko raspravlja, ali ključni aspekt visoko-pretvoriti web dizajn. Svaki posjetitelj "upija" novu stranicu na opterećenju prve stranice - bilo da to rade svjesno ili ne.
Estetika igra ulogu, ali to je više o ukupni dojam dizajna. Na taj osjećaj može utjecati razmak, tipografija, simetrija, ali uglavnom odnosa između elemenata stranice.
Dizajneri žele posjetitelje ostanite na stranici i nastavite se pomicati tako što će privući njihovu pažnju i zainteresirati ih za web-lokaciju. Načela dizajna uvijek se trebaju usredotočiti na funkciji prije oblika. To znači da dizajn treba dopuniti sadržaj, ne ugurajte ga kao naknadnu misao.
U ovom postu želim vam pokazati nekoliko savjeta o tome kako možete poboljšajte izgled i tijek vizualnog sadržaja na vašoj web-lokaciji.
Usredotočite se na sastav
Svaki pojedinačni dio web-lokacije se gradi na cjelokupni izgled. Ovaj cjelokupni izgled stvara kompoziciju koja slijedi pravila geštalt teorije koja to navodi cjelina je uvijek veća od zbroja dijelova.
Pojedinačna područja stranice dolaze zajedno čine cjelinu. Elementi dizajna trebaju izgraditi gravitacijsko privlačenje o sadržaju; sve na stranici naravno vodite posjetitelje dalje sve dok ne dosegnu dno stranice.
Zato su odnosi između različitih dijelova sadržaja (slike, tekstovi, gumbi, itd.) Toliko bitni za dizajn.
Vaš bi cilj trebao biti poticanje ljudi pregledavati web-lokaciju iz vlastite sklonosti. Lakše je reći nego učiniti, ali možete mnogo toga naučiti proučavanje stvarnih primjera.
Početna stranica za Monkop odličan je primjer vizualne hijerarhije teksta i slike. Između elemenata koristi se mnogo prostora, a tipografija nadopunjuje brendirane vektorske ilustracije.
Dok se pomičete, primijetit ćete ravne horizontalne stranice blokova podijeljeno po bojama, granicama i grafici. One su izgrađene dizajn uzoraka na umu ponuditi dosljednost na cijeloj stranici.
Prema dnu, naći ćete podijeljena u dva stupca sa slikama na jednoj strani, tekst na drugoj. Slike također swap strane u uzorku lijevo-desno-lijevo. To privlači pozornost, i razbija monotoniju tipične stranice dok je još održavanje prirodnog toka u sadržaju.
sličan estetski dizajn može se naći na web-mjestu Picjumbo, odredišnoj stranici za foto-dodatak za korisnike Photoshopa i Skica.
Početna stranica stavlja naglasak na logotip i video za pregled. Dok se pomičete, primijetit ćete prilagođene animacije koje se pomiču po cijeloj stranici. Ova animacija stvarno bilježi pozornost, i dobiva gledatelja zainteresirani za pomicanje.
Sve u svemu, stranica se osjeća otvorena i jednostavno pregledavanje. Sadržaj je podijeljeni u horizontalne blokove s oštrom tipografijom i čistim ikonama.
Uzmite u obzir različite elemente stranice ravnotežu, prostor između elemenata, kontrast između boja i različiti oblici. Sve ove stvari igraju ulogu u ukupnom sastavu. Svaka stranica prirodno privlači određenu težinu na sadržaj.
Nema apsolutnog odgovora jer je različit za svaku web lokaciju. Na primjer, neke veze za navigaciju izgledaju bolje kad su velike i prevelike. Drugi se bolje uklapaju kad su mala s velikim slovima.
Predlažem vam da proučite druge web-lokacije u svojoj niši. Stvarno analizirajte kako se sastavljaju. Čak i pokušajte ponovno izgraditi rasporede da biste vidjeli koji elementi konačno čine dizajn "okupljenima".
Pitanja vezana uz dizajn
Način na koji ćete dizajnirati svoju tipografiju utjecati na smjer sadržaja na vašoj web-lokaciji. To ima veze s hijerarhijom i tipom stilovi dizajna različitih elemenata stranice kao što su paragrafi, zaglavlja, popisi s grafičkim oznakama, citati i posebni elementi izgleda kao što su stupci ili tablice.
Vizualni može utjecati i na izgled, pa je dobro dizajnirati sadržaj s prirodnom progresijom. Pišite sadržaj na način koji teče niz stranicu, i čuva ljude u čitanju kroz svaki odlomak.
Najveći alat koji imate na raspolaganju je oko za dizajn. Saznajte kako prepoznati razlike u tipografskim elementima i kako se one odnose na druge elemente stranice. Stvorite odnose između odjeljaka stranice kako biste razlikovali područja sadržaja.
Neke stvari koje biste mogli uzeti u obzir:
- Veličina teksta
- Obitelj fontova
- Kontrast boja
- Odjeljak stranice
- Visina retka i margine stavka
- Razmak slova i gornja / mala slova
Na primjer, pogledajte početnu stranicu Monitor kampanje. Gornje navigacijske veze koriste sve kape s malim slovima. Druga zaglavlja na stranici slijedite ovaj isti dizajn svih kape koji stvara osjećaj ujednačenosti.
Ostali veći zaglavlja na stranici su mnogo istaknutije, i stvarno skoče s stranice. Samo gledanjem tipičnog dizajna zaglavlja, to bi trebalo biti lako kaži razliku između zaglavlja i njegove uparene kopije tijela.
Stilovi tipografskog dizajna na monitoru kampanje izvrsni su i oni prirodno se uklopiti u izgled. Potrebna je praksa da bi se postigao ovakav rezultat, ali što više pokušavate, to će biti lakše.
Da biste saznali više, preporučujem sljedeće veze:
- Principi dizajna: vizualna težina i smjer
- Rad s vizualnom težinom u vašim nacrtima
- 19 Čimbenici koji utječu na kompozicijsku ravnotežu
Vođenje sadržaja
Shvatite to različite vrste web stranica imati različite metode za navođenje posjetitelja putem web-mjesta. Na primjer, odredišne stranice žele voditi posjetitelje sitne informacije, male ikone, screenshot, i izjave.
Ostale web-lokacije poput blogova obično ne dovode ljude na početnu stranicu odjednom. Većina ljudi zemljište na stranici članka, tako da su izgledi postova na blogu označite naslov, i privući ljude dalje u sadržaj. Ovo je mjesto gdje kvaliteta copywriting dolazi u igru, jer želite čitatelji vise s svake riječi.
Potrebne su društvene mreže i web-aplikacije kvalitetno korisničko iskustvo, tako da je to nešto drugačija tema, ali razmislite kako je Facebook feed namijenjen potaknuti pomicanje i interakciju korisnika.
Metode dizajna koje koristite da bi ljudi pregledavali web-lokaciju s vremenom. Ali općenito, vaš je cilj vodič za posjetitelje s vizualnim smjerom sadržaja.
Pogledajmo a odredišna stranica i a dizajn bloga uočiti razlike.
Kaktus je statički generator stranica za OS X. Njihova početna stranica usko slijedi Appleov stil dizajna - mnogo razmaka i tankih fontova bez serifa.
Sadržaj je organiziran u stupce, blokove i dijelove teksta jednostavnom grafikom. Iste su te estetike zajednički s proizvodima tvrtke Apple, Tako će korisnici Mac-a uživati u ovom stilu dizajna.
Informacije o proizvodu - uključujući značajke i postavke - nalaze se na početnoj stranici. Sama stranica potiče pomicanje pomoću jedinstvenog sadržaja, osnovnih ikona i izmjeničnog uzorka stupaca blokova lijevog / desnog sadržaja.
Cilj je pružiti informacije postojeći korisnici, i prodati novih korisnika ideju o kaktusu.
Sada usporedite taj dizajn s početnom stranicom za sljedeći web. Sadržaj je mnogo sporadičnije na početnoj stranici bloga, jer postoji mnogo različitih tema posta.
Pravokutnici stvaraju mrežni sustav koji enkapsulira više postova u jedan izgled. Cilj je ovdje korisnici čitaju sadržaj na stranici. Nije bitno ako posjetitelji nešto preuzmu, ali nije važno jesu li držati se i čitati nešto.
Način na koji ljudi mogu čitati jest sjajne fotografije i privlačnih naslova. TNW radi veliki posao, a njihov raspored je napravljena da bi ljudi pregledavali s povezanim sličicama postova u području bočne trake i popratnog sadržaja.
Vođenje posjetitelja na određenu radnju razlikuje se na svakoj web-lokaciji. Ali možete puno naučiti proučavanjem onoga što rade druge uspješne stranice i učenjem kopiranja.
Vjerujte svojim očima
Pojedinačna svojstva dizajna mogu se analitički objasniti, ali se implementacija mijenja za svaku lokaciju. Slika junaka s poveznicom "Pomakni dalje" ne radi isto na svim web-lokacijama.
Učenje dizajna je vrlo važno vizualni proces. Vaše oko za dizajn je najvažniji aspekt. Trebaš ispravno vidjeti stvari da biste to prepoznali vizualna hijerarhija. Ako ga možete vidjeti na drugim web-lokacijama, moći ćete ga ponoviti na svojim web-lokacijama.
Najbolji savjet koji imam je da Samo vjeruj svojim očima. Izradite popis omiljenih web-lokacija i provedite 5 minuta pregledavajući svaku od njih. Zapišite svoje omiljene elemente na stranici i kako oni utječu na dizajn. To će vam pomoći internalizirati te koncepte iz perspektive UI / UX, radije nego korisnikove perspektive.
Također ne bojte se probati stvari! Nitko nije bio dobar u dizajnu samo čitanjem članaka o dizajnu. Da, pomažu - oni zapravo mogu puno pomoći. Ali ti potreba do stvorite stvari od nule kako biste saznali što djela i što ne.
Trenirajte svoje oči proučavanjem izgleda web stranica koje vam se sviđaju i rekreirate ih. S vremenom ćete u svom umu izgraditi biblioteku uzoraka koja olakšava izradu novih web-lokacija.
Završavati
Nadajmo se da će ti savjeti započeti i dati vam osnovni plan za praćenje. Nije lako postati web dizajner, ali svijetu je potreban talent, a nikada nije bilo lakše naučiti te temeljne pojmove.
studija najbolji primjeri web-mjesta s elementima stranice u kojima uživate. Vlak uočiti odnose i brzo razviti potrebne vještine ponoviti te odnose u vlastitom radu.
