Vaikka he saattavat työskennellä samojen projektien ja tuotteiden parissa, kehittäjät ja suunnittelijat työskentelevät usein erillään siiloissa. Kehittäjät pitävät suunnittelua usein toissijaisena asiana, joka ei ole merkitystä tuotteen toiminnallisuuteen verrattuna.

Tällainen ajattelu voi olla haitallista kehittäjä-suunnittelija-suhteelle. Suunnittelun perusosaamisen puuttuminen voi pitää kehittäjät urallaan tai estää heitä jatkamasta projekteja vain siksi, että heillä ei ole suunnittelijaa aluksella.

Miksi kehittäjien tulisi oppia muotoilu

Vaikka suunnittelua ja kehitystä pidetään usein erillisinä tieteenaloina, siellä on ihmisiä, jotka ovat oppineet molemmat. Vaikka joku olisi kiinnostunut vain suunnittelijasta tai kehittäjä - ei molemmat - on arvokasta oppia ainakin toisen tieteenalan perusteet.

Kehittäjät saattavat haluta oppia suunnittelua tai ainakin kehittää suunnittelutietojen perustan muutamasta syystä.

Ensinnäkin pienillä ryhmillä ei ehkä ole omistettua suunnittelijaa. Lisäksi on kehittäjiä, jotka haluavat puuttua projekteihin yksin, joilla ei ole varaa palkata suunnittelijaa (tai haluavat käyttää rahaa muualla). Oppiminen suunnittelemaan omia tuotteitaan, ainakin riittävän hyvin toimeentuloon a. Saakka suunnittelija palkkaaminen on korvaamaton resurssi.

Toinen suuri syy kehittäjille oppia muotoilu on, että he voivat työskennellä tehokkaammin suunnittelijoiden kanssa. Suunnittelijalle on uskomattoman turhauttavaa luovuttaa täysin suunniteltu tiedosto verkkosivustolle tai sovellukselle, jonka hän odottaa olevan pikselinsä täydellinen lopputuotteessa, vain huomatakseen, että heidän koodauksensa on muuttunut merkittävästi heidän suunnittelussaan.

Jos kehittäjät eivät ymmärrä suunnittelun perusteita, he voivat jättää huomiotta pienet yksityiskohdat, jotka tekevät käyttöliittymästä erityisen käyttäjäystävällisen ja tahattomasti sabotoivat projektin käyttökokemusta. Kun suunnittelijat lähettävät takaisin paljon korjauksia, se voi rasittaa kehittäjän ja suunnittelijan suhdetta, puhumattakaan projektin valmistumisen hidastamisesta.

Parantaakseen tieteidenvälisten tiimien välisiä suhteita ja ryhmätyötä kehittäjät tekisivät itselleen palveluksen oppimalla näkemään malleja 'suunnittelijan silmin' sen sijaan, että katselisivat niitä pelkästään kehitysnäkökulmasta - taitojen hallitseminen parantaa heidän projektejaan huomattavasti.

Suunnittelu-ajattelutapa

Suunnittelua oppivat kehittäjät keskittyvät liian usein liikaa mieltymyksiään haluamiensa ja haluamiensa mallien esteettisyyteen pikemminkin kuin kyseisiä malleja tukeviin periaatteisiin. He näkevät asioita, kuten painikkeen värin ja koon, tietyn fontin tai reunojen käytön tapaan ymmärtämättä syitä takana noita valintoja.

He alkavat ruiskuttaa maalia seinille ja sisustaa tilaa ymmärtämättä koristamiensa tilojen tarkoitusta (tai edes varmistamalla, että putkityöt ja sähkötyöt ovat valmiit).

On tärkeää ymmärtää ja kunnioittaa periaatteita, joiden takia suunnittelijat tekevät päätöksensä. Jokainen uusi suunnittelija tarvitsee vankan käsityksen periaatteista ja teorioista, jotka muodostavat hyvän suunnittelun - esimerkiksi Gestaltin periaatteet ja perus visuaalinen hierarkia - ennen kuin he vain sukeltaa sisään ja alkavat ruiskuttaa maalia kaikkialle.

