10 suunnittelukonseptia, jotka jokaisen kehittäjän on tiedettävä

Viime vuosina olen opettanut kehittäjille suunnatun seminaarin visuaalisen suunnittelun perusteista. Kuten useimpien web-asioiden kohdalla, olen löytänyt monipuolisen suunnittelutiedot ja kiinnostuksen sekä työpajani suorittaneilta opiskelijoilta että kehittäjiltä, ​​joiden kanssa olen työskennellyt.

Tämän luettelon on tarkoitus olla lyhyt luettelo käsitteistä, jotka haluaisin kehittäjien, joiden kanssa työskentelen, ymmärtävän suunnittelusta. Sen on tarkoitus ohjata kehittäjiä oikeaan suuntaan johdantona suunnittelun ajatteluun ja viestintään.



01. Suunnittelu ei ole vain visuaalista

Suunnittelu ei ole vain julkisivu; se on persoonallisuus alla. Jostain syystä suunnittelulla on leima yksinomaan verkkosivuston visuaalisena osana. Tämä ei voi olla enemmän väärää tai väärinymmärrettyä. Suunnittelu on koko kokemus siitä hetkestä, kun käyttäjät saapuvat sivustoosi, hyvään lähdön jälkeen.



kuinka muokata GIF-kuvia Photoshop CS6: ssa

Suunnittelu on 'miten' ja 'miksi' ihmiset haluavat käyttää sivustoa; nopeus, jolla työmaa latautuu; hiiren, napsautuksen ja kosketuksen välinen vuorovaikutus; ja uusien ominaisuuksien ja sisällön toimittamisen tahti. Kaikki nämä käsitteet käsittävät suunnittelun.

Koska suunnittelu on enemmän kuin visuaalisia näkökohtia ja vaikuttaa koko kokemukseen, jokainen projektin henkilö on suunnittelija. Jokainen tiimin jäsen, joka aikoo selvittää, miten käyttäjä on vuorovaikutuksessa sivuston kanssa, on suunnittelija. Käyttöliittymän, taustajärjestelmän ja projektinhallinnan tulisi kaikki ajatella suunnittelua.



02. Ole käyttäjäkeskeinen

Käyttäjät ovat ensiarvoisen tärkeitä, ja heidän on aina oltava etusijalla jokaisessa sivustoasi tai sovellustasi koskevassa päätöksessä. Suunnittelun on annettava käyttäjille mahdollisuus saavuttaa tavoitteensa nopeasti, tehokkaasti ja mikä tärkeintä, mielihyvällä.

Työpajassani saan opiskelijat luomaan alustavan suunnittelutiedotteen sen jälkeen, kun he ovat valinneet työn. Vaikka annan heille yksinkertaiset ohjeet noudatettavaksi, he keskittyvät pääosin käyttäjään: keitä he ovat, mitä he tekevät sivustollasi ja minkä tunteen haluat heidän tekevän vierailunsa aikana he lähtevät?

Vaikka tämä toimii hyvin työpajan pienissä projekteissa, on suurempien projektien suhteen ajateltava tätä säätiötä laajemmassa mittakaavassa. Suunnittelijat käyttävät persoonaa, tarinankerrontaa ja muuta osoittamaan, ketkä ovat sivuston käyttäjät ja mitä he haluavat tehdä sivustolla. Syvennä näihin ohjeisiin missä tahansa muodossa projektissasi ja käytä niitä vaikuttamaan kaikkiin suunnittelupäätöksiisi.



Suunnittelijan ei pitäisi joutua kantamaan koko käyttäjäkokemusta; suunnittelijoiden pitäisi vain johtaa sitä. Kokemuksen pitäisi sen sijaan jakaa koko tiimi (jos sellainen on). On monia tapauksia, joissa olen luottanut kehittäjiin auttamaan minua selvittämään paras tapa luoda paras käyttökokemus. He eivät vain tiedä rajojaan paremmin, vaan heillä on myös selkeämpi käsitys kaikista mahdollisuuksista.

03. Suunnittelu on yksityiskohtaisesti

Yksityiskohdat pystyvät tekemään 'hyvästä' suunnittelusta 'suuren'. Huomiota yksityiskohtiin käyttökokemuksessa voi olla ero tyytyväisen käyttäjän ja ärtyneen käyttäjän välillä. Oikean sinisen sävyn saaminen tai linkin kääriminen tietyn tekstin ympärille on todella tärkeää. Yksityiskohtien ongelma on se, että niihin on helppo tarttua. Liian aikaisin keskittyminen yksityiskohtiin on tarpeetonta ja voi hidastaa prosessia. On tärkeää tietää, milloin keskittyä tiettyihin yksityiskohtiin tai milloin on hyödyllistä visualisoida koko suurempi kuva.

