1. Web Design Trends
you can expect to
see in 2013
Web Design Trends
you can expect to
see in 2013
2. It should be no surprise that responsive web design is here to stay, so why predict it as a trend in 2013?
Simple: the methodology behind responsive design is still changing and being established. When new devices
hit the market such as the iPad mini, this idea was challenged, leaving us with the idea that the breakpoints
should be made when the design falls apart instead.
More responsive
design, please.
More responsive
design, please.
3. Typography will
take center stage.
Typography will
take center stage.
Web design is 95% typography. The major part of information in the Web presented with words. Today
every designer uses typography as a decoration element. Web font foundries (Google fonts and Typekit)
allow you to use hundreds of different fonts.
4. Buh-bye Flash. Hello
just about anything
else.
Buh-bye Flash. Hello
just about anything
else.
No surprise here as far as a trend that will carry over from 2012. It’s highly evident that Flash is on its last
leg. It’s bad for the SEO of a site, many mobile devices don’t support it, and it is a pain to update (it crashes
browser all the time, what about you?). Plus, there are so many other technologies out there that can do
what Flash does now (i.e. HTML5/CSS3, JavaScript, etc.).
5. Skeuomorphism. Skeuo...What? Skeuomorphism is a technique or graphic style that presents interface
elements as real-world references to things we instantly understand. You may love it or hate it, but it is
still life and many cool websites are designed that way.
Skeuomorphism will
show its age.
Skeuomorphism will
show its age.
6. Large images used
for large impact
visuals
Large images used
for large impact
visuals
This goes against the prediction above about typography being used more than images due to the site
weight. However, more websites are using large images on their home page to make an impact. These same
websites are also keeping bandwidth and data usage in mind by only serving large images to those with
large screens.
7. CSS3 AnimationsCSS3 Animations
The CSS3 transition property and all the related browser prefixes offers CSS dynamic effects just like
JavaScript. Designers can now animate effects on the page based on different CSS properties. This is
definitely a trend which offers some promise in the coming months and years with lots of room to advance.
8. Toward the end of 2012 websites were being designed with more white space. I predict this will continue as
we move into 2013. These white space heavy designs lend an air of gravitas, and who doesn’t want their
website to make them seem professional and knowledgeable?
Give me more white
space!
Give me more white
space!
9. Along with responsive support for website layouts I have also seen a dramatic rise in people building for
retina devices. Apple first engineered this idea with the iPhone 4 and has since applied this screen display
onto their other devices, including the iPad and some MacBooks.
Retina SupportRetina Support
10. More sharing on
social networks.
More sharing on
social networks.
Look for more social media integration into your favorite websites and even new websites. While sharing
buttons at the end of articles is very old news, the use of deeper integration with social media networks on
websites to explode in 2013.
11. Twitter Bootstrap
is the Definitive
Framework
Twitter Bootstrap
is the Definitive
Framework
Twitter Bootstrap began as a barebones set of UI elements to help speed up the process of creating web
applications. It's no longer just for creating a UI for your next Rails app, however, as Bootstrap has since
grown into a full-fledged web-creation framework, complete with responsive layouts, interactive JavaScript
plugins, customizable components and more.
12. CSS TransparencyCSS Transparency
The new CSS3 properties have allowed for opacity edits on any webpage element. This means you have
control to generate transparency in any modern web browser – no Photoshop required! This trend of web
design transparency was recently discussed on Codrops with some very enlivening talking points.
13. Minimalist Landing
Pages
Minimalist Landing
Pages
Creating a landing page online is all about capturing new leads for your product or service. New trends are
following the idea of minimalism: keep everything simple and focus on your core product.
14. Calmer color
schemes to reappear
Calmer color
schemes to reappear
Color trends come and go faster than anything, but look for the use of more subdued or calmer color
schemes as new websites make their way to the Web. This is already evident in some websites launched in
the last few months, such as PayPal’s home page redesign.
15. Using the CSS position: fixed; property is a great way to staple a header bar onto your website. As visitors
scroll down your page this will offer constant support for navigation and a trip back to the home page.
This trend has been around for a while but now we are seeing this in full force.
Fixed Header BarsFixed Header Bars
16. Digital QR CodesDigital QR Codes
The abundance of mobile smartphones has led to a surge of QR Code apps. This stands for Quick Response
Code and has developed from the older UPC barcodes. You will find these tagged everywhere from
restaurants to event venues and automobile sales lots.
17. Newer design trends are all about catching and holding one’s attention. The illustrations perform this task
brilliantly. The problem is finding a designer who can make such impeccable works of art, or even teaching
yourself.
Detailed
Illustrations
Detailed
Illustrations
18. Parallax ScrollingParallax Scrolling
Parallax Scrolling is part of the scrolling feature of web design. With the help of moving multiple
backgrounds, designers create a sensation of depth. Parallax scrolling deals with usability of a site, because
the way of interacting between users and a web site is very important.
19. Sliding
Webpage Panels
Sliding
Webpage Panels
Dynamic websites used to be very popular when Flash and ActionScript were all the rage. Now, dynamic
effects have moved into the realm of JavaScript/jQuery, and this has in turn affected the way designers build
websites.
20. Mobile
Navigation Toggle
Mobile
Navigation Toggle
When speaking of responsive design one of the most difficult questions is how to build a solid navigation.
You want to give your readers direct access to all your important links, without flooding the page making it
unreadable. It is also a good idea to keep your responsive navigation hidden away until it’s needed.
21. Deep Box ShadowsDeep Box Shadows
Always expect to see box shadows infused with elements in modern web designs. The effects look amazing
and they rarely detract from the aesthetics except when overused. The trend is already deeply ingrained into
the design community, now it is more about who can be the most creative!
22. Vertical NavigationVertical Navigation
More and more designers creating elegant solutions with the vertical rhythm still intact. And when done
properly, vertical website layouts can be affluent with content and design taste.
23. Circular
Design Elements
Circular
Design Elements
The trend of circles within website layouts is something newer and has been given a lot of attention recently.
Designers like circles because they are clean, neat, and generally fit into any layout block. You can build
patterns and even fix your page elements into circular designs.