Se on kuitenkin yleistä myös uusille suunnittelijat riippumatta siitä, onko heillä taustaa kehityksessä vai ei, juuttua teoriassa. He viettävät niin paljon aikaa oppimiseen ja miettimiseen asioihin, joita he eivät koskaan saa soveltamaan oppimaansa.

Sekä suunnittelijat että kehittäjät ovat yleensä perfektionisteja. Mutta työnnä malleja ennen kuin ne ovat täydellinen (koska niitä ei todennäköisesti tule koskaan olemaan) on tärkeä prosessi. Varsinkin uusien suunnittelijoiden on ylitettävä epävarmuutensa, laitettava työhönsä ja opittava saamastaan ​​palautteesta.

Yksi parhaista tavoista todella oppia muotoilu on yrittää luo mallit uudelleen muista. Erottelu siitä, mikä toimii ja mikä ei, ja sen selvittäminen, miksi tietty malli on houkutteleva, on yksi arvokkaimmista taidoista, joita uusi suunnittelija tai kehittäjä voi oppia. Ainutlaatuisen pyörityksen asettaminen olemassa olevalle mallille on yleistä teollisuudessa (todistaa Kikkau ”Rebound” -ominaisuus).

Suunnittelu selaimessa

Monet suunnittelijat vastustavat suunnittelua suoraan selaimessa , koska se yleensä tarkoittaa, että heidän on oltava mukavia kirjoittaa ainakin HTML- ja CSS-peruskoodi. Tämä on tarkka syy, miksi se sopii usein kehittäjille suunnittelun aloittamiseen - he ovat jo mukavia kirjoittaa koodia.

On työkaluja, jotka voivat auttaa suunnittelussa selaimessa ja voivat helpottaa sekä suunnittelijoiden että kehittäjien elämää. Yksinkertainen selaimen laajennukset ovat käytettävissä kaikkeen väripalettien valinnasta toisen sivuston CSS: n ja HTML-koodin tutkimiseen.

On myös monimutkaisempia työkaluja, kuten Figma jotka toimivat kuin täysin varusteltu suunnittelutyökalu suoraan selaimessa. Figma antaa suunnittelijoiden mahdollisuuden tehdä yhteistyötä, lähettää resursseja sidosryhmille (ja jopa antaa heidän tehdä muutoksia mallien sisältöön ja kopioihin) ja antaa kehittäjille pääsyn todellisiin malleihin reaaliajassa. Se on loistava vaihtoehto kehittäjäsuunnittelijoille, jotka haluavat luoda malleja ja suunnittelujärjestelmiä, jotka voivat laajentua ajan mittaan.

Verkkovirta on toinen vaihtoehto suunnittelussa selaimessa, jota kehittäjät saattavat rakastaa. Vaikka suunnittelurajapinta on visuaalinen, viety koodi on puhdas, semanttinen CSS ja HTML, jota kehittäjät arvostavat (kaikki visuaaliset suunnittelutyökalut eivät vie puhdasta koodia). Webflow sisältää suunnittelun ja asettelun työkalut, sisäänrakennetut CMS- ja verkkokauppatyökalut sekä isännöintivaihtoehdot.

Värien, typografian ja asettelun käyttö

Ennen kuin sukeltaa värien, typografian ja asettelun visuaalisiin periaatteisiin, on tärkeää puhua peruskäytettävyydestä. Kaikkein esteettisesti miellyttävin muotoilu maailmassa on hyödytön ellei sitä voida käyttää.

Yksi tärkeimmistä käytettävyysperiaatteista on ajatus johdonmukaisuudesta tai ennustettavuudesta. Suunnitelmien tulisi olla riittävän ennakoitavissa, jotta käyttäjät pystyvät ymmärtämään intuitiivisesti niiden käyttöä. Esimerkiksi napsautettavien linkkien sininen alleviivattu teksti, täydelliset ja hyvin merkittyt navigointivalikot jne. Elementtien, typografian ja värimallien välisen etäisyyden tulisi myös olla johdonmukainen.

