The Complete Web Design Style Series (700 Designs in 14 Categories)

Over the past year or so we have periodically published web design collections and inspirational showcases from the most popular and important design categories. In total there are 14 different and varied categories or styles and within each category there are 50 carefully chosen web designs (that is a total of 700 web designs). We have called this ‘complete’ inspirational collection the Web Design Style Series.

In total the entire collection has had just over 5,000 Delicious saves, and as such this post was created. Due to its popularity we felt it may be useful to have a central hub for the entire collection and make it easier for you to find the inspiration you are looking for quickly and painlessly.

The Web Design Style Series includes the following design categories: Blogs, Ecommerce, Personal Portfolios, Web Design Agencies & Companies, Magazine & Newspaper, Web Application, Dark, Minimal, Illustrative, Vintage & Retro, Typography, Large Background, Bright & Colorful and, finally, Creative 404 designs.
Each style has at least 50 individual designs, and with each article broken down into further categories.

Below you will find detailed descriptions of each web design style with some examples and previews, with links to the complete collections.

50 Personal Blog Web Designs

The importance of a unique, memorable and well designed blog, especially within the design community, should not be underestimated – First impressions really do count and your personal blog gives you not only an opportunity to showcase your skills, it also allows you to highlight how professional and serious you are as a designer. The art of good blog design is attempting to encapsulate your personal blog writing, design style and character into the design – Its a very tricky balance.
In this first article from our Design Style Series, we show you just that, 50 beautiful blog designs that successfully capture the professionalism and character of there respective developers and designers.

View the complete Showcase: 50 Personal Blog Web Designs »

Here are some examples from this Series:
50 Personal Blog Web Designs
50 Personal Blog Web Designs
50 Personal Blog Web Designs

50 Corporate Ecommerce Web Designs

Imagine a representative from a huge corporate company walking into your freelance office and drops on your lap a proposal for there new website, you read through the huge document and then you ask: “What is your proposed budget for this project?” – He gives you the answer, and… WOW!!!

The scenario above would never happen in the real world – these types of contracts would never be handed to an individual designer, they would always be awarded to a larger and well established design company. This size of project would usually involve a huge team of designers, developers, usability professionals and marketing experts. Most web design individuals and small agencies could simply not handle this size of project.

All of the ecommerce sites in this Top 50 Design Style Series have all been designed by highly respected and well established design companies, and you can clearly see from the majestic showcase were and how the money has been spent. Beautiful web sites!

View the complete Showcase: 50 Corporate Ecommerce Web Designs »

Here are some examples from this Series:
50 Corporate Ecommerce Web Designs
50 Corporate Ecommerce Web Designs
50 Corporate Ecommerce Web Designs

50 Personal Portfolio Websites

Creating your own personal portfolio website will probably be the most difficult design project you will ever undertake. We, as designers, are our own worst critics, and no matter what, we always feel there is something we could have improved on or tweaked.
Have a look at these portfolio designs for some inspiration, they range from web design and developers (these, as expected, are pixel perfect), graphic designers (always colorful and bright) and photographers.

View the complete Showcase: 50 Personal Portfolio Websites »

Here are some examples from this Series:
50 Personal Portfolio Websites
50 Personal Portfolio Websites
50 Personal Portfolio Websites

50 Professional Web Design Agency Web Sites

When designing the homepage of any web design agency, it basically comes down to what clientele you are targeting: Is it corporate businesses and professional individuals or is it small corner-shop stores and and personal homepages and blogs?

How your agency is first portrayed to any potential client is one of the three cornerstones to your success. Firstly, being a good and professional designer is a must, secondly, being savvy within business and marketing will bring in leads, and lastly, first impressions do count, not only personally but also professionally. So make sure you give your design agency web site the thought and design it needs, and design your web design business in such a way that will have your potential clients begging you to work with them.

View the complete Showcase: 50 Professional Web Design Agency Web Sites »

