Hvernig á að ná tökum á útlitshönnun

Full leiðbeiningar til að læra undirstöðuatriði sjónrænnar hönnunar.

Sjá einnig: Litasálfræði í list og hönnun

Milljón dollara spurningin: hvert er leyndarmál góðrar hönnunar?

Við getum farið heimspekilegar um þetta. , en almennt talað er hið orðtakandi „leyndarmál“ góðrar hönnunar í því hvernig þú skipuleggur sjónræna þætti þína, í tengslum við striga þinn og hver við annan. Í grundvallaratriðum höfum við bara lýst skipulagshönnun. Sem, þegar þú hugsar um það, er hvert sem þú lítur.

Tökum til dæmis útlit tímarits. Hönnun þeirra fylgir klassísku ristkerfi (við ætlum að læra allt um rist á einni mínútu). Allt er venjulega stillt til vinstri, hægri og neðst. Dálkarnir eru sérstaklega með áberandi rökstudda röðun sem gerir síðuna ekki aðeins sjónrænt aðlaðandi heldur einnig auðlesna og opinbera. Stóru fyrirsagnirnar vekja athygli áhorfandans, en undirfyrirsögnin kemur sem andstæður í stærð til að búa til sjónrænt stigveldi upplýsinga.

Linda Gaom, Behance

Allir þessir eiginleikar gera síðuna. hanna hreint, skipulagt og auðvelt að lesa, og þau eru í takt við ráðin sem við ætlum að tala um næst. En fyrst skulum við skilja meira um útlitshönnunina sjálfa.

Hvað er útlitshönnun?

Útlitshönnun snýr að uppröðun grafískra þátta í því skyni að vekja athygli lesandans og koma ákveðnum skilaboðum á framfæri á sjónrænt aðlaðandi hátt. .

Svo við erum ekki að talahvíldarstaðinn, á meðan aðrir þættir gefa stefnu.

Einföld leið til að skilja þetta er með því að taka dæmi af vefsíðunni okkar, til dæmis. Grafík er greinilega aðskilin frá textanum og ákallanir til aðgerða sömuleiðis, þannig að athygli áhorfandans er að flakka frá einum upplýsingaklasa til annars.

Meginregla #5. Notaðu andstæður

Sjá einnig: Hvernig á að búa til hið fullkomna kertamerki

Gakktu úr skugga um að þú hafir næga birtuskil í hönnuninni þinni.

Birtuskil hjálpa til við að skipuleggja hönnunina þína og mun koma á mjög þörfu stigveldi og leggja áherslu á það sem er mikilvægt.

Meira en það, góð notkun birtuskila eykur einnig sjónrænan áhuga í gegnum hönnunina þína. Við skulum horfast í augu við það, skipulag þar sem allt er í sömu stærð, lögun eða lit mun líta leiðinlegt út. Andstæður krydda hlutina.

Fyrsta hugsun þín gæti verið litaskil, eins og hlýr á móti köldum, dökkir á móti ljósum, bláir á móti appelsínugulum. En þó litur sé afar ómissandi meginregla andstæða, þá eru líka andstæður um gerð, röðun og stærð. Og mundu að andstæða er líka afstæð. Það hefur aðeins merkingu í samsetningu við aðra þætti.

Hér eru nokkur dæmi um uppsetningar sem nota þessa reglu á snjallan og fallegan hátt. Taktu eftir andstæðunni í leturfræði, litum og jafnvel andstæðum í stærð milli þátta.

Heimild: IAG Reconciliation Action Plan

Principle #6. Endurtekning, mynstur, taktur

Þegar við hugsum um endurtekningu hugsum viðaf sama þættinum aftur og aftur.

En það er öðruvísi í hönnun. Það er örugglega ekki eins leiðinlegt og það. Þegar það er notað á réttan hátt getur endurtekning í raun styrkt hönnunina þína.

Reyndu að bera kennsl á og endurnýta mótíf í gegnum útlitið þitt svo að ýmis svæði finnist vera tengd og hluti af sömu samsetningu. Það mun hjálpa hönnun þinni að hafa þema. Með því að endurtaka þætti skilarðu ekki aðeins í samræmi við væntingar áhorfenda heldur muntu einnig bæta notendaupplifunina. Að vera samkvæmur gerir notendum þægilegra.

Þú getur gert þetta með því að endurtaka form eða tákn. Eða jafnvel litasamsetningu, leturgerð og almennt sama stíll.

Góður vani til að komast í er að nota leturgerð með stórri fjölskyldu. Takmarkaðu mismunandi fjölda mynstur, línuþyngd/stíla og lita og endurtaktu í gegn. Reyndu líka að halda stílnum á myndum og grafík eins. Notaðu til dæmis myndskreytingar eftir sama listamann.

Heimild: Thepentool.co

