Design with Me: My Full Web Design Process Using Figma & Squarespace

Creating a website that seamlessly combines modern design with artistic flair is a challenge many web designers relish. Today, I’ll walk you through how I accomplished this for my friend Sara, using Figma for the design process and Squarespace to bring it all to life. This journey involved everything from brainstorming on Pinterest to vectorizing her art and finally launching a site that truly reflects her unique style. If you love watching design processes unfold or are looking for tips to enhance your web design workflow, this is for you.

But before we dive in, if you’re new here, welcome! I’m Jen, a freelance web designer and artist. While you’re here, I’d appreciate it if you could give this video a like—it’s quick, easy, and it helps me out a lot. Now, let’s jump into the creative process!

Step 1: Inspiration Gathering with Pinterest

The first step in my web design process is always gathering inspiration, and for that, Pinterest is my go-to tool. For Sara’s website, I started by creating a dedicated board where I pinned images that I thought might capture the vibe she was looking for. Sara initially wanted a modern, minimalistic website, but she also wanted to showcase her art, which required a touch of creativity and color. To accommodate these diverse requirements, I included a mix of modern, minimalistic designs as well as some more artistic and colorful examples.

Because Sara was my client, I invited her to collaborate on the Pinterest board. This allowed her to review the pins and star the ones she liked most. This collaborative step is crucial when working with clients, as terms like “modern” or “artistic” can mean different things to different people. By seeing tangible examples, we were able to ensure that we were on the same page regarding the direction of the website.

Step 2: Branding and Visual Identity in Adobe Illustrator

With a clear idea of Sara’s preferences, I moved on to developing the branding in Adobe Illustrator. This stage involved a lot of experimentation with colors, fonts, and graphical elements. To maintain a cohesive design, I took screenshots of the websites that Sara liked from our Pinterest board and placed them in my Illustrator workspace. These served as visual references, helping me align my design choices with Sara’s vision.

However, these references were not for copying; they were more like mood boards to inspire creativity. Alongside these, I also included some of Sara’s own artwork, which I had vectorized using Illustrator’s Image Trace tool. This tool is fantastic for converting raster images into scalable vector graphics, which are essential for maintaining quality across different screen sizes.

Step 3: Font Exploration and Logo Design

One of my favorite parts of the web design process is font exploration. Fonts can dramatically change the feel of a website, so I spent considerable time trying out various options for Sara’s branding. I used a handy tool called WordMark.it, which allows you to preview any text with all the fonts installed on your computer. This made it easy to quickly compare different typefaces and narrow down my choices.

As I tested different fonts, I also started working on a logo design. The goal was to create a logo that was simple yet reflective of Sara’s artistic style. After experimenting with a few different concepts, I came up with a few that I liked and presented them to Sara for feedback. Her input was invaluable, leading to a final design that both of us were thrilled with.

Step 4: Color Palette and Branding Concepts

Once the logo and fonts were chosen, it was time to create a cohesive color palette. This involved selecting colors that not only complemented each other but also matched the tone of Sara’s art and the overall aesthetic she wanted for her website. I created several different branding concepts by mixing and matching colors, fonts, and graphical elements. This iterative process is one of the most enjoyable aspects of design for me, as it allows for a lot of creativity and experimentation.

Each concept was carefully crafted to ensure that it felt cohesive and professional while still allowing Sara’s unique style to shine through. After creating these initial concepts, I exported them and shared them with Sara via Google Drive. This made it easy for her to leave comments on what she liked or disliked, enabling us to refine the designs further until we arrived at a final version that she loved.

Step 5: Web Design Planning in Figma

With the branding finalized, it was time to move on to designing the website itself. Figma is my tool of choice for this stage because of its flexibility and collaborative features. I started by creating a frame for the homepage and began to lay out the site’s structure. My design process in Figma is quite dynamic—I often start with a rough layout and then iterate extensively, duplicating sections and trying out different ideas until I’m satisfied with the result.

At this stage, my Figma workspace is usually quite messy, filled with images, text, and various design elements. I find it helpful to keep all the assets I might use in one place, so I can quickly try out different combinations and see what works best. In Sara’s case, I had her fill out a form with some key questions to generate copy for the website, which I then dumped into Figma alongside some text from her old site.

Step 6: Iterating the Design in Figma

Designing in Figma is all about iteration. I often duplicate entire sections or even whole pages to test out new ideas. For Sara’s site, I started with the homepage, experimenting with different layouts, colors, and typography. Each time I made a change, I would duplicate the design and try something new, which allowed me to explore multiple possibilities without losing track of what I had already tried.

