10 disainikontseptsiooni, mida iga arendaja peaks teadma

Disainikontseptsioonid arendajatele

Viimase paari aasta jooksul olen õpetanud arendajatele suunatud visuaalse disaini aluste seminari. Nagu enamiku veebis leiduvate asjade puhul, olen ka minu õpitoas osalenud õpilastelt ja ka arendajatelt, kellega olen töötanud, leidnud mitmekülgset disainiteadmist ja huvi.

See loend on mõeldud loendiks mõistetest, millest tahaksin, et arendajad, kellega koos töötan, disaini mõistaksid. See on mõeldud arendajate õiges suunas suunamiseks kui sissejuhatus disaini üle mõtlemisse ja suhtlemisse.



01. Kujundus pole ainult visuaalne

Kujundus pole mitte ainult fassaad; see on isiksus selle all. Millegipärast on disainil stigma, mis on ainult veebisaidi visuaalne osa. See ei saa olla rohkem vale ega valesti mõistetud. Kujundus on kogu kogemus alates sellest hetkest, kui kasutajad teie saidile sisenevad, ja ka pärast lahkumist.

Kujundus pole mitte ainult fassaad; see on isiksus selle all

Kujundus on see, kuidas ja miks inimesed tahavad seda saiti kasutada; saidi laadimise kiirus; hõljumise, klõpsamise ja puudutamise vastastikune mõju; ning uute funktsioonide ja sisu esitamise tempo. Kõik need mõisted hõlmavad disaini.

02. Ole kasutajakeskne

Kasutajad on esmatähtsad ja peaksid alati olema teie saidi või rakenduse kohta iga otsuse langetamisel esirinnas. Kujundused peaksid võimaldama teie kasutajatel saavutada oma eesmärke kiiruse, tõhususe ja, mis kõige tähtsam, rõõmuga.

Oma töötoas panen õpilased looma esialgse kujundusülevaate pärast seda, kui nad on projekti valinud, millega töötada. Kuigi ma annan neile järgimiseks lihtsad juhised, keskenduvad nad enamasti kasutajale: kes nad on, mida nad teie saidil teevad ja mis on tunne, mida soovite, et nad külastaksid ja külastaksid nad lahkuvad?

Kasutajad on esmatähtsad ja peaksid alati olema iga otsuse esirinnas

Ehkki see sobib hästi töökoja väikeprojektide jaoks, peaksite suuremate projektide puhul mõtlema sellele sihtasutusele laiemalt. Disainerid kasutavad personaaži, jutuvestmist ja muud, et näidata, kes on saidi kasutajad ja mida nad tahavad saidil teha. Süvenege nendesse juhistesse mis tahes kujul, mida nad teie projekti jaoks võtavad, ja kasutage neid kõigi oma disainiotsuste mõjutamiseks.

Disainer ei peaks kogu kasutuskogemust kandma; disainerid peaksid seda lihtsalt juhtima. Kogemusi peaks selle asemel jagama kogu meeskond (kui see on olemas). On palju juhtumeid, kus olen lootnud arendajatele, et aidata mul välja selgitada parim viis parima kasutuskogemuse loomiseks. Lisaks sellele, et nad teavad paremini oma piire, on neil kõigist võimalustest ka selgem ettekujutus.

03. Kujundus on üksikasjalikult

Üksikasjad võimaldavad „hea” kujunduse „suurepäraseks” muuta. Kasutajakogemuses tähelepanu pööramine detailidele võib olla erinevus rahuloleva ja tüütu kasutaja vahel. Õige sinise tooni olemasolu või lingi pakkimine konkreetse teksti ümber on tõesti oluline.

Üksikasjad võimaldavad „hea” kujunduse „suurepäraseks” muuta

Detailide probleem on see, et nendesse on lihtne kinni jääda. Liiga vara detailidele keskendumine pole vajalik ja võib protsessi aeglustada. Oluline on teada, millal keskenduda konkreetsetele detailidele või millal on kasulik kogu suurema pildi visualiseerimine.

