Tutoriale de schiță

Un Ghid de pornire rapidă pentru UX Power Tools

Este atât de ușor să te întrebi de ce ai proiectat vreodată alt mod.

UX Power Tools este cel mai avansat sistem de proiectare Sketch realizat vreodată. Este ca Bootstrap-ul pentru designeri. Toată munca grea este deja făcută pentru tine, așa că ajungi să te concentrezi pe partea distractivă: proiectarea de fapt.

Stilurile, simbolurile și tehnicile speciale vă vor face un designer mai eficient și vă vor ajuta să creați designuri mai consecvente.

Acest Ghid de pornire rapidă este menit să vă arate elementele de bază ale personalizării și scalării sistemului pentru a vă potrivi marca și pentru a vă încadra în procesul de proiectare.

Conținutul Ghidului de pornire rapidă

1. Introducere: Doar o introducere!
2. Configurare: Înainte de a deschide fișierele
3. Culori: Personalizare și adăugare de culori
4. Tipografie: Schimbarea culorilor fontului și fontului
5. Simboluri: Introducere în simboluri
6. Icoane: Schimbarea pictogramelor și adăugarea de noi puncte
7. Câmpuri: Personalizarea câmpurilor de intrare
8. Butoane: Personalizarea butoanelor
9. Alte personalizări: umbre, scrimuri și multe altele!
10. Rezumat: Respirați puțin!
11. Ajutor: mai mult ajutor + servicii personalizate

1. Introducere

Sunt un designer de produse cu normă întreagă pentru o agenție digitală și ajut la răsfoire oriunde din 12-20 de sisteme de proiectare și cadre pe an pentru proiecte noi de clienți. Am creat UX Power Tools din necesitate, pentru a putea fi mai eficient și mi-a crescut productivitatea de aproape 10 ori.

După ce veți învăța elementele de bază ale sistemului și veți obține lucrurile sub degetele dvs., veți proiecta mai exact, mai consistent și mai eficient. Mii de designeri amatori și profesioniști din întreaga lume la companii mari și mici folosesc UX Power Tools pentru a-și accelera fluxurile de lucru.

Acest Ghid de pornire rapidă funcționează atât pentru sistemul web, cât și pentru sistemul mobil, așa că nu trebuie decât să îl înveți o singură dată!

Să o facem, ittttttt!

11:28 pm EST - Aici proiectăm Instrumente electrice UX. Stânga, creștină. Bine, Jon (eu). Puțin somn, bere puțin, și o mulțime de indicatoare de tablă. Nu lăsa cămașa din New York să te păcălească. Locuim în Indianapolis, Indiana.

2. Configurare

Instalați fontul Open Sans

Este disponibil gratuit de pe Google și vine, de asemenea, alături de pachetul în sine. Este notat în readme și Sketch vă va anunța de asemenea. În acest moment, doar facem greșeală! Oricum, puteți modifica acest lucru mai târziu, dar este bine să vă asigurați că este instalat pentru a începe, astfel încât să nu vă aruncați simbolurile.

Schimbați-vă Setările de nudging

Sistemul este bazat pe o grilă de 8 pixeli, astfel încât să vă puteți salva o mulțime de dureri de cap, schimbându-vă setările de nod de la 10px la 8px.

...

Totul instalat? Minunat!

3. Culori

Acesta este cel mai bun mod de a începe, așa că am fost numiți în mod adecvat pagina „Start Here”. Este destul de greu să încurci asta, oameni :)

Există câteva tutoriale pe această pagină, pe care le așteptați să le urmăriți, dar acest Ghid de pornire rapidă vă va parcurge în detaliu același proces.

Stile Stack ™

UX Power Tools folosește un mic truc de eficiență numit Style Stacks ™ (brevet în curs) pentru a face o actualizare superioară a multor stiluri de strat simultan. Acele blocuri de culoare pe care le vedeți pe tabloul de artă „Set Colors and Fonts Here” sunt de fapt stive de dreptunghiuri, fiecare cu un stil de strat diferit. Acest lucru ne permite să actualizăm rapid toate acele stiluri de straturi în același timp. Convenabil!

