Sometimes I read interesting articles about UI usability, design patterns, and i try implement some best of them for my working projects. My inspiration to write this post come from slideshow public on HN : Designing better user interfaces and beauty glyphicons
I create frontend in ExtJs 4 (mvc) and REST API backend in LithiumPHP 5.3 (mvc + aop) + WebSocket Server in Java, so my natural goal is: detailing old ExtJs CRUD to clean and user friendly interface.
Design patterns UI i use in this project:
- clean minimalistic icons
- 3 action button’s `add`, `edit`, `remove`
- `add` and `edit` action open new pupup window with form, `edit` action can execute in two way by `dblClick` on record or select record and click `edit` button
- window icon and submit action is the same as action button’s
- submit button is more exprosure by add 1px solid black border
- submit button are on right side, i think is natural movement of arm
- cancel button is witchout icon and black border
- reset button gone away
I wanted to colorize submit button on green collor but ExtJs 4 (google) dont allow any simple method to do that i found many solutions using sass templating and ovveride button class, i dont understand, create new template for one button !? I stop on border and add icon to submit action.