Med Spa Gallery gets a much needed facelift
Our friends at Age Perfectly were unhappy with their current gallery page design, and it’s clear to see why. The page is currently slow, and has a poor design scheme / layout. Let’s see what we can do with a redesign here.
October 10 - November 30, 2021
Time to completion - 10 hours
Add a way for the user to know what the “before” image is, and what the “after” image is
Compress all images before uploading to site
Ensure all images are constrained to the same aspect ratio on the frontend for consistency
In Progress
Web Development
UX / UI Design
Our process
Here's what we did
Progress update
Created the new page by duplicating the current one and changing the url by adding a -redesigned to it. I then removed all the sections and added a new section with the Poppins font for the title.
For the comparison images themselves, at first I was going to use a JavaScript library and code it out myself, but in the end I found a good free Divi extension that lets us do exactly that. Once I set up the comparison images, I needed to put it on a carousel.
Because of Divi’s limitations, I used the flickity.js JavaScript library to build the carousel by changing each row into an element on the carousel / slider.
Our Goals
- Use a “reusable” component design scheme to improve the pages overall look and feel.
- Find a way to improve the page speed while having a page that is very heavy with images.
- Create a template page that we can show the client as “what” the gallery page can look like. From there, we will build the page to client specs.
Progress update
The last section didn’t have a title so I went ahead and added all important titles.
The images were pretty close to square sizes, so I compressed and uploaded those for now so we can make adjustments to images that look off after.
Would it make sense to offer the customer the ability to click on the image to see it in full resolution with the before & after slider? We'll see!
Our Goals
- Use the primary font family ( roboto ) that is already on the website for the header and paragraph text.
- Add all categories that are currently available on the gallery page, in their proper order.
- Add and organize the images that were provided in the zip file.
OUR TEAM
Participated in the project
Portfolio Images
Here's how it came out
Hover the gallery images to scroll their pages!
testimonial
What the Customer thinks
Still in progress!
Interested in collaborating?
We work with your team on projects that have a clearly defined brief, budget, and start/end date.