Vodiči za skice

9 savjeta za brži i učinkovitiji dizajn kako ne biste postali bezveze

Da, to je popis. Ali ove su dobre.

Napomena autora i besramni utikač: Ovo su tehnike koje sam odabrao prilikom izrade sustava za dizajn UX Power Tools. Aktivan sam dizajner i koristim ovaj sustav 10 sati dnevno, zajedno sa svim tehnikama spomenutim u ovom članku. Da nisam vjerovala u to, ne bih pisala o tome

1. Koristite stilove

Boli me koliko često to treba izgovarati, ali nastavit ću to izgovarati dok ne počnete to raditi

Temeljne promjene ubrzo dolaze do Sketch-a koji će učiniti vaš život tako OPASNIM ako se jednostavno zakopčate i počnete koristiti stilove. Nema boljeg vremena nego sada.

Korištenje stilova teksta i slojeva sloja čini vaš dizajn dosljednijim, vjerovali ili ne, na kraju ćete raditi brže.

2. Napravite listu stilova

Ne-potreban-a-visoko-potaknuo-čitanje:

Tablice stilova izuzetno su važne u CSS-u jer vam omogućuju centralno upravljanje načinom na koji se stvari vizualno pojavljuju na web mjestu. Promijenite stil gumba i svaki će se gumb na cijeloj web lokaciji ažurirati.

Nema razloga da ga ne kreirate za dizajnerske projekte kako biste imali sličnu razinu kontrole. Sve što trebate učiniti je imati jednu umjetničku ploču s jednom primjerkom svakog spremljenog stila teksta i stila sloja. Sve dok ove stilove upotrebljavate u čitavom dizajnu, uvijek ćete moći ponovo pregledati ploču tablice stilova ako ikad želite ažurirati font.

Sustav dizajna UX Power Tools izgrađen je na vrhu središnje tablice stilova. Na jednoj stranici možete promijeniti fontove i boje, sinkronizirati promjene, a cijeli će se sustav ažurirati kako bi odrazio vaša ažuriranja. Prilično je cool i štedi mi mnogo vremena kad radim na ogromnim projektima za klijente.

3. Koristite Transparentnost

Ovo je zaista zabavan trik za zabavu, ali pokazao sam ovu tehniku ​​programerima za sučeljavanje prošli tjedan i još uvijek čistim konferencijsku sobu u kojoj mu je eksplodirao um.

Zašto koristim prozirnost umjesto šesterokutnih vrijednosti?

To je uredan mali trik kako bi se osiguralo da vaš tekst izgleda sjajno u bilo kojoj boji pozadine. Na slici ispod prozirnost (druga linija) izgleda mnogo bolje od sive (prva linija) jer je poprimila nijansu boje ispod nje. Nema trikova; drugi redak teksta potpuno je isti u svakom scenariju boja. Upravo zbog njih djeluje transparentnost koja izgleda poput različitih stilova teksta. Sve za cijenu jednog. Kako prikladno!

Ovaj mali trik može se koristiti i za obrube gumba. Znate kako ponekad želite crveni gumb s malo tamnijim crvenim obrubom? Isprobajte unutarnju obrub s crnom bojom od 25%:

Prozirni crni obrub pomaže vam oponašati obrub tamnije boje bez glavobolje heks vrijednosti.

4. Napravite simbol praznog stanja

Ovo sam započeo tek nedavno, ali stvarno je ušteđeno vrijeme. Za stvari poput mrežnih podataka ili stranica na kojima može postojati ili ne mora biti podatak, ovisno o tome što je stvoreno ili konfigurirano, dobra je ideja imati lijepo prazno stanje kako biste obavijestili korisnika da sve nade nisu izgubljene!

Dizajnirajte standardni simbol praznog stanja i kasnije ga možete brzo ponovo upotrijebiti. Obično imam naslov, opis, ilustraciju i gumb akcije:

Ilustracija mog čudesno talentiranog kolege, Parkera McCullougha.

Za bonus bodove učinite ilustracijom ugniježđeni simbol kako biste ih mogli zamijeniti i isključiti, ovisno o tome na kojoj ste stranici.

Što me dovodi do ...

5. Stvorite biblioteku ilustracija

Ovo je pomalo napredna tehnika, ali to je jednostavan koncept koji će vam olakšati život, a i život vašeg omiljenog ilustratora (hvala, Parker)!

Knjižnice skica postoje već neko vrijeme, ali većina ih koristi za upravljanje svojim dizajnerskim sustavima. Preporučujem da ga koristite i za upravljanje svojom bibliotekom ilustracija!

Napravite zasebnu datoteku Sketch za ilustracije, a zatim je dodajte kao knjižnicu:

