A Detailed Look into Popular Styles in Web Design

A Look into Popular Styles in Web Design

Just as there are a variety of designers out there, there are respectfully just as many web design styles. Some are good, some are bad – many are just experimental. However, there are those few styles in web design that we see all the time. They are the design styles that work, and that we’ve grown to know best.

A Look into Popular Styles in Web Design

Sometimes popular web design styles can deter us since we love to create something original. As designers we like to see variety, but of course, our clients like to mimic and see consistency. In this post we’re going to look into some of the more popular web design styles, and further examine why they work. Knowing the design styles that work as they are can be a great way to use those same principles in your next unique design.

Illustrations

Illustrations have been very popular in the world of web design for a few years now. Illustrations include everything from retro design, to nature related and to the abstract. Anyone could say that there are sub-styles to illustrated web design, but the point is, illustration in itself isn’t going away any time soon.

Why Does it Work?

Illustrated designs give us a world of possibilities. With illustration, just like with imagery, photos, and other design styles, creativity is essentially limited. This is why illustrative websites tend to be on the creative side. Illustration is the opposite of what the web used to be: standard images, standard layouts, and simple textures or gradients. Illustration gives personality, a light attitude, and imagery that is unique and memorable.

Because of all this, web designs with custom illustrations are great for branding. Characters, objects, or the overall look of an illustration is intriguing and pleasant to look at. While there are thousands of illustrated designs across the web, they all have their own unique look. A unique illustrated design doesn’t quite fit in with anything else, and that’s why it works.

Common Features

Illustrated designs tend to come in three main categories (while there are some exceptions): personal branding, mascots, and the abstract. For many solo designers, or small groups of designers, illustrations of themselves is common. This is personal branding done illustration-style. A few examples include the illustrations at the bottom of Smashing Magazine and throughout the blog, Veerle’s Blog, and John O’Nolan. By turning themselves into illustrated figures, they’ve better branded their business while taking a personal approach.

Mascots are also often used, and are usually animals or other memorable characters. The gorilla on Silverback is a well-known character, as is the owl from Owltastic. Probably one of the most memorable examples is the chimp from MailChimp. The illustration may or may not be related to the name of the brand, but will always be intertwined with the brand regardless.

There are also many abstract illustrations that tend to have no final shape or form. These illustrations are among the most creative, and give the brand that appeal. An example of this is the well-known large illustrated background of Web Designer Wall.

Examples

All Star
All Star

Sliver Back
Silver Back

Carsonified
Carsonified

Pampaneo
Pampaneo

Owltastic
Owltastic

Printed Paper

As we entered the age of the Internet several years ago, everyone seemed to want paper left behind. Glossy gradients, flat colors, and few textures were seen in the first phase of web design. Now, though, printed themes are coming back into style. Things that make up great print design like interesting typography, subtle textures, and print-friendly layouts have been used more in recent years than at any other time.

Why Does it Work?

Print design has been around for centuries, and modern print design has a lot of science and proven methods behind it. We read better on some printed works than others, and other printed designs are more effective when designed with the correct design theories. Bringing these same principles to life on the web can only improve the web experience.

People also like to see realism. Texture and depth make a design feel more ‘real.’ It makes a design feel more touchable and therefore is easier to connect with. However, glossy gradients and hard colors can make some designs feel too professional or unapproachable. Print inspired web designs can connect with audiences better.

Common Features

Common features among this design style include the comeback of serif fonts, letterpress and drop shadow effects, and subtle textures. More extreme textures are also often used, such as paper or cardboard. Design elements may include paper-related things like pencils, paperclips, post-it notes and more.

Of course, a print-inspired web design does not need to have paper objects or textures to get the idea across. There are designs that may be flat in color but rich in typography that mimic a printed design, or vice versa. Softer textures used throughout the website can look like it’s being read on paper, without actually using any imagery related to paper or print itself.

Examples

Odosketch
Odosketch

Wayward
Wayward

Team Green
Team Green

Simple Measure
Simple Measure

Solid Giant
Solid Giant

Realism

Along with the trend of mimicking real printed paper came mimicking other photo-realistic objects in web design. Everything from desk setups to nature-inspired photo realism is becoming more popular. It’s a really cool look that gives the viewer an interesting perspective, and that look can really alter a viewer’s mindset and keep them engaged.

Why Does it Work?

Essentially, photorealism web design works for many of the same reasons print-inspired web design is coming back. By giving viewers something ‘real’ to look at, we can make the design seem touchable, more real, and more connectable. We can bring the viewers into a perspective we choose for them, and alter their web experience altogether. By using photorealism, we can take the viewer ‘off the web’ and into a real place.

Common Features

