Mye designarbeid skifter til mobil. Flere og flere mennesker får tilgang til nettet på mobile enheter, og designere bør tilpasse seg tilsvarende.

Et element i det, er å optimalisere bilder for mobile enheter. Visst, det er tekniske aspekter som oppløsning og redusert filstørrelse, men hva med selve bildforholdet og innholdet i bildene selv?

Vel, noen ganger kan den beste inspirasjonen komme fra et sted uten tilknytning til ditt felt. I dette tilfellet dekker albumet - spesielt de som er designet for bærbare musikkspillere, mobile enheter, nettbutikker, streaming musikktjenester og mer.

Les videre for å finne ut hva albumdeksler kan lære om optimalisering av bilder for mobile enheter.

Ingen rot

No clutter

Den største forskjellen mellom mobildesign og webdesign er størrelse (åpenbart). Dermed er ikke bare mye plass til bilder, men bildene selv vil virke mye mindre. Som et resultat vil bildene dine se best uten rot.

Små detaljer, flere elementer og så videre kan se fint ut i et stort bilde (som et breddebilde som vises på en bærbar PC). Men de vil ikke være veldig synlige i et lite bilde. Det vil bare se ut som rot. Så hvis du sørger for at bildene dine ikke har rot, vil bildene dine se renere ut.

For et øyeblikkelig eksempel, gjør et bilde søk etter noe. I ruten med miniatyrbilder, se hvilke bilder som ser bra ut i den mindre størrelsen, og som ser ut som et rot. Alle bildene vil se bra ut i full størrelse, men de som ikke har rot, ser også bra ut. På mobilenheter vil de fleste bildene dine se den størrelsen. Så hvis du vil optimalisere bildene dine for mobile enheter, må du kontrollere at bildene dine ikke har rot.

Ser bra ut som miniatyrbilder er akkurat det albumet dekker designet for de små mobilskjermene, nettbutikkene og musikkstrømmetjenestene, fokuserer på; du bør også fokusere på det hvis du vil at bildene skal se bra ut på mobile enheter

Fokus på ett element

Har et bildefunksjon bare ett enkelt hovedelement. I likhet med hvordan du ikke vil kunne se detaljer i et lite bilde, vil det være vanskeligere å finne ut hva bildet er å ha flere elementer i bildet. Som et fullstørrelsesbilde på en bærbar PC kan du enkelt lage flere elementer, men et miniatyrbilde, ikke så mye.

For eksempel, i stedet for å ha et bilde av en person som sparker en ball inn i et mål (for mange elementer: topp til tå person, ball, mål), beskjære bildet slik at det bare er et zoomet innstikk av foten som sparker en ball (ett hovedelement: ballen blir sparket). Den samme ideen uttrykkes (sparker et mål, scoring, vinnende, etc.), men det er mye lettere å se og forstå bildet på en mobil enhet.

Bruk subtile teksturer (eller solide farger)

Opptatt teksturer er som rot: de distraherer fra hovedelementet. Mens de kan jobbe på en stor skjerm - du kan fortsatt se hovedelementet - på en liten mobil skjerm de distraherer. Årsaken er at det er mindre plass mellom hvert element i en opptatt tekstur, så når bildet er mindre ser strukturen ut som en patio skjerm dør (en haug med små firkanter klemmet sammen) i stedet for en flislagt vegg (som er lett på øyne og hvert element lett merkbar).

Når en tekstur er subtil, vil den fortsatt ha det samme problemet som en opptatt tekstur, men blir knapt merkbar, noe som ikke gjør det distraherende når man ser på en mobil skjerm. Tenk hvit og grå stor firkantet mønsterbakgrunn i stedet for en svart-hvitt, tynn stripet bakgrunn. Eller noen få lyse skyer i stedet for en stor sky soloppgang. På en liten skjerm forsvinner den nesten, slik at tekstur blir irrelevant og holder fokus på hovedelementet.

Selvfølgelig er et enda bedre bilde valg et med stort sett solide farger. Da eliminerer du problemet helt. Stor, liten, bærbar, mobil enhet; Det spiller ingen rolle hvilken størrelse bildet er, en solid farge vil se ut på samme måte og vil ikke distrahere. Når vi går tilbake til himmelen, ville det være en klar blå himmel i stedet for en med noen sprinklede skyer. Den klare himmelen bakgrunnen ser mest ren ut og ikke distraherende i det hele tatt på en mobil skjerm.

