Skitsevejledninger

“Blockframing” og 31 gratis skitseklare layouts ved hjælp af automatisk layout af Anima App

Ja, du kan downloade dem. Ja, gratis.

Bemærk fra Jon: Der er en gratis fil, du kan downloade nær bunden af ​​dette indlæg, men hvis du kan spare 7 minutter (i henhold til Medium), tror jeg, du vil lære en ting eller to! God fornøjelse!

Seriøs snak

Den eneste gang jeg nogensinde opretter "rigtige" wireframes er når jeg prøver at vise et cool procesfoto på Dribbble ...

... og jeg viser aldrig seje procesbilleder på Dribbble.

I er bare ikke god til wireframes!

Jeg bliver altid ophidset og ender med at tilføje alt for mange detaljer, og hvad der skulle være en hurtig wireframe ender med at blive seks timers nitpixeling ™ til perfekt polstring, storslåede marginer og tekstbogstypografi.

Så nej ... Jeg er egentlig ikke så god til wireframes.

Men hvad jeg er god til er blokering.

Helt ærligt bliver dette bedre for hver løkke.

Block ... indramning?

Min designmentor fortalte mig en historie om en professor, han havde i skolen, der plejede at tage sine briller af, da han vurderede deres design. Han sagde, at det hjalp ham med at få en bedre fornemmelse af layoutet og den visuelle harmoni i deres design.

Gæt den app!

Sandheden er, at du kan fortælle en temmelig overbevisende historie med denne slørede mockup. Det er en hurtig måde at dyrke et design uden at behøve at designe så meget.

Ved at identificere de største farveregioner ovenfor repræsenteres Facebook som en blokramme:

Jeg garanterer, at 99% af jer kunne have fortalt mig, hvilken app dette var uden antydninger. De andre 1% af dig er 87 år gamle.

Med det fantastiske Auto Layout-plugin fra Anima App, kan jeg endda vise dig, hvordan sideindholdet skal opføre sig, når browseren ændres til størrelse ... hvad er løst ... hvad er flydende ... og hvad flyder:

Facebooks centercontainer forbliver en fast bredde og flyder i midten, mens chatstrømmen holder sig til højre.

Hvornår skal man bruge Blockframing

Fordelen ved at blokere indramning er, at du kan gøre det i hver fase af produktdesignprocessen:

  1. Før (initial design)
  2. Under (nye funktioner)
  3. Efter (Concept Reveal)

Før design (initial design)

Blockframing erstatter ikke konventionel wireframing. Wireframing passer bare ikke ind i min arbejdsgang. Mit designteam samarbejder så meget på tavlen med klienten, at noget mere end det er for mig spild af tid.

Blockframing erstatter ikke konventionel wireframing.

Jeg synes personligt, at detaljerede wireframes med dummy-tekst, en-pixel-rammer og “X” -pladsbilleder er distraherende. Og hvis jeg finder dem distraherende (som en person, der ved, hvordan man læser dem), kan klienten muligvis også.

Ved hjælp af en blokramme beskriver jeg hele indholdsområder i stedet for at blive fanget af detaljerne. Dette udstyrer mig med mere end nok information til at formidle en idé eller begynde at fortælle en historie.

Jeg sender normalt sådan noget til klienten via Slack eller e-mail for hurtigt at veterinere en idé til en ny skærm. Vi taler om de forskellige områder, bevæger os rundt og begynder at lege med farve og kontrast. Det er en fantastisk måde at være smidig og fleksibel med designet inden de dykker ned i høj kvalitet, og klienter er altid glade for at være en del af processen.

Dette sparer også tid, fordi klienten ikke opdeler hår over enhver lille detalje på siden. Efter min erfaring øger blokering med klienten eller interessenten din succesrate dramatisk, når han viser de endelige design (er), fordi klienten allerede ved, hvad der kommer.

Under designet (nye funktioner)

Lad os sige, at du allerede har sendt produktet, og du er ved at designe nye funktioner. På dette tidspunkt er der snesevis af veletablerede mønstre, og den visuelle stil er meget veldefineret. Du har måske endda en fuldstændig designramme som UX Power Tools på plads!

Jeg synes, at blokering er særlig nyttig i denne fase, fordi jeg kan skabe noget, der vil se meget tættere på det rigtige design. De farver, jeg bruger, ender med at blive temmelig tæt (hvis ikke identiske) som dem i det endelige design.

Her er et par kendte apps, der kun tog et par minutter at blokere på:

Dette har måske kun taget 10 minutter, men jeg kunne stadig sandsynligvis finde ud af en måde at spilde 7 timer på at se kattevideoer på.Ikke relateret: Jeg tænker altid på Cinnabon ™, når jeg hører ordet kanban. Ugh, så lækker.Hvem er nede i 19 lige episoder af Parker og rekreation ???

Jeg laver måske lidt let wireframning ud over de blokrammer, der er vist ovenfor, men jeg er ellers klar til at begynde at designe i høj kvalitet.

