Iphone icon set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

The real design trends for 2011

Comments and suggestions in here

Everything inside the design world is permanently changing, evolving and adapting into new ways of expression and communication looking to satisfy the new consuming needs and set innovative exchanging channels. 2010 made a huge closure for the final year of the first XXI century decade, we witnessed the rising of tablets (iPad, Samsung Galaxy Tablet among others), the demise of Internet Explorer 6 and the absurd fanaticism towards Flash (though it’s losing a lot of fans), which is going to be slowly replaced by HTML5 (we’re not saying that Flash is dead, only that HTML5 will begin to cover many of its current uses).


Editorial disclaimer

Of course that the common design elements such as typography, navigability, color and more have also changed and as you will see on this article, these changes must be apprehended by every designer that wants to set his mark during 2011. Our team made a thoughtful investigation before releasing this article, we stumbled across several web galleries such as Creattica and Behance to see what people are currently enjoying to stare at; so it’s important to clarify that this is not an opinion article, because all the information contained on this post is fully supported by several references and resources that we studied and is not based exclusively in personal preferences. Bottom line, our main purpose is to offer you a complete revision across those elements that established the trends during 2010 and we consider that are going to evolve or get bigger during 2011.

No more clutter, it’s time to clean things up

There’s been several years from the inception of the internet, since the early nineties when only a few websites were online and all the design was ruled by Comic Sans and primary colors it has occurred a series of changes that have made a complete transformation to the way web design must be taken.

In 2010 the places filled with details, heavy text blocks, dark color palettes and picture after picture began to see their decline as people begin to opt for much cleaner interfaces, way more minimal. By minimal we’re not meaning mediocre but all the opposite, a better use of the diagramming without saturating the pages with irrelevant information.

designtrends1101

The Jane Doe theme by Curt Ziegler is a good example of this new clean tendency, the site has a very restricted color palette, SansSerif everywhere and a very subtle texture on the back. Beyond that we can realize how the clean spaces doesn’t look like a laziness expression from the author but as a right-guess; the information is well distributed and the navigability is completely functional.

designtrends1102

InfiVision’s website took things a little bit further by using illustrations, serif fonts and a color background. But even with these details the site remains clean, the diagramming is excellent and the fonts look nice. What this site teaches us is that you can get riskier without having to make things look bizarre or old-fashioned.

designtrends1103

Image Mechanics is a website dedicated to develop mobile applications and provide design services in general. Their website is a clear example of the quality of their job, as you will be able to find all their information inside a beautiful and elegant interface where interactivity does everything, lots of white areas and bold typefaces complete the site’s identity.

More good examples

designtrends1105

designtrends1106

designtrends1107

designtrends1108

Don’t be shy, start playing with typefaces

designtrends1112

Big fonts can work if you know the secret

Usually typefaces play a minor role inside any website, as the only purpose was to display information, which means that they were utilized for their literal purpose. Since 2010, a new trend has began to gain strength and that’s utilizing big and bold fonts with the exclusive intention of grab the surfer’s attention. You can find a lot examples of how a strong title can be as eye-catching as a picture, it’s just an issue of playing your carts in a good way.

It’s OK to use a 60 pt title on top of your page as long as it looks well and not as a serious mistake. Likewise the idea of small fonts to show genius is now obsolete and on these days can be easily confused as a lack of trust.

designtrends1104

Chris Thurman may seem a little bit cocky, but the truth is that he is actually doing something for the welfare of the whole web design community by delivering quality products such as their personal portfolio, which is a brilliant example of how to use big typefaces in a really nice way. Mixing sans serif and serif fonts, color and b/w fonts and different sizes can bring a lot of life to your site.

designtrends1109

Typography is everything on this webpage, from the small menu elements proceeded by a shocking header and the great text boxes with a subtle grunge texture. Besides the designer’s picture (which is not a photograph by the way) there’s not a single picture on this page and it doesn’t look bad but at the opposite, looks really well.

designtrends1110

Another beautiful example of typography taking the lead role inside a webpage. With a basic three color palette, the designer experimented with many different typefaces and somehow nailed because the final design looks awesome, so this proves you that it’s not strictly necessary to stick to a single font family when constructing a website.

designtrends1111

Carsonified is the living expression of typography utilized both as a communication media and illustrating component at the same time. Every word on the design is providing important information for the visitors and at the same time is generating an aesthetical experience to the people. The use of color is very thoughtful and works really great with the selected fonts.

Reducing kerning and tracking values

With the present need of designing for mobile devices such as iPhone and Android, designers have learned that they no longer have huge resolutions to work with and that the 960 grid is the new commander in chief. With this reduction in sizes, one of the best ways of save space is by reducing the space between words and characters to the minimal values. So it’s now often to find really tight menu elements that fortunately look great and are still easy to read.

designtrends1113

Creative agency Epic has started to work with typefaces on their website to fit the mobile market, the main menu features a sans-serif font with a reduced tracking value that allows to display all the elements in a small area that can probably fit inside a mobile screen. It’s important to use proper font sizes to maintain the readability as well as play with contrast, because a red font over a vermilion background is not just the best choice.

designtrends1114

Many years ago, the members of the Bauhaus school were the first ones that begun working with bold typefaces in an unconventional way, and a reminiscence of that era can be sensed in places like this one. Look at the amount of words that are displayed inside the text box thanks to the reduced tracking value and once again, notice the high contrast and proper size implemented to maintain the legibility at its best.

designtrends1115

Another example of reducing spaces is The Pineapple Thief. By looking at the menu you can truly realize the purpose of reducing tracking, you can still understand with ease the words even when they’re boxed in a very small space, though it’s not advisable to excess its use throughout the whole place because it becomes annoying.

More examples of reduced tracking

designtrends1116

designtrends1117

designtrends1118

designtrends1119

Quit using plain backgrounds, textures rock!

For the past few years, a hard tendency of zero textures and fully gradient and solid color objects ruled. One of the reasons behind this phenomena was the popularity of the web 2.0 look, which is characterized by glossy elements, gradients and plain backgrounds.

But now the trend is beginning to change and it seems that it’s time for textures to reappear in web design and the evidence relies on the several websites that are starting to use noisy textures within their places. The grunge look that was so popular during the nineties has been reinterpreted and adapted to the present time, with a new style of combining grungy textures along with clean interfaces and bold typefaces; graphic designers are returning to the creation of custom Photoshop textures, which now are way much nicer than before thanks to the advance in this popular graphic software.

The great thing about textures is that they add richness to the design, you can say that they spice up things a little bit. Currently the most popular textures are the noisy / grunge ones, wood-like textures and mostly everything that comes up from experimentation.

designtrends1120

Go Mammoth opted for a vintage look on their website, and as a part of this style they used a creased paper texture on the background (you can appreciate it with detail on the zoom in of the screenshot) that just fits perfectly with all the rest of the site.

designtrends1121

Wearable Print has a beautiful noise texture on the background, kind of a fabric style with a very low opacity so it does not get too scandalous. Just try to imagine how this site will look if we change the texture for a plain beige tone.

designtrends1122

Bermon Painter’s website uses a combination of paper and subtle noise textures for the background that together generate a really rich surface for all the remaining information to place above.

designtrends1123

Kuhboom makes an splendid implementation of a wood texture on its background, it’s very important to use a proper chromatic palette when you’re going to work with nature textures like wood so your design does not look weird.

designtrends1124

On this website you can also find a lovely application of wood texture that fits perfectly with a very green design, on this case the texture has been applied in a nice and elegant way that does not look awkward at all.

designtrends1131

A beautiful website where you can find both wood and noise textures over the entire site. The application turned out really well and the site’s look is just beautiful and proves how you can make a proper use of textures inside your designs.

More great examples

designtrends1125

designtrends1126

designtrends1130

designtrends1127

designtrends1128

designtrends1129

Crispy, pixel perfect web elements are the new look

As we said at the beginning of this article, resolutions are changing in a way that have never happened before, and now designers need to worry not only for making high-scale web elements but also super crisp icons, buttons and menus that can look perfect both in a mobile device and a 60 inch TV screen.

So now is becoming a trend in web design to make everything pixel perfect, which is a technique that can be achieved with patience and using powerful graphic software such as Photoshop and Illustrator. The idea of pixel perfect is that every detail is carefully planned so you don’t see any blurry or pixelated areas. If you buy a template, button set or just anything web from the major suppliers such as Iconshock, you will receive a complete set with not only big objects but in several resolutions, which usually oscillate from 16 pixels to 256, covering almost every existent screen resolution.

The trick for creating beautiful pixel elements is to always use the Anti-alias property along with the Snap to Pixels options, also you must always zoom in whilst designing to make sure that you’re doing things as perfect as possible it is.

designtrends1132

This button is a perfect example of what we’re talking about, carefully crafted and just perfect for the view, something like this is what you need to achieve from now on.

designtrends1133

These beautiful boxes are as simple as you can imagine because all the importance has been given to the details, every corner was perfectly executed, even the shadows look highly crispy.

designtrends1134

