Kuinka parantaa käyttöliittymän / käyttöliittymän suunnittelutaitojasi kehittäjänä

Jos olisit kysynyt minulta neljä vuotta sitten, kun tulin CS-tutkinnon suorittaneeksi, millaista urapolua näin itseni seuraavan, olisin todennäköisesti kertonut sinulle Java-kehityksen tai jotain vastaavaa. En ollut koskaan luova, sillä maali tapaa kangasta eräänlaisella tavalla, joten en oikeastaan ​​harkinnut urapolua, johon sisältyi etupään kehittäminen ja suunnittelu.

Kuten me kaikki tiedämme, asiat muuttuvat. Urani aikana olen kiinnostunut yhä enemmän käyttöliittymän kehittämisestä ja suunnittelusta. Olen ollut työssäni onnekas saadessani altistumisen käyttöliittymän kehitykselle ja saaneen sijoittaa aikaa käyttöliittymän kehittäjäksi tarvittavien taitojen parantamiseen.

Viimeisten 12 kuukauden aikana olen pyrkinyt parantamaan ymmärrystäni käyttöliittymän / käyttöliittymän suunnittelusta sekä henkilökohtaisen kiinnostukseni vuoksi että voidakseni olla tehokkaampi työskennellessäni suunnittelijoiden kanssa.

Tässä viestissä haluaisin jakaa oppimani kokemukset, keräämäni resurssit ja tekemäni virheet siinä toivossa, että muut kehittäjät voivat oppia matkalta.

Sisällysluettelo

  • Se ei ole vain lahjakkuutta
  • Katso, ajattele, varastaa
  • Opi teoria
  • Rakenna jotain
  • Älä anna periksi
  • Resurssit
  • Johtopäätös

Se ei ole vain lahjakkuutta

Tämä näyttää minulle itsestään selvältä nyt, mutta oli aika, jolloin ajattelin, että suunnittelijat olivat velhoja, jotka olivat syntyneet kyvyllä luoda hämmästyttävän näköisiä sovelluksia ja verkkosivustoja.

On käynyt ilmi, että he eivät ole. He ovat juuri työskennelleet kovasti parantaakseen käsityöään. Samalla tavalla kuin koodaamisen oppiminen on helpompaa joillekin ihmisille, on ihmisiä, joilla on luonnollinen kyky muotoiluun, mutta kyky ei tarkoita paljoa ilman kovaa työtä.

Suunnittelu on jotain, joka voidaan oppia. Älä tee sitä virhettä, jonka tein, ja kirjoita itsesi pois, koska et ole luova perinteisessä mielessä. Ohjelmointiongelmien ratkaiseminen vie luovuutta; ajattele suunnitteluhaasteiden ratkaisemista samalla tavalla.

Katso, ajattele, varastaa

Samalla tavalla kuin hyvän koodin lukeminen auttaa sinua tulemaan paremmaksi kehittäjäksi, oppiminen muiden luomasta auttaa sinua tulemaan paremmaksi suunnittelijaksi.

Kun seuraavan kerran vierailet verkkosivustolla tai käytät sovellusta, katso sitä ja mieti , miksi se näyttää ja käyttäytyy samalla tavalla. Miksi elementit sijoitetaan sinne missä ne ovat? Miksi painike on tietyn värinen? Miksi sinun on suoritettava toimia tietyssä järjestyksessä?

Ota esimerkiksi Mediumin suosionosoitukset. Miksi he eivät vain käyttäneet tykkää-painiketta kuten kaikki muutkin sosiaalisen median verkkosivustot? Mielestäni se oli fiksu suunnittelupäätös olla tekemättä. Sen sijaan he pystyvät vahvistamaan ajatusta yhteisöstä, joka ohjaa sivustoa suunnittelemalla vuorovaikutusta huolellisesti. Artikkelin tai vastauksen antaminen viisikymmentä taputusta vie aikaa, ennen kuin käyttäjä voi tehdä sen, mutta se auttaa häntä todella muodostamaan yhteyden katsomaansa sisältöön ja sen luoneeseen henkilöön.

Sivustot, kuten Awwwards ja Dribbble, ovat osoittautuneet minulle korvaamattomiksi viime vuonna. Monet luomistani malleista ovat saaneet liberaalia inspiraatiota muiden upeiden suunnittelijoiden luomuksista.

Opi teoria

Kun aloin koota omia mallejani, en pystynyt selvittämään, miksi ne näyttivät ja käyttäytyivät niin huonosti. Virrat olivat hankalia, värit eivät täsmää ja asettelut olivat epäjohdonmukaisia.

Ajattelin, että voisin vain hypätä suoraan sisään ja käyttää kehitystietoni sekä perustietoni siitä, kuinka sivustojen tulisi toimia käyttäjänä, ja se toimisi hyvin.

Olin hyvin, hyvin väärässä. Päätin luoda malleja kehittäjien näkökulmasta sen sijaan, että käyttäisin suunnitteluteoriaa.