04. Kujundades visandage sageli

Visand aitab teil mõelda muu hulgas ka sisu, hierarhia ja voolu üle. Sketšid on odavad, hõlpsasti teostatavad ja väga kiired. Peaksite saama luua ühe uue idee iga kolmekümne sekundi tagant. Visand on ka üks parimaid viise saidi paigutuse, kasutuskogemuse ja kasutajavoo ideede edastamiseks.

Minu esimene kolledži professor kinnistas selle minusse juba tudengipõlves. Ta ei lasknud meil arvutit kasutada enne, kui nägi visandite lehekülgi. Noored disainerid kipuvad sketše kokku hoidma või jätavad need üldse välja. Ma näen endiselt, et paljud disainerid lähevad sketšidest liiga vara üle kõrgema truuduse kujundusele, uurimata kõigepealt kõiki võimalikke lahendusi.

Disainikontseptsioonid arendajatele

Sketšid võimaldavad teil ideid kiiresti korrata ja säästavad palju aega makettide või koodide abil katsetades

Parim osa visandist on see, et igaüks saab sellega hakkama. Kõik teavad, kuidas joonistada kaste, vingerdavaid jooni ja nooli. Need on põhitööriistad, mida peate projekteerimisel alustama - see on tegelikult nii lihtne. Me ei otsi hindamatuid kunstiteoseid ja te ei vaja kindlasti väljamõeldud kunstikraadi. Peate lihtsalt oskama oma visandeid ja nende taga olevat mõtlemisprotsessi selgelt edasi anda.

kubo ja kaks stringimudelit

05. Kasutage tühimikku

Tundub, et see on arendajatele kõige raskemini mõistetav mõte: sobiva hulga tühimärgi omamise suurim eelis on kasutajale puhkamine. Pausid on teabe töötlemiseks olulised, eriti kui neid on töödeldav piisavalt palju. Seetõttu on meil jooksva teksti ühe ja pika ploki asemel lõigud ja laused.

Peamine on tagada, et tühimikul oleks seos lehe teiste objektidega, sealhulgas teise ruumiga. Kui teil on üks veerg tühikut, veenduge, et selle tasakaalustamiseks oleks ümber veel üks veeru tühikut.

Disainikontseptsioonid arendajatele

Apple on tuntud selle poolest, et kasutab oma toodete esiletoomiseks ja esitlemiseks tõeliselt hästi tühimikku

