SlideShare une entreprise Scribd logo
1  sur  17
Télécharger pour lire hors ligne
Hottest Trends To Web Design In 2013




             by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   1
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
Retina Image Support
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 screens are basically twice as dense as any average LCD.
So they are the same number of physical pixels, but digitally
twice as many pixels can be fitted into the same physical space.




                         by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   3
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
Fixed navigation/ Fixed Header Bars




              by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   5
Enormous photo backgrounds and
Large images used for large impact
visuals.
                                                  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
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
Vertical Scrolling




Vertical scrolling is easy, convenient for all the mobile users.
Vertical scrolling is quite user friendly, efficient and definitely
allows easy navigation. Apart from all this, another trend that is
expected to hit 2013 is vertical scrolling of menus and buttons.

                          by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   8
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
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
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
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.




                         by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   12
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
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. I
have seen a lot of nice hover effects and form input fields using
these transitions the right way.




                         by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   14
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
Thank you




by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   16
Author
Sameera Thilakasiri is a front-end developer based in Colombo. Specialist in
UI, UX, SEO, IA, IxD, RWD. He is blogging technical areas and lifestyle
photographer while is leisure. He can be reached by
http://www.sameerast.com




                            by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   17

Contenu connexe

Similaire à Hottest trends to web design in 2013 by Sameera Thilakasiri

Hallvarsson & Halvarsson - Webbdesigntrender 2012
Hallvarsson & Halvarsson - Webbdesigntrender 2012Hallvarsson & Halvarsson - Webbdesigntrender 2012
Hallvarsson & Halvarsson - Webbdesigntrender 2012Hallvarsson Halvarsson
 
2018 Web Design Trends
2018 Web Design Trends2018 Web Design Trends
2018 Web Design TrendsSproutMediaLab
 
Presentazione web design
Presentazione web designPresentazione web design
Presentazione web designMarco Santo
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive WebMatt Carver
 
Shamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trendsShamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trendsSynapseIndia
 
Innovative Web Design Trends To Watch For In 2020
Innovative Web Design Trends To Watch For In 2020Innovative Web Design Trends To Watch For In 2020
Innovative Web Design Trends To Watch For In 2020shubhankar Gupta
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trendsCool Sky
 
Web and-mobile-trends-2013
Web and-mobile-trends-2013Web and-mobile-trends-2013
Web and-mobile-trends-2013Anne Madsen
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014Lewis Lin 🦊
 
Web and mobile trends 2013
Web and mobile trends 2013Web and mobile trends 2013
Web and mobile trends 2013Jessie Doan
 
Web and-mobile-trends-2013
Web and-mobile-trends-2013Web and-mobile-trends-2013
Web and-mobile-trends-2013boypotay
 
Build your Website with HTML5 and CSS3
Build your Website with HTML5 and CSS3Build your Website with HTML5 and CSS3
Build your Website with HTML5 and CSS3Vipin Das
 

Similaire à Hottest trends to web design in 2013 by Sameera Thilakasiri (20)

Web Design Trends 2013
Web Design Trends 2013Web Design Trends 2013
Web Design Trends 2013
 
Hallvarsson & Halvarsson - Webbdesigntrender 2012
Hallvarsson & Halvarsson - Webbdesigntrender 2012Hallvarsson & Halvarsson - Webbdesigntrender 2012
Hallvarsson & Halvarsson - Webbdesigntrender 2012
 
2018 Web Design Trends
2018 Web Design Trends2018 Web Design Trends
2018 Web Design Trends
 
Presentazione web design
Presentazione web designPresentazione web design
Presentazione web design
 
Web design trends in 2013
Web design trends in 2013Web design trends in 2013
Web design trends in 2013
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
Web design and development
Web design and developmentWeb design and development
Web design and development
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Shamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trendsShamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trends
 
Innovative Web Design Trends To Watch For In 2020
Innovative Web Design Trends To Watch For In 2020Innovative Web Design Trends To Watch For In 2020
Innovative Web Design Trends To Watch For In 2020
 
10 Hottest Web-Design Trends | Keyideas Infotech
10 Hottest Web-Design Trends | Keyideas Infotech10 Hottest Web-Design Trends | Keyideas Infotech
10 Hottest Web-Design Trends | Keyideas Infotech
 
Sbwire 531031
Sbwire 531031Sbwire 531031
Sbwire 531031
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trends
 
Web and-mobile-trends-2013
Web and-mobile-trends-2013Web and-mobile-trends-2013
Web and-mobile-trends-2013
 
Web and-mobile-trends-2013
Web and-mobile-trends-2013Web and-mobile-trends-2013
Web and-mobile-trends-2013
 
Basic web dev
Basic web devBasic web dev
Basic web dev
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 
Web and mobile trends 2013
Web and mobile trends 2013Web and mobile trends 2013
Web and mobile trends 2013
 
Web and-mobile-trends-2013
Web and-mobile-trends-2013Web and-mobile-trends-2013
Web and-mobile-trends-2013
 
Build your Website with HTML5 and CSS3
Build your Website with HTML5 and CSS3Build your Website with HTML5 and CSS3
Build your Website with HTML5 and CSS3
 

Hottest trends to web design in 2013 by Sameera Thilakasiri

  • 1. Hottest Trends To Web Design In 2013 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 1
  • 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. Retina Image Support 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 screens are basically twice as dense as any average LCD. So they are the same number of physical pixels, but digitally twice as many pixels can be fitted into the same physical space. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 3
  • 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. Fixed navigation/ Fixed Header Bars by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 5
  • 6. Enormous photo backgrounds and Large images used for large impact visuals. 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. 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. Vertical Scrolling Vertical scrolling is easy, convenient for all the mobile users. Vertical scrolling is quite user friendly, efficient and definitely allows easy navigation. Apart from all this, another trend that is expected to hit 2013 is vertical scrolling of menus and buttons. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 8
  • 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. 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. 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. 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. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 12
  • 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. 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. I have seen a lot of nice hover effects and form input fields using these transitions the right way. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 14
  • 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. Thank you by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 16
  • 17. Author Sameera Thilakasiri is a front-end developer based in Colombo. Specialist in UI, UX, SEO, IA, IxD, RWD. He is blogging technical areas and lifestyle photographer while is leisure. He can be reached by http://www.sameerast.com by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 17