Cum să personalizați culorile

Pasul 1
Faceți clic și glisați pentru a selecta blocul de culoare. Îmi place să încep cu culoarea mea principală de brand, așa că voi selecta „Primar”. Nu faceți clic doar pe bloc. În această stivă există mai multe dreptunghiuri și trebuie să le selectați pe toate.

Am blocat toate etichetele, așa că nu trebuie să vă faceți griji cu privire la selectarea accidentală a textului!

Pasul 2
Vedeți cum arată inspectorul umpluturi, granițe și umbre interioare? Acest lucru se datorează faptului că există acest dreptunghi care are unul sau mai multe dintre aceste atribute. Alegeți o culoare și actualizați fiecare dintre aceste valori de culoare. Îmi place să merg de jos în sus, deoarece acel selector de culori poate intra în cale:

Nu veți vedea cum se schimbă culoarea atunci când schimbați umbrele interioare și marginea, deoarece acestea se schimbă sub cel mai mare dreptunghi. Dar nu vă faceți griji, ele sunt încă schimbate!

Pasul 3
Sincronizați-vă modificările. Sketch-ul este super fantezist și, în ciuda acestor atribute care se aplică mai multor stiluri de straturi diferite, acesta sincronizează aceste modificări la fiecare stil de strat respectiv (umplere, chenar, marginea stânga, partea inferioară a marginii, etc.):

ACTUALIZARE SKETCH (31.08.2018):
Actualizarea și sincronizarea stilurilor a fost mutată în meniul derulant de stil. Doar faceți clic pe „Actualizați Stilul stratului” pentru a salva modificările de culoare :)

O modalitate rapidă de a vedea dacă totul a funcționat este să verificați pagina Componente (dacă utilizați sistemul web) sau pagina Ghid de stil (dacă utilizați sistemul mobil). Ar trebui să vezi culoarea ta destul de nouă:

Hei, uite, culoarea noastră! Stilurile de niveluri Palette / UI / Fill sunt cel mai frecvent utilizate în întregul sistem, dar veți vedea, de asemenea, că stilurile de chenar au fost actualizate dacă deschideți funcția verticală a stilurilor de strat din Inspector. Aceste stiluri sunt utile pe pagina simbolurilor. Vom ajunge la cele mai târziu.

Continuați acest lucru pentru celelalte stive de stil de pe tablă pentru a vă completa culorile mărcii. Iată o descriere rapidă a modului în care UXPT folosește culoarea:

  • Primar: culoarea principală a mărcii dvs.
  • Secundar: culoarea dvs. de marcă secundară (dacă aveți una)
  • Active: Aceasta este ceea ce folosesc pentru casele de selectare, radio și alte stări active. Am tendința să folosesc culoarea principală a mărcii pentru asta, dar nu trebuie.
  • Accent 1: culoarea ta „de succes”
  • Accent 2: culoarea dvs. „de avertizare”
  • Accentul 3: culoarea dvs. de „eroare”
  • Negru: Baza ta neagră. Vă recomand să folosiți un negru nuanțat (consultați întrebări frecvente)
  • Alb: baza ta albă. De obicei folosesc doar #FFFFFF, dar bejul este și mișto.

Întrebări frecvente

De ce nu mi s-au actualizat culorile textului când am sincronizat schimbările (culorile) mele?
Stilurile de text și stilurile de straturi sunt diferite. Actualizăm doar stilurile de strat în acest pas. Nu vă faceți griji, vom ajunge la Stilurile de text în secțiunea următoare.

Nu văd cum se schimbă culoarea în alte pagini!
Asigurați-vă că glisați pentru a selecta întreaga Stilă de stil și nu faceți doar clic pe dreptunghiul din partea de sus. Și nu uitați să sincronizați!

