7 praktiske tip til snyd ved design

Forbedring af dine designs med taktik i stedet for talent.

Hver webudvikler løber uundgåeligt ind i situationer, hvor de er nødt til at tage beslutninger om visuelt design, hvad enten de kan lide det eller ej.

Det firma, du arbejder for, har måske ikke en heltids designer, og du er nødt til at implementere UI'en for en ny funktion på egen hånd. Eller måske hacking du et sideprojekt, og du vil have, at det skal se bedre ud end endnu et andet-Bootstrap-site.

Det er let at smide hænderne op og sige, ”Jeg vil aldrig være i stand til at gøre dette ser godt ud, jeg er ikke en kunstner!” Men det viser sig, at der er et væld af tricks, som du kan bruge til at udjævne dit arbejde, kræver ikke baggrund i grafisk design.

Her er syv enkle ideer, du kan bruge til at forbedre dit design i dag.

1. Brug farve og vægt til at oprette hierarki i stedet for størrelse

En almindelig fejltagelse, når styling af UI-tekst stoler for meget på skriftstørrelse til at kontrollere dit hierarki.

”Er denne tekst vigtig? Lad os gøre det større. ”

”Er denne tekst sekundær? Lad os gøre det mindre. ”

I stedet for at overlade al den tunge løft til skriftstørrelse alene, kan du prøve at bruge farve eller skriftvægt til at udføre det samme job.

”Er denne tekst vigtig? Lad os gøre det dristigere. ”

”Er denne tekst sekundær? Lad os bruge en lysere farve. ”

Prøv at holde sig til to eller tre farver:

  • En mørk (men ikke sort) farve til primært indhold (som overskriften på en artikel)
  • En grå for sekundært indhold (som den dato, hvor en artikel blev offentliggjort)
  • En lysere grå til supplerende indhold (måske copyright-meddelelsen i en sidefod)

Tilsvarende er to fontvægte normalt nok til UI-arbejde:

  • En normal fontvægt (400 eller 500 afhængigt af skrifttypen) for de fleste tekst
  • En tungere skriftvægt (600 eller 700) for tekst, du vil fremhæve

Hold dig væk fra fontvægte under 400 for UI-arbejde; de kan arbejde til store overskrifter, men er for hårde at læse i mindre størrelser. Hvis du overvejer at bruge en lettere vægt til at fremhæve noget tekst, skal du bruge en lysere farve eller mindre skriftstørrelse i stedet.

2. Brug ikke grå tekst på farvet baggrund

At gøre tekst til en lysere grå er en fantastisk måde at fremhæve den på hvide baggrunde, men den ser ikke så flot ud på farvet baggrund.

Det skyldes, at den effekt, vi faktisk ser med grå på hvidt, er reduceret kontrast.

At gøre teksten tættere på baggrundsfarven er det, der faktisk hjælper med at skabe hierarki og ikke gøre den lysegrå.

Der er to måder, du kan reducere kontrasten på, når du arbejder med farverig baggrund:

1. Reducer opaciteten af ​​hvid tekst

Brug hvid tekst, og sænk opaciteten. Dette giver baggrundsfarven til at blæse lidt igennem, hvilket understreger teksten på en måde, der ikke er i konflikt med baggrunden.

2. Håndpluk en farve, der er baseret på baggrundsfarven

Dette fungerer bedre end at reducere opaciteten, når din baggrund er et billede eller et mønster, eller når du reducerer opaciteten får teksten til at føles for kedelig eller vasket ud.

Vælg en farve, der er den samme farvetone som baggrunden, juster justering af mætning og lyshed, indtil den ser ud til dig.

3. Offset dine skygger

I stedet for at bruge store uskarphed og spredte værdier for at gøre boksskygger mere synlige, tilføj en lodret forskydning.

Det ser meget mere naturligt ud, fordi det simulerer en lyskilde der skinner ned ovenfra, som vi er vant til at se i den virkelige verden.

Dette gælder for indsatte skygger, som du muligvis også bruger på brønde eller formindgange:

Hvis du er interesseret i at lære mere om skyggedesign, er retningslinjerne for materialedesign en fantastisk grundbog.

4. Brug færre rammer

Når du har brug for at skabe adskillelse mellem to elementer, skal du prøve at modstå straks at nå en grænse.

Mens grænser er en fantastisk måde at skelne to elementer fra hinanden på, er de ikke den eneste måde, og at bruge for mange af dem kan få dit design til at føle sig travlt og rodet.

Næste gang du finder dig selv at nå en grænse, kan du prøve en af ​​disse ideer i stedet:

1. Brug en boksskygge

Boksskygger gør et godt stykke arbejde med at skitsere et element som en kant ville, men kan være mere subtile og opnå det samme mål uden at være så distraherende.

2. Brug to forskellige baggrundsfarver

At give tilstødende elementer lidt forskellige baggrundsfarver er normalt alt hvad du behøver for at skabe forskel mellem dem. Hvis du allerede bruger forskellige baggrundsfarver ud over en kant, kan du prøve at fjerne kanten; du har muligvis ikke brug for det.

3. Tilføj ekstra afstand

Hvilken bedre måde at skabe adskillelse mellem elementer på end blot at øge adskillelsen? At dele ting længere fra hinanden er en fantastisk måde at skabe forskel på grupper af elementer uden at introducere noget nyt UI overhovedet.

5. Blæs ikke ikoner, der er beregnet til at være små

Hvis du designer noget, der kan bruge nogle store ikoner (som måske afsnittet "funktioner" på en landingsside), kan du instinktivt gribe et gratis ikonsæt som Font Awesome eller Zondicons og stødde op i størrelsen, indtil de passer til dine behov.

Det er trods alt vektorbilleder, så kvaliteten kommer ikke til at lide, hvis du forøger størrelsen, ikke?

Selvom det er rigtigt, at vektorbilleder ikke forringes i kvalitet, når du øger deres størrelse, vil ikoner, der blev tegnet ved 16–24 px, aldrig se meget professionelle ud, når du sprænger dem op til 3x eller 4x deres tilsigtede størrelse. De mangler detaljer og føles altid uforholdsmæssigt "tykke".

Hvis små ikoner er alt, hvad du har, kan du prøve at omslutte dem i en anden form og give formen en baggrundsfarve:

Dette giver dig mulighed for at holde det faktiske ikon tættere på dets tilsigtede størrelse, mens du stadig udfylder den større plads.

Hvis du har budgettet, kan du også bruge et premium-ikonsæt designet til at blive brugt i større størrelser, som Heroicons eller Iconic.

6. Brug accentgrænser for at tilføje farve til et blidt design

Hvis du ikke er en grafisk designer, hvordan tilføjer du det stykke visuel flair til dit UI, som andre designs får fra smuk fotografering eller farverige illustrationer?

Et enkelt trick, der kan gøre en stor forskel, er at tilføje farverige accentgrænser til dele af din interface, som ellers ville føles lidt intetsigende.

For eksempel langs siden af ​​en alarmmeddelelse:

... eller for at fremhæve aktive navigationselementer:

... eller endda på tværs af toppen af ​​hele dit layout:

Det behøver ikke noget grafisk designtalent at tilføje et farvet rektangel til dit brugergrænseflade, og det kan gå langt i retning af at få dit websted til at føle sig mere "designet".

Har du svært ved at vælge farver? Prøv at vælge en begrænset palet som Dribbbles farvesøgning for at undgå at blive overvældet af de traditionelle farvevælgers uendelige muligheder.

7. Ikke hver knap har brug for en baggrundsfarve

Når der er flere handlinger, som en bruger kan udføre på en side, er det let at falde i fælden med at designe disse handlinger, der udelukkende er baseret på semantik.

Rammer som Bootstrap opmuntrer slags ved at give dig en menu med semantiske stilarter at vælge imellem, når du tilføjer en ny knap:

”Er dette en positiv handling? Gør knappen grøn. ”

“Sletter dette data? Gør knappen rød. ”

Semantik er en vigtig del af knapdesign, men der er en mere vigtig dimension, der ofte er glemt: hierarki.

Hver handling på en side sidder et sted i en pyramide af betydning. De fleste sider har kun en ægte primær handling, et par mindre vigtige sekundære handlinger, og nogle få har sjældent brugt tertiære handlinger.

Når du designer disse handlinger, er det vigtigt at kommunikere deres plads i hierarkiet.

  • Primære handlinger skal være indlysende. Massive baggrundsfarver i høj kontrast fungerer godt her.
  • Sekundære handlinger skal være klare, men ikke fremtrædende. Konturstilarter eller baggrundsfarver med lavere kontrast er gode muligheder.
  • Tertiære handlinger skal være synlige, men ikke påtrængende. Styling af disse handlinger som links er normalt den bedste metode.

"Hvad med destruktive handlinger, skulle de ikke altid være røde?"

Ikke nødvendigvis! Hvis den destruktive handling ikke er den primære handling på siden, kan det være bedre at give den en sekundær eller tertiær knapbehandling.

Gem den store, røde og dristige styling til, når den negative handling faktisk er den primære handling i grænsefladen, som i en bekræftelsesdialog:

Kan du nyde dette indlæg? Vi har lige udgivet en bog!

Refactoring UI tager alt, hvad vi ved om design, og bundter det i en omfattende pakke, herunder en bog, screencasts, et komponentgalleri, specialdesignede aktiver og mere.

Over 6000 mennesker har hentet det indtil videre, og feedbacken har været fantastisk.

Hvis du er interesseret, skal du gå til RefactoringUI.com/book for at lære mere og downloade en prøve.