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 ;)

Call to action buttons, curved shadows, pixel patterns and more design freebies

Comments and suggestions in here

We’re getting closer to the first half of this year and so far there are many things in design that are still looking very 2010. What was considered good design only a few months ago is no longer the trend because as you know, design is an ever-changing field that adapts to fit people’s needs and is constantly looking to reinvent itself.

Today we like to talk about the main tendencies that will be ruling for the rest of this year as well as the ‘deadly’ sins that every designer needs to avoid at all cost in order to survive the constant critique from design purists and average clients.

Things you should be doing…

On this first part of the article we’re going to discuss the key elements that every web design needs to have during this year, some of them are more focused in functionality while others concentrate on design itself, in both cases the idea is generate better looking and more accessible websites. Among this elements we can list:

  • Call to action buttons for improving the navigability.
  • Curved shadows to create smoother designs.
  • Web fonts that go beyond the old-school system fonts.
  • Add substance to your designs by using textures.
  • Implementing CSS3 elements, they’re just better.
  • Pixel perfect buttons, keeping quality at the best.
  • Think mobile, start making responsive websites.
Call to action buttons, grab people’s attention

One of the main tendencies in web design nowadays is interactivity, meaning that there should not be ponded buttons and elements with no real use besides filling space. Call to action buttons are simple and effective elements that can aid captivate the visitors because they invite them to go deeper and deeper into the site without having to be astounding animated elements or things like that, just well-designed elements that effectively communicate the fact that they can connect the user with an event or another page on the site.

Design11trends01

This simple element informs the person about a specific product without occupying much space but still being easy to notice.

Design11trends02

You can have beautiful elements like these that work perfectly as call to action buttons while displaying an exquisite graphic taste.

Design11trends03

Elegant, minimal and highly-effective, this one is definitely a great example of call to action buttons.

Design11trends04

You can go minimal and still achieve the expected result, just place some sort of hint that will indicate the user that by pressing the button something will happen.

Some useful freebies

Anything can become a call to action button, as long as it interacts with the audience, is easier to find and has a decent design. Now let’s take a look at some free buttons that you can utilize on your projects:

Pixel perfect button set

Design11trends102

Direct download: http://www.wordpressthemeshock.com/free-button-set/

Bright 3D buttons

Design11trends72

Direct download: http://designmoo.com/wp-content/plugins/download-monitor/download.php?id=821

Android market buttons

Design11trends73

Direct download: http://designmoo.com/wp-content/plugins/download-monitor/download.php?id=802

Simple button

Design11trends74

Direct download: http://designmoo.com/wp-content/plugins/download-monitor/download.php?id=701

Tab button

Design11trends75

Direct download: http://designmoo.com/wp-content/plugins/download-monitor/download.php?id=672

A large green button

Design11trends76

Direct download: http://designmoo.com/wp-content/plugins/download-monitor/download.php?id=484

Use rounded shadows, they’re nicer and smoother

For many years we have seen the same kind of treatment regarding shadows: Drop shadows, inner shadows, both at the same time, radial gradients, linear gradients, offset paths and all the other default options that the graphic programs have to offer.

But happens if we take those standard shadows and spruce them up a little bit?, this will place our designs aside from the others and will help us to give an unique touch. One of the coolest ways of improving our shadows’ usage is making them rounded. The technique itself is really simple, just make a default shadow and then you can either mask it or renderize it and then edit it manually.

Design11trends05

Imagine these lovely boxes with straight shadows, there’s no way that they can look as great as they do with this look.

Design11trends06

You can use rounded shadows in something as simple as a contact form like the one you can see on the picture above.

Design11trends07

Using rounded shadows can help you give a ‘pop-up’ effect to your boxes, which is something that’s hitting really hard these days.

Design11trends08

You can combine rounded shadows with little stroke effects and textures to create really nice designs.

Some useful freebies

If you want to learn how these nice shadows are made, we found some pretty cool freebies for you:

50 Curved drop shadow effects

Design11trends77

Direct download: http://www.wordpressthemeshock.com/50-curved-drop-shadow-effects-free-psd/

3 Shadow pockets

Design11trends78

Direct download: http://downloadpsd.com/graphics/3-shadow-pockets-free-psd/?download=3%20Shadow%20Pockets%20PSD

Content Box shadows PSD

