Illustrerer nettet: Deconstructing the Trend
Illustrationer tager over internettet. Designere skaber hjemmesider med alt fra fuldskærm illustrationer til håndtegnede divotter, der bruges i hele projekterne. Det er en tendens, der sandsynligvis vil vokse, fordi illustrationer gør et design føles tilpasset (selvom det ikke er tilfældet).
Sådan får du mest ud af dem i dit design.
Website illustration 101
Illustrationer er en alsidig og sjov måde at oprette et brugerdefineret website design på. Fra håndtrukne billeder, til elementer, til bogstaver, alt om et fuldt illustreret eller skitseret billede, ser og føles en af en slags. Det er en af grundene til, at det er så populært.
Men der er mange andre grunde, som designere hopper på illustrationens trend:
- Illustrationer giver brugerne mulighed for at fotografere sig selv i den scene, du indstiller, fordi den ikke fokuserer på faktiske andre mennesker.
- Der er et element af whimsy, der kun kan opnås med en tegning.
- Illustrationer kan mesh virkelighed og fantasi til et design, der er ekstraordinært.
- Tilpasning er let, når du tegner kunstelementerne.
- Illustrationer er ofte ret farverige og kan hjælpe dig med at udnytte den store, lyse farveudvikling.
- Teknikken kan bruges selvom du ikke er en illustrator takket være design kits eller pakker, der er fulde af illustreret dele, der kan bruges i hele projektet.
- Illustrationer kan påtage sig mange forskellige humør eller stilarter, fra skitser til udarbejdelse af tegninger til computergenereret grafik.
Hero-stil illustrationer
Fordi heldens overskrifter er store, er dette et af de letteste steder at se illustrationstrenden. Den bruges også til et stort antal websteder fra porteføljer til detailhandlere til forhåndsvisnings sider.
Hvad der er godt om et illustreret heltebillede er, at der er nok plads til et ret komplekst kunstværk. Små detaljer, skygger og farve og interaktioner har alle plads til at trække vejret, hvilket gør det lettere for brugerne at udforske hvert element.
Der er et par tricks til alt dette kompleks, der illustrerer:
- Kunstværket skal være godt. Brugere vil ikke bruge nogen tid på at se på en illustration, som de ikke får eller er bare et sjusket rod. Så tag tid og pleje med det.
- Mens illustrationen kan have dybder af kompleksitet, bør den samlede besked være enkel. Vet, hvad billedet skal sige og sørg for, at elementerne bidrager til budskabet.
- Arbejde med en professionel. Bare fordi du kan tegne hjerter på et serviet betyder det ikke, at du er klar til at tegne en fuldskaleret websiteillustration. Denne proces tager tid og planlægger virkelig at arbejde. (Og det kan være dyrt, så sørg for at dette er den rigtige æstetik, før du dykker ind.)
Tilføj simpel animation
Selvom en statisk tegning kan have stor indflydelse på egen hånd, lever weben med bevægelse i disse dage. Par en illustration med subtile animationer eller rulleeffekter for at opmuntre brugere til at klikke rundt.
Små subtile bevægelser, som f.eks. Den spinnende tekst på hjemmesiden for Hugo , hjælper med at trække øjet ind i designet. Små animationer kan også hjælpe brugerne med at forstå, hvilke handlinger der skal udføres, når de besøger et websted. Dette kan især være tilfældet for illustrationer, der indeholder mange elementer eller har et samlet "travlt" design.
Disse små overraskelser kan tilskynde besøgende til at sidde og kigge rundt. Hover animationer er en særlig god bonus for brugere, der kan tjene både som et sjovt element og navigationsværktøj.
Illustreret ikoner eller UI elementer
Hvis et all-out illustreret website design ikke er dine ting, skal du overveje et par illustrerede ikoner eller brugergrænsefladeelementer. Dette er en enkel måde at lette ind i trenden. (Og der er masser af ikon og UI-kits derude, der har illustreret stilarter til at hjælpe dig med at komme i gang.)
Illustreret elementer kan tilføje et strejf af whimsy til et websted, der ellers kunne føle sig for formelt. Noget at prøve er et illustreret omridsikon. Denne stil er let at falde i næsten ethvert design, fungerer fint med billeder og et hvilket som helst farveskema og giver et konsistent visuelt tema fra side til side.
Hvis du vil gå et skridt ud over ikoner, tænk overstørrelse UI-elementer. Iqor , bruger illustrerede knapper i større størrelser til at guide brugerne og gøre webstedet lidt sjovere. Den illustrerede stil flyder fra side til side med store elementer ved hjælp af de samme tre farver. Resultatet er sjovt og konsekvent og bare lidt uventet fra kundeservicen.
Håndtegnet bogstaver
En anden stor tendens i website design er brugerdefineret typografi. Kombiner begreberne illustration og bogstaver for et håndtegnet logo, hovedtekstblok eller typografisk kunstelement. Denne tekstbaserede visuelle kan have stor betydning (især når den er overdimensioneret eller bruges som hovedelementelement i designet).
Tricket her er moderering. Med den håndtegnede bogstaver stil vil du holde fast i en enkelt tekstblok eller tekstelement til denne effekt. Flere anvendelser af en brugerdefineret tekstblok kan være overvældende for brugere og kan påvirke læsbarheden. Det er vigtigt at sikre, at ord stadig er helt klart, og at brugerne ikke har problemer med at forstå meddelelsen.
Begge De dødes dag og Stå op til kræft , gør et godt stykke arbejde med håndbogstegn for en simpel besked. Day of the Dead bruger andre illustrationer, let sans serif typografi og fotos for at hjælpe med at trække brugere gennem resten af hjemmesiden. Slutresultatet er sjovt og let at følge. Stå op til kræft bruger mere af en akvarelstil, der er alt illustrationsbaseret, men afhænger af mere standard skrifttyper til læsbarhed. Begge er gode muligheder for at arbejde med tilpasset bogstaver.
Konklusion
Mens du bryder ind i illustrationsverdenen for website design, kan projekter synes lidt skræmmende i starten, det er noget, som mange designere kan gøre. Fra tegning til hånd for at have computerassistance eller arbejde med et kit, er mulighederne ret grænseløse.
Det er noget at tænke på, når det kommer til de projekter, der kræver at gøre noget lidt anderledes. Og det er trendy nok, at du måske bliver spurgt om at skabe noget i denne stil. Så det er et godt tidspunkt at opdatere dine skitseringsevner og tænke på, hvordan en illustreret webdesignramme kunne fungere for dig.