Tutoriale de schiță

„Blockframing” și 31 de planuri gratuite gata de schiță folosind aspectul automat de aplicația Anima

Da, le poți descărca. Da, gratis.

Notă de la Jon: Există un fișier gratuit pe care îl poți descărca în partea de jos a acestei postări, dar dacă poți economisi 7 minute (conform „Medium”), cred că vei învăța un lucru sau două! Bucurați-vă!

Discuție reală

Singura dată când am creat vreodată filme „reale” este atunci când încerc să afișez un proces cool filmat pe Dribbble ...

... și nu afișez niciodată fotografii de proces cool pe Dribbble.

Voi, băieți, nu mă pricep la fireframes!

Mă entuziasm mereu și sfârșesc prin a adăuga mult prea multe detalii, iar ceea ce trebuia să fie un cadru rapid, sfârșește prin a fi șase ore de nitpixeling ™ pentru umplere perfectă, marje magnifice și tipografie de manuale.

Așa că nu… nu sunt chiar atât de bun la filme.

Dar la ce mă pricep este blocajul.

Sincer, totuși, acest lucru este mai bun în fiecare buclă.

Block ... încadrare?

Mentorul meu de proiectare mi-a spus o poveste despre un profesor pe care l-a avut la școală, care obișnuia să-și scoată ochelarii atunci când le evalua desenele. El a spus că l-a ajutat să înțeleagă mai bine aspectul și armonia vizuală a desenelor lor.

Ghiciți această aplicație!

Adevărul este că poți spune o poveste destul de convingătoare cu această machetă încețoșată. Este o modalitate rapidă de a face un design fără a fi nevoie să proiectăm atât de mult.

Identificând cele mai mari regiuni de culoare de mai sus, iată Facebook-ul reprezentat ca un bloc bloc:

Vă garantez că 99% dintre voi mi-ar fi putut spune ce aplicație a fost fără niciun indiciu. Celălalt 1% dintre voi are 87 de ani.

Cu uimitorul modul de dispunere automată de aplicația Anima, pot chiar să vă arăt cum trebuie să se comporte conținutul paginii atunci când browserul este redimensionat ... ce este fix ... ce este fluid ... și ce plutesc:

Containerul central al Facebook rămâne o lățime fixă ​​și plutește în centru, în timp ce fluxul de chat rămâne în dreapta.

Când să utilizați Blockframing

Avantajul blocării este acela că îl puteți face în fiecare fază a procesului de proiectare a produsului:

  1. Înainte (Proiectare inițială)
  2. În timpul (Caracteristici noi)
  3. After (Dezvăluirea conceptului)

Înainte de proiectare (proiectare inițială)

Blockframing-ul nu înlocuiește filarea convențională. Filtrarea wireless nu se încadrează în fluxul meu de lucru. Echipa mea de proiectare face atât de multă colaborare pe tablă cu clientul, încât orice altceva este, pentru mine, o pierdere de timp.

Blockframing-ul nu înlocuiește filarea convențională.

Personal găsesc filme detaliate cu text manechin, margini de un pixel și imagini ale locației „X” care să distragă atenția. Și dacă le consider distractiv (ca cineva care știe să le citească), atunci și clientul ar putea.

Folosind un cadru de bloc, descriu zone întregi de conținut în loc să fiu prins în detalii. Aceasta mă echipează cu informații mai mult decât suficiente pentru a transmite o idee sau pentru a începe să spun o poveste.

De obicei, o să trimit ceva de genul acesta clientului prin Slack sau e-mail pentru a face rapid o idee pentru un nou ecran. Vorbim despre diferitele domenii, mutăm lucrurile și începem să ne jucăm cu culoarea și contrastul. Este o modalitate excelentă de a fi agil și flexibil cu designul înainte de a vă scufunda în fidelitate înaltă, iar clienții sunt întotdeauna încântați să facă parte din proces.

Acest lucru economisește timp, deoarece clientul nu va împărți firele de păr peste fiecare mic detaliu din pagină. În experiența mea, blocarea cu clientul sau cu părțile interesate îți crește dramatic rata de succes atunci când afișezi design-ul final, deoarece clientul știe deja ce vine.

În timpul proiectării (caracteristici noi)

Să presupunem că ați livrat deja produsul și că sunteți pe punctul de a proiecta noi funcții. În acest moment, există zeci de modele bine stabilite, iar stilul vizual este foarte bine definit. S-ar putea să aveți chiar și un cadru de design complet, precum UX Power Tools!

Îmi consider blocaje deosebit de utile în această fază, deoarece pot crea ceva care va arăta mult mai aproape de designul real. Culorile pe care le folosesc ajung să fie destul de apropiate (dacă nu sunt identice) cu cele din designul final.

Iată câteva aplicații familiare care au durat doar câteva minute pentru a bloca frameframe:

Poate că aceasta a durat doar 10 minute, dar mi-aș putea da seama probabil o modalitate de a pierde 7 ore urmărind videoclipuri pentru pisici.Nu are legătură: Mă gândesc întotdeauna la Cinnabon ™ când aud cuvântul kanban. Ugh, atât de delicios.Cine e jos pentru 19 episoade directe de parcuri și recreere ???

S-ar putea să fac câteva filme ușoare în plus față de blocurile arătate mai sus, dar sunt altfel gata să încep să proiectez cu fidelitate ridicată.