Muita käytettävyysperiaatteita, jotka tulisi ottaa huomioon jokaisessa suunnitteluprojektissa, ovat esimerkiksi virheiden ehkäisy (ja informatiiviset virheilmoitukset, kun virheitä esiintyy), tuttu kieli (käytä ihmisten käyttämää kieltä pikemminkin kuin 'söpö' tai luova vaihtoehto, joka saattaa olla epäselvä ), joustavuus ja tehokkuus sekä helposti saatavilla oleva apu. Nielsen Norman Groupilla on ylimääräisiä käytettävyysheuristiikka se on myös pidettävä mielessä.

Käytettävyysarvioinnit tulisi suorittaa koko suunnittelu- ja kehitysprosessin ajan sen varmistamiseksi, että tuote toimii suunnittelu- ja kehitystiimin tarkoituksella ja että käyttäjiä ei sekoiteta. Heuristiset arvioinnit sisältää vertailun ennalta määritetyistä suunnitteluperiaatteista, joita tuotteen tulisi noudattaa, varsinaisen tuotteen kanssa nähdäkseen missä poikkeamat tapahtuvat (ja sitten korjata nämä poikkeamat).

Kun käytettävyys on ymmärretty perusteellisesti käsillä olevan tuotteen suhteen, suunnittelija-kehittäjät voivat siirtyä suunnittelun visuaalisempiin näkökohtiin.

Perusväriteoria

Väriteoria on yksi visuaalisen suunnittelun monimutkaisimmista näkökohdista. Sävyjen vaihtaminen hieman voi siirtää värin visuaalisen vaikutelman ja emotionaalisen vaikutuksen kokonaan. Se on yksi syy monille suunnittelijat jotka ovat olleet alalla vuosia, kamppailevat edelleen värien kanssa.

Vaikka monista kirjoista on kirjoitettu väriteoria , on joitain hyvin perusperiaatteita, jotka suunnittelija-kehittäjät voivat oppia aloittamaan. Yhdistä ne mihin tahansa käytettävissä olevaan värisuunnittelutyökaluun, ja miellyttävä väripaletti voidaan luoda melko helposti.

Ensinnäkin ero lämpimien, viileiden ja neutraalien värien välillä. Lämmin värejä ovat punainen, oranssi ja keltainen. Lämpimät värit ovat yleensä eloisia ja energisiä. Viileitä värejä ovat vihreä, sininen ja violetti. Nämä värit ovat yleensä rauhallisempia ja rentouttavampia.

Neutraaleja ovat valkoinen, musta, harmaa, ruskea ja beige. Valkoisen, mustan tai harmaan lisääminen lämpimiin tai viileisiin väreihin muuttaa niiden merkitystä ja vaikutusta. Valkoinen vaalentaa värejä ja tekee niiden vaikutuksesta yleensä vähemmän voimakkaan tai positiivisemman (esimerkiksi purppuraa pidetään salaperäisenä, kuninkaallisena värinä, kun taas lila liittyy usein kevään ja onnellisuuden kanssa). Harmaa mykistää värit ja voi vähentää niiden vaikutusta. Musta tummentaa värejä ja voi tehdä niistä näyttävän konservatiivisemmilta (ota huomioon värin erilaiset vaikutukset, kuten kirkkaan sininen tai laivastonsininen).

Kun suunnittelijalla on perustiedot värin merkityksestä, hän voi käyttää esimerkiksi työkaluja Jäähdyttimet , Suunnittele siemenet tai Colormind keksimään lopullinen, koordinoitu paletti suunnittelulleen.

HSL Color -toiminnon käyttäminen

Kun suunnittelija ajattelee verkkovärejä, he ajattelevat usein heksadesimaaliarvoina. Vaikka tästä on tullut alan standardi verkkovärien suhteen, kehittäjät saattavat huomata, että HSL-väriarvojen kanssa työskenteleminen on järkevämpää.

