Som frontend-utviklere er jobben vår i hovedsak å gjøre design til virkelighet gjennom kode. Å forstå og være dyktig i design er en viktig komponent i dette. Dessverre er det lettere sagt enn gjort å forstå Front End-design. Koding og estetisk design krever ganske forskjellige ferdighetssett. På grunn av dette er noen front-end-utviklere ikke så dyktige som de burde være, og deres arbeid lider som et resultat.

Målet mitt er å gi deg noen enkle å følge regler og konsepter, fra en front-end utvikler til en annen, som vil hjelpe deg med å komme fra start til slutt i et prosjekt uten å rote til det designerne dine jobbet så hardt for (eller muligens til og med la deg designe dine egne prosjekter med anstendige resultater).

Selvfølgelig vil disse reglene ikke ta deg fra dårlig til flott i tiden det tar å lese en artikkel, men hvis du bruker arbeidet deres, bør det gjøre en stor forskjell.

Få ting gjort i grafikkprogrammet

Det er veldig sjelden at du avslutter et prosjekt og går fra start til slutt mens du beholder hver unike estetiske mutasjon i designfilene. Dessverre er designere ikke alltid i nærheten av å utføre en rask løsning.

Så det kommer alltid et poeng i enhver Front End-jobb der du ender med å gjøre noen relaterte kosmetiske justeringer. Enten prøver du å merke av som vises når avkrysningsboksen er merket, eller du lager et sideoppsett som PSD savnet, Frontendere de ender ofte med å håndtere disse tilsynelatende sekundære oppgavene. I en perfekt verden ville dette naturligvis ikke være tilfelle, men jeg har ennå ikke funnet en perfekt verden, derfor må vi være fleksible.

En god front-end-utvikler må bruke profesjonelle grafiske verktøy. Ikke godta en vikar. kvitring

For disse situasjonene, bør du alltid bruke et grafikkprogram for Mockups . Jeg bryr meg ikke hvilket verktøy du velger: Photoshop, Illustrator, Fireworks, GIMP , samme det. Bare ikke prøv å designe fra din egen kode. Bruk et øyeblikk på å starte et ekte grafikkprogram og finn ut hvordan det skal se ut, og gå deretter til koden og få den til å skje. Du er kanskje ikke en ekspert designer men du vil fortsatt få bedre resultater.

Match design, ikke prøv å slå det

Jobben din er ikke å imponere med det eneste som er haken din; jobben din er å matche resten av designet.

De uten mye designerfaring kan lett bli fristet til å sette sitt preg på prosjektet med tilsynelatende mindre detaljer. Gi det igjen til designerne.

Utviklere må matche den originale frontend-designen så tett som mulig. kvitring

I stedet for å spørre 'Ser haken min fantastisk ut?' Du må spørre deg selv: 'Hvor mye samsvarer haken med designet?'

Fokuset ditt bør alltid være på å jobbe med designet, ikke på å prøve å overvinne det.

Typografi gjør hele forskjellen

Du vil bli overrasket over hvor mye av det endelige utseendet til et design er påvirket av typografi. Du vil bli så overrasket over å vite hvor mye tid designere bruker på det. Dette er ikke en 'pick and go' -innsats; Det tar litt tid og krefter.

Hvis du havner i en situasjon der du virkelig må velge skrift, bør du bruke en anstendig tid på å gjøre det. Gå på nettet og undersøk godt skriftparring . Bruk noen timer på å prøve disse skriftene, og sørg for at de ender med den beste skrifttypen for prosjektet.

Er denne skrifttypen egnet for prosjektet ditt? Når du er i tvil, ta kontakt med en designer. kvitring

Hvis du jobber med et design, må du følge designerens typografialternativer. Dette betyr ikke bare at du velger skrift. Vær oppmerksom på linjeavstand, bokstavavstand osv. Ikke glem hvor viktig det er å matche typografien til designet.

