Responsive product list page design - new site
- Status: Open
- Prize: £150
- Entries Received: 12
*I'm looking for a design only at this stage, I'll post the build as a separate project. But do let me know if you can do both the design and build.*
The requirement is to design a product list page, which will have a list of cards where each card is one product. The 'products' on the website are 'trips' (road trip holidays).
The purpose of the list page is to inspire the customer to want to travel, as well as provide the details of the trips on offer.
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
- 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 (these can be shown as a placeholder as they're already designed)
I'm using Semantic UI ([login to view URL]) 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)
The attached images are examples of the kind of images to include on the card. The dimensions and aspect ratio can be changed to suit the design.
Please note this is not a WordPress site.