Täysin ymmärrä muotoilun kontrasti
Yleensä kontrastin aihe on varattu aloittelijoille. Kirjat sanovat "mustalla ja valkoisella on kontrasti, punainen ja oranssi eivät" - mutta siinä on paljon muutakin.
Alkeiskirjat yleensä koskettavat vain värikontrastia, mutta entä koon ja muodon kontrasti? Usein helpoin tapa kertoa amatööri suunnittelija ammattilainen on tarkastella niiden kontrastin käyttöä.
Merkittävän rakenteen luominen koon, muodon ja värin avulla on sivuvaikutus ja luettavuus lukijalle.
Tässä artikkelissa tarkastelemme kontrastia yksityiskohtaisesti, tarkastelemme suurta typografiaa, funky-muotoja, selkeitä osuuksia, kuvakuvia ja miten ne sopivat hyvin yhteen käyttämällä kontrastia hyvästä käyttäjäkokemuksesta.
Johdatus kontrastiin
Kontrasti voi olla määritellyt kuten "visuaalisten ominaisuuksien ero, joka tekee esineestä (tai sen esityksestä kuvassa) erottuvan muista esineistä ja taustasta." Selkeänä englanninkielisenä, jota voidaan kuvata perustavanlaatuisella tasolla "asioita, jotka näyttävät erilaisilta toisilta. ”
Muotoilijoille käytännön harjoittelussa, mutta erityisesti web-suunnittelijoilla, kontrasti on lähes kaiken juuri. Pyrimme jatkuvasti luomaan tärkeitä hierarkioita, vetämään ihmisiä tiettyihin sivuihin ja viestimään selkeä ja ytimekäs viesti työmme ytimessä. Suunnittelun eri elementtien välisten suhteiden luominen on vain tärkeintä, mitä voit tehdä. Olet todennäköisesti tehnyt sitä jo paljon, tietoisesti tai ei.
Ilmeiset esimerkit kontrastista ovat mustavalkoiset, suuret ja pienet, nopeat ja hidas, paksut ja ohut. Vastakkaiset ovat helpoin tapa ymmärtää, mikä kontrasti on, mutta kun käytät kontrastia suunnittelutyöhön, se ei ole koskaan aivan mustavalkoinen. Jos ihmettelette, silloin syntyy sanoma siitä, että tilanne on "mustavalkoinen", mikä johtaa myös siihen, että jotain on "harmaa alue". Suunnittelussa vertaillaan usein erilaisia asioita, jotka eivät ole päinvastaisia, esimerkiksi H1 ja h1, tai "lisää ostoskoriin" -painiketta ja "check out" -painiketta. Tässä kohtaa kontrastin suurentuminen.
Katsotaanpa eri kontrastityyppejä ja joitain esimerkkejä siitä, miten niitä käytetään web-suunnittelussa.
Väri Kontrasti
Yleisin esimerkki kaikesta, tämä on melko paljon, missä kaikki alkaa. Jos kaksi väriä eroavat toisistaan (esim. Mustavalkoiset), ne ovat suurella kontrastilla, kun taas jos ne ovat hyvin samanlaisia (punainen ja oranssi), niiden kontrasti on heikko.
TekRoc käyttää erittäin ilmeistä värinkontrastia peittämällä kirkkaasta ja elävää kuvaa erittäin tumman taustan päälle. Valoisa oranssi ja sininen selvästi erottuvat ja silmä on välittömästi piirretty heille ennen kaikkia muita sivuja.
Tim Van Damme tekee erinomaisen värisävyn käytön GoWalla-sivuston suunnittelussa. Sivun yläosassa oleva monivärinen raja ei ole vain erilainen ja luo visuaalista mielenkiintoa olemalla erilainen kuin vaalea tausta, mutta hän on myös lisännyt äärimmäisen hienovaroittavia 1px-pudotusvarjoja tekstin painikkeisiin. Hieman tummempi oranssi todella auttaa luomaan kontrastin valkoisen tekstin ja oranssin taustan välillä.
Envato on hienovaraisen kontrastin päälliköt ja 1px-rajojen käyttämisen suuntaus voidaan luultavasti antaa heille enemmän kuin kukaan muu. Kaikkien sivustojen ominaisuuksiin kuuluu useita yksittäisiä pikselirajoja, jotta kontrasti voidaan jakaa osioiden välillä. Kuvaruudussa, jonka yläpuolella kaksi sisältöaluetta olisi voinut jakaa vain avaruudessa tai yhdellä rivillä, käyttämällä kahta riviä (yksi tumma, yksi valo) ne luovat hienovaraisen kontrastin näiden kahden osion välillä, joka on erittäin tehokas.
Koko kontrasti
Seuraavaksi yleisin kontrasti on kokoa. Jotain suurta jotain pienen viereen viittaa siihen, että isompi tuote on paljon tärkeämpi. Se on oikein, sanomme, että koko on tärkeää!
MadeByWater on Jordan Vitanovin suunnitteluportaali. Hän käyttää koko kontrastia äärimmäisen suurella typografialla ja välittää välittömästi Bruce Lee'n lainauksen, joka määrittää, miksi hän on päättänyt merkitä itsensä MadeByWater-nimellä.
28Thiers on houkutteleva upmarket bar Ranskassa. Heidän verkkosivuillaan on hyvä käyttää koko kontrastia kiinnittääkseen huomionne välittömästi Martini-valokuvalle, jossa on ympäröivä valikoima ainesosia. On heti selvää, että tämä on sivun tärkein elementti ja suunnittelija haluaa, että katsot tätä kuvaa ja myydään siitä, että se on erittäin tyylikäs rakennus.
SlideScreen käyttää useita eri kokoisia kontrastitarkkuuksia. Niiden lisäksi, että heidän tuotteensa näyttävät suurella kuvakaappauksella, he käyttävät myös hyvin suuria painikkeita ensisijaisiin puheluihinsa. He haluavat, että voit katsella heidän tuotettaan videota toiminnassa ja sitten he haluavat sinun ladata sen. Nämä ovat sivun tärkeimpiä elementtejä, joten ne ovat huomattavasti suurempia kuin muut ympäröivät asiat.
Muoto kontrasti
Muotokontrastit merkitsevät asioiden merkitystä niiden fyysisessä erossa verrattuna muihin sivuilla oleviin asioihin. Yksinkertaisimmalla tasolla sitä voidaan käyttää esimerkiksi pyöristettyjen kulmien lisäämiseen painikkeisiin, mutta korkeammille tasoille se voi herättää paljon enemmän huomiota.
Anebstar käyttää muotokontrastia esittelemään kolme tärkeää kuvaa otsikossa. Koska useimmat verkossa olevat asiat ovat suorakaiteen muotoisia, yksi helpoimmista tavoista saada kontrasti on käyttää ympyrää. Tietenkin tässä esimerkissä on myös pienikokoinen kontrasti sekaisin, mutta voit selvästi nähdä, miten pyöreät elementit eroavat kaikista muista sivuista.
Carbonmade on upea sivusto, jossa on todellinen sekoitus upeita kuvioita ja hyvin esiteltyä sisältöä. Yksinkertainen kirjautumispainike täällä olisi toiminut, mutta koko ja väri kontrasti luultavasti eivät olisi asettaneet sitä riittävän erillään kiireisestä taustasta. Ystävällisen mustekalan lisääminen painikkeen taakse antaa sille todella eron, joka vetää silmän suoraan siihen.
WireframePlus käyttää yksinkertaista mutta äärimmäisen tehokasta muotoilun kontrastia korostaakseen palveluidensa hintaa. He haluavat, että voit lukea heidän sisältöään, mutta ennen kaikkea he yrittävät myydä sinulle suurella hinnalla asettamalla suuren ympyrän sen takana.
Paikanna kontrasti
Kontrastin luominen paikannukseen on erittäin siisti tapa luoda elementtien hierarkia pelkästään käyttämällä erilaisia kohdistuksia. Viime aikoina tämä tekniikka on saanut suosittua ihmisiä, kuten Elliot Jay Stocks, joka käytti sitä äärimmäisyyteen viimeisimmässä portfoliosivustossaan.
Elliot Jay Stocks käyttää yksityiskohtaista verkkoa määritelläkseen kaikki sivustonsa elementit. Huomiota kutsutaan tiettyihin alueisiin, koska ne on sisennetty vasemmalle tai oikealle. Tässä nimenomaisessa kuvakaappauksessa johdantokappale todella erottuu, koska se on linjassa kauimpana vasemmalle, jossa silmä näyttää ensin lukea jotain. Tämäntyyppinen kohdistaminen on "inspiroinut" monia muita suunnittelijoita viimeisten 12 kuukauden aikana luomaan malleja, joilla on positiivinen kontrasti saman tyyppisessä tyylissä.
SimpleBits on brändi, jonka Dan Cederholm työskentelee, saatat tuntea hänet mm Dribbble . Ensimmäisillä näyttökerroilla SimpleBits-sivustolla ei näytä olevan mitään sijainnin kontrastia, mutta kun aloitat vierityksen, kaikki tulee selväksi. Jos jotkut käyttävät kiinteää taustakuvan luoda tyylikäs tyylikäs vaikutus, Dan on tehnyt logonsa ja navigoinninsa täysin kiinteäksi, joten riippumatta siitä, mihin vierität, ne pysyvät aina samassa paikassa näytöllä. Tämä on erinomainen esimerkki epätyypillisestä sijainnin kontrastista.
SquaredEye on design-myymälä, jonka ylläpitää Matthew Smith, ja hänen portfolioissaan tapaustutkimuksen sivut tekevät fantastisesta kontrastin käytöstä. Sinun täytyy nähdä koko sivu todella saada käsitys, mutta lähinnä Matthew on huolellisesti luotu erityinen paikannus jokaiselle sivulle. Tämä luo fantastisia ristiriitoja osuuksien välillä ja luo paljon visuaalista mielenkiintoa lukijalle olematta häiritsevää.
Kontrastipäätelmät
Paljon muutakin kuin vain "vaalea ja tumma" - se on yksi suunnittelun tärkeimmistä periaatteista, ja sinulla ei ehkä ole koskaan liikaa, jos käytät sitä oikein.
Suunnitteluasi seuraavalle tasolle ei ole kyse siitä, että seuraava bändi vauhditetaan pyöristettyjen kulmien käyttämiseen ja pudottaa varjoja kaikesta, vaan se on löytää parempia ja tehokkaampia tapoja viestiä viestin suunnittelun taakse .
Kontrastin tutkiminen yksityiskohtaisesti ja sen hyödyntäminen sen täydessä potentiaalissa on yksi parhaista tavoista tehdä tämä.
Mitä mieltä sinä olet? Kuinka paljon huomiota kiinnität kontrastisuunnitteluun? Ajatteletko sitä koko ajan vai onko se jotain, joka tulee luonnollisestikin?