Sørg også for å bruke de riktige skriftene på riktig sted. Hvis designeren bruker Georgia bare for overskrifter og Åpne uten for kroppen, så skal du ikke bruke Georgia for kroppen og Åpne uten for overskrifter. Typografi kan lett lage eller ødelegge estetikk. Bruk nok tid på å sørge for at den samsvarer med designerens skrifttype. Det blir brukt god tid.

Front-End design tolererer ikke 'Tunnel Vision'

Du gjør sannsynligvis små deler av den generelle utformingen.

Tunnelsyn er en vanlig felle for frontend-utviklere. De fokuserer ikke på en eneste detalj, men ser alltid på det store bildet. kvitring

Et eksempel jeg har gjort er å flagge et design som inkluderer egendefinerte avkrysningsruter, uten å vise dem merket. Det er viktig å huske at brikkene du lager er små deler av et overordnet design. Gjør sjekkene dine like viktige som et hake på en søkeside, ikke mer, ikke mindre. Ikke få tunnelvisjon over den lille delen din og gjør noe som ikke burde være.

Faktisk er en god teknikk for å gjøre dette å ta et skjermbilde av programmet så langt, eller av designfilene og oppsettet i det, i den sammenhengen det skal brukes i. På den måten vil du virkelig se hvordan det påvirker andre designelementer på siden, og om det passer riktig til funksjonen.

Relasjoner og hierarki

Vær spesielt oppmerksom på hvordan oppsettet fungerer med hierarki . Hvor nær er overskriftene til teksten? Hvor langt er de fra teksten om dem? Hvordan ser det ut til at designeren indikerer hvilke elementer / titler / teksttekster som er relatert og hvilke som ikke er? De vil ofte gjøre disse tingene ved å stramme relatert innhold sammen, bruke hvitt mellomrom for å indikere forhold mellom variabler, bruke lignende eller kontrasterende farger for å indikere relatert / ikke-relatert innhold, og så videre.

En god front-end utvikler vil respektere designforhold og hierarki. En flott utvikler vil forstå dem. kvitring

Det er din jobb å sørge for at du kjenner igjen måtene designen oppfyller relasjoner og hierarki, og også å sørge for at disse konseptene gjenspeiles i det endelige produktet (selv for innhold som ikke var spesielt designet og / eller dynamisk innhold). Dette er et annet område (som typografi) der det er verdt å ta ekstra tid for å sikre at du gjør en god jobb.

Vær kresen om hvitt mellomrom og justering

Dette er utmerket for å forbedre designene dine og / eller forbedre utførelsen av andres design: hvis designet ser ut til å bruke avstand på 20 enheter, 40 enheter osv., Så sørg for at hver avstand er et multiplum av 20 enheter.

Dette er en enkel måte for noen uten øye for estetikk å gjøre en betydelig forbedring raskt. Forsikre deg om at elementene dine er justert etter pikselet, og at avstanden rundt hver kant av hvert element er så jevn som mulig. Der du ikke kan gjøre det (som på steder der du trenger ekstra plass for å indikere hierarkiet), gjør dem nøyaktige multipler av avstanden du bruker andre steder, for eksempel to ganger standardinnstillingen for å opprette en separasjon, tre ganger for å opprette mer, og så.

Gjør ditt beste for å forstå hvordan designeren brukte mellomrom og følg disse konseptene i Front-End-bygningen. kvitring

Mange utviklere oppnår dette for spesifikt innhold i designfiler, men når det gjelder å legge til / redigere innhold eller implementere dynamisk innhold, kan avstanden gå overalt fordi de ikke egentlig forsto hva de implementerte.

Gjør ditt beste for å forstå hvordan designeren brukte hvite rom og følg disse konseptene i strukturen. Og ja, du bruker mye tid på dette. Når du tror arbeidet ditt er gjort, kan du gå tilbake og måle avstanden for å sikre at du har justert og plassert så mye som mulig, og deretter teste koden din med mye blandet innhold for å sikre at den er fleksibel.

