A few days ago I attended the New Adventures in Web Design conference 2012 in Nottingham. This was my first conference so I didn’t really know what to expect or what I would get out of the experience. Therefore I’m not going to compare this experience to a previous conference or comment on what they could have done or should not have done as I am not aware of the usual conference status quo. Plus I think the team behind the conference did such a wonderful job and I really cannot fault them on any area.

Instead I’ve decided to write about what I took away from the conference in terms of inspiration and professional knowledge. There were 8 speakers at the conference so I thought that I should write about the main point that I took away from each talk. These are of course my own take away thoughts and not necessarily the focus of each talk – although generally speaking, that is the case.

1. Design-ish: Behind, beneath, and between the comps

Speaker: Dan Mall

To constantly evolve and re-think my design process and my interactions with clients and colleagues. How can I change my process to come to a better solution? How can I create an end product that not only meets the brief but meets the needs the client didn’t even know they (or their audience) had. And this isn’t necessarily to do with the artwork, or the code, or the CMS used; but could be in the Invisible Deliverables – things like grids, design briefs, flow concepts, animation concepts. To tinker with the process and to look beyond the obvious.

2. Going Beyond

Speaker: Naomi Atkinson

Generally as designers we suck at self-promotion and self-branding. We don’t understand the role of the client, and yet get frustrated with clients when they don’t fulfil their role correctly. We forget that good self-branding allows us to mold how the world sees us. By evolving and developing our logo, our tone of voice, our style, our writing, we can change how the world perceives us. This also gives us the power to change the world and do something good and worth while.

3. We Used to Build Forts

Speaker: Travis Schmeisser

Sometimes its good to relax, chill out and remember why we got into design in the first place, to go back to our creative roots. With the endless responsibilities and deadlines of client work and even life, we forget how we used to create for the love of it and because on some level, we needed to. As designers we need to loosen up and let the natural creative process occur. Use personal projects as a chance to experiment and make mistakes, and use this growth in our client work. Re-find our creative identity and create for the sake of creating.

4. The Mindful Designer

Speaker: Robbie Manson

To re-claim your most powerful tool – your brain. To allow a concept or thought to develop away from tools, such as the computer. To become a mature and mindful designer by using mindful thinking – that is, to allow for experimentations and happy accidents, and to let mistakes teach you how to make successes. It is only by experience that we can make informed decisions.

5. Break Everything

Speaker: Trent Walton

To be innovative, we need to break things. This is how we can truly understand how they work and therefore how we can push them to their limits, and of course, how we can make them better. We need to put aside the fear of experimentation and failure because there are lessons to be learnt in failing. And in each failing we come a step closer to success, to true innovation.

6. The Potential Impact of Design

Speaker: Cameron Koczon

Each of us has the ability to have an affect on the world around us, and even the world at large, to have an impact, to change things. That change doesn’t have to be big but we should do it while doing something that we love. Make this year count!

7. Your Brain on Creativity

Speaker: Denise Jacobs

The core of this message was that ‘All work and no play makes Jack a dull boy’. Basically that in order to reach our potential, to be creative, we need to have down-time. Time away from work, from technology, from stress. We need to play, to laugh, to take time to breathe so that we can reset our batteries and get the two sides of our brain to re-sync again. Because it is only when they are working together that we can be creative and can do ourselves justice. It is time to stop over-thinking and time to banish our inner critic and allow ourselves to reach our creative potential.

8. It Moves

Speaker: Frank Chimero

A designer is anyone who wants to make things better, who can find the exceptional and is not distracted by the everyday. Good design is game-changing, even life-changing. When a design is exceptional, when it is so good, we don’t even notice it. Good design takes on a life of its own, it grows and spreads – it moves. Everything in our world moves and changes. And perhaps nowhere more so than in the web design industry where things are constantly changing, where every two years the whole industry has essentially re-invented itself. To be a good designer and to stay a good one, we need to accept, to embrace the ever-changing industry we work in and to move with it.

Want to know more?

Did the conference sound like something you really would have enjoyed and you’re gutted that you missed it? While here’s some useful links to this year’s website where you can read up on the event and even download this year’s newspaper – its only £1 and definitely worth it. Go on, be a sport!

