We at thrusites are having dev meetings twice a month. This Friday it was my turn to talk about design and I have decided to share most of the presentation with you guys. My talk was a mixture of design standards and my own personal tweaks and hacks I use in every day work.
Workflow
Every-time I start a new project I follow the same steps. I start with sketches which are usually done on paper but not always. There are times when I only sketch in my mind. If you are designer your mind probably works the same way. I can draw the whole picture in my mind and use that as a basic for next process. The next step would be wire-framing. Wire-framing comes in several different ways and it is up to you how far you want to go. In same cases I wire-frame only the grey boxes, usually using lots of shades of gray to distinguish between navigation and header and so on. Sometimes I go even further and I build wire-frame with html and css and that is later used as core for your html markup. Another obvious step is Photoshop. I usually start with template file which has grid built in. Photoshop is the tool I master best but I don’t see any reason why you could not use Fireworks, Illustrator or even Gimp. I also prefer Photoshop because it suits the type of work I do. For example I use very often smooth gradients and tiny drop-shadows and Photoshop has great build it tools for such visual effects. I am not sure if you can actually create drop-shadow in Illustrator. I think the only way to do it is to duplicate the layer, fill it with single colour and position it off couple of pixels. But that will not give you the smooth transaction between the background colour and your object. Moving on from Photoshop into my favorite text editor Coda. I keep on looking at my Photoshop file and start building the HTML markup. From my experience I already know which visual effect will need some additional markup so I put it straight in. I always try to minimize the unnecessary markup so if I can use the natural html elements (such are unordered lists or headers) as CSS hooks I do that and I do not add additional DIVs. Once I have clean, nicely structured HTML in place I cut the Photoshop file into pieces I will use in my CSS phase. There is one thing work mentioning. I have only start doing this recently but it is a big helper. I name all background images with bg_ infront of the name, all icons start with ico_ and all images with img_, if the background image is used for header than the name will start with bg_title_. These are the name conventions we use in thrusites and I have quickly adopt them for all my future projects.
Layout
I have my photoshop templates with pre-build grid systems such are 960 or my custom one. Using grid for design process could be sometimes limiting but in most cases it helps and it helps a lot. There have been cases where I build my custom grid. For example in this version of my blog (3.0) I used the custom one. Many of my latest projects use 960 grid. Depending on project I either use 12 or 16 columns layout. But grid is not the only help I use in terms of layout. Golden rule know for hundreds years in all different industries is something which brings the natural looking proportions. I have used it on my upcoming project – Project Plus. The proportions between the main column and sidebar has been calculated using this ratio. Another useful layout trick has been borrowed from photography. It’s called rule of thirds. We never know what the screen size it’s going to be on user’s site but even then we can use this rule to position the most important elements into these approximate sweet spots.
Having your own design signature
Working with colours in design could be sometimes difficult and some people struggle witch choosing the “right” shade of colours. I found quite useful one of the build in pallets. It is called TOYO COLOR FINDER. It provides hundreds of very interesting shades of all colours. Obviously when it comes to combing colours that is a different story but this pallet can help you to choose nice shades of colours. Another very often used visual effect is gradient. After using gradients for couple of years I have realized I have found my style. Most of the time I build gradients following way. I chose interesting colour and I use it on both sides of gradient tool. Depending on the light effect I want to achieve I adjust one of the colours couple of pixels up or down. That makes the gradient very smooth and elegant. I also use drop-shadows in my designs quite often but again I found my own way using them. I always set the light coming from straight top (90%) and set the size and distance to 1 and after that I reduce the opacity depending on the content which sits bellow the object I am building the shadow on. I have also my own way how I create rounded corners. Most of the time I use 5px radius but in few cases I use 3,7 or 15. I can’t give you any scientific explanation for these but I found out that theses work best for me.
All these little tricks create your own design signature.
CSS
Organizing CSS files is very important in current development. Specially in pixel perfect and image heavy designs. If you are not careful it can easily become mass which is very very hard to manage. This is the way I organize my style sheets. I always use reset CSS. The one which has been done by yahoo guys and I link it from google repository so that way could be already cashed if user comes form the site which uses the same technique. In small sites as my first web app. READ Plus I define one general style sheet and one CSS file peer page or view. In bigger projects I go even deeper and I define more CSS files where each of them solves single problem. The advantage of frameworks such are Ruby on Rails is that is puts all your CSS file together and there is only one http request.. So these are the CSS files I might use: 960 for gird, boxes.css – file where I define rounded boxes used across the site, layout.css – file where the basic layout is set and of course the previous mentioned general.css – file where I define all basic rule for html elements such are headers, lists, paragraphs etc., reset.css and page specific css files. It pays of to be organized, specially in bigger projects even for the price that sometimes you might load CSS rule which is not used on the current page. There is no 100 percent right solution for this but I always chose the tidy way if I can.
Sprites
Sprites is something I have usually used in the past only for elements such are navigation or icons. I have seen that sites like Yahoo, Google and others use sprites for most of their visuals. The reason is simple. It minimize the amount of http requests and reduces the file size. As you could see in my project Read Plus I am using sprites quite heavily and helps the page loads faster. So I recommend it.
Testing front-end
When it comes to testing the front-end I use Yslow (Firefox extension). You can measure everything you need to. The size of the files, the amount of http requests, if your css and javascript files are placed in right places, if you are not using too many images, redirects etc ….
So this was a little view to my cookbook. We came from sketches to CSS development. I obviously have rules for back-end development & testing which I will share with you later. Specially learning Rails brings lots of good practices around development and testing.
Do you do things differently, better? Let me know I am always happy to learn new stuff.