Hvis du ikke vet hva du gjør, gjør mindre

Jeg er ikke en av dem som mener at hvert prosjekt skal bruke minimalistisk design, men hvis du er usikker på designet ditt og må legge til noe, er mindre mer.

Mindre er mer. Hvis designeren din gjorde en god jobb til å begynne med, bør du avstå fra å injisere dine egne designideer. kvitring

Designeren tok seg av de viktigste tingene; du trenger bare å ta vare på mindre forhold. Hvis du ikke er veldig flink til design, er det best å gjøre det minste beløpet du kan for å få elementet til å fungere. På denne måten injiserer du mindre av ditt eget design i designerens arbeid og påvirker det så lite som mulig.

La designeren arbeide i sentrum og la arbeidet ditt ta baksetet.

Time håner oss

Jeg forteller deg en hemmelighet om designere: 90% (eller mer) av det de faktisk legger på papir, eller et Photoshop-lerret, er ikke så stort.

De kaster mye mer enn de noen gang har sett. De tar ofte mange revisjoner og fikler med et design for å komme til det punktet at de til og med har la fyren i neste avlukke se sitt arbeid, uansett den faktiske kunden. Du går vanligvis ikke fra et tomt lerret til god design i ett trinn; det er mange iterasjoner i mellom. Folk gjør sjelden en god jobb før de forstår dette og tillater det i prosessen.

Hvis du tror designet kan forbedres, ta kontakt med designeren din. De har kanskje allerede prøvd en lignende tilnærming og bestemte seg for å gå imot den. kvitring

Så hvordan implementerer du dette? En viktig metode er å ta tid mellom versjoner. Arbeid til det ser ut som noe du liker, og lagre det. Gi det noen timer (å la det være over natten er enda bedre), og åpne det igjen og ta en titt. Du vil bli overrasket over hvor annerledes det ser ut med friske øyne. Velg raskt områder for forbedring. De vil være så tydelige at du vil lure på hvorfor du ikke så dem i utgangspunktet.

Faktisk tar en av de beste designerne jeg noensinne har møtt denne ideen mye lenger. Jeg begynte med å lage tre forskjellige design. Så ville jeg vente i minst 24 timer, se på dem igjen og kaste dem alle og starte fra bunnen av i et rom. Du vil da tillate en dag mellom hver iterasjon etter hvert som den ble bedre og bedre. Først da han åpnet den en morgen, og var helt fornøyd, eller i det minste så nær en designer kommer til å være helt glad, ville han sende den til kunden. Dette var prosessen han brukte for hvert design han laget, og det tjente ham veldig bra.

Jeg forventer ikke at du bruker den så av langt, men det fremhever hvor nyttig tid er uten 'blikk på design.' Det er en integrert del av designprosessen, og du kan gjøre forbedringer med stormskritt.

Pixels Matter

Du bør gjøre alt som står i din makt for å matche den originale designen i det ferdige programmet ditt, helt til siste piksel.

Front-end-utviklere bør prøve å matche den originale designen ned til den siste pikselet. kvitring

I noen områder kan du ikke være perfekt. For eksempel kan det hende at kontrollen din over bokstavavstand ikke er så presis som designeren, og en skygge CSS stemmer kanskje ikke akkurat overens med en av Photoshop , men du bør fortsatt prøve å komme så nært som mulig. For mange aspekter ved design kan du virkelig få perfekt pixel presisjon. Å gjøre det kan gjøre en enorm forskjell på bunnlinjen. En piksel her og der virker ikke som mye, men det legger opp og påvirker den generelle estetikken mye mer enn du skulle tro. Så hold øye med dette.

Det er en rekke verktøy som hjelper deg med å sammenligne de originale designene med de endelige resultatene, eller du kan bare ta skjermbilder og lime dem inn i designfilen for å sammenligne hvert element så tett som mulig. Bare plasser skjermbildet over designet og gjør det semi-gjennomsiktig slik at du kan se forskjellene. Da vet du hvor mye justering du har for å få det til å se bra ut.

