Website Design & Coding
Design and code a fully functional website that features Sedona, Arizona as a destination getaway. It is designed with white backgrounds and muted natural colors to create a calm and serene feeling.
Homepage, viewed on desktop
Background
Traveling and going on vacation is fun, but it can be challenging to figure out where to go and to plan the trip. It can be even more daunting if you’re not a frequent traveler.
Getaways focuses on places that are easier to get around and have options for easy or guided excursions. It is the ideal trip planning website for women seeking a getaway trip with a close friend or teenage daughter, where they can relax, enjoy some beautiful scenery, and experience something new.
The website focuses on the main components of trip planning: where to stay, where to eat, and what to do there (sights, hiking, shopping). It offers a curated selection to quickly give its viewers a feel for what the trip might be like for them. It stays away from being an exhaustive list because too many options can be overwhelming when trying to trip plan.
Where to Stay, viewed on iPad
The “Where to Eat” website page is designed to have an image carousel (where you click on the arrows to see the next restaurant) and scrolling text (where you scroll down to read more about the restaurants).
The “Sights of Sedona” website page (below) features embedded videos (to watch a short clip about the activity) and accordion text (where you click on the activity name to learn more).
The “Hiking Trails” website page (below) features sortable tables. (Click on the header to sort in ascending or descending order.)
Website page with embedded videos and accordion text
Website page with sortable table, in ascending or descending order
Mobile responsive design
Thumbnails with lightbox effect
Design Process
The website design started with simple sketches for general concepts, then wireframes (in black and white) to generate and test concepts for desktop and mobile screens. Next were mockups, with color images and actual text, before proceeding to coding and testing the website in HTML & CSS.
Software: HTML5, CSS3, InDesign
Wireframe for homepage
Mobile view for homepage and menu
Wireframe for image carousel and scrolling text area
Wireframe for mobile view
Wireframe
Website page with thumbnail images
Lightbox effect, when thumbnail image clicked