{"id":1090,"date":"2016-09-22T10:20:40","date_gmt":"2016-09-22T02:20:40","guid":{"rendered":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/novage.com.sg\/blog\/?p=1090"},"modified":"2018-06-09T10:55:17","modified_gmt":"2018-06-09T02:55:17","slug":"6-web-design-trends-you-must-know-for-2015-2016","status":"publish","type":"post","link":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/novage.com.sg\/blog\/6-web-design-trends-you-must-know-for-2015-2016\/","title":{"rendered":"6 Web Design Trends You Must Know for 2017"},"content":{"rendered":"
\n
\n

| Who can forget the GIFs of the \u201890s<\/a>, or the more up-to-date focus on flat design?<\/p>\n

Recently, we\u2019ve seen a surge in popularity of responsive web design<\/a>, as more and more sites join the drive to become \u2018mobile ready\u2019 which is now even more important in the wake of Google\u2019s Mobile Friendly update.<\/a><\/p>\n

Let\u2019s examine some of the most popular for this and the coming year.<\/p>\n

1. The Proliferation of UI Patterns<\/h2>\n

One of the side effects of responsive design has meant that a lot of sites look similar. However, responsive design isn\u2019t solely to blame. The rise of WordPress sites and the booming theme market also have a hand in it.<\/p>\n

And some folks, such as Matthew Monbre<\/a>, have copped to being guilty of following everyone else\u2019s look with his company\u2019s site.<\/p>\n

\"6-web-design-trends\"<\/p>\n

Photo credit: Cypress North<\/a><\/p>\n

But having a similar look isn\u2019t necessarily a bad thing. That\u2019s because we\u2019ve changed the way we consume the web, which has resulted in a lot of common UI design patterns. Design patterns have matured and as such, there\u2019s little in the way of innovation when it comes to UI patterns.<\/p>\n

In other words, a checkout will still be a checkout and should function as such. Same with a login model. There\u2019s no real reason to reinvent the wheel. UI patterns must guide users through a smooth experience.<\/p>\n

Here\u2019s a few patterns you should be familiar with:<\/p>\n

    \n
  1. \n
      \n
    1. The hamburger menu:<\/strong> While some criticize this pattern\u2019s use, there\u2019s no doubt that it\u2019s widespread use makes the function easily recognizable for users.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

      \"6-web-design-trends\"<\/p>\n

      Photo credit:Silenza<\/a> via awwwards<\/a><\/p>\n

        \n
      1. \n
          \n
        1. Account registration:<\/strong> You\u2019ll find this pattern whenever you try to register for a site. There might be a form to fill out or a button that\u2019ll allow you to use a social account to sign up. Multi-step form wizards are also effective since they \u201cchunk out\u201d the required fields, reducing friction and encouraging users to flow through the process.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

          \"6-web-design-trends\"<\/p>\n

          Photo credit Typeform<\/a><\/p>\n

            \n
          1. \n
              \n
            1. Long scroll:<\/strong> Placing all your important elements above the fold is now a well-known myth. Furthermore, almost everyone is accustomed to long scrolls thanks to mobile devices. The technique works especially well for sites that want to lure users through storytelling, and you can still mimic a multi-page site by breaking the scroll into clear sections.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

              \"6-web-design-trends\"<\/p>\n

              Photo credit: Vimeo<\/a><\/p>\n

                \n
              1. \n
                  \n
                1. Card Layouts:<\/strong> Pioneered by Pinterest, cards are everywhere on the web because they present information in bite-sized chunks perfect for scanning. Each card represents one unified concept. Since they act as \u201ccontent containers\u201d, their rectangular shape makes them easier to re-arrange for different device breakpoints.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

                  \"6-web-design-trends\"<\/p>\n

                  Photo credit: TheNextWeb<\/a><\/p>\n

                    \n
                  1. Hero images:<\/strong> Since vision is the strongest human sense, HD hero images are one of the fastest ways to grab a user\u2019s attention. Thanks to advances in bandwidth and data compression, users won\u2019t suffer from slow load times either. One common layout you\u2019ll find is a hero image above the scroll, followed by either zig-zagging sections or a cards-based arrangement.<\/li>\n<\/ol>\n

                    \"6-web-design-trends\"<\/p>\n

                    Photo credit: Maaemo<\/a><\/p>\n

                    For more UI patterns and techniques, check out the free e-book Web Design Trends 2015 and 2016.<\/a><\/p>\n

                    2. Rich Animations<\/h2>\n

                    Animations are being used more and more to enhance a site\u2019s storytelling, making the experience more interactive and entertaining.<\/p>\n

                    However, you can\u2019t just stick animation in anywhere. Consider carefully whether it adds to your site\u2019s story elements and personality. Animations can be thought of in terms of two groups:<\/p>\n

                      \n
                    1. Large scale animations.<\/strong> These are used as a primary interaction tool have more impact on users and include effects like parallax scrolling and pop-up notifications.<\/li>\n
                    2. Small scale animations.<\/strong> These include spinners, hover tools and loading bars, and don\u2019t require any user input.<\/li>\n<\/ol>\n

                      We\u2019ll describe 7 of the most popular animation techniques:<\/p>\n