You can use textures along with pixel perfect objects, but you must be really careful that the texture does not suffer any damage when switching from one resolution to another. This case nailed and is a good example of crisp design.

designtrends1135

You can recognize pixel perfect design from miles, it’s like watching regular television and then switch to HD, you’re seeing the same content but with much more detail and richness.

designtrends1136

A beautiful web template with tons of pixel perfect buttons and web elements, it’s just too great to go back to the old blurry borders and stuff.

More crispy examples

designtrends1163

designtrends1164

designtrends1165

Don’t force your eyes, employ bigger icons

A few years, there was an unbreakable rule that told that everything that was going for the internet had to be optimized with a 72 dpi resolution and the small size possible. Now that we’re at the gates of a new decade, all these rules are starting to seem obsolete. Mac OS X has set a maximum icon resolution of 512×512 pixels and many monitors support 300 dpi resolutions, so that thing of doing everything small and shy is over, the era of big icons and high detailed elements has began.

Step by step, most websites are changing their old 24 x 24 pixel icons for much bigger ones, this does not only affect icon’s size itself but also the amount of details that can know be incrusted within a single icon. We can expect that throughout 2011 more and more sites will insert bigger icons on their sites.

designtrends1137

Andrew McClintock’s website uses beautiful big icons full of details, you can notice all the pixel work that’s behind every icon, with a great management of lights and shadows that gives a lot of realism to every piece.

designtrends1138

Another beautiful example of bigger icon design, achieving the great amount of details on the digital screen section will be difficult in a smaller format.

designtrends1139

Here you can realize what big icon really means, because the same icon is used for both the header section and as an icon at the bottom. You can create big icons both in pixel and vector formats, this is completely up to you, or even mixing techniques to see what happens.

designtrends1140

Using big icons will help you create more complex elements and at the same time communicate a lot more of things using a single icon. But it’s also important to realize that at bigger sizes the errors also grow, so be extremely careful whilst customizing your icons.

A few more good examples

designtrends1141

designtrends1143

designtrends1142

designtrends1144

Let your pictures be the background

In the past it was considered a true genius the one that put a big image on a website as a background and that this pictures was neither pixelated or oversized. Now with the increment of DSLR cameras, megapixels and photo optimization, it’s a reality to use massive quality pictures for your backgrounds. This technique is highly appreciated by graphic designers and photographers, though we found different kinds of websites utilizing it as well.

The trick to make this work is to always shot at higher resolutions and then fix your image in Photoshop to reduce its size without losing quality, remember that everything in web has to be in RGB mode (CMYK is for printing) and cannot surpass a size of 1 Mb (unless you know that the people that are going to visit your site possess a good internet connection).

designtrends1145

This is the first example of massive pictures in web design, though this image has obviously been passed through a digital edition process, it can be considered as part of the category.

designtrends1146

It’s suggested that when you use massive pictures for your designs, a part of the picture display less items that the rest so you can place text or any other element on top of it and that this element cab be read easily.

designtrends1147

Take advantage of your camera by implementing motion swap, blur and many other cool effects to your shots that can provide a lot of motion to your websites like this awesome hockey picture from Simon Plestenjak’s portfolio.

designtrends1148

Photography is without a doubt the best way to awake people’s emotions, you can use it not only as a background but also make it fit with the rest of the design to deliver a complete feeling to the audience.

designtrends1149

Selective focus is an excellent diagramming tool as you can see on this example where the plate is focused and the rest blurred so the menu doesn’t get lost and people can navigate the site with ease.

More great examples

designtrends1150

designtrends1151

designtrends1152

designtrends1153

And if you want to go further, then try animated backgrounds

So using big photographs is now possible, but what if we tell you that you can go even further and place fullscreen or really big animations on your websites?. Thanks to Flash and HTML5 this is now a reality. It’s amazing how developers have managed to place incredible animations that don’t take too much broadband, making the animation possible.

These animations are part of the next era in web design, where 2D will be replaced by 3D and both hardware and applications will help in that process by adjusting to these technologies. Although this technique is still in a baby face, the applications are already great and on the next years there will be more and more sites using fully animated interfaces.

designtrends1154

Wrangler Europe is the first example of this section. On this page you an actually play and rewind a short clip by simply executing a drag function with your mouse, the fluency of the animation is just great and does not affect your computer’s performance.

designtrends1155

Bandit3 is an astounding Flash website where you can actually go across the city and interact with the different elements that you will find on it. This type of animation is an stunning example of what developers are currently accomplishing with Flash and HTML5.

designtrends1156

Louis Vuitton launched a beautiful campaign with the three major soccer players in history (Pelé, Maradona and Zidane) and to support it they launched a website where you can see videos, articles and of course a full screen animated introduction.

designtrends1157

Another animated background, created on this case by the people of Nike. You will find a few storytellers featured on fullscreen videos without the navigation buttons ever getting lost.

And more examples

designtrends1158

designtrends1159

designtrends1160

designtrends1161

designtrends1162

Lighter spaces will still rocking this year

During the past few years, there’s been a tendency for developing heavy, over saturated websites with dark colors and bright fonts on top of them, but now that tendency is beginning to change. Along with the new wave of making everything much cleaner and minimal than before comes also a preference for lighter spaces, with pastel tones and light palettes.

By making lighter interfaces, information can be easily processed by the average viewer, because with darker backgrounds an inclination towards clutter shows up, and people spend less time on the page before switching to another one. Our advice then is for you to bright up your page during 2011.

designtrends1166

A Modern Eden is one example of lighter interfaces, the color palette is composed by light green, white, yellow and basically an earth colors palette. The typography is also an example of a much lighter design, as it does not use much bolds and heavy fonts.

designtrends1167

These websites are just so easy for the eyes that they can become eye-catching without even having an astounding design, just by offering a refreshing color palette they’re able to grab some audience.

designtrends1168

These guys are not only working for a noble cause on real life but also are contributing to educate everyone’s eyes with a lovely webpage where light colors and a perfectly chosen typography are part of it.

designtrends1169

Another great example that on this case makes a nice appropriation of textures that unlike most sites are not overused to generate darker tones and textures.

And more great examples

designtrends1170

designtrends1171

designtrends1172

designtrends1173

Break the 90 degrees, opt for rounded corners

During the first Internet years, the graphic programs where very basic and there was not amazing tools such as CS5 and the new CSS3, and that’s why many designers took the habit of doing everything straight, because it was much simpler to do and everyone was doing it, but now that there’s been more than 10 years since the end of the 20th century, it’s time for things to change a little bit.

One of the most common things to find was straight corners everywhere, from windows to button, everything was built with a 90 degrees corner. Now we’re seeing how many websites are beginning to incorporate rounded corners on their interfaces, which gives a smoother and nicer appearance to design, you can generate these rounded elements via Illustrator or any other graphic program or utilizing directly a language program such as CSS3.

designtrends1174

One of the best design sources around, Creattica’s webpage follows a strict code of good graphic design practices such as incorporating clean interfaces and on this case, rounded corners on their elements.

designtrends1175

Everything on this site is rounded and looks beautiful, because it provides a friendly and softer appearance to the whole page, and this happened by only changing the straight corners for rounded ones.

designtrends1176

Beautiful website that uses a beautiful vintage aesthetic and rounded corners on the header and on many other elements across the page. Combining different styles along with the latest trends is always a nice resource in web design.

designtrends1177

Rounded corners usually go great on natural and environmentalist webpages as they suggest fluidity and just a natural movement.

More examples

designtrends1178

designtrends1179

designtrends1180

designtrends1181

Think not only vertical, there’s also an horizontal space

The most common way of designing a website is using a vertical navigation, which is obviously an effective way of displaying information in a logical and organized way, but what about sideways?, you can easily achieve the same type of structure following an horizontal pitch.

After completing our research, we noticed that many websites are starting to utilize an horizontal navigation following the trend initiated by the developers of The Horizontal Way, which is one of the first websites that uses a fully horizontal navigation and features many more sites with this type of navigability.

designtrends1182

And this is the example that we were talking about, The Horizontal Way features many great websites with an horizontal navigation, so if you want to create a site like this, then this is the perfect reference place to begin.

designtrends1183

Peter Pearson’s website does not only posses an horizontal system but also a beautiful aesthetic that can be taken as reference for any graphic designer.

designtrends1184

Horizontal navigation works great for Photography websites as it helps people to avoid slow galleries and stuff and switch it for a progressive loading system that works horizontally.

designtrends1185

Sarah and Chris Rhoads have a beautiful weblog with a custom scroll bar and an horizontal navigation nicely diagrammed and that even has an speed control included on top of the site.

And keep scrolling that way

designtrends1186

designtrends1187

designtrends1286

designtrends1188

Not enough space?, try to utilize sliders

Using sliders is a technique that does not only save a lot of space by showing many information in a single spot but also can be used as a great design element to prettify the whole aesthetic of a website, and that can be confirmed with the fact that there’s more than one site that actually sells slider designs ready for installation.

Now we want to show you some examples of beautiful sliders that we encountered during our research, some of them used with a more graphic intention and others to provide plenty of information without using an excessive amount of space.

