Hey everyone. Today
I want to show you how I made this website for my friend Sara,
including the design process in Figma and also vectorizing
some of her art to use on the website. I love to see other people's
design process, so I thought would be fun to give you a little peek into my process
But first, if you're new here. Hi, I'm Jen. I am a freelance web designer and artist. While you're still here, I'd love for you to help a fellow human out
and give this video a like. It's free and easy and quick. Okay, let's get into it. So first thing I do is I go to Pinterest
and I make a board for the website that I'm going to create,
and then I just gather a bunch of pins that I think
may fit the vibe of the website. So these are all very different.
Initially,
she had told me that she wanted something that was like kind of modern and minimal. But then she also wanted something
that was a little more artsy, artistic, because she wanted to include some of her
art on her website, too. So I also included some of these
more colorful artsy websites. in this case,
since I was working for a client, I invited her to collaborate on the board
and so she could see all of these pins and then she can come in and star
the ones that she really liked. I think that this is really key
when you're working with a client because they may use language
like I want something that's minimal or I want something
that's like modern or retro. And those those words can mean
different things to different people. You know, so think it's best to make sure
you're on the same page by seeing like, tangible examples So next I went into Illustrator
to work on the branding. I took screenshots of the websites from
Pinterest that she really resonated with and just put them in here for my reference
and also included some images that she shared with me that she kind of wanted
to match the vibe of for her website.
I like to keep them here in Illustrator
just as I'm working on branding, am not copying the designs,
but it's just to kind of like get quick reference
and quick ideas to try things out so I just put everything in one spot
right here so it's all easy for me to see, And then all of this stuff
is actually her art. So I used the image trace tool
in Illustrator to vectorize these images that she had given me
and remove the background so that I could use them
potentially in the website.
So next is kind of my favorite part,
which is trying out a bunch of different fonts
for her branding. And then I was also kind of trying
to make a logo like this. This was going to be her logo, so these are
the ones that I ended up liking the most. So then I created a few different
color palettes and then started creating different branding concepts. So just playing around with different
fonts and graphical elements And then I would just kind of copy
and paste the entire concept and change around the colors
and change the fonts and try new things. This is a really fun part of the process
for me. one of the tools I use to find different fonts
is this website called Word Mark.It. You enter in a text and then it shows you
all the different fonts that you have installed on your computer
so these are the different branding concepts
that I came up with initially. I then export of these and share them
with the client on Google Drive. So she was able to go in and comment on
the things that she liked and didn't like.
And using her feedback
I iterated a few more times and then ended up settling
on this one right here. So now that the branding is done,
I'll go into this program called Figma to start planning out
the design of the actual website. So I'll start by creating a frame
for the home page. I also like to have kind of a rough idea
of the site layout, And then I'll just start building out the website. So starting with a rectangle
for the background. and then working on the header. As I'm working in Figma,
my workspace is pretty messy. like to dump all the images
that I might use in here And then I also dump
a lot of text that I might use. So in this case, I actually had the client
fill out a form that I created with some questions that would help generate
some copy that I could use on the website. I also took some of the text from her old website
and dumped it in here to as I'm designing, I kind of have an idea of what
I want to include on the homepage.
And I'll just start throwing things down very roughly
And then I'll just iterate a lot. So I'll duplicate an entire design
and try one or two things differently. I might just duplicate a small section
just to quickly try out a new idea I had. Try things in different colors. I'll just keep iterating until I end up
with a design that I kind of like.
And then I'll move it over to a clean page
in Figma and share it with the client. In this case, I iterated a few more times in the clean page
before the client saw it, but then when she did,
she was able to go in and comment on the parts that she liked
and didn't like. And I took her feedback and came up
with one final iteration for the homepage. typically
I only design the homepage in Figma and then I build out the rest of the pages
directly in Squarespace. just kind of based on the styles
that I designed for the homepage. But in this case I also designed
the about page in Figma just because I wasn't really sure what to do with it. And I feel like figma is a really good way
for me to brainstorm and come up with new ideas.
So now that I'm done with the design in Figma, I can move on to building
the actual website in Squarespace. The client in this case
already had a Squarespace website, so all she had to do
was give me administrator access so that I could go into the back
end of her website and work on it. The first thing I always do with existing
websites is create an under-construction page
or a maintenance page And then I'll set the maintenance page
as the home page for the time being. Then I like to create a folder
or a dropdown To move all the old pages to just so
I can start fresh. And then I can start
creating the new pages.
So here I am editing the header,
replacing the site logo, and then I get started on matching the design
that I made in Figma in Squarespace. So I'm just constantly flipping back
and forth from Figma to Squarespace. exporting images out of Figma
and putting them in Squarespace, The latest version of Squarespace. Version 7.1 is a drag and drop
interface called Fluid Engine. So it makes it really easy to position
elements where you want them on the page. But there are times when there are certain
things we want to achieve that Squarespace doesn't
let us do right out of the box. in those cases, we need to use custom CSS. For example, here I had a gallery
that I wanted to add a little bit of space in between each of the images, but it didn't seem like there was a way to
do that in the settings for the gallery.
Instead, I use some CSS code to add a ten pixel margin
to each of the images. So I'm not going to spend time explaining
CSS in this video, but I'm thinking about making a video in the future
where I dive into that a little bit more. but if you're already familiar with CSS,
I just want to quickly mention this chrome plug in that has helped me immensely,
which is called Squarespace ID Finder.
And it basically just shows you
the IDs of all the elements on the page. so that you can easily copy and paste the ID and apply
custom styles to it in your CSS code. after I build out all the pages,
I'll swap over to Mobile View to make sure that the website
still looks good on a smaller screen. When we're editing the mobile version,
we can change the size of the blocks, We can rearrange them and it won't affect
the desktop version of the website. but if you change the contents of any
of the blocks or the styling of the block, then it will also update on the desktop
version. here, I wanted this text block
to be center aligned on the mobile version,
but left aligned in the desktop version.
Since we can't change the styling of one
without affecting the other, we can use CSS to get around this. Using media queries in CSS,
you can target specific screen sizes. So this allows me to make the text
box center aligned for a smaller screen and keep it
less aligned in the desktop version. And this is the final result. the client was really happy
with the way this turned out. And so was I, I think it's really fun
and playful and it's really cool that it has a lot of her
art incorporated into the design.
Let me know what you think about this website
in the comments below. Give me some design feedback. I'd love. I'd love to hear it. Also, let me know what
you think about this video. If it's something that you want to see
more of, definitely let me know. Thank you so much for watching this video
and I'll see you next time. Bye!.