When designing a website, there are a number of different styles you can adopt to get the message of a brand across effectively to customers, users or readers. The important thing to consider is to pick a style that matches the brand you are designing for. Also, there’s no reason why you need to stick to one particular style. Multiple different styles can merge together perfectly fine as you’ll spot in some of the examples below.
Here is a look at ten of the most creative styles in use in web design today with examples of some of the best websites that utilise them.
1. Illustrations and Cartoons
Illustrations and cartoon drawings can really bring a web design to life. Drawing is a creative activity by definition and by incorporating it into a website’s design is one of the most creative methods of presenting information on the web.
The variety of this style is only limited by the designers imagination and can be hand-drawn or vector based imagery. Check out the examples below.
Flourish
Owltastic
The Pixel
Artua
Pampaneo
2. Two Tone Colour
Using only two colours to create a design doesn’t sound like a particularly inspiring style of design until you see it used well. When used well it can indeed be very inspiring and allows more focus on other aspects of the design such as typography and layout. More focus can be placed on the content as this style of web design ties in well with the minimalistic design which increases the users’ focus on the content.
To see just how inspiring and less distracting this type of design can be take a look at the following examples of some of the best uses to two-tone colours in web design.
Squarespace Blog
Carsonified
Helveti-Tweet
Circus Family
3. Photo-Realism
Photo-realism is a technique that everyone will be familiar with immediately purely because of the associated realism. It is a great way to complement the content especially when used as a large background image.
The following examples show just how stunning photo realistic based web designs can be.
Ecoki
Work Awesome
Palm
Alexey Abramov
Food Inc. Movie
4. Transparency
Transparency is a great way of making text more readable when placed above images. Doing so also preserves the part of the image below the text so that the full image can still be seen to some degree.
With the increasing demise of IE6 and ways of making transparent PNG files behave in IE6, transparency has become a viable style in web design. So much so that some sites rely on it heavily.
Envato
Core
Fix Outlook
Pizzaza
Line 25
5. Beautiful Typography
Ultimately good typography is what helps make text more readable on the web but he design of typography can be inspiring in its own right. Great typography is an art and therefore is one of the more creative ways to display content online.
Arranging native type on a website is slowly improving with services such as Typekit popping up but of course, image replacement techniques can be used for any unsupported fonts.
Andrew Lindstrom
João Andrade
Mulletized
Jack Bloom
idsgn
6. Textures and Patterns
Using textures and patterns can be a good way of adding depth to a web design. The most common use of this style is on the background either as a repeated image or a big background image.
Simone Maranzana
Matt Mullenweg
Xperience
Biola Undergrad
Shannon Moeller
7. Grunge
The grunge look can often look a little messy and untidy but that is part of the appeal. Especially in web design, as current trends point more towards the clean and tidy styles that is more appealing but grunge design still has its place primarily with brands which it is appropriate for.
Syc Fuk
ths
Ali Tabatabaei
8. Nature
Natural elements within a web design create a familiar relationship with the outdoors and evokes the feeling of being down-to-earth. Nature can also give a design an organic feel. Have a look at the examples below to see how nature can be used effectively in web design.
Komodo Media
Tomáš Pojeta
Weberica
Outdoor Italia
Silverback
9. Abstract
Abstraction is a very creative artform due to the freedom it gives the designer. Abstract art can be given a meaning or have no meaning at all or it can be interpreted in any way the viewer wishes or it can simply be used as a good looking visual effect. As such, this style is probably the most diverse in its creativity meaning that designs can be unique to themselves and be more memorable as a result.
The freedom of abstract design is used to stunning effect on the web.
Lyrical Media
DSDesign
Gummisig
Make Photoshop Faster
duoh!
10. Retro
Retro design is a niche style that is a fairly recent trend in web design. It is commonly used to sell a product or service with styles that originate from anywhere from the 1920s to the 1970s. It is interesting to see modern interpretations of what was common in that era and below are some examples being used on the web currently.
Forty Seven Media
Jeff Sarmiento
Edgewater
The New York Moon
All Star Lanes
Awesome post Tom. Very unique designs here. While these styles are all different, they all look very nice. Thanks for this post and keep up the great work on Inspect Element.
Excelente, me encanto tu recopilación, mucha creatividad de por medio, felicidades!!
very nice compilation!
Inspired!
thanks
awesome stuff, great inspiration for my new site.
Wow, those are some great list. Thanks for sharing
Thanks for sharing… very useful
Awesome post…Great collection.
Nice Collection
Absolutely great selection !
Thanks a lot it’s a huge source of inspiration
Inspired! Now I want to code some sites
sweet, inspiring and forever webstyles
A lot of work you have done. Very well
Great list. Good job! Love the typography designs.
Really beautiful designs. Use textures and patterns make the design most human.
Thank you. Inspired! Really nice site.
Great List….thanks for sharing.
Deepu
My personal portfolio.
Tnx!
great post
thanks
Thanks for putting them together.
This is a fantastic collection of designs. Not see many of these sites before….well done!
truely inspiring !!
Thanks
Love love love these! Thank you for pointing out so clearly. I feel inspired now!
Very inspiring.
Thanks for sharing
Thanks for sharing this fantastic collection.
wow! those are really stunning!
really very impressive collection
Love all the websites you’ve chose to showcase. I’d have to say my favorite is “The Pixel”. Thanks for sharing!
I love the 2 tone examples there is just something really cool about have the ability to use every color under the sun, and only choosing 2!
–
Thanks and Regards
Noel for Nopun.com
a graphic design studio
–
Thanks so much for including us in this list – it’s an honour to have our little site alongside so many awesome designers
i really like retro and abstract design. thanks for sharing this
so inspired
thanks
These are really great collections and attractive. These could help me more on the inspiration.
Thanks for the great list! I was thinking over styles the other days.
Is the opacity tag going to become the replacement for the blink tag? When rolling over the images it is disconcerting to see them nearly disappear into the background. Are we not supposed to be looking at them and admiring them? Personally I find the change in my cursor enough of a clue that I am over a link.
Awesome … really I like this post it’s very helpful
thumbs up
I’m with scotty. Awesome list, but I really don’t like how the thumbnails images become further away on hover.
I understand your concerns about image fade but it isn’t as bad as you think.
However, I am currently in the process of redesigning Inspect Element and I have a more elegant way of dealing with image links on hover especially if you’re using Safari 4, Google Chrome or Firefox 3.5. Keep an eye out as it will be launching very early next year.
Great list! Thanks
hay!
Simply great collection. keep on sharing guys.
Regards,
Web Design Company London
Great and insprational,
thanks for sharing
Great collection. thanks.
Really good article and some nice sites.
Awesome collection.Great post.
a great design