SlideShare a Scribd company logo
1 of 19
Download to read offline
Design trends
1. Single-Page Sites
O Big background images
O Rich illustrations
O Animation techniques are being used to
tell stories, entertain, and get a message
across loud and clear
O http://pepsized.com/demo/?id=665
O http://etchapps.com
O http://www.adidas.com/com/apps/snowboarding
/
O http://www.digitalatelier.ro/
2. Infinite Scrolling
O Works best for unstructured information
O Live feed style, sorted by time.
O Sites with lots of images
O http://lookbook.nu/
O http://www.google.com/imghp
O http://pinterest.com/
3. Persistent Top Navigation
(aka: Sticky Nav)
O Ideal for complex sites, long scrolling
pages, or applications with toolbar
functionality
O http://www.newzealand.com/us/
O Gmail
4. Responsive design
5. Typography
O Typography and layouts that are based on
content
O Easier to make responsive than
complicated layouts with different types of
images and JavaScripts
O http://tapmates.com/
Color blocks
O http://www.sheltonfleming.co.uk/
O http://www.spelltower.com/
O https://2012.twitter.com/
6. Buh-bye Flash
O HTML5/CSS3, JavaScript
O Parallax Scrolling:
O http://www.evanshalshaw.com/bondcars/
O http://www.helentsanossheinman.com/
O http://eephusleague.com/magazine/
O http://www.nike.com/jumpman23/aj2012/
O http://paris.3ds.com/en-
index.html#Restorations
7. Large images used for large
impact visuals.
O Using large images on home page to
make an impact.
O Also keeping bandwidth and data usage in
mind by only serving large images to
those with large screens
O Responsive considered!
O http://grainandmortar.com/
O http://getflywheel.com/
8. Give me (more) white space!
O Lend an air of gravitas
O Seem professional and knowledgeable
O https://new.myspace.com/
9. More sharing on social
networks.
O Sharing buttons at the end of articles is
very old news
O Deeper integration
O Single sign-on
O Pay by tweet
O Pay by status
O More advertising on social networks.
10. Mobile apps will start to
replace mobile browsing.
O Websites are working on all devices
O Twitter, Facebook, Pinterest, G+, etc.:
apps are much better than their mobile
browsing UX
O More and more people are using their
phone for everything.

More Related Content

Similar to Web design trends

Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013Achieve Internet
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
 
Optimal Mobile Web Experiences
Optimal Mobile Web ExperiencesOptimal Mobile Web Experiences
Optimal Mobile Web ExperiencesDaniel Stout
 
HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)Adam Lu
 
Contemporary Trends In Web Design
Contemporary Trends In Web DesignContemporary Trends In Web Design
Contemporary Trends In Web DesignKenny Rosenberg
 
Responsive Design Overview for UB CIT
Responsive Design Overview for UB CITResponsive Design Overview for UB CIT
Responsive Design Overview for UB CITAdrian Roselli
 
Be Awesome with Emerging Tech [SUNYCUAD}
Be Awesome with Emerging Tech [SUNYCUAD}Be Awesome with Emerging Tech [SUNYCUAD}
Be Awesome with Emerging Tech [SUNYCUAD}Robin Smail
 
Responsive Web Design - Drupal Camp CPH
Responsive Web Design - Drupal Camp CPHResponsive Web Design - Drupal Camp CPH
Responsive Web Design - Drupal Camp CPHPeytz Design
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
 
Web designtrends 5-29-2013
Web designtrends 5-29-2013Web designtrends 5-29-2013
Web designtrends 5-29-2013Angela Bowman
 
July 18 duyen - 10 web design trends for 2013
July 18   duyen - 10 web design trends for 2013July 18   duyen - 10 web design trends for 2013
July 18 duyen - 10 web design trends for 2013Duyen Nguyen
 
Lesson 7 Imaging and Design part 2.pptx
Lesson 7 Imaging and Design part 2.pptxLesson 7 Imaging and Design part 2.pptx
Lesson 7 Imaging and Design part 2.pptxRouAnnNavarroza
 