Ce înseamnă „Color Drop for Black”?
Rar folosesc negru pur (# 000000) când proiectez. În schimb, îmi place să folosesc negru care este nuanțat în culoarea mea de brand principală. Acest dreptunghi de picătură de culoare este culoarea dvs. principală, cu un dreptunghi negru pur de 80% deasupra acestuia. Este un bun loc de pornire pentru a scădea culoarea pentru o culoare neagră nuanțată.

De ce doar 8 culori?
Nu te complica. Recomand folosirea culorii în mod foarte deliberat în UI, așa că găsesc foarte rar nevoie de mai multe culori decât aceasta. Nu este o regulă grea, dar funcționează pentru mine! Nu ezitați să adăugați mai multe. Ceea ce ne aduce convenabil la ...

Cum să adăugați mai multe culori

Uneori doriți o culoare terțiară sau alte accente pe care să le utilizați pe parcursul desenelor. Adăugarea unei culori noi este ușoară:

  1. Glisați pentru a selecta o culoare Stil de stil existentă, așa cum am făcut înainte.
  2. Copiați conținutul stivei cu Command + C.
  3. Lipiți această copie a stivei undeva pe tabloul de artă color.
  4. Actualizați culorile așa cum am făcut înainte, dar nu vă sincronizați încă.
  5. Grupați această stivă de stil (aceasta va face ușor să parcurgeți toate elementele din stivă). Acum intrați în grupul de stive și selectați dreptunghiul de sus. Accesați derularea stilurilor de strat din Inspector și derulați până la partea de jos. Selectați „Creează stil nou partajat”. Dă-i un nume nou.
  6. Repetați pasul 5 până când ați creat noi stiluri de strat pentru fiecare dreptunghi din noul dvs. grup de stiluri. După ce ați terminat, puteți să îl dezgrupați, astfel încât să fie ușor de selectat târziu.
  7. Terminat! Pentru acestea vom crea mai târziu simboluri de culoare în secțiunea 5: Simboluri.
Uită-te la acel minunat albastru pe care tocmai l-am adăugat. Nu uitați să copiați și să lipiți întregul stil de stil.

4. Tipografia

Tipografia dă voie aplicației dvs., astfel încât în ​​această secțiune veți învăța cum să personalizați fontul.

În mod convenabil, putem face totul de la aceeași pagină („Start Here”) unde ne-am personalizat culorile:

Să începem cu începutul. Acesta nu este un bug:

La fel ca în culorile noastre, folosim stive de stil pentru a ne ajuta să schimbăm rapid mai multe stiluri de text simultan. Așa că, se pare că schimbați doar 18 stiluri de text negru, în anumite cazuri, schimbați de fapt 72 de stiluri text cu transparențe și alinieri diferite:

Ultimele două rânduri arată ca duplicate, dar una dintre ele are 18 stiluri orientate în centru, iar una are 18 stiluri aliniate la stânga.

Motivul pentru care lucrurile ar putea părea puțin aliniate în captura de ecran anterioară este că unele dintre stilurile de text sunt aliniate în centru, iar unele dintre stilurile de text sunt aliniate la stânga. Uneori există variații minuscule în spațiul de litere, astfel încât s-ar putea să nu se alinieze perfect. Acest lucru nu are niciun efect negativ asupra sistemului. Este pur și simplu o problemă cosmetică.

Cum să personalizați fontul

Pasul 1
Trageți pentru a selecta tot textul de pe tabloul de artă „Start Here”:

Poate rămâne o secundă, deoarece selectați atât de multe straturi. Fără griji!

Pasul 2
Alegeți o nouă tipografie în panoul Inspector. Aveți grijă să parcurgeți fonturile din meniul vertical. Dacă întâlniți un font care nu are o variație îndrăzneață, atunci veți scăpa de greutatea fontului „Bold” pentru stilurile de text care se termină cu „… 2” și nu veți vedea textul cu caractere aldine în tot textul artboard stiluri pe măsură ce continuați săgeți prin fonturi.

Stilurile de text s-ar putea arata nealinizate, dar tot ce trebuie să faceți este să glisați pentru a selecta o coloană de text, apoi să apăsați butonul Aliniere stânga.

Pasul 3
Sincronizați-vă modificările și ați terminat! Dacă ați făcut-o corect, veți vedea actualizarea fontului pe întregul fișier:

ACTUALIZARE SKETCH (31.08.2018):
Actualizarea și sincronizarea stilurilor a fost mutată în meniul derulant de stil. Doar faceți clic pe „Actualizați Stilul stratului” pentru a salva modificările de culoare :)

Întrebări frecvente

Care sunt stilurile de text „… 2”?
Sunt versiunea îndrăzneață a omologilor lor. Folosim un număr astfel încât să fie deschis la orice doriți. Uneori ar fi folosit pentru acest stil semi-îndrăzneț, mediu sau negru.
Cum pot schimba rapid stilurile de caractere aldine pentru a fi mai / mai puțin îndrăznețe?
În lista de straturi, căutați „2” (puneți un spațiu înainte de cele 2), selectați toate straturile de text, apoi modificați greutatea fontului în panoul Inspector. Sincronizare!
Ce este cu această convenție de denumire „Mic, legendă, corp ...”?
Aceste nume sunt doar pentru amintire. Asta înseamnă că nu trebuie să folosiți „Body” pentru textul corpului. Când am creat sistemul, numele tradiționale „XS, S, M, L, XL, XXL” erau greu de reținut, așa că am optat pentru a le da nume. Nu doriți să le schimbați dacă doriți!
Ce înseamnă Normal, Secundar și Dezactivat în stilurile de text?
Acestea sunt nuanțe diferite ale acelei culori de stil text. Normal este 100% opac, secundar este 50% opac, iar dezactivat este 25% opac. Transferențele sunt preferate, deoarece dacă le folosiți deasupra unei culori, acestea vor fi nuanțate spre acea culoare. Exemplu: textul alb transparent 50% pe fond roșu va arăta ușor roz. Peste albastru, va fi albastru deschis.
Mi-am actualizat fontul și acum componentele sunt ambalate în linie!
Nu vă faceți griji! Majoritatea componentelor din sistem au simboluri text aliniat la stânga, așa că tot ce trebuie să faceți este să faceți componenta un pic mai largă. De îndată ce textul nu se va mai înfășura pe o nouă linie, componenta dvs. va avea chiar și o acoperire pe ambele părți.
Mi-am actualizat fontul și acum TEXT SIMBOLS sunt înfășurate pe linie!
De fapt, aceasta nu rupe nimic! Este doar un efect secundar cosmetic al unor tipuri de caractere care au niveluri mai largi. Nu faceți mai mari simbolurile textului. Dacă vă deranjează cu adevărat, schimbați valoarea din simbolul (simbolurile) textului la ceva mai scurt, cum ar fi „…” sau „abc”.
Am actualizat fontul meu și acum textul nu este centrat vertical în simboluri (simboluri)!
A trebuit să devenim un pic mai inteligent cu modul în care au fost create simbolurile textului (secțiunea următoare), astfel încât actualizarea fontului să fie cât mai ușoară și cât mai nedureroasă. Uneori, când actualizați fontul, straturile de text din simbolurile textului însoțitor se vor deplasa în sus sau în jos în interiorul tabloului de artă al simbolurilor, aruncând aliniamentul vertical. Doar aliniați textul în centrul plăcii (simbolurilor) simbolului și totul trebuie să revină la normal.

Schimbarea culorilor textului

Pasul 1
Trageți pentru a selecta o coloană de stiluri de text, alegeți noua dvs. culoare:

Pasul 2
Sincronizați-vă modificările!

Pasul 3
Continuați acest lucru pentru toate celelalte coloane de stiluri de text. De obicei, doar picătură de culoare din dreptunghiurile de deasupra fiecărei coloane.

Pasul 4
Terminat!

simboluri

Fiecare strat din UX Power Tools este legat fie de un strat, stil de text sau simbol. La fel ca în CSS, totul este centralizat, așa că, dacă trebuie să facem vreodată actualizări la sistemul nostru, este ușor să le sincronizăm în timpul proiectării noastre.

Tocmai din acest motiv, simbolurile sunt crucea întregului fișier. Simbolurile sunt construite folosind stilurile de straturi și stilurile de text pe care tocmai le-am definit și cu alte simboluri cuibărite, astfel încât modificările să fie fără efort.

Întregul sistem este construit folosind cele patru categorii de simboluri:

1. Simboluri text
Sketch vă permite să suprascrieți valoarea textului unui simbol, dar nu vă va permite să suprascrieți stilurile de text utilizate în simbolul respectiv. Prin urmare, simbolurile text sunt o soluție inteligentă pentru această limitare. Întrucât putem înlocui și schimba simboluri cuibăritate, am creat simboluri din fiecare dintre stilurile noastre de text pentru a ne permite să schimbăm stilul textului nostru. Exemplu: Vreau să folosesc text întunecat pe un buton cu fundal deschis și text ușor pe un buton cu fundal întunecat. Simbolurile de text amplasate ne permit acest lucru! Vedeți-le în acțiunea de mai jos:
2. Simboluri de umplere și culoare a frontierei (denumite „Mixine”)
Înlocuirile simbolurilor vă vor fi cel mai bun prieten în Instrumentele electrice UX, iar simbolurile Complet / Border vă vor schimba viața. La fel cum simbolurile text ne permit să înlocuim stilul text al unui simbol, simbolurile de culoare ne permit să înlocuim umplerea și bordurile. De fiecare dată când credeți că utilizați sau creați un simbol care ar putea schimba culoarea, cel mai bine este să utilizați un simbol de culoare cuibărit. Vedeți-le în acțiunea de mai jos:
3. Simboluri container
Containerele oferă elemente precum butoanele, ecusoanele și jetoanele. Sunt construite folosind simboluri de culoare, simboluri de stare și măști. Schimbați forma unei componente sau starea unui câmp de text suprasolicitând containerul acesteia. Vedeți-le în acțiunea de mai jos:
Schimbați forma unui buton modificând înlocuirea contrabandei.Adăugați o stare de mers într-un câmp, schimbând containerul în „Treceți peste”.Afișați alte stări ale câmpului text, alegând tipul de container „Border”.
4. Simboluri de stat
Simbolurile de stat vă ajută să adăugați un sentiment de interacțiune la componente precum butoanele, jetoanele și ecusoanele. Ei sunt întotdeauna cuibărit în interiorul unui alt simbol deasupra unui umplere de culoare, deoarece folosesc moduri de amestecare pentru a lumina, întuneca sau desatura culoarea componentei. Orice componentă care folosește un simbol al containerului va „moșteni” în mod automat, deoarece este cuibată în interiorul simbolului containerului. Notă: Statele sunt pur cosmetice pentru a arăta dezvoltatorilor cum ar trebui să arate o stare de mers / presare / focalizare. Deoarece folosim moduri de amestecare, dezvoltatorii nu vor putea folosi Zeplin sau InVision Inspect pentru aceste state. În schimb, recomand să utilizeze funcții lighten () și întunecare () în LESS sau Sass pentru a obține aceste rezultate în cod.

Întrebări frecvente

Cum adaug completări noi, astfel încât acestea să fie disponibile în lista drop-down?
Duplică una dintre tablourile Mixin / Fill din pagina Simboluri, alege o nouă culoare pentru dreptunghi, apoi adaugă un stil de strat pentru noua ta culoare. Adăugarea stilului de strat este opțională, dar vă recomandăm să utilizați întotdeauna stiluri de straturi, astfel încât să faceți o actualizare rapidă mai târziu, dacă îl utilizați în mai multe locuri. Atenție: nu schimbați dimensiunea acestei planșe. Trebuie să aibă exact aceeași dimensiune ca toate celelalte tablouri de artă Mixin / Fill pentru ca acesta să apară în panoul derulant Inspector.

icoane

Icoanele sunt probabil cea mai obositoare parte a kit-ului, dar vor ajunge să vă economisească o mulțime de timp pe termen lung. Folosind această tehnică, ne facem măștile cu icoane, apoi punem peste ea un simbol Mixin / Fill.

Deoarece Sketch ne permite să înlocuim simbolurile, putem schimba culoarea acestei pictograme la orice culoare pe care am adăugat-o ca simbol!