Here are some examples from this Series:
50 Professional Web Design Agency Web Sites
50 Professional Web Design Agency Web Sites
50 Professional Web Design Agency Web Sites

50 Magazine and Newspaper Styled Web Designs

The magazine style within web design are traditionally web sites that are content heavy, and by content we mean mainly text and minimal images, that display there content in blocks or columns of headings with a small excerpt that leads to the full article.
Unlike other web design styles that can use larger images to compliment the design, the Magazine style is limited to being designed within the parameters that the content (namely, the text and the occasional thumbnail) dictates, and that is were the design problems lie. How do you design a web site that is content heavy and make it visual eye candy?
We have 50 examples of well designed magazine layouts in this article.

View the complete Showcase: 50 Magazine and Newspaper Styled Web Designs »

Here are some examples from this Series:
50 Magazine and Newspaper Styled Web Designs
50 Magazine and Newspaper Styled Web Designs
50 Magazine and Newspaper Styled Web Designs

50 Web Application and Service Web Site Designs

If we look at some of the biggest names in web apps and services and ask the question, what do they have in common? Have a look at Google Search, Twitter, Delicious or to a lesser extent Flickr, and ask the questions, how did they become so popular? What distinguishes them from there competitors? The answer is simplicity. They are all memorable because they are easy to use, learn and understand and of course, they are backed up by a powerful tool as well. When you arrive at each site the function that they perform is clearly defined, they use basic navigation that everyone can understand and you can very quickly perform tasks.

There is no clear and defined winning design formula to a popular web app or service, just guidelines. Nor is there a typical design style for you to follow, as this showcase unintentionally proves. What we have done is showcased 50 of the best designed web app and service web sites, broken down into the following categories: Clean, Simple and Nice Designs, Minimal and Effective, Vector and Large Background, Corporate and Professional, Modern and Typical (Web 2.0ish), Stylish and Classic, Graphically Improved and Flash, Flex and AIR Designs.

View the complete Showcase: 50 Web Application and Service Web Site Designs »

Here are some examples from this Series:
50 Web Application and Service Web Site Designs
50 Web Application and Service Web Site Designs
50 Web Application and Service Web Site Designs

50 Minimally Designed Web Sites

The most important factor for minimal to work well, as it should be with all design styles (but, not always the case), is the content. Without good writing or a strong portfolio, the style has no impact and the web design looks cheap. And that is the key to minimal, in the hands of a skilled web designer, they know that the site design has to accentuate the content, and the content, in return, accentuates the web design.
Creating an effective minimal web design, at first thought, would seem to be the cheaper, easier and quicker option to merely throw up a site That is most definitely not the case. Knowing what elements to strip out of a page while still maintaining usability, is just one of the the many skills you will need to successfully build a minimal web design.
The collection of sites in this article, are great examples of successfully and beautifully designed minimal websites.

View the complete Showcase: 50 Minimally Designed Web Sites »

Here are some examples from this Series:
50 Minimally Designed Web Sites
50 Minimally Designed Web Sites
50 Minimally Designed Web Sites

50 Vintage and Retro Web Designs

There is only one web design style that you can rely on and be deemed timeless – and that is the Vintage style. And accompanied with that, and similar in style, there is the permanently cool and always creative – retro(ism).

Vintage and retro should not be categorized as a style – they are much more than that. They are a movement in themselves and a bold and creative statement that is unparalleled with any other other web design style. This article is a homage to these styles…

View the complete Showcase: 50 Vintage and Retro Web Designs »

Here are some examples from this Series:
50 Vintage and Retro Web Designs
50 Vintage and Retro Web Designs
50 Vintage and Retro Web Designs

50 Illustrative Web Designs

Using illustration in web design gives the designer the opportunity to convey there own personal and unique style, and be able to say "this site is mine, and look what I can do". Very few web design styles will give an artist or designer this opportunity.

What makes the examples the designs in this article stand out are not just the beautiful illustrative art work nor the carefully crafted web designs, it is the balance between the two that distinguishes them from the rest. They all manage to be unique in there own right, by highlighting the illustration with carefully positioned content.
And when all of this is a achieved successfully, the effect is amazing and memorable.

