ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Web design trends 2013

•Download as PPTX, PDF•
•
Xavier Martin
Xavier Martin

Magik New Media is a user experience designer for both web and mobile platforms in Brisbane, Australia. Having numerous numbers of design assignments under its belt, Magik New Media associates regularly distribute tactics on subjects of contemporary design developments and social media. You can review several of our work on MagikNewMedia.com portfolio page or follow twitter updates @magik_new_media.

1 of 25
Downloaded 14 times
WEB DESIGN 20 Hottest Trends To Watch Out For in 2013
FAVORABLE IDEAS IN THE WEB DESIGN COMMUNITY
Web design trends 2013
1. RESPONSIVE LAYOUTS Uniform web design. The big idea here is to think about website design as a single canvas which is dynamic and fluid by nature. CSS3 media queries allow developers to customize layouts based on limited or expanded screen real estate. Use this to your advantage and see how other designers are using it as well!
2. RETINA SUPPORT Twice as dense as any average LCD. web designers supporting retina devices will need to create two sets of http://media02.hongkiat.com/web-design-trend-2013/.
3. FIXED HEADER BARS But aside from the aesthetics, this bar also provides an exceptional user experience without needing to look very far to navigate the website.
4. LARGE PHOTO BACKGROUNDS Excellent way to capture your visitor’s This unique background photo behaves attention as custom branding for everybody who lands on his website.
5. CSS TRANSPARENCY One excellent example is on the Squarespace Blog where the central wrapper is given a background: transparent property.
6. MINIMALIST LANDING PAGES Access to a large consumer base from anywhere in the world. following the idea of minimalism. This is exemplified on the PictoPro webpage which offers a beautiful resource for cheap icons.
7. DIGITAL QR CODES You can see a brilliant example of this technique on Keith Cakes contact page.
8. SOCIAL MEDIA BADGES You can check practically any social community for sharing badges and will likely find a great solution. You can position these badges pinned to blog posts and articles anywhere in your layout. These are still used actively by readers and fans who want to share content quickly on places like Facebook, Twitter, or even LinkedIn.
A SMALL LIST OF SOCIAL MEDIA BADGES StumbleUpon Badges Free Social Google +1 Media Icon Button Sets Dzone Vote Pinterest Buttons Buttons Hacker News LinkedIn Vote Badge Share Badge
9. DETAILED ILLUSTRATIONS Illustrations can be used in many various ways to bring about different moods in your website. Look around the Internet, and you will find many different website galleries and showcases focusing on digital illustrations. You can see these artistic works eventually blend into its website branding almost perfectly. MailChimp is probably the most definitive example with its trademark chimp mail carrier.
10. INFINITE SCROLLING Pinterest has adopted this loading technique for their layout and it works beautifully. You can search anything and the results page will continually load as you scroll down. Pagination is basically a non-issue and doesn’t even work as a detriment into the user experience. Talk about designing for simplicity!
11. HOMEPAGE FEATURE TOURS Looking back over 2012 I would say my favorite example of this trend is on MediaFire’s homepage. The entire top portion of the page rotates between a series of slides. They each explain what you can do on MediaFire and how their features compare with other websites.
12. SLIDING WEBPAGE PANELS Right off the bat you may not think CaptainDash is any special website. But as you click through the navigation you will learn that each page is loaded in succession pushing from left-to-right. Dynamic effects such as these do not always bode well for mobile users.
13. MOBILE NAVIGATION TOGGLE Enter this beautiful design trend of mobile navigation toggle menus. The Treehouse Blog is merely one example of this technique which looks brilliant on your smartphone. And even in your web browser! But there are dozens of websites and design studios who have adopted this trend for their own responsive layouts.
14. FULLSCREEN TYPOGRAPHY Alex Pierce has a great website layout which does focus deeply on typography. You can see this includes rich text effects using CSS3 properties. Additionally the website is very easy to navigate, and many of the other page elements appear oversized as well.
15. APIS AND OPEN SOURCE Open APIs and resources like Github allow designers to not only prototype layouts, but also animations and effects on the page. jQuery has a practically uncountable number of plugins for free download to be found all over the Web.
16. DEEP BOX SHADOWS I believe the problems that designers had to face years ago stemmed from box shadows being too difficult to implement. Back a few years, this effect would require some type of JavaScript or direct background http://media02.hongkiat.com/web-design-trend-2013/ created in Photoshop. Now box shadows can be generated with a few lines in CSS.
17. CSS3 ANIMATIONS Another excellent and very inspiring example comes from a CSS alerts tutorial on Codrops. Notice how you can setup various times and settings for the animations.
18. VERTICAL NAVIGATION The portfolio on Riot Industries is a great example for newer web designers. Check This textured ef fect is apparent in other vertical layouts as well, such out how the navigation links work and how as the CSS gallery Design Bombs. the portfolio entries are dynamic on hover effects.
19. SINGLE-PAGE WEB DESIGN I think the website design for Cage App is possibly one great example of many trends listed in this article. They are utilizing a single-page layout brilliantly with content split up by horizontal containers. But you will also notice the very top of the page features a blurred background photo effect.
20. CIRCULAR DESIGN ELEMENTS The portfolio of Lucia Soto is basically one terrific example of circular web design. The website is built dynamically so you are panning horizontally to different segments in the page. You will notice some cute vector artwork dotted along the sidelines as well. Web designers crave these extra tidbits in page layouts because they ooze uniqueness.
FINAL THOUGHTS User interface design is one of the most complex topics when building digital products. This rings especially true for website layouts, trying to match navigations and content styles for a successful user experience. These design trends aim to point designers in the right direction.