Cum să schimbați o pictogramă

Schimbarea pictogramelor este foarte ușoară folosind panoul de înlocuire din inspector:

Puteți schimba culoarea acesteia folosind funcția verticală din dreptul pictogramei.

Cum să adăugați o pictogramă

  1. Duplică o pictogramă existentă, apoi șterge stratul de mască.
  2. Inserați în noua dvs. pictogramă și asigurați-vă că creați o singură cale. Puteți face acest lucru cu Strat → Combinați → Unire sau Strat → Combinați → Diferență.
  3. Eliminați toate completările de pe calea pictogramei. Fără umplere!
  4. Puneți calea icoanei sub stratul „↳ Color”.
  5. Faceți pictograma o mască (apăsați Control + Comandă + M).
  6. Terminat!

Întrebări frecvente

Acest lucru durează pentru totdeauna.
Nu a fost optimizat la început, dar veți câștiga tot timpul înapoi pe termen lung. Promisiune.
Există o cale mai rapidă?
Nu din cate stiu eu. Dacă cineva dorește să facă un set de măști cu icoane, cu siguranță, va face acest proces mult mai rapid!
Este această metodă pictogramă acceptată în Zeplin, InVision, [dev handoff tool]?
De obicei, trimit echipei mele de echipamente device fontul pictogramelor reale și / sau sprite SVG, așa că nu îmi fac prea multe griji. Acestea fiind spuse, Zeplin face o treabă excelentă pentru a citi culoarea și, de obicei, vă permite să exportați SVG-urile bine.
Pictograma mea nu se afișează în pictograma care înlocuiește meniul dropdown!
Asigurați-vă că pictograma pictogramă are exact aceeași dimensiune ca toate celelalte tablouri de artă cu pictograme. Dacă nu, nu va apărea.

Câmpuri

Câmpurile (sau intrările ... oricare ar fi de plăcere) sunt formate din două piese primare: un container și un text. Atât containerul cât și textul sunt simboluri, astfel încât să le putem trece cu ușurință pentru a se potrivi cu diferite situații.

Ca toate simbolurile din sistem, câmpurile de text sunt complet redimensionabile. Dacă textul nu se potrivește, faceți-l mai larg sau mai înalt.

Personalizarea câmpurilor

Dacă doriți să schimbați forma sau stilul unui câmp de text, cea mai mare parte a lucrărilor trebuie efectuată pe simbolurile (simbolurile) Mixin / Container / Field:

  • Câmpuri fără margini: Eliminați stratul „Border”.
  • Câmpuri cu o umbră: adăugați o umbră stratului „mască”.
  • Câmpuri cu colț dur: Setați raza de frontieră a simbolurilor Mixin / Border și masca Container / Field la zero.
  • Câmpuri de proiectare a materialelor: creați câmpuri cu colț greu, apoi schimbați stratul „Border” în Mixin / Border / Bottom-Active. Va trebui să creați un alt simbol mixin de margine de jos pentru starea implicită.

Întrebări frecvente

Care este pictograma „Resizer”?
Acest lucru se întâmplă atunci când încercați să reprezentați o zonă de text. Simțiți-vă liber să ștergeți acest lucru dacă nu credeți că veți avea nevoie de el.
Pot șterge simbolul „Cursor”?
Sigur! Mi se pare util din când în când, dar depinde de tine.

Butoane

Butoanele sunt foarte asemănătoare cu Câmpurile prin faptul că sunt construite folosind alte simboluri. Simbolul text cuib din buton este setat pentru redimensionare, ceea ce asigură menținerea întotdeauna a umpluturii perfecte la stânga / dreapta.

Cel mai bun truc pentru a asigura o umplere perfectă este 1px Nudge ™. Pur și simplu redimensionați-vă butonul până când textul începe să se înfășoare, apoi faceți-l cu 1px mai larg:

Căptușeală perfectă!

UX Power Tools are și un buton centrat în cazul în care doriți să-l utilizați în partea de jos a unui modal (sau ceva similar):

Personalizarea butoanelor