According to the objects you can place in a realistic setting, the possibilities are endless. A recent trend is placing common desk objects into a realistic web design, although some may argue that that look is becoming over used. However, there are many designs that use other types of objects for this look. The two things they all have in common are an interesting perspective and a close-up view.

A distant image of a park isn’t going to get the photorealism look. The objects must be close up, as if the viewer is sitting right there, rather than at a distance. An interesting perspective is also what gets many photorealistic websites noticed. Note in the examples below that perspectives are from above, at a unique angle, or right in the action.

Examples

Workawesome
Workawesome

Holloway
Holloway

Koffie
Koffie

Kino
Kino

Vigeturf
Vigeturf

Imageless & Typography-Focused

All of our styles above incorporate imagery somehow, but a growing and alternate style is to not include images altogether. Many designers are now choosing to showcase more typography, layouts, and use other design methods to make web designs more appealing. These websites use interesting shapes and forms within the text, unique spacing, and texture instead of pictures to create an idea.

Why Does it Work?

Type only lets the user focus on the content, rather than the imagery. It can be a lot more engaging to use type as the only element in a web design. Designs like this are also a lot more focused on the user experience, and the overall flow of the website. Typography websites can get the overall message through faster and better.

Common Features

Many typographic and minimalistic designs use color and shape the most when trying to add visual appeal to an otherwise ‘boring’ design. Note how in some of the examples below the fonts are mixed and matched, altered, and connected/disconnected. Furthermore, much of the typography in these web designs feature texture, depth effects, and more. Creating an interesting use of type is the most common way to make this form of design work without images. Use a variety of fonts, many non-standard fonts, and create unique effects with them.

Color is the second most prominent design feature in these types of designs, among others. Pops of color are regular, and unexpected color combinations usually work well with these types of designs. A more recent trend is two-toned color schemes with these types of designs, which is a mix of only two colors that can be in large doses.

Examples

Ben
Ben

JLern
JLern

Mulletized
Mulletized

Zee
Zee

Ole
Ole

Minimalism

Minimalism in web design is the practice of taking everything that is unnecessary out of the equation. Minimalistic designs tend to be very simple, organized, and effective. There are varying degrees of minimalism, from the extremely simplistic, to the designs that are overall simple but still provide some imagery and additional features.

Why Does it Work?

Web design is all about communicating a message. By taking out all the extra bits and pieces in a web page, the remaining pieces become that much more important. What minimalistic design leaves behind are the core elements and the core content the website needs. Minimalistic design gets the message across, and gives the viewer a clean, organized, and calm design to look at.

Common Features

Many minimalistic designs are black and white, although there are many exceptions of two-toned color palettes. Similar to the typography-focused style, a unique use of typography is often implemented, to give the design more of an aesthetic appeal. Slab or serif fonts are among the most popular types of fonts used in minimalistic design, because the fonts themselves give more shape.

Besides all the common features above, the two most important things to consider in minimalistic design is depth and whitespace. Minimalistic designs to not provide a lot of depth, and if using texture or other depth-intensifying elements, the effects are very subtle. Secondly, whitespace is in excess, and used as a main tool to organize the user’s interface.

Examples

Chama
Chama

Finch
Finch

CRW
CRW

Clarity
Clarity

Jason Santa Maria
Jason Santa Maria

Vintage Look

People like to look at retro or vintage things; there is just such an appeal about a time and place that we can never go back to. Vintage design is becoming a very popular style, and the eras cover almost any civilized time in human history. We’ve all seen designs that use the Renaissance as inspiration, but also designs that use looks as early at the 1950’s and 60’s.

Why Does it Work?

Like we said before, there is just a certain interest and curiosity that comes with historical times. A different culture and a different time create for a unique setting on an otherwise ordinary website. The design style works because the imagery involved is unique and entertaining, therefore making it memorable.

Common Features

In order to maintain the correct era, a lot of imagery is used in these types of designs. These images are of people or objects from that era. In addition, a lot of texture is used. Of course, before the era of computer screens, glossy gradients were never available, so instead, everything was on paper, in fabrics, and on other textures. These textures are often used, and also aged with warm tones.
Typography, texture, and layout can all vary greatly from design to design, but they are all relevant to the time era being presented.

Examples

Eighty Two
Eighty Two

Homesatedgewater
Homesatedgewater

Piano Shop
Piano Shop

Kretivia
Kretivia

The Moon
The Moon

Large Images & Photo Backgrounds

Oversized elements are seen in many styles of web design, especially in the typography-focused and minimalistic styles. With these came a new type of web design: large photo backgrounds. The entire design focuses around one large background image, and these web designs tend to be very inspiring, beautiful, and creative.