Kehittäjät tietävät, miten sivusto toimii , mutta suunnittelijat tietävät, miten sivusto käyttäytyy ja tuntuu. On suuri aukko, jonka voit korjata vain hankkimalla perustan suunnittelutaidolle.

Perustutkimuksen saamiseksi suunnitteluteoriasta käytin enimmäkseen Mediumia ja Udemyä. Löydät linkit käyttämiini resursseihin alla olevasta osiosta.

Rakenna jotain

Jokainen kehittäjä tai CS-professori kertoo sinulle, että paras tapa tulla paremmaksi ohjelmoijaksi on kirjoittaa koodi. Sama periaate pätee suunnitteluun.

Ei ole väliä mitä suunnittelet, kunhan opit siitä. Kohtele sitä todellisena projektina: Ajattele käyttäjiä. Luo lankakehyksiä, maketteja ja prototyyppejä. Toista alkuperäinen muotoilu sen parantamiseksi. Voit käyttää Redditin kaltaisia ​​sivustoja saadaksesi palautetta luomastasi sisällöstä.

Voit jopa yhdistää sen kehittämisosaamisen parantamiseen. Suurimman osan viimeaikaisista sivuprojekteistani on motivoinut yhteinen halu parantaa sekä web-kehitystyötäni että suunnittelutaitoani. Kun olet suunnitellut projektisi, voit kehittää sitä ja nähdä kolikon molemmat puolet.

Tässä on joitain ideoita aloittaaksesi:

  • Suunnittele vuorovaikutus. Käytä Mediumin suosionosoituksia inspiraatioon.
  • Suunnittele sovellus suosikki hyväntekeväisyyteen. Ajattele erilaisia ​​käyttäjiä: potentiaalisia, harvinaisia ​​ja säännöllisiä suojelijoita.
  • Suunnittele ansioluettelosi. Ajattele käyttämiäsi värejä ja mitä ne tarkoittavat. Ajattele, miten CV: täsi käytetään. Katsotaanko sitä vain näytöllä vai tulostetaanko se? Kuinka se vaikuttaa suunnitteluun?
  • Suunnittele uudelleen olemassa oleva verkkosivusto. Se voi olla paikallisen liikenteen tarjoajasi tai globaali tuotemerkki. Vertaa suunnittelua alkuperäiseen ja mieti eroja käyttäjän näkökulmasta.
  • Suunnittele jotain fyysistä, kuten uusi kuljetusmenetelmä tai ehkä vaihtoehto jollekin yksinkertaiselle, kuten haarukka tai tuoli. Olen huomannut, että jokapäiväisten asioiden suunnittelu on todella hyödyllinen tapa saada ajattelutapa suunnitella jotain intuitiivista.

Älä anna periksi

Kun katson taaksepäin vuosi sitten luomaani, on vaikea olla älä. Mutta kaikki alkavat jostain. Luomasi eteneminen on sen arvoista. Niin kauan kuin opit siitä, mitä olet tekemässä, aikaasi kuluu hyvin.

Se voi auttaa seuraamaan oppimiasi säännöllisin väliajoin. Joka kuukausi katson joitain asioita, joihin olen työskennellyt, ja yritän ottaa niin paljon kuin pystyn kokemuksesta. Vaikka se tunnistaa vain pienen osan artikkelista lukemastasi, se on silti edistystä.

Resurssit

Alla on pieni kokoelma suosikkityökalujani, artikkeleitani ja kurssejani. Löydät monia muita, joita en ole luetellut täällä, ja täällä.

Työkalut

Figma - Suunnittelu ja prototyyppien tekeminen yhdessä.

FramerX - samanlainen kuin Figma, mutta siihen on lisätty React ja löydettäviä komponentteja.

Jäähdyttimet - Löydä ja luo väripaletteja.

WebAIM-kontrastin tarkistaja - Varmista, että värisi ovat käytettävissä.

Arkkityyppi - typografiajärjestelmän muokkaaja ja generaattori.

Artikkelit

7 käytännön vinkkejä huijaamiseen suunnittelussa

10 huijauskoodia käyttöliittymien suunnitteluun

10 pientä suunnitteluvirhettä, joita teemme edelleen

Suunnittele paremmat lomakkeet

Täydellinen luettelo UX-toimituksista

Psykologian periaatteet, jotka jokaisen käyttöliittymän / käyttöjärjestelmän suunnittelijan on tiedettävä

Kuinka käyttää värejä käyttöliittymäsuunnittelussa

16 lainausta, jotka sinun on luettava UX-suunnittelijana

Tuotesuunnittelun periaatteet yhdellä kortilla

Kurssit

Käyttökokemuksen suunnittelun perusteet - Udemy

Täydellinen sovellussuunnittelukurssi - käyttöliittymä, käyttöliittymä ja muotoiluajattelu - Udemy

UXTraining.com

Johtopäätös

Toivon, että olet voinut ottaa jotain matkalta. Jos sinulla on suunnitteluvinkkejä tai resursseja, jotka ovat auttaneet sinua oppimaan, haluaisin mielelläni kuulla ne vastauksissa.

Kiitos lukemisesta!