Izrada sustava web dizajna iz sustava dizajniranja aplikacija

Studija slučaja složenosti izgradnje novog novog dizajnerskog sustava koji je izgrađen na vrhu postojećeg dizajnerskog sustava aplikacija.

Radim u Tinku, internetskoj usluzi koja pruža najbolji način za povezivanje s bankama diljem Europe i brzu izgradnju pametnih financijskih usluga. Naš API pružamo velikim bankama poput ABN Amro, Klarna, SEB, SBAB i još mnogo toga.

Tink se također povezuje s novim prevarama fintech kompanija poput Zmarta i Bofink (prvi hipotekarni robo-savjetnik) koji koriste Tinkovu API platformu. Objavljujemo velika ažuriranja naše PFM (Personal Finance Management) aplikacije, kao što je Dark Mode o kojoj sam nedavno pisao na Medium. To je užurban raspored s puno novih zanimljivih događaja iz tjedna u tjedan. (I lijepo je što se širi vinovom lozom, poput Wireda, koji je Tink naslovio kao jedan od najtoplijih startupa u cijeloj Europi.)

Tink je u travnju objavio otvorenu platformu API-ja za programere. To omogućuje programerima pristup financijskim podacima više od 300 banaka u jednom API-ju, nakon što krajnji korisnik da svoj pristanak za pristup tim podacima. Platforma za razvojne programere programerima će brže i lakše eksperimentirati i lansirati nove i inovativne proizvode okrenute kupcima. Nekoliko je programera radilo na ovoj značajki, gdje smo je ažurirali i učinili je prilagodljivom - sada također ispunjava uvjete za radnu površinu.

Tok provjere autentičnosti za povezivanje računa s korisnicima

Tink je stekao poziciju posljednjih godina zahvaljujući PFM aplikaciji koja je preuzeta više od pola milijuna puta. Brendiranje je postavljeno, više od logotipa i ukupnih boja, Tink je kao softverska tvrtka razvio jasan i definiran dizajnerski jezik u cijeloj aplikaciji. Sustav dizajna je robustan i čini Tinka… Tink.

Ne-detaljni snimak sustava dizajna za trenutnu aplikaciju (iOS i Android)

Otvaranje API-ja za programere također je otvorilo spektar dizajna Tink: potreban nam je sustav web dizajna za izradu responzivnih stranica. Do sada nije postojao sustav za web dizajn na kojem bi se mogli osloniti, a dizajnerskom sustavu za aplikaciju nedostajalo je stilova za veće dizajne radne površine kao što su portal za dokumentaciju ili složena nadzorna ploča.

Izvedbeni dizajn s trenutnim sustavom dizajna aplikacija izgleda ovako:

Dizajn aplikacija

Problemi s pretvaranjem dizajna aplikacija u složen dizajn nadzorne ploče radne površine

Izgleda lijepo, ali kao što je spomenuto, nije komad torte za korištenje potpuno istog dizajnerskog sustava od okruženja aplikacija do ove nove nadzorne ploče radne površine.

Evo nekih problema:

# 1 Velike sjene

Iako velike sjene izgledaju dobro kad se na malom uređaju vidi samo nekoliko dijelova sadržaja, primjenjujući to na većem zaslonu poput radne površine, on se zgusne i raširi.

Puno sjena čini ga zgusnutim i preteškim

# 2 Previše #ffffff

Kad znatno smanjite sjene, uređaj s velikim zaslonom (2440 piksela velik) s tek bijelom pozadinom izgleda blag, a sadržaj poput kartica miješa se sa van i oduzima im fokus. Primjena svijetle pozadine dodaje potreban kontrast da bi važan sadržaj bio "pop".

Samo bijela boja može otežati razlikovanje komponenata jedna od druge

# 3 Uređaji koji nisu iznad miša oslanjaju se na boju više od stanja lebdjenja

Kad nemate pokazivač miša, poput mobilnog telefona, morate mnogo jasnije odvojiti koji je gumb ili kartica odabran, dok je na radnoj površini prirodno samo pomaknuti miš da biste razumjeli (istovremeno označavajući sa bojama i fontovima, ali ne previše boja pozadine, više obojeni tekst i / ili podvlači).

Pogledajte niži regulator na prvoj slici triju zaslona mobilnih uređaja, veliko bojanje boje pozadine za odabranu karticu (ovdje; "Svakodnevno") jasno pokazuje na kojoj se kartici nalazi. Ako biste to učinili na većem ekranu (ogromnoj radnoj površini), svi bi ti navigacijski elementi uzeli previše hijerarhije od drugog sadržaja, kao što su kartice, zašto oni na stolnim uređajima moraju imati umanjeni učinak da bi se uravnotežile.

Teške pozadinske boje na komponentama na kojima se može kliknuti uzimaju veliku pozornost na velikom stolnom uređaju. Koristite s oprezom.

# 4 Nedostaje puno dizajna i komponenti

