A blog sharing resources and inspiration for designers

  • Jul 10 / 2013
  • 2
learn_to_code
Designer Tips, Web Design

Designer Tip – Learn to code

learn_code

The way digital designers work is constantly evolving, photoshop is not enough anymore. Gone are the days where we can just design a beautiful psd file and hand it over to the developers to build, there are so many things which need to be considered and tested when working on a digital project that it requires designers to think beyond the flat image.

One thing that has always helped me understand how the web works is to have a basic understanding of code. My knowledge isn’t too advanced, I can do simple html/CSS and used to be able to get some mad particle animations going using actionscript, but it’s always helped me when designing to know how that element will be built. At the very least I think designers should know how to create a basic html site, in my current role I have to work with html to create prototypes, emails and updating things like preview sites for clients.

Tip – When browsing the internet try right clicking on any element and selecting ‘inspect element’, this will bring up the code for the site which you can play around with. This will help you understand how everything is put together.

You might have also heard the of term ‘designing in browser’ lately, which basically suggests that photoshop many not even be essential for layouts anymore. The designer will create their design elements in html and work out how to set the positions and styles themselves before passing onto the developers. There are good arguments for and against this method which I’ll touch on in another post, but I do know this is already happening in the industry which is evidence that you need to learn how to do some basic code.

Everyone has their own way of learning so I’ll leave it up to you how to go about doing so. I personally learn by doing and jumping in the deep end, I try and code my personal sites and when I run into a problem I just google it. There are many online tutorials and websites dedicated to teaching others, there are even online courses you can do. If you want somewhere to start, try googling introduction to html, there are so many resources out there to pick from.

  • Jun 14 / 2013
  • 2
library
Designer Tips

Designer Tip – Create an image library

library

This is my first tip for anyone who is a designer or works in the creative field, make an image library.

As you develop your design process you’ll come to realise how important the initial research/mood-boarding stage is. You’ll spend hours and sometimes days searching the net for references that could help influence your final design or even just help the client understand where you picture the design going. Instead of heading to google, dribbble, designspiration or wherever you look for reference, why don’t you start off on your local computer. If you have a library of inspirational images/photo/videos/typography/whatever it will save you a heap of time and let you spend more time crafting the work.

I have broken my library down into categories to make finding what I’m looking for even easier, here is my structure:

folder structure

 

I use adobe bridge to browse through my images, I like how you can customise the background colour and change the thumbnail sizes etc. This is my personal preference so feel free to use any other image browser out there which may suit your better.

Adobe Bridge

Having my own image library has been a vital part in improving my design skills, the more reference you can find the better. So if you find something that you like, SAVE IT!

I’ll be posting an article about where you can find nice designs soon, this should help you build up your library in the future.