Kuinka ja miksi suunnittelin värivaihtoehdon ja esteettömyystyökalun

Kehittäjänä värien valitseminen malleilleni on aina ollut yksi vaikeimmista tehtävistä. Autan minua käyttämään yleensä työkaluja, kuten Coolors, SASS Color Generator ja tätä värikontrastia.

Minun prosessini näytti olevan tältä:

  1. Luo paletti Coolorsilla
  2. Valitse vaihtoehdot jokaiselle värille SASS Color Generatorilla
  3. Yhdistä variantit yhteen tausta / etualan yhdistelmiksi.
  4. Tarkista värikontrastin avulla, että parit ovat käytettävissä
  5. Lisää valitsemani värit valitsemaani suunnittelutyökaluun (Figma).
  6. Säädä värejä ja toista vaiheesta 2.

Joten mikä ongelma oli?

Vanha prosessi sisälsi paljon edestakaisin eri sovellusten välillä. En voinut säätää värejäni ja nähdä vaikutusta esteettömyyteen reaaliajassa. Sen sijaan minun piti kopioida / liittää HEX-koodit yhdestä sovelluksesta toiseen. Sitten kun olin valmis aloittamaan kehityksen, minun piti luoda muuttujat manuaalisesti SASS / CSS: ssä ja kopioida arvot uudestaan.

Ja ratkaisu?

Luo työkalu, jossa voisin tehdä (melkein) kaiken yhdessä paikassa. Tavoitteenani oli siirtyä kohti tällaista prosessia:

  1. Luo paletti Coolorsilla
  2. Valitse vaihtoehtoja, yhdistä värejä ja tee säätöjä yhdellä sovelluksella.
  3. Lisää saadut värit valitsemaani suunnittelutyökaluun.

Halusin myös, että sovellus pystyi viemään värini koodiksi, jotta minulla olisi hyvä lähtökohta kehitykseen.

Alkuperäinen todiste konseptista

Halusin saada jotain toimimaan mahdollisimman nopeasti, jotta voisin aloittaa sen testaamisen. Tätä varten aloitin prototyypin luomisen.

Käytä koteloita

Ensimmäinen vaihe prototyypin kokoamisessa oli määritellä käyttötapaukset, jotka ajaisivat sitä.

  1. Käyttäjänä haluan luoda muunnelmia perusväreilleni.

Halusin pystyä avaamaan sovelluksen, lisäämään perusvärini, valitsemaan vaihtoehdot ja viemään ne sitten takaisin suunnittelutyökaluuni uudelleen. Yksinkertainen?

2. Käyttäjänä haluan tarkistaa, onko taustan / etualan väripari käytettävissä.

Annetuista perusväreistä tai niiden muunnoksista halusin pystyä tarkistamaan, olivatko kaksi väriä käytettävissä yhdistettynä toisiinsa.

3. Käyttäjänä minun pitäisi pystyä näkemään perusvärin vaihtamisen vaikutus saavutettavuuteen.

Halusin saada reaaliaikaista palautetta valitsemistani väripareista joka kerta, kun tein säätöjä perusväreihini.

(Erittäin karkea) työversio

Määriteltyjen käyttötapojen kanssa aloitin sitten prototyypin suunnittelun. Olen keksinyt väripaletin, suunnitellut rajoitetun joukon komponentteja ja pääsin lopulta ratkaisuun, jossa oli kolme "tilaa" tai sivua, jolloin käyttäjän oli vaihdettava niiden välillä tehtäviensä suorittamiseksi.

Katsotaanpa sen sijaan, että kuvailisimme sitä edelleen.

Kuten yllä olevasta kuvasta näet, prototyyppi saavutti kaiken, mitä halusin alkuperäisten käyttötapausten perusteella ... Eräänlainen.

Napsauta tätä, jos haluat kokeilla itse prototyyppiä Netlify-käyttöönoton esikatselujen taian ansiosta.

Alkuperäisen suunnittelun hyvät ja huonot puolet

En ole koskaan tarkoittanut ensimmäisen prototyypin olevan muuta kuin väliportaita, ja voit itse nähdä, että se oli melko karkea ja puutteellinen.

Seuraavaa versiota varten aloitin katsomalla, mistä pidin prototyypistä.

Variant-tila

Olin varsin tyytyväinen siihen, kuinka prototyypin muodostava osa osoittautui. Oli melko helppoa valita väri ja saada luettelo muunnelmista. Myös välilehdillä toimiva lähestymistapa toimi melko hyvin lisäämällä useita perusvärejä.

Mahdollisuus nähdä muutokset esteettömyyteen värin vaihtamisen jälkeen

Kuten yllä olevasta lyhyestä esittelystä näet, HEX-koodeja ei tarvinnut kopioida / liittää sovellusten välillä. Voisin nyt vaihtaa yhden väreistäni ja nähdä, kuinka se vaikutti värien esteettömyyteen todella nopeasti.

