Whether you’re planning to revamp your existing personal trainer website or create a completely new one, the primary objective must always be to provide a memorable user experience. In other words, the site must be designed with the needs and preferences of your average customer in mind, not yours.
After all, they’re the ones who are going to use your site and their experience determines your success.
In this blog, we’re going to look at a few key trends that are likely to dominate the design aspect of things in 2018. So, take a look. See what’s out there and identify the trends that make sense for your personal training site.
Hopefully, you'll be able to give your customers what they're looking for.
In this blog, we’re going to look at a few key trends that are likely to dominate the design aspect of things in 2018. So, take a look. See what’s out there and identify the trends that make sense for your personal training site.
Hopefully, you'll be able to give your customers what they're looking for.
1. Parallax Design
Parallax design is a type of scrolling technique where background images move at a different pace than foreground images.
A parallax fitness website design helps to create an illusion of depth and makes a website feel much more interactive. Parallax design can also be used divide content, colours and large areas of text to reduce cognitive load.
Parallax design can be a little heavy for mobile users so it’s usually best to use a theme that either loads super fast or switch of the parallax feature altogether to prioritize loading of other, more important, website elements.
A great example of this is a website we built for Need to Know Fitness. Notice how the header stays in place while the content below seems to crawl over the top of the content above.
A parallax fitness website design helps to create an illusion of depth and makes a website feel much more interactive. Parallax design can also be used divide content, colours and large areas of text to reduce cognitive load.
Parallax design can be a little heavy for mobile users so it’s usually best to use a theme that either loads super fast or switch of the parallax feature altogether to prioritize loading of other, more important, website elements.
A great example of this is a website we built for Need to Know Fitness. Notice how the header stays in place while the content below seems to crawl over the top of the content above.
2. Asymmetric Layouts
An asymmetric layout is exactly what it sounds like. Layouts that aren’t symmetrical on the page as you view it.
Earlier websites used symetry to keep things neat and tidy. But with the updates in tech and browser capabilities, as well as new web design trend, we can use colours, letter, layout and images to reduce cognitive load.
I personally love them. When done right you can create beautiful blends of text and imagery to make your website pop. Check out our portfolio page to see some of the best personal trainer websites we've build with an asymmetric design.
Earlier websites used symetry to keep things neat and tidy. But with the updates in tech and browser capabilities, as well as new web design trend, we can use colours, letter, layout and images to reduce cognitive load.
I personally love them. When done right you can create beautiful blends of text and imagery to make your website pop. Check out our portfolio page to see some of the best personal trainer websites we've build with an asymmetric design.
3. Dropshadows
The use of shadows is not new? Although shadows have been a staple of web design for quite a while, thanks to the progress of web browsers, we now see some exciting variations.
With grids and parallax layouts, web designers are playing with shadows more than ever to create depth and the illusion of a world beyond the screen. This is a direct reaction to the flat design trend that was popular in years past.
We used drop shadows on Ripped by Rycrofts Resources page to make her downloadable resources feel more physical and tangible.
With grids and parallax layouts, web designers are playing with shadows more than ever to create depth and the illusion of a world beyond the screen. This is a direct reaction to the flat design trend that was popular in years past.
We used drop shadows on Ripped by Rycrofts Resources page to make her downloadable resources feel more physical and tangible.
4. Cinemagraphs
We all know how effective videos can be when they’re used on your website. However, times are changing. Though video still remains a big deal, the type of videos that you use on your site is likely to change. The trend currently seems to be swaying towards the use of cinemagraphs.
What are cinemagraphs, you ask?
Well, they’re basically sequential images that are clicked and sort of stitched together to create the perception of motion. The closest examples of cinemagraphs would be flip books or GIFs.
We created a Gif for the Institute of Personal Trainers to represent their 8 stages of business learning for personal trainers.
What are cinemagraphs, you ask?
Well, they’re basically sequential images that are clicked and sort of stitched together to create the perception of motion. The closest examples of cinemagraphs would be flip books or GIFs.
We created a Gif for the Institute of Personal Trainers to represent their 8 stages of business learning for personal trainers.
Cinemagraphs are turning out to be big deal because they create a lot of visual interest and are also easier to produce and incorporate.
So, maybe using cinemagraphs of you or your clients working out could add a nice touch.
5. Bold Lettering
When it comes to typography, the current trend seems to be leaning towards bold lettering. A lot of the websites we’ve designed are now anchoring their home pages with big, bold words. However, this may not work if the other design elements don’t cooperate well.
Ideally, bold typography works best when the page follows a minimalistic theme. Bold lettering goes well with a clean design.
Check out our client, Eric's, Strength Archetype website. He opted for a minimalistic design so we used bold text to really drive home who he helps with his services.
Ideally, bold typography works best when the page follows a minimalistic theme. Bold lettering goes well with a clean design.
Check out our client, Eric's, Strength Archetype website. He opted for a minimalistic design so we used bold text to really drive home who he helps with his services.
6. Sticky Menus
While sticky menus have been around for some time, they’re becoming more and more popular among fitness websites because of their ease of use.
They make it super simple to reach any page of a personal trainer website within a few clicks. This is especially important if you have a lot of menu items or a lot of pages for you website visitor to browse through.
Even if you don’t it’s still a nice touch that we almost always include in our website designs.
They make it super simple to reach any page of a personal trainer website within a few clicks. This is especially important if you have a lot of menu items or a lot of pages for you website visitor to browse through.
Even if you don’t it’s still a nice touch that we almost always include in our website designs.
7. Brutalism
Brutalism refers to a trend where website designers are adopting in your face tactics to make their sites stand out from the competition. There is a focus on creating a sense of aggression. Of course, critics are calling it a “bit too much”, but the tactic seems to be working.
It’s called “brutalism” because it started out as a reactionary approach to web design standardization. The style is characterized by design elements such as asymmetry, non-conforming visuals, zero order, and zero hierarchy.
Basically, you end up with a raw and rough design that may not be aesthetically pleasing, but will definitely be attention-grabbing.
Considering the fact that your potential clients are looking for information on your website, Brutalism may not be the best way to go.
It’s called “brutalism” because it started out as a reactionary approach to web design standardization. The style is characterized by design elements such as asymmetry, non-conforming visuals, zero order, and zero hierarchy.
Basically, you end up with a raw and rough design that may not be aesthetically pleasing, but will definitely be attention-grabbing.
Considering the fact that your potential clients are looking for information on your website, Brutalism may not be the best way to go.
8. Animated Elements
As technology continues to evolve, it’s becoming possible for websites to offer a lot more in terms of functionality and aesthetics. Earlier, website animations were flashy and in your face. In some cases, they didn’t even serve a purpose.
But, that’s not the case with animations now. Today’s animated elements are subtler and they also have a purpose behind them.
There are mainly two kinds of animation that are becoming the trend now.
The first is what we call “scroll-triggered animation”. This kind of animation is light in that it doesn’t affect browser performance or load time. Transitions are also easier to achieve. When applied with a little imagination, these animations can create a lot of visual interest.
More importantly, they can be used to communicate information about your services. Other than that, they definitely make your site look more attractive, which in turn adds some credibility to your site and makes your brand appear professional.
The second type of animation is a but heavier, much more expensive to create bit often very beautiful. They use parallax design and animated elements to create stories and show the insides of devices like cameras or cars.
But, that’s not the case with animations now. Today’s animated elements are subtler and they also have a purpose behind them.
There are mainly two kinds of animation that are becoming the trend now.
The first is what we call “scroll-triggered animation”. This kind of animation is light in that it doesn’t affect browser performance or load time. Transitions are also easier to achieve. When applied with a little imagination, these animations can create a lot of visual interest.
More importantly, they can be used to communicate information about your services. Other than that, they definitely make your site look more attractive, which in turn adds some credibility to your site and makes your brand appear professional.
The second type of animation is a but heavier, much more expensive to create bit often very beautiful. They use parallax design and animated elements to create stories and show the insides of devices like cameras or cars.
In Conclusion…
These are just a handful of the trends dominating web design today. Though not all of them might be applicable to your particular personal training website, it would be good to experiment with some of them to know what works for you.