designtrends1189

An astonishing slider design, the interactivity is amazing and not only provides a great touch to the design but also provides complementary information to the visitor.

designtrends1190

The dotted lines and textured buttons are a beautiful detail for this slider that is one of the most prominent elements of this whole webpage.

designtrends1191

An important thing in web design is integration, which is creating a complete atmosphere inside your designs. A good example of this is Monfa, where the slider’s buttons appear like there were part of the illustration.

designtrends1192

Corporative designs also make use of sliders to show their products in a fancy and elegant way, this means that sliders can range from intricated designs to simple and classy designs.

designtrends1193

Iconshock revamped their website in 2010, the whole site went through an exhaustive redesign process and the result is splendid. One of the great things about this new design is the slider, simple and gorgeous.

More great sliders

designtrends1194

designtrends1195

designtrends1196

No more realism, place vector illustrations

If it’s true that photography will always have its place in web design, the trend for 2011 is quit using realistic illustrations and big photographs and begin implementing big vector illustrations. The reason behind this change is that this illustrations can help to set surreal sceneries and also are more lightweight than complicated designs.

So this is not an affirmation that vector illustrations are going to be the only accepted style, but that graphic design is going back to its roots and in that order of ideas, it’s time to leave aside those fancy illustrations and go with something a little bit simpler.

designtrends1197

Felipe is a Colombian graphic designer that developed one of the most beautiful portfolios around. The central character is a clear example of big vector illustrations that are starting to being used.

designtrends1198

Awesome character designs, from the little Pikachu-like to the big blue fella, this is another great example of simple vector artworks taking over realistic style.

designtrends1199

Another tendency that we have witnessed is that companies are creating more friendly websites and are abandoning the old clean and sober look, Veboo is a breathing example of that.

Need inspiration?, here’s a couple more sites

designtrends1200

designtrends1201

designtrends1202

designtrends1203

designtrends1204

designtrends1243

Footers are there for a reason, not only decoration

Webdesignshock gave a first clue a few months ago on this topic with the huge showcase of 200 great footer designs and now that 2010 is over we want to say that we were right, footers are becoming more important every day as designers realize that they’re a vital part of every design and they must be utilized with the same importance than the header.

On the past footers were used to place disclaimers, some basic company information or the contact link of the company, but now that’s changing. Footers are now areas where you can place things like social stream boxes, contact forms and tons of information, let’s take a look at some examples.

designtrends1205

This is a good example of modern web design: Textures, vector elements and of course a functional footer where you can find complementary information and enjoy a good design.

designtrends1206

And the good design practices keep showing up, here you can find noise textures, a pixel perfect button and a good diagramming, everything inside a very good looking footer.

designtrends1207

Beautiful footer design by Sawyer Hollenshead, you can find his latest tweets, contact information and social links escorted by a pretty cool city illustration on the bottom.

designtrends1208

Beautiful noise texture, nice icons and color palette and relevant information that makes a proper use of the footer section on this page.

Let’s stare at some more good footers

designtrends1209

designtrends1210

designtrends1211

designtrends1212

designtrends1213

960 grid system will still rule for a while

The 960 grid system has been defining the way web design is made during the last couple of years, and due to the huge increment on the tablet and smartphone sells, this system will have an extended time of life. What the system basically does is divide the site in a 12 column grid of 60 pixels wide and a variation of that consists in a 16 column grid.

960 pixels is the safe zone for devices like iPhone, which is becoming more and more popular among people, and this dictates that designer must absolutely respect this dimensions. On this case instead of showing you a few examples of the 960 grid applied in website we want to recommend you the official 960 website where you can find several examples and a complete documentation on the subject.

designtrends1214

Work with stripes instead of plain and boring elements

Well it’s not exactly that rainbow screen that used to show up during those times where the TV signal disappeared every once in a while, but designing using stripes is starting to become very popular among graphic designers, and that’s why we consider that probably during this year we’re going to see more stripes inside web design.

You can use stripes on a traditional way, simulating the old TV look or simply for recreating light and other elements, the possibilities are open and waiting for you to discover them, here’s a short list of examples so you can grasp some inspiration.

designtrends1215

One first way of using stripes and that’s becoming a very strong trend among designers is this little stripes that are used instead of the regular horizontal lines, they give a nicer appearance to every design and fulfill exactly the same mission which is helping with the diagramming of the site.

designtrends1216

The second way of using stripes is the classic TV style. Organic Grid makes a beautiful use of stripes throughout their entire website, which is one of the nicest of this whole article.

designtrends1217

And the third example of using stripes is on the way that you can see behind this tree’s illustration. These stripes generate a lovely texture to every design and are subtle enough to be used anywhere.

Now let’s see a few more examples

designtrends1218

designtrends1219

designtrends1244

designtrends1220

designtrends1221

designtrends1222

designtrends1223

designtrends1241

Use boxes for diagramming, simple as that

Diagramming is something implicit in graphic and web design, so you’re probably wondering what’s the novelty of this category. Well the thing is that now many graphic and web designers are using small boxes on their websites to organize all the information instead of big columns and cluttered structures, which points to the clean look that we already talked about before.

So, during 2011, is probably that the standard web structure with a big header, a content section and finally a footer is going to be displaced by new types of grids and structures with more of these little boxes included inside of them.

designtrends1224

Perfect reticules with reduced spaces in between is what you perceive when visiting this page; the diagramming is very simplistic and the boxes do all the diagramming instead of a complex structure.

designtrends1225

Usually these boxes can be used to display a little introduction and a picture to inform people about what the content is about, this is a great way of safe space and communicate all the important things to the visitor.

designtrends1226

You can play with hierarchies to create more animated designs, Adrenonline is an example of this as the page plays with different box sizes through the whole page.

designtrends1227

Many weblogs are utilizing boxes to display more information in less space, as you can see in Orange Apple’s webpage.

More examples

designtrends1228

designtrends1229

designtrends1230

No more numbered pages, try progressive loading

This is not specifically a web design tendency but a functionality trend; previously all the websites that had tons of information to displayed used several pages for people to look for, this process was tedious as every time the person needed to see more content the page refreshed entirely and the whole thing just got boring, fortunately now there’s a better way to do things and it’s called progressive loading.

What progressive loading does is that as you keep scrolling, the new content is loaded instead of the entire webpage, so you don’t have to spend longer periods before continue your research as the server now needs to load less elements. A great example of progressive loading can be found at Iconshock’s icon sets, where as you continue to scroll, new icons are showed up.

designtrends1231

designtrends1275

designtrends1232

Steady objects work great with progressive loading

If you incorporate a progressive loading system, you need to define certain elements to remain visible throughout the entire navigation, so people can always take another direction or go back home. Usually this steady elements are displayed on the sides but you can place them also on top or at the bottom of a page.

Usually this elements contain menu buttons, social links or just a go home button, the important thing is that the visitor doesn’t feel abandoned at any moment during his visit.

designtrends1276

Creattica’s menu remains during the entire navigation process, so people can always access to the main options and links.

designtrends1277

A great idea is to keep your social buttons in a fixed position so people can rate and share your contents at any moment during the navigation.

designtrends1279

This element is utilized as an advertising banner that offers an specific service, these kind of elements are known as floating bars and are very popular amongst e-commerce websites.

Why having a lot of pages?, make single page websites

This is another topic that points to functionality, the use of several pages in web design tends to difficult every programmer’s job as he has to organize more folders and roots underneath the pretty design that’s displayed in front, this also represents a reduction in the loading times which usually ends up driving away the visitors.

One of the different ways that can provide a solution to this problem is the creation of single pages, which can utilize progressive loading to be more effective than page after page inside a website and can also make a much better appropriation of design and diagramming.

designtrends1233

You can utilize single page websites when you don’t have a lot of information but it’s still enough to fill a couple of pages. This website is a good example of how to save space by making a great web design.

designtrends1234

You can also use single pages to create different ambiences inside an only stage. An example of this can be found at Midtsommerjazz 2010 where using different colors the design team created a beautiful single page website.

designtrends1235

You can also create an unifying element to conserve the integrity across the entire page, on this case the color ribbon is present during the whole site, helping to keep everything with the same identity.

designtrends1236

Another way of making astounding single page websites is by transforming the whole design into an illustration, as it happens on this place where you begin on the sky and end at the bottom of the sea.

More great examples

designtrends1237

designtrends1238

designtrends1239

designtrends1240

There’s more than one way of making shadows

This is something that apparently has been ignored by many designers during all these years, and is the fact that shadows behave in more than one way, but the only method used was cloning the element, turn it to black, then fade it and finally place it according to the light source.

Now we have been seen new ways of playing with shadows, with new designs that include adding textures, changing their form and just thinking out of the box whilst maintaining the physics login unaltered. So, since 2011 we’re going to see more fancy objects and great shadows behind or even on top of them

designtrends1242

This shadow helps you create more realistic objects because it’s more natural than the regular shadows used by default in most icons and illustrations. On this picture you can actually feel the folded sensation.

designtrends1245

