Biggest Web Design Trends of Autumn 2015

10.24.2015 no comments

What we’ll try to do here is not just to present you with what is cool in web design this autumn. We’re going to take you past the obvious to make some real predictions. Hopefully this information will help you design trendy websites if you are a web designer and write awesome content if you are running your blog.

autumn trends

1.Longer scrolling sites.

As mobile becomes increasingly more important, there is an emerging trend towards using scrolling as a means of displaying additional content instead of the old link-based approach.

1.Storytelling.

People are busier than ever and this means their attention span is getting shorter, too. If you want them to engage with your content, you need an interesting story.

2.No more header background images.

It’s become so standard you see it everywhere: white text over a blurred image. But as with every trend, once everyone adopts it, it’s no longer cool. So expect to start seeing text on solid color backgrounds.

3.Keep only the essential.

Try to eliminate unnecessary elements instead of adding stuff. Highlight the content – that’s what people are looking for.

4.Flexible fixed width layout.

We moved from fixed width to responsive, full width. But full width layouts tend to look like overkill on very large displays. That’s where max-width comes in.

5.Custom professional photography.

Because of super high resolution screens, high quality imagery is now a must.

macro lens

7. Steal what works on mobile.

Mobile has changed the way we think about user interface and there’s no coming back. One crucial lesson mobile has taught us is that screen real estate is precious and we should only show what’s really important. After all, that’s what fly out menus and accordions are made for.

8. Hidden main menus.

Some sites have started experimenting with hiding menus altogether when a visitor first opens a website. This might help drive up visitor engagement, which some studies showed to be somewhat inversely proportional to the number of elements from which to choose.

9. Over-sized typography.

Typography is already a key to web design and this trend is only getting bigger. Of course, before making your fonts huge you have to make sure that they actually look good.

typography

10. Speed.

Thanks to all the cool websites that are out there, people have come to expect both amazing user experience and blasting speed.

car speed

11. Gestures are the new clicks.

We forget how hard scrolling webpages used to be. Most users would painstakingly move their mouse to the right edge of the screen, to use something ancient called a ‘scrollbar’: most of developers probably used a mouse wheel, cursor keys, or trackpad, but they were way ahead of most users. In 2015 it’s far easier to scroll than it is to click. On mobile you can scroll wildly with your thumb. To click on a precise target is actually more difficult – the complete opposite of what we’re used to on the desktop. As a result we should expect more and more websites to be built around scrolling first, and clicking second. There’s every reason to expect this trend to continue as mobile takes over more of the market. Modern sites have fewer things to click, and much more scrolling. We’ll see fewer links, more buttons, bigger ‘clickable’ areas, and taller pages that expect to be scrolled. Websites which spread their articles onto multiple pages will soon learn this lesson. Expect these to turn into longer single pages or even, like TIME magazine, into infinite scrolling pages. It’s too early to know if the web will expand itself onto devices like watches, but if it ever does, you can bet it’ll be almost entirely driven by gestures.

12. The fold is really dead this time.

Now scrolling is so cheap, and devices are so varied in size, ‘the fold’ is finally becoming irrelevant. Designers are increasingly free to not cram everything at the top of a page. This leads to a design trend popularized by Medium – full-screen image titles, with no content visible until you start scrolling. With tall, scrolling pages, designers have the chance to do what magazines have taken for granted for years: fill their pages with big beautiful images. In 2015 we see more designs that take up much more space – especially vertically – and a lot of larger imagery like this.

13. Users are quicker, websites are simplifying.

Today every young adult is an expert web user. And even the amateurs are acting like pros: using multiple tabs, and swiping to go back a page.

The result is that everything is faster. And we’ve all learned to become impatient. If you want to make a mild mannered person explode with annoyance, just make their Internet really slow for a minute. Now websites are forced not just to become faster, but to become faster to understand. Designs which slow the user down have the same impact on their audience as these websites which don’t load at all. Simpler designs are easier to scan, which means they’re faster to appreciate. This is the biggest reason for the death of skeuomorphic design: users are more perceptive, less patient, and clutter only slows them down. Apps put most websites to shame with super-minimal, beautiful interfaces. And they’re doing this because minimal interfaces perform better. Flat design is just the beginning. The real trend is towards simplicity and immediacy, and we expect that to go further than ever in 2015.

14. The pixel is dead.

