Our web design resources to help you lead the way

Who said that the season of good will was over? To help you overcome the post Christmas hangover (where lack of gifts are always at an all time high), here at Kalexiko we’ve raided our creative vault in order to share with you a small selection of our most favourite resources from across the entire world wide web.


Over time we’ve managed to collect a wide range of these little gems which are always handy to draw inspiration from, so when we’re working through any brief we’ll always try to keep in mind what’s available and whether or not it could and should be implemented to help enhance the project’s end result.


Hopefully you’ll find these very handy indeed and hey, should you require something for your next project (but can’t seem to find what it is you’re actually looking for) save you pulling your hair out, why not give us a shout and we’ll see what we have in stock!


1. MB Gallery – Full screen jQuery background gallery

Ok, so a full screen background gallery may not set the world alight but should you have a particular product image or piece of work you wish to show off then this is most certainly the right tool for the job.

This flexible friend is a firm favourite of ours which allows you to quickly and easily create a full screen background slide show. Whatever your browser window size may be, the images will automatically adapt so they’ll always fit in the best manner possible. You can either decide to navigate your gallery via the keyboard or with a predefined control panel. MB gallery comes with a default fade in/out and scale transition which you can then further adapt with some jQuery jiggery pokery and if that wasn’t enough, why not look at pulling through images via your Flickr account!


We’d like to thank Matteo Biocchi for this diamond in the rough. So, what are you waiting for? Head over to his site and you’ll not only find this resource but also a further selection of interface and media elements to dribble over; drop down menu’s with flyout, scroll-able content, HTML 5 audio player and more!


2. Adobe Color – Colour theme picker

This bit of kit should definitely be part of everyone’s design toolbox. We know it’s been around for quite some time and one big drawback is that it’s flash based (come on adobe… sort this out pretty please), but to us this is still top dog whenever you wish to browse, create or share colour themes.

There are two main ways of searching for your perfect scheme. Option 1 is to search through the thousands of pre-chosen themes created by the Adobe Color community via a keyword search (so for example if you typed in ‘winter’ you’d hopefully receive a listing of cool blues, lilacs, creams, reds and any other schemes designers felt would fit) where you can then either rate it, add it to your favourites or export it as a swatch file to use in your Adobe Suite application.


Option 2 is to select a base colour and then depending on what avenue you wish to explore, choose its complimentary shades, analogous, monochromatic or compound colours. Once the results are in, if you feel it’s not quite working then you can adjust your base colour via the colour wheel where results update instantly!


There are plenty of other colour scheme applications out there like colourschemer, colour combos and colourlovers but the single main reason why we’d always choose Adobe Color one over the others is down to its tight integration with the Adobe Creative Suite applications.


3. Ux rave – Bookmarks, interfaces, interactions and more

Ux rave simply rocks. The amount of time you can spend sifting through this Aladdin’s cave of irresistible interfaces and interactions is astonishing… and believe me, it’s more than possible. Not only does this site house some valuable content, but as an added bonus its structure and design isn’t too shabby either.

Landing on the homepage you’ll see the site split into two main parts. The left section contains a simple navigation where you can browse content via keyword, device, development and more, with the right containing the juicy snippets of content. If you’re lucky enough to have a larger monitor, the site’s content panels will automatically slide into position which allows you to see more at once… a simple but effective use of a grid structure (which get’s a big thumbs up from us).


UX rave’s content is updated on a regular basis so it’s worth a visit at least once or twice a week or if you’re like me and want to know exactly when something new is added then their RSS link is another option to consider. By now I’ve hopefully done this site justice but as icing on the cake it’s only fair I mention a few of my favourites, so here goes:


3.1 Reasons why as a designer you should keep your PSD files nice and neat


3.2 An easy way to test clicks on your mobile app


3.3 Make interface screens come to life


4. jQuery Style – Showcasing the very best of jQuery

We all know that a great bit of jQuery goes a long way in making your site less static and more interactive. For quite some time i thought wouldn’t it be great if there was one single place that showcased all of the latest plugins, tutorials and more. With that said, may i introduce jQuery style.

Like UX rave I’ve lost many hours browsing through the plethora of jQuery greatness that this site offers. It’s refreshing to see everything from the much loved isotope to some of the newer kids on the block like dropkick.js and formalise.js sitting side by side under one roof where the possibilities really do seem endless. Over time we’ve found some great resources here which have helped cure a few headaches. I personally enjoy downloading my favourites and implementing them in some self initiated projects.


Of course you have to acknowledge the clever folk who actually build them in the first place. If it wasn’t for them the web would be a far more mundane place. Below are three of our favourites, but why not hop over there now and get something to suit your needs.


4.1 Convert a structure of static HTML elements into a highly customizeable turntable like area


4.2 A responsive jQuery carousel


4.3 A layout plugin similar to Masonry but with dynamic re-ordering


5. Browser support for CSS3 and HTML5

Cross browser compatibility has always proved to be a headache (yes, i’m talking about you IE).

You’ve had the design signed off by the client and it’s just been coded up nice and neatly… only when you come to test it across the main browsers, some elements aren’t being told the correct information. New technologies are making web development more exciting than ever, but how can you know which techniques are safe to use now and which should you provide as an alternative or just completely avoid altogether?


We’ve got a great team of developers here at Kalexiko, and even they will admit that there’s no shame in having a resource in mind as back-up should they not be able to solve the mystery themselves (by the way this happens only once in a blue moon).


There are a few places you could visit but two in particular are listed below:


Caniuse; ok, so the user experience could do with a bit of a polish but overall it’s a simple and effective way of seeing exactly what methods can be used in all the modern day browsers. Click on any of the technologies to see a table with a colour coded key telling you if your desired choice is fully supported, partially supported or just too new for now. A global usage support comes in handy too so you can decide just how many users would benefit from your chosen effect.


CSS3 Click Chart; as the title would suggest this is specifically for CSS3 methods only. Just click on any of the effects (either common or cutting edge) to view an explanation of what it does along with sample code, a live demonstration and which browsers currently support it. This site itself is pretty simple but does exactly what it says on the tin.


Well there you have it. The magic of Christmas may be over, outside may be wet and grey and the long new year is just beginning, but that shouldn’t reflect on your site! With these web design resources, your site will be alive and gripping.


So why not give them a go, try mixing them in with some of your projects this year, or even have a bash at creating your own. Either way, with these resources you will be leading the way in 2013.