Visuaalisen sisällön suunta, mitä sinun tarvitsee tietää

visuaalinen sisällön suunta on vähemmän laajasti keskusteltu, mutta ratkaiseva osa korkean konvertoinnin web-suunnittelua. Jokainen kävijä "imee" uuden sivun ensimmäiselle sivulle - onko se tietoisesti tai ei.

Estetiikalla on merkitystä, mutta se on enemmän yleinen tunnelma suunnittelusta. Tätä tunnetta voivat vaikuttaa välilyönti, typografia, symmetria, mutta enimmäkseen suhteita sivun elementtien välillä.

Suunnittelijat haluavat kävijöitä pysy sivulla ja jatka vierittämistä kiinnittämällä heidän huomionsa ja pitämällä ne kiinnostuneina sivustosta. Suunnitteluperiaatteiden tulisi aina keskittyä toiminnolla ennen lomaketta. Tämä tarkoittaa, että suunnittelun pitäisi olla täydentää sisältöä, älä heitä sitä jälkikäteen.

Tässä viestissä haluaisin näyttää joitakin vinkkejä siitä, miten voit parantaa ulkoasua ja visuaalista sisältöä sivustossasi.

Keskity kokoonpanoon

Jokainen verkkosivuston osa rakennetaan yleisen ulkoasun jälkeen. Tämä yleinen ulkoasu luo koostumuksen, joka noudattaa Gestaltin teoriaa koskevia sääntöjä koko on aina suurempi kuin osien summa.

Sivun yksittäiset alueet tulevat yhteen muodostavat kokonaisuuden. Suunnitteluelementtien täytyy rakentaa a vetovoima sisällöstä; kaikki sivun pitäisi luonnollisesti ohjaa kävijöitä alaspäin, kunnes ne ovat sivun alareunassa.

Siksi sisällön eri osien (kuviot, teksti, painikkeet jne.) Väliset suhteet ovat niin paljon suunnittelussa.

Sinun pitäisi olla kannustaa ihmisiä selata sivustoa omasta kallistuksestaan. On helpompi sanoa kuin tehdä, mutta voit oppia paljon todellisia esimerkkejä.

Monkopin kotisivu on hyvä esimerkki visuaalisen hierarkian kanssa sekä tekstiä että visuaalisia kuvia. Elementtien välillä käytetään runsaasti tilaa, ja typografia täydentää merkkituotteiden vektorikuvia.

Kun selaat, huomaat suorat vaakasuorat sivulohkot jaetaan väreillä, rajoilla ja grafiikalla. Ne on rakennettu suunnittelumalleja mielessä tarjota johdonmukaisuutta koko sivun.

Alareunaa kohti löydät a kahden sarakkeen jako kuvilla toisella puolella, teksti toisella puolella. Myös kuvat vaihtaa puolta oikealla vasemmalle oikealle vasemmalle. Tämä kiinnittää huomiota ja rikkoo yksitoikkoisuuden tyypillinen sivu pitää luonnollinen virta sisältöön.

samanlainen muotoiluestetiikka löytyy Picjumbon verkkosivuilta, joka on Photoshopin ja Sketch-käyttäjien valokuva-lisäosan aloitussivu.

Kotisivu keskittyy logoon ja esikatselukuvaan. Kun selaat, huomaat mukautettuja animaatioita, jotka liikkuvat koko sivun läpi. Tämä animaatio todella kiinnittää huomiota, ja saa katsojan kiinnostunut jatkamaan vierittämistä.

Kaiken kaikkiaan sivu tuntuu avata ja helppo selata. Sisältö on jaettu vaakalohkoihin terävät typografiat ja puhtaat kuvakkeet.

Harkitse eri sivuelementtien tapaa tasapaino yhdessä, elementtien välinen tila, värien kontrasti ja erilaiset muodot. Kaikki nämä asiat vaikuttavat koko kokoonpanoon. Jokainen sivusto vetää luonnollisesti tiettyä painoa sisältöön.

Ei ole ehdotonta vastausta, koska se on erilainen jokaiselle sivustolle. Esimerkiksi, jotkin navigointilinkit näyttävät paremmilta, kun ne ovat suuria ja ylimitoitettuja. Toiset sopivat paremmin, kun he ovat pieni isoilla kirjaimilla.

