Webdizájnerek tanácsai dizájnoló fejlesztőknek (1. rész)

A múltkori post kommentjeiben felmerült, hogy jó lenne összeszedni pár olyan alapvető dolgot, tippet, tanácsot, ami segítheti a dizájnolásra kényszerülő fejlesztő munkáját. Megkerestem pár webdizájnert, hogy adjanak tanácsot azoknak, akik bár nem webdizájnerként dolgoznak, de az élet hozhatja úgy, hogy mégiscsak hozzá kell nyúlniuk a felhasználói felületekhez, vagy magához a dizájnhoz.

Elsőként Keve, az Inda szolgáltatások korábbi arculattervezője és vezető dizájnere, a The Cook (Csajok és Pasik) társalapítója írta össze tanácsait: 

 
Tervezd meg alaposan!
Az UI tervezés fontosságát nem kell hangsúlyozni. Rajzolj sokat, nézz meg különböző megoldásokat, próbáld minél jobban a felhasználó bőrébe képzelni magad. Nagyon sok jó anyag van wireframe témában (hasznos eszköz, javaslat, esettanulmány) a neten http://wireframes.tumblr.com/  Sok fejlesztő esik abba a hibába, hogy túl sok funkciót, featurát akar beleszuszakolni a felületbe, ettől zavaros lesz. Törekedj egyszerűségre!
 
Tanulj másoktól!
Kész megoldásokból is van galéria, inspirációnak érdemes végigkattintgatni: http://dzineblog.com/2010/03/best-user-interface-design-resources-the-round-up.html
Ha elakadsz egy felületnél, nézd meg mások hogyan oldották meg, sok ötletet adhat.

Ne ess át a ló túlsó oldalára!
Egy alkalmazást nem kell túlrajzolni. Nem kell sok szín, csillivili ikonrengeteg, hatféle font és még sorolhatnánk, az önuralom remek dolog.
 
Színek
Tudom, hogy nehéz elhinni, de a színek tényleg fontosak. A neten sok szinpaletta van, ha egymáshoz passzoló színeket szeretnél www.kuler.com, de más oldalak színeiből is kiindulhatsz. A megfelelő színek alkalmazása későbbiekben a márkakommunikációban is fontos hangsúlyt kaphat, fordíts rá elegendő figyelmet.
 
Ikonok
Az ikonokra is igaz, hogy a kevesebb több. Ha sok ikont kell használni, válassz vmi egyszerű, sematikus fajtát. Ha csak pár kell, akkor lehet részletesebb, de én például kifejeztten nem szeretem ha egy alkalmazásban csudarészletes ikonok vannak. Óvakodjunk, hogy mi magunk ikonokat rajzoljunk, az "egyedi" ikonok sokat ronthatnank az összhatáson.
 
Méretek, ergonómia
Az olvashatóság nagyon fontos, a kis betűkkel lehet ugyan helyet spórolni, de ha kényelmetlen olvasni, akkor nem szívesen használják az emberek. Az aprócska form elemek, a hangyabetűk, eltalálhatatlan linkek engem mindig felbosszantanak. Ha érintőképernyőre tervezel, akkor pedig az emberi ujj méretét nem tudod átugrani, legyen akkora minden(gombok, csúszkák, menük), hogy kényelmes legyen használni, inkább nagyobb, mint kicsi.
 
Igényesség
Amit csinálsz azt csináld jól. Rosszul kivágott képek, pixeles ikonok, homályos betűk leronthatják ismét csak a felhasználói élményt. Az igénytelen kinézet sok embert elriaszthat.
 
Logó
Egy jó logót megcsinálni komplex munka, szakértelmet kíván. Próbálj meg minél egyszerűbb megoldást választani, vmi tipóra kihegyezve, de ha komoly szándékaid vannak, akkor egy minőségi logóra hamar szükség lesz.

 

Címkék: dev ui geek dizájn usability how to webdizájn gui
2010.05.10. 11:01. írta: hírbehozó

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Pár hete írtam a wireframe tervezésről és egy nagyon jó szoftvert is bemutattam röviden, ha valakit érdekel, itt elolvashatja:
dunder.hu/tesztek/weboldaltervezes-wireframe-segitsegevel/
Zseniális post(-sorozat ötlet)! trn lesz ?
Lopj!