Free technology for teachers presentation october 2014
Free technology for teachers presentation october 2014Free technology for teachers presentation october 2014
Free technology for teachers presentation october 2014clemaitre
 
Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Cammy Bean
 
I tools for the pragmatic visionary handout
I tools for the pragmatic visionary handoutI tools for the pragmatic visionary handout
I tools for the pragmatic visionary handoutCASupts
 
20 web design trends - at the moment
20 web design trends - at the moment20 web design trends - at the moment
20 web design trends - at the momentMarco Santo
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Adrian Roselli
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Frédéric Harper
 

Similar to Web design trends (20)

Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Optimal Mobile Web Experiences
Optimal Mobile Web ExperiencesOptimal Mobile Web Experiences
Optimal Mobile Web Experiences
 
HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)
 
Contemporary Trends In Web Design
Contemporary Trends In Web DesignContemporary Trends In Web Design
Contemporary Trends In Web Design
 
Responsive Design Overview for UB CIT
Responsive Design Overview for UB CITResponsive Design Overview for UB CIT
Responsive Design Overview for UB CIT
 
Be Awesome with Emerging Tech [SUNYCUAD}
Be Awesome with Emerging Tech [SUNYCUAD}Be Awesome with Emerging Tech [SUNYCUAD}
Be Awesome with Emerging Tech [SUNYCUAD}
 
Responsive Web Design - Drupal Camp CPH
Responsive Web Design - Drupal Camp CPHResponsive Web Design - Drupal Camp CPH
Responsive Web Design - Drupal Camp CPH
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
Web designtrends 5-29-2013
Web designtrends 5-29-2013Web designtrends 5-29-2013
Web designtrends 5-29-2013
 
July 18 duyen - 10 web design trends for 2013
July 18   duyen - 10 web design trends for 2013July 18   duyen - 10 web design trends for 2013
July 18 duyen - 10 web design trends for 2013
 
Lesson 7 Imaging and Design part 2.pptx
Lesson 7 Imaging and Design part 2.pptxLesson 7 Imaging and Design part 2.pptx
Lesson 7 Imaging and Design part 2.pptx
 
Free technology for teachers presentation october 2014
Free technology for teachers presentation october 2014Free technology for teachers presentation october 2014
Free technology for teachers presentation october 2014
 
Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design
 
I tools for the pragmatic visionary handout
I tools for the pragmatic visionary handoutI tools for the pragmatic visionary handout
I tools for the pragmatic visionary handout
 
20 web design trends - at the moment
20 web design trends - at the moment20 web design trends - at the moment
20 web design trends - at the moment
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
 
New trends for website design 2015
New trends for website design 2015New trends for website design 2015
New trends for website design 2015
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
 

Recently uploaded

How Generative AI Is Transforming Your Business | Byond Growth Insights | Apr...
How Generative AI Is Transforming Your Business | Byond Growth Insights | Apr...How Generative AI Is Transforming Your Business | Byond Growth Insights | Apr...
How Generative AI Is Transforming Your Business | Byond Growth Insights | Apr...Hector Del Castillo, CPM, CPMM
 
Interoperability and ecosystems: Assembling the industrial metaverse
Interoperability and ecosystems:  Assembling the industrial metaverseInteroperability and ecosystems:  Assembling the industrial metaverse
Interoperability and ecosystems: Assembling the industrial metaverseSiemens
 
Rakhi sets symbolizing the bond of love.pptx
Rakhi sets symbolizing the bond of love.pptxRakhi sets symbolizing the bond of love.pptx
Rakhi sets symbolizing the bond of love.pptxRakhi Bazaar
 
5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf
5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf
5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdfSherl Simon
 
Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...
Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...
Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...Aggregage
 
Unveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic ExperiencesUnveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic ExperiencesDoe Paoro
 
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptxGo for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptxRakhi Bazaar
 
