Hottest trends to web design in 2013 by Sameera Thilakasiri

480 views
410 views

Published on

Hottest Trends To Web Design In 2013

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
480
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hottest trends to web design in 2013 by Sameera Thilakasiri

  1. 1. Hottest Trends To Web Design In 2013 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 1
  2. 2. Responsive Layouts The idea is to support all devices from laptops, desktops, smartphones, tablets, and anything released in the future. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 2
  3. 3. Retina Image SupportApple first engineered this idea with the iPhone 4 and has sinceapplied this screen display onto their other devices, including theiPad and some MacBooks.Retina screens are basically twice as dense as any average LCD.So they are the same number of physical pixels, but digitallytwice as many pixels can be fitted into the same physical space. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 3
  4. 4. Single-Page Web Design Single page design is a big topic and covered under many different categories. Obviously there have been single-page websites since the creation of the World Wide Web. But over the recent years we have seen this trend evolve to sport a more natural user experience. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 4
  5. 5. Fixed navigation/ Fixed Header Bars by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 5
  6. 6. Enormous photo backgrounds andLarge images used for large impactvisuals. Photographers or even fans of photography will definitely enjoy this design trend. It’s an excellent way to capture your visitor’s attention and it can look great when done properly. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 6
  7. 7. Lazy loading / infinite scrolling A number of social media websites have begun applying infinite scroll effects onto dashboards and timelines and user feeds. This effect was gaining traction due to the popularity of Twitter and Tumblr’s unique layout style. And now more recently Pinterest has also adopted this infinite page scroll on their homepage. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 7
  8. 8. Vertical ScrollingVertical scrolling is easy, convenient for all the mobile users.Vertical scrolling is quite user friendly, efficient and definitelyallows easy navigation. Apart from all this, another trend that isexpected to hit 2013 is vertical scrolling of menus and buttons. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 8
  9. 9. 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. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 9
  10. 10. 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. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 10
  11. 11. Detailed Illustrations Newer design trends are all about catching and holding one’s attention. I feel that illustrations perform this task brilliantly. The problem is finding a designer who can make such impeccable works of art, or even teaching yourself. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 11
  12. 12. Mobile Navigation ToggleWhen speaking of responsive design one of the most difficultquestions is how to build a solid navigation. You want to giveyour readers direct access to all your important links, withoutflooding the page making it unreadable. It is also a good idea tokeep your responsive navigation hidden away until it’s needed. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 12
  13. 13. Fullscreen Typography Earlier I mentioned using big oversized photographs in the background of website layouts. This trend can be extended to focus on typography as well: designing your webpage text so it fills the entirety of the browser. Some users may find this annoying. But this is not often the case if the layout is fitted perfectly for super-large text. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 13
  14. 14. CSS3 AnimationsThe CSS3 transition property and all the related browser prefixesoffers CSS dynamic effects just like JavaScript. Designers can nowanimate effects on the page based on different CSS properties. Ihave seen a lot of nice hover effects and form input fields usingthese transitions the right way. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 14
  15. 15. 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 (eg. user avatars, share buttons, post dates, etc). by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 15
  16. 16. Thank youby Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 16
  17. 17. AuthorSameera Thilakasiri is a front-end developer based in Colombo. Specialist inUI, UX, SEO, IA, IxD, RWD. He is blogging technical areas and lifestylephotographer while is leisure. He can be reached byhttp://www.sameerast.com by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 17

×