Hvað gerir hönnun útlit samræmd, skipulögð og fagleg? Svarið er: 'litur' .

Ekki hvert verkefni þarf blíður fyrirtæki blár til að líta faglega. Skipulags litur þýðir að búa til ramma sem lýsir hvaða litum sem á að nota og hvernig á að nota þær.

Litur er slipperiest hönnunarþátturinn. "Góð" liturinn er svo náinn bundinn við ógnvekjandi hluti eins og persónulegan bragð og innsæi, auk tæknilegra þátta eins og skuggaefni og fylgjast með kvörðun.

En litur er mikilvægt fyrir innihald . Ef þú telur vefsíðu sem er nógu mikil til að eyða tíma hreinsun, þá munu lesendur líklega telja það nógu mikilvægt að eyða tíma í að lesa. Góð litaval gera það gerst.

Í þessari grein munum við skoða nokkrar aðferðir til að ná fallegum litapallettum fyrir hönnunina þína.

mismunandi litir geta átök, en mismunandi gildi einn litblær vinna

Besta leiðin til að gera vefsíðu útlitslaus er að velja liti þess af handahófi.

Jafnvel þegar gestir líta á heimasíðu heimasíða í fyrsta skipti, hafa litarnir áhrif á viðhorf sitt gagnvart innihaldi . Er þetta vefsíða spennandi? Hughreystandi? Áræði? Bland? Pólitískt? Formlegt?

Litur hefur áhrif á hvernig fólk túlkar það sem þeir sjá eins mikið og leturfræði.

Finndu rétta litina er ekki auðvelt, en ferlið getur verið kerfisbundið.

Góð hönnun stefna felur í sér litasamsetningu (þ.e. úrval af litum sem valin eru til að miðla skapi eða skilaboðum) og fyrirkomulagi þess kerfis.

Segjum að þú hafir verið beðinn um að hanna faglega vefsíðu. (Og þetta gæti mjög vel verið að drekka leik: taktu skot í hvert skipti sem viðskiptavinur notar orðið "faglegt", "hreint" eða "nútímalegt." Tvær skot fyrir "Mér líkar við þessa aðra vefsíðu. Afritaðu það.").

Litasamsetningin fer eftir eðli vefsvæðisins. Til dæmis geta bæði bankar og blómabúðmenn haft faglega vefsetur.

En fólk gæti verið minna tilhneigingu til að kaupa blóm af vefsíðu sem er sameiginlegt blátt og hafið grátt. Og ímyndaðu þér Bank of America vefsíðu í Lilac og gul-grænn.

A "faglegur" hönnun segir frá því að gestir hafi fundið vefsíðu sem tekur þátt í henni alvarlega, jafnvel þótt þessi efni sé léttur. Hvað sem litbrigði og gildi þýðir "faglegur" samhæft, skipulagt og hugsað .

Farðu í gráskala

Besta leiðin til að vinna með lit er að byrja með enginn.

Að fjarlægja lit frá hönnun sýnir grundvallarvandamál sem þarf að takast á við áður en áhyggjuefni er um hvaða skugga sem er á kortinu. Ef hönnunin líður ekki rétt í svörtu og hvítu, þá er kominn tími til að gera breytingar.

Hefur hver síða skýr markmið? Heldur hönnunarhandbókin lesendur í gegnum efnið? Er efni sannfærandi, hvetjandi eða upplýsandi? Eru fyrirsagnirnar hreinn? Gera tengillin andstæða við aðra texta? Litur bætir þessum áhrifum en ekki er hægt að leysa vandamál í skipulagi, gerð og skipulagi með lit einum .

Til að gera endurhönnun, sjúga fyrst út litinn. The einfaldur athöfn af þvottur út yfir mettuð primaries sýnir í raun hvar website stendur. (Reyndar ættirðu virkilega að hefja endurhönnun með því að endurmeta markmið og efni, en það er önnur saga.)

Stundum er að fjarlægja litur lausn í sjálfu sér .

Ég starfaði einu sinni með vefhönnun fyrirtæki til að endurhönnun eigin heimasíðu þeirra. Eigendur voru persónulega um verkefnið og vildu fá það rétt. En ef þér finnst erfitt að hanna fyrir þig, reyndu að gera það af nefndinni. Í lokin voru þrír af okkur að horfa á skjámynd af níunda drögunum eftir nokkra drykki.

Skyndilega flatti ég Photoshop lögin og smellt á "Desaturate" og breytti líflegum kopar-og-flotans hönnun í tónum af gráum. Til óvart fyrir alla, það virkaði.

Í lok vikunnar áttum við "heitt" gráan hönnun með rauðum kommurum. Við vissum að við fengum sigurvegara þegar fyrri viðskiptavinir hrósuðu þeim á nýju útlitinu og fleiri símtöl komu frá væntanlegum viðskiptavinum.

