Free PSD – City Break: must have UI Elements for a Hotel website

Published: Nov 12, 2014

We always come across beautifully designed hotel websites and we think to ourselves, someone must have really spent the time and designed this page from the pixel up. Similar to travel websites, as well as restaurant website design, the attention to the tiniest detail on these pages are quite amazing.

Download City Break PSD

Well our friends from Pixelkit are quite the artists themselves. And today, they would like to share their beautiful set of Hotel website elements known as “City Break“.

Flat and Modern

First thing you’ll notice is how modern this UI kit looks. As a matter of fact, your Hotel brand might look a bit outdated due to how sleek these components are. Take a look at the calendar below.

calendar

Keep in mind that a good hotel website will want to showcase the rooms in the most user friendly way possible. A good example would be a carousel-like container, where a single room is enclosed in each box.

carousel

A star rating as well as the price is neatly presented along with the number of rooms left. Quite a nice touch don’t you think?

Typography, Icons and Color Scheme

Graphs and charts maybe a bit far-fetched, but it’s included in the kit anyways. Take a look at nice green border right above the div.

graph

digitalocean bannerblank

A tabbed section is always useful regardless of the site you’re building. In our case, hotels can always use it for promotional items, events and such. Similar to the image below.

tabbed-containers

Speaking of tabbed containers, once you got your design from this template – find this tutorial and learn how to create easy tabbed containers.

video-player

Finally, a video container can house virtual tours, interviews, even a quick presentation of what your hotel is all about.

So what are you waiting for? Did we mention this package is a completely free? Again, the complete set can be downloaded for a small fee. Take a look at Pixelkit and find more graphic design elements at the highest quality.

Download City Break PSD

Don’t forget to leave your comments below. Maybe let us know how you’ve integrated City Break into your project. Maybe a link to your live site. Or just a simple “Thank you” to the guys at Pixelkit. Happy designing!

This article is written by Michael Soriano. Michael is a Front End Developer based in La Crescenta California. He specializes in CSS, JavaScript and UI. When not developing sites, Michael likes to play handyman and wrestles his kids.