Example Webflow/Sketch Case Study - Clone of Memberspace Memberspace Toolbox

Hello and welcome to a new series called "Project Overview." In this series, I'll show you some of my personal projects and some of the client work I'm allowed to share. I'll also give you a behind-the-scenes look at my design process and how I code in Webflow. In the first video of this series, I'll be showing you a project I worked on with the guys from MemberSpace called "Membership Toolbox." This website is a comprehensive list of resources and third-party apps to help manage and grow your online business. The site is split into 14 categories, from CMS automation to social marketing to affiliate tools, and more. I'll leave a link to the site in the description.

In this video, I'll show you the design process for this project. Since the project is quite simple, the design consists of two slightly different layouts: one for the homepage and one for the categories. The design process was broken down into three reviews. In the first review, we explored different kinds of widgets, the categories, and played around with the header design. We ended up going with a mosaic header, which was the most fun part of the process.

Next, I'll show you how I designed the project. I usually design everything on an 1140 pixel grid with a gutter width of 30. I also use a 12-column grid for everything, which works out nicely in the final product. As you can see, the homepage has a grid of categories and different kinds of widgets. I created multiple options for the client to choose from, and we ended up going with two columns for the widgets because it provided the most space for the copy.

In the second review, we played around with more options for the categories and the header. We explored different color schemes for the navigation and added banners to the design. Since the majority of the site was plain white, we decided to add color to the navigation to add visual interest.

Finally, in the third review, we fine-tuned the design and added the final touches. We added hover effects to the widgets and refined the color scheme for the navigation. We also added some animations and transitions to make the design more dynamic.

And that's it for the design process of this project. I hope you enjoyed getting a behind-the-scenes look at how I work. Stay tuned for the next video in this series where I'll show you how I coded the project in Webflow. Thanks for watching!

‍