Greindu litakerfið með Photoshop "squint" prófinu :

  1. Taktu skjámyndir af að minnsta kosti þremur síðum frá vefsíðunni þinni. Opnaðu þau í Photoshop.
  2. Afritaðu bakgrunnslagið í hverju skjámynd ( Layer → Duplicate Layer , eða Command + J á Mac eða Control + J á Windows).
  3. Notaðu Gaussísk ósk um 10 punkta til nýju laganna.
  4. Farðu í Mynd → Leiðréttingar → Veggspjald . Notaðu 8 til 12 stig eða farðu í Sía → Pixellate → Mosaic . Notaðu 15 til 30 punkta.

fljótleg greining á vefsíðu

Þetta sýnir hvaða litir eru raunverulega ríkjandi. Því meira sem ríkjandi litirnir eru, því meira sem kerfið er áberandi í huga gestir.

Þegar skipulag og skipulag vefsvæðisins er unnið án litar er kominn tími til að velja stiku. En hver? Og hversu mikið á að nota?

Stilltu litbrigði þínar

þrír litir

Litur hefur þrjá eiginleika: lit, mettun og gildi (stundum kallað léttleiki).

Mettun er hve ríkur lit er: Neonlitir eru mjög mettaðir, en pastelir eru minna mettaðir.

Gildi sýnir hversu björt (þ.e. hversu nálægt svart eða hvítt) litur er.

Hue vísar til hvaða hluta regnbogans litur tilheyrir, svo sem rauður eða grænn; það er eignin sem fólk ferðast upp á.

Ekkert drepur litasamsetningu eins og skellihættu. Hönnun getur haft hundrað tónum af einum lit, frá Pastel til Neon, og lítur enn fyrirhuguð. En ef litbrigði eru blandaðar á rangan hátt fellur kerfið í sundur.

Ein leið til að koma í veg fyrir skellihættu er að skilja þau með þriðja lit. Stöðugleiki af svörtu, gráu eða hvítu er öruggasta, vegna þess að gráskala er litblær-hlutlaus: þú getur samhæft hvaða hluta regnbogans með svörtu, hvítu og gráu.

Önnur lausnin er að nota litbrigði í mismunandi hlutföllum . Ef litakerfi hefur sagt, fjólublátt og brúnt, þá gæti hönnunin haft marga tónum af brúnni með nokkrum skærum fjólubláum hápunktum.

Annar kostur er að breyta gildunum. Hreint blátt og björt cyan gerir svona samsetningu, en dökkblár (Navy) og ljós cyan (himinblár) andstæða nóg til að slökkva á hvort öðru. Rauður og fjólublár getur verið nógu ólíkur til að skellast ekki en nógu nálægt því að líta ekki í ásettu ráði. Ljósroutt (bleikur) og dökkfjólublátt koma til greina.

Því miður, að forðast slæmt litasamsetning er ekki það sama og að velja gott. Litakerfi er vel, ekki þegar þú ert ánægð, en þegar áhorfendur þínir líða vel.

Uppgötvaðu frábærar áætlanir

Hvar koma frábær litasamsetningar frá? Með hundruð lita og þúsunda samsetningar, hvernig ákveður þú?

Hönnuðir lítilla truflanir vefsíður ættu að teikna lit frá innihaldi . Það þýðir yfirleitt myndir.

Hönnun átta blaða vefsíðu sem ég nýlega byggði var toppað með vandaður málmur vinnupalla sett á móti Indigo himinn. Þegar ég setti eyðimerkið á Photoshop í 5 × 5 meðaltal sýndi ég myrkri og léttustu hlutum himinsins og gaf hliðarstikunum, tenglum, fyrirsögnum og fótspor þeim fáum tónum.

Þegar viðskiptavinur spurði hvernig við gætum hannað vefsíðu svo vel og svo fljótt, svar okkar var: "Þetta er það sem við gerum." En liturinn var þegar til. Ég þurfti bara að leita að því.

Þó birgðir myndir virka fyrir fljótur vefsíður, hönnuðir stærri og öflugri vefsíður ættu að leita innblástur frá áhorfendum sínum .

Framúrskarandi vísbending um hvaða litir eru aðlaðandi fyrir áhorfendur þínar er dagleg föt þeirra. Finndu út hvað gestir þínir klæðast og þú munt vita hvaða litir gera þau þægilega. Ef vefsvæðið þitt snýst um, segðu deildaríþróttir, finndu út hvað fólk klæðist í leiki, frekar en dagvinnu.

Ef þú ert heppin að fá myndir af markhópnum þínum, skoðaðu þau mikið; þú vilt að meðaltali mannfjöldans. En ef myndir eru ekki í boði skaltu fara að versla.