Data Analytics Strategy Toolkit and Templates
Data Analytics Strategy Toolkit and TemplatesData Analytics Strategy Toolkit and Templates
Data Analytics Strategy Toolkit and TemplatesAurelien Domont, MBA
 
Jewish Resources in the Family Resource Centre
Jewish Resources in the Family Resource CentreJewish Resources in the Family Resource Centre
Jewish Resources in the Family Resource CentreNZSG
 
Fundamentals Welcome and Inclusive DEIB
Fundamentals Welcome and  Inclusive DEIBFundamentals Welcome and  Inclusive DEIB
Fundamentals Welcome and Inclusive DEIBGregory DeShields
 
Implementing Exponential Accelerators.pptx
Implementing Exponential Accelerators.pptxImplementing Exponential Accelerators.pptx
Implementing Exponential Accelerators.pptxRich Reba
 
71368-80-4.pdf Fast delivery good quality
71368-80-4.pdf Fast delivery  good quality71368-80-4.pdf Fast delivery  good quality
71368-80-4.pdf Fast delivery good qualitycathy664059
 
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...ssuserf63bd7
 
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring CapabilitiesOnemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring CapabilitiesOne Monitar
 
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdfChris Skinner
 
Psychic Reading | Spiritual Guidance – Astro Ganesh Ji
Psychic Reading | Spiritual Guidance – Astro Ganesh JiPsychic Reading | Spiritual Guidance – Astro Ganesh Ji
Psychic Reading | Spiritual Guidance – Astro Ganesh Jiastral oracle
 
Planetary and Vedic Yagyas Bring Positive Impacts in Life
Planetary and Vedic Yagyas Bring Positive Impacts in LifePlanetary and Vedic Yagyas Bring Positive Impacts in Life
Planetary and Vedic Yagyas Bring Positive Impacts in LifeBhavana Pujan Kendra
 
20200128 Ethical by Design - Whitepaper.pdf
20200128 Ethical by Design - Whitepaper.pdf20200128 Ethical by Design - Whitepaper.pdf
20200128 Ethical by Design - Whitepaper.pdfChris Skinner
 

Recently uploaded (20)

How Generative AI Is Transforming Your Business | Byond Growth Insights | Apr...
How Generative AI Is Transforming Your Business | Byond Growth Insights | Apr...How Generative AI Is Transforming Your Business | Byond Growth Insights | Apr...
How Generative AI Is Transforming Your Business | Byond Growth Insights | Apr...
 
Interoperability and ecosystems: Assembling the industrial metaverse
Interoperability and ecosystems:  Assembling the industrial metaverseInteroperability and ecosystems:  Assembling the industrial metaverse
Interoperability and ecosystems: Assembling the industrial metaverse
 
Rakhi sets symbolizing the bond of love.pptx
Rakhi sets symbolizing the bond of love.pptxRakhi sets symbolizing the bond of love.pptx
Rakhi sets symbolizing the bond of love.pptx
 
5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf
5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf
5-Step Framework to Convert Any Business into a Wealth Generation Machine.pdf
 
Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...
Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...
Strategic Project Finance Essentials: A Project Manager’s Guide to Financial ...
 
Unveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic ExperiencesUnveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic Experiences
 
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptxGo for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
 
Data Analytics Strategy Toolkit and Templates
Data Analytics Strategy Toolkit and TemplatesData Analytics Strategy Toolkit and Templates
Data Analytics Strategy Toolkit and Templates
 
Jewish Resources in the Family Resource Centre
Jewish Resources in the Family Resource CentreJewish Resources in the Family Resource Centre
Jewish Resources in the Family Resource Centre
 
Fundamentals Welcome and Inclusive DEIB
Fundamentals Welcome and  Inclusive DEIBFundamentals Welcome and  Inclusive DEIB
Fundamentals Welcome and Inclusive DEIB
 
Implementing Exponential Accelerators.pptx
Implementing Exponential Accelerators.pptxImplementing Exponential Accelerators.pptx
Implementing Exponential Accelerators.pptx
 
71368-80-4.pdf Fast delivery good quality
71368-80-4.pdf Fast delivery  good quality71368-80-4.pdf Fast delivery  good quality
71368-80-4.pdf Fast delivery good quality
 
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
 
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring CapabilitiesOnemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
 
The Bizz Quiz-E-Summit-E-Cell-IITPatna.pptx
The Bizz Quiz-E-Summit-E-Cell-IITPatna.pptxThe Bizz Quiz-E-Summit-E-Cell-IITPatna.pptx
The Bizz Quiz-E-Summit-E-Cell-IITPatna.pptx
 
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
 
Psychic Reading | Spiritual Guidance – Astro Ganesh Ji
Psychic Reading | Spiritual Guidance – Astro Ganesh JiPsychic Reading | Spiritual Guidance – Astro Ganesh Ji
Psychic Reading | Spiritual Guidance – Astro Ganesh Ji
 
Authentically Social - presented by Corey Perlman
Authentically Social - presented by Corey PerlmanAuthentically Social - presented by Corey Perlman
Authentically Social - presented by Corey Perlman
 
Planetary and Vedic Yagyas Bring Positive Impacts in Life
Planetary and Vedic Yagyas Bring Positive Impacts in LifePlanetary and Vedic Yagyas Bring Positive Impacts in Life
Planetary and Vedic Yagyas Bring Positive Impacts in Life
 
20200128 Ethical by Design - Whitepaper.pdf
20200128 Ethical by Design - Whitepaper.pdf20200128 Ethical by Design - Whitepaper.pdf
20200128 Ethical by Design - Whitepaper.pdf
 

Web design trends

  • 2. 1. Single-Page Sites O Big background images O Rich illustrations O Animation techniques are being used to tell stories, entertain, and get a message across loud and clear O http://pepsized.com/demo/?id=665 O http://etchapps.com O http://www.adidas.com/com/apps/snowboarding / O http://www.digitalatelier.ro/
  • 3. 2. Infinite Scrolling O Works best for unstructured information O Live feed style, sorted by time. O Sites with lots of images O http://lookbook.nu/ O http://www.google.com/imghp O http://pinterest.com/
  • 4. 3. Persistent Top Navigation (aka: Sticky Nav) O Ideal for complex sites, long scrolling pages, or applications with toolbar functionality O http://www.newzealand.com/us/ O Gmail
  • 6. 5. Typography O Typography and layouts that are based on content O Easier to make responsive than complicated layouts with different types of images and JavaScripts O http://tapmates.com/
  • 7.
  • 8.
  • 9. Color blocks O http://www.sheltonfleming.co.uk/ O http://www.spelltower.com/ O https://2012.twitter.com/
  • 10.
  • 11. 6. Buh-bye Flash O HTML5/CSS3, JavaScript O Parallax Scrolling: O http://www.evanshalshaw.com/bondcars/ O http://www.helentsanossheinman.com/ O http://eephusleague.com/magazine/ O http://www.nike.com/jumpman23/aj2012/ O http://paris.3ds.com/en- index.html#Restorations
  • 12. 7. Large images used for large impact visuals. O Using large images on home page to make an impact. O Also keeping bandwidth and data usage in mind by only serving large images to those with large screens O Responsive considered! O http://grainandmortar.com/ O http://getflywheel.com/
  • 13.
  • 14.
  • 15.
  • 16. 8. Give me (more) white space! O Lend an air of gravitas O Seem professional and knowledgeable O https://new.myspace.com/
  • 17.
  • 18. 9. More sharing on social networks. O Sharing buttons at the end of articles is very old news O Deeper integration O Single sign-on O Pay by tweet O Pay by status O More advertising on social networks.
  • 19. 10. Mobile apps will start to replace mobile browsing. O Websites are working on all devices O Twitter, Facebook, Pinterest, G+, etc.: apps are much better than their mobile browsing UX O More and more people are using their phone for everything.