DFT-Hungária
www.dft.hu · újratervezésTábla 00a
Mielőtt rajzolnánk

Mesterek

Tizenkét forrás, mindegyikből egyetlen elv. Ezeket visszük át a DFT húsz koncepciójába.

01Apple.com termékoldalak
30 év
1000+
Jót és
jobban

Egy képernyő, egy gondolat.

A görgetés történet: minden szakasz egy állítást bizonyít, nagy betűvel és magyarázó mozgással. Nálunk egy szakasz egy döntést segít.

01 Felívelő ív07 Számokban17 Tipó19 Mozgásban
02Apple Human Interface Guidelines

Világosság, tisztelet, mélység.

A felület hátrébb lép, a tartalom előre. A hierarchiát rétegek mutatják, nem díszítés.

02 Zöld rétegek09 Üveg és fény15 Mesterfok
03SF Symbols
Aa
Aa
Aa

Az ikon a betű rokona.

Az ikon a szöveg súlyával és méretével együtt nő, a mozgása jelent valamit. Minden készlet egy vonalvastagságra és a betű magasságára épül.

Mind a 20 ikonkészlet11 Egy vonal20 Rendszer
04Stripe.com
Jogosultság → Terv → Pályázat → Megvalósítás

A mozgás magyaráz.

Egy összetett ajánlat akkor érthető, ha látjuk működni. A pályázati út élő ábra, nem felsorolás.

04 Térkép05 Bento12 Pályázat-iránytű16 Út a jobb felé
05Linear.com

Visszafogottság és pontosság.

Kevés szín, egy fényforrás, szigorú tipográfia. A minőséget a részletek viszik: igazítás, ritmus, számok.

15 Mesterfok17 Tipó20 Rendszer
06Nielsen Norman Group · 5 mp
0 s5 s
✓ Ki ez?✓ Mit ad nekem?✓ Hova kattintok?

Öt másodperc: mit kapok, hova kattintok.

Minden hős kiállja: ki a DFT, mit ad Önnek, mi az első lépés. Az eredmény minden koncepciótáblán ott lesz.

Mind a 20 koncepció
07NN/g · szkennelés, információs szag

Az emberek szkennelnek, nem olvasnak.

Rétegtorta-szerkezet: erős alcím, alatta rövid szöveg. Az 1 397 oldalon minden menüpont megjósolja, mi van mögötte.

06 Magazin13 Naptár14 VideótárKözös oldaltérkép
08Steve Krug: Don't Make Me Think
Tovább Jogosultságvizsgálatot kérek ↗

Ne kelljen gondolkodni.

Minden gomb kimondja, mi történik. Ha valamin el kell gondolkodni, azt átírjuk.

Copy deck03 Kert12 Pályázat-iránytű16 Út a jobb felé
09GOV.UK Design System
Milyen szervezetet képvisel?
VállalkozásÖnkormányzatCivil
1 / 3 kérdés

Egy kérdés egyszerre.

A jogosultságvizsgálaton bárki végigér: egyszerű nyelv, egy kérdés oldalanként, a hibánál kék „!” és érthető javítás.

03 Kert12 Pályázat-iránytű16 Út a jobb felé
10Disney 12 elve, UI-léptékben
0 ms900 mscubic-bezier(.15,.85,.35,1)

Nekifutás, lendület, megérkezés.

A mozgásnak súlya van: kis előkészítés, követő mozdulat, megnyugvás. 200–900 ms, és semmi sem ismétlődik végtelenül.

10 Papírkivágás18 Agyag19 Mozgásban
11Susan Kare

Kevés vonal, sok jelentés.

Az ikon ismerős metafora a lehető legkevesebb elemből. Ha magyarázni kell, nem jó ikon.

03 Kert11 Egy vonal18 Agyag
12Otl Aicher

Egy konstrukció, egy hang.

Minden készlet egy rácsra, egy vonalra, egy lekerekítésre épül, a DFT-négyzetből és az ívből. 24 px rács, 2 px vonal.

04 Térkép11 Egy vonal20 Rendszer

Öt szabály, amit mind a húsz megtart

1Egy szakasz, egy gondolat.
2A gomb kimondja, mi történik.
3Egy kérdés egyszerre.
4A mozgás magyaráz, aztán megáll.
5Egy rács, egy vonal, egy hang.