5 Big Hotel Website Design Trends for 2018
April 12, 2018 11:18am
By Steffan Berelowitz
Web design trends rarely stay still for long. In 2018, we’re seeing some creative new ideas and a few reimagined versions of retro designs. In the hyper-competitive hotel industry, great design is especially crucial. Guests compare options quickly and judge hotels within seconds based on the look and feel of their website.
Great design instantly tells your potential customers they’re in the right place. It lets them know your hotel offers the kind of experience they’re looking for. But more than that, it has the ability to distinguish you from the crowd, and hint at the possibility that your hotel offers something unique and special.
So what design trends are big in 2018? In the following post, we’ll look at five examples and show you how hotels are applying these trends to make their own websites rise above the competition.
1. Attention-grabbing imagery
In 2018, websites are getting bold and brave with color. Using vibrant colors and saturated gradients is a useful tactic to grab attention for sites that lack engaging imagery. Lack of images isn’t really an issue for most hotels, but we are seeing some hotels becoming bolder when it comes to picking their hero image.
Instead of completely filling the homepage with photos of their property, a number of hotels are integrating or leading with lifestyle imagery and brand-driven photos.
When visitors land on the website of the ocean-side Beach Terrace Inn in Carlsbad, they’re instantly met by the sight of crashing blue waves.
This full-width hero image does a great job of instantly communicating one of the hotel’s standout features—an idyllic setting right beside the Pacific Ocean. The impact is powerful, evoking an instant feeling of tranquility and escapism.
In contrast, the homepage of the Padre Hotel in Bakersfield uses imagery to conjure up a playful-meets-sophisticated lifestyle.
Another photo features a swish hotel suite with a rose petal-scattered bathtub and bubbling bottle of Rose. These vibrant, lifestyle-focused images are clearly aimed at couples and intended to sell the experience of a romantic and stylish city break.
2. Embracing bold fonts (and bringing back serif)
Thanks to new web CSS protocols, it’s now possible to use a wide variety of fonts to really show off your hotel’s personality.
The minimalist sans-serif font has dominated in recent years, but designers are becoming more adventurous and choosing fonts that create an instant impression. In 2018, that means a greater use of big and bold font.
In the example above, the homepage of Opera House Hotel in New York goes supersized on its use of serif font. The typeface leaps off the page and gets all the focus ahead of the background image.
One of the other trends we’re seeing in 2018 is the return of serif fonts. This font had become synonymous with feeling slightly dated and stuffy. But as the flat design trend runs out of steam, designers are going back to the distinguished, off-the-page feel that serif font brings.
On the website of Hotel Abri in San Francisco, the classic feel of serif neatly reflects the property’s historic feel.
With its feeling of warmth and character, serif font can create a feeling of good old-fashioned values. Expect to see more and more websites using this style in 2018.
3. Broken grid layout
In web design, the grid is an invisible foundation used by designers to help plan where various elements are placed on the page. It’s used to ensure pages have a pleasing feeling of balance, and ensures a website has overall consistency.
But the grid can be broken. Why might doing this be a good idea? When the eye expects to see the same patterns, and then that pattern is broken, it can help grab attention. Used sparingly, breaking the grid can draw attention to a specific element on the page that you want your guests to look at.
In the example below, the website of Stanford Court illustrates how the grid can be broken to create more white space. This approach draws attention to the text, and it also helps to create a generally more open feel.
The Gale Hotel in Miami uses a more overt form of breaking the box. Here, a series of images overlay one another to create a stylized aesthetic that gives the page a more interesting visual feel.
Attention is particularly drawn to the (clickable) “Room & Suites” box, which frames imagery and text together. In this way, breaking the box can act as a conversion trigger by guiding the eye towards an area of the page that leads users deeper into the site.
New to the scene, brutalism is an unconventional approach that tears up the design rule book. Clean, light and ordered visuals are thrown out. Instead, brutalism is all about a disordered, chaotic style that goes against the mainstream principles you’d expect to see in a modern site.
The website of soon-to-be-open Angad Arts Hotel in St Louis, Missouri is a good example of how brutalism can be used. The icons below can all be clicked and expanded to reveal words, photos, videos and sketches that other users have uploaded to the hotel’s online “Stay Colorful” mural.
A colorful interactive tool allows visitors to leave their own mark on the site by creating their own drawings, typing out quotes, and uploading photos to leave on the site. The hotel will be the first in the world to not only let guests book by both room type, by also by the emotion of color. So this playful and abstract placeholder website is certainly in line with the hotel’s overall brand.
Obviously this approach will not be appropriate for a lot of hotels, but it does represent a striking design trend that when cleverly executed, can really set a website apart.
5. Non-distracting animation
There was a big trend in the 1990s for websites to feature brash and quirky animation. It all felt a lot of fun at first, but then it soon started to feel a bit over-the-top and garish. Thanks to CSS3 and jQuery, animation then become more subtle and refined, but there was still a tendency for it to be overused.
However, a form of “non-distracting” animation is starting to appear more frequently, often in the form of subtle hero videos.
On the website of Refinery Hotel in New York, the hero section features a slow motion video of a hotel guest strolling towards the window. It softly draws the eye into the scene, without feeling distracting.
It’s a perfect example of how animation can complement rather than dominate the supporting text and visuals.
The hero image on the website of SIXTY Hotels takes an even more restrained approach. A static camera shows black-and-white parasols fluttering in the breeze.
It calls to mind ideas of the beach, and poolside relaxation in a cleverly understated way. Again, this demonstrates how a less-is-more approach to animation can still effectively communicate a mood and message.
The power of great design
Hopefully the above examples have fired up your imagination and illustrated some of the latest trends you might want to replicate. By using the right images, typeface, animation and visuals, your hotel website can tell a story and sell an experience that goes beyond words on a page.
However, bear in mind that your website also needs to keep usability and user experience in mind. Great design shouldn’t just be used for the sake of it. So be sure that whatever design choices you make, they feel consistent with the style and ethos of your hotel.
hotel website design,
website design trends
Steffan is the VP of Digital Platforms at Travel Tripper. A pioneer in all things web and mobile, Steffan has spent more than 20 years in online services and technology. He loves traveling, the planet Earth, and his amazing wife and son. Contact him at firstname.lastname@example.org.
Beat the OTAs: Use Your Hotel Website to Tell a Unique Brand Story
How Artificial Intelligence Is Revolutionizing the Travel Industry
Consumers Want Amazon to Be a Travel Booking Site – What Can Hotels Learn?
Are Travelers Falling out of Love With Airbnb?
The State of SEO in 2018: What Hotels Need to Know
Understanding the True Cost of Distribution: Are You Leaving Money on the Table by Ignoring Your Direct Channel?
Is Your Hotel Selling Rooms or Experiences?
Revisiting Chat Apps: What Messaging Platforms Are Best for Your Hotel?
What Is Social Proof, and How Can You Use It on Your Hotel Website?
6 Hotel Booking Trends We’re Watching in 2018
The Importance of Data Transparency in Hotel Marketing
How to Encourage Guests to Write Hotel Reviews on TripAdvisor, Yelp, Google and Facebook
5 Ways Hotels Can Use Behavioral Economics to Improve Conversion Rates
New Hotel Booking Sites Take Advantage of Industry Loopholes
GDPR Countdown: How Will the New EU Data Protection Laws Affect Hotel Marketing?
HEBS Digital Wins Six Silver W3 Awards for Conversion-Focused Website Design and Technology, and Compelling Digital Creative
How Hotels Can Mitigate the Digital Impact of Natural Disasters
Boutique Hotels See Airbnb as Potential Distribution Channel
For the 4th Time, Milestone, Inc. Appears on the Inc. 5000 list, Ranking No. 4180 with Three-Year Sales Growth of 64%
Can I Repost That Photo on My Hotel Social Media Account?
Please login or register to post a comment.