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.
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.
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.
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.
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.
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.
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.
Du gjør sannsynligvis små deler av den generelle utformingen.
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.
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.
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.
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å.
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.
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.
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.
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.
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.
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.
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.
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. kvitringDet 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.
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.
For å oppsummere, her er en kort liste med designtips for front-end-utviklere:
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.