Or: A different approach in creating visual designs for web and mobile applications.
Nowadays, as websites are turning more and more towards behavior driven applications, a polished, overall screen design of every page makes – in our opinion – no sense at all.
Can’t we spent the time more effective and work much more on the concept/behavior site of the app (which means working on interaction design, flow and user experience with rough scribbles and sketches or hifi wire-frames) than spend weeks with the pixel-pushing-dance?
This does not mean we think visual design is not necessary and important. Rather visual design is also part of the UX and it is quite important but we want to keep it agile and slim.
As we both are fans of modular design and we found out that we have the same approach to do a visual design for a client we came up with our so-called GUI libraries.
A GUI library could work as a replacement of a full overall- screendesign (requires mostly full flow of the site as wire-frames or scribbles)
or as an addition (requires some additional fast scribbles of important sites or states)
We are convinced that creating a GUI library has lots of advantages:
- you have to think about what elements are used
- you really got a good overview of your elements
- thats why you will keep consistency and ‘one’ visual language throughout the whole design pocess, even if you’ll work on it one or two years later or someone else will
- it’s expandable and modular thus it’s perfect for agile projects
- it’s easier for the developers and fellow designers and serves as a reference (YES! It’s all about design documentation!)
- you avoid stressful, nerve-racking photoshop ‘layer-terror’ , font-searching, color picking, etc…etc.
- And last but not least – it’s much faster than designing all the ‘important’ pages or every single damn page!
If there are no wire-frames or no scribbles like the site should behave or if something is unclear on a certain point we every time can come up with additional quick and fast scribbles or sketches of the page / unclear state.
Mostly we are working on GUI Libraries as an addition to one or two visual ‘Master Layouts’, – which are full visual Screendesigns.
First, we come up with a so called visual master layout:
This is the layout we are presenting the client for the first time to receive feedback and here we define the basic and global site layout, like header, footer, site types and the grid, typography and color scheme.
Within the master layout you also have to think about and consider the following things:
- Will there be pages with a one and/or two or three column layout?
- What are the sizes of the columns in the different layout types?
Therefore we define a grid and make a visual comp with the grid visible (for development) to show off the usage of the grid and the different column widths. So the developer or fellow designer has not to look at layer ’666′ deeply hidden inside the photoshop comp, he will get the information at one glance out of the document.It’s easy to use!
Once this master layout is approved by the client we begin to create our GUI Library which consists of one or two large photoshop documents which consist ALL the elements which will be used on the site/app like e.g:
- a color spec with hexadecimal definitions (very useful to keep consistency and harmony if the color scheme will be extended in the future)
- a typographic sample with all kinds of headlines and paragraph text and links
- list elements, List header, even and odd list rows..etc
- tables
- all Icons
- buttons (in all states: default/hover)
- primary call to actions and secondary actions
- thumbnail and Image sizes
- default Avatars
- forms
- errormessages, warnings and notifications
- etc
Et voilá, so you’ll get step by step to your design documentation!
So summarized in single steps, our whole workflow is the following:
- in best -case: wire-frames and flow of site
- doing a master layout with basic color definitions, basic typography definitions, definition of grid and used columns, depends on the site if we make one or two full visual screen designs
- client approval
- kicking off the GUI /Module Libraries
- optional exporting all the Grahic stuff for the development team
We have to say this workflow works quite well for us and our clients.
How is your workflow? We are curious to learn from fellow designers and or developers! Which kind of design documentation do you use?