More Related Content

Web design trends 2013

  • 1. WEB DESIGN 20 Hottest Trends To Watch Out For in 2013
  • 2. FAVORABLE IDEAS IN THE WEB DESIGN COMMUNITY
  • 4. 1. RESPONSIVE LAYOUTS Uniform web design. The big idea here is to think about website design as a single canvas which is dynamic and fluid by nature. CSS3 media queries allow developers to customize layouts based on limited or expanded screen real estate. Use this to your advantage and see how other designers are using it as well!
  • 5. 2. RETINA SUPPORT Twice as dense as any average LCD. web designers supporting retina devices will need to create two sets of http://media02.hongkiat.com/web-design-trend-2013/.
  • 6. 3. FIXED HEADER BARS But aside from the aesthetics, this bar also provides an exceptional user experience without needing to look very far to navigate the website.
  • 7. 4. LARGE PHOTO BACKGROUNDS Excellent way to capture your visitor’s This unique background photo behaves attention as custom branding for everybody who lands on his website.
  • 8. 5. CSS TRANSPARENCY One excellent example is on the Squarespace Blog where the central wrapper is given a background: transparent property.
  • 9. 6. MINIMALIST LANDING PAGES Access to a large consumer base from anywhere in the world. following the idea of minimalism. This is exemplified on the PictoPro webpage which offers a beautiful resource for cheap icons.
  • 10. 7. DIGITAL QR CODES You can see a brilliant example of this technique on Keith Cakes contact page.
  • 11. 8. SOCIAL MEDIA BADGES You can check practically any social community for sharing badges and will likely find a great solution. You can position these badges pinned to blog posts and articles anywhere in your layout. These are still used actively by readers and fans who want to share content quickly on places like Facebook, Twitter, or even LinkedIn.
  • 12. A SMALL LIST OF SOCIAL MEDIA BADGES StumbleUpon Badges Free Social Google +1 Media Icon Button Sets Dzone Vote Pinterest Buttons Buttons Hacker News LinkedIn Vote Badge Share Badge
  • 13. 9. DETAILED ILLUSTRATIONS Illustrations can be used in many various ways to bring about different moods in your website. Look around the Internet, and you will find many different website galleries and showcases focusing on digital illustrations. You can see these artistic works eventually blend into its website branding almost perfectly. MailChimp is probably the most definitive example with its trademark chimp mail carrier.
  • 14. 10. INFINITE SCROLLING Pinterest has adopted this loading technique for their layout and it works beautifully. You can search anything and the results page will continually load as you scroll down. Pagination is basically a non-issue and doesn’t even work as a detriment into the user experience. Talk about designing for simplicity!
  • 15. 11. HOMEPAGE FEATURE TOURS Looking back over 2012 I would say my favorite example of this trend is on MediaFire’s homepage. The entire top portion of the page rotates between a series of slides. They each explain what you can do on MediaFire and how their features compare with other websites.
  • 16. 12. SLIDING WEBPAGE PANELS Right off the bat you may not think CaptainDash is any special website. But as you click through the navigation you will learn that each page is loaded in succession pushing from left-to-right. Dynamic effects such as these do not always bode well for mobile users.
  • 17. 13. MOBILE NAVIGATION TOGGLE Enter this beautiful design trend of mobile navigation toggle menus. The Treehouse Blog is merely one example of this technique which looks brilliant on your smartphone. And even in your web browser! But there are dozens of websites and design studios who have adopted this trend for their own responsive layouts.
  • 18. 14. FULLSCREEN TYPOGRAPHY Alex Pierce has a great website layout which does focus deeply on typography. You can see this includes rich text effects using CSS3 properties. Additionally the website is very easy to navigate, and many of the other page elements appear oversized as well.
  • 19. 15. APIS AND OPEN SOURCE Open APIs and resources like Github allow designers to not only prototype layouts, but also animations and effects on the page. jQuery has a practically uncountable number of plugins for free download to be found all over the Web.
  • 20. 16. DEEP BOX SHADOWS I believe the problems that designers had to face years ago stemmed from box shadows being too difficult to implement. Back a few years, this effect would require some type of JavaScript or direct background http://media02.hongkiat.com/web-design-trend-2013/ created in Photoshop. Now box shadows can be generated with a few lines in CSS.
  • 21. 17. CSS3 ANIMATIONS Another excellent and very inspiring example comes from a CSS alerts tutorial on Codrops. Notice how you can setup various times and settings for the animations.
  • 22. 18. VERTICAL NAVIGATION The portfolio on Riot Industries is a great example for newer web designers. Check This textured ef fect is apparent in other vertical layouts as well, such out how the navigation links work and how as the CSS gallery Design Bombs. the portfolio entries are dynamic on hover effects.
  • 23. 19. SINGLE-PAGE WEB DESIGN I think the website design for Cage App is possibly one great example of many trends listed in this article. They are utilizing a single-page layout brilliantly with content split up by horizontal containers. But you will also notice the very top of the page features a blurred background photo effect.
  • 24. 20. CIRCULAR DESIGN ELEMENTS The portfolio of Lucia Soto is basically one terrific example of circular web design. The website is built dynamically so you are panning horizontally to different segments in the page. You will notice some cute vector artwork dotted along the sidelines as well. Web designers crave these extra tidbits in page layouts because they ooze uniqueness.
  • 25. FINAL THOUGHTS User interface design is one of the most complex topics when building digital products. This rings especially true for website layouts, trying to match navigations and content styles for a successful user experience. These design trends aim to point designers in the right direction.