Design11trends79

Direct download: http://www.premiumpixels.com/download/?file=box-shadows

Light shadows with PSD

Design11trends80

Direct download: http://depotwebdesigner.com/projets/preview/shadow-mounir-salhi/shadow-mounir-salhi.zip

No more system, it’s time for web fonts!

Most of us grew knowing that if we wanted to become web designers, one of the must-have qualities was the capacity of create using web-safe fonts such as Georgia, Tahoma, Verdana and others less attractive. That limitation produced a great generation of web designers that despite the limits were able to create beautiful designs for the web, fortunately that time is over and now the spectrum has gotten much wider.

The problem with fonts has been unraveled and thanks to different tools like @font-face and Google API fonts we have the opportunity to utilize almost any font we want with the certainty that the person at the other side of the window will see it exactly on the way it’s meant to be, so by having this said, it’s now a sacrilege find someone relying entirely on Courier and Garamond.

Design11trends09

A great way to use web fonts is in newspapers that now have the chance to explore other Serif fonts to modernize their websites without losing their classical style.

Design11trends10

Thanks to web fonts you’re not longer forced to utilize images that only slow down your server, just embed the font you like and you’re done.

Design11trends11

You no longer need to use stiff grids because now you can actually make art with web fonts like the lovely piece that’s featured above.

Design11trends12

Even handwritten fonts can be embedded and utilized on your websites, though you have to be careful of not abusing of the now huge catalog of options.

Some useful freebies

We have selected some of the nicest typefaces from the Google Web Fonts directory, these fonts are not only beautiful but thanks to the fact that they’re hosted on this directory, you can utilize them freely in your web projects:

Design11trends65

Direct download: http://www.google.com/webfonts/download?kit=W9iheInNYnF75QjkBAj—w

Design11trends66

Direct download: http://www.google.com/webfonts/download?kit=DeRzO2aa-x0mQzi69U1bdg

Design11trends67

Direct download: http://www.google.com/webfonts/download?kit=qzRq6kFi6uVBUnW-Apn2WA

Design11trends68

Direct download: http://www.google.com/webfonts/download?kit=yjMhvZg9ebF34Ad3l0Gdvw

Design11trends69

Direct download: http://www.google.com/webfonts/download?kit=iB01yZBxssrsmxYcXQS2aKCWcynf_cDxXwCLxiixG1c

Design11trends70

Direct download: http://www.google.com/webfonts/download?kit=FwSm2G5WY3pteEc_zL2tQQ

Design11trends71

Direct download: http://www.google.com/webfonts/download?kit=8BjDChqLgBF3RJKfwHIYh3s4W-uUpr3-Rlie7lfNHBU

Plain colors are dull, bright them up with textures

One of the reasons why textured elements have not been used in a while is because designers overused them and made them a boring cliché. After a reasonable period where plain colors ruled it’s time to bring back textures, not the old ones but new appropriations that show how a good texture can always work.

You can create shimmering websites by using textures, as long as you keep them minimal. Think of textures as a portrait, you can remove all the background elements and the painting will still look good, but if you put back the background the picture acquires a lot of flavors that can almost generate a synesthesia, and that’s exactly what happens when a nice texture job is applied to a website.

Design11trends13

As you can see on ThemeShock’s homepage, working with textures has added a beautiful touch to the site without overtaking the content and other elements.

Design11trends14

Textures can help you tell a story. On this site the combination of an old typeface along with illustrations and texture produces a cozy environment.

Design11trends15

On this case two different textures were used for the background and that’s practically enough to make a grand contribution to the diagramming.

Design11trends16

Depending on the site’s thematic you can use different textures like this vintage pattern that has been implemented on the background.

Some useful freebies

There are many different ways of making textures, including Photoshop PAT files and many others, now let us offer you a short list featuring some pretty cool freebies:

60 Tileable and repeatable pixel perfect Photoshop patterns

Design11trends81

Direct download: http://www.wordpressthemeshock.com/60-tileable-and-repetable-pixel-perfect-photoshop-patterns-pat/

Free vintage wood texture

Design11trends82

Direct download: http://www.wordpressthemeshock.com/free-vintage-retro-texture-pack/

Brown paper

Design11trends83

Direct download: http://designmoo.walmediallc.netdna-cdn.com/wp-content/uploads/2011/03/wooden_texture.png

