Slides badge

Current design trends

Learning Intentions

  • Understand the basic idea of a design trend

  • Understand why trends are important

Success Criteria

  • I can explain how HTML, CSS and JavaScript are needed to build a webpage
  • I can write HTML tags such as the paragraph, image, link and break

What is a trend?

  • A design trend is something that is used on websites across the world, and not limited to one or two. 
  • Design trends are important these days because of companies like Apple and Google, who have their own design languages.
  • As a website designer, you will have to follow these trends to ensure that the website stays relevant.

Examples of trends

  • These days, the most common trends in web development include:
    • Responsive design
    • Dark mode
    • Mobile-first designs
    • Gradient based designs
    • Rounded designs

Trends come and go

  • In about 2012, Apple's design language changed and the idea of using curves on a website had become something of the past.
  • Shortly after that, curves were slowly starting to reappear all across the web and in user interfaces.
  • Gradients across websites are exactly the same - they were there for so long and then gone again shortly after.

Skeuomorphism and flat design

  • Again, a trend set by Apple was that of the flat design. First implemented in iOS 7, the flat design took away from the design style that had been in place since Windows 3.1 - almost 20 years before!

NeUmorphism

  • A new trend that appears to be gaining some traction is that of neumorphism (also known as neomorphism). 
Material (flat) design Neumorphism
Shadows Elements have a single or multiple dark shadows around them Elements must have a light shadow and a dark shadow simultaneously
Background colours An elements background colour must be different to that of the parent element The background colour must be the exact same (or very similar) as the parent's background colour
Rounded borders Elements can be squared or they are rounded (more common nowadays) Rounded edges are required
Borders Borders aren't required but can be used to make it easier to discern different parts of a page A subtle border helps improve contrast and make edges sharper

NeUmorphism

  • A new trend that appears to be gaining some traction is that of neumorphism (also known as neomorphism). 
Material (flat) design Neumorphism
Shadows Elements have a single or multiple dark shadows around them Elements must have a light shadow and a dark shadow simultaneously
Background colours An elements background colour must be different to that of the parent element The background colour must be the exact same (or very similar) as the parent's background colour
Rounded borders Elements can be squared or they are rounded (more common nowadays) Rounded edges are required
Borders Borders aren't required but can be used to make it easier to discern different parts of a page A subtle border helps improve contrast and make edges sharper

Neumorphism is the best!

Answer the following questions:

  1. Why are design trends important when building a website?
  2. State one design trend used today

 

Complete the worksheet on Current Trends.

Task

Presentation Overview
Close
JB
Current Design Trends
© 2020 - 2024 J Balfour
10:39 | 29-04-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      Dark Mode
      Bold Text
      ×
      All slideshow files