Vodiči za skice

"Blokiranje okvira" i 31 besplatna izgleda spremnika za skicu pomoću automatskog izgleda programa Anima

Da, možete ih preuzeti. Da, besplatno.

Napomena od Jona: Postoji besplatna datoteka koju možete preuzeti pri dnu ovog posta, ali ako možete izdvojiti 7 minuta (prema Medijumu), mislim da ćete naučiti nešto ili dvije! Uživati!

Pravi razgovor

Jedini put kada stvorim „prave“ žičane okvire je kad pokušavam pokazati cool postupak snimljen na Dribbbleu ...

… I nikad ne prikazujem cool snimke procesa na Dribbbleu.

Vi momci, jednostavno nisam dobar u žičanim okvirima!

Uvijek se uzbudim i na kraju dodajem previše detalja, a ono što je trebalo biti brzi žični okvir završava šest sati nitpixelinga ™ za savršeno podmetanje, veličanstvene margine i tipografiju udžbenika.

Pa ne ... nisam baš dobar u žičanim okvirima.

Ali ono u čemu sam dobar je okvirni okvir.

Iskreno, to postaje svakim petljom sve bolje.

Blok ... uokvirivanje?

Moj mentor dizajna ispričao mi je priču o profesoru kojeg je imao u školi i koji je skidao naočale kad je ocjenjivao njihov dizajn. Rekao je da mu je to pomoglo da bolje upozna izgled i vizualnu harmoniju svojih dizajna.

Pogodi tu aplikaciju!

Istina je da s ovom mutnom maketom možete ispričati prilično uvjerljivu priču. To je brz način provjere dizajna bez potrebe za dizajniranjem tolikog dizajna.

Identificiranjem najvećih regija boje gore, Facebook je predstavljen kao okvirni okvir:

Garantujem da ste 99% vas mogli reći kakva je to aplikacija bez ikakvih nagovještaja. Ostalih 1% imate 87 godina.

Pomoću nevjerojatnog dodatka za automatsko postavljanje od strane Anima aplikacije, čak vam mogu pokazati kako se sadržaj stranice treba ponašati kada promijenite veličinu preglednika ... što je popravljeno ... što je fluid ... i što pluta:

Središnji spremnik Facebooka ostaje fiksne širine i lebdi u središtu, dok se stream stream drži na desnoj strani.

Kada koristiti Blockframing

Prednost blockframinga je u tome što to možete učiniti tijekom svake faze procesa dizajniranja proizvoda:

  1. Prije (idejni dizajn)
  2. Tijekom (nove značajke)
  3. Nakon (koncept otkrivanje)

Prije dizajna (inicijalni dizajn)

Blokiranje ne zamjenjuje konvencionalne žičane okvire. Žičani okvir jednostavno ne uklapa u moj tijek rada. Moj dizajnerski tim toliko surađuje na ploči s klijentom da ništa više od toga za mene nije gubljenje vremena.

Blokiranje ne zamjenjuje konvencionalne žičane okvire.

Osobno smatram da su mi ometajući detaljni žični okviri s lutkim tekstom, obrubima od jednog piksela i slovima "X". A ako ih smatram omesti (kao nekoga tko ih zna čitati), onda bi i klijent mogao.

Pomoću blok okvira opisujem čitava područja sadržaja umjesto da se uhvatim u pojedinosti. Ovo mi daje više nego dovoljno informacija za prenošenje ideje ili početak priče.

Obično šaljem tako nešto klijentu preko Slacka ili e-poštom kako bih brzo provjerio ideju za novi zaslon. Razgovaramo o različitim područjima, premještamo stvari i počinjemo se igrati bojom i kontrastom. Odličan je način da budete fleksibilan i fleksibilan s dizajnom prije nego što uronite u vrlo vjernu, a kupci su uvijek oduševljeni što su dio procesa.

To ujedno štedi vrijeme jer klijent neće dijeliti dlačice na svaki pojedini detalj na stranici. Po mom iskustvu, blockframing s klijentom ili dionikom drastično povećava vašu stopu uspjeha kada se prikazuju konačni dizajni (i), jer klijent već zna što slijedi.

Tijekom dizajna (nove značajke)

Recimo da ste već poslali proizvod i krećete u dizajniranje novih značajki. Do ovog trenutka postoje deseci dobro uspostavljenih obrazaca, a vizualni stil je vrlo dobro definiran. Možda imate čak i cjeloviti okvir dizajna poput UX Power Tools!

Blokframing smatram posebno korisnim tijekom ove faze jer mogu stvoriti nešto što će izgledati mnogo bliže stvarnom dizajnu. Boje koje koristim na kraju su prilično bliske (ako ne i identične) onima u konačnom dizajnu.

Evo nekoliko poznatih aplikacija kojima je za blokiranje okvira trebalo svega nekoliko minuta:

Možda je to trajalo samo 10 minuta, ali vjerojatno bih mogao smisliti način da potrošim 7 sati na gledanje mačkinih videa.Nepovezano: Uvijek pomislim na Cinnabon ™ kad čujem riječ kanban. Uh, tako ukusno.Tko je za 19 epizoda iz Parkova i rekreacije ???

Mogao bih napraviti i malo svjetlosnog uokvirenja, osim gore prikazanih blok okvira, ali inače sam spreman početi dizajnirati u visokoj vjernosti.