Light blue pattern

Design11trends84

Direct download: http://designmoo.com/wp-content/plugins/download-monitor/download.php?id=715

Lined texture

Design11trends85

Direct download: http://designmoo.com/wp-content/plugins/download-monitor/download.php?id=498

No more heavy images, just pure CSS

CSS has always been one of the favorite tools of web developers, but at the same time one of the most obnoxious tools for designers as they consider that CSS is an attempt to automate design, but that’s not true at all. The real purpose of CSS is make things easier for developers without cutting off the job of web and graphic designers.

Since the release of CSS3, it has become possible the creation of actual design elements based on code instead of graphics, this does not only aid developers to develop graphic elements but also reduces loading times as there’s no longer necessary uploading images to the servers. Our point is that now designers can pass their ideas to developers without having to worry about optimization, color mode and things like that, so the invitation is for designers and developers to embrace the power of CSS.

Design11trends17

Yes, that’s Twitter’s fail whale created on pure CSS, pretty cool isn’t it?.

Design11trends18

This one remains me of Reptar, though it looks a little bit rough the fact that it was created with only CSS is remarkable.

CSS312

This beautiful box was created in base of an actual Photoshop work, the result is practically identical and more lightweight.

Design11trends19

Believe it or not, that ribbon was made in CSS3, not even the shadows came from Photoshop because there’s a CSS property for that.

Some useful freebies

We’re sure that CSS3 will offer an enormous help to designers, we want to give you a small compilation of freebies that will help you understand this great language:

Clean CSS3 boxes

designfreebies01

Direct download: http://www.wordpressthemeshock.com/clean-css3-boxes/

Awesome CSS3 slider

Design11trends86

Direct download: http://bit.ly/eTf53h

CSS3 buttons

Design11trends87

Direct download: http://www.vagrantradio.com/2010/12/css3-buttons-add-classes-make-buttons.html

Pay attention to the details, look for pixel perfect designs

With the increment of screen resolutions, there’s no longer a bulletproof method that will make your designs look equally crispy in a widescreen resolution and a mobile device. That’s why the pixel perfect technique is there, to help designers create cutting edge web elements that will not lose much quality from one screen to another.

The technique itself is quite an art. Making a non-gnawed element is not as easier as it might seem, this can be noticed by the fact that you can encounter specialized pixel artists that have mastered the procedure. On this year we will be seeing many pixel-perfect websites marking the tendency for this year.

Design11trends20

Watching a pixel-perfect button is like staring at a regular TV and then a Full HD, the content is the same but the quality is much superior and enjoyable.

Design11trends21

Textures and pixel-perfect are not mutually exclusive, as it’s clearly shown on the previous example.

Design11trends22

Something important about pixel perfect is that you need to work at 72 dpi to produce lightweight files that won’t slow down your system, so remember that you will be seeing your designs at 100 % zoom in order to appreciate the pixel richness.

Design11trends23

Combining pixel perfect buttons with icons is a powerful way of making beautiful web elements.

Some useful freebies

We can’t deny the fact that pixel-perfect is a beautiful technique, but actually mastering it could be a little tricky, so to help you understand it we’re going to listen a few design freebies where you can find high quality pixel-perfect designs.

48 Pixel perfect credit card icons

Design11trends88

Direct download: http://www.wordpressthemeshock.com/free-credit-card-icons/

Carbon style GUI set

Design11trends89

Direct download: http://www.wordpressthemeshock.com/free-black-gui-psd/

Clean login box with free PSD

Design11trends90

Direct download: http://www.wordpressthemeshock.com/free-login-psd/

Iconshock Social Icons

Design11trends91

Direct download: http://www.iconshock.com/social-icons/

This is a tag

Design11trends93

Direct download: http://365psd.com/wp-content/uploads/2010/10/182.psd_.zip

It’s a good time to bring retro back

If 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 certainly true and we can say that this tendency of recapturing retro elements and making them fresh that has been present for a while will continue on this year.

Incorporating retro elements does not mean that you can go back to the nineties, what it means is that you can leverage certain textures, badges and fonts in your design that will give some sort of timeless aesthetic to your designs, you need to be careful of not falling in kitsch by keeping everything sober.

Design11trends24