Once I had a version of the homepage that I liked, I moved it over to a clean page in Figma. This cleaner version was what I shared with Sara for her feedback. In this case, I iterated a few more times on the clean version before she saw it, ensuring that everything was polished and ready for review.

Sara’s feedback was incredibly helpful, allowing me to make a few final adjustments and settle on a design that we both loved. Typically, I only design the homepage in Figma and then build out the rest of the pages directly in Squarespace. However, for this project, I also designed the About page in Figma because I wanted to brainstorm some new ideas and felt that Figma was the best tool for that.

Step 7: Building the Website in Squarespace

With the design finalized in Figma, it was time to start building the actual website in Squarespace. Sara already had a Squarespace site, so all I needed was administrator access to begin. The first step I always take when working on an existing website is to create an “Under Construction” or “Maintenance” page. This page temporarily replaces the homepage, letting visitors know that the site is being updated.

Once the maintenance page was in place, I created a folder in Squarespace to move all the old pages into, effectively giving me a blank slate to work with. From there, I started creating the new pages, beginning with the header. I replaced the site logo with the one we had designed and then began matching the layout and style to what I had created in Figma.

Step 8: Exporting from Figma to Squarespace

Building the website in Squarespace involves a lot of back-and-forth between Figma and Squarespace. I exported images and design elements from Figma and uploaded them to Squarespace, carefully positioning them to match the design as closely as possible. The latest version of Squarespace, Version 7.1, features a drag-and-drop interface called Fluid Engine, which makes it easy to arrange elements exactly where you want them on the page.

However, there are times when Squarespace’s built-in tools aren’t enough to achieve a specific design effect. In these cases, I rely on custom CSS to fine-tune the design. For example, Sara wanted a gallery on her site with a little more space between the images than Squarespace allows by default. To accomplish this, I used CSS to add a 10-pixel margin between each image.

Step 9: Custom CSS and Advanced Design Techniques

While Squarespace is user-friendly and offers a lot of flexibility, there are limitations, particularly when it comes to more advanced design features. That’s where custom CSS comes in handy. For Sara’s website, I used CSS to make several tweaks that weren’t possible through Squarespace’s standard settings.

One tool that has been incredibly helpful for me is a Chrome plugin called Squarespace ID Finder. This plugin reveals the IDs of all the elements on a Squarespace page, making it easy to apply custom styles in your CSS code. By using these IDs, I was able to target specific elements on Sara’s site and apply custom styling that enhanced the overall design.

For instance, I wanted the text on Sara’s homepage to be left-aligned on desktop but centered on mobile. Since Squarespace doesn’t allow you to change alignment based on screen size through its interface, I used CSS media queries to achieve this. Media queries let you apply different styles depending on the screen size, which is crucial for creating a responsive website that looks great on both desktop and mobile devices.

Step 10: Mobile Optimization

Mobile optimization is an essential part of any web design process, especially with the increasing number of users accessing websites from their phones. Once I had built out all the pages in Squarespace, I switched to mobile view to ensure that the site looked just as good on a smaller screen.

Squarespace’s interface allows you to resize and rearrange elements specifically for mobile, without affecting the desktop version. However, as mentioned earlier, changes to the content or styling of an element will be reflected on both desktop and mobile. To get around this, I used CSS to apply different styles depending on the screen size.

For example, I used media queries to ensure that certain text blocks were center-aligned on mobile while remaining left-aligned on desktop. This attention to detail is what makes a website truly responsive, providing a seamless user experience regardless of the device being used.

Final Review and Launch

After thoroughly testing the website on both desktop and mobile, I was ready to show the final result to Sara. She was thrilled with how everything turned out, especially how her art was seamlessly incorporated into the design. The website felt modern and minimalistic yet vibrant and artistic, perfectly capturing the dual aspects of her brand.

Before launching the site, I did a final review to ensure that everything was functioning correctly. This included checking all the links, making sure that images were loading properly, and verifying that the site was fully optimized for both desktop and mobile. Once I was confident that everything was in order, I published the site and took down the maintenance page, revealing the new design to the world.

Conclusion

Designing a website that balances modern minimalism with artistic expression is no small feat, but by following a structured design process and leveraging powerful tools like Figma, Adobe Illustrator, and Squarespace, it’s possible to create something truly unique. The key is to stay flexible, iterate often, and always keep the client’s vision in mind.

I hope this walkthrough of my web design process has given you some insights and inspiration for your own projects. Whether you’re a seasoned designer or just starting out, there’s always something new to learn and explore in the world of web design.

Thank you so much for watching this video. If you enjoyed it and want to see more content like this, please let me know in the comments below. Your feedback is invaluable, and I’d love to hear your thoughts on this project. Until next time, happy designing!