On a desktop, a pixel was a pixel. You even had an idea of how many pixels made up an average inch: 72 dpi. Nowadays very few people know what a pixel is. With responsive design we’ve seen a move towards grids and percentages. But one huge area remains still unchallenged: bitmap images.

Almost the entire web is built with images that have half the resolution of a modern display, and they don’t scale. With Retina displays and modern browsers the time is right for vector images to become more popular this year. We can see this trend already happening with the font-based icons and Google’s Material design. The website loads faster and scales the icons to any size without losing quality. That makes them ideal for designers and modern web browsers. The technology exists now, but it will take time for professionals to change their habits to create for higher quality displays. Once the average desktop display becomes Retina-grade (like the new iMac), we expect designers to follow suit.

15. Animation is back.

If you want to make a website look dated, cover it with animated “Under Construction” GIFs and Flash animation. But several things are coming together to make animation a rising star in modern web design. Flat design can end up looking too consistent, boring even. Animation helps a website to stand out, and to pack more information into less space. Mobile apps have redefined what a user expects. Mobile apps use motion to convey meaning, and websites are just starting to do the same. New technologies like CSS animation make it easy to enhance designs without plugins, speed or compatibility issues. And Web Components will only accelerate this. GIF animation is back, and surprisingly effective.

16. Components are the new frameworks.

eb technology continues to get more complicated, and less semantic. Designers must embed messy code onto their pages for simple tasks, like including Google Analytics or a Facebook Like button. It would be a lot easier if we could just write something like this instead: . And we can with Web Components, which aren’t quite ready to be used by most designers yet. 2015 is looking like their year.

Google’s Material design is here, and it may just be what gets this movement started. Powered by Polymer, and supported by all modern browsers, it provides the rich animation and interaction components from Android apps, with simple tags like these. If that takes hold, it wouldn’t be surprising to see more component based frameworks appear in 2015-2016. Perhaps new version of Bootstrap?

17. Social saturation and the rise of direct email.

Social media has been a huge success for consumers, but many content producers aren’t so happy. The problem is saturation. With billions of posts every day,Facebook learns the posts that users are most likely to enjoy, and shows only those. Unfortunately that means over time, what your post is increasingly seen by a smaller percentage of your followers. (A problem you can solve, conveniently, by paying Facebook). Social isn’t going away, but in 2014 we’ve seen a lot of prominent bloggers like Tim Ferriss move their focus away from social and into good old fashioned email lists. They’ve realized that email has one significant advantage over social: a much higher percentage of people will see what you send them. We expect this post-social trend to continue into 2015-2016, with the under-appreciated trend of Web Notifications.

social media twitter instagram facebook google plus

18. Flexbox

Flexbox has been predicted to become a thing for quite some time, but has yet to gain the traction in the market that it needs to actually get much of anywhere. We think part of the reason flexbox is not taking off as hoped, is the fact that it began as an Adobe project. The W3C initially blew it off, knowing what flexbox could become. Flexbox still has the potential of becoming a fully Adobe owned bunch of proprietary markup which Adobe could charge high usage and licensing fees for. At the same time, it was created and is still used for the purpose of making HTML and XML related sites look and function the same as PDF files. We have done the printed magazine before. Those who look for long term trends want to find ways to surpass current Print Design. Those who are fixated on short term trends continue to look to digitally reinvent the printing press.

19. Grid layouts.

While useful for some content, grids tend to be over-used. Not all content lends itself to a grid. On the other hand, when a grid layout does benefit users, many grid designs make heavy use of massive scripts and bad semantics (div.column3row5text for example). Often JS, PHP, and other programming languages end up being used to create the design, while CSS is ignored or used to create function, which is completely backwards from how these coding languages are meant to be used. The thing is, grids are a bit like tables in that they can arrange content in a grid pattern using three elements. In the case of tables, table, tr, and td are three elements. In the case of a responsive grid, the three elements may be anything. Using [div, section, article] or [menu, ul, li] are both perfectly valid examples of using three elements to create a grid layout. The trick is in using positioning and display attributes to your advantage and using @media queries for responsiveness and calc() for the height and width of the actual tiles. Simplifying the markup and styling this way makes it that much simpler to design a grid that does not absolutely have to mimic the Metro design of Windows 8 (aka flat design).

grey

20. Split screens.