Badges have become popular recently because they synthesize plenty of information in a small graphic element. On this example we can see a beautiful badge made in retro style.

Design11trends25

Retro fonts look beautiful in web design as long as you don’t overuse them, you can add some retro elements next to the typeface to make it look even nicer.

Design11trends26

Another great idea is to utilize old school pictures and make amazing things with them thanks to programs like Photoshop.

Design11trends27

A beautiful example of modern and retro working together, the SansSerif font looks awesome next to the retro typefaces thanks to the thoughtful color palette, accurate use of textures and hierarchies’ management.

Some useful freebies

If you want are really into retro and vintage design, here’s a short list featuring some great freebies that we’re sure you’ll enjoy:

Vintage typewriter vector

typewriter000

Direct download: http://www.wordpressthemeshock.com/vintage-typewriter-vector/

Realistic Polaroid icon with retro style

Design11trends94

Direct download: http://www.wordpressthemeshock.com/free-polaroid-psd/

Radio style slider with vintage icon

Design11trends95

Direct download: http://www.wordpressthemeshock.com/free-vintage-retro-radio-icon/

Vintage TV icon, stone texture and slider control

Design11trends96

Direct download: http://www.wordpressthemeshock.com/free-vintage-retro-tv-icon/

Today’s featured professional icon set: Vintage Kitchen

Design11trends97

Direct download: http://www.biggitybarnes.com/Icons/VintageKitchen/VintageKitchen-WIN.zip

Why using plane stripes?, ribbons are nicer

If you open a graphic design book prior 2000, you will see that every top menu, banner or logo used plane boxes where all the text was stocked in easily. This wasn’t popular properly said but it was the only way that designers approached web design, then the XXI century arrived and designers started taking seriously this matter.

One of the nicest ways of making top menus and fixing logos is working with tapes and ribbons. These elements have been around since forever but only until a few years ago we started to see them in web design. In 2011 we will be seeing many websites using these lovely elements on their interfaces until the internet will have enough of them and the next great thing will show up.

Design11trends28

This element could be make like a simple horizontal menu, but instead it uses a ribbon and obtains a lot of fluidity and smoothness by replacing the plain banner for this.

Design11trends29

There are different type of ribbons, some of them with a closer approach to realism while others get crazier with the design.

Design11trends30

Ribbons are not only 3D. On this example we find a beautiful vintage ribbon that looks better than a regular banner by just changing its extremes.

Design11trends31

In this website ribbons and tapes are super helpful. The tape gives a real note appearance whilst the ribbons turn something as basic as a title into a beautiful thing.

Some useful freebies

Before you start making your own ribbons we like to show you a mini list with some beautiful ribbon freebies that you can use in your designs and get inspired.

Ribbons pack free PSD

Design11trends98

Direct download: http://www.wordpressthemeshock.com/free-psd-ribbon-set/

Web ribbons free pack PSD

Design11trends99

Direct download: http://www.wordpressthemeshock.com/ribbons-set-free-psd/

Folded button set and post box design

Design11trends100

Direct download: http://www.wordpressthemeshock.com/folded-buttons/

Ribbon menu

Design11trends101

Direct download: http://designmoo.com/wp-content/plugins/download-monitor/download.php?id=789

Have fun with hover effects and interactive elements

Back on the old Flash days, web designers knew that any button had an On Press state, an On Release and On Roll Over events, they played with these options to make pretty cool animations that were triggered after an specific event occasioned by the visitor. The problem with this is that many computers had no Flash support and the output files were usually heavier than expected.

Now with the arrival of marvelous tools such as HTML5 and CSS3 the creation of beautiful hover effect has become easier. You can deploy nice hover effects on your websites without forcing the visitor to install anything besides a modern browser and also displaying faster load times than the ones shown while using Flash.

Design11trends32

It’s not like HTML5 and CSS3 are the saviors because the change began when jQuery was released, a powerful JavaScript library capable of creating most of the animations that only Flash were able to do.

Design11trends33

Another good idea is play with color, you don’t have to rescale or make the object sway to generate a cool hover effect.

Design11trends34

You could also make something as simpler as working with CSS3 properties, on this example the designers used the rounded corners property to make this subtle hover effect.

Design11trends35

You can use CSS3 to make astonishing animations like this one without slowing down your website because everything is made through code, with no uploads needed.