Na mobilnom uređaju nećete imati lebdenje. To je ogromna količina rada i dizajnerskog razmišljanja koje treba ugraditi u svaku potrebnu komponentu.

Također nećete imati velike tablice optimizirane za radnu površinu i obrnuto. Stvaranje dobrog stola na mobilnom uređaju obično zahtijeva još jedan krug dizajnerskih ugađanja. Isto tako, na kraju neće uvijek ispasti kao stol (možda harmonike i sl.)

Puno novih komponenti, stanja (poput lebdenja) i mreža za stvaranje

# 5 Imate puno više prostora za disanje

Bijeli prostor jedan je dio dizajnerskog sustava. Čvrsto i usko držanje jedan je oblik, dok razmaknuće daje drugi izgled. Kad ste u nekoj aplikaciji, imate samo toliko mjesta za disanje i korištenje, dok na radnoj površini možete to raširiti i tj. Imati više margina unutar kartica. Ova će promjena u cjelini promijeniti izgled i dojam.

Na radnoj površini ima puno više prostora

# 6 Preopterećenost informacijama

Sažetak pet navedenih problema može se sažeti u jedan jedini problem: kada ste na mobilnom uređaju, imate samo toliko prostora, pa ni previše ne možete stati, dok na radnoj površini imate toliko prostora za igranje s.

Dodavanje previše sadržaja s previše hijerarhije (s podebljanjem slova, bojama, teškim slikama itd.) Učiniće ga neredom na radnoj površini. Dakle, svuda je potrebno smanjiti dijelove na sjeci: sjene će postati manje, kartice neće imati tešku pozadinu, već obojenu podvlaku da ukažu na to koja je aktivna umjesto toga, i tako dalje.

Dva kratka praktična savjeta za početak

# 1 Postavljanje nekoliko osnovnih komponenti

Započnite s donošenjem komponenti iz vašeg trenutnog dizajnerskog sustava ili izradite nekoliko za koje smatrate da će ih često koristiti i dajte ih sa sobom kad god kreirate novu stranicu (bilo da ćete ih koristiti ili ne) da biste ih imali u sa strane da provjerite upotrebljavate li isti izgled i izgled.

# 2 Stvorite najvažnije varijable

Kad projekt dođe do naprednih programera, praktično je definirati nekoliko varijabli, poput sjene.

(Varijabla je nešto što će prednji korisnici koristiti iznova i iznova, poput simbola u vašem dizajnerskom softveru koji nazivaju jedinstvenim imenom, poput $ shadow-shadow ili $ shadow-small)

Stvorio sam sjene, zaobljene uglove i podloge / rubove, jer je to nešto što se često ponovo koristi. Prednost da ih stvorite kao varijable u vašem dizajnerskom sustavu i prednjim specifikacijama je da ćete to moći lako promijeniti na jednom mjestu i to će se promijeniti svugdje.

Stvaranje temelja varijabli olakšava prilagodbu niz cestu.

To je živa stvar

Radio sam u tiskari. Tiskanje stotina knjiga bilo je nervozan zadatak. Kad shvatite da ste negdje napisali pogrešku ili zabrljate prijelom linije, mogli biste se samo nadati da ga upravitelj nije uočio (morali biste nadgledati ponovni ispis i sagorjeti mnogo novca). Srećom, kao što svi znamo, web je moguće uređivati ​​usput i stvari je lako mijenjati kako idete. Provodim onoliko vremena revidirajući stvari koje sam dizajnirao kada su u proizvodnji, koliko ja trošim vrijeme na njihovo stvaranje.

Programeri često shvaćaju korist X ili Y umjesto vašeg rješenja što je nevjerojatno dobro. Često kada sam kodiram sebe shvatim kako se stvari ne zbrajaju, u usporedbi s tim da sjedite i dizajnirate komponentu ovdje i tamo. Nevjerojatno je korisno ako programeri imaju vremena za unos podataka i to mora biti u rasporedu prilikom izrade novog sustava.

Hodaš dugom

Pretvaranje sustava iz dizajna aplikacija u web dizajn je veliki projekt. Često ćete sjediti i podešavati, mijenjati, ponavljati i premišljati odluke. Ali u velikoj shemi stvari, to je radostan proces koji na kraju ima najveću nagradu. Kada završite sav posao i prizemljite zemlju, vaše je bogatstvo: implementacija sustava web dizajna učinit će to lakim (u usporedbi barem) novim zadacima i izgradnjom novih stvari.

Na sljedećem

U tvrtki Tink stalno nadograđujemo i nadograđujemo sustav web dizajna. Ovdje smo trenutačno, ali tko zna koji zadatak donosi sutra i promjene dizajna koje su potrebne.

Pregled primijenjenog sustava dizajna. Jedan za centar za razvojne programere (nije prijavljen) i drugi za nadzornu ploču (kada ste prijavljeni) tako da je lako razlikovati gdje se nalazite između ta dva dijela proizvoda.