I’ll walk you through these changes and how they are impacting us at Digerati Solutions on the design front.
1. Cinematic Design – LET’S MAKE IT BIG
You want to make a splash with your website – you want to be extremely visual with people being able to see what your site is about. One of the first trends that we are seeing is a cinematic influence. Think big – like Lord of the Rings BIG. Like Harry Potter BIG, like Ed Sheeran is singing at your wedding BIG… Okay, maybe not that far but you get it.This usually consists of either a video or an image spanning the full width of your screen. The image gives you a feel for who they are and what they do, and they might have only one or two sentances to exhance the experience.
Think a Movie Trailer. Think, being at the cinemas only - you're not! You’re on your ipad, you’re on your desktop. You’re laying in bed scrolling through your phone before you go to sleep.
The trend is both visual as well as pragmatic- this gives users the maximum impact as soon as they land on your site. It is easier to code and works really well on mobile and desktop devices.
What does this look like?
A good example of this is Airbnb.
But don't just rely on a screen shot - go take a look... www.airbnb.com
The slow moving videos, the simple text like "Welcome home" or "Belong Anywhere" make you feel something. I feel calm, at ease and trusting - and that's exactly what you want to feel when you're travelling to a foreign city!
2. The Parallax Effect
The Parrallax effect is a classic example of how the old can be new again. It has evolved in many different mutations but it has one thing in common – designers use page scrolling or mouse movement to animate elements or properties of the page.Sometimes this makes websites more fun and quirky, and other times it’s used to add mood and ‘depth’ to a 2D website.
Here at Digerati we did something just like this with Blue Mountain Camp. As you scroll, it takes you through the different experiences and features, taking you on a journey. It's a site to experience and explore, not simply just get what you need in under 3 seconds.
Visit the Blue Mountains website
Here is some other great examples of the Parallax Effect in full swing -
Here is some other great examples of the Parallax Effect in full swing -
3. Long Scrolling sites
As more and more users are getting used to flicking up and down on their phones, websites are getting looooonger... In past days, every client asked me to ensure their website 'fit on the screen' or we discussed how the most important content had to be 'above the fold'. Now, while some of this rings true, most websites we're designing are a version of a long scroll. Still the most important message or call to action is 'above the fold' (or sitting in plain view when people first land on the site), the experience of the website happens as people scroll down the homepage.
The great thing about this 2015 trend is that you have the opportunity to communicate more and communicate it more creatively on your homepage. You can give adequate room and white-space to content that gives it a renewed level of importance and beauty.
Apple did this well when they launched the iPhone 6.
Visit the iPhone 6 website to get the full experience - www.apple.com/au/iphone-6/
FORGET THE BOXES. We aren’t playing a game of Tetris here people! This is your website, we want you to experience everything that we can offer VISUALLY. As all the websites above have shown, creativity across the entire screen is the new approach to web design.
Web designers love to show how they think outside the box – and World of Swiss is a great example of how designers have done this.
Their site makes you feel like you are LITERALLY flying across the Swiss Alps, your destination – who knows! I’m too busy flying through the site! This is great fun!
Actually, you are flying through all the information that SWISS has to offer. It’s fun, it’s engaging and unless you don’t like flying, it's plays off your curiosity as you explore all it has to offer visually.
Visit and experience the World of Swiss - www.world-of-swiss.com/en
5. Split Screens
Vertical breaks are another trend we're seeing, where the full screen width is divided by two sets of content. This is ideal for companies who have two valuable products or services that they want to promote, where neither is more important than the other.
For example, an online store selling two distinct products or to two distinct target markets could utilise this technique to ensure each gets the 'screen time' it deserves.
For example, The Iconic. The first feature on their homepage is: Shop Women / Shop Men.
Or, visit the live Iconic website - www.theiconic.com.au
6. Hidden Menus
This is the Ghostbusters of cool. This trend that has been appearing in some of the top websites over the last 6 months.This is where menus are not your standard list across the top of the page with drop down, now they spend their time hiding behind buttons or tabs. The menu is only revealed when the mouse hovered over the icon or clicked. This is a fun and interactive way for users to search through a website.
This is the outcome of 'mobile first' design - where the first design consideration is; 'what will this site look like on mobile and how can we maximise the user experience (UX) here?' Mobile web browsing has resulted in the birth and growth of the "Hamburger Menu" or the "Kebab Menu" as we affectionately call them (aka, the three lines and the three dots). And now, we see these on desktop websites too.
Hillsong do this across their sites, with a mega-menu that drops down when clicked.
Hillsong do this across their sites, with a mega-menu that drops down when clicked.
See the menu in action - hillsong.com
7. Very large typography
Large typography is a great way to attract your audience’s attention because it’s eye catching. It allows you to clearly communicate your key message or call to action. It also commands the audiences attention and becomes a design feature all on its own.Tiny Giant have nailed this where they use large typography to engage you before your eye wanders anywhere else.
See the live site - madebytinygiant.com
8. Ghost Buttons
What are ghost buttons one may ask? Ghost buttons are buttons that attract your attention but in subtle way. They are often transparent, 'flat', have a recognisable shape, are bordered with a very thin line and contain light san serif fonts.It is a call to action button that isn't too invasive and over the top.
It is neat.
It is classy.
It’s the James bond of buttons. Not too distracting but once you see them, you want to click.
Remember the iconic homepage?
These are great examples of ghost buttons.
Ditto with the Hillsong Store homepage - see the 'Buy Now' button?
Conclusion
So that's what we're seeing on modern and beautiful sites in 2015. No doubt these fun, sleek, interactive and user friendly features making their way onto more and more sites, and eventually onto yours!Don’t be afraid of the bold changes, embrace them! Because in the end, the web is always changing, and next year, we'll be onto the next stage of website design.