Design11trends36

On the new version of Premium Pixels, the main icon interacts with the visitor by changing its color when rolling over it.

Design11trends37

Unlike call to action buttons, interactive elements can be created with the only purpose of amusing the visitor by providing to him a richer experience.

Design11trends38

Usually while more subtle the interactivity is, the better the experience turns because it becomes a little gift that the visitor is not expecting to find.

Think about your visitors, make responsive designs

10 years ago, the majority of web users owned desktop computers with screen resolutions that oscillated between 1024 x 768 and 800 x 600 pixels. Designers knew that this was the standard and so they designed everything to fit within that range. That worked well back then but now the possibilities have increased dramatically.

According to statistics, every day there are many people who prefer to navigate through mobile devices, which included smartphones, tablets and even laptops. This means that there’s also a reduction in the amount of persons that prefer classic desktop computers to access the internet, though there will always be persons that prefer the big monitors, usually these persons are game developers, designers and gamers.

So now designers need to make a forethought of their designs so they can be viewable both in smartphones (240×320 to 640×960 pixels) and widescreen monitors (up to 2560×1440 pixels in iMacs). This doesn’t mean that they can play safe by designing everything at the lowest resolution and just leaving an empty space when the resolution increases, on the opposite, the purpose of responsive design is generate fluid websites that adjust to the different resolutions by displacing / rearranging their elements. So we can say that in a small resolution you will see a simplified version of the one created for big monitors but without missing a single element.

Design11trends39

On this page you can notice how while you reduce the screen resolution, the amount of boxes displayed horizontally reduces to fit your browser.

Design11trends40

On this case the fitting occurs both in diagramming and font size without sacrificing the essence of the message or any key element of the page.

Design11trends41

Nice liquid website that rearranges its main elements and reduces the font size in order to fit the different screen resolutions.

Design11trends42

On this case you can see that while you reduce the size of the screen all the elements converge to the middle and some of them also reduce their size.

…And what to avoid

OK, we have seen the major design tendencies that will mark the course of this year, now let’s take a look at those design elements that were once a sign of modernity and now are just big DONT’Ss. You need to parse your designs carefully so you won’t commit any of these next gaffes:

  • Bokeh backgrounds are no longer nice, so stop using them.
  • Blue hyperlinks?, that’s so 1997.
  • No more glossy, it’s time to switch towards matte.
  • Don’t even consider using pop-ups, they’re annoying.
  • Be careful with cluttering.
  • One post, one page, you’re not writing a book.
  • Flash rocks, but no longer for the internet.
No more blurry bubbles, quit using bokeh!

Probably the first thing that will appear in your head is going to be something like “you morons, your own website has a bokeh background XD”. Well that’s precisely the reason of this point, that we’re fully aware that using this style is no longer attractive, so let us give you an spoiler and say that you’ll be seeing shortly the brand-new WebDesignShock.

Bokeh is a Japanese word that means blur or haze. This tendency began as a photography technique that’s still used by photographers as it gives beautiful results, the problem is that web designers thought that will look well in their sites but the reality was other. Bokeh backgrounds have become a sad cliché that needs to disappear in order to welcome cleaner backgrounds, subtle textures and innovative techniques.

Design11trends43

If those bubbles were actually part of a photograph and not an artificial effect we could probably let them stay, but sadly they’re not.

Design11trends44

This site has a good typographic work that gets affected by those magenta and cyan bubbles on the back, a subtle textured background would probably look better.

Design11trends45

Another case of bokeh that prejudices a decent website, our advice is the same that on the previous element, opt for a textured background will be a better choice.

Design11trends46

On this case the designer was not able to resist the temptation of bokeh and he harmed a design that was already looking good with that wood texture.

Blue, underlined hyperlinks?, come on!

Unless you’re Google and these are part of your identity, blue, underlined hyperlinks are not good. Using the default version of hyperlinks is a serious mistake that you should not be committing on these days. In the past it was necessary to use these blue hyperlinks because people was still adjusting to this new thing known as internet. Now that everybody knows how to use it, a blue hyperlink is just unpleasant, specially if you’re someone that worries about design; we don’t need to showcase a list of examples because you know exactly how these links look like, so this next picture is more than enough.

Design11trends47

