Kuvankäyttö Web-suunnittelussa
Kuva on uskomattoman monipuolinen työkalu, joka voi löytää monia erilaisia käyttötapoja suunnittelussa. Ja kun on kyse web-suunnittelusta, voimme löytää erittäin monenlaisia toteutuksia.
Tänään haluan kaivaa joitain avaintekijöitä, joiden avulla tämä työkalu on luotu, jotta voimme tehdä uusia ideoita innostavaksi ja haastamasta tuottamamme malleja.
Aloitetaan jonnekin harvoin, perusmäärittelyllä: Kuvitettu: 1) tehdä selväksi ; 2) tehdä selväksi antamalla tai toimimalla esimerkkinä tai esimerkkinä; 3) Tarjoamaan visuaalisia ominaisuuksia, jotka on tarkoitettu selittämään tai koristelemaan .
Näyttää siltä, että web-suunnittelun reaalimaailmassa havainnolla on taipumus suorittaa molemmat toiminnot kerralla. Se kaunistaa, kun se selventää. Ja jos se tekee vain yhden näistä, sinun on ehkä kysyttävä itseltään, miksi. Ehkä asettamalla havainnollistamalla molempia rooleja täyttävää työtä on tapana todella hyödyntää suunnittelun elementtiä kaiken sen kannalta.
Tämä ei tietenkään tarkoita sitä, että malli ei onnistu, jos se käsittelee vain yhtä tai toista; varmasti se voi. Mutta saadaksemme kaiken irti työmme mielestä haastavat ajattelumme ovat aina hyödyllisiä. Kuten tavallista, haetaan joitain näytteitä, jotta näemme, mitä tällä visuaalisella laitteella voidaan tehdä. Pitäkää, pitäkääkö jokainen lähestymistapa selkeyttä vai koristelu vai molemmat.
Temaattinen kuva
Ensimmäinen lähestymistapa havainnollistamiseen, jonka haluan käsitellä tässä, on tämän tyylin käyttö yleisen teemakohtaisen lähestymistavan tuottamiseksi. Tässä tilanteessa kuvitukset toimivat yleisen teeman luomiseksi. Aiomme nousta vuoristoon, käydä avaruusasemalla tai tutkia yrityksen toimistoa?
Vaikka tämän lähestymistavan ei tarvitse viedä meidät paikalle, se tapahtuu usein. Muissa tilanteissa tyyli yksinkertaisesti luo yleisen motiivin, jota sivusto seuraa.
Syy, mistä olemme kiinnostuneita täällä, on kuitenkin se, että sitä käytetään yleisen mallin käyttämiseen radikaalisti. Kuva ei ole mikään pieni tukielementti. Sen sijaan se on näkyvin elementti ja hallitsee koko ulkoasua.
Hanki pomoni North Capeille
Tässä näytteessä lähestymistapa ei voinut olla selvempi. Sivuston suunnittelu heijastaa selkeästi kaikkein perustavanlaatuista tarkoitustaan. Kuvassa on visuaalinen viittaus siihen, mitä yksilö tekee. Ja kuvituksen määrittelyssä kuvassa on koristelu ja kauneus sivulle.
Tässä tapauksessa teema vahvistaa sivuston tarkoituksen ja auttaa käyttäjää ostamaan konseptin.
Launch Kit
Teemakohtaisen lähestymistavan ei tarvitse olla niin tylppä. Joskus se voi olla luonnollisempi osa tyypillisempiä sivustoja. Tässä tapauksessa sivustolla on hieman ainutlaatuinen asettelu, ja teema ei pakota ylilyöntiä, joka perustuu rakettialuksiin.
Sen sijaan teema on kudottu muotoiluun siten, että se viestii koristeellisia koskettamisiaan häiritsemättä sisältöä. Tässä kuvassa koristellaan, mutta ei selvitä niin paljon. Tämä ei ole lainkaan yllättävää ja tietenkin osoittaa, ettei ole mitään kaavaa.
Atelier Anonyme Design
Muissa tilanteissa, kuten tässä, temaattinen kuva on kirjaimellisesti IS-sivusto. Se ei ole tukielementti vaan pikemminkin itse muotoilu.
Tässä havainnollistamisen käytöllä on selvästi koristeellinen rooli. Mutta väittäisin, että se tarjoaa myös suurta selkeyttä kävijälle. Tämä on suunnittelutoimiston verkkosivusto. Sivuston suunnittelu ja luonne viestivät paljon vierailijoilleen. Sellaisena olen varma, että se toimii massiivisena suodattimena asiakaskuntaansa. Sinut joko vetäytyy ja rakastat leikkimielistä ja luovaa lähestymistapaa, tai sinä suljet kokonaan sen. Joten tähän kohtaan, mielestäni se antaa paljon selkeyttä virastolle ja heidän mentaliteettinsa puolesta.
Allure Graafinen suunnittelu
Tällä sivustolla kuvion käyttö on selkeä temaattinen lähestymistapa. Vaikka sivusto noudattaa joitain tavanomaisia ulkoasumuotoja, koko muotoilu on kääritty temaattiseen ulkoasuun. Nämä elementit ohjaavat paitsi sivuston suunnittelua, mutta ne yhdistyvät sivuston päälogon ja kopion kanssa. Teema on immersiivinen ja ohjaa koko viestin sivustolle.
Muita temaattisia näytteitä
Seuraavassa on muutamia sivustoja, jotka käyttävät temaattisia kuvia luomalla sivuston ympäristö tai teema.
Maaorava
Drift Boys
Iutopi
Chandu4u
maskotit
Kuinka voin kattaa ajatuksen kuvitusten käytöstä tarkastelematta yhtä ilmeisintä: maskotit? Tämän visuaalisen elementin avulla suunnittelijat pyrkivät henkilökohtaistamaan sivuston, tuotteen tai tarkoituksen luonteeltaan. Tällaisen elementin toteutus ei ole pelkästään riippuvainen, mutta sen taustalla oleva teho ja päättelykin.
inkFinder
Tässä mallinnuksessa havainnollistetulla maskotilla on melko selvä rooli. Selvä, että se echos tuotteen nimi. Se ei ainoastaan anna suunnittelulle elämän, mutta se asettaa sen kasvot. Tällä tavoin yleisöllä on jotain hieman ainutlaatuisempia tiedostoja aivoissaan. Toivottavasti maskotti auttaa tekemään mieleenpainuvamman ja ainutlaatuisen kokemuksen, joka auttaa tuotteen erottua kuulosta.
Ehkä se on maskuliinisen tehokkain tarkoitus auttaa jotain erottumaan. Tällainen kuvitteellinen maskotti on hieno asia, että se voi olla täysin ainutlaatuinen ja erityinen tälle tuotteelle. Olettaen, että se on muokattu tälle mallille, sen pitäisi olla ainoa paikka, jossa tämä tarkka kuva on olemassa.
Evnt
Ironista kyllä löydämme täältä toisen havainnollistetun mustekala-mallin maskotti (mikä on kolmipyöräinen merieläin?). Tässä tapauksessa maskotti on ilmeisesti paljon suurempi askel todellisuudesta: robotti, jossa on kolmijalkainen aivot, jossa aivot kuplassa.
Vaikka se saattaa olla kummallinen valinta, se tarjoaa kauniin tunnusmerkistön tapahtumalle. Tämä ainutlaatuinen maskotti antaa viileän visuaalisen elementin yhdistää tapahtumaan. Se vie elämäänsä kaikki omat ja yhdistää ihmiset aidosti konkreettisiin. Oletan, että tämä on juuri maskottien tarkoitus.
Tämän sivuston suunnittelu on kaunis, mutta harkitse kuinka tylsää se olisi ilman tätä hullua maskotti paikallaan. Tällaisen elementin tuottaminen ei ole helppoa, mutta se on erittäin tehokas tässä tilanteessa.
Big Eye Creative
Esimerkiksi ei-mustekalaispohjaisesta maskotteista katsokaa Big Eye Creative sivusto. Tässä maskotti ei ole yhtä paljon hallitseva rooli suunnittelussa. Se kuitenkin lisää siihen paljon persoonallisuutta. Ilmeisesti muut kuvat ja yleinen tyyli sivuston tekevät vähemmän virallisen esityksen. Mutta logo maskotti on läsnä koko sivustolla. Tämä takaa niiden valo-tyyppisen tyylin läpäisee suunnittelun.
Muita maskotti kuvituksia
Tässä on muutamia näytteitä maskotteista työssään suunnittelussa. Mukaan lukien vielä yksi mustekala; näyttää siltä, että se on suosittu käytettäväksi.
Pioneer Records Management
Argyle Octopus
coucou
Konsebt
Kuvitettu sisustus
Seuraava käyttötarkoitus, jonka haluaisin harkita, on se, mitä tarkoitan teemakuviona. Tämä on silloin, kun kuva on otettu toimimaan koristeellisella tavalla, joka ei todellakaan anna erityistä fyysistä viitettä. Esimerkiksi useimmiten kuvassa on kuvia ihmisistä, eläimistä, esineistä tai paikoista. Mutta tässä tapauksessa kuva ei ole niin paljon todellista, vaan pikemminkin se sisustukseltaan kaunistaa muotoilua tavalla, joka vain voi kuvata. Kuten aina, selvenkäämme tämän läpi joitakin näytteitä.
1000 WP teemaa
Ensimmäisessä esimerkissämme pitää 1000 WP teemaa verkkosivusto. Tällä sivustolla kuvion käyttö tarjoaa sivustolle taustalla olevan kehyksen ja tyylin. Mutta se tekee niin puhtaasti koristeellisiksi. Yleinen tyyli tuntuu kuvitellulta, mutta sillä ei ole tyypillisiä humanistisia elementtejä.
Haluan vastustaa täysin itseäni. Uskon, että tyyli on pääosin koriste. Mutta voin todella nähdä, miten voimme väittää, että se tarjoaa selkeyttämisen sivustolle. Tyyli, jota muotoilu käyttää, yhdistyy tiettyyn yleisöön. Se kertoo sivuston tyylistä ja aiheista, joita he voivat tuottaa. Monilla tavoilla kuvitetun ulkoasun laatu osoittaa työn laatua, jonka saatat odottaa tämän sivuston kautta. Tällä tavoin selvennys on ehkä hienompaa ja vähemmän kasvosi edessä, mutta silti on olemassa.
Coca-Cola-historia
Tällä verkkosivustolla löydämme toisen mallin, jota kuvataan. Tässä on joitain havainnollistettuja elementtejä, jotka osoittavat todellisia asioita, mutta suurin osa temaattisesta lähestymistavasta on tehty puhtaalla koristelulla. Tämä esimerkki ei ainoastaan näytä lähestymistapaa, mutta se osoittaa myös, että melkein mitään tekniikkaa ei käytetä puhtaasti. Tosiasia on, että todennäköisesti yhdistät nämä tekijät eri tavoin.
Metaphiziks
Tässä viimeisessä esimerkissä koristeelliselle havainnolle löytyy erinomaisia taustaelementtejä. Jotkut näistä ovat konkreettisempia kuin muut, mutta kaiken kaikkiaan ne ovat enemmän tyylistä tukea kuin mikään muu. On huomattavaa, kuinka kauniita tällaisia yksinkertaisia piirustuksia voi yhdistää kauniiseen tekstiin, hyvin valittuihin väreihin ja yksinkertaisiin kuvakkeisiin. Lopputulos on fantastinen ja upea.
Lisää kuvioita kuvitettu sisustus
Seuraavassa on muutamia lisäesimerkkejä tämän muotoilun muotoilemista varten.
Moo's Cupcakes
Tech Jobs
Pixel Stadium
Custom Bags HQ
Kuvitettu teksti
Käsinteytetty teksti ei todellakaan ole uusi käsite, ja se on jotain, jota olen käsitellyt monta kertaa ennen . En ole kuitenkaan koskaan pitänyt tällaista lähestymistapaa havainnollistamisnäkökulmasta.
Käsityöteksti on yksi suosittu muunnelma kuvitetusta teksteistä ja erinomainen ratkaisu monille mainoksille. Yhden, se on loistava tapa laittaa kaikki tämä käytännön taidekoulun koulutus työhön. Toiseksi, se on loistava tapa tuottaa jotain ainutlaatuista. Loppujen lopuksi, jos käsittelet jotain tekstiä, se on 100% ainutlaatuinen. Vaikka piirritte nykyisen kirjasintyypin, siitä tulee edelleen erillinen luomus.
Rangus
Tämä on täydellinen esimerkki kuvitetusta tyypistä. Tyyli on erittäin upea, täysin yksilöllinen ja erittäin kutsuva. Mutta se ei pysähdy siellä. Käsin tehty tyyli todella osoittaa yksilöiden kykyjä. Se osoittaa, että hän luo taideteoksia kädet ja se yhdistää täydellisesti hänen animaation taitojaan. Erityisen rakastan sitä, että kaikki perustuvat liitutauluun, sillä se todella yhdistää teeman ja elementit yhteen täydellisesti. Mielestäni tämä sivusto osoittaa, kuinka yhtenäinen kuva voi olla sivuston tarkoituksen ja viestin kanssa.
Joey Lomanto
Tässä tapauksessa kuvattu teksti on paljon hienompaa. Sen sijaan, että se vetää suunnittelun koko suunnan, se vain toistaa mukavasti. Itse asiassa ensimmäistä kertaa et ehkä edes huomaa suurta kotisivua käsin muotoiltua tyyliä. Hyväksytty, teksti voi olla fontti, mutta sitä on käytetty siten, että se yhdistyy täydellisesti sivuston tyyliin. Riippumatta siitä, tyyli on kauniisti yhtenäinen, ja kuvassa on monta roolia kokonaissuunnittelussa.
Elä
Kuvitettua tekstiä ei kuitenkaan tarvitse esittää käsin. Kuten tässä esimerkissä on, teksti on muotoiltu eri tavoin, jotka kääntävät tekstin itsensä bittien kokonaislukuun. Tämän lähestymistavan kauneus on se, että se yhdistää tekstin muihin kuvioihin. Tämä välttää vähemmän yhtenäisen tunteen, jossa sinulla on vain kuvioita tavallisesta web-pohjaisesta tekstistä. Jälkimmäinen voi toimia, mutta tässä tapauksessa kuvitetun tekstin vaikutus on selvä.
Muita näytteitä kuvitetusta tekstistä
Seuraavat esimerkit sopivat löyhästi tähän luokkaan. Sanon löyhästi, koska on vaikea sanoa ajoittain, koska se on joskus hieno asia. Joissakin näistä tapauksista teksti vain tuntuu taideteokselta, joten olen sijoittanut sen tähän kokoelmaan.
Kontrasti kapina
Fakta
La Web Shop
Informatiiviset kuvat
Kuvion määritelmän mukaan yksi sen tarkoitus on selventää ja selittää. Joten on vain sopivaa, että löydämme joitain esimerkkejä, joissa kuvitukset tekevät tämän poikkeuksellisen selkeästi.
Kirjaviisas
Aloitetaan Kirjaviisas sivusto. Tässä epätavallisessa ulkoasussa todetaan, että kuvat selvästi kuvastavat kotisivun eri kohtia. Jokaisessa lohkossa on visuaalinen elementti, joka ei vain kaunistaa sitä, mutta vielä tärkeämpää, selittää sen. Niin paljon, että lukijana minulla ei edes tarvitse lukea kopiota. Laitteet kuvassa vasemmassa alareunassa osoittavat erityisesti tämän.
Conferize
Paljon vähemmän näkyvällä tavalla tämän mallin kuva on yhtä informatiivinen. Yksinkertainen kuva yksinkertaisesti osoittaa sivuston aiheen. Se ei ehkä lyö sinua pään yli sen sanomalla, mutta se heijastaa sivuston tarkoitusta kauniisti.
Aktivoida
Tässä mallissa oleva kuva ei ainoastaan välitä tietoja tapahtumasta, jota se edustaa, vaan myös kuuntelee tapahtuman varsinaista tarkoitusta. Tämä erityinen tapahtuma pyörii irti teknologiasta. Se on mahdollisuus ihmisille, jotka ovat saastuneet teknologian kanssa, pääsemään pois kynsistä.
Kuva tässä osoittaa meille, mitä osallistujat tekevät, joten se on informatiivinen. Ja hyvin luonteeltaan tämä kuva rikkoo teknologiaa ja juurtaa itsensä puhtaasti orgaanisella tunnelilla, joka on pohjimmiltaan loistava tapa kommunikoida sivustotarkoituksia.
Lisää informatiivisia kuvia
Nämä ylimääräiset sivustot osoittavat myös idean kuvista, jotka ilmoittavat meille. Jotkut ovat pieniä ja peruskuvakkeita, kun taas toiset ovat upottavia elementtejä, jotka määrittelevät ja edustavat sisältöä.
Vitality City
Uklizenodoma.cz
Qubiq
Teknologinen vastalääke
Viimeisen esimerkin (The Aktivoida sivusto) me astuimme siihen, mitä haluan seuraavaksi tarkastella, kuvankäyttöä rikkoen asioiden teknologisen suuntauksen. Joskus on välttämätöntä irrottaa verkon teknisistä perusteluista ja osoittaa hyvin orgaanista tunnetta. Kuva on yksi tehokkaimmista työkaluista tällaisen idean toteuttamiseen.
Lähetyslaite
Tämä yksinkertainen pian tulossa oleva sivu on vain poikkeuksellinen. Ja selvästi, miten se saavuttaa sen kauneuden on yksinkertaisesti yksinkertainen. Yksi valtava kuva yksinkertaisesti häiritsee meitä siitä, että tämä on web-sivu. Se tuntuu enemmän taideteokselta, joka sattuu olemaan pieni interaktiivinen elementti, varmasti erinomainen tapa saada valtava vaikutus käyttäjille ja luoda mieleenpainuva kuva.
Muziekpark
Vaikka tämä sivusto ei käytä aivan yhtä radikaalia lähestymistapaa, kuva on edelleen suuri ja näkyvä ulkoasu. Tässä animoidut kuvat hengittävät elämää sivulle. Yhdistä tämä luovaan ja epätavalliseen asentoon, ja se tuntuu täysin irti siitä teknologiasta, joka ohjaa sitä. Ehkä se, että se ei näytä tavalliselta sivustolta, on tässä myös voimakas rooli. Katso myös, että kuva tässä tapauksessa todella auttaa meitä kertomaan sivuston teemasta.
Egopop
Vielä eräällä epätyypillisellä ulkoasulla olemme havainneet, että kuva on otettu käyttöön. Tässä taideteos kertoo paitsi yksittäisen sivuston edustamasta, mutta myös meidät poistavat tavallisesta verkon ajattelusta, jota kävijällä saattaa olla. Jälleen, se tuntuu enemmän kuin interaktiivinen taideteos kuin verkkosivuilla. Jos tämä on tavoitteesi ja tarpeesi, niin tämä on hyvä lähestymistapa.
Zaarly
Edellisiin esimerkkeihin verrattuna, Zaarly sivusto on jyrkkä kontrasti. Vaikka suunnittelua ohjataan yhdestä suuresta kuvasta, ja tämä kuvio sävyttää sivuston sävy, taustalla oleva toiminto on paljon monimutkaisempi kuin näillä näytteillä.
Tämä sivusto on sovellus, jota on tarkoitus käyttää. Ja kuva auttaa luomaan tiettyjä odotuksia. Se antaa valonläheisen, humanistisen tunnelman, joka on selvästi orgaanista ja luonnollista tunnetta. Kuvittele tämä toisin kuin semi-minimalistiset sovellukset, joilla ei ole persoonallisuutta. Suunnittelu antaa sivustolle lähestymistavan tunteen ja muuttaa odotuksiamme.
johtopäätös
Kuvasisällön käyttö on ikivanha käytäntö ja sen soveltaminen verkkoon on selkeä. Kuten minkä tahansa muotoilun kannalta, nautin prosessin uudelleentarkastelusta sen tarkoituksesta ja käytöstä. Tällaisella ponnistelulla havaitsen väistämättä, että saan paremman ymmärryksen siitä, miten se toimii, miten se hyödyntää sitä aiottuun tarkoitukseen ja viime kädessä tuoreita ja inspiroivia ideoita.
Miten käytät kuvitusta web-suunnittelussa? Jaa omaa kokemuksiasi alla ....