EmmaShopt.com

A lot of people on the internet had the feeling that they were supposed to create something cool during the pandemic. Since buying from small businesses was very popular at the time, and my heart lies in gift-giving, it only felt right to do something with those two topics. Besides, I had only built a website with WordPress and Elementor before. I wanted to try something new.

The EmmaShopt.com website was only live for a couple of months - mainly because I got a bit bored with it, but also because a Webflow subscription is quite expensive if you don't plan on doing anything serious with your site.

The Idea of Emma Shopt

The idea of the Emma Shopt website was that it should be place where people could find small businesses to shop from. It would have a database with small retail businesses and a filtering system so you could be more specific about what you were looking for. The website would also be a resource for gift ideas and tips on how to shop more sustainably.

Note that I am very aware that not buying new stuff is always the most sustainable choice, but since we as a society are quite far from abstaining (TODO: FIND OTHER WORD) shopping as whole, there must be some middle ground. The entire notion of criticizing people who are vegan but also have a pair of leather boots should stop. Let people try. Let people do their best for 50%, or 10%. Whatever fits their needs. A little bit is far more than doing nothing.

Back to the website. The idea was that the website should consist of the following things:

• A homepage with several components such as the most popular small businesses, the most recent blogposts and links to other pages on the website
• A database in which the user should be able to filter on one or multiple categories (this is the part that I found the hardest)
• A blog page with blog posts
• A gift guide page with gift guides specific for different people: such as your mom, partner or best friend

Designing in Figma

I am a big fan of Figma and have used it to design other creative projects before. For this project, I started by creating a wireframe. A wireframe is a blueprint of the design of your website. I created a low-fideltiy wireframe (the sketch focused on the general layout) and a high-fidelity wireframe (which includes the colors, images and fonts that I actually wanted to use on the website).

Developing in Webflow

TODO: ADD MORE HERE

There are plugins to transform your Figma wireframe to your Webflow project.

Because of all the customization options of the components, you get to learn a lot about website design concepts. For example, concepts like z-index, margin or padding and flexboxes. Most of these design customizations are also accessible in ELementor, but because I didn't feel like I got to be very creative in the builder, I didn't make much use of it.

I didn't really like the CMS in Webflow. The process didn't feel natural or intuitive. I would actually prefer the Wordpress CMS workflow, where I would create blog posts in the Gutenberg builder (TODO: CHECK THIS). On the other hand, I did learn a lot about how to loop over CMS items and (TODO: ADD MORE).

In terms of additional features, I added Google Analytics to my website. But it was really confusing to me how to set up a correct cookie component that would actually function properly. Since I'm in Europe, I have to comply to the privacy rules in the EU.

Learnings

// TODO: ADD MORE

If you're a student, then you get a one-year Webflow CMS subscription for free. This would be a cool opportunity to learn more about creating websites and being really creative with your designs for a portfolio, for example. However, do be aware that the subscription fee is relatively high, so if you're very happy with your portfolio you might have to pay that.