This folded appearance helps to give a 3D look to your elements without using intricated methods or complex gradients and textures.

designtrends1246

On this case the different shadows overlap between each other, generating a beautiful appearance for the different elements on this webpage. The difference between these and the regular shadows is so subtle and yet so noticeable that you should start using these type of shadows on your designs occasionally.

designtrends1247

You can mix stripes and shadow to elaborate lovely designs like the shadows utilized on this website.

More nice examples

designtrends1248

designtrends1249

designtrends1250

CSS3 has arrived, so be careful Photoshop

There was a lot of debate during 2010 around CSS3, some people said that Photoshop was done, others said that this was going to be a huge complement for web developers and the rest simply said that was the natural course of things, but if there’s something true is that 2011 could become the year of CSS3 and HTML5, though nothing can be ensured.

CSS3 offers a new world of possibilities for those who are not familiarized with graphic programs like Photoshop and Illustrator. Now you can generate things like rounded corners, drop shadows, astounding 3D buttons, add glow and a lot more. Many programmers are starting to use CSS3 on their design, though the support is yet not present in all the different browsers around, and that might slow the raise of this powerful language.

designtrends1251

This Bahamas logo was developed with pure CSS3, there’s not a single vector taken from Illustrator or Photoshop on this design.

designtrends1252

By staring at this screenshot you can realize that there’s still some compatibility issues between the different browsers for working with CSS3, though you can already realize the incredible things that can now be achieved.

designtrends1253

Now you can make great social icons without spending all your time working with pixel art and instead of that just inserting a few lines of code to achieve a similar result

designtrends1254

Glow can now be achieved directly on CSS3 and you can make beautiful buttons like these, the problem is once again the browser support.

A couple more of good examples

designtrends1255

designtrends1256

Watch out Flash lovers, HTML5 has entered the game

HTML5 saw the light recently and soon has become a powerful contender for Adobe Flash. It’s important to state that HTML5 will not kill Flash, as it will only cover some of the functions that were previously made exclusively via Flash, so instead of being a fight, this is actually HTML5 relieving some hard work to the Flash platform.

With HTML5 you can do a lot of things, including rendering using your video card, make graphic effects like rounded corners, glows and shadows, insert videos with a lot of ease, create custom forms, generate pop ups and more awesome implementations.

designtrends1257

On this page you can find many of the implementations that HTML5 has to offer, including rounded corners, alpha channel, lists and popups. A really nice example of how to properly use this language.

designtrends1258

On a site like this HTML5 fits perfectly, instead of burning your head off with layers, interpolations and stuff, HTML5 can help you generate this little interactivity effects in a much easier and fast way.

designtrends1259

Rollover actions where previously made with MovieClips, now you can generate them with HTML5, which can save you a lot of time and loading times because as you probably know, this last one has always been one of the major flaws of Adobe Flash.

More sweet HTML5 implementations

designtrends1260

designtrends1261

designtrends1262

designtrends1263

Sewn badges and banners are getting popular

Once in a while graphic designers and illustrators fell in love with a little detail and begin to use it sporadically until suddenly it becomes a trend. In the past we saw the boom of glossy gradients, the connecting arrows and surreal characters; in 2011 a tendency that has been showing up for a while and that will stay during this year is the use of sewn-like elements, badges and banners in web design.

We saw many sites that are combining these elements on their designs, creating a new trend that many people are beginning to follow, so before its time is gone, you should probably take a look at these examples of really nice sewn badge and banner designs.

designtrends1264

On this example we can see both sewn lines and a banner on the design. Sewn lines are used to generate a realistic clothing or leather texture, while banners are a nicer and different way of illustrating a website.

designtrends1265

Sewn badges are becoming popular day after day, and now it’s common to find them inside different kinds of websites, the simplicity of the design and the change from squared to rounded formats might be the reason behind their boom.

designtrends1266

You can also combine badges and banners into a single element, as it happens at Ken Mann’s website. Depending on the look that you’re looking for, you can define how your banner and badges are going to look like.

Some additional good references

designtrends1267

designtrends1268

designtrends1269

designtrends1270

designtrends1271

designtrends1272

designtrends1273

designtrends1274

Place little interactive objects within your website

This more than a tendency is a suggestion for all the web designers, though it’s certain that you need to be very careful with the diagramming and the design, there are some details that can prettify your designs even if they don’t have an actual function. Usually these elements are small animations or interactive buttons that people usually discover by accident.

We found some nice examples of little elements that add an aggregated value to their websites where they’re located, and now we’re going to show you a few of them. The effects vary from small animated badges to fully animated backgrounds where the entire websites appear to be alive.

designtrends1280

This animation cannot be viewed in every browser (we saw it using Safari) but once you do it, is a beautiful detail that despite of not having a real function, is a really cute detail.

designtrends1278

The G2 banner drops from the top to its position as soon as you enter the page, this is another example of useless interactions that are created with the only purpose of enrich the browsing experience.

designtrends1281

A beautiful interaction that invites you to put together the hidden message in order to access the website, this could be skipped from the design but people love it as it offers a chilling experience.

designtrends1282

If you leave it static, this menu will still be entirely functional, but the fact that is fully animated makes the interaction way more pleasant than normal. These animated websites are usually made with Flash, but as you have seen, know you can use more than just this popular tool.

More fancy examples

designtrends1283

designtrends1284

designtrends1285

So that’s new, but what’s going to disappear?

So far we have seen all the major tendencies that will emerge during the next 12 months, but when something goes up, something goes down, that’s an universal law that also applies for web design, so let’s list those design elements that either worked during 2010 the time of their demise has come.

No more bokeh backgrounds

Though this style has been very popular during the recent years, noise textures and clean interfaces are the new real deal, so please stop abusing of this blurry images and designs.

designtrends1287

Unless you’re Blizzard, it’s time to stop making 3D interfaces

Realistic and highly detailed websites are no longer the trend, now everything is taking a much simpler direction, with vector illustrations, wooden and noise textures and clean interfaces. So the only way you can maintain a 3D and highly detailed websites is if you’re making astonishing videogames.

designtrends1288

Vintage is dead, only retro fonts will survive this new year

Vintage became extremely popular during the past couple of years. If you wanted to sound cool, the only thing you need to say was “I was looking for a vintage look, with a lot of texture and oxide colors”. But now that 2011 has began, vintage is no longer the trend as everything is getting simpler, cleaner and vanguard, so it’s time to pack your bags and say good bye to your beloved vintage website but before you do it, keep in mind that retro fonts will still be functional in web design during this year.

designtrends1289

Typography is constantly renovating itself, so let’s see what’s coming in 2011

On this year we’re going to witness some changes in the way typography is utilized, while others will remain the same (e.g using Helvetica or Yanone to save you from a hurry). Although is a little bit subjective to define an actual typeface tendency because everyone is free to choose the font they want and work with it as they wish, we have seen some patterns repeating in many websites and that’s how we established the future of typography in 2011.

Bigger titles

It’s time to break the grid, stop being scared of going beyond 72 points, big titles are now getting really popular among graphic and web designers.

designtrends1290

Reduced tracking and kerning

With the arrival of mobile design, everything needs to be shrinked to fit into the new screen resolutions and one of of reaching this objective is by reducing the spaces between words and characters without sacrificing legibility.

designtrends1291

SansSerif fonts will dictate the course of this year

Nobody denies the importance of script typefaces and the fact that they give a lot of elegance to any design, but in 2011, SansSerif fonts are going to be the chosen ones by most designers and creative teams to implement within their designs thanks to their elevated readability and simplicity.

designtrends1292

Vintage is dead, but retro fonts not so much

Although the whole vintage wave is starting to get boring, retro fonts can still be used in web design and make them fit perfectly, probably the biggest argument to support this thesis is the huge popularity of Lobster, a retro font that everyone is starting to utilize on their designs.

designtrends1293

Mixing bold and light fonts is still a good idea

You can find this on many websites, from DesignBump to some less known websites, the idea of using bold and light fonts in a single sentence or word has become a popular way of making good graphic design. Until we saw during our research, this tendency will remain for a while.

designtrends1294

designtrends1295

Pressed letters will continue to work in 2011

This effect was once considered as kitsch and unpleasant, but know graphic designers have reinvented pressed typography and what was seen as bad now is considered interesting, so it’s probable that we’re about to witness a boom of pressed letters in web design.

designtrends1296

Simple and textured business cards are coming this year

Business cards are the most immediate way of introducing yourself to a client or just a random person, they talk for us and give people an initial idea of who we are and what we offer. Usually business cards are created in small formats and printed in durable materials so people can conserve them for a long time.

There are as many designs as people are because everyone has his own identity, though there are a series of parameters that people usually follow such as diagramming, format, material and typefaces. During 2011, the tendency will go towards much simplistic designs, with tons of light colors and SansSerif fonts. As for the materials, textures and die-cut designs will set the trend during the next months.

Die-cut gives your cards an added value

Applying die-cut techniques to your business cards is a method that can help you to communicate something usual or simply work as an additional design value that all people will enjoy. To create die-cut cards is important to deliver your files fully vectorized to your printer because cutting machines follow vectors to generate intricate shapes.