Website: http://2012.newadventuresconf.com/
Newspaper: http://2012.newadventuresconf.com/paper/
Twitter: @naconf and #naconf

And I’d like to take this opportunity to thank everyone involved for making the event such a success. Such a great first conference experience – I’ll definitely be back!

Check out the sites featured this week below, and as always, feel free to leave your thoughts and feedback below in the comments.

Enjoy!

http://www.giftrocket.com/

http://www.studio7designs.com/

http://liftux.com/

http://tradeomics.com/

https://popularise.com/home

http://www.offroadstudios.com/

http://www.renderwave.it/en/

http://www.discoverireland.ie/

What did you think of this week’s collection of Mid-week Inspiration? Which sites are your favourites? And can you recommend any beautifully designed sites for other visitors to check out? Please leave your thoughts and feedback in the comments.

Enjoy!

White mineral formations above the lake | by mikkashar

Left foot in Yoshua Tree | by zilverbat.

Stone Formations 2 | by pilosopongfroilan

Antelope Canyon | by makipon

Cango Cave Formation | by orkomedix

 Rock Formations – Muscat, Sultanate of Oman | by Alexander R. Yee

 Swards Valley – Cappadocia, Turkey | by whl.travel

Natural stone formations | by mgrig7005

It’s raining stone | by mgrig7005

Venus | by GS+

2 of 3 Rock Formations off Point Buchon Trail just south of Montana | by mikebaird

 Logan Rock & Pednvounder beach | by Mexicanwave

Grand Canyon – Thunder River Trail – rock formation on Esplanade | by Al_HikesAZ

Stones | by mac_filko

Natural stone formation | by andigirl

Stone formation | by gullevek

 stone formation | by paul_xttp *busy*

Did you enjoy this collection of Earth element photographs? And do you think the series idea of The Four Elements is a good one? Let me know what you think in the comments below. And don’t forget to share links to your own images.

Also, the next collection in the series will be looking at the Wind element, so if you have any images that you think should appear in the collection then please share in the comments and I’ll be sure to add you to the next collection.

I recently came across the Kerning Game and felt I just had to share it. It is a great game for graphic designers and those interested in typography.

The object of the game is simple: move the middle letters in each word to make the text both visually pleasant and, more importantly, easily readable. Or in other words, kern the text. You then receive points according to how well you did.

Why not try it yourself: http://type.method.ac/

In case you’re wondering, I scored 94/100 so there is plenty of room for a seasoned typographer to bet me. Why not share your score below when you’ve finished.

Check out the sites featured this week below, and as always, feel free to leave your thoughts and feedback below in the comments.

Enjoy!

http://hatbox.co/

http://www.vignettebrandcommunications.com/

http://thrivesolo.com/

http://onedesigncompany.com/

http://www.griplimited.com/

http://captaindash.com/

http://www.nest.com/

http://lifeinmyshoes.org/

http://www.operaliege.be/fr

http://www.jibevisuals.com/

What did you think of this week’s collection of Mid-week Inspiration? Which sites are your favourites? And can you recommend any beautifully designed sites for other visitors to check out? Please leave your thoughts and feedback in the comments.

Recently I came across the Citroën DS5 website which blew my mind. Using bold diagonals and lots of CSS3 transitions and Javascript to create some mind boggling animations, this site shows what can be done when technical capability and extraordinary imagination meets the guts to give it a go.

Check out this week’s short, but very sweet, collection of inspirational sites which use diagonal lines and animation to drive home their message:

Citroën DS5

Starting with the site that brought my attention to this trend, the Citroën DS5 website uses smooth, sliding animations, fades, and zooming effects to create a truly interactive experience. The key messages fade in on page load, while images and body text slide in when you scroll down the page. Plus there’s some layering and parallax style effects with page elements floating above and beneath one another. They have even taken the diagonal element into the site navigation.

http://www.ds5.citroen.co.uk/uk/

Redirect Digital Marketing

This example from Redirect Digital Marketing combines stylised illustration from Jonathan Calugi with similar effects that we previously seen in the Citroën DS5 site. The animations and illustrations really bring out the company’s personality, and shows that they are at the forefront of online design and development. What better showcase could an agency ask for?

http://www.redirectdigital.com.br/

