There was a time that I simply wouldn’t look at a portfolio from if it was generated from a premade template. Platforms like WordPress generally got a pass, but everyone else was on the naughty list.
Even today, I’m still a little snooty about projects generated in Squarespace, Webflow, Wix, and others.
As time has passed, job postings today occasionally mention a desire to find designers with experience with these platforms. The landscape has clearly been altered by these platforms as some businesses adopt them for professional use.
Why a business might choose Squarespace doesn’t matter nearly as much as the fact that even a prebuilt template can look like crap without a skilled designer at the wheel. Additionally, these tools can make it far easier to handoff freelance projects to clients — a consistent sticking point when working with smaller organizations.
So have I mellowed regarding the need to know HTML, CSS, and JavaScript? No, but while I know I love doing front-end work, there are many that do not.
Instead of using this time to express my undying love for front-end, let’s discuss the platforms to determine the pros and cons of each as you’ll soon be taking the plunge into developing your site.
Platform options
Everyone deserves to have a well-structured portfolio, and that’s possible in each of the approaches listed below. Your selection should really be based on level of customization needed, while also considering the ongoing cost of maintaining the site.
HTML, CSS + GitHub
The beauty of creating your own site from scratch is that you control the whole thing. Whatever you can dream up, it’s possible. Whether you impliment those random thoughts is another matter — but the possibility remains.
When you build your own site, you also are afforded the benefit of pointing to your work when applying for jobs. Many job postings have a clear preference for designers who can write HTML and CSS as “a plus.” In short, any designer with some front-end experience has the edge for that job.
The cost of this approach is also the cheapest of the options listed here. Aside from the cost of your domain name, everything else about your site is free when you are writing it with basic HTML and CSS.
GitHub works as the host for your work and helps manage the files over time. The platform is built to specifically host work being tracked on your computer using Git. Git is version control and tracks the change of your project over time. GitHub is where you store your work online.
Of all the things you might learn, this version control is the piece that makes it easier to work directly with developers. It's a transferrable skill that makes you more marketable in tech.
Finally, a lot of people will throw JavaScript in here, but I don’t really believe you must know it to create your first portfolio. Consider it a stretch goal when you are getting started.
Squarespace
Squarespace is a platform built for people looking for a pre-built solution to apply to their problem. While customization is possible, there's no real way to start from scratch here.
Because everything is based on a template, very little prior knowledge is needed to get started. The platform becomes significantly harder to use the moment you decide to embark on anything unique.
Launching a site here will set you back over $100 per year, so all this convenience isn’t free. On the upside, it’s quite easy to collaborate with others in Squarespace without incurring additional fees for doing so.
Webflow / Editor X
Few platforms generate as much interest among new designers as Webflow, which is positioned as an infinitely customizable web design tool — minus the code. That last part is important because many anticipate that Webflow would operate more like Photoshop than a text editor. There are no drawing tools and being a tool of the web, Webflow is oriented around the same structure that all webpages are.
Also, while Webflow hides away the need to code, it is still possible to use code to further customize your portfolio. Additionally, you can export your project out of Webflow for hosting on another service.
This all makes for a fairly steep initial learning curve, but once you adjust it’s pretty easy to use and the all customization referenced above is easy to use — at a cost.
While Webflow is free to use initially, to unlock things like custom URLs and fonts, you’ll need to upgrade your account. The total cost is a little harder to establish because there are two seperate costs associated with using Webflow, the account plan and the site plan.
Webflow features robust support for client billing and makes client handoff easy. There is a robust CMS and and sites built on the platform can handle large service spikes, making it ideal for events. They also put an emphasis on responsive design, which is appreciated after working in other platforms that tend to hide these important tools.
Editor X is Wix’s answer to Webflow. While this platform is still in beta at the time of this writing, Editor X looks more like Figma than Webflow. In my initial testing, these similarities led to some comical mistakes. Given enough time I'm certain that these issues would subside.
With nearly a decade of resources behind it, Webflow is clearly the more established of the two but Editor X has potential to shake up this segment — eventually.
Still, these are both proprietary platforms that lock users into monthly fees. In the long run, you’ll be better off doing anything that is part of the open web, but I’ll try not to judge if you go this route.
PDF, Keynote/Powerpoint Presentations
While print continues its fade, print-centric formats like PDF will pop-up occasionally as the chosen route. As stated earlier, my goal isn’t to judge, but there are two issues I have with PDF portfolios.
- They aren’t responsive. If a hiring manager happens to be on the move when they hit your PDF portfolio, you won’t likely get a second look.
- Unless your work is fantastic, the PDF will work against you because everyone else is doing so with a web-based portfolio. PDFs are the knife you’ve chosen to bring to a gunfight. Provided everyone has blades, you’re ok but if they brought guns...
I’m a big fan of presentations for use during the job search, but not as a work portfolio.
Presentations are magical because they are part print, part motion picture, and part theatre. The last piece is crucial because presentations are performances. When you present your work in front of a group, using a website as a supporting element will work against you. Likewise, when using a presentation as a portfolio, you’re leaning on the format for something other than intended. Additionally, they aren’t responsive, making them just as troublesome as PDFs when opened on a mobile device.
The plan
If you haven’t figured it out by now, there are a lot of different ways you can build and deploy a portfolio. With each passing day, a new tool or improvement to an existing tool could be released.
The key to determining which tool is the right one for you comes down to the level of customization desired and the time you have available.
Trying to find a job ASAP? Then speed is the key consideration. In such instances, I suggest spinning up a heavily templated SquareSpace site for temporary use so that you can begin applying for jobs. You will always have a chance to circle back and create a custom portfolio that better represents you.
Likewise, if you have the time to invest now, portfolios are a fantastic first coding project because of the control you over the final product.
Provided you end up with the job you are seeking, I will not give you grief. That said, I've always favored portfolios from designers with front-end experience.
The choice is yours.
Exercise
Building a site of any size can be overwhelming. With the right approach, you can learn a new tool while also maintaining much needed momentum.
This exercise is quite large, so be sure to update your Program Journal and post your Journal in the #Feedback-Loop channel for review, as needed.
Part one: Select platform and build approximation of the homepage in the chosen platform. Begin by building the homepage mobile-first. This process should help avoid complications later. Be sure to create styles and components as you go to make later pages easier to build.
Part two: Information density in a portfolio generally increases as you migrate from the homepage to the About page. That makes the About page an excellent middle ground to begin building the styles needed for the more complex Case Study pages that follow.
Part three: Case Study pages require special attention because of the sheer amount of content they carry. This fact that many visual artifacts will need adjustments between desktop and mobile designs only complicates the matter further. Focus your attention on solving for mobile design considerations first.
When the entire exercise is complete, update your Program Journal with links to the assets produced. Post your Journal in the #Feedback-Loop channel for a final review.
///
Up next Picking a Path