That's it. Þetta eru sex meginreglurnar sem munu hjálpa þér að skipuleggja hönnun þína og ná fram hreinni, faglegri og yfirvegaðri skipulagi.

En ferð þinni lýkur ekki hér. Grafísk hönnun er ekki nákvæm vísindi og hún ætti ekki að vera takmörkuð við ábendingar og meginreglur. Eins og á við á öllum sviðum sköpunarinnar er engin hörð þumalputtaregla. Að brjótast út úr þessum ráðum á fíngerðan hátt mun auka dýpt og fjölbreytnihönnunina þína.

En engu að síður eru þær frábær upphafspunktur og við hvetjum þig til að prófa. Og láttu okkur vita hvernig þau virkuðu!

Hlaða niður Vectornator til að byrja

Taktu hönnunina þína á næsta stig.

Sækja skrá um lógóhönnun hér. En hönnun prentefnis, eins og dagblaða, tímarita, veggspjalda og stafrænna hliðstæða þeirra, sem og vef-, app- eða UX/UI hönnunar.

Orðið „útlit“ gefur okkur margar vísbendingar. Það þýðir uppröðun fyrirframákveðinna þátta á síðu.

Þegar skipulag er skilvirkt lítur það vel út og það leiðir áhorfandann til að skilja skilaboðin sem hönnunin er að reyna að koma á framfæri. Skilningur á útliti er því lykillinn að því að búa til grípandi, áhrifarík, notendavæn og ánægjuleg tónverk.

Ef útlit kemur boðskap sínum ekki vel til skila til áhorfenda, eða með öðrum orðum, "lesar það ekki vel". “, hönnunin verður árangurslaus, sama hversu töff hún lítur út. Á sviði útlitshönnunar kemur efni í stað strauma og brellna.

Tilgangur útlitshönnunar

Til að koma skilaboðum á framfæri hratt

Þetta er lykilatriði. Útlitshönnun kemur á tengslum milli grafískra eigna til að ná mjúku flæði augnhreyfinga fyrir hámarks skilvirkni og áhrif.

Til að skapa jafnvægi

Að nota meginreglur útlitshönnunar er einfaldasta leiðin til að búa til tilfinningu fyrir jafnvægi og samhverfu í hönnunarverkefnum þínum án þess að verða leiðinleg.

Til að skapa samheldni

Útlit hjálpar þér að raða mörgum þáttum hönnunar þinnar á auðmeltanlegan, samhangandi og rökréttan hátt.

Til að skapa fegurð

Jafnvægi og uppbygging skapar náttúrulega fegurð.Ef útlitshönnun þín er unnin á réttan hátt mun hún sjálfkrafa verða sjónrænt aðlaðandi fyrir áhorfandann. Því minni fyrirhöfn sem áhorfendur þurfa að leggja á sig til að skilja skilaboð, því meira aðlaðandi mun hönnun þín virðast.

Hönnuður eftir Frank Philippin fyrir bók sína 'I Used to Be a Design Student: Then - Nú.' Heimild: DesignBoom

The Elements of Layout Design

Text

Þetta felur ekki bara í sér meginmál texta eða málsgreinar, heldur einnig fyrirsagnir, undirfyrirsagnir, hausa og fætur. Val þitt á leturgerð, lit og stærð mun hafa mismunandi áhrif á hvernig útlit þitt mun þýða áhorfendur.

Mynd

Algengustu gerðir mynda eru ljósmyndir, myndskreytingar eða infografík.

Form

Lögun geta verið rúmfræðileg, sem eru mjög hyrnd, eða þau geta verið lífræn og líkja eftir náttúrunni. Þeir geta líka verið abstrakt. Abstrakt form hafa verið mjög töff undanfarið ár, þar sem við höfum séð vefhönnuði setja þau inn í flóknar og víðtækar samsetningar.

Sform geta komið í stað mynd. Eða þeir geta verið notaðir til að bæta myndrænum þáttum við síðu, auðkenna texta eða afmarka bilið á milli annarra sjónrænna þátta.

Hvítt rými

Sérhver útlitshönnun mun hafa ákveðið magn af hvítu rými sem gerir þáttunum þínum kleift að anda og skera sig út af sjálfu sér.

Gullnu meginreglurnar um útlitshönnun

Þú munt taka eftir því að meginreglurnarskipulagshönnunar fylgja mörgum grundvallarreglum hönnunar. Eins og að nota lit á ákveðinn hátt, leturfræði, endurtekningar, andstæður, stigveldi og jafnvægi.

Meginregla #1. Notaðu Grids

Grids hjálpa hönnuðum að staðsetja ýmsa hönnunarþætti eins og texta og myndir á þann hátt sem lítur út fyrir að vera samhangandi og auðvelt að fylgja eftir.