Opet, u ovom trenutku procesa (u sredini dizajna), već sam dizajnirao gomilu ekrana i imam puno dizajnerskih obrazaca, tako da je ovo dosta priprema za početak rada. I šanse su da ću na kraju koristiti ove spremnike u pravom dizajnu, umjesto da bacaju stvari kao što to često radim kada napravim žičane okvire.

Nakon dizajna (koncept otkrivanje)

U mojoj su agenciji uvijek prilagođavali tehnike prezentiranja naših klijenata tako da svoj rad prikazujemo na najbolji mogući način. Nakon tisuća prezentacija, recenzija dizajna i otkrića koncepta s generalnim direktorima, investitorima i šefovima proizvoda, postali smo prilično dobri u ispričavanju prave priče na pravi način i u pravo vrijeme.

Jednom kada završimo dizajn, izrađujemo blok-okvir izravno na vrhu tako da polako možemo otkriti različite dijelove dizajna. Prema našem iskustvu, prikazivanje cijelog dizajna odjednom je SUPER OVERWHELMING za klijenta i on će početi postavljati sve vrste pitanja na koja niste spremni.

Blokiranjem okvira korisničkog sučelja, u osnovi otkrivamo jedno jelo, kao da organiziramo večeru iz viktorijanske ere za naše buržoaske prijatelje:

Kod moje kuće, bili bi Twinkies i Hot Dogs pod tim srebrnim kupolama. Klasično, zar ne?

Evo kako bismo predstavili YouTube:

Potpuni blok okvira! Još nismo pokazali nikakvu vjernost. Tek počinjemo našu priču.

Nakon kratkog preuzimanja regiona stranica, tada ćemo početi otkrivati ​​korisničko sučelje, odsjek do poglavlja:

Polako počinjemo otkrivati ​​odjeljke. Ovdje bismo zastali i objasnili globalnu navigaciju.

Prikazujemo samo jedan odjeljak. To nam pomaže da usmjerimo pažnju klijenta na jedno mjesto na koje želimo da se usredotoči:

Ovdje se zaustavljamo kako bismo se pozabavili video područjem i kontrolama reprodukcije. Možemo ostati ovdje 15 minuta i samo razgovarati o tome kako sve to funkcionira ... i to je u redu! Viknite na Pabla Stanleya i njegovu fantastičnu seriju

Neka se nastavi dalje. Sada smo na pojedinostima videozapisa. U ovom konkretnom primjeru stranica je prilično kratka. U stvarnom scenariju vjerojatno imamo dužu stranicu koja će pokazati odjeljak komentara.

Vaši se videozapisi odvijaju stvarno dobro, Pablo! Čestitamo! Pogledajte sve one pretplatnike

Konačno, dolazimo do odjeljka "Srodni videozapisi". U razgovoru s klijentom, vjerojatno bismo razgovarali o tome kako se ovaj popis popunjava i kako predloženi videozapisi pomažu privesti korisnike u BLACKHOLE YOUTUBE VIDEOZAPISA ZA SLIJEDEĆIH PET sati.

Nije mi se to nikada dogodilo ...

Gledam puno videozapisa o hrani sa BuzzFeed-a, a taj tip Tiny Tim Bradbury pravi neke smiješne video zapise.

Tek nakon što završimo s otkrivanjem svakog odjeljka, prikazat ćemo cijelo sučelje:

Tada! Podrška dizajnerskom timu na na YouTubeu. Izgledaš dobro!

Klijenta su već napunili i njihove će oči instinktivno razdijeliti svaku regiju stranice. Oni sada savršeno razumiju čemu služe svako područje stranice, a razgovori odavde će biti mnogo produktivniji. Klijenti će postavljati bolja pitanja, pružiti bolje povratne informacije i prezentirati dizajn (sami) vanjskim dionicima mnogo pametnije nego prije.

Pa, pa gdje su besplatne stvari?

Dobro, dobro.

Automatski izgled je sjajan alat, a njihova nova značajka "stokova" oponaša CSS ponašanje fleksibilnog okvira unutar Sketch-a.

To je droga. *

* Za neamerikance "droga" znači stvarno stvarno cool.
Droga također znači heroin ... ali ne u ovom slučaju. Automatski izgled nije heroin.

Napravio sam hrpu standardnih rasporeda aplikacija za web i mobilne uređaje, a također blokirao hrpu popularnih aplikacija tako da možete vidjeti kako ponovno stvoriti njihovo sadržajno ponašanje.

Možete dobiti svih 30+ izgleda FUH BESPLATNO odmah dolje. To će vas koštati nula dolara osim ako ne želite financirati Chipotle burrito ¯ \ _ (ツ) _ / ¯

(Povezano: Jeste li znali da postoji emo burrito emoji? To je divlji detalj.)

U redu, ali za sada, evo datoteke:

Sneak zaviriti!

Još jedna stvar…

I na kraju, nedavno sam ažurirao UX Power Alate za rad s automatskim izgledom, tako da je korištenje još brže! Mislim da ćeš to iskopati. Ako vas zanima, više o tome možete pročitati ovdje.

Kad ne pišem, radim na alatima za dizajn Sketch-a kao što su UX Power Tools kako bih bio bolji i učinkovitiji dizajner. Svi najbolji dizajneri i timovi programa Sketch koriste ga i mislim da bi vam se mogao svidjeti. Pogledajte Marvel!

Slijedite UX Power Tools na Twitteru
Slijedite me na Twitteru