Why Does it Work?

This look is definitely memorable. A large face or a cityscape covering one’s entire screen surely makes an impact. The large nature of the image gives a lot of detail, and a unique perspective. It immediately makes the viewer question, “What is this site about?” In other words, a web design like this gains user interest pretty quickly.

Common Features

The most common feature in this type of design is, of course, the large photo background. The photo will span across the entire page, and the photo is usually unique and creative – something that will grab the viewer’s attention quickly. Since the content must then work around the photo background, the layout is generally abstract and content is minimal. One will notice that upon entrance to one of these websites, navigation is the only content available at first, and from there the user can choose the content he or she wants.

Examples

Creative People
Creative People

Hungry For Change
Hungry For Change

Upstruct
Upstruct

Carolina Jesus
Carolina Jesus

Gazelle Touch
Gazelle Touch

Rich & Sleek User Interfaces

Even now that we’re entering into Web 3.0, the “Web 2.0” look is still going strong. Rich user interfaces, sleek gradients, and modern web-based appeal are all features of this design style. In contrast to many of the web design styles above, this look hardly ever takes inspiration from offline sources.

Why Does it Work?

It’s modern, sleek, and contemporary. Many websites that use this look are websites that are looking to sell subscriptions to web apps, development services, or some other form of modern technology. This shiny clean look shows off a brand that is modern and of high-value. This look tends to be all about correct branding.

Common Features

Gradients, transparency, reflections and very little texture are all a part of this style. Rich user interfaces that maintain a realistic look are also often used. Usually, these designs use features that create a lot of depth. For example, navigation usually contains drop shadows or inset typography, and hover stages that have push-in, push-out effects. Images, logos, and more have reflections or shadows, and are often turned at an angle going off into the distance.

One more thing to note about this style is that a lot of glossy icons are used. This style probably uses the most icons than any other style, and otherwise the design has very little imagery.

Examples

Paul J.Noble
Paul J.Noble

Dino Latoga
Dino Latoga

Campaign Monitor
Campaign Monitor

Guifx
Guifx

Things
Things

Conclusion

While many designers seem to be very against trends and already popular styles, one must understand that these certain styles are popular for a reason. That reason is that there is already something about them that works, whether it be efficiency, viewer-connection, or interesting visual appeal. The goal is to always view popular styles from an intuitive standpoint, and take from them what works best. This is the only way to learn and gain experience as a web designer, even when developing one’s own particular style.

Kayla Knight is a web designer and frontend web developer. She specializes in responsive web design, progressive web technologies, and also knows her way around most CMS's and PHP. You can find out more and check out her portfolio at kaylaknight.co.