Din nou, până în acest moment al procesului (proiectare mijlocie), am proiectat deja o grămadă de ecrane și am o mulțime de modele de proiectare în loc, așa că sunt multe preparate pentru a începe. Și șansele sunt să sfârșesc doar să folosesc aceste containere în designul real, în loc să arunc lucrurile la distanță așa cum fac [de multe ori] când fac un fir.

După proiectare (dezvăluirea conceptului)

La agenția mea, ne-am adaptat întotdeauna tehnicile de prezentare a clienților, astfel încât să ne arătăm munca în cel mai bun mod posibil. După mii de prezentări, recenzii de design și conceptele dezvăluite cu CEO-uri, investitori și șefi de produse, am obținut destul de bine să spunem povestea potrivită în mod corect, la momentul potrivit.

După ce terminăm un design, creăm un bloc direct direct deasupra acestuia, astfel încât să putem dezvălui încet diferite secțiuni ale proiectării. În experiența noastră, a arăta întregul design în același timp este SUPER OVERWHELMING pentru client și vor începe să pună tot felul de întrebări pentru care nu ești pregătit.

Făcând blockfram-uri peste UI, descoperim în esență un singur fel de mâncare deodată, ca și cum am găzdui o cină în perioada victoriană pentru prietenii noștri burghezi:

La mine acasă, sub cupole argintii, ar fi Twinkies și Hot Dogs. Elegant, nu?

Iată cum am prezenta YouTube:

Cadru complet! Nu manifestăm încă nicio fidelitate înaltă. Abia începem povestea noastră.

După ce vom face o recapitulare rapidă a regiunilor paginii, vom începe să dezvăluim interfața de utilizare, secțiune după secțiune:

Încet, începem să dezvăluim secțiuni. Aici am face o pauză și am explica navigarea globală.

Afișăm o singură secțiune la un moment dat. Acest lucru ne ajută să direcționăm atenția clientului asupra locului în care dorim ca aceștia să se concentreze:

Aici ne oprim pentru a aborda zona video și controalele de redare. S-ar putea să stăm aici timp de 15 minute, vorbind doar despre cum funcționează totul ... și este în regulă! Strigă la Pablo Stanley și la serialul său minunat „Sketch Together”.

Haideți să ne mișcăm. Acum suntem în detaliile videoclipului. În acest exemplu particular, pagina este destul de scurtă. Într-un scenariu real, probabil că vom avea o pagină mai lungă pentru a afișa secțiunea de comentarii.

Videoclipurile tale merg foarte bine, Pablo! Felicitări! Uitați-vă la toți abonații

În cele din urmă, ajungem la secțiunea „Videoclipuri înrudite” și secțiunea. Într-o conversație cu un client, probabil că am vorbit despre modul în care această listă este populată și despre modul în care videoclipuri sugerate ca acestea vor ajuta utilizatorii să devină un BLACKHOLE OF YOUTUBE VIDEOS PENTRU URMĂRILE CINCI ORE.

Nu asta mi s-a întâmplat vreodată ...

Urmăresc o mulțime de videoclipuri cu produse alimentare BuzzFeed și acel tip Tiny Tim Bradbury face câteva videoclipuri hilar.

Abia după ce am terminat de dezvăluit fiecare secțiune, vom afișa întreaga interfață:

Tada! Se adresează echipei de proiectare de pe YouTube. Arata bine!

Clientul a fost completat, iar ochii lor vor compartimenta instinctiv fiecare regiune a paginii. Acum au o înțelegere perfectă pentru ce este fiecare zonă a paginii, iar conversațiile de aici înainte vor fi mult mai productive. Clienții vor pune întrebări mai bune, vor oferi un feedback mai bun și vor prezenta proiectul (de la sine) părților interesate externe mult mai inteligent decât înainte.

Ugh, deci unde sunt lucrurile gratuite?

Bine bine.

Dispunerea automată este un instrument nemaipomenit, iar noua lor caracteristică „stive” emulează comportamente CSS flexbox chiar în Sketch.

Este drog. *

* Pentru non-americani, „drog” înseamnă într-adevăr foarte fain.
Dope înseamnă și eroină ... dar nu în acest caz. Dispunerea automată nu este eroină.

Am creat o grămadă de machete de aplicații standard pentru web și mobil și, de asemenea, am blocat o grămadă de aplicații populare, astfel încât să puteți vedea cum să recreați comportamentul conținutului lor.

Puteți obține toate cele 30 de machete FUH GRATUIT chiar mai devreme. Vă va costa zero dolari, dacă nu doriți să finanțați un Chipotle burrito ¯ \ _ (ツ) _ / ¯

(Înrudit: Știați că există un emoji burrito? Este detaliat sălbatic.)

Bine, dar deocamdată, iată fișierul:

Privire pe furiș!

Inca un lucru…

În cele din urmă, am actualizat recent Instrumentele electrice UX pentru a lucra cu Layout automat, astfel încât acum este și mai rapid de utilizat! Cred că o săriți. Dacă vă interesează, puteți citi mai multe despre asta aici.

Când nu scriu, lucrez la instrumente de proiectare Sketch precum UX Power Tools pentru a vă face un designer mai bun și mai eficient. Toți cei mai buni designeri și echipe de Sketch o folosesc și cred că și ți-ar plăcea. Vezi-l pe Marvel!

Urmați UX Power Tools pe Twitter
Urmărește-mă pe Twitter