Pete Wood from Le Grove approached us just before Christmas to design and develop a modern clean looking site which was robust enough to deal with many visitors using different devices and platforms.

We therefore choose to create a responsive design which would provide this flexibility. As a result the site renders very well on modern web browsers and also on devices such as the iPhone and iPad.

Please visit the blog here. So far the majority of feedback has been positive but let us know what you think by commenting below.

1. Create cleaner more structured files

Keeping design documents tidy can sometimes be a nightmare especially when you are rushing for a deadline or you have too many projects on the go at once. In 2012 we should all make an effort to ensure our files are clear and structured.

2. Don’t be afraid to try something new

Sometimes it’s easy for a designer to reuse an icon or a particular style they are comfortable with. This year when you have a new project try something different.

3. Don’t follow trends for the sake of it

It’s easy to get caught up with the latest trends or styles in design. As designers we should make more of an effort to create unique experiences that are right for each individual project we work on.

4. Build relationships outside of social networking

While Twitter and Linked In are great tools for marketing our services we shouldn’t forget that they will never replace real human interaction. This year we should all attend as many meetups and conferences as we can to widen our social circle in the real world.

5. Make time for family and friends

It’s easy to get caught up in projects especially when you are passionate about your work. But never forget that the people around you in your life need time also.

I for one am looking forward to what 2012 will bring and hope it’s a year to remember for both the web and the world.

Merry Christmas! In the spirit of things here is this weeks freebie to download. A very chilled snow globe. Enjoy!

Same rules for usage apply as before but if you’ve forgotten you can use this freebie anywhere you like but if you could do the following that would be very much appreciated

1. Follow us on twitter if you haven’t already
2. Retweet our blog posts if you have a spare minute
3. Tell all your friends about us. Share our freebies with them even, we don’t mind.
4. Share the love – show us how you used our freebies in your designs

Download Now

Don’t forget to subscribe to the blog for the latest information regarding future freebies.

Today we’ll be creating a wonderful warming hot chocolate icon. This tutorial is for intermediate users of Illustrator and Photoshop Let’s get started:

STEP 1.

Open Illustrator and create the following shape with the colour shown.

STEP 2.

Go to Effect -> 3D -> Revolve and apply the following settings:

STEP 3.

Create another shape like this.

STEP 4.

Go to Effect -> 3D -> Extrude & Bevel and apply the following settings:

STEP 5.

Arrange the layers so the handle is beneath the cup in the layer order and move it towards the cup like the image below:

STEP 6.

Copy the cup and handle. Open Photoshop and create a new document at 700×700 pixels.
Paste the cup as a smart object and scale it to 155%

STEP 7.

Create a new layer behind the cup, fill it black. Open up the layer style options and choose gradient overlay. Apply the following options with the following colours – #9b8472 #97624b #170501

STEP 8.

Select the rectangle tool to create a flat surface for the cup to rest on. Make the colour of the shape #000000, choose multiply as the layer blend mode and change the transparency to 33%. You should now have the following:

STEP 9.

Select the cup and apply the following layer style.

STEP 10.

Create a new layer behind the cup but in front of the background select the brush tool and colour of #39200f. Begin to create a shadow behind the cup until you have something like this:

STEP 11.

Add some subtle shading.

STEP 12.

Add a wooden texture for the table, use the perspective transform if need be. Im using wood floor found here:

http://gnrbishop.deviantart.com/art/Wood-floor-86913934

I have also added a gradient overlay to change the colour.

STEP 13.

Next download the following shot for free here: http://www.sxc.hu/browse.phtml?f=download&id=507780

Copy part of the chocolate froth from the top and start to selectively erase it till you get the following:

STEP 14.

Finally add some steam using the brush tool and erase tool and we’re done.

You can also download the file here. Hope you enjoyed the tutorial!

1. Ultranoir

2. Citroen DS5

3. The Expressive Web

4. SF Dok – 360° Langstrasse Zürich

5. Sony Tablet S

6. Moods of Norway

7. Bjork

8. Bounty Bev

9. Visions of Beauties

10. The Göteborg Opera

11. Why interactive Showreel

12. Smokey Bones

13. Digital Hands

14. Portrait Bell

15. Html5 Readiness

16. Bullitt Agency

17. Discovery Zone

18. Nike Better World

19. Design made in Germany

20. New Zealand International Arts Festival

But does responsive design make sense for business?
The short answer is: it all depends on your audience, time and budget.

Long term vs. short term

If you are thinking long-term and building a site from the ground up then there is probably no better way currently to future proof your website and ensure it works on a variety of devices. However if you are looking for a quick fix to an existing design then you are probably best sticking with what you know and implementing responsive practices in the future.

Cheap solutions vs. the right solution

Many business’s are on a tight budget and require something just to tick the boxes. While spending less money now may seem like a safe approach, the financial costs in future for not having thought about a responsive solution can be high. In some cases a designer or developer may have to rethink your site from scratch anyway.

Know your audience

Using analytics to determine screen sizes and the devices being used to browse your website can provide insights into whether it is time to consider a responsive design. In particular if there is a wide range of results then the overall user experience and customer satisfaction would no doubt benefit from such a solution.

Conclusion: Is responsive design right for you?

From my perspective the positives certainly outweigh the negatives when looking at the overall user experience and creating an adaptable website which works no matter what device you use. Also if you are looking to future proof your website it is certainly a step in the right direction and may save potential future costs.

What are your thoughts on responsive design?

Leave a comment below I would love to hear your opinions.

A subject which was discussed at various design conferences this year was that we need to start focusing on content rather than design elements. Ribbons and buttons are all very nice but at the end of the day content rules how we ultimately design a site and can make informed descisions about structure and layout.

