Visandõpetused

„Plokkraam” ja 31 tasuta visandiga valmis kujundust, kasutades Anima rakenduse automaatset paigutust

Jah, saate need alla laadida. Jah, tasuta.

Joni märkus. Selle postituse allosas saate alla laadida tasuta faili, kuid kui teil on aega 7 minutit (vastavalt keskmisele), arvan, et õpite ühe või kaks asja! Naudi!

Päris jutt

Ainus kord, kui ma olen loonud „päris” juhtraame, on see, kui ma üritan näidata Dribbble'is lahedat protsessivõtet ...

... ja ma ei näita kunagi Dribbble'is lahedaid protsessikuvasid.

Kutid, ma pole lihtsalt hea juhtmevabade osas!

Ma olen alati põnevil ja lisan lõpuks liiga palju detaile ning kiire traaditaraam pidi lõpuks olema kuutunnine nitpixeling ™ täiuslikuks polsterdamiseks, suurepärased veerised ja õpikute tüpograafia.

Nii et ei ... ma ei ole traatraami osas nii hea.

Kuid see, milles ma hea olen, on lindistamine.

Ehkki ausalt, läheb see iga silmuse paremaks.

Blokeeri… raamimine?

Minu disaini mentor rääkis mulle ühe loo professorist, kes tal oli koolis, kes võttis nende kavandite hindamisel prillid ära. Ta ütles, et see aitas tal paremini mõista nende kujunduse paigutust ja visuaalset harmooniat.

Arvake see rakendus ära!

Tõde on, selle uduse maketi abil saate rääkida päris köitva loo. See on kiire viis disaini kontrollimiseks, ilma et oleks vaja kõike nii palju kujundada.

Kui tuvastate ülaltoodud suurimad värvipiirkonnad, kuvatakse siin blokeerivana Facebook:

Ma garanteerin, et 99% teist oleks võinud mulle ilma vihjeteta öelda, mis see rakendus oli. Ülejäänud 1% teist on 87-aastased.

Anima Appi hämmastava automaatse paigutuse pistikprogrammi abil saan teile isegi näidata, kuidas lehe sisu peaks brauseri suuruse korral käituma ... mis on fikseeritud ... mis on vedelik ... ja mis hõljub:

Facebooki keskkonteiner püsib kindla laiusega ja hõljub keskel, samal ajal kui vestlusvoog jääb paremale.

Millal kasutada blokeeringut?

Plokkraamimise eeliseks on see, et saate seda teha toote kujundamise igas etapis:

  1. Enne (esialgne kujundus)
  2. Ajal (uued funktsioonid)
  3. Pärast (kontseptsiooni ilmutamine)

Enne kujundust (algne kujundus)

Plokkraamimine ei asenda tavalist juhtmetraamimist. Traatkarkass lihtsalt ei sobi minu töövoogu. Minu disainimeeskond teeb klienditahvlile nii palju koostööd, et minu jaoks on kõik muu ajaraiskamine.

Plokkraamimine ei asenda tavalist juhtmetraamimist.

Isiklikult leian, et tähelepanu kõrvale juhivad üksikasjalikud raamiraamid koos näiva tekstiga, ühe piksli ääriste ja X-kohahoidja piltidega. Ja kui ma leian, et need segavad (kui keegi, kes teab neid lugeda), siis võib ka klient seda teha.

Kirjeldades blokeeringut, kirjeldan kogu sisu alasid, selle asemel, et detailidesse süveneda. See varustab mind idee edastamiseks või loo rääkimiseks enam kui piisavalt teabega.

Tavaliselt saadan kliendile midagi sellist Slack'i või e-posti teel, et uue ekraani idee kiiresti läbi vaadata. Räägime erinevatest valdkondadest, liigutame asju ringi ja hakkame mängima värvi ja kontrastiga. See on suurepärane viis olla disainiga paindlik ja paindlik enne sukeldumist suure täpsusega ja kliendid tunnevad alati rõõmu protsessist osa saada.

See säästab aega ka seetõttu, et klient ei lõhesta juukseid lehe kõigi pisidetailide kaupa. Minu kogemuse kohaselt suurendab kliendi või sidusrühmaga ühiskasutus suuresti teie edukust lõpliku kujunduse (te) esitamisel, kuna klient juba teab, mis tuleb.

Kujunduse ajal (uued funktsioonid)

Oletame, et olete toote juba saatnud ja kavandate uusi funktsioone. Selleks hetkeks on kümneid väljakujunenud mustreid ja visuaalne stiil on väga hästi määratletud. Võib-olla on teil olemas isegi täielik disainiraamistik, näiteks UX-i tööriistad!

Leian, et plokkide kujundamine on selles faasis eriti kasulik, kuna saan luua midagi, mis näib tegelikule kujundusele palju lähemal. Minu kasutatud värvid on lõppkujunduses värvidega üsna lähedased (kui mitte identsed).

Siin on paar tuttavat rakendust, mille raamimiseks kulus vaid mõni minut:

See võib olla võtnud ainult 10 minutit, kuid ma suutsin siiski arvata, kuidas kulutada 7 tundi kasside videote vaatamisele.Pole seotud: mõtlen alati sõna Cinnabon ™, kui kuulen sõna kanban. Uhh, nii maitsev.Kes on maas 19 Parks & Recreationi otseversiooni eest ???

Lisaks ülaltoodud pildiraamidele võiksin teha pisut kerget kaadrit, kuid olen muidu valmis alustama projekteerimist ülitäpselt.