View the complete Showcase: 50 Illustrative Web Designs »

Here are some examples from this Series:
50 Illustrative Web Designs
50 Illustrative Web Designs
50 Illustrative Web Designs

50 Effective Uses of Typography Within Web Design

Not only do we showcase typography in the classic sense, within this showcase, but also illustrate that the combination of web design and great typography can be used effectively, along with clever color selection, and create usable web sites thats base design is dominated by beautiful text, for either navigation, a good headline, a logo or even used as a background for the entire content.

View the complete Showcase: 50 Effective Uses of Typography Within Web Design »

Here are some examples from this Series:
50 Effective Uses of Typography Within Web Design
50 Effective Uses of Typography Within Web Design
50 Effective Uses of Typography Within Web Design

50 Large Photography Backgrounds within Web Design

The first thing that springs to mind when thinking about large photography backgrounds within web design are of simple photographers portfolio website or even that of a design company. Upon researching this article, the surprising thing was that this type of background does not seem to have any limitations, it is equally suited to ecommerce sites, restaurant sites, web design agencies.. basically all types of web sites, as you will see from the collection below.

There is only thing all of the sites from this post have in common, and that is good, creative and professional photography. The photograph itself is the focus of the site, with each having an overlay of content to bring the site alive and make it functional. Sometimes it seems as though the designers want you to focus more on the image rather than the content, such is the power of each beautiful shot.

View the complete Showcase: 50 Large Photography Backgrounds within Web Design »

Here are some examples from this Series:
50 Large Photography Backgrounds within Web Design
50 Large Photography Backgrounds within Web Design
50 Large Photography Backgrounds within Web Design

50 Bright and Vibrant Web Designs

The conservative web designer will design a dark web site or a light web site, and with everything in between in gray. Are you this type of designer? Or, are you bold enough and brave enough to let your creativity rein free and allow bright and vibrant colors to shine through in your next design project? What does the level of color on your web site say about you?
The 50 web designs in this article do not only show no fear of using bright and dominant colors, they are also all beautiful crafted web designs.

View the complete Showcase: 50 Bright and Vibrant Web Designs »

Here are some examples from this Series:
50 Bright and Vibrant Web Designs
50 Bright and Vibrant Web Designs
50 Bright and Vibrant Web Designs

50 Examples of Black and Dark in Web Design

Black is not used as the main color very often in text content rich web sites. It can be used and is very popular by design related personal portfolios and photography sites, as you will see in this showcase. It allows the artwork to take center stage and be the primary focus of the viewer.

Of course, the use of black within web design is not only limited to personal portfolios or design agencies, it is used across the full spectrum of all web design styles. Black really can be beautiful!.

View the complete Showcase: 50 Examples of Black and Dark in Web Design »

Here are some examples from this Series:
50 Examples of Black and Dark in Web Design
50 Examples of Black and Dark in Web Design
50 Examples of Black and Dark in Web Design

50 Examples of Creative 404 – Page Not Found Pages

There are two ways you can go when designing a 404 page for your website – you could go the sensible route and make it usable and try to help the reader find exactly what they were looking for or, you could design a 404 page that not only defines the character of the web site or the designer, but also makes it a pleasure and surprise. Its amazing the effect a sprinkle of humor and some creativity can have on someone and it will certainly make your site that little bit more memorable.

In this series, we have a collection of sites with original, creative and generally humorous 404 pages. You may notice that some do not meet even the most basic usability guidelines, but who cares, they make us smile! Hope you enjoy them.

View the complete Showcase: 50 Examples of Creative 404 – Page Not Found Pages »

Here are some examples from this Series:
50 Examples of Creative 404 – Page Not Found Pages
50 Examples of Creative 404 – Page Not Found Pages
50 Examples of Creative 404 – Page Not Found Pages

Author: (608 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments