Webflow vs Squarespace for Your UX Portfolio
One of the most common questions new designers have is, “Which website builder is best for my UX portfolio?” Browsing design forums you’ll come across this question and see that most answers from experienced designers read, “The website builder doesn’t matter. Only the content of your UX portfolio matters.”
While this is true in many ways, your website builder of choice should do what it sounds like it does. Ideally, it will help you build a customized site with a unique look and feel without having to spend time coding.
Why bother with a website builder?
You want to focus on the content and build your UX portfolio with as little effort as possible. Coding is a distraction from structuring the presentation of your case studies. If you would like to enhance your coding skills then by all means have at it. I’m making the assumption that as a designer you don’t want that distraction.
Is one better than the other?
Both Squarespace and Webflow excel in their specific use cases. For the purposes of this article, I would argue that for the case of building a UX portfolio where you are expected to have competency in visual design, Webflow is the better option.
Squarespace is great for websites that don’t need to be deeply customized. For example, If you want to build a site fast from a template. Think not so pixel perfect websites, that get the job done, but don’t really allow for significant customization without extensive plugins and custom code.
My Squarespace Experience
What is Squarespace?
Squarespace does what’s in it’s name. It is a website builder that utilizes a grid system much like Bootstrap (a grid framework used by front-end developers). Imagine a bunch of pages full of squares where you can put stuff.
The grid enforces responsive design across devices. If you have a chunk of text that spans 3 columns on desktop, when viewing the same page on tablet, or mobile, it should still take up 1/4 or 3/12 columns on the page. The grid framework also makes things look clean and proportionate (in most cases).
My Experience Using Squarespace
Squarespace requires that you start from a template. To edit your site, you move your cursor around the page to highlight images, text, links, etc., and click to replace parts of the template or add new content.
If you want to make your content bigger or smaller, Squarespace allows you to drag elements to resize them to span a certain number of columns within the 12 column grid. If you want more white space between elements you can insert “spacers” which are essentially blank single columns which will span 1/12 of your page.
Website Plans
The website plans are pretty straightforward. At the time of this article if you want to have deeper customization, you need to buy an upgraded plan which allows for CSS and JavaScript code injection.
My Webflow Experience
What is Webflow?
Webflow is a design to code tool. Its interface is called “Designer” and is similar to Figma, Sketch, or <insert design tool name here> from Adobe CC.
The goal of Webflow is to translate the design you draw in it’s interface into code accurately.
what you draw and see in the preview version should reflect what you publish to production across different browsers and devices. From my experience it seems to do this mostly accurately.
What is using Webflow like?
It’s design-tool-like interface allows for near full customization. Think of being in a design tool and wanting some chunk of text to immediately be italicized, purple, and a different font. It’s as simple as click-click-click.
Want to undo the styling? Press Cmd-Z a few times or click a few times again and you’re done. Doing this is much more difficult in Squarespace or with pure HTML & CSS.
Website Plans
One drawback Webflow has is that the different types of site plans are a bit confusing to understand. I suggest you read this article to help clarify which plan you need.
Learning Curve
Squarespace
Pretty straightforward for a beginner who is new to website builders. I felt that the out-of-the-box capabilities of Squarespace were pretty clear. The biggest challenge came from custom coding to override the default Squarespace code for deeper customization.
Webflow
Slightly more difficult to learn than Squarespace. It would also serve you well to be generally familiar with design tools to understand the interface. You don’t have to understand code, but a basic understanding of HTML and CSS will help you.
You may need to watch 2 or 3 tutorials before you get started. It’s worth it, since Webflow is much more customizable than most website builders.
Level of Customization
Squarespace
Squarespace is advertised as a “drag and drop” website builder. You create your template based on your type of business and then it’s expected that you drag and drop elements for light customization. That will get you most of the way there.
The problem is that for deeper customization you will have to buy an upgraded plan which allows you to do “code injection.” In my opinion, this defeats the entire purpose of a website builder (avoiding time-consuming custom code).
Webflow
Webflow is highly customizable. Elements can be dragged, dropped, copied, pasted, and appear in the layers panel. Unlike a design tool where layers represent which images and text appear on top of one another, layers in Webflow represent vertically stacked HTML elements.
Similar to a design tool, you can click on each layer and modify it’s position, size, color, border, fill, and so on. When you add these styles Webflow writes CSS for you under the hood.
Gallery Sliders
I like to keep it simple with my portfolio. I have sliders with a right and left arrow to cycle through images.
Squarespace
Squarespace offers a built-in gallery slider which is easy to use. The downside is, it isn’t easy to scale the size or to make it responsive across devices. If you want to modify the arrows you have to use custom code.
Webflow
Offers a built-in gallery slider which isn’t as intuitive to implement. Once you get the hang of it, you can do pretty much whatever you want. The size of the slider is highly customizable across devices. Also, the gallery arrows are customizable without code.
GIF Support
Many designers use GIFs for videos of prototype use, user recordings, and animations.
I personally prefer not to. In many cases GIFs are low quality and the file size is very large. I prefer keeping the video in its natural format and referencing the video file using an HTML5 <video> tag.
Squarespace
GIFs work fine in Squarespace. Squarespace supports file uploads to their servers of up to 20 MB. So you can upload huge GIFs directly to Squarespace and insert them wherever you need to. I’m not going to go into how you can insert GIFs larger than 20 MB into your web pages because that’s not a great idea!
Webflow
Right now, Webflow only allows GIF uploads of up to 4 MB. So if you wanted to put a large GIF on your website using Webflow you would need to host the file somewhere else, e.g. a free Dropbox account. While this is doable, it’s a bit more of a hassle than Squarespace.
Video Support
If you are like me, you don’t want to bother converting your video to a GIF, and losing quality whilst increasing file size.
You screen recorded a user testing session and it came out as an MP4 file. You don’t want to upload it into “my-awesome-GIF-maker.com” or open up Adobe Media Encoder. You just want the website to take the video file.
Squarespace
Squarespace supports embedding videos that are uploaded to other websites like Vimeo and YouTube.
That isn’t super helpful for UX portfolios because you usually want a short looping video without some blaring “this video is hosted by” logo. Also, who wants to take the extra step of uploading their short looping video to an external service like YouTube just to display it on their website?
Squarespace also supports code injection for the HTML5 video tag (only if you have the upgraded plan that allows code injection).
I have tried uploading videos directly to Squarespace and referencing them with an HTML5 video tag. This worked successfully for 4/5 videos I uploaded.
I created a support ticket for Squarespace because I wanted an explanation on why the fifth video wasn’t working and the response was that they did not support the action of uploading videos directly to Squarespace and referencing them with code. I gave up on the fifth broken video and turned it into a GIF.
Webflow
Uploading videos to Webflow was easy. I selected an option called “add background video” then dragged and dropped my videos into Webflow. It lets you resize and reposition the video across different sized devices however you want. Note, that it’s possible the videos you want to upload are larger than mine. If you have a really big video file that Webflow won’t host, you’ll probably need to create a free Dropbox account and reference the file on Dropbox in your Webflow code injection.
Why choose Webflow for your UX portfolio?
If you are a designer you are already using design tools to make highly customized visuals. Webflow’s interface will be similar to the design tools you are using.
You don’t want to code
So far, using Webflow, I haven’t had to write any code and was able to implement responsive videos of my prototypes and gallery sliders. The best part was that I was able to resize and drag to my exact pixel preference across devices without writing any code.
You want full customization
For the purposes of designing your UX portfolio (depending on how wild you get) you will most likely not have to write custom code using Webflow. The nit-picky designer in you will probably want to write custom code to perfect your site in Squarespace (something that Squarespace should let you do in it’s UI without code, but it doesn’t). I would not recommend coding your first portfolio website from scratch. Website builders exist for this reason.
If you are okay with your website looking like the template you select, then go with Squarespace!
I hope that you've enjoyed this article and feel more informed on choosing between Squarespace and Webflow to accomplish your goals. Let me know if you find a solution that's even better!
