Website Design
This was a project through OpenClassroom. The project objective was to create a website for a furniture company. One of the main objectives was for the website to have a signup form.
Key attributes of the website include:
- A sleek and professional design following the style guide.
- It works well on all devices, offering a smooth experience.
- There’s a section for customer testimonials.
- A simple footer menu for essential information.
- A clear “call” button for mobile users.
- Easy-to-use shopping cart and checkout pages.
- All the images were made by Midjourney.
Table of content
- Images
- Sign up form
- Header and footer
- Product page
- Shop page
- Color swatches
Images
All of the images on the website were generated using Midjourney.
Sign up form
The requirements for the sign-up form from OpenClassroom were: it has to be able to collect basic information like name and email, and it has to have an opt-in option.
I made the sign-up form for free using a plugin called Hustle.
Header and footer
For the header and footer, I build them using Elementor Header and Footer Builder.
I made two headers, one which is transparent for the home page, and another which is with a white background for all of the other pages.
Product page
The default product page that comes with WooCommerce wasn’t going to get the job done, it came with too many unnecessary distractions that would interrupt the buying process:
a category section above the product name, adding items to favorites, comparing items, SKU, and related products.
I made a new product page template using a free plugin called ShopEngine, I removed all of the distractions and improved the appearance of the page. Another option would be Elementor Pro, but I’m doing this on a budget.
Color swatches
ShopEngine didn’t let me add nice-looking color swatches, the option that they gave me wasn’t good enough. So I installed another free plugin called Variation Swatches for WooCommerce.
Below you can see pictures of the before and after.
Shop page
Similar to the product page, the default shop page didn’t look good so I changed it using ShopEngine. Removing a lot of things that were not necessary and keeping the important things.