Luonnosoppaat

”Blockframing” ja 31 ilmaista luonnosvalmiita asettelua Anima Appin automaattista asettelua käyttämällä

Joo, voit ladata ne. Kyllä, ilmaiseksi.

Jonin huomautus: Tämän viestin alaosassa on ilmainen tiedosto, jonka voit ladata, mutta jos varaat 7 minuuttia (Mediumin mukaan), luulen että opit yhden tai kaksi! Nauttia!

Oikeaa puhetta

Ainoa kerta, kun olen koskaan luonut “oikeita” lankakehyksiä, on kun yritän näyttää hienoa prosessikuvaa Dribbblessa…

... enkä koskaan näytä hienoja prosessikuvia Dribbblessa.

Te kaverit, en vain ole hyvä metallirakenteissa!

Olen aina innoissani ja lisään lopulta aivan liian paljon yksityiskohtia, ja nopeaksi lankakehyksenä piti olla kuuden tunnin mittainen kuvapistekuvaus ™ täydelliseksi pehmusteeksi, upeat marginaalit ja oppikirjojen typografia.

Joten ei ... en ole oikeasti niin hyvä metallirakenteissa.

Mutta mitä minä olen hyvä, on lohkokehys.

Tosin rehellisesti, tämä parantaa jokaista silmukkaa.

Block ... kehystys?

Suunnittelijani kertoi minulle tarinan yliopiston professorista, joka hän käytti silmälasit arvioidessaan heidän suunnitelmiaan. Hänen mukaansa se auttoi häntä ymmärtämään paremmin heidän suunnitelmiensa asettelun ja visuaalisen harmonian.

Arvaa se sovellus!

Totuus on, että voit kertoa melko vakuuttavan tarinan tällä epäselvällä mallilla. Se on nopea tapa tarkistaa suunnittelu ilman, että sinun tarvitsee suunnitella kaikkea niin paljon.

Tunnistamalla yllä olevat suurimmat värialueet, tässä Facebook on esitetty esityskehyksenä:

Takaan, että 99% teistä olisi voinut kertoa minulle, mikä sovellus tämä oli ilman vihjeitä. Muut 1% teistä on 87 vuotta vanhoja.

Anima Appin hämmästyttävän Auto Layout -laajennuksen avulla voin jopa näyttää sinulle, kuinka sivun sisällön tulisi toimia, kun selaimen kokoa muutetaan… mikä on kiinteä… mikä on juoksevaa… ja mikä kelluu:

Facebookin keskussäiliö pysyy kiinteällä leveydellä ja kelluu keskellä, kun chat-stream pysyy oikealla.

Milloin lohkokehystä käytetään

Etu kehystyskehykseen on, että voit tehdä sen jokaisessa tuotteen suunnitteluprosessin vaiheessa:

  1. Ennen (alkuperäinen suunnittelu)
  2. Aikana (uudet ominaisuudet)
  3. Jälkeen (käsite paljastaa)

Ennen suunnittelua (alkuperäinen suunnittelu)

Lohkokehys ei korvaa tavanomaista lankakehystä. Langankehys ei vain sovi työnkulkuun. Suunnittelutiimini tekee niin paljon yhteistyötä taulun kanssa asiakkaan kanssa, että muutakin kuin se on minulle ajanhukkaa.

Lohkokehys ei korvaa tavanomaista lankakehystä.

Pidän henkilökohtaisesti yksityiskohtaisia ​​kehystekstejä, joissa on tyhjää tekstiä, yhden pikselin reunat ja “X” -merkitsijäkuvat. Ja jos huomaan heidän olevan häiritseviä (kuten joku, joka osaa lukea niitä), niin asiakas saattaa myös.

Kuvailen lohkokehystä kuvaamalla kokonaisia ​​sisältöalueita sen sijaan, että pääsen kiinni yksityiskohtiin. Tämä antaa minulle enemmän kuin tarpeeksi tietoa idean välittämiseksi tai tarinan alkamiseksi.

