I discovered at the beginning of this week that the WWD Academy has a new design brief each month to help the members build their portfolio and selection of template sites. Today was a review of projects for the April brief, so I had just enough time to create a design. I love how it came out.
The Design Brief
Brief: Boutique Hotel Home Page
You’re designing a home page for Villa Marea, a boutique hotel nestled along the Amalfi Coast known for its lemon groves, cliffside views, and la dolce vita energy.
Here’s what you need to know:
Client: Couples and luxury travelers 30–55, looking for intimate Mediterranean escapes over crowded resorts, they book based on beauty, charm, and experience
Branding: You decide
Sections: Hero with tagline, Rooms & Suites gallery, Experience highlights (seaside dining, private boat tours, wine tastings), Guest Testimonials, and a Book Your Stay CTA with date selector
Vibe: Romantic, sun-soaked, feels like a love letter to the Italian coast, effortlessly luxurious without trying too hard
Timeline: Design throughout April with a live review during Office Hours on Thursday May 7th.
How I Started
The 1st thing that I did after reading the brief was pop over to Pinterest and create myself a mood board, which I was able to use to determine my branding for the Villa Marea.
The Site
The branding decisions made, I spent some time sourcing royalty-free images to use in my sample template. It took some time, but I was able to get images that worked well with my theme.
Then it was time to start designing. The Villa Marea site was built in ShowIt and will be available in my template store once I get it set up.
I always start the web design process by setting my design information. I set my typography (available thru Google Fonts) for the site, then moved to setting the template colors using the color palette I laid out in my design board, and setting up the design for primary and secondary buttons on the site.
That completed it was time to start designing. I usually like to start out with a blank sectioned template. That way the basic framework for the homepage is already set up. That template gives me a banner across the top, a hero image for the homepage, a mini about section, testimonials, footer, policy section, and pop-up menu to start from. It’s a lot, so having the base prepared with global sections makes quick work.
From there, I also added a couple of global sections for hotel rooms and suites with sliding galleries that fit with the theme of the website. And a section about experiences available in Amalfi.
Once I was happy with the home page, I copied it over and renamed it a few times to give myself pages about experiencing Amalfi, the hotel rooms, and a booking page, switching out the about and experience sections with appropriate content for the page.