Hyundai Veloster

Not only have the designers of the Hyundai website used great animation effects but they have also used a simple and effect design too. I personally love how they have played with the (mostly) diagonal line to create different dimensions and floors for the car graphics to site on. Plus some beautiful typography really finishes the design off. Good work!

http://www.hyundai-veloster.eu/

Conclusion

I will be the first to admit that this trend won’t work for every site, in fact I think very few sites could pull it off! However for those projects which can accommodation such a daring design, what better way to showcase your product or company than with a site that is so exciting and engaging? This is one trend that I love.

What did you think of this week’s collection of Mid-week Inspiration? Which site is your favourite? Do you know of any other sites using this style to communicate? Please share them in the comments below along with your thoughts on the trend.

This one was an interesting list to put together with so many great online sources out there and that is why I have decided to focus on the artwork angle in particular. So, let’s find out what sites have made my Top 5 list, and which one I consider to be number 1.

5. Forrst

Website: http://forrst.com/

The first of our critic websites, Forrst is useful as a source of inspiration even if you are not a member. You can see what leading designers (and developers) are up to, get a measure of the level of the craft at the top of the design game, and if you are a member, you can also receive thoughtful critiques of your work and give helpful comments on the work of others.

4. Dribbble

Website: http://dribbble.com/

The second of our critic websites, and the more widely known one too. Dribble describes itself as a ‘show and tell for creatives’ and its here that you can sample the crème de la crème of the design world. Just like Forrst, it is still useful even if you haven’t received that elusive invite as you can still view the work of others in your field and browse and search the site for relevant content.

3. Noupe

Website: http://www.noupe.com/

Noupe is part of the Smashing Network (the people who bring you Smashing Magazine amongst many other great quality sites and books) and describes itself as ‘The Curious Side of Smashing Magazine’. The site is very design focused and as well as posts showcasing great examples of artwork, typography, photography, patterns, illustration and themes, it also promotes useful online resources and publishes articles on design theory and design tutorials.

2. CSS Awards

Website: http://www.awwwards.com/

With the prestigious award of ‘Site of the Day’ available, you can be sure that this website is continually updated with great design from around the world. It is bursting with examples of great design work and should be more than enough to spark some creative ideas of your own.

1. Designer & Blogger Chris Spooner

For the number 1 position on my list, I have decided to select a designer rather than a site. The reason for this is because Chris Spooner is a very productive designer, with at least 4 blogs that he manages (including one for his four-legged friend Jake). And the two of his sites that I have selected as great online resources for designers are:

Website: http://line25.com/

Website: http://www.blog.spoongraphics.co.uk/

Proof in itself that Chris is an inspirational character is the fact that Blog.Spoongraphics is the first blog that I ever followed, and still follow to this day. And also the fact that being continually inspired by Chris’s multiple weekly posts is what made me want to start my own design blog.

I don’t think anyone else online has inspired me half as much as what Chris does and that is why without a doubt he is my number one online source for inspiration.

What did you think of the post? Are there any other online sources that you would add to the list? What sites makes your Top 5 List of Online Sources of Inspiration? Share your thoughts in the comments below.

When we come across a site that’s different for all the right reasons, it often sticks in our head because it was an enjoyable experience. Can you remember a site that was warm and welcoming? Where the text was clear and easy to read? The navigation was easy to follow? That site was well-designed. Its designer had the end-user in mind at all times during the design process.

There are not always set ingredients which make the perfect website cake, but there’s certainly plenty of ways to improve your website, and in turn, a user’s experience; to make your site a nicer place to be.

The Design Devil is in the Detail

Without the extra attention to detail, websites can be pretty flat and boring, even ‘samey’. A lot of times they can look nothing like the world around us, making them hard to relate to and the online experience poor. This is a problem.

This is where we as designers need to take the extra step and design websites that people can relate to. When we design for humans, for the people who are actually going to be using our websites, we create better solutions to the design and communication problem we have been set. And often, designs appear simpler, cleaner and more elegant.

Already a lot of designers have taken this step and are designing websites that just make sense. Without the continuous changes in the web industry – the developments that have been made to figure out what works and what doesn’t – the internet would still be in its infancy in design terms. It was not so very long ago that we threw every trick we had into every website we designed and built; just because we could, and not because we should.