Sitten aloin valita asioita, joista en pidä ja joita oli parannettava .

Vuorovaikutukset eivät olleet ilmeisiä

Kotisivulle saapumisen perusteella ei ollut heti selvää, miten valitset vaihtoehtoja ja tarkistatko esteettömyyttä. Voit todennäköisesti selvittää, että sinun oli napsautettava laatat lopulta, mutta se oli todella kömpelö.

Tilat olivat hämmentäviä

Alkuperäisissä malleissa voit lisätä vain pareja palettinäkymästä ja voit lisätä / poistaa muunnelmia vain muunnelmanäkymästä. Siihen liittyi paljon vaihtamista näyttöjen välillä, ja huomasin olevani turhautunut siitä, kuinka paljon työtä sovellus sai minut tekemään. Tämä johtaa minut seuraavaan kohtaan.

Liian paljon napsautuksia tarvittiin

Sinun täytyy napsauttaa lisätäksesi variantin. Sitten sinun on napsautettava siirtyäksesi palettinäkymään. Sitten sinun täytyy napsauttaa useita kertoja luoda pari. Sitten sinun on napsautettava lisää nähdäksesi juuri lisäämäsi pari. Kuten edellä mainitsin, koko juttu oli melko kömpelö ja tämä oli luultavasti prototyypin pahin osa ja jotain, jonka tiesin tarvitsevani muuttaa.

Näytöllä ei ollut tarpeeksi tietoa kerralla

Mitä enemmän käytin sitä, sitä enemmän aloin inhoaa luomani ”mode” -konseptia. Luulen, että sovelluksen inspiroima alkuperäinen prosessi vaikutti minuun, ja suunnittelin näytöt siiloihin yhtenäisen kokemuksen sijaan. Prototyypin käyttämisen jälkeen päätin, että minun on siirryttävä pois ”mode” -konseptista sellaiseen, joka ihannetapauksessa voidaan tehdä yhdellä sivulla.

Toinen yritys

Otin prototyypistä oppimani oppitunnit ja ryhdyin luomaan paremman version sovelluksesta.

Jotta voidaan vähentää vuorovaikutusten tarvitaan, vähentää epäselvyyttä vuorovaikutusta ja lisätä saatavilla olevan tiedon määrää käyttäjälle kerralla, päätin siirtyä vedä ja pudota perustuu käyttöliittymän, jossa käyttäjä voisi vetää ruudut ympärille lisätäksesi palettiin tai luomaan saavutettavuustarkistuksia.

Vetotavoite näytetään aina, ja näin vältetään tarvetta vaihtaa näyttöjen välillä.

Katsotaanpa, mitä keksin.

Pääset sovelluksen nykyiseen versioon täältä.

Seuraavat vaiheet

Sovellus on edelleen hyvin alkuvaiheessa, ja vaikka toinen versio on paljon lähempänä ajatustani, minulla on vielä parannuksia.

Tuo koodista

Paletin viemisen lisäksi aion lisätä kyvyn lukea alkuperäiset perusvärit koodista, joka sisältää muuttujia (aluksi SASS- ja CSS-muuttujat)

Vie useampaan muotoon

Tällä hetkellä voit viedä vain SASSia. Aion lisätä tulevaisuudessa tukea CSS-muuttujille ja muille muodoille.

Integroi suunnittelutyökalujen kanssa

Vie koodiin on hienoa, mutta olisi vielä parempi, jos voisin viedä paletin ja tuoda sen sitten kerroksena tai jaettuna tyylinä suunnittelutyökalussa, kuten Figma tai Sketch.

Tarkenna käyttöliittymää

Tunnustetaan tosiasia, että se ei ole maailman parhaiten näyttävä sovellus. Aion muokata käyttöliittymän komponentteja sovelluksen visuaalisen parantamiseksi.

Palaute ja vikailmoitukset

Tämä puhuu puolestaan. Voin parantaa sovellusta vain niiden käyttäjien panoksella. Tätä varten aion lisätä palautelomakkeen tulevaisuudessa.

Palaute

Palautteesta puhuen ... Kirjoitin tämän artikkelin kahdesta syystä. Ensimmäisenä olen käynyt läpi prosessin, jonka kävin läpi päästäkseni nykyiseen suunnitteluun siinä toivossa, että voit oppia siitä.

Toinen syy on, että halusin esitellä työkalun kehitys- ja suunnitteluyhteisölle, koska uskon, että siitä voi olla hyötyä monille ihmisille, ja myös kerätä palautetta siitä sen nykytilassa.

Joten, jos sinulla on ajatuksia suunnittelusta, toiminnallisuudesta, prosessista, jonka kävin läpi työkalun luomisessa, tai jotain muuta, haluaisin kuulla sen!

Linkit

Prototyyppi

Nykyinen versio

Komponenttikirjasto