Beyond The Hills: Website Design + Branding Tools

This image has an empty alt attribute; its file name is kbross_web-design-2.png

As soon as a user enters a site, they will know right away whether or not they want to stay. Although they may not be able to put their finger on it, a good designer knows exactly what draws a user in. Today, I will discuss how I applied many of these elements to the website for the travel agency, Beyond The Hills.

BRANDING AND LOGO DESIGN

Users love a name they can remember. For this company, I chose a fitting font called The Hills. Whenever anyone sees this, they immediately think posh, Hollywood life. The colors are bright and playful and complement the colors of the photos included very well. Visually, this site is very appealing for the user. It’s also important that branding is pulled through the entire site. Colors, shapes and fonts should be consistent everywhere.

EYE-CATCHING IMAGES AND SITE NAVIGATION

Visuals are everything. The images featured on the homepage are good quality and unique. They represent the kind of experience we want our user to have. When they see these, we want them to be curious enough to search around a little bit more. On top of that, this site features a clear navigation tab located at the top of the page for easy access at any point in their visit. I also included contact information so that if they have any questions or concerns at any time, they will be able to know how to reach the company.

CALL OUT YOUR USER

Strong call-to-action buttons will draw your user in. You want them to be interested and dig deeper into your site. Here, I used “Book Now” to take the user straight to booking their trip. This simple button is placed as one of the first things users will come across. On the right side, I include a call-to-action that leads users to our blog. “Follow Our Travels” will prompt the user to ask themselves, “Well, where are they going? Maybe I should go there too.”

RESPONSIVE DESIGN

Responsive design is “a graphic user interface (GUI) design approach used to create content that adjusts smoothly to various screen sizes” (Interaction Design Foundation). Since many people use a multitude of devices to access the internet, your site should be able to look aesthetically pleasing whether it’s viewed on a desktop or the smallest of iPhones. Here is a mobile version of the site:

This image has an empty alt attribute; its file name is kbross_mobile-deisgn-1.png

It includes all important information while eliminating items that would just be considered clutter. The navigation menu has been collapsed into a hamburger menu, which the user can easily access by selecting the icon. The message and call-to-action button still live at the top of the page and the button size of “Book Now” has been enlarged so a user won’t struggle with pressing it. Changing simple things could make all the difference on a smaller screen.

Along with this, I’ve created a travel brochure made to be distributed as printed materials.

Cox, Lindsay Kolowich. “The Anatomy of a Winning Website Design [Infographic].” HubSpot Blog, blog.hubspot.com/marketing/anatomy-web-design.

Koetsier, John. “5 Tips for Creating Great Mobile App User Interfaces.” VentureBeat, VentureBeat, 12 Dec. 2018, venturebeat.com/2013/04/08/5-tips-for-creating-great-mobile-app-user-interfaces/.

“What Is Responsive Design?” The Interaction Design Foundation, http://www.interaction-design.org/literature/topics/responsive-design.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: