Design for ytelse

Designere har stor innvirkning på ytelsen på nettstedet basert på hvordan De designer for nettet, før en enkelt linje med kode er skrevet. Denne artikkelen vil dekke hvordan ytelsen kan være utformet og hva som trengs for å få det til å skje.


Hastighet er en grunnleggende del av brukeropplevelsen på nettet. Web-ytelse har vist seg å ha en direkte innvirkning på hvordan folk bruker et nettsted, og hvis de er villige til å bruke det på nytt. Med veksten av mobilnettbruk er det viktigere enn noensinne å fokusere på ytelse.

Likevel er ytelsen ofte ignorert av de fleste designere. Dette skjer av mange grunner, men det koker ofte ned til det faktum at designere vurderer belastningstider noen andres jobb.


Å designe ytelse handler om tankegang

Det er mange artikler som dekker hvordan du lager et nettsted raskere, og de gir nesten alltid tips som å redusere CSS og optimalisere bildene dine. Disse tipsene er nyttige og viktige, men løser ikke det underliggende problemet.

Jo mer avgjørende trinn er mindre konkret - det krever et skifte i tenkning. Opprette raske nettsteder krever selvbeherskelse og fokus. Uansett hvor mye tid du bruker på optimalisering, vil et nettsted med tre tusen linjer med CSS, ti jQuery-plugins og fem fullblodige bilder bli langsom. Ytelsen kan forbedres, men du får ikke se gode resultater før du gjør det til et kjernedesignprinsipp.


Human Brain on GraphicRiver

Å designe for ytelse krever en forpliktelse til å maksimere nødvendighetene og fjerne overflødig luksus. En mer utilitaristisk tilnærming til design er nødvendig der hvert element har en konkret og netto positiv innvirkning på sluttresultatet. Dette negerer ikke betydningen av estetikk, men det betyr at det ikke skal gis en tom sjekk.


Sikt mot Enkel og Effektiv

Det er selvsagt at designere vet viktigheten av enkelhet. Men effektiviteten er ofte oversett i designerens leksikon. Enkel og effektiv er ikke nødvendigvis relatert. Mange "godt utformede" nettsteder er vakre, klare, intuitive og helt oppblåst.

Som designere ønsker vi å lage noe som appellerer til våre visuelle sanser. Vi ser mange nettsteder ved hjelp av high-fidelity fotografering, teksturer og spit-finish detaljer for å oppnå den slutten. Det er ofte vanskelig å argumentere med resultatene på et strengt visuelt grunnlag. Imidlertid må vi stille spørsmål om disse tunge elementene arbeider for å løse opplevelsesproblemer eller bare se bra ut for å se bra ut.

Å designe effektivt tvinger deg til å skape en like meningsfull opplevelse med mindre. Kan du fange interessen og fantasien til publikum uten å benytte et fullblodt bilde? Jeg vil hevde at du kan og at det er verdt det.

Et eksempel på en enkel, men ineffektiv design er Karmas hjemmeside. Karmas design er nydelig og klar, men veier inn på omtrent 1Mb over 45 forespørsler. Ikke misforstå, jeg elsker hvordan Karma-nettstedet ser ut, det mislykkes bare ytelsestesten og mangler derfor til slutt som en vellykket design.

En effektiv design er ikke av naturen sterk og uten personlighet. Snarere er hvert elements eksistens blitt oppdaget og rettferdiggjort. Effektive design mangler ikke stil, det er bare en veldig god grunn hvorfor den stilen har blitt lagt til. Det er lett å finne noe på Dribbble og legge det til i våre design fordi det ser bra ut. En tankeløs tilnærming til design skaper ineffektivitet.


The Flat Design Estetisk

Det har vært mye snakk om flat design. Det virker som en minimalistisk stil ville hjelpe hastighet, men det er ikke nødvendigvis tilfelle. Flatt design kan gjør sidefotspor mindre, men det er ingen garanti. Ovenstående eksempel på Karmas nettsted er bevis.


The Flat Design Era av LayerVault

Det er sikkert visuelle stiler som er utsatt for bedre ytelse, men det kommer ned til utførelse og stilens manifestasjon i det endelige designet. Estetisk er ikke en erstatning for å gjøre ytelsen til et kjernemål.


Betongeksempler

Nå som jeg har snakket i abstrakt, kan det være på tide å komme inn på noen eksempler på hvordan man bruker det. Nedenfor er noen tips:

Design uten krykker

Prøv å starte et design uten å stole på enkle løsninger. Jeg starter designprosessen uten å bruke noen bilder, tilpasset typografi og tre skrifttypevekter (vanlig, fet, kursiv). Se hvor langt du kan få ved å bruke farge, kontrast og form. Du kan alltid legge til forskjellige skrifter, bilder og teksturer senere.

Forbedre dine skriveferdigheter

Hovedformålet med en designer er å kommunisere. Det er få bedre måter å formidle en idé enn det skrevne ordet. Ord kan gå langt - altfor ofte legger vi til visuelle elementer når en klar setning er tilstrekkelig. Prøv å erstatte et visuelt bilde med sterk copywriting og godt utformet typografi.

Fokus på løse problemer

Det er lett å bli sugd inn i nyanser av design. Jeg gjør det hele tiden. Det er viktig å huske at designerenes rolle er å løse problemer, ikke få ting til å se pen ut. Jeg er fast tro på at en sterk estetikk bygger tillit til en bruker og bidrar til å skape et følelsesmessig respons. Men estetikk skal alltid støtte problemene vi blir bedt om å løse (for eksempel forbedret brukervennlighet, høyere oppgavegjennomføring, etc.). Ser på design gjennom dette objektivet vil bidra til å skape en målrettet tilnærming og fokusere vår tenkning .

Lær å kode

Den beste måten å forstå designets innvirkning på ytelsen er å ha en generell ide om hvilken type kode som er nødvendig for å opprette den. Moderne nettlesere har mange skjulte triks som kan gjøre nettstedet ditt slankere og gjør livet ditt lettere. Ved å vite hvordan du bygger et nettsted, vil du vite hva du skal unngå.

Hone Your Craft

Bilder (både raster og vektor) kan produseres til å være mindre. Vi bør tenke på å skape et bilde som vi tenker på å lage en CSS-fil - få jobben gjort med så lite fotavtrykk som mulig. Dette emnet kan være en egen artikkelen helt, men kjernen er å unngå pixel artefakter i rasterbildene dine og unødvendige vektorpunkter i SVG-ene. Dette vil få betydelig innvirkning på filens størrelse.


Konklusjon

Webhastighet faller ikke i kategorien av sexy. Ytelse vinner ikke designutmerkelser, og det får ikke porteføljen din til å bli bedømt av jevnaldrende. Det påvirker imidlertid menneskene som betyr noe - de som bruker nettstedet du opprettet. Hvis du ikke designer for ytelse, jobber du ikke med jobben din.

Endelig er ytelse det eneste elementet i UX (som jeg vet om) som er helt objektivt og kvantifiserbart. Jeg finner det forfriskende i en bedrift som kan være så amorf og subjektiv at det finnes minst en metrisk hvor ved å gjøre nummeret gå ned, kan jeg garantere at noen der ute har en bedre dag.