Website Design Tips for Startups Building on A Budget
VOL 2: According to Gary Colwell, if your website is well designed, that means that it: is accessible, is enjoyable, and is easy to use. Easier said than done? Maybe... or maybe not.
This week I am absolutely thrilled to welcome Gary Colwell to the issue. With a decade of design expertise, Gary has so generously offered some tangible guidance for startups navigating the world of web optimization on a budget.
Gary High-Level | Location: Vancouver, BC, Canada | Favourite Mobile App: Reeder 5 (indie RSS readr app for iOS) | Favourite Web App: MyMind.com
You can listen to our conversation here, or keeping reading below.
Cancel UGLY MVPs
Payten: In a perfect world, startup founders feel confident in their MVP website. However, that’s rarely the case. If anything, founders are quick to declare embarrassment, or jump to an apology when it comes to describing their website. Why are ugly mvps such a common occurrence in the startup world? In my experience, founders, entrepreneurs, and builders are guilty of the following,
Creating their own website on a third party platform too quickly.
Hiring every freelancer and their dog to touch their website whenever they need a quick fix.
In my opinion, these paths can get messy, and difficult to remedy the further you get away from your core product.
If you could give business owners either considering starting a website, or in the process of reiterating their website, what would you say are the best practices?
Gary: Go back to basics and study common ux patterns that most websites follow. There are reasons why almost all websites follow similar design patterns, and this is because people expect your website to work like other websites they’re familiar with.
Example: nav is at the top, logo on the left takes the user back to the homepage. This is a ux pattern almost all websites follow. If you want to break this unofficial rule, make sure you have a good reason to do so.
To avoid an ugly website, stick to simplicity. Keep your copywriting tight along with beautiful typography (check out the Pangram starter pack).Â
Consistent and simple color palette. If you’re unsure how to handle colour, pick a simple colour palette which involves a light neutral, a dark neutral, your brand colour, and an accent colour. Use the accent colour sparingly, only for things you want to draw attention to like call to action buttons.
If your website is well designed, that means that it:
Is accessible
Is enjoyable
Is easy to use
Tools you need to know how to use (and how to learn how to use them)
Payten: I think your call out to avoid an ugly website, and stick to simplicity is incredibly useful. When it comes to GTM strategy, product marketers are often tasked with a KPI related to website visits, or conversions. The pain point there is product marketers are expected to lead the build of websites that convert on a limited budget. Are there any tools you can recommend that help lean teams get started before they are ready to hire an in-house designer, or even an agency?
Gary: The world of no-code tools has matured over the last few years so now it’s possible to build a fully custom marketing websites for your startup using well designed, efficient tools that anyone can learn how to use. This is especially useful for smaller companies that can’t afford to devote precious engineering resources to updating content on a marketing website. It allows your marketing team and brand designers to do their job more efficiently because they can update the website themselves
The combination of Figma and Webflow is great. I’ve been seeing a lot of teams, including ours, pivot to a fully cloud based stack that works all in the browser.Â
This looks like a collaboration using Figma for wireframing and creating mockups. Figma’s even easy enough for copywriters to jump in and edit website content right in the mockup. And then taking those approved finalized design mockups from Figma and then building them using Webflow, which is a powerful nocode development platform. They’ve been really killing it lately with adding features like memberships and logic, so it’s now possible to build a membership style website with gated content with user logins and everything, with no coding required at all.Â
Not saying Webflow is super easy to use, but it’s a good combination of powerful yet simple to learn. Like any good design tool, both Figma and Webflow both have very active communities and their own proprietary free tutorials for learning the ins and outs of not only the tools themselves, but also ux patterns like we were discussing earlier.
A good website is an accessible website. Webflow also has lots of built in tools to make your website follow proper accessibility standards like color blindness filters, image compatibility optimization, and text color contrast calculators built in. I’d also recommend checking out Webflow’s Accessibility checklist. It’s important to make your website work well for everyone who lands on it.
From there, you can use automation tools like Zapier to connect your website to all sorts of other platforms like Klaviyo for email marketing or Typeform for user feedback or sales leads. The sky’s the limit
Websites matter: here’s why
Payten: As a product marketer who came into the space quite junior without a ton of guidance, I would say your recommended tech stack aligns very closely with what my Techstars mentors have recommended over the years. Figma>Webflow forever!
Speaking of Webflow. Let’s talk about the ROI of a website. I think it's fair to say that the true north for every single young company in the world is to create value for their user, while turning a profit. In 2022, and beyond, how important is a meaningful web presence in order to do this?
Gary: When new visitors land on your website for the first time, they’re usually trying to answer questions like
Am I this company’s customer?
How big is this company?
What markets do they serve?Â
How legit are they?
Your website’s job is to answer these questions for them as quick and as efficiently as possible.Â
Subscribe to Gary’s relaxing, insightful, and smart newsletter, Notebox below.
Recommendations for Tuesday, September, 27th:
READ👀 Check out the Absolute Beginners Guide for Webflow.
UPCOMING⌛Voted as most useful, watch for a free, comprehensive guide on Product Marketing 101.
See you next week!
Payten