SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Downloaden Sie, um offline zu lesen
Web design trends change rapidly. They come and go. Websites today follow very different
trends than they did just a year ago. As web designers, it’s helpful to know what the current
and upcoming trends are. It can help you stay ahead of the competition and it can help you
meet your client’s needs. Keep in mind that “trend” doesn’t necessarily mean “new.”
Many new design trends come from the tastes and preferences of designers and users in
design and usability. What makes those changes possible is improvements in technology.
Technology is a major driving force and is always helping design move forward.
To help understand where we’re going, let’s take a look at where we’re been.
Where Web Design Trends Have Been
Web design for 2015 saw a lot of refinements of trends from 2014.
Recent years saw trends such as:
Minimal
Flat
Video sliders
Background video
CSS animation
Long scroll
Hero images
Hamburger menus
Responsive
Mobile first
Newsletter popups
Frontend frameworks
Many of these trends will continue to be refined. Some will be replaced with better
alternatives. Others, such as background video, will be used with moderation.
Where Web Design Trends Are Heading
2016 web design trends could probably be summed up in two letters: U and X. Okay, and
maybe one more word, too: mobile. Trends will follow best practices for both UX and mobile
platforms. UX and mobile have been in view over the past few years, but now they’re front
and center and the main driving focus of website design with an uncluttered UI.
This year will see even more refinement and standardization of current trends. We’ll see
concepts go from just an ideal to the standard. From new to the norm.
Material Design
Material Design is an alternative to flat design that brings back some nice graphical
elements. It’s a set of Google design standards that separates elements using the layers
concept found in image editing software. It can stack and remove elements as needed. It
even has built-in animations that would normally need to be created manually.
It’s a design language with a specific set of guidelines which takes out the guesswork. The
results look the same from one platform to another. Since these standards are established
by Google they’re sure to have widespread support.
It is possible, however, that adhering to strict guidelines will hamper creativity. I see this as a
challenge to improve creativity within the guidelines.
Compared to Flat Design
Image by fet / shutterstock.com
Material design is different from flat design. Flat design a design basis for presenting UI and
graphical elements. It simply strips the visuals down to the basics and does away with
visuals that try to mimic the real world with designs such as rounded corners, textures,
shadows, etc. It minimizes all of the showy stuff that distracts from the story and reduces the
amount of information that readers have to deal with. It has solid colors, sharp edges, and
thin lines.
Flat design scales well and is easy to read on mobile devices. It’s practical and works well. It
loads fast. The problem is appearance is secondary. It limits the amount of colors you can
use and can sometimes look generic.
Flat design won’t be going away. It’s actually compatible with Material Design as well as
being responsive and minimal. There will be a focus on turning off what’s not needed so they
can focus on what is. The trend will be finding that perfect balance between the two. Flat
doesn’t have to mean boring.
Material design is based in 3D. It’s a better choice for those who do want some stylish visual
design. Material design gives you some of the design elements back. You’re not stuck with
only having solid colors or not having animation.
Material design focuses on mobile devices first as more consumers are using smartphones
and tablets as their primary devices, too. It streamlines the website and speeds it up. Expect
material design to become the standard in web design.
Typography
Image by http://www.pinkbowcity.com/
Increased resolutions and responsive designs make it possible to improve typography, which
is why that is one of the web design trends we simply must include here. Typography can be
more colorful and stand out. It can make a statement. Two trends that I’ve seen with
typography are the use of serifs and hand-writing. Each have specific uses.
Serifs help improve legibility. They were removed previously due to lower resolution
screens and screen size. Screen resolutions and sizes are getting larger. Also, layout
designs are cleaner and leave room for more elegant fonts. Expect to see serifs more
often within the content itself.
Handwriting is more personal. If it’s done correctly, it’s pretty and adds a special touch
to a website. Just like serifs, the challenge is to keep the style legible and readable on
small screens. Hand-writing will mostly be used in logos, headers, post titles, menus,
business cards, and so forth.
One thing to consider is more users are consuming content on mobile devices. Unfortunately
lower end devices, such as the Fire HD 10, display lower resolutions. This is more
noticeable on larger screens because they have a lower pixel density due to having the
same resolution as their smaller counterparts. One solution is to display typography based
on the screen resolution. This means serifs and handwriting would display on mobile devices
for high-res screens while screens with lower resolutions could receive a font that’s more
suitable to its resolution. Of course server speeds and load time have to be taken into
consideration.
Mobile UX
Image by vasabii / shutterstock.com
More Imagery, Less Text
Not only will typography become more suitable to mobile screens and resolutions, but
navigation, forms, images, and mobile-specific features (such as GPS) will have the focus of
design. The use of images will change somewhat. Where images have been used for effects
and text, CSS and fancy fonts will be used for effects and text will be used for text. This
reduces page-loading times and server load.
Touch events are becoming more prominent. More sites are using plugins to handle events
such as tap and swipe. This takes websites beyond just being responsive to the screen size,
but also to the screen type, finger size, amount of pressure used, etc. Buttons and fields
have to be large enough and have enough distance between them so they’re not hit
accidently. Which brings us to mobile layouts.
Mobile Layouts
Minimalism rules for mobile devices. Some desktop elements can be hidden when the site is
viewed on a mobile device. Other elements will be adjusted or modified depending on the
screen size and type. This allows the message to fit the screen. Strip out the elements that
are less important and fit it to the screen without losing the message.
Slideshows, images, buttons, elements, menus, and so forth should be developed with
mobile in mind. Fortunately, Material Design brings back visual elements so sites don’t have
to look plain on mobile. Also, you can render an image at a different size or resolution
depending on the size of the screen. This will speed up the page-loading and the images will
still look great on mobile devices.
Tiles Replaced with Cards
Divi Café Live Demo
Consumers tend to look more at pictures and video and less at the text. This creates a
balancing act between SEO and UX. Search engines prefer text they can index. This will
move text-rich content to sub-pages and the image-rich content to the homepage. If text is
required for the homepage, try to place it under the imagery. Target the users first and the
search engines second.
Browsers are becoming faster at rendering images. This means images can be larger with
higher resolutions than before. Expect a greater emphasis on higher quality images and
artwork.
Extra theme masonry blog module
We saw lots of tile-based designs in 2015. Pinterest made (or helped make) the design
popular. Cards take the design to a deeper level by adding functionality and interactivity.
They can provide more information using hover effects, by flipping the cards over, expanding
them, and more. They are a great design element that places the focus on imagery and offer
a usable way and help make the content easy to see at a glance. They essentially create
grid layouts while minimizing content.
Dynamic Storytelling
= t•unlo"'c f .. Cl UA.CII p W lnat
§ EXTRA ..01,U •lll~T !LATUJlO MDOUll ~AC.l lA10UI l(UMMlftll
HIKING TRAIL REVIEW
" 11,111111 '" ,,,,.....
FOtLOW US
o F.t.CflOOI(
o GOOGU•
o vou,u.,
O rw1nr11
. . Rl((Nt TWl(tS
•
•
•
. .
OUII AUTHOll5
ANNAftO'lllillt
IIICIN1 ervuws
Dynamic storytelling works by telling a story through graphics with textual support. This is
one of the web design trends that has held popularity for a few years now. It guides the
visitors through a thought process or a timeline. It can show benefits of a product or service,
history of an organization, or anything you want your visitors to know about you or your
company. This can be a video or presentation that’s automated or one they can step through
themselves by clicking or scrolling.
This requires a high level of graphic skill and has to be done carefully and skillfully in order to
look right. It requires storyboarding, knowing your website’s message, and how to convey
that message. It should highlight benefits and features in the most succinct way possible
with the right balance between graphics and text. Too much of either can result in a UX
that’s unfocused, overwhelming, or both.
Greater Focus on Social Comments
[I
Google -
No comments yet
~ Pubhc X + Add mote people
I)
Cooglc-
X
•
lOCUN
Image by Social Comments / https://wordpress.org/plugins/social-comments/screenshots/
WordPress has a great commenting system, but more readers tend to leave comments within
social networks than on websites themselves. To capture social comments, the trend
continues to move toward more websites using social commenting systems rather than the
built-in WordPress commenting system. This ensures visitors can comment using their social
accounts and/or any social media mentions are picked up and displayed right on your site.
Greater Focus on Content, Less Focus on Ads
Over the past few years, readers have become blind to ads within sidebars. Homepages
have moved from being a banner for the content and ads, to being an eye-catching landing
page with great visuals. They contain more visuals than text and the ads have moved to the
content itself. This requires a great layout to make room for them, which leads us to…
Greater Focus on Article Layouts
VULPUTATE IPSUM NIBH PARTURIENT
Divi Café Life Demo
We’ve seen drag and drop builder plugins that let us create homepages, but there is also a
need for layout design within the posts themselves. Systems that allow for post layout design
will be popular as users can create layouts with widget areas and place modules, giving their
sites a much more elegant look and feel.
Designer Tools
There are some interesting tools to help designers to prototype websites and design layouts
that have landed on the scene recent or are projected to be released this year. Here are a
few that I expect to be popular in 2016.
Adobe Project Comet
Adobe Project Comet arrives this year. It’s a cross-platform app for designing the UX from
start to finish. It has tools for wireframing, visual design, interaction design, prototyping, and
more. You can preview it on any device. It works with Photoshop and Illustrator, and can be
expanded through community-built plugins. This will be the developer tool to watch.
Sketch
Sketch is an app for Mac that many are using in place of Photoshop. It has a nice work
environment and was designed specifically for web and mobile designers. It has features
such as layer styles, text effects, tools to create vector elements, and more.
Final Thoughts
These are just a few of the web design trends that will become more prominent throughout
2016. Of course the popular trend is not always the best choice, but they are good tools to
have waiting in the wings should you need them. Plus, this process of finding ways to stand
out from the crowd can help push a trend forward.
Do you want a ready web design for your new web site? Visit
http://www.ineedawebsitedesign.com/

Weitere ähnliche Inhalte

Was ist angesagt?

Evaluation: Question 7 Response
Evaluation: Question 7 ResponseEvaluation: Question 7 Response
Evaluation: Question 7 Response
rohanicoombes
 
eFowler_ThinkCreativeInternship
eFowler_ThinkCreativeInternshipeFowler_ThinkCreativeInternship
eFowler_ThinkCreativeInternship
Ethan Fowler
 
How to-create-5-fabulous-infographics-final
How to-create-5-fabulous-infographics-finalHow to-create-5-fabulous-infographics-final
How to-create-5-fabulous-infographics-final
Vanitha Pillay
 

Was ist angesagt? (20)

Portfolio pages
Portfolio pagesPortfolio pages
Portfolio pages
 
Portfolio Pro Tips
Portfolio Pro TipsPortfolio Pro Tips
Portfolio Pro Tips
 
3 GRAPHIC DESIGN APPS FOR YOUR HOME FURNISHINGS BUSINESS
3 GRAPHIC DESIGN APPS FOR YOUR HOME FURNISHINGS BUSINESS3 GRAPHIC DESIGN APPS FOR YOUR HOME FURNISHINGS BUSINESS
3 GRAPHIC DESIGN APPS FOR YOUR HOME FURNISHINGS BUSINESS
 
Evaluation: Question 7 Response
Evaluation: Question 7 ResponseEvaluation: Question 7 Response
Evaluation: Question 7 Response
 
My portfoliofinal
My portfoliofinalMy portfoliofinal
My portfoliofinal
 
Why Design Matters: How to Make Your Website Worth a Million Visits
Why Design Matters: How to Make Your Website Worth a Million VisitsWhy Design Matters: How to Make Your Website Worth a Million Visits
Why Design Matters: How to Make Your Website Worth a Million Visits
 
13ACynthiaBampi
13ACynthiaBampi13ACynthiaBampi
13ACynthiaBampi
 
13A celenarousculp
13A celenarousculp13A celenarousculp
13A celenarousculp
 
BYU-I Comm130 Portfolio
BYU-I Comm130 PortfolioBYU-I Comm130 Portfolio
BYU-I Comm130 Portfolio
 
Portfolio - Daniel Wilson
Portfolio - Daniel WilsonPortfolio - Daniel Wilson
Portfolio - Daniel Wilson
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI Designers
 
Top 10 Graphic Design Mistakes - Part 1
Top 10 Graphic Design Mistakes - Part 1Top 10 Graphic Design Mistakes - Part 1
Top 10 Graphic Design Mistakes - Part 1
 
Designing for email
Designing for emailDesigning for email
Designing for email
 
eFowler_ThinkCreativeInternship
eFowler_ThinkCreativeInternshipeFowler_ThinkCreativeInternship
eFowler_ThinkCreativeInternship
 
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
 
Deborah Owen Fall 2016 BYU-Idaho Visual Media Portfolio
Deborah Owen Fall 2016 BYU-Idaho Visual Media PortfolioDeborah Owen Fall 2016 BYU-Idaho Visual Media Portfolio
Deborah Owen Fall 2016 BYU-Idaho Visual Media Portfolio
 
Question 6
Question 6Question 6
Question 6
 
Evaluation - T Sutherland 4122
Evaluation - T Sutherland 4122Evaluation - T Sutherland 4122
Evaluation - T Sutherland 4122
 
How to-create-5-fabulous-infographics-final
How to-create-5-fabulous-infographics-finalHow to-create-5-fabulous-infographics-final
How to-create-5-fabulous-infographics-final
 
Kory Ainsworth Portfolio
Kory Ainsworth PortfolioKory Ainsworth Portfolio
Kory Ainsworth Portfolio
 

Andere mochten auch (12)

Surinder Singh - CV
Surinder Singh - CVSurinder Singh - CV
Surinder Singh - CV
 
Snow Motion Graphic Portfolio
Snow Motion Graphic PortfolioSnow Motion Graphic Portfolio
Snow Motion Graphic Portfolio
 
graphic design, illustrations_portfolio/resume
graphic design, illustrations_portfolio/resumegraphic design, illustrations_portfolio/resume
graphic design, illustrations_portfolio/resume
 
SURYKAR_RESUME
SURYKAR_RESUMESURYKAR_RESUME
SURYKAR_RESUME
 
CV_Razal
CV_RazalCV_Razal
CV_Razal
 
Question 4
Question 4Question 4
Question 4
 
الدرس الثاني
الدرس الثاني الدرس الثاني
الدرس الثاني
 
Portfolio - AnhNDV - eng
Portfolio - AnhNDV - engPortfolio - AnhNDV - eng
Portfolio - AnhNDV - eng
 
Curriculum Vitae EMA
Curriculum Vitae EMACurriculum Vitae EMA
Curriculum Vitae EMA
 
My ID
My IDMy ID
My ID
 
PATTRAWUT_RESUME
PATTRAWUT_RESUMEPATTRAWUT_RESUME
PATTRAWUT_RESUME
 
Feature Story Attempt
Feature Story AttemptFeature Story Attempt
Feature Story Attempt
 

Ähnlich wie A Forecast of 2016 Web Design Trends

2D Web Designs
2D Web Designs2D Web Designs
2D Web Designs
Nusrat Khanom
 
2013 ion responsive_design_landingpages
2013 ion responsive_design_landingpages2013 ion responsive_design_landingpages
2013 ion responsive_design_landingpages
Chafik YAHOU
 
Web UI Design Examples.pdf
Web UI Design Examples.pdfWeb UI Design Examples.pdf
Web UI Design Examples.pdf
Ayesha Siddika
 

Ähnlich wie A Forecast of 2016 Web Design Trends (20)

Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and Elements
 
What are the web design trends for 2022
What are the web design trends for 2022What are the web design trends for 2022
What are the web design trends for 2022
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTRE
 
2D Web Designs
2D Web Designs2D Web Designs
2D Web Designs
 
2018 Web Design Trends
2018 Web Design Trends2018 Web Design Trends
2018 Web Design Trends
 
Top 10 Web Design Trends in 2022
Top 10 Web Design Trends in 2022Top 10 Web Design Trends in 2022
Top 10 Web Design Trends in 2022
 
Top 11 web design trends followed in 2017
Top 11 web design trends followed in 2017Top 11 web design trends followed in 2017
Top 11 web design trends followed in 2017
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trends
 
Web design trends 2015 (Prediction)
Web design trends 2015 (Prediction)Web design trends 2015 (Prediction)
Web design trends 2015 (Prediction)
 
Round up of latest website design trends for 2017
Round up of latest website design trends for 2017Round up of latest website design trends for 2017
Round up of latest website design trends for 2017
 
Website Design: 6 Trends to Follow in 2020
Website Design: 6 Trends to Follow in 2020Website Design: 6 Trends to Follow in 2020
Website Design: 6 Trends to Follow in 2020
 
2013 ion responsive_design_landingpages
2013 ion responsive_design_landingpages2013 ion responsive_design_landingpages
2013 ion responsive_design_landingpages
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
 
Web Design Trends 2013
Web Design Trends 2013Web Design Trends 2013
Web Design Trends 2013
 
Web UI Design Examples.pdf
Web UI Design Examples.pdfWeb UI Design Examples.pdf
Web UI Design Examples.pdf
 
3 Ways to Go Mobile First with Responsive Design
3 Ways to Go Mobile First with Responsive Design3 Ways to Go Mobile First with Responsive Design
3 Ways to Go Mobile First with Responsive Design
 
How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?How not having a Responsive Website can be Detrimental to your business?
How not having a Responsive Website can be Detrimental to your business?
 
2014 web design trends
2014 web design trends2014 web design trends
2014 web design trends
 
7 web design trends for 2016
7 web design trends for 20167 web design trends for 2016
7 web design trends for 2016
 

Kürzlich hochgeladen

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Kürzlich hochgeladen (20)

2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 

A Forecast of 2016 Web Design Trends

  • 1. Web design trends change rapidly. They come and go. Websites today follow very different trends than they did just a year ago. As web designers, it’s helpful to know what the current and upcoming trends are. It can help you stay ahead of the competition and it can help you meet your client’s needs. Keep in mind that “trend” doesn’t necessarily mean “new.” Many new design trends come from the tastes and preferences of designers and users in design and usability. What makes those changes possible is improvements in technology. Technology is a major driving force and is always helping design move forward. To help understand where we’re going, let’s take a look at where we’re been. Where Web Design Trends Have Been Web design for 2015 saw a lot of refinements of trends from 2014. Recent years saw trends such as: Minimal Flat Video sliders Background video CSS animation Long scroll Hero images Hamburger menus Responsive Mobile first Newsletter popups
  • 2. Frontend frameworks Many of these trends will continue to be refined. Some will be replaced with better alternatives. Others, such as background video, will be used with moderation. Where Web Design Trends Are Heading 2016 web design trends could probably be summed up in two letters: U and X. Okay, and maybe one more word, too: mobile. Trends will follow best practices for both UX and mobile platforms. UX and mobile have been in view over the past few years, but now they’re front and center and the main driving focus of website design with an uncluttered UI. This year will see even more refinement and standardization of current trends. We’ll see concepts go from just an ideal to the standard. From new to the norm. Material Design
  • 3. Material Design is an alternative to flat design that brings back some nice graphical elements. It’s a set of Google design standards that separates elements using the layers concept found in image editing software. It can stack and remove elements as needed. It even has built-in animations that would normally need to be created manually. It’s a design language with a specific set of guidelines which takes out the guesswork. The results look the same from one platform to another. Since these standards are established by Google they’re sure to have widespread support. It is possible, however, that adhering to strict guidelines will hamper creativity. I see this as a challenge to improve creativity within the guidelines.
  • 4. Compared to Flat Design Image by fet / shutterstock.com Material design is different from flat design. Flat design a design basis for presenting UI and graphical elements. It simply strips the visuals down to the basics and does away with visuals that try to mimic the real world with designs such as rounded corners, textures, shadows, etc. It minimizes all of the showy stuff that distracts from the story and reduces the amount of information that readers have to deal with. It has solid colors, sharp edges, and thin lines. Flat design scales well and is easy to read on mobile devices. It’s practical and works well. It loads fast. The problem is appearance is secondary. It limits the amount of colors you can use and can sometimes look generic. Flat design won’t be going away. It’s actually compatible with Material Design as well as being responsive and minimal. There will be a focus on turning off what’s not needed so they can focus on what is. The trend will be finding that perfect balance between the two. Flat doesn’t have to mean boring. Material design is based in 3D. It’s a better choice for those who do want some stylish visual design. Material design gives you some of the design elements back. You’re not stuck with only having solid colors or not having animation.
  • 5. Material design focuses on mobile devices first as more consumers are using smartphones and tablets as their primary devices, too. It streamlines the website and speeds it up. Expect material design to become the standard in web design. Typography Image by http://www.pinkbowcity.com/ Increased resolutions and responsive designs make it possible to improve typography, which is why that is one of the web design trends we simply must include here. Typography can be more colorful and stand out. It can make a statement. Two trends that I’ve seen with typography are the use of serifs and hand-writing. Each have specific uses. Serifs help improve legibility. They were removed previously due to lower resolution screens and screen size. Screen resolutions and sizes are getting larger. Also, layout designs are cleaner and leave room for more elegant fonts. Expect to see serifs more often within the content itself.
  • 6. Handwriting is more personal. If it’s done correctly, it’s pretty and adds a special touch to a website. Just like serifs, the challenge is to keep the style legible and readable on small screens. Hand-writing will mostly be used in logos, headers, post titles, menus, business cards, and so forth. One thing to consider is more users are consuming content on mobile devices. Unfortunately lower end devices, such as the Fire HD 10, display lower resolutions. This is more noticeable on larger screens because they have a lower pixel density due to having the same resolution as their smaller counterparts. One solution is to display typography based on the screen resolution. This means serifs and handwriting would display on mobile devices for high-res screens while screens with lower resolutions could receive a font that’s more suitable to its resolution. Of course server speeds and load time have to be taken into consideration. Mobile UX Image by vasabii / shutterstock.com
  • 7. More Imagery, Less Text Not only will typography become more suitable to mobile screens and resolutions, but navigation, forms, images, and mobile-specific features (such as GPS) will have the focus of design. The use of images will change somewhat. Where images have been used for effects and text, CSS and fancy fonts will be used for effects and text will be used for text. This reduces page-loading times and server load. Touch events are becoming more prominent. More sites are using plugins to handle events such as tap and swipe. This takes websites beyond just being responsive to the screen size, but also to the screen type, finger size, amount of pressure used, etc. Buttons and fields have to be large enough and have enough distance between them so they’re not hit accidently. Which brings us to mobile layouts. Mobile Layouts Minimalism rules for mobile devices. Some desktop elements can be hidden when the site is viewed on a mobile device. Other elements will be adjusted or modified depending on the screen size and type. This allows the message to fit the screen. Strip out the elements that are less important and fit it to the screen without losing the message. Slideshows, images, buttons, elements, menus, and so forth should be developed with mobile in mind. Fortunately, Material Design brings back visual elements so sites don’t have to look plain on mobile. Also, you can render an image at a different size or resolution depending on the size of the screen. This will speed up the page-loading and the images will still look great on mobile devices.
  • 8. Tiles Replaced with Cards Divi Café Live Demo Consumers tend to look more at pictures and video and less at the text. This creates a balancing act between SEO and UX. Search engines prefer text they can index. This will move text-rich content to sub-pages and the image-rich content to the homepage. If text is required for the homepage, try to place it under the imagery. Target the users first and the search engines second. Browsers are becoming faster at rendering images. This means images can be larger with higher resolutions than before. Expect a greater emphasis on higher quality images and artwork.
  • 9. Extra theme masonry blog module We saw lots of tile-based designs in 2015. Pinterest made (or helped make) the design popular. Cards take the design to a deeper level by adding functionality and interactivity. They can provide more information using hover effects, by flipping the cards over, expanding them, and more. They are a great design element that places the focus on imagery and offer a usable way and help make the content easy to see at a glance. They essentially create grid layouts while minimizing content. Dynamic Storytelling
  • 10. = t•unlo"'c f .. Cl UA.CII p W lnat § EXTRA ..01,U •lll~T !LATUJlO MDOUll ~AC.l lA10UI l(UMMlftll HIKING TRAIL REVIEW " 11,111111 '" ,,,,..... FOtLOW US o F.t.CflOOI( o GOOGU• o vou,u., O rw1nr11 . . Rl((Nt TWl(tS • • • . . OUII AUTHOll5 ANNAftO'lllillt IIICIN1 ervuws
  • 11. Dynamic storytelling works by telling a story through graphics with textual support. This is one of the web design trends that has held popularity for a few years now. It guides the visitors through a thought process or a timeline. It can show benefits of a product or service, history of an organization, or anything you want your visitors to know about you or your company. This can be a video or presentation that’s automated or one they can step through themselves by clicking or scrolling. This requires a high level of graphic skill and has to be done carefully and skillfully in order to look right. It requires storyboarding, knowing your website’s message, and how to convey that message. It should highlight benefits and features in the most succinct way possible with the right balance between graphics and text. Too much of either can result in a UX that’s unfocused, overwhelming, or both. Greater Focus on Social Comments [I Google - No comments yet ~ Pubhc X + Add mote people I) Cooglc- X •
  • 12. lOCUN Image by Social Comments / https://wordpress.org/plugins/social-comments/screenshots/ WordPress has a great commenting system, but more readers tend to leave comments within social networks than on websites themselves. To capture social comments, the trend continues to move toward more websites using social commenting systems rather than the built-in WordPress commenting system. This ensures visitors can comment using their social accounts and/or any social media mentions are picked up and displayed right on your site. Greater Focus on Content, Less Focus on Ads Over the past few years, readers have become blind to ads within sidebars. Homepages have moved from being a banner for the content and ads, to being an eye-catching landing page with great visuals. They contain more visuals than text and the ads have moved to the content itself. This requires a great layout to make room for them, which leads us to… Greater Focus on Article Layouts
  • 13. VULPUTATE IPSUM NIBH PARTURIENT Divi Café Life Demo We’ve seen drag and drop builder plugins that let us create homepages, but there is also a need for layout design within the posts themselves. Systems that allow for post layout design will be popular as users can create layouts with widget areas and place modules, giving their sites a much more elegant look and feel. Designer Tools There are some interesting tools to help designers to prototype websites and design layouts that have landed on the scene recent or are projected to be released this year. Here are a
  • 14. few that I expect to be popular in 2016. Adobe Project Comet Adobe Project Comet arrives this year. It’s a cross-platform app for designing the UX from start to finish. It has tools for wireframing, visual design, interaction design, prototyping, and more. You can preview it on any device. It works with Photoshop and Illustrator, and can be expanded through community-built plugins. This will be the developer tool to watch. Sketch
  • 15. Sketch is an app for Mac that many are using in place of Photoshop. It has a nice work environment and was designed specifically for web and mobile designers. It has features such as layer styles, text effects, tools to create vector elements, and more. Final Thoughts These are just a few of the web design trends that will become more prominent throughout 2016. Of course the popular trend is not always the best choice, but they are good tools to have waiting in the wings should you need them. Plus, this process of finding ways to stand out from the crowd can help push a trend forward. Do you want a ready web design for your new web site? Visit http://www.ineedawebsitedesign.com/