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.
Tanulj másoktól!
Kész megoldásokból is van galéria, inspirációnak érdemes végigkattintgatni: http://dzineblog.com/
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
23 komment
2010.05.10. 11:01. írta:
hírbehozó
Dunder Krisztián · http://www.twitter.com/k_dunder 2010.05.10. 11:15:20
dunder.hu/tesztek/weboldaltervezes-wireframe-segitsegevel/
Dixi World · http://www.dixiworld.com 2010.05.10. 11:47:18
ern0 · http://linkbroker.hu/ 2010.05.10. 11:47:18
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.
lacam · http://copyblog.blog.hu/2012/02/07/valentin_napi_sms_mester 2010.05.10. 11:48:52
Ne hidd azt, hogy ha csináltál már egyszerv egy buildet, értesz a webdesignhoz is:)
gabesas 2010.05.10. 12:15:03
Nakhchivan 2010.05.10. 12:31:31
sydo 2010.05.10. 12:47:37
a_laco 2010.05.10. 13:58:48
- 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.
Binsz (törölt) 2010.05.10. 14:23:50
Nakhchivan 2010.05.10. 14:30:06
robi · http://playground.blog.hu 2010.05.10. 14:48:35
developer.apple.com/mac/library/documentation/userexperience/conceptual/applehiguidelines/XHIGIntro/XHIGIntro.html
library.gnome.org/devel/hig-book/stable/
www.openusability.org/
web: Jakob Nielsen, Keve fenti írása, és még rengeteg hely (Smashing Magazine, A List Apart)
mobile: developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
dev.opera.com/articles/accessibility/
robi · http://playground.blog.hu 2010.05.10. 14:52:43
developer.android.com/guide/practices/ui_guidelines/index.html
vadvi · http://fym.hu 2010.05.10. 15:41:05
Veroncsi · http://azuniverzum.blogspot.com 2010.05.10. 15:42:19
idezetekgyujtemenye.blogspot.com ; atechnikacsodai.blogspot.com
gored · http://seologik.blog.hu 2010.05.10. 17:33:47
www.lukew.com/ff/
chek 2010.05.10. 18:13:02
StavrosMenace 2010.05.10. 18:54:46
gabesas 2010.05.11. 11:36:50
Zslot 2010.05.11. 14:37:59
sajt · http://sajt.tumblr.com 2010.05.11. 15:46:47
gitáros 2010.05.12. 01:41:26
Viszont olyat nem nehéz, ami mindenki szerint szar...
Bővíz László - JUEX · http://juex.blog.hu 2010.05.12. 11:21:34
A felhasználó számára kell mindenekelőtt tervezni, utána jöhet a GUI design.
Nagy Guszti · http://nagygusztav.hu 2010.05.14. 08:20:08
dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/
Különösen a dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ és következő leckék.