7 praktičnih savjeta za varanje na dizajnu

Poboljšajte svoje dizajne taktikom umjesto talentom.

Svaki web programer neizbježno nailazi na situacije u kojima treba donijeti odluke o vizualnom dizajnu, bilo da im se sviđa ili ne.

Možda tvrtka za koju radite nema dizajnera s punim radnim vremenom i sami morate implementirati korisničko sučelje za novu značajku. Ili možda hakirate sporedni projekt i želite da on izgleda bolje nego još jedno-drugo Bootstrap-mjesto.

Lako je dignuti ruke i reći: "Nikad neću uspjeti učiniti da ovo izgleda dobro, nisam umjetnik!", Ali ispostavilo se da postoji niz trikova koje možete upotrijebiti za izravnavanje svog rada koji ne zahtijevaju pozadinu grafičkog dizajna.

Evo sedam jednostavnih ideja koje danas možete koristiti za poboljšanje dizajna.

1. Koristite boju i težinu za stvaranje hijerarhije umjesto veličine

Česta greška kod stiliziranja UI teksta previše se oslanja na veličinu fonta da biste kontrolirali svoju hijerarhiju.

"Je li ovaj tekst važan? Učinimo to većim. "

"Je li ovaj tekst sporedan? Učinimo je manjom. "

Umjesto da sve teške dizanje ostavljate same na veličini fonta, pokušajte koristiti boju ili težinu slova da biste obavili isti posao.

"Je li ovaj tekst važan? Učinimo to hrabrijim. "

"Je li ovaj tekst sporedan? Upotrijebimo svjetliju boju. "

Pokušajte se držati dvije ili tri boje:

  • Tamna (ali ne crna) boja za primarni sadržaj (poput naslova članka)
  • Sivo za sekundarni sadržaj (poput datuma objave članka)
  • Svjetlije sivo za pomoćni sadržaj (možda obavijest o autorskim pravima u podnožju)

Slično tome, dvije težine fonta obično su dovoljne za rad sučelja:

  • Uobičajena težina fonta (400 ili 500 ovisno o fontu) za većinu teksta
  • Veća težina slova (600 ili 700) za tekst koji želite naglasiti

Ostanite podalje od težine fonta ispod 400 za rad UI; mogu raditi za velike naslove, ali ih je preteško čitati u manjim veličinama. Ako razmišljate o upotrebi lakše težine za naglasiti tekst, umjesto toga upotrijebite svjetliju boju ili manju veličinu slova.

2. Nemojte koristiti sivi tekst na obojenim pozadinama

Upućivanje teksta u svjetlije sive je sjajan način da ga naglasite na bijeloj pozadini, ali ne izgleda tako sjajno na obojenoj pozadini.

To je zato što je efekt koji stvarno vidimo kod sive na bijeloj boji smanjeni kontrast.

Približavanje teksta boji pozadine ono što zapravo pomaže u stvaranju hijerarhije, a ne svijetlo sivo.

Postoje dva načina na koje možete smanjiti kontrast kada radite s raznobojnom pozadinom:

1. Smanjite neprozirnost bijelog teksta

Koristite bijeli tekst i smanjite neprozirnost. To omogućava da se boja pozadine malo iscrpi, deakstirajući tekst na način da se ne sukobljava sa pozadinom.

2. Ručno odaberite boju koja se temelji na boji pozadine

To djeluje bolje od smanjenja neprozirnosti kada je vaša pozadina slika ili uzorak ili ako smanjenje neprozirnosti čini tekst previše tupim ili ispranim.

Odaberite boju iste boje kao i pozadina, prilagođavajući zasićenost i lakoću dok vam ne izgleda kako treba.

3. Pomaknite svoje sjene

Umjesto da se koriste velike vrijednosti zamućenja i širenja kako bi sjenke okvira bile uočljivije, dodajte vertikalni odmak.

Izgleda puno prirodnije jer simulira izvor svjetlosti koji se smanjuje odozdo kao što smo navikli da vidimo u stvarnom svijetu.

Ovo se odnosi i na umetnute sjene kao što biste ih mogli upotrijebiti i na utorima ili na obrascima:

Ako vas zanima više o dizajniranju sjene, Smjernice za dizajn materijala fantastičan su temelj.

4. Koristite manje obruba

Kad trebate stvoriti razdvajanje između dva elementa, pokušajte odoljeti da odmah dođete do granice.

Iako su obrubi odličan način da se dva elementa međusobno razlikuju, oni nisu jedini način, a ako koristite previše njih, vaš dizajn može biti zauzet i nered.

Sljedeći put kad dođete do granice, pokušajte umjesto toga jednu od ovih ideja:

1. Koristite sjenilo okvira

Boje sjene sjajno rade nacrtavanje elementa poput obruba, ali mogu biti i suptilniji i ostvariti isti cilj bez ometanja.

2. Koristite dvije različite boje pozadine

Davanje susjednim elementima malo različitih boja pozadine obično je sve što vam je potrebno da stvorite razliku između njih. Ako već upotrebljavate različite boje pozadine pored obruba, pokušajte ukloniti obrub; možda ti neće trebati.

