Designing my online store | Episode 5 of Designing a Website
Articles,  Blog

Designing my online store | Episode 5 of Designing a Website


– Hey designers! Welcome back to my
website redesign series. In the last video in the series, you saw me talk through
the design and build of the blog section of my site. And in this video, I’m
gonna take you through the design process that I went through for my online store. (upbeat music) So, as I do for pretty much
every web design project, I started this one out with
some wireframing on my iPad using the Concepts app,
and using my Apple pencil. These wireframes are
just very quick sketches to get my ideas down on paper and to force me to start
thinking about it, you know? Thinking about different
ways to arrange content. My challenge with designing
my online store is that, as you know already, I’m
using Webflow as the CMS and as like, the website builder and the way I’m posting it as well. Webflow’s e-commerce is a new feature that basically works kind of like its other CMS collection does. So, you saw this in my
video about the blog build, that basically you can make
whatever field you want and then you can bring it in in whatever way you want your design. So, because I can promote anything I want, I really wanted to challenge
myself to not make my store just look like any other online store. I wanted to try have a few
little special touches to it, and think outside the
regular online store template that we usually see. I will say there was a
few parts in my design that ended up on that do
look pretty similar to the regular like, you know, online store you’ve probably seen before. But that’s just because, I
mean it’s common for a reason. But yeah, there is some
special parts about it that I’m really pleased to come up with. And wireframing is
definitely one of the things that helped me break through this. These sketches are pretty, I mean, I don’t think they make
sense to anyone but me to be honest, but I
just wanted to show you, this is how my thought process
works when I’m designing. I think what might be better
to do is jump into Figma, and I’ll show you my gray box wireframes. So, let’s do that. Alright so, I spent most of my
time while I was wireframing on the store front, so what
will be charlimarie.com/store the main page. Because I think a lot of
the styles that I decide on for this will be brought
in throughout the rest, like this will set the tone
for it if you know what I mean. So, yeah, that’s why I
chose to focus on that. You’ve gotta start
somewhere, so it made sense to start with the store homepage. These are just a few
ideas that I put together, this was to have, like three
main categories at the moment, so like the three main categories
with an example from each, a sidebar, making more of
a feature out of one of the things in the category. The idea behind this one, this block here, was meant to be like a print
peeking up from the header, I’ve used that idea before
to do with software design in some of our ConvertKit learning pages, like peeking a laptop up
which looks kinda cool, thought a print could do that too. But yeah, ultimately the ideas I like most from these gray box wireframes was this idea, this like
masonry, of having the prints and the idea is that this bit
here would be a hover state that’s where you see the information. I liked that idea, I liked
this card idea with things overlapping and stuff, I
thought that was kind of cool. And the reason for all these
different gray boxes, as well, is that I thought – just
like I did in my blog if you saw the last video
– I assigned a color to each category, like topic
that I write about on my blog. And that color comes through
in the design of that thing, so I thought here, maybe, I
could have a color for each category in my store and it
would be like the background behind the prints. So yeah, those were the main ideas, I put a little star on
top of the ones that I thought I wanted to go further with. So I like the idea of
this: with having a photo, a block to like feature something. This was an idea for the product page, just tryna see how I’d
bring that in there, to have like the main thing
with an overlapping idea. Just like I did the “read
more” on my blog post, this would have like more
prints for you to look at. I liked the idea of using
photography in the top, like when I put a crossed
line like this in a wireframe for me it means that
that would be an image, it’s like my placeholder. But yeah, I did really like
this idea of the sidebar, the thick sidebar, ’cause
I have a sidebar on my blog and although this one is a bit different, the idea behind it, it’s
still the idea of having the thing over to the side,
so I thought maybe that could work out well. After drawing all these gray boxes out, I started going into filling
it in, putting color on it and seeing what worked. What I discovered pretty
quickly, if you look here at this photography idea, is
that I don’t really have the right photos of my
prints to make this, and I don’t want this to hold me up. Like, I don’t want my
store to have to rely on a beautiful hero image,
because I know that whenever I bring out new products, or even right now just to
get my store up and running, that would be a barrier for me. And basically, I just wanna
help myself out you know? And not design something that’s gonna increase the amount of work I have to do on the organization side of
taking photographs of my prints. It doesn’t seem like a good idea. Tried it in this bottom
idea as well but ultimately just didn’t really like it. This idea here which you can see, I don’t know if you can see,
matches… Where was it? This wireframe, you see
with the things poking out. I felt like it didn’t really work, like the way that I’m using
color here is kinda different to how I’ve used color
on the rest of my site, so it didn’t really fit. I liked these little cards here with the colored strip on
the side, I thought that was quite a cool way to
present the information. Tried that with the fixed
sidebar which is my favorite sort of concept, and it really
just doesn’t look as good as the prints do. So, I decided that this
one here was my winner for how I’m going to
design the store homepage. The idea is that this bit
here will stay fixed in place, and the prints will
scroll along next to it. Don’t quite know how
that will be built yet, but we will see. And then the idea is that
the color of each category of the prints, so like screen
prints the category is pink, so when you hover over it you see like a faded pink opacity
hover with the details. I liked the idea of that,
I think I can do something really cool with the interactions
with this pink overlay as well maybe it comes out,
fades in, I don’t know exactly yet, but there’s some cool
things I can do there. The next page to focus on, though, to bring the styling through
on is the category page. So I didn’t wanna have the fixed
sidebar on the whole store, I wanted to like be able to open it up once you’re out of the homepage. Again I like these product cards, but I really don’t think that
having a white background, no color blocks on the page works. It doesn’t fit with the rest of my site. So, here I bring in a top
navigation that’s purple which I think works
really well in this case. I wasn’t loving these cards
though with the strip, like something was just feeling
off like it didn’t quite fit once I bring in this color block though. I tried to color block these
cards, see how that worked. And I just really didn’t like
that, didn’t like that at all. Didn’t even finish filling
it out on the design ’cause I knew by the second row that it was gonna be a no-go for me. So, decided maybe I
should bring in the prints how they appear on the store front. That could be a good way
to like, have continuity. And I did like this, I went
with this for a long time but eventually decided that
once you’re off the homepage, like the purpose of the store
home is to make a splash, give you an idea of what type
of content’s inside the store, make you feel excited
to like dig in deeper and look closer at the products, you know? So I feel like this style
of arranging my prints does a good job of that on the home page, but once you’re deeper in you
just wanna see the information clearer, and I think
having to click on each one to see: the price, to see
if it’s a screen print or like what it is, that
might be kind of annoying. So I decided against doing
this for the category page for that reason, I just wanted
to make sure the information was displayed better up front. So, I decided to go with this. I think it’s what I settled on in the end. It’s an idea of those product
cards, just like back here, but without that strip at the side. I think without the strip at
the side it works a lot better and it fits better with the
whole design of my site. The next thing to design
was the product page, and as you had seen in my
wireframes, where was that one? This one here. This was the idea that I quite liked for displaying a main product,
like having that color block behind the print, offset, kind of like I’ve done with my blog posts. So this was my first
attempt at the product page. This was to kind of match the card with the strip at the
side idea, obviously. And yeah, something doesn’t feel right. Like it feels too box-y, I don’t know, with the header and then the gray box. These things kinda feel disjointed, like it doesn’t feel very cohesive. So what I moved onto, and
what I ended up liking, was using just a giant, big
block of color for the header and this would change depending on the category of the product, you know. Really like this, this is
what I think I’m settled on. Bringing the color in in this way is nice, and I think that makes my print stand out. I’m gonna have, like, an image carousel but instead of this popping
up in a light box or whatever, it’s gonna just swap
out here in the space, which I think will be nice. So underneath all that
product information, I’ve got this, kind of
like, more to check out bit. Just like “read more” in
the blog posts, you know. Here I bring in the
idea of the cards again, just like I did on the category page, so that’s some continuity there. It’ll just select three
at random, is my idea. And then you can always
click this button here to go and see all the products. Oh yeah, I kinda missed talking
about the menu a little bit. Let me just go into that. So, on the store front I
wanna have the categories available in a little menu at the side, so you can immediately –
first off – get to them, but also having them there
tells you what kind of things are in my store in an
easy list without me. I could write about it in a description, but your eye is probably
gonna be more drawn to a list of things. So, this would tell you what to expect, and also let you click
on each one and go to it. Obviously though, I also
want people to be able to navigate around to my regular website. So they can click the logo, is the idea, to go back to the homepage,
but also you’d be able to get to the blog, and other
things through it as well. And I wanted to keep that
separate from the menu of navigating through store categories. So I’ve put this up next to the cart, I feel like that seems
like a pretty good device that I could reuse throughout my site. So when it comes to this top
bar, this is repeated here. This will stay in the same
place from the homepage to the sub pages, which
I think will be nice and make it feel a bit more cohesive ’cause I am doing
something quite different with going from a fixed
sidebar to a top thing. And by using this drop
down, you’ll be able to get to my blog, my about page, contact. All of that good stuff, and
again it’s in the same place here just here the
background like blends in with the overall color of the page. I’m happy with this design. I think it’s gonna be good
for what I have right now, where I’m just selling prints
and also a notebook pack. I think in the future
I’ll have to rework it when I come to selling digital
products, things like that, because it’ll need a
slightly different design maybe slightly different
categories, and, you know, this design depends heavily on colors for different
categories, so I gotta be careful with how many different
categories I create. But yeah, I don’t know
when those future products will be coming, so I might
as well design something that suits me for right now and
the situation that I’m in. I think this design has callbacks to other things I’ve done on my
site, I think there’s enough in there that makes it feel cohesive. But, I also kind of like
that it does feel separate, like it does feel different
to the rest of my site because it is my store, right? So it’s kind of like a different part. As I’m designing my website,
that is an approach I’m taking in that I am designing each
section for the ideal way to represent the
information in that section. Like that’s the most important
thing, and tying in with the rest of the website
is secondary for me, because my website does
so many different things, well it will do once it’s all finished. Hope you enjoyed seeing this
and seeing my design process. Coming up: the next videos in
this series are going to be kind of like a mini series of their own, of showing you in depth
how I build out this design using Webflow’s e-commerce feature. It’s gonna be a series
sponsored by Webflow, this video isn’t but those ones will be, I hope that makes sense. Yeah, it’s a fairly new feature. It’s out on beta at the
time I’m recording this, but it’s gonna be live,
like, to the public soon. So if you’ve been wanting
to set up a website that also has a store, or I don’t know, maybe you’ve got clients
who need that from you as you’re designing and building for them then I think you’re gonna
find this really useful, to see me do it in depth,
and how all the functionality and all the features work. I’ve been working really
hard on this series, I’m very proud of it. I’m definitely looking
forward to you seeing it all when it’s released next week. So, stay tuned for that. Hope you have a good week, and I’ll see you in
the next set of videos! Alright, bye. (upbeat music)