Ehdotan, että opiskelet muita sivustojasi kapealla. Analysoi todella, miten ne kootaan. Yritä jopa rakentaa ulkoasuja uudelleen nähdäksesi, mitkä elementit lopulta tekevät suunnittelusta "tulevat yhteen".

Tyyppi Design Matters

Tapa, jolla suunnittelet typografiasi vaikuttaa sisällön suuntaan sivustossasi. Tämä liittyy tyypin hierarkiaan ja eri sivuelementtien suunnittelutyyli kuten kappaleet, otsikot, luettelomerkit, lainausmerkit ja erityiset asetteluelementit, kuten sarakkeet tai taulukot.

grafiikka voi vaikuttaa myös ulkoasuun, joten sisällön suunnittelu on hyvä idea luonnollinen eteneminen. Kirjoita sisältöä tavalla virtaa sivun alas, ja pitää ihmiset lukemassa kunkin kohdan kautta.

Suurin työkalu, jota sinulla on käytettävissänne on silmäsi suunnitteluun. Opi tunnistamaan typografisten elementtien erot ja miten ne liittyvät muihin sivuelementteihin. Luo sivuosioiden välisiä suhteita sisällön erottamiseksi toisistaan.

Jotkut asiat, joita saatat harkita:

• Tekstin koko
• Kirjasinperhe
• Värikontrasti
• Sivuosion suhteet
• Linjan korkeus ja kappalemarginaalit
• Kirjainten väli ja isot / pienet kirjaimet

Katso esimerkiksi kampanjamonitorin kotisivulta. Top navigointilinkit käyttävät kaikkia korkkeja, joissa on pienet kirjaimet. Muut sivun otsikot noudata samaa sulkemista joka luo yhtenäisyyden tunnetta.

Muut suuremmat otsikot sivustossa ovat paljon näkyvämpi, ja he todella hyppivät sivulta. Vain tarkastelemalla tyypillistä otsikkorakennetta, sen pitäisi olla helppo kerro ero otsikon ja sen pariksi yhdistetyn kopion välillä.

Kampanja-monitorin tyypilliset tyyli-tyylit ovat hienoja, ja ne sekoita luonnollisesti ulkoasuun. Tällaisen tuloksen saavuttaminen kestää käytännössä, mutta mitä enemmän yrität, sitä helpompaa se on.

Jos haluat oppia lisää, suosittelen seuraavia linkkejä:

• Suunnittelun periaatteet: visuaalinen paino ja suunta
• Työskentely visuaalisen painon kanssa suunnittelussa
• 19 Koostumustasapainoon vaikuttavat tekijät

Ohjaava sisältö

Ymmärrä se erilaisia ​​verkkosivustoja omistaa eri menetelmiä ohjata kävijöitä sivuston kautta. Esimerkiksi aloitussivut haluavat ohjata kävijöitä tietoa, pieniä kuvakkeita, kuvakaappauksia, ja suosittelut.

Muut sivustot, kuten blogit, eivät yleensä tuo ihmisiä kotisivulle kerralla. Useimmat ihmiset maata artikkelin sivulla, joten blogipostitus on tarkoitettu korosta otsikko, ja piirtää ihmisiä sisältöä. Tämä on paikka, jossa laadukkaan tekstin kirjoittaminen alkaa, koska haluat, että lukijat roikkuvat jokaisesta sanasta.

Sosiaaliset verkostot ja web-sovellukset tarvitsevat laadukasta käyttäjäkokemusta, joten se on hieman erilainen aihe, mutta harkitse, miten Facebook-syötteen on tarkoitus kannustaa vierittämistä ja käyttäjän vuorovaikutusta.

Suunnittelumenetelmät, joita käytät, jotta ihmiset voivat selata sivustoa muuttuvat ajan myötä. Mutta tavallisesti tavoite on ohjaa kävijöitä visuaalisen sisällön suuntaan.

Katsotaanpa a aloitussivu ja a blogin suunnittelu havaita erot.