04. Suunnittelussa piirrä usein

Edut / piirtää käyttökokemuksia ovat hyvin dokumentoitu . Luonnos auttaa sinua ajattelemaan sisältöä, hierarkiaa ja sujuvuutta muun muassa. Luonnokset ovat halpoja, helppoja tehdä ja erittäin nopeita. Sinun pitäisi pystyä luomaan yksi uusi idea 30 sekunnin välein. Luonnos on myös yksi parhaista tavoista kommunikoida ideoista sivuston ulkoasusta, käyttökokemuksesta ja käyttäjävirrasta.

Luonnosten avulla voit toistaa ideoita nopeasti ja säästää paljon aikaa kokeilemalla maketteja tai koodeja

Luonnosten avulla voit toistaa ideoita nopeasti ja säästää paljon aikaa kokeilemalla maketteja tai koodeja

Ensimmäinen yliopistoprofessorini juurrutti tämän minuun opiskelijana. Hän ei antanut meidän käyttää tietokonetta, ennen kuin hän näki sivuja luonnossivuilla. Nuoret suunnittelijat pyrkivät säästämään luonnoksia tai jättämään ne kokonaan pois. Näen silti, että monet suunnittelijat siirtyvät liian aikaisin luonnoksista korkeamman tarkkuuden suunnitteluun tutkimatta ensin kaikkia mahdollisia ratkaisuja.

Parasta piirtämisessä on, että kuka tahansa voi tehdä sen. Kaikki osaavat piirtää laatikoita, rypistyneitä viivoja ja nuolia. Nämä ovat perustyökalut, jotka tarvitset suunnittelun aloittamiseen - se on todella niin yksinkertaista. Emme etsi arvokkaita taideteoksia, etkä todellakaan tarvitse hienoa taidetta. Sinun täytyy vain pystyä kommunikoimaan selkeästi luonnoksistasi ja niiden takana olevasta ajatteluprosessista.

05. Käytä tyhjää tilaa

Vaikuttaa siltä, ​​että kehittäjät ovat vaikeimmin ymmärrettävissä: suurin hyöty oikean määrän tyhjätilan saamisesta antaa käyttäjälle tauon. Tauot ovat tärkeitä tietojen käsittelyssä, varsinkin kun käsittely on kohtuullista. Siksi meillä on kappaleita ja lauseita vain yhden, pitkän käynnissä olevan tekstilohkon sijaan.

kuinka tehdä kankaasta isompaa photoshopissa

Tärkeintä on varmistaa, että välilyönnillä on suhde muihin sivun kohteisiin, mukaan lukien muu tila. Jos sinulla on yksi sarake tyhjää tilaa, varmista, että sen ympärillä on toinen yksittäinen sarake tyhjää tilaa.