designtrends1297

Explore textures to give your cards a little bit of substance

There are many different types of textured papers that you can utilize on your business card’s designs, from durex and canson papers to more grained materials. Many persons create handcrafted business cards using several materials such as wood, metal and plastics, and all these words indicate that in 2011, textured cards will occupy an important place on the market.

designtrends1298

Keep things clean, move back to basics

Being minimal is not a synonym of black and white, though many people usually have that confusion. Minimal designs are those who avoid arabesques, saturated color palettes and excessive amounts of information. Using less colors, clean designs and placing only the key information is the best way to design a business cards if you’re planning on expand your business during 2011.

designtrends1299

Big logos, less information

Instead of filling your cards with tons of information (come on, nobody wants to know your astrological sign), the new tendencies are establishing simpler designs with big logos in one side and the main information on the other, all for making an effective brand positioning. Give your logos the corresponding importance so people can start remembering it.

designtrends1300

Empower your brand with innovative logo designs

Logos are the trademark of any company, they are along with the name the iconic components that determine the whole image of any business. Designing a logo is something as complex that there’s an specific field dedicated to it, which is graphic design; logos must represent the company’s vision, show the products in a clear and creative way and be simpler enough for people to remember them easily.

Some companies have encouraged really complex designs on their logos, which though present splendid examples of quality design are usually difficult to recognize or remember by the common people. In 2011 the tendency will opt for simple designs, clean typefaces, lots of vectors and symmetry.

Less is more, keep things simple

Whilst it’s true that a more elaborated logo can provide more information and demonstrate a high-end design, simpler designs will prevail in 2011. The world is moving extremely fast and people have no time to stare at a logo for more than a few seconds, so it’s imperative that your logo gets recognized instantly and positions effectively.

designtrends1301

No more 3D and loud gradients

Get rid of those light to dark gradients, lighting effects and 3D looks, for this year everything is going to be simpler as we told you before. Although a 3D logo looks lovely, that style is getting old-fashioned and hard to position in the market.

designtrends1302

Use simple vectors instead of complex bitmaps

Many logos in the past years used heavy bitmap images or even photographs within their designs and now that tendency is over. For 2011 we will expect a lot of vector work in logo design, with minimal color palettes and just a new direction towards simplicity and quality.

designtrends1303

Readable typefaces, your message must reach as fast as possible

Unless your brand is Coca Cola, people won’t be able to remember your company’s name if you use a custom and elaborated typeface. You need to implement clean fonts that people can read from a considerable distance in a short period of time. We suggest you to utilize SansSerif fonts (GillSans, Helvetica, Yanone, Futura) or really simple Serif fonts (no arabesques) with your logo.

designtrends1304

Live colors, no more vintage and oxide palettes

In 2011, the color tendency for logo design will be a return to basic colors like yellows, blues, greens and reds. Designs with oxide colors and vintage aesthetics are not longer the trend, so move back to MS Paint and use that 12 color’s palette that we used when we were kids.

designtrends1305

Symmetry is back, no more axiality in your logos

Many years ago everything was designed following perfect grid structures and following high standards in terms of symmetry, then people got bored with that and started to break those rules, and it’s been many years since that event. Now symmetry is back with a fresh concept, not as a obliged rule but as a way of making effective and simple logo designs.

designtrends1306

Mobile design is now a reality, and it has its own style for 2011

2010 was probably the most relevant year of the decade in terms of technology with the arrival of the iPad and the whole tablet technology, the large increment of Smartphone’s sells (iPhone, Android, BlackBerry), 3D cinema, HD television and more things that made an astounding closure for the decade.

With the growing sells of tablets and smartphones, the traditional web design standards will become obsolete in a very short period and graphic designers will have to adapt to this new screen resolutions and technologies. Smartphones support the 960 pixels structure and tablets even bigger resolutions, which means that the minimum space where a webpage must be displayed is in a smartphone’s screen and designers must learn to design for that media specifically.

Metallic / wood textures and gradients work fine

Although in standard web design the utilization of gradients is becoming obsolete, for smaller resolutions like the smartphone’s case they still work. You can combine subtle textures, gradients and metallic/wood designs to generate beautiful interfaces.

designtrends1307

Use simple icons and front perspective

When you’re designing for small resolutions like the one observed on iPhone, it’s very important that every detail is read with ease, and a good way of achieving this is by making detailed but simple icons and work in front perspective. The current mobile technology is not prepared to support 3D environments and stuff (this will probably happen in the future) and that’s why simpler interfaces work better on these devices.

designtrends1308

Glossy and bright colors are also accepted

Watching web mobile design is like staring at the web design trends that set the mark a couple of years ago, and this probably occurs because the technology is still in an elemental phase and designers are still looking for the best way for designing specifically for mobile devices.

In terms of color we will find a lot of glossy and bright color interfaces in web mobile pages, this tendency may last only a few months but for the present time, glossy and bright designs will still be acceptable (we suspect that this is going to end) for a while.

designtrends1309

So basically what we’re going to see in 2011 for web mobile design is a reinterpretation of the old web 2.0 look, with tons of glossy elements, high-end icons and textures. Our personal suggestion for making your own web mobile design is to think of it as your website’s naked version, with only information and the essential look displayed, we will see a lot of things coming up from this subject through the next months, hopefully it all will end for the best.

And now we have reached the end of this article, a complete journey across the main design trends that will set the mark during 2011 on the main design fields (web design, typography, business cards, logo design and web mobile); this year will definitely bring a lot of curved balls and only after 2012 arrives, the consistency of this article will be able to be evaluated, our team made a huge research in order to determine the direction that graphic and web design are taking, so this article can become an useful guide for every designer to predict the course that must be taken throughout 2011, we want to thank you for supporting Webdesignshock, please leave us your opinions regarding this post and well, have a blast designing in 2011 :).


