Web Design Trends 2013


Published on

Published in: Design, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Design Trends 2013

  1. 1. Web Design Trendsyou can expect tosee in 2013Web Design Trendsyou can expect tosee in 2013
  2. 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 deviceshit the market such as the iPad mini, this idea was challenged, leaving us with the idea that the breakpointsshould be made when the design falls apart instead.More responsivedesign, please.More responsivedesign, please.
  3. 3. Typography willtake center stage.Typography willtake center stage.Web design is 95% typography. The major part of information in the Web presented with words. Todayevery designer uses typography as a decoration element. Web font foundries (Google fonts and Typekit)allow you to use hundreds of different fonts.
  4. 4. Buh-bye Flash. Hellojust about anythingelse.Buh-bye Flash. Hellojust about anythingelse.No surprise here as far as a trend that will carry over from 2012. It’s highly evident that Flash is on its lastleg. It’s bad for the SEO of a site, many mobile devices don’t support it, and it is a pain to update (it crashesbrowser all the time, what about you?). Plus, there are so many other technologies out there that can dowhat Flash does now (i.e. HTML5/CSS3, JavaScript, etc.).
  5. 5. Skeuomorphism. Skeuo...What? Skeuomorphism is a technique or graphic style that presents interfaceelements as real-world references to things we instantly understand. You may love it or hate it, but it isstill life and many cool websites are designed that way.Skeuomorphism willshow its age.Skeuomorphism willshow its age.
  6. 6. Large images usedfor large impactvisualsLarge images usedfor large impactvisualsThis goes against the prediction above about typography being used more than images due to the siteweight. However, more websites are using large images on their home page to make an impact. These samewebsites are also keeping bandwidth and data usage in mind by only serving large images to those withlarge screens.
  7. 7. CSS3 AnimationsCSS3 AnimationsThe CSS3 transition property and all the related browser prefixes offers CSS dynamic effects just likeJavaScript. Designers can now animate effects on the page based on different CSS properties. This isdefinitely a trend which offers some promise in the coming months and years with lots of room to advance.
  8. 8. Toward the end of 2012 websites were being designed with more white space. I predict this will continue aswe move into 2013. These white space heavy designs lend an air of gravitas, and who doesn’t want theirwebsite to make them seem professional and knowledgeable?Give me more whitespace!Give me more whitespace!
  9. 9. Along with responsive support for website layouts I have also seen a dramatic rise in people building forretina devices. Apple first engineered this idea with the iPhone 4 and has since applied this screen displayonto their other devices, including the iPad and some MacBooks.Retina SupportRetina Support
  10. 10. More sharing onsocial networks.More sharing onsocial networks.Look for more social media integration into your favorite websites and even new websites. While sharingbuttons at the end of articles is very old news, the use of deeper integration with social media networks onwebsites to explode in 2013.
  11. 11. Twitter Bootstrapis the DefinitiveFrameworkTwitter Bootstrapis the DefinitiveFrameworkTwitter Bootstrap began as a barebones set of UI elements to help speed up the process of creating webapplications. Its no longer just for creating a UI for your next Rails app, however, as Bootstrap has sincegrown into a full-fledged web-creation framework, complete with responsive layouts, interactive JavaScriptplugins, customizable components and more.
  12. 12. CSS TransparencyCSS TransparencyThe new CSS3 properties have allowed for opacity edits on any webpage element. This means you havecontrol to generate transparency in any modern web browser – no Photoshop required! This trend of webdesign transparency was recently discussed on Codrops with some very enlivening talking points.
  13. 13. Minimalist LandingPagesMinimalist LandingPagesCreating a landing page online is all about capturing new leads for your product or service. New trends arefollowing the idea of minimalism: keep everything simple and focus on your core product.
  14. 14. Calmer colorschemes to reappearCalmer colorschemes to reappearColor trends come and go faster than anything, but look for the use of more subdued or calmer colorschemes as new websites make their way to the Web. This is already evident in some websites launched inthe last few months, such as PayPal’s home page redesign.
  15. 15. Using the CSS position: fixed; property is a great way to staple a header bar onto your website. As visitorsscroll 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. 16. Digital QR CodesDigital QR CodesThe abundance of mobile smartphones has led to a surge of QR Code apps. This stands for Quick ResponseCode and has developed from the older UPC barcodes. You will find these tagged everywhere fromrestaurants to event venues and automobile sales lots.
  17. 17. Newer design trends are all about catching and holding one’s attention. The illustrations perform this taskbrilliantly. The problem is finding a designer who can make such impeccable works of art, or even teachingyourself.DetailedIllustrationsDetailedIllustrations
  18. 18. Parallax ScrollingParallax ScrollingParallax Scrolling is part of the scrolling feature of web design. With the help of moving multiplebackgrounds, designers create a sensation of depth. Parallax scrolling deals with usability of a site, becausethe way of interacting between users and a web site is very important.
  19. 19. SlidingWebpage PanelsSlidingWebpage PanelsDynamic websites used to be very popular when Flash and ActionScript were all the rage. Now, dynamiceffects have moved into the realm of JavaScript/jQuery, and this has in turn affected the way designers buildwebsites.
  20. 20. MobileNavigation ToggleMobileNavigation ToggleWhen 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 itunreadable. It is also a good idea to keep your responsive navigation hidden away until it’s needed.
  21. 21. Deep Box ShadowsDeep Box ShadowsAlways expect to see box shadows infused with elements in modern web designs. The effects look amazingand they rarely detract from the aesthetics except when overused. The trend is already deeply ingrained intothe design community, now it is more about who can be the most creative!
  22. 22. Vertical NavigationVertical NavigationMore and more designers creating elegant solutions with the vertical rhythm still intact. And when doneproperly, vertical website layouts can be affluent with content and design taste.
  23. 23. CircularDesign ElementsCircularDesign ElementsThe 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 buildpatterns and even fix your page elements into circular designs.
  24. 24. Credits:hongkiat.comthenextweb.commashable.comwebdesign.org