Cactus on staattinen sivuston generaattori OS X: lle seuraa tarkasti Applen muotoilua - paljon tilaa ja ohuita sans-serif-fontteja.

Sisältö on järjestetty sarakkeisiin, lohkoihin ja tekstikappaleisiin yksinkertaisen grafiikan avulla. Nämä samat estetiikat ovat yhteinen Apple-tuotteiden kanssa, joten Mac-käyttäjät nauttivat tästä design-tyylistä.

Tuotteen tiedot - mukaan lukien ominaisuudet ja asetukset - näkyvät suoraan kotisivulla. Itse sivu kannustaa vierittämistä ainutlaatuisen sisällön, peruskuvakkeiden ja vasemman / oikean sisällön lohkojen vaihtuvan sarakekuvion kautta.

Tavoitteena on antaa tietoa olemassa olevia käyttäjiä, ja myydä uudet käyttäjät Kaktuksen ajatus.

Vertaa tätä mallia The Next Webin kotisivulle. Sisältö on paljon satunnaisempi blogin etusivulla, koska siellä on paljon postin aiheita.

Suorakulmat luovat verkkojärjestelmän, joka kapseloi useita viestejä yhdeksi osaksi. Tavoitteena on saada käyttäjiä lukemaan sisältöä sivustolla. Ei ole väliä, jos kävijät lataavat mitään, mutta sillä on merkitystä pidä noin lukea jotain.

Tapa saada ihmiset lukemaan on upeita valokuvia ja tarttuvat otsikot. TNW tekee tästä erinomaista työtä, ja niiden asettelu on rakennettu pitämään ihmisten selaaminen sivupalkissa ja jälkisisältöalueella liittyvillä postituspikkukuvilla.

Kunkin sivuston kävijöiden ohjaaminen on erilainen kaikissa sivustoissa. Mutta voit oppia paljon oppimalla, mitä muut onnistuneet sivustot tekevät, ja oppia kopioimaan.

Luota silmiin

Yksittäiset suunnitteluominaisuudet voidaan selittää analyyttisesti, mutta toteutuksen muutokset jokaiselle sivustolle. Hero-kuva, jossa on "Vieritä lisää" -linkki ei toimi samalla tavalla kaikissa sivustoissa.

Suunnittelun oppiminen on hyvin a visuaalinen prosessi. Suunnittelunne silmä on tärkein näkökohta. Sinun täytyy näe asiat oikein tunnistaa tämä visuaalinen hierarkia. Jos näet sen muilla sivustoilla, voit toistaa sen omilla sivustoillasi.

Paras neuvo on luota vain silmiin. Luo luettelo suosikkisivustoistasi ja vie 5 minuuttia selaamalla niitä. Kirjoita alas suosikkielementit sivulle ja miten ne vaikuttavat suunnitteluun. Tämä auttaa sinua sisällyttää nämä käsitteet UI / UX-näkökulmasta, pikemminkin kuin käyttäjän näkökulmasta.

Älä myöskään pelkää kokeilla tavaraa! Kukaan ei saanut hyvää suunnittelussa vain lukemalla artikkeleita suunnittelusta. Kyllä, he auttavat - he voivat todella auttaa paljon. Mutta sinä tarve että luo tavaraa tyhjästä oppiaksesi mitä teokset ja mitä ei.

Harjoittele silmääsi opiskelemalla haluamiasi verkkosivujen asetteluja ja luomalla ne uudelleen. Ajan myötä luodaan mielessäsi kuvakirjasto, joka helpottaa uusien sivustojen suunnittelua.

Käärimistä

Toivottavasti nämä vinkit alkavat aloittaa ja antaa sinulle peruskirjan, jota voit seurata. Se ei ole helppoa tulla web-suunnittelijaksi, mutta maailma tarvitsee lahjakkuutta, eikä ole koskaan ollut helpompaa opettaa itsellesi näitä perusajatuksia.

tutkimus parhaat esimerkit verkkosivuista, joissa on sivuelementtejä. Kouluttaa silmäsi tunnistamaan suhteet, ja voit nopeasti kehittää tarvittavat taidot toistaa nämä suhteet omassa työssäsi.