The design is for a section of a new website. The 'products' on the website are 'trips' (road trip holidays).
The requirement is to design a product list page, which will have a list of cards where each card is one trip.
Each card will need to display the following information:
- Image 1: destination photo
- Image 2: vehicle photo
- Image 3: trip route - google map image
- Destination (town, country) e.g. Bled, Slovenia
- Date (day, month, year) e.g. 23 August 2019
- Total distance, one way (miles) e.g. 1,876 miles
- Total driving time, one way (miles) e.g. 18 hours
- Total trip duration range (days or weeks) e.g. 4 - 6 weeks
- Total cost (£) e.g. £500
- Cost per night (£) e.g. From £11/night
- Call to action/button to view the detail page
Other elements on the page:
- Pagination controls
- 3 x filters with labels:
> Distance from pickup (up to XX miles)
> Total trip duration (min weeks, max weeks)
> Date range (earliest start date, latest finish date)
- Header & footer (show these as a placeholder as they're already designed)
I'm using Semantic UI (https://semantic-ui.com/) as the framework for the front end, so the design should use the elements available in Semantic UI.
Will need a mobile version (up to 700px) and desktop version (> 700px)
Copyright © 2019 | Truelancer.com