Notkun mynda í vefhönnun
Myndin er ótrúlega fjölhæfur tól sem getur fundið mörg mismunandi notkun í hönnun. Og þegar kemur að vefhönnun getum við fundið afar fjölbreytt úrval af útfærslum.
Í dag ætla ég að grafa inn á nokkra lykilatriði að þetta tól sé komið í vinnslu þannig að við getum nýtt hugmyndir til að hvetja og skora á hönnun sem við framleiðum.
Við skulum byrja einhvers staðar sem ég geri sjaldan, með undirstöðu skilgreiningu: Illustrated: 1) Til að gera skýrt ; 2) Til að gera ljóst með því að gefa eða með því að þjóna sem dæmi eða dæmi; 3) Til að sjá með sjónrænum hætti sem ætlað er að útskýra eða skreyta .
Það virðist sem í raunverulegum heimi vefhönnunar, þá hefur myndin tilhneigingu til að framkvæma báðar aðgerðir í einu. Það fegrar á meðan það skýrir. Og ef það er aðeins að gera eitt af þessum gætirðu þurft að spyrja sjálfan þig afhverju. Kannski með því að setja mynd í vinnuna sem uppfyllir bæði hlutverk er leiðin til að sannarlega nýta hönnunarþáttinn fyrir allt sem það er þess virði.
Þetta er auðvitað ekki að segja að hönnun geti ekki náð árangri ef það aðeins meðhöndlar einn eða annan; vissulega getur það. En til þess að fá sem mest út úr vinnu okkar finnst mér að krefjandi hugsun okkar sé alltaf gagnlegt. Eins og venjulega, skulum grípa inn í nokkra hópa af sýnum til að sjá hvað hægt er að gera með þessu sjónarhorni. Á leiðinni, íhuga hvort hver nálgun veitir skýrleika eða skreytingu, eða bæði.
Thematic illustration
Fyrsta nálgunin á myndinni sem ég vil ná til hér er að nota þessa stíl til að framleiða heildarþemuaðferð. Í þessu ástandi eru myndir teknar í notkun til að koma á heildarþema. Erum við að klifra fjöll, heimsækja geimstöð eða skoða skrifstofu fyrirtækisins?
Þó að þessi nálgun þarf ekki að taka okkur á stað, þá gerir það það oft. Í öðrum aðstæðum stofnar stíllinn einfaldlega heildar myndefni sem síða fylgir.
Ástæðan fyrir því að við höfum áhuga á því hér er að það er notað til að keyra heildar hönnun á róttækan hátt. Myndin er ekki smá stuðningsþáttur. Þess í stað er það mest áberandi hönnunarþáttur og stjórnað öllu skipulagi.
Fáðu stjóra mína til Norður-Cape
Í þessu sýni gæti nálgunin ekki verið skýrari. Hönnun svæðisins endurspeglar augljóslega einfaldasta tilgang sinn. Myndin gefur til kynna sjónrænt tilvitnun um hvað einstaklingur muni gera. Og hvað varðar að skilgreina myndina veitir listin skraut og fegurð á síðunni.
Í þessu tilfelli skilgreinir þemað staðsetning svæðisins og hjálpar notandanum að kaupa inn á hugtakið.
Sjósetja Kit
Þemagreining þarf ekki að vera svo slæm á þann hátt. Stundum getur það verið náttúrulega hluti af yfirleitt byggðri síðu. Í þessu tilviki er vefsvæðið örlítið einstakt í skipulagi þess og þemað þvingar ekki nokkra yfir-the-toppur tengi byggt á eldflaugarskipum.
Í staðinn er þemað ofið inn í hönnunina þannig að það skili skreytingar snertingu án þess að trufla efnið. Hér þjónar myndin að skreyta, en ekki skýra svo mikið. Þetta kemur ekki á óvart yfirleitt og sýnir auðvitað að það er engin formúla til að fylgja.
Atelier Anonyme Design
Í öðrum aðstæðum, eins og þessari, er þemaþátturinn bókstaflega staðurinn. Það er ekki stuðningsþáttur, heldur verður alveg hönnunin sjálf.
Hér er notkun myndarinnar greinilega skreytt hlutverk. En ég myndi halda því fram að það veitir einnig mikilli skýrleika fyrir gesti. Þetta er vefsíða fyrir hönnun auglýsingastofu. Hönnunin og eðli þessarar síðu hefur mikið samband við gesti sína. Sem slík er ég viss um að það þjónar sem gríðarstór sía til viðskiptavina sinna. Þú verður annaðhvort dregin inn og elska leiksleg og skapandi nálgun, eða þú verður algjörlega slökkt á því. Svo að þessu sinni, held ég að það veitir mikla skýrleika um stofnunina og hugarfar þeirra.
Allure Graphic Design
Á þessari síðu er einnig að nota skýringarmynd í myndinni. Þó að vefsíðan fylgir einhverjum venjulegum uppsetningarsamsetningum er allt hönnun vaflað í þemaútgáfu. Þessir þættir keyra ekki aðeins hönnun svæðisins, heldur sameinast þau við aðalmerkið og afritið sem notað er á síðunni. Þemað er immersive og rekur alla skilaboð sem síða kynnir.
Viðbótarupplýsingar þema sýnishorn
Hér eru nokkrar viðbótarsíður sem nýta sér þemamyndir til að koma á umhverfi eða þema fyrir vefsvæði.
Chipmunk
Drift Boys
Iutopi
Chandu4u
Mascots
Hvernig get ég hugsanlega fjallað um hugmyndina um að nota myndir án þess að skoða einn af augljósustu mascots? Með þessari sjónrænu þáttur hafa hönnuðir tilhneigingu til að persónugera síðuna, vöru sína eða tilgang með eðli. Ekki aðeins er framkvæmd slíkra þátta breytileg, en krafturinn og rökstuðningurinn á bak við það gerir það líka.
inkFinder
Í þessari hönnun spilar myndskreytt mascot frekar skýrt hlutverk. Hreinsa í því að það echos nafn vörunnar. Það veitir ekki aðeins lífið fyrir hönnunina, en það setur andlit á það. Á þennan hátt hefur áhorfendur eitthvað meira einfalt að skrá sig í heilanum. Vonandi hjálpar mascot að gera meira eftirminnilegt og einstakt upplifun sem mun hjálpa vörunni að standa út frá heyrt.
Kannski er þetta öflugasta markmiðið á bak við mascot, til að hjálpa eitthvað standa út. The mikill hlutur óður í myndskreytt maskot eins og þetta er að það getur verið algerlega einstakt og sértæk við þessa vöru. Miðað við að það væri sérsniðið fyrir þessa hönnun ætti það að vera eini staðurinn sem þessi nákvæmlega mynd er til.
The Evnt
Það er kaldhæðnislegt að við finnum hér annar myndskreytt kolkrabba-eins og mascot (hvað er þriggja legged sjávarvera?). Í þessu tilfelli er mascot augljóslega miklu stærra skref í burtu frá raunveruleikanum: vélmenni þriggja legged veru með heila í kúla.
Þó að það gæti verið skrýtið val, þá er það fallegt aðgreining fyrir atburðinn. Þessi einstaka mascot gefur flottan sjónræn þátt til að tengjast viðburðinn. Það tekur allt sitt líf og tengir virkilega fólk við eitthvað steypu. Ég geri ráð fyrir að þetta sé einmitt tilgangur mascot.
Hönnun þessarar síðu er falleg, en íhuga hversu sljór það væri án þess að þessi brjálaður mascot væri til staðar. Að framleiða slíkt frumefni er ekki auðvelt, en það er afar árangursríkt í þessu ástandi.
Big Eye Creative
Fyrir dæmi um mascot non-kolkrabba, skoðaðu Big Eye Creative staður. Hér spilar mascot ekki eins mikið af ríkjandi hlutverki í hönnuninni. Það bætir hins vegar við persónuleika við það. Augljóslega gera aðrar myndir og heildarstíll vefsvæðisins minni formlega kynningu. En mascot í merkinu er til staðar um síðuna. Þetta tryggir ljóshitaða stíl sinnir hönnunina.
Önnur mascot myndir
Hér eru nokkrar auka sýni af mascots í vinnunni í hönnun. Þar á meðal enn einn kolkrabba einn; Það virðist sem er vinsælt að nota.
Pioneer Records Management
Argyle Octopus
Coucou
Konsebt
Illustrated skraut
Næsta tegund af notkun sem ég vil íhuga er það sem ég vísa til sem þema skraut. Þetta er þegar myndin er tekin í vinnslu á skreytingaraðferð sem gefur ekki raunverulega ákveðna líkamlega tilvísun. Til dæmis er oftast mynd af fólki, dýrum, hlutum eða stöðum. En í þessu tilfelli lýsir myndin ekki svo mikið af neinu raunverulegu, heldur gefur það einfaldlega skreytingar til að fegra hönnunina á þann hátt að aðeins er hægt að sýna myndina. Eins og alltaf, skulum skýra þetta með nokkrum sýnum.
1000 WP Þemu
Fyrir fyrsta dæmi okkar skaltu íhuga 1000 WP Þemu vefurinn. Á þessari síðu er notkun á myndinni undirliggjandi ramma og stíl fyrir síðuna. En það gerir það í því sem er eingöngu skreytingarlegt. Heildarstíllinn líður eins og mynd, en ennþá hefur það ekki dæmigerða mannúðlegu þætti.
Nú vil ég ósammála mér sjálfum. Ég held að stíllinn sé aðallega skreytingar. En ég get reyndar séð hvernig við gætum haldið því fram að það veitir skýringu fyrir síðuna. Stíllinn sem hönnunin er notuð tengist ákveðnum áhorfendum. Það segir eitthvað um stíl svæðisins og þau þemu sem þeir gætu framleitt. Á svo marga vegu sýnir gæði myndarskreytingarinnar gæði vinnu sem þú gætir búist við að sjá í gegnum þessa síðu. Þannig er skýringin kannski meira lúmskur og minna í andliti þínu, en það er engu að síður.
Coca-Cola saga
Á þessari vefsíðu finnum við aðra hönnun sem ekið er með myndinni. Það eru nokkrar sýndarþættir hér sem sýna raunverulegar hluti, en flestir þemuaðferðirnar eru byggðar með hreinu skraut. Ekki aðeins sýndu þetta dæmi nálgunina, en það sýnir einnig að næstum engin tækni er notuð í puristíska tísku. Staðreyndin er sú að þú munir líklega sameina þessar þætti á ýmsa vegu.
Metaphiziks
Í þessu síðasta fordæmi fyrir skreytingar dæmis er hægt að finna nokkur frábær bakgrunnsþætti. Sumir þessir eru áþreifanlegir en aðrir, en í heild sinni snerta þeir meira um stílfræðilegan stuðning en nokkuð annað. Það er athyglisvert hversu falleg slík einföld teikningar geta verið þegar þau eru sameinuð með fallegum texta, vel valdum litum og einföldum táknum. Niðurstaðan hér er frábær og ótrúlega falleg.
Fleiri hönnun með skreyttri skraut
Hér eru nokkrar viðbótarskýringar til að rífa út þessa tegund af myndinni í hönnun.
Moo er Cupcakes
Tækniþjónusta
Pixel Stadium
Custom Töskur HQ
Illustrated text
Handur texti er vissulega ekki nýtt hugtak, og er eitthvað sem ég hef fjallað um mörgum sinnum áður . Hins vegar hef ég aldrei íhugað slíka nálgun með sjónarmiðum.
Handur texti er einn vinsæl breyting á myndskreyttum texta og frábær lausn fyrir margar auglýsingar. Fyrir einn, það er frábær leið til að setja allt sem handtaka listaskólaþjálfun til starfa. Í öðru lagi er það frábær leið til að framleiða eitthvað einstakt. Eftir allt saman, ef þú gefur hendi texta verður það 100% einstakt. Jafnvel ef þú skýtur yfir núverandi leturgerð, mun það enn verða greinileg sköpun.
Rangus
Þetta er fullkomið dæmi um myndaða gerð. Stíllinn er mjög stórkostlegur, algerlega einstakur og mjög innandi. En það hættir ekki þarna. Höndin sem gerð er sýnir í raun einstaklinga hæfileika. Það sýnir að hann skapar listaverk með höndum sínum og tengir það fullkomlega við hreyfimynd sína. Ég elska sérstaklega þá staðreynd að það byggist allt á tökkum þema eins og það tengist í raun þemað og þætti saman fullkomlega. Að mínu mati sýnir þessi síða hvernig sameiningarmynd getur verið með tilgangi og skilaboð vefsvæðisins.
Joey Lomanto
Í þessu tilfelli er sýndur texti miklu meira lúmskur. Í stað þess að keyra alla stefnu hönnunarinnar spilar hún einfaldlega vel. Í staðreynd, í fyrsta lagi gætirðu ekki einu sinni tekið eftir höndunum sem gerðar eru af stórum heimasíðudexta. Leyfilegt, textinn gæti raunverulega verið leturgerð, en það hefur verið notað á þann hátt að það sameinar fullkomlega við stíl svæðisins. Óháð því, stíllinn er fallega sameinaður og dæmisaga gegnir mörgum hlutverkum í heildarhönnuninni.
Fara í loftið
Skýrður texti þarf ekki að vera hönd framleidd þó. Eins og þú munt finna í þessu dæmi er textinn stíll á ýmsa vegu sem breytir textanum sjálfum í bita í heildarmyndinni. Fegurð þessa nálgun er sú að það sameinar textann með öðrum myndum. Þetta forðast minni samræmda tilfinningu þar sem þú ert einfaldlega með myndskreytingar yfir venjulegu vefbæklingi. Síðarnefndu getur unnið, en í þessu tilfelli er áhrifin af myndskreyttum texta skýr.
Önnur sýnishorn af myndskreyttum texta
Eftirfarandi dæmi passa lauslega í þennan flokk. Ég segi létt því það er erfitt að segja stundum þar sem það er stundum lúmskur hlutur. Í sumum tilvikum lítur textinn bara á listaverk, þannig að ég hef sett það inn í þetta safn.
Andstæður uppreisn
Fakta
La Web Shop
Upplýsandi myndir
Með mjög skilgreiningu á myndinni er ein tilgangur þess að skýra og útskýra. Svo það er aðeins viðeigandi að við finnum dæmi þar sem myndirnar gera þetta með ótrúlega skýrleika.
Bóklegt
Við skulum byrja með Bóklegt staður. Í þessari óvenjulegu útliti finnum við að myndin sé mjög skýrt tákn fyrir hinar ýmsu punktar heimasíðunnar. Hver blokk hefur sjónræna þætti sem ekki aðeins fegrar það, en meira um vert, útskýrir það. Svo mikið svo að sem lesandi þarf ég ekki einu sinni að lesa afritið. Tæki listanna neðst til vinstri sýnir sérstaklega þetta.
Ráðast
Á mun minna áberandi hátt reynir myndin í þessari hönnun jafn upplýsandi. Einfaldlega myndin sýnir einmitt efni svæðisins. Það gæti ekki slá þig yfir höfuðið með skilaboðum sínum, en það endurspeglar tilganginn á síðuna fallega.
Virkja
Myndin í þessari hönnun miðlar ekki aðeins upplýsingum um atburðinn sem hún táknar, en einnig endurspeglar sjálfsögðu viðburðinn. Þessi tiltekna atburður snýst um að aftengja tækni. Það er tækifæri fyrir fólk sem inundated með tækni til að flýja það er kúplingar.
Myndin hér sýnir okkur hvaða þátttakendur verða að gera, svo það er upplýsandi. Og það er eðlilegt eðli, brýtur myndin með tækni og rætur sig í eingöngu lífrænum tilfinningu, grundvallaratriðum frábær leið til að miðla tilgangi vefsvæða.
Fleiri upplýsandi myndir
Þessar viðbótarsíður sýna einnig hugmyndina um myndir sem upplýsa okkur. Sumir eru pínulítill og undirstöðuatriði, á meðan aðrir eru aðdráttarafl þættir sem að fullu skilgreina og tákna efni.
Vitality City
Uklizenodoma.cz
Qubiq
Tæknileg mótefni
Með síðasta fordæmi (The Virkja staður) við steig inn í það sem ég vil íhuga næst, notkun á myndinni til að brjóta með tækni stilla af hlutum. Stundum er nauðsynlegt að aftengja tæknilegan stuðning á vefnum og sýna mjög lífræna tilfinningu. Myndin er ein af öflugustu tækjunum til að ná fram slíkri hugmynd.
Sending App
Þessi einföldu fljótlega blaðsíðna blaðsíða er ekkert nema óvenjulegt. Og greinilega hvernig það nær fegurð hennar er róttækan einfalt. Einfaldur gríðarstór dæmisaga truflar okkur einskis frá því að þetta er vefsíða. Það líður meira eins og listverk sem gerist með litla gagnvirka þætti, örugglega frábær leið til að hafa mikil áhrif á notendur og koma á eftirminnilegu mynd.
Muziekpark
Þó að þessi síða nýtist ekki alveg eins róttækan nálgun, þá er myndin enn stór og áberandi í útliti. Hér líður líflegur myndmál líf á síðunni. Sameina þetta með skapandi og óvenjulegt skipulag og það finnst fullkomlega aðskilið frá tækni sem rekur það. Kannski er sú staðreynd að það lítur ekki út eins og eðlilegt síða hefur mikil áhrif á þetta líka. Einnig teljum að myndin í þessu tilfelli hjálpar okkur að upplýsa okkur um þema svæðisins.
Egopop
Í annarri óhefðbundnu skipulagi finnum við að myndin sé tekin í vinnslu. Hér segir listin ekki aðeins um þann einstakling sem vefsíðan táknar, heldur brýtur þau okkur líka úr eðlilegu hugarfari sem gestir geta haft. Aftur líður það eins og gagnvirkt listverk en vefsíða. Ef þetta er markmið þitt og þörf, þá er þetta frábær aðferð til að íhuga.
Zaarly
Í samanburði við fyrri dæmi, þá Zaarly síða stendur í sterkum andstæðum. Þó að hönnunin sé stjórnað af einum stórum mynd og þessi mynd lýsir tón fyrir síðuna, þá er undirliggjandi aðgerðin miklu flóknari en þessi önnur sýni.
Þessi síða er forrit sem ætlað er að nota. Og myndin hjálpar til við að koma ákveðnum settum væntingum. Það gefur léttar, mannúðlegri tilfinningu sem er greinilega mjög lífræn og náttúruleg tilfinning. Ímyndaðu þér þetta í mótsögn við hálf-minimalistic forrit án persónuleika yfirleitt. Hönnunin gefur síðuna tilfinningu fyrir nálægð og breytir væntingum okkar.
Niðurstaða
Notkun myndlistar í hönnun er æskileg æfing og umsókn hennar á vefnum er skýr. Eins og með hvaða hönnunarþáttur sem ég njóti þess að endurskoða tilgang og notkun. Með slíkum áreynslu finnst mér óhjákvæmilega að ég geti betur understating hvernig það virkar, leiðir til að nýta það fyrir fyrirhugaðan tilgang, og að lokum, sumir ferskar og hvetjandi hugmyndir.
Hvernig notarðu mynd í vefhönnun? Vinsamlegast deildu eigin reynslu þinni hér fyrir neðan.