That’s how your links cannot look, that blue color is too invasive and leaving Arial by default is not good. Regarding the underline we won’t tell you not to use it because many times it helps people to notice when something is actually a hyperlink.

Design11trends54

You don’t need to be an expert designer to make good hyperlinks, just change the font’s color and you will be already making a big improvement.

Design11trends55

On this example we can see that all the default elements have been removed and replaced for a color change when hovering over the link.

We’re not in 2000, glossy is no longer popular

One of the main characteristics of web design during the first decade of this century was glossy design. Hand by hand with the web 2.0, almost every website incorporated a glossy look on their interfaces to look like the next real thing in social networking.

Glossy design enjoyed several years of acclamation, being taken by almost every web designer. It seemed like a matte design just couldn’t fit in that world and so a whole generation saw how every website got ended up infested with white layers placed on top of another, an abuse of the Multiply effect and just an excessive amount of bright elements that almost forced you to wear sunglasses.

But as we know, nothing lasts forever, specially in design, and glossy websites have moved from being the best alternative to now being an almost forbidden style for web designers.

Design11trends48

You can see how this example simply glows because of its bright colors and gradients.

Design11trends49

A good way to detect a glossy website is that light division that leaves one part brighter than the other, this was highly utilized with logos and icons.

Design11trends50

What can we say?, the excess of light effects, glossy gradients and white is quite evident.

Design11trends51

If you take a look at the ‘Home’ button you will see the cut gradient that we told you about, then you can place your view over the left gradient, that’s bad isn’t it?.

No one reads pop-ups, they’re too aggressive

We all know pop-ups, those aggressive ads that show up when you less expect it. You can find them in different styles, the ones that display another window and you need to close before continue, others that appear in the middle of the site and turn everything dark except the pop-up itself and other similar ones, they all basically fulfill the mission of ruining everyone’s day.

Although there are many pop-up blockers the truth is that they need to disappear, so make sure that your website does not trigger any kind of pop-up messages, otherwise you will be losing visitors and / or getting your actual content being blocked by them.

Design11trends52

One type of popups are those that display a maximized window once you access a site, you only need to close the window but still is really distracting.

Design11trends56

There’s another type of popups that are even more irritating than the previous one, these popups are displayed on the same page and you can’t do anything until you close it.

Design11trends63

Here’s another example of those inopportune popups that block your navigation when you less expect it to happen.

Keep things simple, don’t saturate

There’s not to much to say besides of what the title is already saying. In this year we will be seeing a tendency towards clean interfaces, plenty of light colors, light typefaces and all the other design elements that can help you have a pleasant stay while visiting a website.

Clutter can be appreciated in many ways, e.g having a rainbow palette, a typeface’s soup or image after image being bombarded to the visitor (this makes difficult the navigation). We don’t want to jeopardize your eye and that’s why we’re only showing a single example of cluttered web design, we’re sure that’s enough to help you understand.

Design11trends53

We could be a little condescending with this site because it’s a kid’s web, nevertheless is a good example of saturation in web design.

Design11trends57

This is a perfect example of saturation in web design, tons of text, different typefaces both in size and style, an obnoxious color palette and just everything to prevent people from actually getting the message.

Design11trends58

Although it’s not necessary to wear white as the primary color on your site, this color can help you with the diagramming process of your site. On this example we can see a good example of web design where every element has been accurately placed, the typeface is simple and constant throughout the site and the information is easy to read.

One page per post, you’re not writing a book

This point does not specifically talk about design but more of an inefficient way of publishing posts. If we have great tools such as progressive loading to prevent slow-loading rates, then what’s the necessity of having multiple page posts?. We have seen many places (specially tutorial websites) where you have more than 5 pages in a single article, that’s just wrong and we can guarantee that more than half of the persons who read that article won’t read it again.

Let’s take Google Images for example. On the past you had to browse across tens of webpages before you could actually find what you were looking for, Google understood that problem and implemented a progressive loading system that displays the next results page within the first page once you have reached the end of this one. With blog posts that’s even easier because loading text is a piece of cake, so you probably won’t even need a progressive loading system.

If you want to know more opinions about this object you can visit Lorelle’s “The Rant Against Multiple Page Posts”.

Design11trends59

If you’re concentrated following a tutorial and suddenly you need to stop and load the next page it can leave you enough time to get distracted, or you can find that the next page may be broken and you have wasted your time, these are just some of the flaws of multipage posts.