Dacă doriți să schimbați forma sau stilul unui buton, cea mai mare parte a lucrărilor trebuie efectuată pe simbolurile (simbolurile) Mixin / Button:

Am făcut cea mai mare parte a lucrării pentru a vă oferi o mulțime de forme de buton din care să alegeți, dar dacă doriți ca forma butonului dvs. implicită să fie mai rotundă sau mai grea, schimbați masca Mixin / Button / Fill.

Întrebări frecvente

Cum adaug o umbră la butonul meu?
Selectați stratul de mască într-un recipient Mixin / Button pe pagina Simboluri și adăugați o umbră. Nu uitați să faceți toate containerele cu butoane.

Alte personalizări

Pe pagina „ Începe aici”, există o placă pentru „ Reglați alte lucruri aici!” Aici puteți ajusta lucruri precum umbrele și scrimele.

Personalizarea scrimurilor solide

Când îți particularizezi culorile pe pagina „Start Here”, scrimurile negre și de culoare se vor schimba automat pentru tine. Simte-te liber să te joci cu nivelul (nivelurile) de transparență până când găsești ceva care îți place. Le-am plasat peste câteva imagini de fundal pentru a vă ajuta să măsurați lizibilitatea.

Personalizarea Scrim Gradient

Va trebui să actualizați scrim-ul gradient de mână. Așa este, o scrimă creată manual. Îmi place să fac o scrimă de gradient să treacă de la 50% din negrul de bază, la 0% din negrul de bază.

Personalizarea umbrelor

Există 6 niveluri de umbră din care să alegeți. Depinde de tine să decizi când și unde vrei să le folosești, dar Material Design are câteva idei frumoase în ceea ce privește utilizarea umbrelor, în ceea ce privește „materialul digital”.

Eu susțin întotdeauna folosirea culorii negre de bază pentru umbrele tale în loc de negrul pur: # 000000 (am fost inspirat de articolul lui Ian Storm Taylor din 2012. Acest lucru va oferi aplicației o senzație mai moale, iar umbrele nu vor părea atât de dure. totul deodată este rapid:

  1. Selectați culoarea neagră de bază și copiați valoarea hex.
  2. Evidențiați toate cele 6 blocuri de umbră.
  3. Deschideți selectorul de culori de umbră și lipiți în valoarea hex.
  4. Apăsați introduceți.
  5. Sincronizare și gata!
Nu a trebuit să sincronizez aici pentru că deja îmi foloseam culoarea neagră de bază.

Rezumat

Felicitări pentru obținerea celui mai rapid sistem de design disponibil pentru Sketch! Știu că totul pare destul de copleșitor, dar trebuie doar să faceți la fel de mult personalizarea pe care doriți. Sincer, credem că arată destul de bine din cutie. Schimbă câteva culori și ești bine să mergi.

Cine ar trebui să-l folosească?

  • Proiectanți UX
  • UI Designers
  • Managerii de produse (pentru o corelație mai precisă)
  • Dezvoltatori (care nu vor să încurce designul)
  • CEO-uri întreprinzători (pentru că de ce nu?)

Încă nu aveți sistemul?

Accesați site-ul nostru pentru a citi mai multe despre cele două sisteme de design (web și mobil), descărcați o demonstrație sau apucați ambele de mai jos. Fiecare sistem este dotat cu un joc gratuit de peste 70 de tipuri de diagrame unice (în teme întunecate și luminoase), astfel încât data viitoare șeful să ceară un „tablou de bord sexy ca cele pe care le văd pe Dribbble”, nu îți vei scoate ochii în totalitate. cap

Mai ai nevoie de ajutor?

  • Spune salut la e-mail: hello@uxpower.tools
  • ... sau Twitter
  • … Sau Facebook
  • … Sau LinkedIn

Vrei un sistem de design personalizat?

Dacă toate acestea arată prea complicate sau migrezi dintr-o altă aplicație (Illustrator, Photoshop, Axure, Adobe XD, etc ...), să ne ajutăm! Filmați-ne un e-mail și vă vom ajuta să vă echipați și să funcționeze în cel mai scurt timp.