Useimmille ihmisille (mukaan lukien suunnittelijat) heksarvoilla ei näennäisesti ole korrelaatiota toisiinsa. Kaksi väriä, jotka näyttävät hyvin samanlaisilta, saattavat olla täysin erilaiset heksadesimaaliarvot. Esimerkiksi # 68B4D4 ja # 92C8E0 ovat melko samanlaisia ​​sinisiä sävyjä (toinen on yksinkertaisesti hieman kirkkaampi ja vaaleampi kuin toinen), mutta niiden heksadesimaaliarvoilla ei ole selvää korrelaatiota.

Niiden HSL-arvot osoittavat kuitenkin, kuinka läheisesti ne ovat yhteydessä toisiinsa: # 68B4D4: stä tulee HSL (198, 58%, 62%) ja # 92C8E0: sta tulee HSL (198, 56%, 73%). Sarjan ensimmäinen numero (tässä tapauksessa 198) osoittaa tietyn sävyn. Toinen luku on kylläisyyden prosenttiosuus (kuinka kirkas tai eloisa väri on). Kolmas luku on värin vaaleuden (tai lisätyn valkoisen) prosenttiosuus.

Koska väriarvojen väliset korrelaatiot näkyvät niin helposti HSL: n ja heksan kanssa, kehittäjät huomaavat usein, että värien käsittely koodilla HSL: n kanssa on huomattavasti helpompaa.

Typografian periaatteet

Typografia on toinen alue, joka voi kokea jopa kokeneita suunnittelijoita. Mutta kuten väriteoria, siellä on hyviä työkaluja, jotka voivat auttaa.

Typografinen hierarkia on yksi ensimmäisistä asioista, jotka suunnittelijan ja kehittäjän tulisi oppia. Suunnittelun eri tyyppisten elementtien välinen suhde on elintärkeä, jotta muotoilu olisi helpompi käyttää.

Ainakin suunnittelussa tulee olla typografisen hierarkian kolme tasoa: otsikot, tekstitykset ja tekstifontit. Otsikon tulisi olla visuaalisesti näkyvin, tekstitykset tulevat seuraavaksi ja sitten tekstin fontti, jonka pitäisi olla hyvin luettavissa.

Monet uudet suunnittelijat keskittyvät hierarkian luomisessa liikaa kirjasinkokoon eivätkä riittävästi kirjasimeen tyyli . Joskus sen sijaan, että tekisit merkittävästi suuremman otsikon kuin alaotsikko, otsikko voitaisiin tehdä lihavoiduksi tai isoksi, kun taas alaotsikko jätetään otsikkotapauksessa ja normaalipainossa. Väriä voidaan käyttää myös erottamaan tekstitykset ja otsikot sekä kyseiset elementit ja tekstit.

Eri fonttien yhdistäminen voi myös hämmentää monia suunnittelijoita, ja silti se on yleinen tapa luoda visuaalinen hierarkia. Ne sisältävät täydentävien kirjasinten valitsemisen (vastakohdat houkuttelevat usein, mutta jossain määrin, kuinka hyvin fontit yhdistyvät, on määritettävä ajan myötä hiotun suoliston tunteen perusteella), sopivien fonttien valitseminen (älä käytä Comic Sansia oikeudellisessa asiakirjassa, esimerkiksi Esimerkki tai näyttötyyppi kirjasintyypille, joka ei ole luettavissa pienemmissä kooissa) ja kontrastin luominen kirjasinten välille (älä käytä kahta hyvin samankaltaista).

Toinen yksinkertainen tapa yhdistää kirjasimia on valita fontit suurista kirjasinperheistä. Siellä on jopa perheitä, jotka sisältävät näyttö-, serif- ja sans serif -versioita, jotka toimivat hyvin yhdessä (kuten rouva Eaves ja Mr Eaves, Fedra tai Museo ja Museo Sans). Tämä voi olla helpoin tapa aloittaa todella kokeilu kirjasinten yhdistelmällä, koska ne on suunniteltu näyttämään hyvältä yhdessä.