Design11trends60

Another problem shows up when reading a multipage post, and that’s the fact that you can’t go back instantly to check something you forgot or just repass a previous step of a tutorial. You’ll have to load the previous page and then you can continue.

Yes, Flash is great, but it’s also ineffective

Flash ruled the internet for many years, since the days when we knew it as Macromedia Flash, this program earned the affection from all designers thanks to the fancy animations and interfaces that you were able to create. There was nothing wrong in this because there was not a real alternative to Flash until we witnessed the appearance of jQuery, HTML5 and CSS3.

The truth is that Flash won’t die, we’re just going to give the program a farewell from the internet, because it will still rule for many years in the fields of multimedia and animation, so we can say that HTML5 and the others are not here to kill Flash, they’re just relieving a heavy charge to it by taking command over the internet.

Of course that Flash will still be present in some web tasks like interactive videos, but regarding web design, it’s better to work with HTML5 and CSS3, specially now that they have big support in modern browsers, something that does not occur with Flash, not because browsers can’t handle it but because the average internet user doesn’t care about installing Flash Player and similar complements.

After saying this, our advice for all designers is to let go Flash and embrace these new amazing tools whose only purpose is making your life easier, Flash will never die because let’s face it, nobody likes to say goodbye to a beloved one.

Design11trends61

Playable websites can now be made without Flash, and this site is an excellent example to support that statement.

Design11trends62

Interactive books were very popular (still are) and we saw many magazines and publications adopting this Flash-powered style. Now we can make the same kind of websites with HTML5.

Design11trends64

Another thing that we can now recreate without Flash are the fancy animated buttons that we used to make with Movie Clips and ActionScript.

Final thoughts

What can we say to finish this article properly?, we can say that 2011 is going to be a year of transitions where the web 2.0 with all its glossy pages and stuff will begin its eclipse and so we can forethought that by the end of this year we will start seeing the raise of a new web fill with new communication channels, an empowered presence of social networks and of course, all of this accompanied by a new wave in web and graphic design.

As we said on the intro, the main design trends that will prevail throughout this year are going to be call to action buttons, curved shadows, web fonts, CSS3, textures, pixel perfect, responsive websites among others. Things like bokeh and the whole glossy wave are now over, taking a step aside for cleaner interfaces, textured backgrounds and a lot of matte.

All these points were listed on this showcase after a thoughtful research where we evaluated dozens of websites, different design articles where the topic was discussed and of course an inner debate that took place in our headquarters before pulling this article together. We will remain as permanent vigilantes, looking for the next big thing in design and bringing it to you before it begins to thrive; finally we like to say that we truly hope that this assessment has been of any help to understand the current state of web and graphic design, we don’t consider this as a finished article but just an entry to open the debate; we invite you to visit our comments section and leave us a message, letting us know your thoughts about this article, we will really appreciate the feedback. Thanks for visiting our site and we’ll see you in our next article.