Fatahönnuðir sem eru færir um að vera í viðskiptum hafa góða litskilning fyrir hvert skap og lífsstíl. Það þarf ekki að vera 5th Avenue haute couture. Google leit fyrir "tjaldsvæði," "föt," "skíði og sundföt" og "frjálslegur búnaður" mun sýna margar góðar samsetningar lit.

Fólk klæðist fötum eftir smekk þeirra. Ef þú notar litir sem þeir vilja, þá mun þær líða betur á vefsíðunni þinni.

Notaðu áferð

áferð sýni á sama lit.

Lítil afbrigði í litblær, mettun eða gildi skapa áferð .

Monochromatic áferð (þ.e. áferð með aðeins einum lit) og mynstri gefur léleg vídd á flestum vefsvæðum án þess að stela.

Einföld áferð bakgrunnur, sérstaklega, er auðvelt að byggja:

  • Taktu mynd af innri vegg eða eitthvað sem er bert en finnst gróft.
  • Opnaðu það í Photoshop.
  • Afritaðu bakgrunnslagið og kalla það "áferð 1."
  • Fylltu bakgrunnslagið með litum úr litasamsetningu þinni.
  • Setjið blöndunartækið "áferð 1" lagið í "Soft Light" og ógagnsæi hennar í 30%.
  • Prófaðu það á vefsíðunni þinni. Ef það lítur ekki rétt út skaltu spila með ógagnsæi lagsins.

Nafn lagsins er vísvitandi. Þú gætir spilað með fleiri en einu mynd, en forðastu að gefa lagunum nöfn eins og "vegg áferð" eða "pappír áferð." Þú vilt einbeita þér að áhrifum á vefsvæðið þitt, ekki hvar það kom frá.

Búa til gott kerfi

Gott litakerfi hefur ákveðna eiginleika. Hugsaðu um það sem ramma eða setja viðmiðunarreglur til að halda hönnuninni í samræmi. Kerfið ætti að:

  • Listi tvö til fimm litbrigði sem vinna vel saman,
  • Lýsið hversu langt hönnun getur verið breytileg frá þessum litum,
  • Reiknaðu um tónum af hverju litbrigði,
  • Vinna vel gegn svörtu og hvítu.

Hér er dæmi:

Skref 1: Veldu litaval fyrir litasamsetningu

Hönnuður byrjaði með því að velja aðallega hlýjar hues sem fannst rétt. Það var engin rökfræði, bara óljós markmið "haust" og innsæi hennar.


Skref 2: Notaðu mismunandi gildi húðuðanna

Í Photoshop, tvö lög veitt tónum af svörtu og hvítu. Blandunarhamur hvers lags var stillt á "Mjúk ljós". Pure svartur var of dökkur fyrir hægri lit, þannig að ógagnsæi svartra laganna var breytt.


Skref 3: Notaðu litbrigði yfir allt

Til að sameina liti var nýtt lag búið til og fyllt með hreinu rauðu. Blönduhamur hans var stilltur á "Litur" og ógagnsæi hans skoraði í um 40%. (Athugið: röð laganna er mjög mikilvægt. Litir munu breytast ef "lit" lagið er sett undir svarta og hvítu lögin.)


Skref 4: veldu uppáhalds litina þína úr niðurstöðunni

Þetta gaf hönnuður 15 liti til að velja úr. Hún valinn fjóra sem hafði úrval af tónum og litum. Hér eru liti settar á móti hvítum.


Skref 5: Gakktu úr skugga um að þeir vinna gegn svörtu og með mismunandi tónum

Breytingar eru mikilvægar, þannig að hönnuður reyndi. Hvað myndu litarnir líta út fyrir svörtu? Hvað gerist ef við tökum þau lítillega?


Skref 6: spilaðu með lit og leitaðu að öðrum eftirlæti

Hvað ef við breyttum þeim alveg? Notkun mynda → Stillingar → Hue / Saturation á "blær" laginu skapar greinilega un-haust feel, en litirnir eru enn samræmdar. Kannski er hægt að nota þessa stiku fyrir páskana.

Niðurstaðan er litasamsetning: Tilvísun sem veitir mismunandi (en ekki of ólíkar) litbrigði og úrval af tónum sem vinna vel saman. Sækja skráarsniðið.

Notaðu ramma

Mun grafík á morgun, myndir og tákn vinna með litakerfi í dag? Hvaða myndir þurfa vefsíðu á sex dögum, sex vikum eða sex mánuðum? Það er erfitt að segja, en efni er hluti af litakerfinu þínu .

Þú gætir leyst þetta vandamál með því að annaðhvort gera myndirnar þínar í samræmi við litasamsetningu eða gera litasamsetningin fylgja myndunum þínum.

Að efla litakerfið þitt, jafnvel með myndum, er frábær leið til að ná samræmdu útliti yfir allar síður .