Kun työskentelet suurempien typografisten hierarkioiden kanssa (kuten lisäämällä H1, H2, H3, H4 jne.), On tärkeää noudattaa jonkinlaista syytä typografisessa mittakaavassa. Fibonacci-sekvenssi on yksi mahdollinen asteikko aluksi, vaikka on olemassa muita vakiintuneita typografiset asteikot .

Yksi yleinen asteikko, jota käytetään sekä typografiassa (ja yleensä suunnittelussa), koostuu 4, 8, 16, 24, 36, 48, 72, 108 jne. Nämä luvut voidaan yhdistää eri tavoin luomaan miellyttävän visuaalinen muotoilu. mittasuhteet (esimerkiksi 24 pikselin kirjasin yhdistettynä 36 pikselin viivan korkeuteen).

Asettelun perusperiaatteet

Verkon alusta lähtien on olemassa tiettyjä asettelumalleja, jotka ovat tulleet ”standardeiksi”. Esimerkkejä ovat päänavigointi ylhäällä, vasemmalla tai oikealla sivupalkilla, jossa on lisätietoja tai navigointivaihtoehtoja, ja lopputilan vievä rungon sisältö.

Vaikka tästä perusasettelusta on selkeitä poikkeamia (ei yläosassa olevaa navigointia, ei sivupalkkia, kahta sivupalkkia jne.), Tämä on usein melko turvallinen veto uutta ulkoasua luotaessa. Poikkeus tästä perusmallista tulisi tehdä vain tarkoituksella, erityisesti uusien ja kokemattomien suunnittelijoiden-kehittäjien toimesta.

Luodaan muotoilu, joka on ennustettavissa - tämä tarkoittaa yleensä johdonmukainen - tekee paljon tuotteen käytettävyyden puolesta. Poikkeaminen siitä, mitä käyttäjä odottaa näkevänsä tuotetta käyttäessään, tulisi tehdä vain, kun käytettävyysvoitto on suurempi kuin menetys.

On parasta olla käyttämättä 72 pikselin paksua sinistä otsikkoa yhdellä sivulla ja sitten 36 pikselin punaista otsikkoa toisella samantyyppiselle sisällölle - koska asettelun yhtenäisyys on avainasemassa. Vastaavasti väli (täyte) otsikon ja tekstin välillä, joka on 36 pikseliä yhdessä osiossa ja sitten 32 pikseliä toisessa, luo visuaalista epäjohdonmukaisuutta. Vaikka ihminen ei välttämättä ymmärrä heti, miksi ero raukeaa, hän tuntee sen.

Kuten edellä mainitussa typografisessa mittakaavassa, elementtien välinen etäisyys 4, 8, 16, 24, 36, 48, 72 tai 108 pikseliä luo visuaalisesti miellyttävän suunnittelun. Se on hyvä käyttää tarpeeksi tilaa elementtien välillä, anna heille tilaa hengittää; uudemmat suunnittelijat välttävät usein tyhjää tilaa ja voivat päätyä kuvioihin, jotka näyttävät sekavilta ja ylivoimaisilta.

Jotkut saattavat kysyä, miksi asteikko on sijoitettu siten kuin se on. Miksi kahden ensimmäisen numeron välillä on vain 4 pikselin ero, mutta kahden viimeisen välillä on 36 pikselin ero? Syy on yksinkertainen: pienissä mittakaavoissa 4 pikselin lisäys on helposti tunnistettavissa (8 pikseliä on kaksi kertaa suurempi kuin 4, mikä voidaan helposti havaita). Suuremmilla numeroilla 72 ja 76 kuvapisteen välistä eroa ei kuitenkaan ole helppo nähdä. Suuremmat erot ovat helpommin havaittavissa koon kasvaessa.