Lähetän yleensä jotain tällaista asiakkaalle Slack-palvelun kautta tai sähköpostitse, jotta voimme nopeasti tarkistaa uuden näytön idean. Puhumme eri alueista, siirrämme asioita ympäri ja alamme leikkiä värillä ja kontrastilla. Se on loistava tapa olla ketterä ja joustava suunnittelun suhteen ennen sukellusta uskollisuuteen, ja asiakkaat ovat aina innoissaan siitä, että voivat olla mukana prosessissa.

Tämä säästää myös aikaa, koska asiakas ei jaa hiuksia sivun kaikkien yksityiskohtien perusteella. Kokemukseni mukaan lohkokehitys asiakkaan tai sidosryhmän kanssa lisää dramaattisesti onnistumisprosenttiasi, kun esittelet lopullisia malleja, koska asiakas tietää jo tulevan.

Suunnittelun aikana (uudet ominaisuudet)

Oletetaan, että olet jo lähettänyt tuotteen ja suunnittelet uusia ominaisuuksia. Tähän mennessä on olemassa kymmeniä vakiintuneita kuvioita, ja visuaalinen tyyli on hyvin määritelty. Sinulla saattaa olla jopa täysi suunnittelukehys, kuten UX-työkalut!

Pidän lohkokehystä erityisen hyödyllisenä tässä vaiheessa, koska voin luoda jotain, joka näyttää paljon lähempänä todellista muotoilua. Minun käyttämäni värit ovat melko läheisiä (jos ei samanlaisia) kuin lopullisessa suunnittelussa olevat.

Tässä on pari tuttua sovellusta, joiden lohkokehykseen kului vain muutama minuutti:

Tämä on saattanut kestää vain 10 minuuttia, mutta pystyin silti todennäköisesti keksimään tavan tuhlata 7 tuntia kissan videoiden katseluun.Ei sukua: Ajattelen aina Cinnabon ™ -tapahtumaa, kun kuulen sanan kanban. Uhh, niin herkullista.Kuka on pysähtynyt 19 suoraa jaksoa puistoista ja virkistyksestä ???

Voisin tehdä kevyttä langankehystä yllä esitettyjen lohkokehysten lisäksi, mutta olen muuten valmis aloittamaan suunnittelun erittäin uskollisesti.

Jälleen tähän prosessin vaiheeseen (puolisuunnittelu), olen jo suunnitellut joukon näyttöjä ja minulla on paljon suunnittelumalleja paikallaan, joten tämä on minulle paljon valmistautumista aloittamiseen. Ja on todennäköistä, että käytän vain näitä astioita todellisessa suunnittelussa sen sijaan, että heittäisin asioita, kuten minä [usein] teen, kun kehystän.

Suunnittelun jälkeen (Concept Reveal)

Toimistossani säädimme aina asiakasesittelytekniikoitamme niin, että esittelemme työtämme parhaalla mahdollisella tavalla. Tuhansien esitysten, suunnitteluarviointien ja konseptien paljastumisen jälkeen toimitusjohtajien, sijoittajien ja tuotepäälliköiden kanssa olemme saaneet aika hyvältä kertoa oikean tarinan oikealla tavalla, oikeaan aikaan.

Kun olemme saaneet suunnittelun valmiiksi, luomme lohkokehyksen suoraan sen päälle, jotta voimme hitaasti paljastaa suunnittelun eri osiot. Kokemuksemme mukaan koko mallin näyttäminen kerralla on YLÄKUMPPANU asiakkaalle, ja he alkavat kysyä kaikenlaisia ​​kysymyksiä, joihin et ole vielä valmis.

Kehittämällä käyttöliittymän yli, paljastamme olennaisesti yhden lautasen kerrallaan, ikään kuin järjestäisimme viktoriaanisen aikakauden päivällisjuhlia porvarillisille ystävillemme:

Talossani olisi hopeakupojen alla Twinkies ja Hot Dogit. Tyylikäs, eikö?

Näin esittelemme YouTube:

Koko lohkokehys! Emme ole vielä osoittaneet mitään uskollisuutta. Olemme vasta alkamassa tarinamme.

Tehtyämme nopeasti sivualueiden nopeaa kartoitusta, alamme paljastaa käyttöliittymän osittain:

Hitaasti alamme paljastaa osioita. Tässä pysähdyimme ja selitämme globaalin navigoinnin.

Näytämme vain yhden osion kerrallaan. Tämä auttaa meitä kohdistamaan asiakkaan huomion kohtaan, johon haluamme heidän keskittyvän:

Tässä pysähdymme videoalueen ja toiston säätimien käsittelemiseen. Saatamme olla täällä 15 minuuttia puhumme vain siitä, kuinka kaikki toimii ... ja se on kunnossa! Huuto Pablo Stanleylle ja hänen mahtavalle sarjalleen ”Sketch Together”.

Jatkaamme liikkumista. Nyt olemme videon yksityiskohdissa. Tässä nimenomaisessa esimerkissä sivu on melko lyhyt. Oikeassa tilanteessa meillä olisi todennäköisesti pidempi sivu esittelemään kommenttiosaa.

Videosi menee todella hyvin, Pablo! Onnittelut! Katso kaikkia näitä tilaajia

Viimeinkin saavutamme “Aiheeseen liittyvät videot” ja osion. Keskustellessamme asiakkaan kanssa olisimme todennäköisesti puhuneet siitä, kuinka tämä luettelo on asuttu, ja kuinka tällaiset ehdotetut videot auttavat käyttäjiä johtamaan YOUTUBE-VIDEOIDEN MUSTAAN seuraaville viidelle tunnille.

Ei niin, että minua on koskaan tapahtunut ...

Katson paljon BuzzFeed-ruokavideoita, ja se kaveri Tiny Tim Bradbury tekee hienoja videoita.

Vasta kun olemme lopettaneet kunkin osan paljastamisen, esittelemme koko käyttöliittymän:

Tada! Tukee suunnittelutiimille YouTubessa. Hyvältä näyttää!

Asiakas on käsitelty, ja heidän silmänsä jakautuvat vaistomaisesti osiin jokainen sivun alue. Heillä on nyt täydellinen käsitys sivun jokaisesta alueesta, ja keskustelut täältä eteenpäin ovat paljon tuottavampia. Asiakkaat kysyvät parempia kysymyksiä, antavat parempaa palautetta ja esittävät suunnittelun (itse) ulkoisille sidosryhmille entistä älykkäämmin.

Joten missä on ilmaisia ​​juttuja?

Hyvä on.

Automaattinen asettelu on mahtava työkalu, ja heidän uudet “pinot” -ominaisuus jäljittelee CSS-flexbox-käyttäytymistä Sketchin sisällä.

Se on huono. *

* Muille kuin amerikkalaisille ”huijata” tarkoittaa todella hienoa.
Dope tarkoittaa myös heroiinia ... mutta ei tässä tapauksessa. Automaattinen asettelu ei ole heroiini.

Loin joukon tavallisia sovellusasettelut verkko- ja mobiililaitteille ja lohkoin myös joukon suosittuja sovelluksia, jotta näet kuinka luoda niiden sisältökäyttäytyminen uudelleen.

Voit saada kaikki 30+ asettelua FUH ILMAISEKSI oikein alas. Se maksaa nolla dollaria, ellet halua rahoittaa Chipotle-burritoa ¯ \ _ (ツ) _ / ¯

(Liittyy: Tiesitkö, että siellä oli burrito-hymiö? Se on villin yksityiskohtainen.)

Okei, mutta tällä kertaa tässä on tiedosto:

Sneak kurkistaa!

Viimeinen asia ...

Viimeiseksi päivitin hiljattain UX-sähkötyökalut toimimaan automaattisen asettelun kanssa, joten nyt se on entistä nopeampi käyttää! Luulen, että kaivaa se. Jos olet kiinnostunut, voit lukea siitä lisää täältä.

Kun en kirjoita, työskentelen Sketch-suunnittelutyökaluilla, kuten UX-työkaluilla, jotta sinusta tulisi parempi, tehokkaampi suunnittelija. Kaikki parhaat luonnoksien suunnittelijat ja tiimit käyttävät sitä, ja luulen, että pidät siitäkin. Tutustu Marveliin!

Seuraa UX-sähkötyökaluja Twitterissä
Seuraa minua Twitterissä