Dare I say it – we could still have an online world were animated gifs of glitter unicorns and bright green text on a black background are still the norm! Thankfully we have move on from this. But there is still much we can do to improve.

Design you can Relate to

This is where designing for humans comes into play. There are lots of articles which talk about User Experience (UX) and the User Interface (UI). And that’s not quite what I am about to explain. If you want to read about this, here are a few resources to get you started:

• inspireUX – User Experience quotes and articles
• SitePoint – How to Quantify the User Experience
• Jakob Nielsen’s Alertbox – Top 10 Mistakes in Web Design
• Webdesigner Depot – Strengthening Behavioural Cues in UX Web Design with Gestalt Principles

What I want to talk about is designing websites which look familiar to us, which look like the real world, which even have depth and dimension and actually ‘feel’ tactile. It’s these elements of design which make a visitor feel at home when they arrive at your website door.

So how can we achieve this?

1. Create a Light Source

In our lives away from the computer screen, our world has many light sources – the sun, moon, stars, street lights, lamps, candles, TV, etc. These create highlights and shadows on the multitude of objects in the world. They create different tones and shades of colour. And this gives our world depth and dimension – something not easily replicated on a flat surface such as a sheet of paper… or a computer screen.

We can however replicate the effect of light using gradients and drop-shadows, to create the highlights and multitude of tones we see in the real world. Drop-shadows give us a sense of depth and allow us to place objects above and below others, creating a stacking effect and even a sense of third dimension.

Plus as designers we can use this effect to give objects priority over others; to draw the visitor’s attention towards a particular goal, such as a call-to-action.

Even with all this depth something can still seem missing.

2. Add Texture

Everything in our world has a texture. Whether rough or smooth, furry, soft, hard, cold, sharp or a whole host of other possibilities, everything is tactile and has its own unique feel.

Unfortunately we can’t re-create the actual tactile-ness of our world on screen (but how great would that be?) so instead we need to use visual clues of texture to convey the concept and to trigger the memory of texture in the mind of the site visitor.

Well use textures are often subtle, so we need to be careful not to over-do-it. But when used well, texture can really set a website apart. Whether its the promise of sand between your toes from a holiday accommodation website or the prospect of great views and dirty shoes from an outdoor adventure centre site, texture can be a great asset in reinforcing the message in your site’s text, and the propose of the website itself.

3. Make it Look Real

People relate best to what they know. If a visitor comes to your website and has to learn a new visual language, chances are you’ve lost them.

By making your design elements look familiar, by basing them on their real-world counter-parts, you are placing your visitor into a world that they are familiar with and where they feel at home, rather than on an alien planet.

There are many ways to achieve this. It could be image slides that look like a stack of Polaroids, an events calendar that looks like a wall calendar, or the use of icons to represent information, such as telephone, email and postal address.

Some designers have even went a step further and created a website environment which looks and behaves like the real world. This solution isn’t easy to achieve, and nor will it be suitable for every design problem, but when it works, it really works!

4. Don’t Forget the White Space

So easy to get wrong, both by not spacing your content or by in fact over-doing-it. White space is just like a room – most of us can’t work in a messy room, so don’t make your site visitors read cluttered content. Because quite simply, they won’t.

On a pole to that, I believe that too much white space can also be a bad thing. Ever been in an empty white room? Talk about boring! Also by spacing out your content too much you can break the flow and make your page fragmented. Worse still, visitors might not even realise that there is any more content!

Note: White space is not empty space – it is a key element to great design and therefore should be carefully thought-out. It also does not have to be white.

5. Create a Hierarchy

This is where careful consideration of your content comes into play. Whatever you’ve got – images, text, video, diagrams, even music – it all has to work together in a way that flows and makes sense. In its simplest terms, you’ll want to take a visitor from an initial simple concept, to overview content, to detailed content.

Take the example of a website promoting a product. Often you’ll have a simple line or two of text along with the ‘hero image’ which explains the product (or its purpose) on a very simple level. If the visitor likes this, they often get 3-4 key features of the product, maybe a demo video, maybe a testimonial, and in certain cases a bit about the company. If any of these is of interest to the visitor, they can usually read more on a new page which goes into detail.

