Design til ikke-designere: Del 1

Det eneste råd til øjeblikkeligt at forbedre dine designfærdigheder.

Hent bogen! Bestil Hello Web Design her - fuld videokursus, paperback og eBook tilgængelig.

Selv hvis du ikke er en designer, vil jeg satse på, at du på et tidspunkt i din karriere bliver nødt til at gøre noget visuelt, hvad enten det er at lave en destinationsside til dit projekt, designe en formular, oprette din personlige webside eller lave lysbilleder.

Så del 1 - hvad er den vigtigste ting at huske, når man designer?

Reducer rodet.

Det er det. Fokus på netop denne ene ting. Hvis du ønsker, at dit design skal føles smukkere, skal du reducere det visuelle rod.

Vores grimme widget, som vi vil anvende designkoncepter til.

Jeg lavede disse små widget til at illustrere disse rod-busting tip. Når vi gennemgår koncepterne herunder, anvender vi dem på widgeten og ser, hvordan det begynder at se mere sammenhængende og visuelt tiltalende.

Lad os komme igang!

Reducer rod ved at tilføje et gitter til at linere tingene op.

Billede via Foundation front-end framework

Der er ofte en anekdote, der fortælles om striden mellem designere og front-end-udviklere: En designer giver en mockup til en udvikler, der implementerer designet i kode. Designeren klager derefter over, at så-og-så-element er to pixels fra, hvilket får udvikleren til at rulle øjnene - to pixels? Det er så lille, at det ikke skal gøre noget! Fjollede designere og deres nitpicking!

Imidlertid kan små ujævnheder være svære at se, men bidrage til en følelse af "rod" inden for et design. Elementer kan føles tilfældigt placeret og ikke harmoniske, når de ikke er på linje med hinanden.

Hvilket ser mere sammenhængende ud?

Det er nemt at tilføje utilsigtede forkert justeringer ved et uheld at tilføje ekstra polstring og margener til overskrifter og indhold. I eksemplet ovenfor har skærmbilledet til højre endda marginer og polstring, og alle elementer er rettet mod det samme venstre gitter, hvilket fører til et mere sammenhængende og professionelt udseende design.

Ved at sammenstille venstre og højre kanter af alt får widget'en en smule mere sammenhængende udseende.

I vores eksempel-widget var venstre og højre margen overalt. Tilpasning af disse marginer øjeblikkeligt får widget'en til at føle sig mindre kaotisk.

Kort sagt, reducer rodet-y-følelsen ved at foretage tingene op.

Ved webarbejde skal du bruge genveje ved at bruge forreste webrammer, der inkluderer et gitter, såsom Foundation, Bootstrap, Skeleton og PureCSS, som gør det næsten umuligt at bruge tilfældig placering af HTML-elementer.

Til ikke-webdesignarbejde og mockups kan du også bruge gitre og guider inden for designprogrammer som Sketch, Photoshop og Gimp.

Reducer rod ved at begrænse farverne i dit design.

Det kan være super hårdt at vælge farver, en af ​​grundene til, at farveteori ofte er en semesters lang klasse på designskoler.

Gammelt GoDaddy-sted kontra nuværende.

En ting, vi kan se på det gamle GoDaddy-sted ovenfor, er det store antal farver, der bruges i hele designet. Alle er røde, grønne, orange, mørkegrå, lysegrå, gule og blå - og denne regnbuevisning af farver bidrager (sammen med andre faktorer) til en alvorlig følelse af rod.

Det nuværende GoDaddy-websted er meget renere og bruger de samme nuancer af sort, grønt og orange i hele designet. Billedet er også for det meste gråt, så det kan falme i baggrunden og lade den grønne knap på formularen skille sig ud.

Der er en masse teori og bedste praksis bag valg af farver, der ville overvælde denne artikel, hvorfor jeg især her går ind for at bruge genveje.

Adobe Color CC-webstedet har en fantastisk peg-og-klik-interface til at opbygge komplementære farvepaletter.

Det er en vanskelig forretning at vælge en farvepalet fra grunden, hvorfor jeg gerne stole på websteder, der viser frembyggede farvepaletter eller hjælper dig med at opbygge paletter fra en basefarve, såsom Colourlovers, Adobe Color CC og Colorblendy. Disse sider hjælper dig med at opbygge en palet, der indeholder et lille antal farver, der fungerer godt sammen.

Påføring af en farvepalet fra Colourlovers

Til vores widget greb vi en palet fra Colourlovers og anvendte den på widgeten. Bemærk, at ikke alle farver skal bruges, og det er heller ikke de nøjagtige farver, der er angivet i paletten. Den nye “Download” -knap er ikke helt den samme mørke fersken som i paletten, men paletten gav os et fantastisk udgangspunkt.

Hvis du gerne vil lære mere om processen med at bygge farver, vil jeg anbefale denne fremragende artikel om Smashing Magazine: A Simple Web Developer's Guide to Colour.

Reducer rod ved at reducere antallet af skrifttyper, du bruger.

Gudskelov, vi har flere skrifttyper tilgængelige for os nu! Borte er dagene med kun få skrifttyper at vælge imellem.

