Do web designers create wireframes for custom Squarespace websites?
What's inside this post: Hide
Should you create website mockups or wireframes if you are building websites on Squarespace as a ‘professional’ website designer?
That's a good question. I hear this one a lot, so I'm going to share my thoughts & opinions on it today!
What is wire-framing?
Wire-framing is an industry term for creating realistic mockups of the intended design, as it would look if it were a live website. Depending on the software you use, it can even have basic animations &/or click actions for a somewhat ‘live’ experience during the presentation.
Now, most people use tools like XD or Figma. However, you can technically create mockups of a website in practically anything that lets you add shapes, images, videos, etc, like Photoshop, Illustrator, or even Canva –though it’s easier & definitely much more ‘professional’ to use a tool that is actually meant for UI (user-interface), UX (user-experience), web design, or app design purposes (XD or Figma, etc).
What’s the purpose of wire-framing?
Traditionally, it was used by designers (like myself) to create the vision for what the website would look like, because designers were not also developers. Meaning, designers design the look & plan the intended functionality of everything, but the developers develop (write the code for) the website to look like the design they were given.
The two professionals worked together to achieve the end product, which was a custom coded website, designed by a professional & coded by a developer. The process required both skill sets & both professionals.
That said, technically developers don’t need designers to create websites themselves since they are, in essence, the executioner of the actual live website. –However, not all developers can also create something attractive or aesthetically pleasing vs just functional, which is why the designer creates the mockups & hands it off to be executed by the developer. If you were exceptional, you could do both development & design, but that’s not generally the case –at least not in my experience.
Why wire-framing isn’t (always) necessary anymore
I hear & see this question a lot: should I be wire-framing if I build websites on [insert platform name here]? No. Probably not, –but you can if you want to.
Why? Because most website building platforms aren’t solely using code anymore. To build a website, you can start with a visual builder platform like, Squarespace, Showit, Shopify, Weebly, Wix, Webflow, WordPress, Framer, and a ton of others. None of those will require you to code it from scratch, though you can still do that too, if you prefer.
I know some web designers who still do this, usually those with a background in UI or UX design, but I know a lot more who don't & skip that step entirely.
Whether you decide to, or not, will ultimately depend on the platform you choose to design the website on, and your personal preferences.
So if it’s helpful for you to build out the design first in something where you are more free to create, using apps like Figma or XD, you can do it. Go for it.
When wire-framing would be useful (& even necessary)
Obviously, if you ARE coding the website from scratch it may be helpful to at least have a very basic mockup of what you want to build first, so you can keep that in mind as you code. But if you know how to code websites from scratch, I honestly have no idea why you’re reading this post, because you already know all of this information –most likely. 🤷♀️
If you’re not a ‘developer’ and aren’t coding the website from scratch, then arguably, of those platforms I listed in the previous section, Webflow feels the closest to coding from scratch because of the way you have to build with it or in it. In order to use their builder properly & efficiently, you need at least a basic knowledge of code languages in order to build a website correctly using their platform. In its version of ‘Site Styles’ (a Squarespace term for global site style settings), or per element settings, you can set specific code-based terms like margin, padding, widths, heights, flex box settings, media queries, and a lot more ––none of which are going to mean anything at all to someone without coding skills, even if you aren’t actually coding from scratch (because Webflow IS still a visual builder).
So with that in mind, wire-framing would be a really smart idea when building in Webflow specifically, partly because you can now export your Figma design and import directly into Webflow with a seamless process, if you use their dedicated plugin. –Or so I’m told by people who love Webflow. I’ve tried it myself, bought a great course to learn it, but it’s not for me; not for client work, anyway.
❌ Challenges with wire-framing for a Squarespace build
Okay, so now you’re probably thinkin’, “I get it Katelyn, but you’re a Squarespace fan-girl, so how does this apply to us Squarespace designers?”
Squarespace does not inherently need or require you to figure out pixel perfect layouts or mockup designs for it in external software first, because Squarespace’s builder is so simple and responsive, right out of the box –so to speak.
You don't need to know ahead of time how big a button width & height in pixels are before you add a button to a page in Squarespace. It’s actually a little harder to build from mockups, because you’re trying to recreate something that was structurally designed outside of Squarespace –and thus, outside its design limitations. Hopefully, your Figma or XD design file is set up to use various pre-sets created to use the same settings and parameters that Squarespace has already built into it for things like buttons, and blocks that always have the same visual layouts like Archive blocks, Search blocks, Summary blocks, and various section types like Auto Layouts and Gallery sections.
So, my opinion is that it's a little harder to create website designs in Figma first, because it's not Squarespace AND because Squarespace is so easy to design in you’re essentially doing the same work, –twice.
Examples of specific challenges:
❶ If you're using Classic Editor in Squarespace, every element has a margin of 17 pixels around it, meaning you can never place two items up against each other because each one will have a 17px width of space around it. You gotta know that to recreate that visually in Figma.
❷ Setting your font sizes will be another noteworthy change, because in Figma or XD you must use pixel-based values (px), but in Squarespace rem values are used instead. Rem values are a size calculation based on or relative to the root element (or “root-em” for short). “By default, most browsers use a font size value of 16px. So, if the root element is 16px, an element with the value 1rem will also equal 16px.” (Source information from this Hubspot article.)
Since Figma & XD use px-based font-sizing values, when you recreate the design in Squarespace, you then have to convert all of your font sizes to rem values when you set up Site Styles for the best responsive design capabilities. You can do this math yourself; it’s not a hard calculation (the default root element, or base size is 16px for most browsers).
REM values are typically multiples of 16px, so to get your specific rem value, divide your font size by 16:
72px ➗ 16px = 4.5rem
24px ➗ 16px = 1.5rem
Otherwise, ya gotta look up a px to rem calculator online, so you don't have to do the math yourself.
❸ If you want to present the website as if it were live, you also need to manually link elements together where click actions will be, so that when you click, it goes to or displays the right page or section. Whereas, if you just built it in Squarespace first, it would have the click actions built in, because as you build & Save your progress on the page, the changes are ‘live’ and preview-able exactly the same way they will behave when published.
✅ Advantages with wire-framing for a Squarespace build
There are definitely helpful use cases for wire-framing before building or creating the website in any platform. The biggest and most obvious advantage (IMHO) is that it’s way easier to figure out the size your assets need to be for any particular space in the design, and export them at that specific size.
It is a lot easier to export your assets from something like Figma, than Canva because
you can create your icons & other “vector” graphics in Figma & export them as whatever file format you need, including PNG with a transparent background, JPG, or SVG if you want to maintain the vector graphic (though importing SVG files will be inaccessible on some website platforms)
you’ve designed them in Figma at the pixel height & width it’s intended to be in that section of the website in the builder, so you’re not guessing at the size, requiring less back & forth guesswork (exporting, importing, deleting, going back to edit, exporting again, importing again, etc)
I suppose you can also argue that it’s easier to see the overall flow of a full page, and how the design looks & works between sections & pages, since you can zoom out & see it all together.
Similar to how flowcharts are effective for making decisions, this ability to zoom-out and see all of your designs (whether in-progress or complete) would be helpful for deciding on, planning, adjusting, and executing the user’s journey throughout the website, because you can see the wholistic view of the whole site, rather than page by page & section by section as you scroll.
That said, you can get the same very basic effect with a Canva whiteboard & full-page screenshots of your website pages, if you need the 30,000ft overview of what the user’s journey is so far while building in Squarespace. It’d be extra work, but it would do the job if it was needed.
So again, this all comes down to personal preference & what you need to help within your own processes.
My Personal Preferences
I personally, don’t like redundancies in my work and I want to work as quickly as possible. So, why not just do all the building directly in Squarespace (only) and skip the wireframes entirely? For a platform like Squarespace, …I mean, come on, it's already easy! Why are you wasting your time building it out twice??
I know there is a genuine purpose for it and many designers feel they can’t design websites without that step, and it’s not “bad” practice if you’re one of them,…
…But personally, do I wireframe? F*ck no! 😂 Why? Because it feels redundant to me, as a web designer that prefers to build on Squarespace, and I just don't want to! Wire-framing makes the process feel harder & longer to me, because Figma doesn’t ‘work’ like Squarespace and so while I’m in Figma, I have to think like Squarespace, when I could just BE in Squarespace and let Squarespace think like Squarespace. 🤪
That said, sometimes I do white-labeled work for other web designers who do wireframe in Figma specifically, before sending me the approved page designs to build in Squarespace via a giant Figma file. That seems like redundant work to me personally, but using those wireframes helps me build it out in Squarespace quickly, so in that use-case it works great! I’ll happily do it any time! I love those designers, that’s their process, and I don’t begrudge their preferences because everyone’s is a little different, and I’m sure they have their reasons for why they don’t want to skip that step.
Just know, I don't prefer to work that way for my own clients, and you don't have to or need to work that way, if it’s not the right process for you either.
So if you've been wondering, do I need to learn Figma or XD to build professional websites? Hopefully, you’ll be happy to know you don't have to start wire-framing in order to be a web designer. That's left over from a time when you really did have to wireframe as part of the process between two experts working on the same project, in different phases.
Designers and Developers are both still valid expertise and career paths, and you can absolutely learn both skillsets or find an expert to work with if you don’t want to learn both if you want to.
Just know that Squarespace (& many other web building platforms) doesn't really require that extra wire-framing step anymore.
The takeaway:
If it makes you more comfortable to wireframe before you build, go for it. If it makes things easier for you, go for it.
However, if that step doesn’t bring you joy or make things easier for you, then skip it! It’s just another stepping stone, just another boundary, just another mountain for you to climb over before you get to the place where you can actually start charging money to design a website.
Do you have to? No.
Can you? Yes.
Do I? No.
Should you? That's up to you!
Alright, that's all I have for now! Comment below if you had an “a-ha moment” or if you're like, “thank gawd somebody just said what they mean in a clear, upfront way!” because I'll keep doing more content like this if I know you enjoy it!
