Call to action buttons, curved shadows, pixel patterns and more design freebies
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.
This simple element informs the person about a specific product without occupying much space but still being easy to notice.
You can have beautiful elements like these that work perfectly as call to action buttons while displaying an exquisite graphic taste.
Elegant, minimal and highly-effective, this one is definitely a great example of call to action buttons.
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:
Direct download: http://www.wordpressthemeshock.com/free-button-set/
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.
Imagine these lovely boxes with straight shadows, there’s no way that they can look as great as they do with this look.
You can use rounded shadows in something as simple as a contact form like the one you can see on the picture above.
Using rounded shadows can help you give a ‘pop-up’ effect to your boxes, which is something that’s hitting really hard these days.
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:
Direct download: http://www.premiumpixels.com/download/?file=box-shadows
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.
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.
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.
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.
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:
Direct download: http://www.google.com/webfonts/download?kit=W9iheInNYnF75QjkBAj—w
Direct download: http://www.google.com/webfonts/download?kit=DeRzO2aa-x0mQzi69U1bdg
Direct download: http://www.google.com/webfonts/download?kit=qzRq6kFi6uVBUnW-Apn2WA
Direct download: http://www.google.com/webfonts/download?kit=yjMhvZg9ebF34Ad3l0Gdvw
Direct download: http://www.google.com/webfonts/download?kit=FwSm2G5WY3pteEc_zL2tQQ
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.
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.
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.
On this case two different textures were used for the background and that’s practically enough to make a grand contribution to the diagramming.
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:
Direct download: http://www.wordpressthemeshock.com/free-vintage-retro-texture-pack/
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.
Yes, that’s Twitter’s fail whale created on pure CSS, pretty cool isn’t it?.
This one remains me of Reptar, though it looks a little bit rough the fact that it was created with only CSS is remarkable.
This beautiful box was created in base of an actual Photoshop work, the result is practically identical and more lightweight.
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:
Direct download: http://www.wordpressthemeshock.com/clean-css3-boxes/
Direct download: http://bit.ly/eTf53h
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.
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.
Textures and pixel-perfect are not mutually exclusive, as it’s clearly shown on the previous example.
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.
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.
Direct download: http://www.wordpressthemeshock.com/free-credit-card-icons/
Direct download: http://www.wordpressthemeshock.com/free-black-gui-psd/
Direct download: http://www.wordpressthemeshock.com/free-login-psd/
Direct download: http://www.iconshock.com/social-icons/
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.
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.
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.
Another great idea is to utilize old school pictures and make amazing things with them thanks to programs like Photoshop.
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:
Direct download: http://www.wordpressthemeshock.com/vintage-typewriter-vector/
Direct download: http://www.wordpressthemeshock.com/free-polaroid-psd/
Direct download: http://www.wordpressthemeshock.com/free-vintage-retro-radio-icon/
Direct download: http://www.wordpressthemeshock.com/free-vintage-retro-tv-icon/
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.
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.
There are different type of ribbons, some of them with a closer approach to realism while others get crazier with the design.
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.
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.
Direct download: http://www.wordpressthemeshock.com/free-psd-ribbon-set/
Direct download: http://www.wordpressthemeshock.com/ribbons-set-free-psd/
Direct download: http://www.wordpressthemeshock.com/folded-buttons/
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.
Another good idea is play with color, you don’t have to rescale or make the object sway to generate a cool hover effect.
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.
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.
On the new version of Premium Pixels, the main icon interacts with the visitor by changing its color when rolling over it.
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.
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.
On this page you can notice how while you reduce the screen resolution, the amount of boxes displayed horizontally reduces to fit your browser.
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.
Nice liquid website that rearranges its main elements and reduces the font size in order to fit the different screen resolutions.
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.
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.
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.
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.
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.
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.
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.
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.
You can see how this example simply glows because of its bright colors and gradients.
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.
What can we say?, the excess of light effects, glossy gradients and white is quite evident.
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.
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.
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.
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.
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.
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.
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”.
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.
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.
Playable websites can now be made without Flash, and this site is an excellent example to support that statement.
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.
Another thing that we can now recreate without Flash are the fancy animated buttons that we used to make with Movie Clips and ActionScript.
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.