Visuaalse sisu suund, mida pead teadma
The sisu visuaalne suund on vähem levinud, kuid olulise tähtsusega kõrge konversiooniga veebidisain. Iga külastaja "imeb" uue lehe esimesel lehel - kas ta teeb seda teadlikult või mitte.
Esteetika mängib rolli, kuid see on rohkem disaini üldine tunne. Seda tunnet võib mõjutada tühimik, tüpograafia, sümmeetria, kuid enamasti suhted lehekülje elementide vahel.
Disainerid soovivad külastajaid viibige lehel ja jätkake kerimist hoides nende tähelepanu ja hoides neid huvipakkuvalt. Disaini põhimõtted peaksid alati keskenduma funktsioonile enne vormi. See tähendab, et disain peaks olema sisu, ei tõmba seda kui järeltööd.
Selles postituses tahaksin teile näidata mõned nõuanded selle kohta, kuidas saate seda teha parandada oma paigutusi ja visuaalse sisu vooge saidil.
Keskenduge kompositsioonile
Iga veebilehe osa ehitatakse üldisele paigutusele. See üldine paigutus loob kompositsiooni, mis järgib Gestalti teooria reegleid kogu on alati suurem kui osade summa.
Lehekülje üksikud piirkonnad kogunevad moodustavad terviku. Disainelemendid peavad ehitama a gravitatsiooniline tõmbejõud sisu kohta; kõik lehel peaks olema loomulikult suunavad külastajad allapoole, kuni nad jõuavad lehe allosasse.
Seetõttu on sisu sisu (visuaalsed, tekstilised, nupud jne) vahelised suhted nii olulised.
Sinu eesmärk peaks olema inimeste julgustamine sirvida saiti oma kalde järgi. Seda on lihtsam öelda kui teha, aga saate palju õppida tegelike näidete uurimine.
Monkopi kodulehekülg on suurepärane näide visuaalsest hierarhiast nii teksti kui ka visuaale. Elementide vahel kasutatakse palju ruumi ja tüpograafia täiendab kaubamärgiga vektori illustratsioone.
Sirvimisel märkate sirged horisontaalsed leheplokid jagatud värvide, piiride ja graafikaga. Need on ehitatud disaini mustrid silmas pidades pakkuda järjepidevust kogu lehel.
Alumise poole leiate a kahe veeru jagamine ühel küljel olevate piltidega, teiselt poolt tekst. Pildid ka vahetada paremale vasakule paremale. See juhib tähelepanu ja lõhub monotoonsus tüüpilisele lehele loodusliku voolu hoidmine sisu.
A sarnane disain esteetiline leiate veebisaidilt Picjumbo, mis on Photoshopi ja Sketch'i kasutajate foto lisamise sihtleht.
Koduleht keskendub logole ja eelvaate videole. Sirvimisel märkate kohandatud animatsioone, mis liiguvad kogu lehel. See animatsioon tõesti juhib tähelepanu, ja saab vaataja huvitatud, et jätkata kerimist.
Üldiselt tundub lehekülg avatud ja lihtne sirvida. Sisu on jagatud horisontaalseteks plokkideks terava tüpograafia ja puhta ikooniga.
Mõtle, kuidas erinevad leheküljeelemendid on tasakaal, elementide vaheline ruum, värvide kontrastsus ja erinevad kujud. Kõik need asjad mängivad üldises koosseisus rolli. Iga sait tõmbab loomulikult sisule teatud kaalu.
Absoluutset vastust pole, sest see on iga saidi puhul erinev. Näiteks, mõned navigatsioonilinkid on paremad ja suured. Teised sobivad paremini, kui nad on väike suurtähtedega.
Ma soovitan teil oma nišis teisi veebisaite uurida. Tõesti analüüsige, kuidas nad kokku panevad. Isegi proovige paigutuste ümberehitamist, et näha, millised elemendid lõpuks disaini "kokku tulevad".
Tüüp Design Matters
Kuidas kujundate oma tüpograafiat mõjutada sisu suunda saidil. See on seotud tüübihierarhia ja erinevate leheküljeelementide disaini stiilid nagu lõigud, päised, täpsed nimekirjad, jutumärgid ja spetsiaalsed paigutuselemendid, nagu veerud või tabelid.
Visuaalid võib mõjutada ka paigutust, seega on sisu kujundamisel hea mõte loomuliku progresseerumisega. Kirjutage sisu nii voolab lehelt alla, ja hoiab inimesi lugedes iga lõigu kaudu.
Suurim teie käsutuses olev tööriist on silma disain. Õpi tundma ära tüpograafiliste elementide erinevusi ja nende seost teiste lehekülje elementidega. Looge leheküljeosade vahelisi suhteid sisu eristamiseks.
Mõned asjad, mida võiksite kaaluda:
- Teksti suurus
- Fontide perekond
- Värvikontrast
- Lehekülje sektsiooni suhted
- Liini kõrgus ja lõike marginaalid
- Kirjade vahekaugus ja suur / väike
Vaadake näiteks kampaania monitori kodulehte. Top navigeerimislinkid kasutavad kõiki väikeseid tähti. Teised lehekülje päised järgige kõiki sama mütsid mis tekitab ühtsuse tunnet.
Teised suuremad päised on saidil palju olulisem, ja nad tõepoolest hüppavad lehelt välja. Lihtsalt, vaadates tüüpilist päise disaini, peaks see olema lihtne ütle erinevust päise ja selle paaristatud koopia vahel.
Kampaania monitori tüpograafilise disaini stiilid on peened ja need on väga head seguneb loomulikult paigutusega. Sellise tulemuse saavutamiseks läheb praktikas, kuid mida rohkem proovite, seda lihtsam on see.
Veidi rohkem õppimiseks soovitan teil järgmisi linke:
- Disaini põhimõtted: visuaalne kaal ja suund
- Visuaalse kaaluga töötamine teie disainilahendustes
- 19 Kompositsiooni tasakaalu mõjutavad tegurid
Juhtiv sisu
Mõista seda erinevat tüüpi veebisaite on erinevaid meetodeid külastajate külastamiseks saidi kaudu. Näiteks soovivad sihtleheküljed külastajaid suunata teabe tidbitid, väikesed ikoonid, ekraanipildid, ja iseloomustused.
Teised saidid, nagu blogid, ei tooda tavaliselt kodulehte korraga. Enamus inimesi maanduge artikli lehele, nii et blogipostituse paigutused on mõeldud tõstke esile pealkiri, ja juhtige inimesi sisu. See on koht, kus kvaliteedi copywriting tuleb mängida, sest sa tahad lugejad rippuvad maha iga sõna.
Sotsiaalsed võrgustikud ja veebirakendused vajavad kvaliteetne kasutaja kogemus, nii et see on veidi teistsugune teema, kuid kaaluge, kuidas Facebooki kanal on mõeldud soodustada kerimise ja kasutajate suhtlemist.
Disainimeetodid, mida kasutate, et hoida inimesi veebisaidi sirvimisel aja jooksul muutuma. Kuid üldiselt on teie eesmärk juhendab külastajaid visuaalse sisu suunas.
Vaatame a sihtleht ja a blogi disain erinevusi märkama.
Cactus on statsionaalne saidi generaator OS X-le. Nende koduleht järgib tähelepanelikult Apple'i disaini - palju ruumi ja õhuke sans-serif fonte.
Sisu on struktureeritud veergudeks, plokkideks ja tekstiosadeks lihtsa graafika abil. Sama esteetika on ühine Apple'i toodetega, nii et Maci kasutajad naudivad seda disaini.
Teave toote kohta - sh funktsioonid ja seadistamine - on loetletud otse kodulehel. Lehekülg ise soodustab kerimist ainulaadse sisu, põhikuvade ja vasakpoolse / parema sisu ploki vahelduva veerumustriga.
Eesmärk on anda teavet olemasolevaid kasutajaid, müüa uusi kasutajaid Kaktuse idee.
Võrdle seda disaini järgmise veebi avalehega. Sisu on palju juhuslikum blogi avalehel, sest seal on palju erinevaid postitusi.
Ristkülikud loovad võrgusüsteemi, mis kapseldab mitu postitust ühte paigutusse. Eesmärk on siin saada kasutajatele sisu lugemine kohapeal. Ei ole oluline, kas külastajad alla laadivad midagi, aga see on oluline, kui nad seda teevad kinni pidama, et midagi lugeda.
Kuidas lugeda inimesi, on see suurepärased fotod ja meeldejäävad pealkirjad. TNW teeb sellest suurepärast tööd ja nende paigutus on ehitatud inimeste sirvimiseks seotud postituste pisipiltidega külgriba ja pärast sisu.
Konkreetse tegevuse külastajad on igas kohas erinevad. Aga sa saad palju õppida, uurides, mida teised edukad saidid teevad, ja õppides, kuidas neid kopeerida.
Usalda oma silmi
Individuaalsed projekteerimisomadused on analüütiliselt seletatavad, kuid iga saidi rakendamise muutused. Kangelase kujutis, millel on link "Edasi liikumine" ei täida sama kõikidel veebisaitidel.
Disaini õppimine on väga suur visuaalne protsess. Teie silma disain on kõige olulisem aspekt. Sa pead vaata asju õigesti selle tuvastamiseks visuaalne hierarhia. Kui te näete seda teistel veebisaitidel, saate seda oma saitidel kopeerida.
Parim nõuanne on usaldage oma silmi. Looge oma lemmikveebide loend ja veetke igaüks 5 minutit. Kirjutage oma lemmikelemendid lehele ja kuidas need kujundust mõjutavad. See aitab teil neid kontseptsioone internaliseerima UI / UX vaatenurgast, mitte kasutaja vaatenurgast.
Ärge kartke proovida asju! Keegi ei saanud disaini heaks lihtsalt lugedes artikleid disaini kohta. Jah, nad aitavad - nad saavad tegelikult palju aidata. Aga sina vajadus kuni luua midagi nullist, et õppida, mida töötab ja mida ei ole.
Treeni oma silma, uurides veebisaidi paigutusi, mida soovite, ja looge need uuesti. Aja jooksul saate oma meeles luua mustri raamatukogu, mis muudab uute saitide kujundamise palju lihtsamaks.
Pakkimine üles
Loodetavasti saavad need nõuanded teile alguse ja annavad teile peamise tegevuskava. See ei ole kerge saada veebidisaineriks, kuid maailm vajab talenti, ja pole kunagi olnud lihtsam õpetada ise neid põhikontseptsioone.
Uuring parimaid näiteid veebilehtedest, millel on lehekülje elemendid. Rong su silma, et ära tunda suhteid ja saate kiiresti areneda vajalikud oskused korrata need suhted teie enda töös.