Vertikaalse ruumi jaoks kasutage lihtsalt keha fondisuuruse murdosa. Ma kipun hoidma asju lihtsaks ja kasutama skaalat .25, kuid on ka mitu muud kaalud mida saate kasutada. Näiteks kui keha fondi suurus on 16px (1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. See võimaldab valida fondisuurusi, liigutades skaalal lihtsalt üles ja alla, nagu ma soovite suuremat või väiksemat tüüpi.

kuidas joonistada ideekunsti tegelasi

06. Võrgustikud pole ainult CSS-i raamistikud

Hull, eks? Võrgustikud leidsid disainis esmakordselt tähelepanu nn rahvusvahelisele tüpograafilisele stiilile.

Võrgustikku tuleks kasutada:

  • Looge objektide vahel seosed
  • Pakkuge visuaalse joondamise põhisüsteem
  • Aidake luua horisontaalset ja vertikaalset rütmi
  • Aidake luua optiline tasakaal

Kõik need mõisted töötavad koos, et saaksite oma kasutajatele parema visuaalse süsteemi luua. Teie valitud võre mõjutab kujunduse ühtsust; ruudustiku valimine selle järgi, mida on kõige lihtsam rakendada, ei pruugi olla teie sisule ja kasutajatele parim kujundusvalik. Lõppkokkuvõttes on see ikkagi vaid tööriist ja saab olema sama hea kui inimene, kes seda kasutab.

Disainikontseptsioonid arendajatele

Ärge mõelge võrgust kui CSS-i raamistikust. See on disainivahend, mida tuleks eesmärgipäraselt kasutada

07. Kui kõigel on rõhk, ei tee midagi

See on nagu vestlus grupiga inimestega, kes kõik korraga teie peale karjuvad, et teeksite erinevaid asju. Lehel peaks olema rõhk ainult ühel elemendil: kõige olulisemal. Ühe elemendi rõhutamine ja selge hierarhia omamine pakub lugejatele voolu ja peaks neid suunama soovitud suunas.

08. Hoidke inspiratsioonikausta

Picasso sõnul ‘head artistid kopeerivad, suured artistid varastavad’.

Hoidke galeriid kõigist asjadest, mis teid visuaalselt inspireerivad. Need võivad olla fotod, videod, plakatid, T-särgid ja veebisaidid; kõik, mis võib tekitada ideid konkreetse disainiprobleemi lahendamiseks.

Picasso sõnul ‘head artistid kopeerivad, suured artistid varastavad’

See toimib mitte ainult võrdluspunktina, vaid sunnib ka pidevalt disaini vaatama ja hindama. Kujundusdetailide valimise ja kausta salvestamise lihtne protsess sunnib teid neid disainianalüüsi lihaseid kasutama.

Disainikontseptsioonid arendajatele

Hoidke inspiratsioonigaleriid. Alates fotodest kuni teedeni võib fotode, kujunduste või muu viitamine viidata ideele teie enda kujunduste jaoks

09. Kujundus on seotud probleemide lahendamisega

Peaksite lähenema disainile kui probleemide kogumile, mis nõuab lahendusi. Kõigil lehel olevatel peaks olema põhjus seal viibimiseks ning kasutaja või kujunduse jaoks konkreetse probleemi lahendamine. Mul on kalduvus funktsioone komplektist eemaldada, kuni probleem, mida lahendan, on väga ilmne.

Peaksite lähenema disainile kui probleemide kogumile, mis nõuab lahendusi

Mõnikord on meil raske probleeme välja tuua, mitte lahenduse otsimiseks. Tagurpidi töötamine aitab selles tõesti kaasa. Näiteks otsustades, kas miski peaks olema punane, peatage ja mõelge põhjustele, miks te seda kõigepealt punaseks tahtsite. Küsige endalt: mida ma üritan selle punaseks muutmisega saavutada? Milline oli minu mõtteprotsess? Võimalik, et jõuate tagasi sinna, kust alustasite, kuid saate paremini aru, miks ja mida teete.

10. Tea, kuidas disainist rääkida ja seda kritiseerida

Kindel viis disaineri tüütamiseks on öelda neile, et punane klots peaks olema sinine, et tekstiosa tuleks teisaldada või logo suuremaks muuta. Ma arvan, et saate idee.

Parim viis konstruktiivse tagasiside andmiseks on juhtida tähelepanu disainiprobleemidele. Kasutage tõendeid, mis põhinevad kasutajatel, saidi voolul, kujunduseesmärkidel ja visuaalsetel põhimõtetel, et toetada probleeme, mida disainiga näete. See toetab teie arvamust selle kohta, mis peaks muutuma, ja annab tugeva aluse nii kasutajale kui ka kujundusele edu saavutamiseks.

Parim viis konstruktiivse tagasiside andmiseks on juhtida tähelepanu disainiprobleemidele

Siis loodetavasti töötab disainer teiega probleemi lahendamiseks. See on teie võimalus resolutsiooni soovitada; lihtsalt ära palu logo suuremaks muuta.

Kyle Fiedler on thinkboti disainer, kes aitab luua Railsi ja iOS-i rakendusi. Ta on mingil kujul kujundanud ja arendanud alates dot-com buumist (ja büstist) ega ole sellest ajast alates enam peatunud.

See artikkel ilmus algselt .net ajakiri