Þau veita tilfinningu fyrir reglu, þau koma í veg fyrir að þættir yfirgnæfi hver annan , og síðast en ekki síst, rist mun einnig leiðrétta röðun þína. Gerðu vinnu þína hreinni og fagmannlegri.

Heimild: hgmlegal.com

The anatomy of grids

Þú gætir haldið að þetta séu bara lóðréttar og láréttar línur, en rist samanstendur af nokkrum hlutum. Margir reyndar. Hér er mikilvægasta hugtökin sem þú þarft að vita í grunnneti:

• Format er allt svæðið í endanlegri hönnun þinni. Þannig að ef þú hannar eitthvað fyrir prentun er sniðið síðan og ef þú ert vefhönnuður er sniðið vefsíðan eða vafraglugginn.
• Margins eru vísvitandi tómu rýmin á milli sniðsins og hönnunarinnar.
• Flæðilínur eru láréttu línurnar sem aðskilja útlitið þitt í samhliða hluta. Flæðilínur hjálpa til við læsileika hönnunar þinnar og leiðbeina lesandanum að fylgja efninu á réttan hátt.
• Einingar eru kubbar sem myndast af láréttum línum og lóðréttum línum.flæðilínur hvaða rist sem er. Ef þú hugsar um það, þá eru þeir byggingareiningar hvers rists. Allar lóðréttu einingarnar þínar búa til dálkana þína, á meðan öll láréttu töflurnar þínar búa til línurnar þínar.
• Svæði eru hópar tengdra eininga, ýmist lóðrétt eða lárétt. Það eru engar reglur um hvernig þú ákveður að skipuleggja þetta.

Heimild: Radversity

Types of grids

Layout grids voru fyrst notuð til að raða rithönd á pappír.

Þær eiga rætur að rekja til 13. aldar þegar franski listamaðurinn Villard De sameinaði ristkerfið gullna hlutfallið til að framleiða prentaðar blaðsíðuuppsetningar með spássíur. Þú getur séð þetta netkerfi enn þann dag í dag, eins og meirihluti prentaðra bóka og tímaritauppsetninga sannar. Útgefendur, ritstjórar og hönnuðir kjósa að nota staðlaðar töflur, ekki aðeins vegna þess að þau líta vel út, heldur vegna þess að lesendur hafa búist við að ákveðnir hönnunarþættir séu á tilteknum stað.

Rit er hægt að hanna á tvo vegu: samhverft eða ósamhverfar. Samhverf rist fylgja miðlínu, þar sem lóðrétt og lárétt svæði eru jöfn hvort öðru; og dálkar hafa sömu breidd.

Í ósamhverfu rist , eins og nafnið gefur til kynna, eru spássíur og dálkar ekki allir eins.

Byggt á þessari flokkun eru fimm megingerðir útlitsneta notaðar um allan heim sem þú getur reitt þig á:

Handritrist er algengasta tegundin fyrir skjöl. Þeir aðskilja haus, fót og spássíur og búa í grundvallaratriðum til rétthyrning inni í sniðinu (eða síðunni) sem veitir mörkin fyrir textann þinn. Þau eru grunnur fyrir tímarit, dagblöð og bækur. Þannig að það er líklega uppsetningin sem þú þekkir best.

Heimild: UXplanet

Heimild: Radversity

Column grids eru annað uppáhald í tímaritaútgáfu. Dæmigert tímaritaútlit notar dálkatöflur til að aðgreina texta í auðlesna hluta. En þau eru líka mjög vinsæl fyrir vefsíður. Þú getur notað allt frá tveimur upp í sex rist. Meira er mögulegt en samt ekki algengt. Mjög mikilvægt atriði varðandi dálkatöflur er að bilið á milli dálka, eða þakrennanna, sé jafnfjarlægt.

Samhverf dálkatöflur eru til dæmis notuð af dagblöðum, en ósamhverft dálkarit er æskilegt í vefhönnun .

Heimild: UX Planet

Heimild: Radversity

Modular grids eru svipaðar dálknetinu, en þær gera einnig grein fyrir láréttum flæðilínum. Þessa tegund af rist er þörf þegar þú þarft að skipuleggja ýmsa þætti í skipulaginu þínu og dálkatöflurnar eru einfaldlega ekki nóg.

Modular grids eru með jafnstórar einingar sem gerir það mjög auðvelt að sjá svæðissvæðin þín á mismunandi vegu.

Heimild: UXPlanet

Heimild: Radversity

Baseline grids eru frábær fyrir textabyggðar tónsmíðar. Grunnlína er línan þar sem texti hvílir þegar þú skrifar og fremstur er bilið á milli tveggja grunnlína. Ertu að spá í hversu stórar fyrirsagnir eða undirfyrirsagnir þínar ættu að vera?

