30 Days to Your First Website Design

Lesson Notes * Vintage modernism example * Kuler * Vintage Modernism by Brandon Moore * Introduction to Color Theory for Web Designers

Transcript Hi 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 get visual and talk about style and theme. We’ll begin as always by taking a quick look at what we’re going to cover in this video:

• We’ll start off by defining what we mean by style
• We’ll then look at quite a few examples
• We’ll finish off with a note about trends and longevity
• Before we jump into the next video, I’ll set a little assignment

Now you’re probably bored of me saying this, but we’re back to decision-making. Selecting your theme or style is just another choice along the long road of web design.

What do we mean by style and theme? We’re referring to visual presence. At its most simple, we could categorize web styles into DARK and LIGHT for example. I’m sure you can think of a light website and a dark website off the top of your head right now.

We can obviously refine things much further than that and categorize styles such as:

Grunge. A grubby, dirty appearance, with irregularly positioned and aligned objects. Scruffy typography, and often dark and moody.

To counter grunge there’s always “clean” - typically airier than grunge, clearly grid-based and regular. Certainly more calming than grunge.

Minimalist sites take clean one step further, stripping away all but the bare essentials. The primary goal (remember we spoke about them?) of any minimalist site is usually communicated very clearly.

One of my current favorite styles is “vintage modernism” which, funnily enough draws inspiration from both grunge and minimalism, plus some art-deco and 20th century graphic design thrown in for good measure. vintage modernism is usually very rich and textured, featuring elaborate typography and fine details.

As I suggested in the our video about inspiration, you can check out dribbble for examples – it’s overflowing with vintage modernism at the moment! This example by Ethan Marcotte is actually intended to demonstrate what’s known as responsive layouts, but it serves just as well for the purposes of this style example!

The Point of Style Anyway, you get the point about style – there are tons of styles to play with, and you can even define them yourself if you’re dead clever. In deciding upon a style for your website, you’re communicating with your targeted users.

But, what are you actually doing? Well, the point of style is, in essence, threefold:

1. At its most simple, it sets the mood. It can give brands an air of sophistication, organizations a sense of trust, events an element of fun.
2. It allows a user to relate with what he or she is experiencing. Familiar elements will help them feel at ease with the website.
3. Style helps the design stand out due to uniqueness, and hopefully therefore remain memorable.

Let’s break style down a little further, so we know what we’re dealing with. After all, we’re going to have to decide upon our own style for the corporate website we’re going to design.

How do we control the style of our design? Well, we do it with the component elements such as color, texture, typography, imagery, and layout.

Color, as we’ve already touched upon with light and dark, is an easy way to trigger an emotive response from the user. It can be manipulated by means of the complementation, contrast, and vibrancy. Experiment with color services such as Kuler from Adobe, pay attention to how different color schemes make you feel.

Color also plays a vital role in practical terms; text legibility and leading of the eye, but we’ll talk about that further down the line.

Longevity and Trends Before we wrap up this video, I want to quickly touch upon one final point, and that is; longevity. Trends (such as vintage modernism which we talked about) come and go, so it’s worthwhile considering the shelf-life of your website.

Take the Envato bundles for example. There’ve been a few: the flash bundle, the mac app bundle, and the WordPress bundle to name but a few. The Envato design team does a great job of pulling these together – they’re atmospheric, striking, and they’re always right up there with current design trends. But what happens when trends move on? These pages are going to look outdated. In this case, that doesn’t matter. Bundle pages have a tiny shelf life; once they’re done, they’re done. They exist to gain maximum impact in the short term.

Other sites however, such as news blogs, are in it for the long haul. Their designs tend to be more sympathetic to longevity. That said, in web design it’s not the end of the world when trends change. Websites are flexible, nothing’s set in stone, so they can obviously be updated if needed.

Next Steps OK, it’s time for some further reading:

Firstly, I’d like you to read Brandon Moore’s article on Vintage Modernism. Why? Well, because as I mentioned, like it as a style, so read up on it!

Secondly, a brilliant article on color theory over on (you guessed it) Webdesigntuts+ Thomas Cannon covers all you need to know.

And before we jump into the next video, as you’ll have been expecting, I have an assignment for you: Keep in mind our corporate web design and ask yourself what kind of style it should follow. Think about who our users will be and therefore what kind of colors, textures, typography would suit their tastes most.

OK, that’t it for now. Once again, you’ve been watching 30 Days to Your First Website Design. In our next video we’re going to take a look at Conceptual Sketching. I’m Ian Yates and from all of us at Tuts+ thanks for tuning in!