Illustrere Internett: Dekonstruere trenden
Illustrasjoner tar over nettet. Designere lager nettsteder med alt fra fullskjerm illustrasjoner til hånddrevne divotter som brukes i hele prosjekter. Det er en trend som sannsynligvis vil fortsette å vokse fordi illustrasjoner gjør at et design føler seg tilpasset (selv om det ikke er det).
Slik får du mest ut av dem i ditt design.
Nettstedillustrasjon 101
Illustrasjoner er en allsidig og morsom måte å skape en tilpasset webdesign på. Fra hånddrevne bilder, til elementer, til bokstaver, alt om et fullstendig illustrert eller skissert bilde, ser og føles som en slags. Det er en av grunnene til at det er så populært.
Men det er mange andre grunner som designere hopper på illustrasjonstendensen:
- Illustrasjoner gir brukerne muligheten til å fotografere seg selv i scenen du setter inn fordi den ikke fokuserer på andre mennesker.
- Det er et element av whimsy som bare kan oppnås med en tegning.
- Illustrasjoner kan maskere virkelighet og fantasi for et design som er ekstraordinært.
- Tilpassing er enkelt når du tegner kunstelementene.
- Illustrasjoner er ofte ganske fargerike og kan hjelpe deg å dra nytte av den store, lyse fargeutviklingen.
- Teknikken kan brukes selv om du ikke er en illustrator takket være designpakker eller pakker som er fulle av illustrert deler som kan brukes gjennom et prosjekt.
- Illustrasjoner kan ta på seg mange forskjellige stemninger eller stilarter, fra skisser til å utdype tegninger til datamaskingenerert grafikk.
Hero-stil illustrasjoner
Fordi heltens hoder er store, er dette et av de enkleste stedene for å se illustrasjonstendensen. Den brukes også til et stort antall nettsteder fra porteføljer til detaljhandel til appforhåndsvisningssider.
Det som er fint om et illustrert heltbilde er at det er nok plass til et ganske komplisert kunstverk. Små detaljer, skygge og farge og interaksjoner har alle mulighet til å puste, noe som gjør det enklere for brukerne å utforske hvert element.
Det er noen triks for alt dette komplekset illustrerer:
- Illustrasjonen må være god. Brukerne kommer ikke til å tilbringe tid på å se på en illustrasjon som de ikke får eller er bare et slurvet rot. Så ta deg tid og ta vare på det.
- Mens illustrasjonen kan ha dybder av kompleksitet, bør den generelle meldingen være enkel. Vet hva bildet skal si og sørg for at elementene bidrar til meldingen.
- Arbeid med en profesjonell. Bare fordi du kan tegne hjerter på et serviett, betyr ikke at du er klar til å tegne en fullstendige nettsideillustrasjon. Denne prosessen tar tid og planlegger å virkelig fungere. (Og det kan være dyrt, så sørg for at dette er riktig estetisk før du dykker inn.)
Legg til enkel animasjon
Selv om en statisk tegning kan ha stor innflytelse på egenhånd, er nettet levende med bevegelse i disse dager. Pair en illustrasjon med subtile animasjoner eller rulleeffekter for å oppmuntre brukere til å klikke rundt.
Små, subtile bevegelser, for eksempel spinnteksten på nettsiden for Hugo , bidrar til å trekke øyet inn i designet. Små animasjoner kan også hjelpe brukerne å forstå hvilke handlinger som skal utføres mens de besøker et nettsted. Dette kan spesielt gjelde for illustrasjoner som inneholder mange elementer eller har en samlet "opptatt" design.
Disse små overraskelsene kan oppfordre besøkende til å ligge og se seg rundt også. Hover animasjoner er en spesielt hyggelig bonus for brukere som kan tjene både som et morsomt element og navigasjonsverktøy.
Illustriserte ikoner eller UI-elementer
Hvis en all-out illustrert nettside design ikke er din ting, bør du vurdere noen illustrerte ikoner eller brukergrensesnittelementer. Dette er en enkel måte å lette på trenden. (Og det er nok av ikon og UI-kits der ute som har illustrert stiler for å hjelpe deg med å komme i gang.)
Illustrerte elementer kan legge til et inntrykk av whimsy til et nettsted som ellers kan føles for formelt. Noe å prøve er et illustrert oversiktsikon. Denne stilen er lett å slippe i nesten alle design, fungerer bra med bilder og farger, og gir et konsistent visuelt tema fra side til side.
Hvis du vil gå et skritt utover ikoner, tenk overordnede grensesnittelementer. Iqor , bruker illustrerte knapper i større størrelser for å veilede brukere og gjøre nettstedet litt morsommere. Den illustrerte stilen flyter fra side til side med store elementer med samme tre farger. Resultatet er morsomt og konsekvent og bare litt uventet fra kundeservicen.
Håndtegnet bokstaver
En annen stor trend i webdesign er tilpasset typografi. Kombiner begreper illustrasjon og bokstav for en håndtegnet logo, hovedtekstblokk eller typografisk kunstelement. Denne tekstbaserte visuelle kan ha stor innvirkning (spesielt når den er overdimensjonert eller brukt som hovedelement i designet).
Trikset her er moderasjon. Med den håndskrevne bokstavstilen vil du holde fast i en enkelt blokk med tekst eller tekstelement for denne effekten. Flere bruksområder av en tilpasset tekstblokk kan være overveldende for brukere og kan påvirke lesbarheten. Det er viktig å sørge for at ord fortsatt er helt klart, og at brukerne ikke har problemer med å forstå meldingen.
Både De dødes dag og Stå opp til kreft , gjør en god jobb med håndbokstaven for en enkel melding. Day of the Dead bruker andre illustrasjoner, enkle sans serif typografi og bilder for å trekke brukere gjennom resten av nettstedet. Sluttresultatet er morsomt og lett å følge. Stå opp til kreft bruker mer av en akvarellstil som er alt illustrasjonsbasert, men er avhengig av flere standard skrifttyper for lesbarhet. Begge er gode alternativer for å jobbe med tilpasset bokstaver.
Konklusjon
Mens du bryter inn i illustrasjonsverdenen for webdesign, kan prosjekter virke litt skremmende i begynnelsen, det er noe som mange designere kan gjøre. Fra tegning for hånd til å ha datamaskin assistanse eller arbeide med et sett, er alternativene ganske ubegrensede.
Det er noe å tenke på når det gjelder de prosjektene som krever å gjøre noe litt annerledes. Og det er trendy nok til at du kanskje blir spurt om å skape noe i denne stilen. Så dette er en god tid å friske opp sketching ferdighetene dine og tenke på måter et illustrert nettsted design rammeverk kan fungere for deg.