U svojoj biblioteci ilustracija napravite umetničke ploče za svaku prilagođenu ilustraciju koja vam je potrebna, a zatim uvezite te simbole u svoju dizajnersku datoteku kao mjesta rezerviranja:

Ovo će ilustrator raditi samostalno u bilo kojem vektorskom programu (poput Illustrator-a ili Affinity Designera). Kada dovrše ilustraciju, samo je trebaju unijeti u odgovarajuću ploču u datoteci biblioteke ilustracija. Skica će vas obavijestiti o ažuriranjima knjižnice, a sve što trebate učiniti je sinkronizirati promjene. Sada je vaša sjajna nova ilustracija u svom sjaju:

Ilustracija mog čudesno talentiranog kolege, Parkera McCullougha.

Prilično cool, ha?

6. Koristite dosljedne ikone

Nucleo Icons daleko su najbolje ikone koje postoje na internetu. Ne samo da je skup masivan i raznovrstan, već je i njihova desktop aplikacija nevjerojatna.

Možete prelaziti iz ispunjenih ikona u ikone linija, promijeniti težinu i čak definirati boju akcenta:

Kao da to već nije dovoljno, nikad nisam pronašao lakši način za pripremu ikona za programere od njihove značajke izvoza:

To ozbiljno ne postaje puno lakše od toga.

7. Koristite Ale Muñozov dodatak za Artboard Organizer

Sramim se reći da prije otprilike mjesec dana nisam znao da to postoji, ali otkad ga opsesivno koristim.

Ovaj dodatak stvorio je jedan od glavnih programera Sketcha, tako je. samo. djela.

Preuzmite ga ovdje:

Pritisnite tipku Control-Option-Command-A na tipkovnici i sve vaše ploče umjetnosti koje će se magično uskladiti i grupirati okomito i vodoravno. Redovi grafičkih ploča predstavljaju grupiranje (50 px između svake ploče), a grupiranje je odvojeno okomito s 250 px.

Dvije najbolje značajke ovog dodatka su: Snapping Artboard i Preuredivanje sloja. Kad povučete umjetničku ploču u novi red, ona će se automatski smjestiti na svoje mjesto, čak i ako je prevučete između ostalih matičnih ploča. Još je bolje što će se umjetnička ploča postaviti u ispravan odnos prema svim ostalim pločama s popisa slojeva. Kažem vam, nikad se u životu nisam osjećala tako organizirano!

Tako čisto i uredno!

8. Izrada arhitekture proizvoda (vidi gore)

Jednom kada instalirate dodatak s # 7, arhitekture proizvoda (vjerojatno je i bolje ime za to) postaju stvarno jednostavne za izradu. Gornja snimka zaslona prava je arhitektura proizvoda koju sam stvorio za projekt klijenta. Redovi predstavljaju značajke, a svaka ploča umjetnina predstavlja zaslon koji smo prepoznali i koji treba osmisliti. Sitni su modaliteti.

To su predivni jer proces dizajniranja doslovno postaje igra popunjavanja praznog. Lako je pregledati cijeli dokument da biste vidjeli koje praznine u dizajnu i dalje će biti očito ako postoje nedostajuće ploče.

9. Dajte modalima vlastitu ploču

Ovo je mali savjet koji se spominje u # 8, ali prestanite postavljati svoje modalitete na vrhu punih grafičkih ploča. U redu je ako to učinite jednom samo da biste se uvjerili da se osjeća dobro u kontekstu drugog zaslona, ​​ali nakon što utvrdite pravu veličinu, nema potrebe da se stalno prikazuje na drugim ekranima.

Zašto?

Pa, što se događa ako ažurirate zaslon pod tim modalom? Sada morate dvaput ažurirati taj zaslon: jednom na samom zaslonu, a drugi put ispod tog modalnog zaslona. Prilično neugodno

Ako ažurirate zaslon slijeva, tada ćete morati ažurirati i zaslon s desne strane. To postaje neugodno, STVARNO BRZO.

Druga prednost stvaranja samostalnih modalnih ploča je to što se možete povezati s njima kao modalni dijalog pomoću alata za prototipiranje InVision-a. To korisniku omogućava da klikne na gumb u modelu InVision, a modal koji ste stvorili zapravo će animirati na zaslonu. Tada mogu kliknuti dalje od modaliteta i on će biti "zatvoren" baš kao što je to slučaj u stvarnoj aplikaciji. Klijenti vole to sranje!

Kada ne tražim tople i nejasne osjećaje, radim na resursima poput UX Power Tools kako bih vas učinio boljim i učinkovitijim dizajnom.

  1. Slijedite UX Power Tools na Twitteru
  2. Slijedite me na Twitteru
  3. Pozdravi na LinkedInu
  4. Naučite neke stvari i pretplatite se na blog moje agencije