web design trends 2013

25
Web Design Trends you can expect to see in 2013

Upload: faruk-dokumaci

Post on 16-Apr-2017

1.728 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Web Design Trends 2013

Web Design Trends you can expect to see in 2013

Page 2: Web Design Trends 2013

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.

Page 3: Web Design Trends 2013

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.

Page 4: Web Design Trends 2013

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

Page 5: Web Design Trends 2013

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.

Page 6: Web Design Trends 2013

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.

Page 7: Web Design Trends 2013

CSS3 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.

Page 8: Web Design Trends 2013

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!

Page 9: Web Design Trends 2013

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 Support

Page 10: Web Design Trends 2013

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.

Page 11: Web Design Trends 2013

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.

Page 12: Web Design Trends 2013

CSS 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.

Page 13: Web Design Trends 2013

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.

Page 14: Web Design Trends 2013

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.

Page 15: Web Design Trends 2013

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 Bars

Page 16: Web Design Trends 2013

Digital 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.

Page 17: Web Design Trends 2013

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

Page 18: Web Design Trends 2013

Parallax 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.

Page 19: Web Design Trends 2013

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.

Page 20: Web Design Trends 2013

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.

Page 21: Web Design Trends 2013

Deep 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!

Page 22: Web Design Trends 2013

Vertical 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.

Page 23: Web Design Trends 2013

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.

Page 25: Web Design Trends 2013