The visitor gets the information that they want, in the level of detail that they want, and the content flows easily from one level to another. This is effective use of hierarchy in your website content.

6. Make it Legible

Building on the previous two points, make sure the visitor can read the content. No matter how great your site’s design is, chances are that the visitor is there for the content. By making effective use of layout, white space and hierarchy, you can make content more accessible to the visitor.

Other simpler considerations we as designers need to be aware of are font size, use of titles to break up text and create sections, and contrast between the text and the background (and remember that too much contrast can also be a bad thing).

7. Push Your Unique Selling Point

As much as we like things that are familiar to us, we also like it when we come across something that is different or even unique. If your website has a unique selling point, or is selling a product or service that is doing something different, use this to your advantage and push its unique selling point to its limits.

However if you are creating a website where the subject matter is fairly run-of-the-mill, then you may want to find a different design solution to communicate to the site visitor, to help you stand out from the crowd.

After all, variety is the spice of life!

In the End, It’s All About the Site Visitor

Design considerations which keep the end-user in mind can go from fairly skin deep decisions, such as text and background colour, to more thought-out and carefully considered decisions that can affect the whole site’s layout.

What I have discussed above is by no means an extensive list but points which I hope highlight the importance of good design choices in order to make a successful website that people will want to spend time on.

I am sure that there are many more points which come into play in your design process, some of which I may not have even considered. And I hope that you’ll share these in the comments below.

Check out the sites featured this week below, and as always, feel free to leave your thoughts and feedback below in the comments.

Enjoy!

http://todaytheworldis.com/

http://www.inflicted.nl/

http://www.sanctuarycov.org/

http://www.smashapp.com/

http://taamiberry.com/

hhttp://www.redtiki.com.au/

http://www.tinkeringmonkey.com/

http://loveforjapan.com/

http://thoughtbot.com/

http://www.skysguideservice.com/

http://www.besupercharged.com/

http://www.flowfestival.com/en/

http://www.smokeybones.com/

http://www.aaugh.it/

http://www.yurbuds.com/

http://www.warchild.org.uk/

http://www.sparksonline.com/

http://www.cheesesurvivalkit.com/

What did you think of this week’s collection of Mid-week Inspiration? Which sites are your favourites? And can you recommend any beautifully designed sites making great use of the colour red? Please leave your thoughts and feedback in the comments.

So, let’s find out which jQuery scripts and plugins have made my Top 5 list, and which one I consider to be number 1.

5. jQuery UI

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

I’ve included jQuery UI as a whole, rather than just a particular section of its functionality because I think its strength lies in the wide variety of functions this plugin provides. And also the ability to only add the script that you need to your project makes jQuery UI all the better.

Website: http://jqueryui.com/

4. selectivizr

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

I think selectivizr  has said it all; if you want to use CSS3 pseudo-classes in your web project and be confident that it’ll work across all browsers (ahem, in Internet Explorer 6-8), then selectivizr is a most! And let’s face it, why wouldn’t you use CSS3 pseudo-classes!

Website: http://selectivizr.com/

3. Modernizr

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

Just like selectivizr, if you want to use the latest web technologies and be confident that everything is going to work as planned, then adding Modernizr will save you a lot of headaches. Add it too your default build files and don’t look back!

Website: http://www.modernizr.com/

2. Fancybox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

There is a whole host of jQuery lightboxes out there but Fancybox is by far my favourite. It deals with different types of content wonderfully and manages to look great a the same time. The documentation is pretty good and there’s lots of examples to help you out too.

Website: http://fancybox.net/

1. Nivo Slider

The world’s most awesome jQuery Image Slider

With a statement like that, you know its gotta be good! Just like Fancybox there are a lot of alternatives to Nivo Slider but Nivo Slider hasn’t made the top of my list for no reason. It is so easily to implement and comes with some highly polished themes and lots of options built in. And recently added are Nivo Slider Pro and a WordPress Plugin. If you haven’t already heard of this great image slider, go check it out now.

Website: http://nivo.dev7studios.com/

Do you agree with my Top 5 jQuery Scripts & Plugins You Can’t Live Without? What plugins make your top 5 list? Share your thoughts below.