Dette gjelder ikke bare for bakgrunnen, men også for noen elementer. En person som har på seg en skjorte, mønsteret på en gjenstand, og alt annet. Jo mer subtile teksturer (eller de mer solide farger vises i stedet) renere og mer merkbar, bildet vil se lite ut på en mobil enhet.

Kontrast

Hvis teksturer er mikro av bildet, handler det om makroen, hele bildet. Mens mikroen ikke skal distrahere, skal makroen være så tydelig synlig som mulig. Og det betyr vanligvis en høyere kontrast for bildene dine. Pass på at hovedelementet er lett synlig og dukker opp av bildet.

Det er vanskelig for en mørkegrå gjenstand å skille seg ut fra en lysegrå bakgrunn. Igjen, når du ser på en stor skjerm, kan du skille objektet, men som et lite bilde på en mobil enhet, ikke så mye.

Prøv å få bilder med naturlig kontrast. To kontrasterende farger. Et fargerikt element mot en grå bakgrunn (eller noe element mot en hvit bakgrunn). En hvit ball på en grønn plen. I utgangspunktet er hovedelementet fokuspunktet, og en høyere kontrast styrker det ved å gjøre dette hovedelementet mye tydeligere og synlig - noe som er viktig når man ser et lite bilde på en mobilenhet.

Hvis du ikke har mye naturlig kontrast i bildet ditt, kan du i det minste støte på kontrast av bildet ved hjelp av bildeditoren din. Ved hjelp av det ovennevnte grå-på-grå-eksempelet, vil lysgrå objektet bli lettere, mørkegrå bakgrunns mørkere, og objektet vil komme ut av bildet mer. Integriteten til bildet bør forbli intakt selvfølgelig, men økende kontrasten vil la hovedelementet være mer påtagelig på en mobil enhet. Siden det er til slutt hva en person ser på, ikke bakgrunnen, som bør forbli, vel, i ryggen.

Vær kvadratisk

Be square

Denne er tatt direkte fra albumdeksler, som er firkantede, holder bildene så firkantede som mulig. Det er åpenbart fint hvis det er litt rektangulært horisontalt eller vertikalt, men poenget er å streve etter at bildene dine er så nær en firkant som mulig.

Grunnen? På mobile enheter, spesielt portrettorienterte, der folk vanligvis ser vertikalt, har du ikke lyst til å antar at folk vil se på en fin full widescreen. Hvis bildet er for bredt, vil det se ut som en horisontal skive på en liten skjerm som er vertikaljustert. Det samme gjelder for lange rektangulære bilder - en person må rulle for å se den fullt ut.

Når du holder bildene så firkantede som mulig, maksimerer du deres allsidighet. Det spiller ingen rolle om en person zoomer inn på en mobil enhet, zoomet ut hele veien, eller hva som helst, bildet vil bli fullt synlig og maksimere den dyrebare skjermen på en mobil enhet.

Ved å være firkantet, var albumdekkene en naturlig passform for mobilenheter, nettbutikker og musikk streamingtjenester. Enkelt å bla gjennom, fullt synlig i alle størrelser, og lett for UI-designere å plassere bildet hvor som helst på skjermen. Hvis bildene dine er så firkantede som mulig, vil de ha samme allsidighet på mobilenheter.

Optimalisering av bilder for mobile enheter

Mobil vil bare fortsette å bli stadig mer utbredt, så det er viktig å ha bilder - som er en veldig fremtredende ting folk ser - optimalisert for mobile enheter. Forhåpentligvis gir disse leksjonene fra mobiloptimaliserte albumdeksler noen nyttige innsikter.

Sørg for at bildene dine ikke har rot i en liten mengde detaljer, at bildet fokuserer på ett element, at teksturene er subtile eller at det bare er solide farger, at kontrasten er høyere, og at bildeformatet er som firkantet som mulig slik at det er så mobilvisende som mulig.

Med det i hånden, gjør bildene dine flotte på mobile enheter.

Skrevet utelukkende for WDD av Oleg Mokhov , verdens mest mobile elektroniske musiker og web + visuell designentusiast. Han lager musikk som er et kryss mellom Four Tet og Aphex Twin. Koble til ham

Tenker du på mobile enheter når du velger bilder for designene dine? Begynner du med mobil, eller juster skrivebordsvennlige bilder som passer til enheter? Gi oss beskjed i kommentarene nedenfor.