Intranetes alkalmazáshoz free ikonok tökéletesen megfelelnek, publikus site demó változatához meg akár lopottak is, úgyis le lesznek cserélve.

Még valami: a szürke is egy szín.
+1 tipp
Ne hidd azt, hogy ha csináltál már egyszerv egy buildet, értesz a webdesignhoz is:)
@ern0: igazából eddig ezvolt a legjobban használható tanács.Köszi!
Jó ez, csak sovány és általános, és webcentrikus. Valami konkrét esettanulmány kellene, hogy egy láthatóan amatőr app mitől az és mitől lesz jobb. Vannak ilyen típushibák. Legelső a nulla margó. Nagy kontraszt, fehér alapon fekete betű. Sok szín, rikító színek (s=1), nem harmonizáló színek (colorschemer.com, colourlovers.com), sokféle betűméret, szerencsére sokféle betűtípus alapban nincs. Az alkalmazás neve fantázianév, jobb a banális, legegyszerűbb név amiből tudható, hogy mi is ez. Screenshot, alapképernyő ugyanez. Desktop gondolkodás mobil app esetén, attól, hogy vannak szokásos menüpontok, képernyők még nem kell beletenni. Stb. Legálisan ingyens logo meg van bőven (smashingmagazine.com).
box.mepholio.com/ malware-t akar telepíteni első látogatásnál, szedjétek ki a linket szerintem..
konklúziók számomra:

- nem kell foradalmian új kezelőfelület, windowson nevelkedett userek pontosan úgy szeretnék használni a formokat ahogy azokat Isten megteremtette.

- a szépség szubjektív, ma a lekerekített sarkok divatosak, 5 év múlva mondjuk a ferde feliratok lesznek, vagy retro hullámban a villogó bannerek, és?

- btw egy alkalmazásnál még mindig az a legfontosabb, hogy tökéletesen azt csinálja, amit a felhasználók elvárnak tőle. inkább legyen használható, de "csúnya" mint használhatatlan de szép...

Számomra az az ideális együttműködés, ha a grafikusok is alap szinten képben vannak a html/css/js mostani "nehézségeivel" és a fejlesztők is ismerik a grafikai tervezés alapjait.
Kövezzetek meg, de nagy hiba azt gondolni, hogy a webdizájner = a GUI tervezővel. Elég kevés webes arccal találkoztam, aki kellő ergonómiai és grafikai tudással bír ahhoz, hogy valami (például egy mobil alkalmazás) ne csak esztétikus, hanem jól használható is legyen.
@Binsz: Persze, a graphic és a user experience design az két határos, de külön szakterület.
@sydo: igaz, de addig nincs gond amig nem klikkelunk a hamis viruskeresos oldalon egy linkre sem, csak bezarjuk (a figyelmeztetes ellenere) a lapot.
Jó kis poszt! Szerintem talán a színek megválasztása talán a legfontosabb...
idezetekgyujtemenye.blogspot.com ; atechnikacsodai.blogspot.com
Luke Wroblewski blogját ajánlanám mint kötelező olvasmány UI témában.

www.lukew.com/ff/
Jókat írt Keve bácsi. Bár szerintem a legfontosabb, hogy jó legyen az ötlet, ha azzal nincs baj szerintem nagyon sok jó designert lehet találni, aki akár ingyen megcsinálja az interface-t.
pont az említett oldalak túldizájnoltak, általában igaz amiket ír, de az ördög a részletekben van, az ipad korában a klasszikus web design már a múlt
kuler link el van irva, nem inkabb ez? kuler.adobe.com
Én is mondok egy jó tanácsot. Olyan dizájnt úgy se tudsz csinálni, ami mindenkinek tetszik.
@sajt:
Viszont olyat nem nehéz, ami mindenki szerint szar...
@Veroncsi: Egyáltalán nem a színek megválasztása a legfontosabb, hanem a jó használhatóság. Gyenge dizájnnal és jól használható folyamatokkal sokkal jobb lesz a végeredmény, mint fordítva.

A felhasználó számára kell mindenekelőtt tervezni, utána jöhet a GUI design.