2. Mobile first

This was a major trend this year and will no doubt continue into 2012. The rise of mobile optimised sites and increase in mobile devices shows the trend towards consuming content on a variety of platforms is here to stay for a long time.

3. Responsive design approaches

When designing structure and layout it is clear we must start thinking about a responsive approach. Responsive design certainly caught on in 2011 and will continue to grow in 2012. Some great frameworks with responsive in mind have already been released such as HTML5 boilerplate

4. Clean Design

Designers in 2012 will focus on cleaner designs and more use of white space. This relates directly to the first trend in this list where the content is put on show rather than the design elements.

5. Web GL

On the flipside new technologies such as Web GL will make for more inspiring online experiences which are produced solely to engage their audience through rich 3d graphics without the need for plugins. There are some great examples here

6. No Flash – HTML5 to dominate

For many agencies and designers Flash is still the defacto way to create rich interactive websites but this has already started changing with HTML5, CSS3 and jQuery beginning to take the lead. This trend is set to continue in 2012 and the number of websites using these technologies will only increase.

7. QR codes and Augmented Reality

Already in use in a lot of printed materials, QR codes will evolve and be the standard way we interface between the real world and the internet.

8.Better Social Integration

Social media continues to explode with Facebook and Twitter still at the top, however the integration between these platforms and our websites is currently still limited. Share buttons and feeds being the most common way for our audience to bridge the gap. In 2012 we may see better integration for campaigns particularly with Twitters new brand pages.

9. Interfaces for real ‘web tv’

With constant rumors that Apple is working on a real television rather than a box, there may be the need for web designers to think on a bigger scale. No doubt services such as Youtube and iPlayer could offer a more optimised tv app than current incarnations.

10. Web typography matures

Finally services such as typekit and google webfonts have proved we no longer need to rely on graphics for rich typography. The number of typefaces and platforms will no doubt grow in 2012.

This weeks freebie with it being so near to Christmas are glitter baubles!

Same rules for usage apply as before but if you’ve forgotten you can use this freebie anywhere you like but if you could do the following that would be very much appreciated

1. Follow us on twitter if you haven’t already
2. Retweet our blog posts if you have a spare minute
3. Tell all your friends about us. Share our freebies with them even, we don’t mind.
4. Share the love – show us how you used our freebies in your designs

Download Now

Don’t forget to subscribe to the blog for the latest information regarding future freebies.

Imagine the scenario:

You’re a freelancer on your way to meet a client but for whatever reason you left the presentation you were going to give on a train, taxi etc. you’re stuck, what do you do?

Most would rely on a service such as dropbox where all their files are backed up, but you forgot to backup the file, so what now?

This is where iCloud the service launched by Apple last week is going to save designers and businesses in general a lot of hassle. Not only is the service seamlessly integrated with your Mac, iPhone and iPad but it’s free as well.

iCloud Support

At this moment in time there aren’t many apps which support iCloud as it has just been launched but over the next few months we can expect many will be updated. Here are a couple of major ones:

iWork – Pages, Keynote and Numbers

Save all your documents such as invoices, presentations etc on iCloud and never have to worry about forgetting them again.

Unfortunately at this moment in time iWork on the Mac does not automaticly sync with iCloud. Documents need to be downloaded manually from iCloud.com and then once you save the file you drag it over the browser window to replace it. However a future software update will no doubt add this functionality directly to the app.

2do Task Manager

The fantastic task manager app 2do now has iCloud support built in so you can sync between devices without the need for third party services such as toodledo.

Goodreader

Enables you to save PDFs, html websites, video and audio. Goodreader was recently updated this week to include iCloud support. However it appears the iPhone version is still awaiting an update.

Sketchbook Pro

Being able to create artwork on an iPad, upload it to the cloud and edit it later on a desktop would make life easier for many artists. Sketchbook Pro on iPad now gives artists the option to upload artwork straight to iCloud rather than storing it on your iPad. Hopefully Autodesk will add future support for their desktop app.

The Future

Although iCloud currently has a few minor issues, mainly with desktop integration, the future possibilities for designers and developers are extremely exciting. Imagine having your designs, mockups, and code automatically backed up on iCloud accessible from anywhere with a wifi connection on any of your devices. No more need to take an external hard drive or a USB key it’s already in the cloud for you to use whenever and wherever you are.

Hopefully developers will make full use of iCloud in all the amazing productivity and creative apps already on the app store such as Moodboard, and iMockups.

So in the last couple of months I have been exploring my new surroundings and taking lots of photos of anything remotely creative. As there is so much creative inspiration in this city it’s difficult to resist. This little collection I’ve accumulated had an ulterior motive however and that was to get me back into blogging.

So without further ado here are 20 creatively inspiring sights in London:

1. Diesel Further Reductions – Sale Display

2. Royal Opera House – Alternative Ballet Poster

3. Boutique Ice Cream Branding

4. B.HIVE Logo

5. Saleri Restaurant Ribbon Logo

6. Belgo Restaurant Metal Type

7. The Teahouse – ‘Grid’ Window

8. China Town – Photo Collage

9. Kitchen Italia Neon Signs

10. Periodic Table of M&Ms – M&M World

11. London Tea tray

12. Museum of Broken Relationships

13. Kidrobot Shop Window

14. Smoothie Sign

15. Life size Lego Ninjago

16. Everything But The Dress Shop Window

17. Giant Books & iPad – Apple Regent St.

18. Molton Brown – Pick Pack Go

19. Verve Bar Liquid Signage

20. London Westminster Skyline