Käytä pystysuoraan tilaan vain murto-osia rungon fontin koosta. Minulla on tapana pitää asiat yksinkertaisina ja käyttää asteikolla 0,25, mutta on useita muita asteikkoja, joita voit käyttää . Esimerkiksi, jos tekstin fonttikoko on 16 kuvapistettä (1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. Tämä mahdollistaa fonttikokojen valitsemisen yksinkertaisesti siirtymällä ylös ja alas asteikolla I haluat suurempaa tai pienempää tyyppiä.

Apple käyttää tyhjää tilaa todella hyvin korostaakseen ja esittelemällä tuotteitaan

Apple käyttää tyhjää tilaa todella hyvin korostaakseen ja esittelemällä tuotteitaan

06. Ruudukot eivät ole vain CSS-kehyksiä

Hullu, eikö? Ruudukot löysivät suunnittelussa ensimmäisen kerran huomion siitä, mitä nyt kutsutaan Kansainvälinen typografinen tyyli .

Ruudukkoa tulisi käyttää:

  • Luo suhteita objektien välille
  • Tarjoa perusjärjestelmä visuaalista kohdistusta varten
  • Auta luomaan vaaka- ja pystysuuntainen rytmi
  • Auta luomaan optinen tasapaino

Kaikki nämä käsitteet toimivat yhdessä, jotta voit parhaiten luoda paremman visuaalisen järjestelmän käyttäjillesi. Valitsemasi ruudukko vaikuttaa suunnittelun yhtenäisyyteen; ruudukon valitseminen sen perusteella, mikä on helpoin toteuttaa, ei välttämättä ole paras suunnitteluvalinta sisällölle ja käyttäjille. Loppujen lopuksi se on silti vain työkalu, ja se on vain yhtä hyvä kuin sitä käyttävä henkilö.

Don

Älä ajattele vain ruudukkoa CSS-kehyksenä. Se on suunnittelutyökalu, jota tulisi käyttää tarkoitukseen

07. Kun kaikessa on painopiste, mikään ei

Se on kuin keskusteleminen ryhmän kanssa, jotka kaikki huutavat sinua samanaikaisesti tekemään erilaisia ​​asioita. Vain yksi elementti saa painottaa sivua: tärkein. Yksittäisen elementin painottaminen ja selkeän hierarkian tarjoaminen tarjoaa virtaa lukijoille ja sen tulisi osoittaa heidät haluttuun suuntaan.

08. Pidä inspiraatiokansio

Pidä galleria kaikista asioista, jotka inspiroivat sinua visuaalisesti. Nämä voivat olla valokuvia, videoita, julisteita, T-paitoja ja verkkosivustoja; mikä tahansa, mikä voi herättää ideoita ratkaisuun juuri kohtaamaasi suunnitteluongelmaan.

Paitsi että tämä toimii vertailukohtana, se myös pakottaa sinut jatkuvasti etsimään ja arvioimaan suunnittelua. Yksinkertainen suunnitteluosien valitseminen ja tallentaminen kansioon pakottaa käyttämään näitä suunnitteluanalyysilihaksia.

Pidä galleria inspiraatiota. Valokuvista teesiin, valokuvien, mallien tai muun viittaaminen voi auttaa luomaan idean omiin malleihisi

Pidä galleria inspiraatiota. Valokuvista teesiin, valokuvien, mallien tai muun viittaaminen voi auttaa luomaan idean omiin malleihisi

09. Suunnittelussa on kyse ongelmanratkaisusta

Sinun tulisi lähestyä suunnittelua ongelmana, joka vaatii ratkaisuja. Kaikella sivulla olevalla pitäisi olla syy olla siellä ja ratkaista tietty ongelma käyttäjälle tai suunnittelulle. Minulla on taipumus poistaa ominaisuuksia ominaisuusjoukosta, kunnes ratkaisemani ongelma tulee hyvin ilmeiseksi.

Joskus meidän on vaikea sanoa ongelmia pikemminkin kuin siirtyä ratkaisuun. Työskentely taaksepäin todella auttaa tässä. Kun päätät esimerkiksi, pitäisikö jotain olla punaista, pysähdy ja mieti syitä, jotka halusit sen ensiksi punaiseksi. Kysy itseltäsi: mitä yritän saavuttaa tekemällä siitä punaisen? Mikä oli ajatusprosessini? Saatat päätyä takaisin alkuun, mutta ymmärrät paremmin miksi ja mitä teet.

10. Osaa puhua ja kritisoida suunnittelua

Varma tapa ärsyttää suunnittelijaa on kertoa heille, että punaisen lohkon on oltava sininen, että teksti on siirrettävä tai logo on isompi. Luulen, että saat idean.

Paras tapa antaa rakentavaa palautetta on kiinnittää huomiota suunnittelun ongelmiin. Sinulla on käyttäjiin, sivuston kulkuun, suunnittelutavoitteisiin ja visuaalisiin periaatteisiin perustuvia todisteita, jotka tukevat suunnittelussa havaitsemiasi ongelmia. Tämä tukee sitten mielipiteitäsi siitä, mitä pitäisi muuttaa, ja tarjoaa vahvan perustan menestykselle käyttäjälle ja suunnittelulle.

Sitten toivottavasti suunnittelija työskentelee kanssasi ratkaisun löytämiseksi ongelmaan. Tämä on tilaisuutesi ehdottaa päätöslauselmaa; älä vain pyydä logon suurentamista.

Resurssit ja työpaja

Jos olet löytänyt tämän mielenkiintoisen, tutustu minuun suunnittelu kehittäjien resursseille ja suunnitella oppimisreittejä . Haluaisin myös nähdä sinut kummassakin verkkoversio tai henkilökohtainen versio työpajan.

Sanat: Kyle Fiedler

Kyle Fiedler on thinkbotin suunnittelija, joka auttaa rakentamaan Rails- ja iOS-sovelluksia. Hän on suunnitellut ja kehittänyt jossain muodossa dot-com-puomista (ja rintakehästä) lähtien eikä ole pysähtynyt siitä lähtien.

kaikkien aikojen parhaat aikakauslehdet

Tämä artikkeli ilmestyi alun perin nettilehti numero 244.

Piditkö tästä? Lue nämä!

Onko sinulla upea suunnitteluvinkki? Jaa se kommenteissa!