277 Responses to “The real design trends for 2011”

  1. Hey guys, this is probably the largest article you have launched so far and I have to say that is definitely one of the most enlightening and complete web design references for this year, thanks for sharing it…

    • Hi Julian, thanks for leaving such a supportive message, we want to start this year with the right foot and by making this article we’re definitely doing things right for all our fans :)…

  2. Hey, You’ve came up with one of the most amazing posts I’ve ever read !, love it !
    Thanks !

  3. I’ve ever read !, love it !
    Thanks !

  4. Great article! Just like an article I read before, it says “less is more”. Our view on judging a website has changed in recent years. We tend to like simple things. No more clutter, it’s time to clean things up.

    • Thanks! Kim, we did our best on pulling out this article so people can start joining the debate :)…

  5. Took me to long to get to the bottom of the page…and, i really only read the titles/some intro lines and so the all examples. What a long article nicely done. I might agree with you abou the typo. Will be on of the thrends of the this year, but not on a specific style. I do think mixing serif with non serif would do pleasant readings to your texts. 

    • Thanks buddy, we tried to make this article as complete as possible for all of you, as for typefaces, we will definitely be seeing some interesting proposals in 2011…

  6. Great article guys :) Such great trends/tips/etc for this new year of designing!!

    Thanks for all your hard work on this article, love it!!

  7. I agree that it is important to make sure that you keep you site looking neat and clean. You can also try different colors, text, and pictures and track the results. Then you can finalize with the one that people respond to the most.

    • Yeah Blair, that’s probably the best method to develop a website, good design and be aware of people’s opinion…

  8. Great article! Thanks for sharing………

  9. Bea 288
    January 15th

    Great inspiration source and great examples*****
    thanks, for sharing this

  10. Awesome Article, Thanks for Sharing :)

  11. The best article on web design trends for this year I ever read! Really good job!

    • Dea is so awesome to hear that, you can be sure that this year we will keep releasing top quality articles and resources…

  12. Huge selection of websites design and great examples of good practices for 2011 !

    • Very helpful and informative! It gave me some inspiration and direction this week as I struggled with some tough design decisions. Thank you so much!

    • Thanks for your kind message Jeana, we did our best to reunite all this useful information regarding this subject…

  13. Awesome blog posting, very inspiring. This one goes into my bookmarks.

    The best point: You’re not only showing the trends by putting a bunch of pictures in your blog posting. After every picture, you are also explaining very well the reason WHY it’s so good/trendy.

    • Thanks a lot for such a motivational comment, it only inspires us to keep posting great articles and resources for all of you people :)…

  14. Awesome article, fantastic examples of interesting designs that are out there. One thing I might disagree with is the progressive loading. I’ve seen it used but it breaks a major piece of browser functionality: returning to a specific location on a page when using the back button.

    For instance, if you scroll several “pages” down and get past a few progressive loads, then navigate to a new page/URL, when you hit the back button to return to the progressive page, the browser won’t be able to find your prior location on the page, because it hasn’t loaded again.

    While its a neat effect, I don’t think it should be relied on until the browsers are better able to handle it.

    Great post!

    • Hi Mike, thanks for leaving your comment. You’re right when you pointed the flaws of progressive loading, is a system that still has many things to be improved, so this will probably become a trend in a few more years. We hoped you enjoyed reading this article, you may want to take a look to the new TutorialShock’s design :)…

  15. Wow that stuff was pretty cool, I would have laughed if someone said they could track the e-web design trends…..

  16. This post is containing a very good designs,.i need to download one design from this post and use it for my blog,..if possible also there are too many good designs i am thinking which one to select from this,..

  17. I like your article and images of websites, Pretty inspiring, thanks!

  18. Really, great researce, great informations and tips -thanks!

  19. Great article, but funny that you wrote “No more bokeh backgrounds” and have one yourself at the top XD

    • Yeah that’s ironic, though we have to say that we did the current WDS layout when bokeh was still trending, this means that you can expect a nice surprise in a short period regarding the Webdesignshock’s interface…

  20. Nice article, i love it.

  21. Fascinante.
    Un gran artículo con ejemplos más que inspiradores.
    Es la hora de una vuelta de tuerca al diseño gráfico de mi sitio de Maquetación y programación Web, por lo que tendré muy en cuenta este artículo.
    Gracias por el trabajo de recopilación.

    • Hola Gonzalo, nos alegra mucho que este artículo te sirva como referencia para el desarrollo del nuevo diseño de tu página, gracias por dejarnos tu comentario :)…

  22. I got inspired by Stillpointe. Last couple of weeks, I tried to figure out how I can make something similar, without ripping too much. Result: A total make-over, yesterday.

    It’s a little bit out of my own comfort zone (bold colors, black lines), more ‘organic’ than most of my work.

    Stealing others work is bad, being inspired and giving it your own touch isn’t…

  23. W-O-W !!! What a great review !

    Bookmarked !

  24. This is the best Web design Trends article I have ever read. I’m so happy the web is get cleaner and simpler but this might be a quiet before the storm. Bookmarked.

  25. Great Article! Thanks for sharing such a useful info……

  26. Yay. Thanks for featuring us. 

    Great list for sure!

  27. Good article, lots of stuff to think about there. I’ll be referring to it many times over the next couple months. Thanks for posting!

  28. You really have posted some incredible collection which makes this article interesting . I really enjoy reading this page.Thanks for sharing .
    Nice work,Nice collection and great writing skills.

    • WebDesignShock
      April 18th

      Thank you Gagan!, we really appreciate your kind words…

  29. I love the shift towards the ‘earthy’ trends. They’re always a treat to look at.

    • WebDesignShock
      April 20th

      Oh yes, we haven’t realized that everything is turning towards an earth-like tendency, hope you liked this article…

  30. WebDesignShock
    April 26th

    Oh Hung, thanks for those cheerful words, we expect to continue releasing only the best web design articles so you can always enjoy visiting us…

  31. CforCris
    April 28th

    Added to bookmarks right now.
    Thank you!! very usefull.

    • WebDesignShock
      April 28th

      You’re welcome, glad you enjoyed it…

  32. Brightness
    April 28th

    best web design trends, must agree they also work for print layout…GREAT STUFF

    • WebDesignShock
      April 28th

      Thanks man, though it’s not our specialty it’s true that some of these points apply to print design as well…

  33. Neil Harris
    May 3rd

    A compilation of ”Best of” trends of last years or decades would be nice also.

    • WebDesignShock
      May 3rd

      Probably, though web design is constantly evolving and making a decade trends article will be kind of odd…

  34. 6tel
    May 14th

    Haha! I agree! I was thinking on the web designing haute couture too! :-D

    • WebDesignShock
      May 16th

      Hey great that you liked, thanks for your comment :)…

  35. Great article, well researched and it took me an hour to go through it, I enjoyed every bit of it.
    Thanks.
     A must read for all designers.

    • WebDesignShock
      May 16th

      Thanks mate, we really appreciate it :)…

  36. Your content is incredible, can’t wait for more info

    • WebDesignShock
      May 18th

      Thanks mate, keep it here for more useful articles and resources…

  37. WebDesignShock
    May 18th

    Thanks Alexandre!, what’s your opinion on this subject?, which other tendencies do you think might show up during these months?…

  38. Empcindy
    May 18th

    I was really enjoying the article and examples but couldn’t continue because there are so many typos. One never-ending trend is proofreading…

    • WebDesignShock
      May 18th

      Haha that’s OK pal, you can grab some time to digest all this info :)…

  39. Welington
    June 1st

    Design gráfico é a capacidade de criar algo enxuto a partir de várias considerações e habilidade para tirar o excedente e filtrar o essencial

  40. Danny
    June 2nd

    Seriously dude… over the years I’ve read so many of these articles, read as way too many, and they always touch a couple of obvious points and sit on a blog somewhere collecting SEO dust. This though, wow! Well researched, great points and very thorough. Extremely impressive and a great resource for any designer who wants to stay on top of their game. Well fricking done!

    • WebDesignShock
      June 2nd

      Man!!, thank you so much for the nice comment, we know that there are many blogs publishing similar articles everyday and the only way to compete is with quality contents, we’re always looking forward to improve our articles to give you only top notch resources…

  41. Anonymous
    June 4th

    Sewn badges and banners are getting popular – no joking, I think they have had their day, unless the website is about badges or sewing!
     

    • WebDesignShock
      June 7th

      Indeed, now that we have passed the first 6 months of the year, it’s probable that we’ll start seeing new tendencies in the graphic and web design globe…

  42. Thanks
    June 7th

    Hehe, you may want to take a closer look at your very first example under “No more clutter…”. It’s actually a template from ThemeForest created by Curt Ziegler. “Jane Doe” is the anonymous placeholder name.

    Good article though, very comprehensive.

    • WebDesignShock
      June 7th

      Man you were right!, we didn’t notice it though the example still works :P. We’ve just corrected it…

  43. Kevin
    June 8th

    ya, this aricle was really informative, and inspiring. I often get DESIGNERS BLOCK, and can now start building cute,neat, clean websites for my clients.. Thanks For posting this…

    • WebDesignShock
      June 9th

      You’re welcome Kevin, though it’s important to remember that design tendencies are constantly changing, so let’s see how long endures this preference toward clean interfaces…

    • Kevin
      June 14th

      Thanks again for responding.. :-)

    • WebDesignShock
      June 15th

      Anytime Kevin, that’s what we’re here for :)…

  44. This is really great collection, thanks for the post.

    • WebDesignShock
      June 15th

      You’re welcome mate, stay with us for more quality articles and resources…

  45. Stephaneonline
    June 20th

    ” Crispy, pixel perfect web elements are the new look ” It’s should not be a new look, it should be considered good design practice, I can’t believe people are still outputting blurry mess.

    • WebDesignShock
      June 21st

      You’re absolutely right Stephane, unfortunately people are still using cliparts and GIF files, so probably if they see that pixel-perfect elements are actually a trend, they will eventually adopt it…

  46. Stephaneonline
    June 20th

    ” Crispy, pixel perfect web elements are the new look ” It’s should not be a new look, it should be considered good design practice, I can’t believe people are still outputting blurry mess.

  47. Great post…

  48. That was a awesome collection.Thanks for the share.

    • WebDesignShock
      June 24th

      You’re welcome mate, now let’s see how accurate we were at the time of writing the article…

  49. Bill B.
    June 24th

    Terrific job with a wealth of examples. You guys worked hard on this one. I’ve got it bookmarked so I can refer to it over and over.

  50. Shanehbrsj
    June 24th

    great collection…great inspiration…hope you update in future also..thnkx

  51. Greedylevinson
    June 28th

    Fantastic article.

    Many thanks, this helps a lot!

  52. Shagan Mukherjee
    June 28th

    WOW!!!! so much to learn an implement! great stuff…Thanks a lot.

  53. This is a well-written article. I enjoyed reading it. Thanks for sharing your informative write up.

    • WebDesignShock
      July 6th

      Thanks Perth, we really appreciate your kind words…

  54. Great post! It was great help in forming strategy for a client. 

  55. A reall nice collection here, not fancy adding mine to the list ;) http://www.bmdesignonline.co.uk

  56. WebDesignShock
    July 8th

    Thanks Michael, what are your predictions for these next months?…

  57. It is Really Useful

  58. Great timing for this article. Been thinking about doing a custom logo for myself and my branding recently and this will be helpful design portfolio. Thanks!

  59. Bertrand John (@HeavenDzign)
    July 22nd

    Thank so very much for this bless information, just decided today to find more trends for year 2011 and found you guys, I most say its a blessing to have found this site. Thank you again for the information provided, continue doing a good job & God bless.

  60. Thanks for sharing excellent examples for design trends in 2011. It is indeed a nice post with great examples to understand current design trends. Thank you.

  61. Sally
    August 11th

    Absolutely brilliant. 

  62. Great examples. I really appreciate minimalistic designs.

  63. thanks for the great post !

  64. Big clean fonts, bigger backgrounds, simple uncluttered layouts…loving them!

  65. Samantha Fox
    August 27th

    I found some good information in your site and bookmarked to visit again . Thanks.

  66. The most amazing ressource in design and webdesign for 2011. Keep up the good work !

  67. drfdrewrwe
    September 1st

    Such cool examples of great design, but so many grammatical errors in this article! People, attention to visuals is great, but do not underestimate the power of words! PROOF-READ your copy!

  68. So far it has been a great experience for me since I visited this website for the first time. Thank you for sharing such information.

    • We’re pleased you find the information of the website useful! feel free to share it with your friends and clients!

  69. I suggest you to do some clean-up with ads. Fixed position is so fucked-up idea i didn’t finished reading the article!!!

  70. brian
    October 8th

    graphic designers unite and bring back bauhaus and swiss design!!

  71. Brucey
    October 15th

    All I could think of when I see these examples is that the 90s has exploded on the web. It’s a type revolution all over again. Which is great by the way.

    A few too many examples ~ thanks though.

  72. Danielle Valera
    October 24th

    This is an awesome collection of designs without a doubt. I can’t even imagine just how long it must of took you to put all this together. I personally don’t have a designer streak whatsoever and have to hire out all my design work but at least these will give me some ideas for future projects.

  73. Very nice post. You indeed include great passion about trends.

    Thumbs up.

  74. Great and very useful collection. Thanks for posting!

  75. simply great article! The best one i went through recently. Thanks for the efforts :)

  76. Good blog posts and it is so very helpful.

  77. web development company
    November 22nd

    This is an awesome roundup. It’s true that textures and type seemed to rule the web this year. Very curious to see where things will go next year and how much responsiveness will play a role.

  78. All designs are really great.. I’m amazed of this rich of webdesigns post! 

  79. HOLY MOTHER! 

    This article is one of the most concise and lengthy (not to say incredible) posts you guys have done. Almost all of the examples used are fantastic pieces of inspiration. 

    Thank you

  80. You seem to be confusing tight tracking with condensed typefaces. They are not at all the same.

    I don’t really know how I feel about articles like this, because they attract people who only try to rip off what is “trendy”, instead of just focusing on creating something that is simply original and well designed.

  81. genie
    December 7th

    very informative blog i really  like your article thanks for sharing it…..

  82. Very good article! Thank you! A article will be The Real Design Trends For 2012?

  83. Great list. Now its 2012.
    already a great compilation. need more.
    Thanks in advance

  84. Alex Lamo
    January 4th

    Nice article. Lot of good sites to refer.
    good work!

  85. now this is a web design!! way to go

  86. really informative article.. would look up to for the trends for 2012.:)

  87. nice collection, some of them are really great designs.

  88. huge collection…. need to allot half a day to get use of these designs……

    thank you author…

  89. I taught junior high students with learning disabilities and helped them 
    overcome their reading problems, but they still could not spell well.
    I have to admit that I am a culprit of a few of these. 
    It’s funny that I didn’t realize until now that I was making a mistake! 
    Thanks for the post. Here’s to a better-spelled 2012.

  90. nice designs, some of them are really great ones !

  91. social bookmarking
    February 20th

    What’s up, I want to subscribe for this weblog to get newest updates, so where can i do it please assist.

  92. Mike Nielson
    February 23rd

    Really nice one, Lucky me I found your site by accident, I bookmarked it. Interested in knowing the results you have gotten with the new app?

  93. Michael
    April 20th

    Your post really helped me to understand the What are you doing to generate word of mouth. It has great details and yet it is easy to understand.
    That’s what i was looking for. I will definitely share it with others.

  94. Love the focus on strong typography and use of white space. Definitely hit some of the trends on the head for last year – it’s looking like it’s going to be a lot of the same principles in 2012, with the addition of responsive layouts.

  95. I thought I remembered reading in a best practices guide, something about NOT subjecting visitors to excessively long scrolling pages?? :p

    • Most of the times we want to give you very complete post so they may get very long, however we’ll have your advice in mind! Best regards!

  96. jaffa
    May 3rd

    Great thing.

  97. I will definitely recommend this to all my friends. I haven’t come across a site that is better than it.

  98. This is the third time I’ve been to your site. Thanks for posting more details.

  99. yes James, we need to be always in the top !

  100. great trends still incorporating some of the ideas featured here into some of my own sites

  101. It’s been two years since the publication of this artilce, and while the “visual experience” a customer has while visiting a website still rules, there are other elements at play in 2013. One simple word: content.

    Sites are going lean, adhering to minimalism, but a big failure can be lack of useful information and call to action—if your site is looking for conversions.

    The evolution of the end-user experience is still moving.   

  102. Very accurate article. We also believe that a good web design should be just as you mentioned.

  103. Nobody can reject the info you have given in the blogs, this is actually a great work.

    • Designer
      August 13th

      thanks a lot for your supporting comments.

  104. [...] The real design trends for 2011 « Web Design Blog – WebDesignShock [...]

  105. [...] and more, this review will help you understand the direction that you need to follow from now on… [full post] WDS Editorial Web Design Blog – WebDesignShock review 0 0 0 [...]

  106. [...] The rest is here: The real design trends for 2011 « Web Design Blog – WebDesignShock [...]

  107. [...] The real design trends for 2011 « Web Design Blog – WebDesignShock [...]

  108. [...] Source: The real design trends for 2011 « Web Design Blog – WebDesignShock [...]

  109. [...] more: The real design trends for 2011 « Web Design Blog – WebDesignShock Comments [...]

  110. [...] The real design trends for 2011 « Web Design Blog – WebDesignShock [...]

  111. [...] is the original post: The real design trends for 2011 « Web Design Blog – WebDesignShock This entry was posted in Uncategorized and tagged clear-example, develop-mobile, [...]

  112. [...] here: The real design trends for 2011 « Web Design Blog – WebDesignShock This entry was posted in Uncategorized and tagged clear-example, develop-mobile, [...]

  113. [...] The real design trends for 2011 « Web Design Blog – WebDesignShock [...]

  114. [...] post: The real design trends for 2011 « Web Design Blog – WebDesignShock – open in a new window. [...]

  115. [...] The Real Design Trends for 2011 [...]

  116. [...] The Real Design Trends for 2011 The Real Design Trends for 2011 [...]

  117. [...] The Real Design Trends for 2011 [...]

  118. [...] The real design trends for 2011 on webdesignshock [...]

  119. [...] Webdesignshock, gasesti mai multe tendinte ce pot fi aplicate in webdesign. [...]

  120. [...] Creating a new logo is always an important part of any corporative redesign process. The original TutorialShock logo featured a pixel art icon along with a pressed text, the design wasn’t bad but the use of 3D is not going to be a major trend during 2011. [...]

  121. [...] Hier Klicken [...]

  122. [...] The real design trends for 2011 [...]

  123. [...] article entitled “The real Design Trends for 2011″ by WebDesignShock.  The article is HERE and is well worth reading for everyone designing for the web and mobile market in 2011.  Take your [...]

  124. [...] you read our article about ‘The real design trends for 2011’ you will find our statement “vintage is dead but retro fonts still rock”. This statement is [...]

  125. [...] And if you’re wondering where’s the web designing going from now on, go on and take a peek of future and find out what are The Real Design Trends for 2011 [...]

  126. [...] pode conferir as tendências para web design aqui. Sortfolio é um portal onde você pode encontrar vários designers. Dê uma olhada no portfolio de [...]

  127. [...] my last post, I discussed a few design trends that I was excited about after reading Web Design Shock’s article on trends for 2011. I had a chance to experiment with some of them in the past [...]

  128. [...] not saying that Flash is dead, only that HTML5 will begin to cover many of its current uses). [Go to full article] Tags: content, web design, web site design, website design [+] Share & Bookmark • [...]

  129. [...] want to have some white a part of your website because it grounds your design. It also makes your web page design Seattle easier on the eyes and easier to [...]

  130. The Best Graphic Design Trends for 2011. Stay Updated My Fellow Creatives! http://t.co/2DM0e0A

  131. The real design trends for 2011 http://t.co/zPYU8Uh via @webdesignshock

  132. RT @designpaste: The Best Graphic Design Trends for 2011. Stay Updated My Fellow Creatives! http://t.co/2DM0e0A

  133. RT @designpaste: The Best Graphic Design Trends for 2011. Stay Updated My Fellow Creatives! http://t.co/2DM0e0A

  134. Goed stuk voor ontwerpers: ‘The real design trends for 2011′ http://t.co/EKvLfM3

  135. [...] fashion with its style and color. To start with, here’ some good web design trends article for 2011 and 2010. If you want to see more samples, have a look at books like Web Design Index or Web [...]

  136. [...] Creating a new logo is always an important part of any corporative redesign process. The original TutorialShock logo featured a pixel art icon along with a pressed text, the design wasn’t bad but the use of 3D is not going to be a major trend during 2011. [...]

  137. [...] increase on its traffic numbers thanks to remarkable articles such as Photographers Legal Rights, The Real Design Trends for 2011, Designers to Follow on Twitter and awesome freebies that include our Tron Legacy Icons and the [...]

  138. The real design trends for 2011 http://t.co/eEsIacc via @designshock

  139. [...] of design (printing, web , media, etc) with tons of examples and good practices. Follow this link: Design trends for 2011 Tags: 2011, art, design, examples, media, most-complete, print, printing, sign, trends, web [...]

  140. [...] more: Design trends for 2011 Comments [...]

  141. [...] Design trends for 2011 Tags : article, game, graphic-design, graphics, internet, internet-marketing, news, photoshop, [...]

  142. [...] Continue reading here: Design trends for 2011 [...]

  143. [...] reading here: Design trends for 2011 Bookmark to: This entry was posted in Uncategorized and tagged article-on-design, design-trends, [...]

  144. [...] the image below or here to find your design [...]

  145. The real design trends for 2011 http://t.co/NU9XP5i via @webdesignshock

  146. @PatjeVdb says:

    Design trends for 2011: http://t.co/5TjiCeT via @addthis

  147. ik word hier een beetje triest door.. "volgend jaar zijn de hoekjes iets ronder".. http://bit.ly/qEq815 #webdesigntrends

  148. @gmoralesc says:

    RT @jestrade: Design trends for 2011 http://t.co/fIsTGjN

  149. @louul says:

    Un article archi-complet et détaillé sur les tendances du
    #webdesign de cette année http://fb.me/v4KRsFve

  150. [...] Web Design Trends in 2011 | Tips The State of Web Design Trends: 2011 Annual Edition | Webdesigntuts+ Web Design Trends in 2011 | Tips Design trends for 2011Description : The most complete article on design trends for 2011, covering all aspects of design (printing, web, media, etc) with tons of examples and good practices.http://www.webdesignshock.com/ .. [...]

  151. @GryMonicaH says:

    Utrolig mange fine websider her! “@Norgesdesign: Se webdesign trendene for 2011 http://t.co/MYDViPq”

  152. [...] Design trends for 2011Description : The most complete article on design trends for 2011, covering all aspects of design (printing, web, media, etc) with tons of examples and good practices.http://www.webdesignshock.com/ .. [...]

  153. [...] Design trends for 2011Description : The most complete article on design trends for 2011, covering all aspects of design (printing, web, media, etc) with tons of examples and good practices. … The Jane Doe theme by Curt Ziegler is a good example of this new clean tendency, the site has a very restricted color palette, SansSerif everywhere and a very subtle texture on the back. Beyond that we can realize how the clean spaces doesn't look like a laziness expression from the author but as a right-guess; …http://www.webdesignshock.com/ .. [...]

  154. [...] Design trends for 2011 Weekly Design News – Resources, Tutorials and Freebies ( DOWNLOAD 2011 WEDDING COMBO IDEAS | My Personal Artist wedding … Design trends for 2011Description : The most complete article on design trends for 2011, covering all aspects of design (printing, web, media, etc) with tons of examples and good practices. … Felipe is a Colombian graphic designer that developed one of the most beautiful portfolios around. The central character is a clear example of big vector illustrations that are starting to being used. designtrends1198. Awesome character designs, from the little Pikachu-like to the big blue fella, …http://www.webdesignshock.com/ .. [...]

  155. The real design trends for 2011 http://t.co/fo4vwXF via @webdesignshock

  156. The real design trends for 2011 http://t.co/1HqSmAdf via @webdesignshock

  157. Impresionante y gigantesco artículo sobre tendencias de diseño web del 2011 http://t.co/QtilE8XS #webdesign #trends2011

  158. schaut sich grad mal die design trends 2011 an http://t.co/bmFnnJXV

  159. Un completísimo análisis de las tendencias del Diseño Web el 2011 http://t.co/QtilE8XS #trends2011 #webdesign

  160. RT @Ayudantegrafico Un completísimo análisis de las tendencias del Diseño Web el 2011 http://t.co/GI8cr2nw #tren… http://t.co/jn1hvcC5

  161. RT @Ayudantegrafico: Un completísimo análisis de las tendencias del Diseño Web el 2011 http://t.co/QtilE8XS #trends2011 #webdesign

  162. RT @Ayudantegrafico: Un completísimo análisis de las tendencias del Diseño Web el 2011 http://t.co/QtilE8XS #trends2011 #webdesign

  163. Este link nos servirá para ponernos un poco exigentes en los proyectos web que mandemos a hacer: Las tendencias… http://t.co/VX2DFNBu

  164. The real design trends for 2011 http://t.co/ifOKZhhT via @webdesignshock

  165. Design trends for 2011 http://j.mp/oRI49U cool collection

  166. The real design trends for 2011 http://t.co/JXgeYVqQ #design via: @arizagamx

  167. The real design trends for 2011 http://t.co/kWsAqNhB via @webdesignshock

  168. Más recomendaciones para realizar el diseño de tu sitio! http://t.co/FiU9IFUe #diseñoweb

  169. RT @GeoPhoenixQ: Más recomendaciones para realizar el diseño de tu sitio! http://t.co/FiU9IFUe #diseñoweb

  170. News for #WebDesigners The real design trends for 2011 http://t.co/ZCtyDssF

  171. Obvious for most web designers but stil worth sharing http://t.co/IZnWaSfI

  172. RT @YanaCarstens: Obvious for most web designers but stil worth sharing http://t.co/IZnWaSfI

  173. RT @YanaCarstens: Obvious for most web designers but stil worth sharing http://t.co/IZnWaSfI

  174. [...] Design trends for 2011 The most complete article on design trends for 2011, covering all aspects of design (printing, web, media, etc) with tons of examples and good practices. Source: http://www.webdesignshock.com [...]

  175. What would you add for 2012? The real design trends of 2011 http://t.co/CWz8LCk9 via @webdesignshock

  176. The real design trends for 2011 http://t.co/rfiL04Le via @webdesignshock

  177. The real design trends for 2011 http://t.co/OLvjDXgm via @webdesignshock

  178. [...] this article, these changes must be apprehended by every designer that wants to set his mark during 2011. Our team made a thoughtful investigation before releasing this article, we stumbled across several [...]

  179. [...] upon it. Next important thing is they can let you know about latest Utah web design trends.Website business is certainly reliable. As a result, to survive in this competitive competition, it … company has team of designers who have got the knowledge in formulating beneficial search engine [...]

  180. The real design trends for 2011 http://t.co/d6fadz7B via @webdesignshock

  181. RT @kornwill: The real design trends for 2011 http://t.co/2IOers8a

  182. RT @kornwill: The real design trends for 2011 http://t.co/2IOers8a

  183. Great #WebDesign article, thanks for sharing! “@kornwill The real design trends for 2011 http://t.co/Es6DwBC0” @WebDesignShock

  184. The real design trends for 2011 http://t.co/zSpJ7lEX via @webdesignshock

  185. [...] 3. HTML5 and CSS3: Trend or an emerging standard in web design, HTML5 and CSS3 are the big players in the game.HTML5 and CSS3 make it simpler to build modern web elements into your web designs including smarter forms, beautiful typography and social tools like wikis and drag and drop functionality.Designers are letting Flash go.” HTML5 saw the light recently and soon has become a powerful contender for Adobe Flash. It’s important to state that HTML5 will not kill Flash, as it will only cover some of the functions that were previously made exclusively via Flash, so instead of being a fight, this is actually HTML5 relieving some hard work to the Flash platform. With HTML5 you can do a lot of things, including rendering using your video card, make graphic effects like rounded corners, glows and shadows, insert videos with a lot of ease, create custom forms, generate pop ups and more awesome implementations.”,writesWebDesignShock. Followthis,this andthis link to see some HTML5 implementations. What about CSS3? WellCSSR hits the mainstream. It supports things such as border effects, transformations, gradients, backgrounds, animations, transitions, media queries, web fonts and multi-column layouts and more,writes Ginn. “Many programmers are starting to use CSS3 on their design, though the support is yet not present in all the different browsers around, and that might slow the raise of this powerful language”,explains the WebDesignShock. Followthis andthis link to see some CSS3 implementations. [...]

  186. [...] Design trends for 2011 Everything inside the design world is permanently changing, evolving and adapting into new ways of expression and communication looking to satisfy the new consuming needs and set innovative exchanging channels. 2010 made a huge closure for the final year of the first XXI century decade, we witnessed the rising of tablets (iPad, Samsung Galaxy Tablet among others), the demise of Internet Explorer 6 and the absurd fanaticism towards Flash (though it’s losing a lot of fans), which is going to be slowly replaced by HTML5 (we’re not saying that Flash is dead, only that HTML5 will begin to cover many of its current uses). [...]

  187. [...] to our great friend Chole for passing this along.  Web design trends but they mostly fit with print design too, especially the font stuff. Share [...]

  188. […] Current Web Design Trends Web Design Trends 2014 Corporate Web Design Trends Web Trends of 2012 Website Design Trends 2013 Web Trends New Website Design Trends Latest Web Trends […]

  189. […] the design trends for 2011 article published by WebDesignShock, we mentioned that vintage was dead and only retro fonts will survive the New Year. However, as it was back then, vintage still has a great impact on web design. That’s why today […]

Leave a Reply

Comments

*