Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:31Length:4.7 hours
  • Overview
  • Transcript

2.2 Inspiration

Lesson Notes * Typekit Gallery * CSS Website Awards * McBess * Orman Clark * Creattica * Forrst * Dribbble * Practical Tips for Taking Design Inspiration without Copying * How Do You Combat Designer’s Block? * Where Do You Find Your Design Inspiration?

Transcript Hey guys – Welcome (back) to 30 Days to Your First Website Design, a Tuts+ premium course. I’m Ian Yates and today we’re going to begin our Design Concepts section by looking at Inspiration. Let’s first look at what we’ll be covering in this video.

AAaaAHAH! What’s that?! Oh nooo… it’s a blank page!

Phew, that’s better. I always find it best to disrupt a blank page with something, just to get me over that first hurdle. To get past the dreaded designer’s block, some folk find it useful to get some fresh air, make a coffee, have a bath (that’s a weird one).

At a certain point though, you have to get down and dirty with design. So where should you be drawing your inspiration from? All designers have their own methods of beginning a project, so let’s look at various forms of inspiration.

Inspiration Sources This is usually going to be down to personal taste; the various resources you find yourself browsing probably appeal to your taste. You certainly admire them, and that’s where inspiration comes from. I personally have a long list of designers, developers, and illustrators who I check up on regularly. There’s no point in me listing them all, but here are just a couple of blogs and galleries I can recommend:

  • For your typographic needs you should definitely check out the Typekit gallery (and blog).
  • Then, for a wide spectrum of web design, you have the CSS website awards, which is updated daily with new and original web design brilliance.
  • If you’re after theory and practical inspiration, you can’t go wrong with A List Apart, industry leaders sharing their secrets.
  • Don’t be afraid to grab inspiration from unlikely sources – I love the illustration work of French genius McBess (mcbess.com). Just because he focuses on a medium other than web design, it doesn’t mean I can’t be inspired by his work.
  • And then you have the work of individuals such as Orman Clark who does lovely things with aesthetics.

So those are some websites I like to draw inspiration from, but don’t forget about offline sources of inspiration. Web design is a natural progression of print design, so dive into magazines, even look at product design, or architecture. Many of the principles and ideas are shared with Web design. Often, by observing great design in other mediums, you’ll be able to draw fresh ideas and bring them to the web.

Communities can be great sources of inspiration. Some, are open to all, such as Creattica.com. Then there are others, which accept contributions by invite only, but serve as great ways to get inspiration from people busy in the industry right now. Take Forrst, for example, or Dribbble.com – these communities are great, because not only can you get tons of visual inspiration, but also genuine help and advice from the very people whose work you’re interested in. Getting feedback from your sources of inspiration can be really important, because it can help you understand WHY you find something inspiring.

Once you’ve found something inspiration, ask yourself why you like it. Examine all the details, the colors, the fonts, the layout, how it’s constructed. Once you understand how an inspiring piece works, you can apply the same principles to your own work without directly copying someone’s design.

You may not even be inspired by a design as a whole. Perhaps your eye has been caught by what Cameron Moll describes as a “Node of Inspiration”. Maybe it’s the logotype which has you interested, maybe you think the search box works extremely well. A web design is built from lots of smaller components, so try to nail down exactly what it is that has your creative juices bubbling.

Once you’ve worked out what it is you like about something, go elsewhere and look for similar effects. There’s no reason why some aspects of your original source of inspiration can’t be improved upon!

Let’s now cover some more examples of further reading, which consolidate a lot of the ideas we’ve talked about.

Next Steps OK, as is usual, it’s now time, before we dive into the next video, for a little assignment (you should be used to this by now) I’d like you to bear in mind that we’re working towards a corporate website design. Find two elements within other web designs which you find inspirational, effective. They could be menu, layouts, footers, examples of typography.

Think about why you’ve been drawn to them, and then how you could achieve similar results.

Next time on 30 Days to Your First Website Design, we’re going to get visual and look into Style and Theme. This is Ian Yates, and from all of us here at Tuts+, thanks for listening!