Igen, ved dette punkt i processen (midt-design), har jeg allerede designet en flok skærme og har masser af designmønstre på plads, så dette er masser af forberedelser for mig at komme i gang. Og chancerne er, at jeg bare ender med at bruge disse containere i det rigtige design i stedet for at smide ting, som jeg [ofte] gør, når jeg har ramme.

Efter designet (Concept Reveal)

Hos mit agentur var det altid at justere vores klientpræsentationsteknikker, så vi viser vores arbejde bedst muligt. Efter tusindvis af præsentationer, designanmeldelser og koncept-afsløringer med administrerende direktører, investorer og produktledere, er vi blevet ret gode til at fortælle den rigtige historie på den rigtige måde, til det rigtige tidspunkt.

Når vi er færdige med et design, opretter vi en blokramme direkte oven på det, så vi langsomt kan afsløre forskellige dele af designet. Det er vores erfaring, at vise hele designet på én gang er SUPER OVERWHELMING for klienten, og de vil begynde at stille alle slags spørgsmål, som du ikke er klar til.

Ved at blokere ind i UI afdækker vi i det væsentlige en tallerken ad gangen, som om vi er vært for en middagsfest i viktoriansk tid for vores venner i bourgeoise:

I mit hus ville der være Twinkies og Hot Dogs under disse sølvkupler. Klassisk, ikke?

Sådan præsenterer vi YouTube:

Fuld blokramme! Vi viser ikke nogen høj trofærdighed endnu. Vi er lige begyndt på vores historie.

Efter at have lavet en hurtig oversigt over sideregionerne, begynder vi at afsløre brugergrænsefladen, delvis:

Langsomt begynder vi at afsløre sektioner. Her stopper vi og forklarer den globale navigation.

Vi viser kun et afsnit ad gangen. Dette hjælper os med at målrette kundens opmærksomhed mod det sted, vi ønsker, at de skal fokusere:

Her stopper vi for at adressere videoområdet og afspilningskontrollerne. Vi bliver måske her i 15 minutter bare for at tale om, hvordan det hele fungerer ... og det er okay! Shoutout til Pablo Stanley og hans fantastiske serie “Sketch Together”.

Lad os bevæge os. Nu går vi på videooplysningerne. I dette særlige eksempel er siden temmelig kort. I et ægte scenario har vi sandsynligvis en længere side til at vise kommentarsektionen.

Dine videoer klarer sig virkelig godt, Pablo! Tillykke! Se på alle disse abonnenter

Endelig når vi "Relaterede videoer" og sektionen. I en samtale med en klient ville vi sandsynligvis tale om, hvordan denne liste er befolket, og hvordan foreslåede videoer som disse vil hjælpe med at føre brugerne ind i et BLACKHOLE OF YOUTUBE-VIDEOER FOR DE NÆSTE FEM TIMER.

Ikke det, der nogensinde er sket med mig ...

Jeg ser en masse BuzzFeed-madvideoer, og den fyr Tiny Tim Bradbury laver nogle sjove videoer.

Først når vi er færdig med at afsløre hvert afsnit, viser vi hele grænsefladen:

Tada! Rekvisitter til designteamet på YouTube. Ser godt ud!

Klienten er blevet grundlagt, og deres øjne vil instinktivt opdele hver region på siden. De har nu en perfekt forståelse af, hvad hvert område på siden er til, og samtaler herfra og ud vil være meget mere produktive. Kunder vil stille bedre spørgsmål, give bedre feedback og præsentere designet (af sig selv) for eksterne interessenter meget mere intelligent end før.

Ugh, så hvor er de gratis ting?

Okay, okay.

Auto Layout er et fantastisk værktøj, og deres nye "stacks" -funktion emulerer CSS flexbox-opførsel lige inden i Sketch.

Det er dope. *

* For ikke-amerikanere betyder "dope" virkelig rigtig cool.
Dope betyder også heroin ... men ikke i dette tilfælde. Auto-layout er ikke heroin.

Jeg oprettede en masse standard-applayouts til web og mobil og blokerede også en masse populære apps, så du kan se, hvordan man gendanner deres indholdsadfærd.

Du kan få alle 30+ layouts FUH GRATIS lige ned. Det koster dig nul dollars, medmindre du vil finansiere en Chipotle-burrito ¯ \ _ (ツ) _ / ¯

(Relateret: Vidste du, at der var en burrito-emoji? Den er vildt detaljeret.)

Okay, men her er filen:

Smugkig!

En sidste ting…

Til sidst opdaterede jeg for nylig UX Power Tools til at arbejde med Auto Layout, så nu er det endnu hurtigere at bruge! Jeg tror, ​​du vil grave det. Hvis du er interesseret, kan du læse mere om det her.

Når jeg ikke skriver, arbejder jeg på Sketch-designværktøjer som UX Power Tools for at gøre dig til en bedre og mere effektiv designer. Alle de bedste Sketch-designere og teams bruger det, og jeg tror, ​​at du måske også kan lide det. Tjek det på Marvel!

Følg UX Power Tools på Twitter
Følg mig på Twitter