Auðveldasta lausnin er að finna myndir sem passa við kerfið. Mundu að litasamsetning gerir kleift að hrista herbergi: svo lengi sem helstu litir myndarinnar passa, þá ætti myndin að virka. Margir lager mynda vefsíður leyfa þér að leita eftir lit (sem þýðir lit: venjulega aðalhlutir eins og rautt, grænt og blátt).

Ef myndin passar ekki litakerfinu skaltu gefa það litbrigði:

  1. Opnaðu myndina í Photoshop.
  2. Búðu til nýtt lag. Stilltu blöndunartækið í "Litur."
  3. Fylltu það lag með einum af litunum úr stikunni, helst sá sem passar næstum myndinni.
  4. Stilltu ógagnsækt litlagið í 50%.
  5. Spilaðu með ógagnsæi þar til þú færð gott jafnvægi milli upprunalegu myndarinnar og litavali vefsvæðisins.
  6. Þessi tækni virkar fyrir myndir, myndir og tákn-nokkuð pixel-undirstaða. (Ef þú átt ekki myndina skaltu vera viss um að fá leyfi áður en þú breytir því. Þú gætir verið að bæta útlitið á vefsíðunni þinni, en þú ert enn að taka frelsi með list annarra).

Útlit atvinnumaður

Ekkert sett af litum lítur út fyrir "faglega" í sjálfu sér. Fremur verður þú að fylgja ferli til að ná samræmdri, fyrirhuguðri tilfinningu.

Sama hvað vefsvæðið snýst um, munu áhorfendur vita að það tekur sig alvarlega.

Ábendingar

  • Þegar þú heldur að þú hafir góða litasamsetningu skaltu prófa það í að minnsta kosti eina viku. Mat á litum krefst innsæi sem byggist með tímanum. Gefðu þér tíma til að gleypa persónuleika kerfisins að fullu.
  • Þegar þú heldur að þú hafir góða litasamsetningu skaltu ekki láta það ganga í ljós. Bragðast gestir þínar, eins og þitt, breytast með tímanum. Gerðu athugasemd við endurskoðun lita eftir fjóra mánuði. Þá spyrja, eru þau enn viðeigandi? Ef ekki, hvað hefur breyst? Hvaða þættir munu hafa áhrif á aðlögun þína?
  • Notaðu ljómandi litum sparlega. Skrúður af einhverjum regnboga mun draga gesti þarna, en ef þeir sjá það alls staðar, munu þeir renna ósjálfráðar.
  • Sumir hugsa litakerfi hafa þröngt svið. Leyfa einhverjum svigrúmum til að gefa hönnuninni meiri dýpt.
  • Forðastu hreina primaries eins og rautt, grænt, blátt og gult. Gefðu þeim tinge fyrir alvöru eðli: rauður, en örlítið fjólublár, blár með snerta grænt, "heitt" gult með appelsínugult litbrigði.
  • Gakktu úr skugga um að litirnir virka þegar dofna. Ef þú velur rautt skaltu vera meðvitaður um að ljósrauður getur verið kvenleg og dökk rauð líta út eins og ryð eða blóð. Gulur keyrir frá fallið sólarljósi til dökkbrúnt. Dökkblár er dularfullur og ljósblár er friðsælt eða rafmagns ef þú ert ofmetinn.
  • Mac notendur, stilla skjáinn þinn. Farðu í "System Preferences" og smelltu á "Universal Access." Setjið skjáinn í "Notaðu gráskala". Þetta kemur líka sér vel þegar þú ert í skapi fyrir kvikmyndahátíð.
  • Sama hversu virkur þú vilt að vefsvæðið þitt sé til staðar, notaðu hlutlausan bakgrunn. Svartur, hvítur og grár virkar vel með næstum öllum lit.
  • Ef þú vilt fá smá texta (td 14 stig eða minna) til að passa við stórt litasvæði, veldu textann nokkra tónum dökkari en venjulega. Þetta mun vega upp á móti ljósreikningunum inni í stafunum.
  • Notaðu fleiri tónum af færri litum.
  • Það sem lítur vel út er innsæi. En innsæi er bardaga milli sjálfs þíns, áhorfenda ásýnd og vald fólksins sem fjármagna verkefnið.
  • Notaðu slökkt á bakgrunni til að gera efni áberandi:


    nota andstæða til að gera efni standa út


Skrifað eingöngu fyrir WDD eftir Ben Gremillion . Hann er sjálfstætt vefur hönnuður sem hefur lært að óstöðugleiki frestur er í öfugu hlutfalli við fjölda aðgerða sem óskað er eftir í síðustu stundu.

Hvernig býrð þú vel litaskema? Hvað virkar og hvað virkar ekki fyrir þig?