19 Comments

  • mae

    Ever thought of making a webflow series snd selling it as a course in Udemy or gumroad?. I would definitely buy it.. am new to webflow thats the reason am asking..

    Great video..

    Cheers!

  • Cuban Nerd

    I'm really enjoying this. I've been working on my own re-branding and I've been thinking on creating videos of my process too but I haven't had the time to do so but seeing you do it is very encouraging.

  • VictorianSuperTiger

    When you're designing something like this do you also think about different viewports as in how would it work on a mobile device? I started with mobile first and while my app works on mobile, on desktop it looks a little too spacious. Btw, I love your content.

  • Raeann Cawkwell

    Hi new to the channel. Love your content, want to know what notepad you use to draft your ideas on of your website? I’m thinking about doing my own website for my YouTube channel and I could do with a notepad to plan my website idea down. I just love that you can move the page about with the drawing or writing on. Would help me. Thanks.

  • Max Weir

    Really liking Figma!!

    A few comments on the design so far:
    * For the purple strip on the homepage, is the left/right padding space intentional?
    * I didn't know until near the end of the video that the homepage categories were below the intro text, they are currently given less prominence over things such as social icons.
    * Do you think users will always know to click the logo to return home?
    * Does the various coloured buttons on the category page indicate a category colour?
    * The menu nav seems a little odd and I find out of place somehow in terms of knowing what it actually is and contains.

    I could see the concept of a user clicking on the large product image to go full screen with all images stacked. Similar to how some fashion sites showcase their clothing lines etc.

    Maybe the homepage purple strip becomes an off-canvas menu for inner pages? As it has good info available to the user throughout the store. Depends on what goes under the "Menu" nav and how important getting users to other sections of the site, could you combine that into the purple strip as a secondary nav?

  • Ravi D

    I enjoy watching your videos. Quick questions: 1. You will gonna code this by yourself? 2. Don't you think wireframing are easy on Axure or something like tools? P.S. I love Figma as well. I though away Sketch, Photoshop, and illustrator for UI Work once I found Figma.

  • Jean Augusto Costa

    Gosh, there's something being smashed at the background of your video (6:00 – 6:30 ), and my headphones had the bass booster turned on… That scared me for a solid minute hahaha

  • Tomáš Křičenský

    Good work, nice series of videos. I learned new things

    and someone else's practices. Thanks 😉

    All the best!!!

Leave a Reply

Your email address will not be published. Required fields are marked *