53 Responses to “Call to action buttons, curved shadows, pixel patterns and more design freebies”

  1. Excellent collection!

  2. Awesome!! Thanks for the inspiration/files guys :)

    • WebDesignShock
      April 13th

      Thanks Lee!, we’re happy of knowing you liked the article :D…

  3. Very good article, thanks for such deep info and research :)

  4. A MUST READ

  5. Great article, great collection… Thanks for sharing..

  6. dreamkotadotcom
    April 12th

    Is it just me, or could “garish” and “cludgety” describe the design of this website … a site about website design?

  7. Anonymous
    April 13th

    Oh wow! Really greate post, Especially thanks for the freebies!

  8. Web Designers
    April 15th

    nice icon packs, thanks for sharing this post..

  9. Anonymous
    April 15th

    Superb article, just like one on 2011 design trends, this is a must read! Keep up with these great posts :)

    • WebDesignShock
      April 15th

      Thanks man!, we’re so excited of seeing our article having such a great reception, stick with us for more great articles and resources…

    • Anonymous
      April 21st

      Will do :)

  10. Hi could you please remove the direct download link in your post for my CSS3 Buttons? It says right in the post “The only thing I ask is please do not distribute the buttons yourself, and the buttons are only to be downloaded from this page. The URL to share is: http://www.vagrantradio.com/2010/12/css3-buttons-add-classes-make-buttons.html

    Thanks!

    • WebDesignShock
      April 28th

      Our apologies Jason, we did not see the message when grabbing the link of your post, we’ve just replace it for the proper link…

  11. I’m pretty sure this site uses bokeh site on top. What about the gradient on these top bar (TheShockBundle)? Plus, it also distracting the reader. ;)

    • jeprie
      April 30th

      I mean bokeh background. Sorry. :)

    • jeprie, yes, you are right, we are upgrading our design, this one is 1 year old :/ … and about the shock bundle, did u check it ? is our premium side and the way we can pay the bills ;)

    • I hope you can also change the social network list on right side. There’s too many distraction in current design.

      I’ve seen the shock bundle, I swear it’s the best bundle I’ve ever seen. Nice, I always love your work.

    • Noted, thanks for your comments and words :)

    • I agree completely. There is absolutely no need for all those social links/buttons! If you have the facebook like button, no need to put the icon– as the button acts as a “share” button as well.

      INCREDIBLE POST. Love you guys :)

    • Anonymous
      May 5th

      Love you too :)

    • WebDesignShock
      May 6th

      Thanks Luke!, don’t forget to check our sister ThemeShock for more astounding freebies…

  12. Gus
    May 2nd

    You guys have to be the some of the nerdiest researchers around and I”ll praise that…

    ”that’s so 1997” LOL.

    • WebDesignShock
      May 3rd

      We’ll take that as a complement hahah, thanks Gus…

  13. Aaron
    May 11th

    Enjoy reading this one. Thanks

    • WebDesignShock
      May 11th

      You’re welcome Aaron, thanks for your comment ;)…

  14. This is a great collection of useful resources, I am steadily looking through them all now but I have found some brilliant ideas for use with future designs.

  15. I can not wait to use some of these great freebies AND I have learned a lot of easy and creative ways to draw attention to my websites. Thanks again Shock Family!

  16. [...] friends, we hope you’re having a terrific week and that you enjoyed reading our latest article ‘Helpful design elements you should be using & great related freebies’. As you may have noticed, since the past couple of weeks we have been releasing quick reviews and [...]

  17. [...] Helpful design elements you should be using & great related freebies [...]

  18. [...] And this is what we obtain, a really nice texture on top of our gradient that adds a really nice detail to the gradient. If you want to read more about textures in web design we suggest you the latest WebDesignShock article named ‘Helpful design elements you should be using & great related freebies’. [...]

  19. Call to action buttons, curved shadows, pixel patterns and more design freebies http://t.co/JvThNm5r via @webdesignshock

  20. Call to action buttons, curved shadows, pixel patterns and more design freebies http://t.co/gCKCd2FY via @webdesignshock

  21. Call to action buttons, curved shadows, pixel patterns and more design freebies http://t.co/BGXj3WBw via @webdesignshock

  22. Call to action buttons, curved shadows, pixel patterns and more design freebies http://t.co/T4jmJEi2 #design #useful

  23. RT @WebDesignShock: Call to action buttons, curved shadows, pixel patterns and more design freebies http://t.co/FtV6Klyu #design #useful

  24. RT @WebDesignShock: Call to action buttons, curved shadows, pixel patterns and more design freebies http://t.co/T4jmJEi2 #design #useful

  25. RT @WebDesignShock: Call to action buttons, curved shadows, pixel patterns and more design freebies http://t.co/T4jmJEi2 #design #useful

  26. RT @WebDesignShock: Call to action buttons, curved shadows, pixel patterns and more design freebies http://t.co/iXYs0GwR #design #useful

  27. Call to action přípravky na web: http://t.co/fhqEu0kB #webdesign #useful

  28. Call to action buttons, curved shadows, pixel patterns and more design freebies http://t.co/YFqkLBWn via @webdesignshock

  29. RT @WebDesignShock: Call to action buttons, curved shadows, pixel patterns and more design freebies http://t.co/B8olv1pG #design #useful

  30. Wow, awesome list of CSS3 Buttons, some ribbons and other lovely, usefull stuff
    http://t.co/uihvqLDp

  31. Call to action buttons, curved shadows, pixel patterns and more design freebies – WebDesignShock http://t.co/z1WWLniM

Leave a Reply

Comments

*