The split screen layout features a vertical divide that can present two elements. The reasons for this type of layout are two-fold:

– the business has two things to promote, and they are of equal importance, and the split allows users to select from the two;

the business may want to promote the essentials of its niche on one side and present photos or media on the other half – perhaps to introduce staff or examples of products or services. A restaurant, for example, may want to put its brand identity on the left side of the screen and then have scrolling examples of dishes on the right. A clothing site will do the same thing, with scrolling images of some of its products on the right; still another business may want to introduce its staff through pictures and captions on the right.

21. Big backgrounds/parallax.

The use of big backgrounds can set the tone and mood of the site. If they are busy backgrounds, than the other design elements in the middle and foreground must be minimalist; however, a more minimalist background will support busier middle and foreground elements.

22. Ghost buttons.

‘Ghost buttons’ are those transparent and empty buttons that have a basic shape form, such as a rectangular or perhaps squared. They are generally bordered by a very thin line, while the internal section consists of plain text printed in a light, sans-serif font. These buttons, are also sometimes referred to as “empty” of “hollow” buttons, and tend to be bigger than standard colored buttons. The attribute ‘ghost’ is due to the fact that, although they’re transparent as phantoms, they immediately grab the users’ eye – almost in the way a ghost story can transfix your gaze.

ghost buttons

23. Iconography for contextual actions.

We continue to see more animated feedback (e.g. Material design), less screen with less text and more colors. This leads most of the action button to be only iconographic. If we see any mobile interface now, almost all action buttons have little to no text. This is very hard for novice (and elderly) users, since associating consistent meaning with icons takes time. This is becoming less of a problem since we are moving to generations exposed to technology from an early age.

iconography icons

24. E-commerce.

All business is going digitalization. Anyone wants to sell products online therefore ecommerce development is the booming stage all over world. That’s the easy way to sell your product, there is no limitation of customers because nowadays everybody uses gadgets connected to the internet and this is the stage of digitalization. All business will be online in a few years. There are many companies on the market which support the digital word creation and provide complete solutions for ecommerce web development.

imac apple

25. Thin fonts.

People just got bored of BOLD fonts. Besides, thin fonts are neat and minimalist. That’s why they seamlessly blend into almost any current layout.

font

26. Line icons.

Sketchy icons blend well with Minimal and Responsive designs.

line icons

27. Micro interactions.

Micro interactions are the ones that give you instant feedback which are the details of any user interface. They let you immediately know what are your mistakes, what is the software thinking.

28. CSS shapes.

This cool technology won’t get noticed, except by designers. CSS shapes allow you to flow layout into shapes, like circles. It’s incredibly cool, but until browser support is guaranteed, this is likely to be too risky to put time and effort into it you’d need almost two complete designs, for old and new browsers. And outside of designers, we don’t think many users would notice. It is really cool though.

web design

The bottom line:

Every year web design grows. 2015 has inherited a lot of trends from previous years. Let us make a quick recap of the biggest web design trends of autumn 2015:

Rise of flat and material design

Background + full screen videos

Mobile apps and social sites will dominate

Interactive web graphics will replace infographics

Micro-interactions

Less coding and more websites

Big images/videos to replace sliders

Responsive design with better performance

One-page scrolling as opposed to clicking

Brilliant engaging storytelling

Retina display

A far more individualized experience

Material design

Simplify everything

Symmetrical layout

Further disconnect design from content

Pastels

Even less photos + more vectors

Physics based animation

Parallax

Too many animations

Vibrant colors

Card Design

Multi scrolling / Infinite scrolling

Big typography

Ghost buttons

Responsive

Flat / Half Flat (Material) Design

Hidden menu (hamburger menu)

Page speed / Performance

Gamification

Advanced Responsive Rearrangements thru CSS and JS

Video in place of Text

Sidebar is dying

Google material design adoption

Have anything to add to this list? Do this at the comment section! We value your opinion.


Written by:
Tina Jameson

Tina Jameson is TemplateMonster Affiliate Manager providing the latest news and updates in online and affiliate marketing in particular. She is totally obsessed with social media and will gladly share fresh inspirational industry news and tips for TemplateMonster affiliates on her and accounts.


No comments yet

Your comment was successfully sent and awaits moderation.

Server is not replying. Please try later.

You already have this product in your basket

Please delete it before you add a new copy.

You added this product in your basket.

Thank you for Your choice.