Få tilbakemelding

Det er vanskelig å vinne et 'øye for design.' Det er enda vanskeligere å gjøre det alene. Du må se etter synspunkt til andre for å virkelig se hvordan du kan gjøre forbedringer.

Jeg foreslår ikke at du ber naboen din om råd, jeg mener at du bør konsultere designerne på ekte og la dem kritisere arbeidet ditt og komme med forslag.

La designere kritisere arbeidet ditt. Bruk kritikken til god bruk og ikke motvirke dem.

La designere kritisere arbeidet ditt. Bruk kritikken til god bruk og ikke motvirke dem. kvitring

Det krever litt mot å gjøre det, men til slutt er det noe av det mektigste du kan gjøre for å forbedre prosjektet på kort sikt og for å forbedre ferdighetsnivået ditt på lang sikt.

Selv om alt du trenger å finjustere er en enkel hake, er det mange mennesker som er villige til å hjelpe deg. Hvis det er en venn av designeren, eller et online forum, kan du se etter kvalifiserte personer og få tilbakemelding.

Bygg et langvarig og produktivt forhold til designerne dine. Det er viktig for tilbakemelding, kvalitet og nyttige henrettelser. kvitring

Det kan høres ut som det er tidkrevende og kan forårsake friksjon mellom deg og designerne dine, men det er verdt det. Gode ​​frontend-utviklere stoler på verdifulle innspill fra designere, selv når det ikke er noe de liker å høre.

Derfor er det viktig å bygge og opprettholde et konstruktivt forhold til designerne dine. Dere er alle i samme båt, så for å få det best mulig resultat de må samarbeide og kommunisere hvert trinn på veien. Å investere i obligasjonsbygging med designerne dine er verdt det, da det vil hjelpe alle til å gjøre en bedre jobb og utføre alt i tide.

konklusjon

For å oppsummere, her er en kort liste med designtips for front-end-utviklere:

• Design i et grafikkprogram. Ikke design fra kode, ikke engang de små tingene.
• Match designen. Vær oppmerksom på det originale designet og ikke prøv å forbedre det, bare match det.
• Typografien er enorm. Tiden du bruker på å sørge for at den er riktig, bør gjenspeile dens betydning.
• Unngå tunnelsyn. Sørg for at tilleggene dine skiller seg ut som de burde. De er ikke viktigere bare fordi du designet dem.
• Forhold og hierarki - Forstå hvordan de fungerer i designet ditt, slik at du kan implementere dem riktig.
• Hvite rom og justering er viktig. Gjør dem pikselnøyaktige og gjør dem ensartede i alt du legger til.
• Hvis du ikke er trygg på dine evner, så gjør tilleggene så minimalt utformet som mulig.
• Ta deg tid mellom anmeldelser. Kom tilbake senere for å se designarbeidet ditt med friske øyne.
• Pixel-perfekt implementering er viktig når det er mulig.
• Vær modig. Se etter erfarne designere for å kritisere arbeidet ditt.

Ikke alle Front End-utviklere kommer til å være en fantastisk designer, men hver Front End-utvikler bør være minst konkurransedyktig når det gjelder design.

Du må forstå nok om designkonsepter for å identifisere hva som skjer og for å bruke designet riktig på ditt endelige produkt. Noen ganger kan du komme unna med blinde kopier hvis du har en full designer (og hvis den er detaljert nok til å kopiere i piksel).

Men for å få flotte prosjekter til å skinne gjennom mange varianter av innhold, trenger du litt forståelse av hva som går gjennom hodet på designeren. Ikke bare trenger du å se hvordan designet ser ut, men du må vite hvorfor det ser slik ut og på den måten kan du være klar over tekniske og estetiske begrensninger som vil påvirke arbeidet ditt.

Dermed, selv som en frontend-utvikler, bør en del av din vanlige selvforbedring alltid omfatte å lære mer om design.