Grunnlínutöflur eru hér til að hjálpa til við að gefa textanum þínum flæðandi takt.

Heimild: UX Planet

Heimild: Fragaria

Herarchical grids líta minna út eins og rist en öll þeirra hliðstæða. Engu að síður eru þeir mjög gagnlegir þegar þeir skipuleggja hönnunarþætti í röð eftir mikilvægi. Stigveldisnet geta verið byggð á mátnetum, eða þú getur jafnvel búið til þitt eigið. Vefsíður nota þetta rist mikið, sérstaklega stafræn tímarit og dagblöð hafa tilhneigingu til að reiða sig meira á stigveldisnet frekar en dálkanet þegar þeir breytast í að verða stafrænir.

Heimild: UX Plane

Principle #2. Notaðu neikvætt rými

Við höldum oft að tómleiki, þögn eða skortur á lit sé slæmur hlutur. En við íhugum ekki hvernig þau eru traustur grunnur andstæðunnar.

Einnig kallað hvítt rými, neikvætt rými er það svæði í hönnun þinni sem hefur enga raunverulega þætti. Það er svæðið sem er eftir autt. Það umlykur ekki bara eignir þínar, það skapar líka nauðsynleg tengsl á milli þeirra. Vegna þess er neikvætt rými réttmætur hönnunarþáttur og hefur gríðarleg áhrif á hversu áhrifarík skipulag þitt erhönnun er.

Gott vs slæmt neikvætt rými

Neikvætt pláss mun hjálpa til við að aðgreina ýmis svæði í hönnuninni þinni, en einnig leyfa skipulaginu þínu að anda. Það hjálpar við sjónrænt stigveldi og sjónrænt jafnvægi; það setur áherslu notandans á kjarnaþættina; það dregur úr truflun; og að lokum bætir það stíl og glæsileika við hönnunina þína.

Óreyndir hönnuðir gætu haft tilhneigingu til að fylla út eins mikið af striga sínum og hægt er, með því að stækka texta eða sprengja upp lógó eða mynd. En að gefa þáttunum þínum rými gerir áhorfandanum kleift að velja ákveðnar upplýsingar á hraðar og þægilegri hátt.

Ef allt hrópar eftir athygli áhorfandans heyrist ekkert.

– Aaron Walter, 'Design for tilfinning'

Auðveld leið til að ákvarða neikvæða plássið þitt er með því að nota mát rist. Með því að setja það ofan á hönnunina þína geturðu auðveldlega séð hvaða einingar geta verið tómar og hverjar ætti að fylla út.

Hönnuður eftir Brunswicker, Heimild: Codesignmag.com

Meginregla #3. Veldu einn miðpunkt

Hefur viðskiptavinur einhvern tíma beðið þig um að gera lógóið stærra? Og svo til að gera fyrirsögnina enn stærri?

Það er ekki hægt að leggja áherslu á allt. Það sigrar tilganginn með góðri hönnun. Rétt eins og tíminn er fókusinn afstæður. Til að einn þáttur standi upp úr þarf annar að vera bakgrunnur. Sumir þættir þurfa að ráða yfir öðrum til að hönnunin þín birtistsjónrænt stigveldi.

Þungamiðjan í hönnun er sá þáttur sem hefur mest sjónrænt vægi. Það er þátturinn sem laðar augað fyrst, meira en nokkuð annað í útlitinu þínu.

Þjónustustaður mun tilkynna áhorfendum þínum hvar skoðunarferð þeirra hefst á hönnun þinni. Þannig að það er upphafið á sögunni sem þú ert að segja.

Þetta er venjulega hægt að ná með því að nota stóra mynd eða stóra leturgerð. Taktu eftir hversu áhrifaríkur þungamiðjan hér að neðan er

Hönnuð af Braulio Amado fyrir Bloomberg Businessweek, Heimild: Það er gaman að

En á meðan brennipunktur vekur athygli áhorfenda í, næsta regla mun hjálpa henni.

Meginregla #4. Hugsaðu um nálægð og flæði

Nálægðarreglan er einföld. Gakktu úr skugga um að þættir sem tengjast hver öðrum séu settir saman.

Nálægð gefur til kynna að sjónrænar eignir séu tengdar og verða að einni sjónrænni einingu sem hjálpar til við að skipuleggja útlitið þitt.

Þannig að aðeins þyrptu hönnunareignir sem hafa tengsl sín á milli og notaðu vasa af upplýsingum um hönnunina þína til að leiðbeina áhorfendum þínum að viðkomandi efni sem þeir þurfa að neyta. Þetta er einnig kallað flæðisreglan.

Heimild: Satori Graphics

Hönnun með góðu flæði mun leiða auga áhorfenda í gegnum útlitið, frá frumefni til þáttar, með auðveldum hætti. Brennipunktar þínir munu toga augað og verða