Comments

  1. / Reply

    Great write up!

  2. / Reply

    Really great article! Thank you for sharing! =)

    • baca,
    • August 31, 2010
    / Reply

    Nice article! Thanks :D

    1. / Reply

      Love the article

  3. / Reply

    Hi, nice summary, thanks for sharing. I think one is missing here: experimental, that is websites with a style that cannot be categorized, just because it’s different from any other (or has unique features). Some of them are HTML5 experiments these days. Some are just different (take a look at http://centratissimo.musings.it if you like)

    • Karl,
    • August 31, 2010
    / Reply

    Good article. I have to disagree on your view on minimalism, though. The websites you cite are purely typographic and bare of imagery, black and white all right, but not minimalistic. Lack of color or imagery is not the principle of minimalism. And those sites shown do not strip off all that’s unnessessary, they are simply typographic and black and white (with little colored spots, I admit).

    But in spite of this: thanks for this contribution!

    • Niubi,
    • September 1, 2010
    / Reply

    Some great sites there, it’s amazing how creative some designers are these days. Personally though, I think the real metier of a good design is how well it fits into the function of what the website wants to achieve – for example, how can we best make an ecommerce site look good? I think DubLi has it down pat, myself.

    • Jamal,
    • September 1, 2010
    / Reply

    Great Article!

  4. / Reply

    Thanks for the mention! And great article! :)

  5. / Reply

    That’s a nice one :)

    I sort of notices that people do not read anymore – they just skip through the images – especially on the main page.

    So what if you would focus the next time on the internal pages design?

  6. / Reply

    Awesome post Kayla! Definitely bookmarked later for some inspiration :)

  7. / Reply

    Very nice collection of sites!

    • Me,
    • September 1, 2010
    / Reply

    The only one that appeals to me is guifx. The rest are either too cluttered or too cliche.

    • Avon,
    • September 1, 2010
    / Reply

    Amazing collections of designs…………interesting and innovative………..I love to visit your blog!!!!!!!!!!!

  8. / Reply

    Nice collection!

    We have definately started to bring in more custom illustrations into our designs for clients, showing them something they have never seen before or those little touches that are specifically for their site really helps to build a positive relationship with the client.

  9. / Reply

    Great article as ever. I think the rich and sleek sites are going to become more prominent the more the web and internet speeds up. They have a really good housing for interactivity.

  10. / Reply

    Great collection of thoughts and design. My only issue with this style of analysis of web design is that perhaps too much emphasis is placed on how the homepage looks as opposed to how the entire site functions and how the design complements the functionality and content.

    Nonetheless very good article!

    • Luke,
    • September 2, 2010
    / Reply

    This is a great selection, I use illustration at http://www.vivoocreative.co.uk and a large photo background at http://www.vivoodigital.co.uk after reading the descriptions on here it pretty much makes sense as to what I was trying to achieve anyway, so good too know I’m on the right track :)

  11. / Reply

    This is a very well written article! Great job.

  12. / Reply

    I submit our site for your “Large Images & Photo Backgrounds”! What, this isn’t an open list? Well, there is always next time…

  13. / Reply

    Great article, helped me to get the inspiration for our next free WP Theme design, thanks :)

  14. / Reply

    Nice article, thanks for sharing your thoughts Kayla.

    Some of the examples are not that great though, for example the realism ones. Those messy desk ones in most cases look just tacky and have issues with composition. Koffie looks alright but with so many coffee stains and cups on websites today it’s just another burnt out cliche. The minimalism ones are too alike as well. There’s so much more you can do with well thought out minimalism.

    • Luka M,
    • September 4, 2010
    / Reply

    For a beginner such as me, this is one very informative article.

    Thank you!

  15. / Reply

    informative article.

  16. / Reply

    thanks perfect web design post

    • XingWoo,
    • September 13, 2010
    / Reply

    Wow, this makes very good sense dude.

  17. / Reply

    Great article and nice roundup.

    • Orly,
    • September 17, 2010
    / Reply

    A spectacular collection of varied design styles. This will serve as a great inspiration. Thank you.

  18. / Reply

    You listed Fellswoop site as Clarity under Minimalism! xD

  19. / Reply

    Very nice article and very nice examples.
    Thank you for sharing!

  20. / Reply

    Really nice showcase round here, definately worth bookmarking for future reference, good for ideas n inspiration, thanks alot!

  21. / Reply

    Good points. How-how-how-ever… there are other, deeper reasons why we respond so strongly to things that offer reminders of touchable surfaces, dimensionality and life (like illustration, “paper”, faces, animal mascots, etc.).

    If you wanna know more, check Margaret Livingstone’s & David H. Hubel’s “Vision and Art: The Biology of Seeing”. Hardcover ISBN is 0810904063, paperback ISBN is 0810995549. The paperback is still in print. But if you can track down a used copy of the hardcover version, the quality of the illustrations are worth the effort and extra cost.

    Livingstone’s theories about vision and the mind are taught in some high-end design firms. Many of the rest of us can pick up these concepts on our own just by reading the book.

    I discovered Livingstone’s book in 2004. It changed my ideas about what design is and how it works – especially digital media design. It didn’t make me a better designer per se, in terms of native talent. But it let me use my skills with more sureness, and develop ways of designing and testing that produced better results faster. It’s not a particularly easy read. But some of the concepts are so revolutionary for designers and artists, that you may find you hair standing on end when you grasp their real meaning to your work. Hope I haven’t bored y’all with this recommendation – it’s really well worth it, if you’re serious about your work.

    (For me, it took a couple of weeks of reading & skimming parts of the book, then thinking & trying stuff out, then reading or skimming some more, to absorb the gist of Livingstone’s ideas and start to use them regularly.)

    • Ben,
    • September 18, 2010
    / Reply

    Great writeup with great examples. I think this will help us to demonstrate to clients the varied ways we could go with design, versus the traditional “tell me some key words that you would use to describe your ideal design…”
    FYI – not big fan of the typo designs. It’s important to match the style up with the brand and message. Big photos and calls to action for a traditional bank may not be the best option.

  22. / Reply

    Nice article, I do like the use of the mascots!

  23. / Reply

    The silverback site was one of the first I seen that used CSS3 property of multiple background images to get the leaf effect at the top of the site. Such a simple thing but with brilliant visual results. Good article guys.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Elegant Themes Coupon Code: 20% discount

While most other WordPress theme sites charge per theme, Elegant Themes is an amazing deal as you pay just once for access to 87 premium WordPress themes and a…

WrapPixel Coupon – 25% Discount

If you’re looking for an HTML or PSD template for your next website, checkout the selection of templates at WrapPixel made for web developers, designers, and agencies. You can…