Yhtenäinen etäisyys on yksi syy siihen, että verkkoon perustuvat lähestymistavat suunnittelulle ovat tulleet niin suosituiksi. Aloittamalla ruudukosta (yleensä 12-, 16- tai 24-sarakkeet) saadaan suunnittelijat toimintakehys, joka pitää kaiken yhtenäisenä. Pylväiden väliset sisäänrakennetut vesikourut auttavat myös varmistamaan, että eri muotoiluelementeillä ja niiden sisällöllä on hengitystilaa.

Johtopäätös

Suunnittelijoiden ja kehittäjien olisi keskityttävä laajentamaan taitojaan jatkaakseen uraansa. Aika, jonka kehittäjät viettävät suunnittelun perusperiaatteiden oppimiseen, säästävät tulevaisuudessa aikaa, kun he työskentelevät suunnittelijoiden kanssa tai luovat omia tuotteitaan.

Suunnittelu perusperiaatteiden - käytettävyysperiaatteiden, väriteorian, typografian, asettelun ja käyttöliittymän - ymmärtäminen tekee kehittäjistä myös parempia kehitystä . Kun he näkevät, miksi suunnittelijat tekevät valintansa, kehittäjät voivat työskennellä paremmin suunnittelijoiden kanssa luodakseen todella tähtituotteita.

• • •

Lue lisää ApeeScape Design Blogista:

• Suunnittelun periaatteet ja niiden merkitys
• Kuinka paljon koodausta suunnittelijoiden tulisi tietää?
• Mahdollisuuksien spektri: Siirry käyttöliittymän värioppaaseen
• Paranna käyttökokemustasi näiden onnistuneen vuorovaikutussuunnittelun periaatteiden avulla
• Suunnittelusäätiöt - opas visuaaliseen hierarkiaan (infografiikan kanssa)

Perustietojen ymmärtäminen

Mikä on suunnittelun periaatteiden tarkoitus?

Suunnittelun periaatteet voidaan ajatella parhaiksi käytänteiksi sellaisen suunnittelun luomisessa, joka on käyttäjäystävällinen, tarjoaa erinomaisen käyttökokemuksen ja toimii suunnitellusti. Suunnittelijoille ja kehittäjille on tärkeää ymmärtää ainakin suunnittelun perusperiaatteet.

Kuinka kehittäjä voi parantaa?

Yksi parhaista tavoista, joilla kehittäjät voivat parantaa uraansa, on uusien taitojen hallinta. Tähän voi sisältyä esimerkiksi uusien ohjelmointikielten tai kehitysmenetelmien oppiminen sekä vierekkäisten taitojen, kuten suunnittelun, oppiminen.

Mitä HSL tarkoittaa?

Väriteoriassa HSL tarkoittaa 'sävy, kylläisyys, vaaleus'. Sävy viittaa tiettyyn väriin, kylläisyys on kuinka kirkas se on, ja vaaleus on kuinka vaalea tai tumma se on. HSL-värikoodit on helppo ymmärtää, ja siksi niitä on helpompi käsitellä koodin kautta kuin muut väriarvot (kuten heksadesimaaliarvot).

Mikä tekee hyvästä kehittäjästä?

Hyvät kehittäjät kehittävät ja laajentavat jatkuvasti taitojaan. He pysyvät ajan tasalla tietyillä erikoisaloillaan parhaista käytännöistä ja ymmärtävät vierekkäiset tieteenalat, kuten verkkosivujen suunnittelu ja tietoarkkitehtuuri. He myös pakottavat itseään parantamaan ja haastamaan olemassa olevaa taitojaan.

Miksi verkkosivujen suunnittelu on niin tärkeää?

Verkkosivujen suunnittelu on tärkeää, koska se lisää sivuston toimivuutta ja yleistä käyttökokemusta, kun se tehdään hyvin. Hyvä muotoilu on elintärkeää verkkosivuston tai muun digitaalisen tuotteen yleiskäsitykselle. Ilman sitä käyttäjien säilyttäminen on vaikeaa riippumatta siitä, kuinka hyvin tuote toimii toisin.