Blog 3 Pt. III

3. Create a series of low/medium fidelity wireframes for the main pages of the web site.  This should include at the very least, the web site’s home page, a content page and a navigation (or search page).  (Refer to Morville Chapter 12 for how to create wireframes.)

We will now look at wireframes of each of the different site pages and how they will (preliminary) laid out and arranged. These are the wireframes for the following pages: Flight Booking, Car Hire Booking, Cruise Booking, Hotel Booking, Contact Us, Customer Reviews, Insurance Information and Signing Up. When considering these wireframes, note the consistency throughout and the visual appeal the site provides to its users.

The site will be compatible in all browsers though it must be noted the site is optimized for desktop browsing and is not yet catered directly to mobile users. These are again, prototype pages not reflecting precisely how the pages will be laid out. Simply click on any of these images in order to see a full sized copy of the respective image.

Book Sketch

Flight Page: This page enables users to check available flights and then book and purchase tickets. The page utilities drop dead menus and traditional user input with each component of the site being correctly labelled for indexing and readability purposes.

  Cruise2

Cruise Page: Similar the the flights page, this page enables users to check what cruises are able to be booked in a designated time-frame. Once selected, a description is generated containing all of the details regarding that cruise. The details are entered following that and once submitted via the “Book Now”, the booking is either made or the user directed to the Log-In / Sign Up page. Note the use of available screen real estate and consistency with the Car Hire and Hotel bookings pages.

Contact Sketch

Contact Page: Listed on this page are the details in the event users wish to contact the agency via the described methods. This will be presented in plain text with a large and clear font size as well as being positioned in the center of the screen again, for readability. In addition to this plain text, a submission box is presented allowing the users if they desire, to contact the agency via email directly without the use of third party software (i.e Microsoft Outlook, Gmail Clients)

CarHire

Car Hire Page: The car hire page is structured very closely to the cruise line booking, with the exact same generating content based of user selected though with a different set of details entered.

Customer Review

Customer Reviews Page: The review page is kept intentionally simple as it allows the user to focus on the content they intend to submit. Cluttering the page with unnecessary data and features would only impact the site and associated reviews negatively. Presented on the page are a scrollable area displaying the previous testimonials, a  text-input box with a scrollable bar (if the text exceed the designated length) with a name box and submission box.

Group Sketch

Group Page: The group page is structurally differently to the other website sections as it is exclusively a content-presentation page. The page will only show details (updated regularly) of current group specials, using both text and imagery. Online group booking could be potentially problematic as each passenger of the group may require different schedules and itineraries.

Home Sketch

Home Page: Presented to the users upon opening this sitel, with the exception of the site template, it greatly differs from the other pages. It is divided into four separate sections with current specials (Groups, Flights, Cruises, Hotels, etc), a travel video tailored specifically to the site, imagery tailored specifically to the site and a History and About Us regarding the company and agency.

Hotel Sketch

Hotel Page: Designed in a similar fashion to the Cruise/Car hire pages with only the booking specific details differing (i.e. Suite Type). Again content is generated based off the users selected from the list, the list is generated based off the data inputted on the left hand side of the page (Country, Town, State).

Insurance Sketch

Insurance Page:  Divided into two sections, the first component provides a list of suitable agencies and the estimated pricing per passenger while the second component describes why a user should invest in insurance despite it not actually being needed in order to travel.

Sign Up

Sign Up / Login: Divided into two segments, which the user selects based on whether or not if they have an existing account the user enters requested information (DOB, Name, etc) and then submits the information and checks either the registers database to see if they have an account registered or create an account and add it to the database.

Below is a sample of what the websites home page will look like once correctly coded, uploaded then viewed in a desktop browser.

Sample of the Home page (index.html) when viewed

Sample of the Home page (index.html) when viewed

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: