30 Mar 2017
Wanderer is personal project to design a landing page for a travel website. The design was made keeping in mind that the website is modern and responsive. Content element design aims for modularity and reusability.
Wireframes, Thought Process and Reasoning
The primary motive of the page is to present content. In this case, the content to be presented is a particular region or area and the best way to showcase a region is through photographs. Thus, in the top-most section of the page is a high-definition photograph of Bavaria with floating text on top of it as the introduction.
Now that the area has been introduced to the user, the most relevant content are the available offers from Wanderer in this area.
- Each offer is identified by a square which will provide information about the offer. These squares are modular elements which will be reused in other forms and queries through the rest of the page.
- Each offer square has a picture as the background of the square and a rectangular overlay at the bottom.
- This overlay provides the name of the hotel, the rating (number of stars) and the price per person.
- On mouse-hover over on any of the squares, further information about the offer will be provided. Through interactions like this, the user spends more time exploring the offers, hovering over and comparing them.
- Information is provided by filling up the entire square; text is animated into the square, picture in the background is zoomed in.
- At the end of the offers is a “See More” button which loads more available offers
- The squares in this section are the largest, signifying their relevance. The squares are animated on load; a subtle combination of ease-in + fade-in from the bottom.
There is no dedicated content section. Too much information in one section of a page is redundant, and the user more often than not will avoid reading it then. Instead information needs to be spread out across the page in a visually meaningful manner.
- Testimonial section is followed after the offers, giving the user a quick glimpse about what others have said about the places to visit in this area, what is good and what not.
- The testimonials load one after another as a slider, with a picture of the person, their name and the review. The direction of the slider is from right to left.
- The next section shows related content pages listing 3 cities popular in the region of Bavaria. These are smaller squares, indicating their priority of relevance.
- Similar to the squares before, these have the option to show a short description of the city on mouse-hover as well. This section is meant to take the user ahead to more relevant pages of the site.
- On mouse-hover, text is animated within the square and picture is zoomed in.
- The on-load animation on them is similar to the squares before, they ease-in from the bottom.
- Below the cities is the editorial content, presented to the user in form of questions and answer with an accompanying picture.
- These come into the page with the picture easing in from the left and right alternatively and the text fading in once the picture has come into the page.
- The last section of the page is a list of pages that will take the user to other parts of the website. These could be other regions / areas within Germany / Europe or other cities.
- They are the smallest squares signifying their least importance.
- On mouse-hover, there is an animation where the text of the square is enlarged and the picture is zoomed in.
- Since these are the smallest squares and don’t have enough space, they do not show extra information about the pages linked to them.
- Lastly is the footer section with social media links, and website information.