3. Dodajte dodatni razmak

Koji je bolji način za stvaranje razdvajanja između elemenata od prostog razdvajanja? Daljnji razmak stvari sjajan je način stvaranja razlike između grupa elemenata bez uvođenja novog korisničkog sučelja.

5. Ne bacajte ikone za koje se misli da su male

Ako dizajnirate nešto što bi moglo koristiti neke velike ikone (poput možda odjeljka "značajke" odredišne ​​stranice), možda ćete instinktivno zgrabiti besplatnu ikonu kao što su Awesome Font ili Zondicons i nagomilati veličinu dok ne odgovaraju vašim potrebama.

Na kraju su sve vektorske slike, tako da kvaliteta neće patiti ako povećate veličinu, zar ne?

Iako je istina da vektorske slike neće propadati u kvaliteti kad povećate njihovu veličinu, ikone koje su crtane u 16-24 px nikada neće izgledati vrlo profesionalno kad ih pušete do 3x ili 4x od njihove predviđene veličine. Nedostaje im detalja i uvijek se osjećaju nerazmjerno „sitno“.

Ako su male ikone sve što imate, pokušajte ih zatvoriti u drugi oblik i dati obliku pozadinske boje:

To vam omogućuje da zadržite stvarnu ikonu bliže njenoj predviđenoj veličini, a istovremeno ispunite veći prostor.

Ako imate proračun, možete upotrijebiti i vrhunski set ikona dizajniran za upotrebu u većim veličinama, poput Heroicons ili Iconic.

6. Upotrijebite naglašene obrube kako biste dodali boju blagim dizajnom

Ako niste grafički dizajner, kako dodati svom dodiru sučelja onaj dodatni vizualni njuh koji ostali dizajni dobivaju od prelijepih fotografija ili šarenih ilustracija?

Jedan jednostavan trik koji može donijeti veliku razliku je dodati šarene naglasne obrube dijelovima vašeg sučelja koji bi se inače osjećali pomalo blago.

Na primjer, uz bok poruke upozorenja:

… Ili za isticanje aktivnih stavki za navigaciju:

… Ili čak preko vrha čitavog izgleda:

Ne treba talentirati grafički dizajn da biste dodali obojeni pravokutnik vašem korisničkom sučelju i može uvelike učiniti da se vaša web lokacija osjeća više "dizajniranom".

Teško birate boje? Pokušajte odabrati iz ograničene palete poput Dribbble pretraživanja boja kako biste izbjegli da vas obuzimaju beskrajne mogućnosti tradicionalnog birača boja.

7. Nije svaki gumb potreban za pozadinsku boju

Kad na stranici postoji više radnji koje korisnik može poduzeti, lako je upasti u zamku dizajniranja tih radnji zasnovanih isključivo na semantičkoj osnovi.

Okviri poput Bootstrap nekako potiču to davanjem izbornika semantičkih stilova koje možete odabrati kad dodajete novi gumb:

"Je li to pozitivna akcija? Učinite gumb zelenim. "

"Ovo briše li podatke? Učinite gumb crvenim. "

Semantika je važan dio dizajna gumba, ali postoji važnija dimenzija koju se obično zaboravlja: hijerarhija.

Svaka radnja na stranici nalazi se negdje u važnoj piramidi. Većina stranica ima samo jednu pravu primarnu radnju, nekoliko manje važnih sporednih radnji i nekoliko rijetko korištenih tercijarnih radnji.

Pri osmišljavanju ovih akcija važno je priopćiti njihovo mjesto u hijerarhiji.

  • Primarne radnje trebaju biti očite. Ovde djeluju sjajne, pozadinske boje visokog kontrasta.
  • Sekundarne akcije trebaju biti jasne, ali ne i istaknute. Oblici stilova ili niže kontrastne pozadinske boje odlične su opcije.
  • Tercijalne akcije trebaju biti vidljive, ali neupadljive. Stil ove radnje poput veza obično je najbolji pristup.

"Što je sa destruktivnim radnjama, ne bi li trebale uvijek biti crvene?"

Nije nužno! Ako destruktivna radnja nije primarna radnja na stranici, možda bi bilo bolje dati joj sekundarni ili tercijarni tretman gumba.

Spremite veliki, crveni i podebljani stil kada je ta negativna radnja zapravo primarna radnja na sučelju, poput dijaloga za potvrdu:

Želite li uživati ​​u ovom postu? Upravo smo izdali knjigu!

Korisničko sučelje za preuređivanje obuzima sve što znamo o dizajnu i povezuje ga u jedan sveobuhvatan paket, uključujući knjigu, ekrane s ekranima, galeriju komponenata, prilagođenu građu i još mnogo toga.

Dosad su ga pokupili preko 6000 ljudi, a povratne informacije bile su nevjerojatne.

Ako vas zanima, prijeđite na RefactoringUI.com/book da biste saznali više i preuzmi uzorak.