Typografi er et andet stort emne, der kan være overvældende. Serif, sans-serif, monospace, display, web-safe og plate er alle udtryk, der bruges til at beskrive og kategorisere skrifttyper og skrifttyper (termer, der generelt bruges om hverandre til ikke-typografer).

Der er mange retningslinjer for valg af en skrifttype, men jeg vil kun anbefale to at starte: Brug kun to skrifttyper pr. Design og undgå fancy / display-skrifttyper.

Brug af kun to skrifttyper får widgeten til at se ud og føles renere.

Vores originale widget til venstre bruger fire forskellige skrifttyper, og vores opdaterede widget til højre bruger kun to. Den nye widget bruger stilarter som kursiv og all-caps, som stadig giver en følelse af forskel mellem forskellige elementer, men generelt føles mere sammenhængende.

Men at vælge to skrifttyper med alle de muligheder, vi har til rådighed, kan stadig være overvældende. Websteder som Typekit (gratis til $ 99 / år) og Google Font (gratis) er gode ressourcer til professionelle, smukke skrifttyper, men indeholder hundredvis af muligheder at vælge imellem.

Brug websteder, der sammenstiller gratis skrifttyper som Typewolf, Beautiful Web Type, Font Pair og Type.io.

Reducer valget ved at bruge et fontkuratoringssted for at se et mere begrænset antal skrifttyper og se dem i handling. Et antal websteder viser de bedste tilgængelige Google-skrifttyper, herunder Typewolf, Beautiful Web Type, Font Pair og Typ.io. Du behøver ikke længere at rulle gennem hundreder af skrifttyper - blot gennemse disse sider, indtil en kombination føles rigtig for dig og din situation.

Du kan finde flere oplysninger om valg af skrifttyper i denne fremragende artikel om Smashing Magazine: Sådan vælger du et skrifttype - en trinvis vejledning.

En Book Apart har også en fremragende bog, der går i detaljer i webtypografi: On Web Typography

Reducer følelsen af ​​rod ved at tilføje hvidafstand.

Whitespace er den ultimative rodreduktion.

Vi har en tendens som begyndende designere til at skubbe for meget information tæt sammen. Store, tomme huller føles ubehagelige og unaturlige, og begyndere har ofte lyst til at fylde tomt rum (ellers kendt som hvidrum eller negativt rum) med information og elementer.

Før og efter tilføjelse af hvid plads til min personlige hjemmeside.

Hvidafstand i design (marginaler og polstring omkring vores elementer såvel som mellemrum mellem vores tekst og bogstaver) gør vores ord mere læsbare, vores grænseflader mindre kaotiske, og vores design føles mere professionelle.

Tilføjelse af blanksteds (og normalisering af mellemrummet mellem elementer) gør widget'en mere professionel.

Ved at tilføje hvidafstand på et antal steder i vores widget - mellem indholdet og kanterne på den grønne baggrund, mellem overskriften og afsnittet, mellem de enkelte tekstlinjer og inden for vores form - føles vores widget mere professionel og er lettere at læse.

Der er ikke en god genvej til brug her, bare en påmindelse: Brug mere hvidafstand, end du tror, ​​du har brug for. Sørg for, at dine elementer, uanset hvad du designer, har masser af marginer og mellemrum mellem dem, at din tekst har masser af plads / linjehøjde mellem de enkelte linjer, og at dit design har masser af plads mellem indholdet og kanterne på Rummet.

For mere kan du tjekke disse fremragende artikler:

  • Hvidafstand i webdesign: Hvad det er, og hvorfor du skal bruge det
  • Brug af hvidt rum (eller negativt rum) i dine design

Afslutningsvis skal du huske at reducere rod for et bedre udseende og følelse af design.

Hvert af de rodreducerende principper, der anvendes til denne widget, har forbedret udseendet enormt.

Clutter er den første ting, du skal fokusere på for at gøre smukkere design. Husk, at for at reducere rod, følg disse principper:

  • Line ting op og brug et gitter.
  • Begræns antallet af farver i dit design og brug en komplementær farvepalet.
  • Reducer antallet af anvendte skrifttyper.
  • Tilføj hvidafstand.

Kort sagt, sigte mod et "rent" og ordentligt design.

Naturligvis er design ikke bare hvordan det ser ud - endnu vigtigere er det, hvordan det fungerer. Hold øje med del to og del tre i denne artikelserie, gå ind i brugeroplevelse såvel som at undersøge designprocessen og taktikkerne for, hvordan du kan træne dit designøje.

Næste indlæg i denne serie:

  • Del 2 om UX og indhold kan ses her.
  • Del 3 om designintuition og inspiration kan ses her.
Bestil Hello Web Design her

Hent bogen! Hello Web Design vil ikke kun indeholde ovenstående oplysninger, men også teori og bedste praksis i jordnære og letforståelige termer rettet mod programmerere og ikke-designere.

Køb bogen her.

Tak allesammen! For spørgsmål, følg og send mig besked på Twitter.

(Denne artikel vises også på Hello Web Books-bloggen.)