Jällegi, selleks hetkeks (disainilahenduse keskpunkt), olen juba projekteerinud hunniku ekraane ja mul on palju kujundusmustreid, nii et see on minu jaoks piisavalt ettevalmistus, et alustada. Ja on tõenäoline, et lõpetan nende konteinerite tegeliku kujunduse kasutamise selle asemel, et visata asju, nagu ma tavaliselt raamin.

Pärast kavandit (Concept Reveal)

Minu agentuuris kohandasime kliendi esitlemise tehnikaid alati nii, et näitaksime oma tööd parimal võimalikul viisil. Pärast tuhandeid esitlusi, disainiülevaateid ja kontseptsiooni paljastamist koos tegevjuhtide, investorite ja tootejuhtidega on meil õnnestunud rääkida õige lugu õigel viisil ja õigel ajal.

Kui oleme kavandi lõpetanud, loome otse selle peale pildiraami, et saaksime aeglaselt paljastada disaini erinevad sektsioonid. Meie kogemuse kohaselt on kogu kujunduse korraga kuvamine ülimalt hea kliendi jaoks ja nad hakkavad esitama igasuguseid küsimusi, milleks te pole veel valmis.

Kasutades liideseid üle UI, paljastame põhimõtteliselt ühe roa korraga, justkui võõrustame oma kodanlussõpradele viktoriaanliku aja õhtusöömaaegu:

Minu majas oleksid nende hõbedaste kuplite all Twinkies ja Hot Dogs. Stiilne, eks?

YouTube'i esitleme järgmiselt:

Täielik täisraam! Me ei näita veel mingit truudust. Me alles alustame oma lugu.

Pärast leheregioonide kiiret kokkuvõtmist hakkame UI-d paljastuste kaupa paljastama:

Aeglaselt hakkame paljastuma. Siin peataksime ja selgitaksime globaalset navigeerimist.

Kuvame korraga ainult ühte sektsiooni. See aitab meil suunata kliendi tähelepanu ühte kohta, kuhu soovime, et ta keskenduks:

Siin peatume videopiirkonna ja taasesituse juhtelementide käsitlemiseks. Võib-olla jääme siin 15 minutiks lihtsalt rääkima, kuidas see kõik töötab ... ja see on okei! Hüüdmine Pablo Stanleyle ja tema vinge sarjale “Visand koos”.

Liigume edasi. Nüüd käsitleme video üksikasju. Selles konkreetses näites on leht üsna lühike. Päris stsenaariumi korral oleks meil ilmselt pikem leht kommentaaride jaotise kuvamiseks.

Teie videotega läheb tõesti hästi, Pablo! Palju õnne! Vaadake kõiki neid tellijaid

Lõpuks jõuame jaotiseni „Seotud videod“. Vestluses kliendiga rääkisime arvatavasti sellest, kuidas see loend on asustatud ja kuidas sellised soovitatud videod aitavad kasutajatel viia JOOKSVATE TUNNI TÖÖTAMISEKS YOUTUBE-i videote pimendamiseni.

Mitte et minuga seda kunagi juhtunud oleks ...

Vaatan palju BuzzFeedi toiduvideoid ja see tüüp Tiny Tim Bradbury teeb naljakaid videoid.

Alles pärast iga jaotise paljastamist oleme kogu liidesega tutvunud:

Tada! Reklamid YouTube'is disainimeeskonnale. Hea välja nägema!

Klient on saanud ettevalmistuse ja tema silmad eraldavad instinktiivselt lehe kõik piirkonnad. Neil on nüüd täielik arusaam lehe igast alast ja edaspidi toimuvad vestlused on palju produktiivsemad. Kliendid esitavad paremaid küsimusi, annavad paremat tagasisidet ja esitavad kujunduse (ise) välistele sidusrühmadele senisest arukamalt.

Uhh, kus on tasuta kraam?

Olgu, olgu.

Automaatne paigutus on fantastiline tööriist ja nende uus funktsioon “korstnad” jäljendab CSS-i flexboxi käitumist otse visandis.

See on jube. *

* Mitteameeriklaste jaoks tähendab „jope” tõesti väga lahedat.
Dope tähendab ka heroiini ... kuid mitte sel juhul. Automaatne paigutus ei ole heroiin.

Lõin hulga veebi- ja mobiilseadmete jaoks tavalisi rakendusepaigutusi ning moodustasin ka hulga populaarseid rakendusi, nii et näete, kuidas nende sisukäitumist taastada.

Võite saada kõik 30+ paigutust FUH TASUTA kohe alla. See maksab teile null dollarit, kui te ei soovi Chipotle burrito rahastamist ¯ \ _ (ツ) _ / fund

(Seotud: kas teadsite, et seal on burrito emotikone? See on metsikult detailne.)

Olgu, aga seekord on siin fail:

Eelvaade!

Viimane asi ...

Lõpuks värskendasin hiljuti UX-i tööriistu, et töötada koos automaatse paigutusega, nii et nüüd on see veelgi kiirem kasutada! Ma arvan, et te kaevate selle välja. Kui olete huvitatud, saate selle kohta rohkem lugeda siit.

Kui ma ei kirjuta, töötan ma visandite kujundamise tööriistade, näiteks UX-tööriistade abil, et muuta teid paremaks ja tõhusamaks kujundajaks. Kõik parimad visandikujundajad ja meeskonnad kasutavad seda ja arvan, et ka teile võib see meeldida. Vaadake seda Marvelist!

Järgige UX-i tööriistu Twitteris
Jälgi mind Twitteris