How To Design A Website For Your Startup or Early Stage Digital Product

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Learn the specifics of designing websites for startups and early stage digital products in this article</p></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">We used to do a lot of websites for startups and digital products at the early stages. We still do, but we also used to. However, since then we’ve grown, and most of our projects now are more complicated — but today we’ll share from our experience what you should keep in mind when you approach startup website design.</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Web Design Step By Step</p></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Making a website for either a startup or an early digital product is fairly similar to making any other website, but with two key differences: it has to be fast and furious, as in it has to be made quickly, and it has to stand out. For now, let’s overview the whole process and then get into details.</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">1. Analytics.</p></div></div>

<div class="p-lr mt-24"><div class="g-7-15"><div class="transp-bl"></div><div><div class="mb-24"><p class="h4-style">You need to:</p></div><ul role="list"><li class="h4-style">Understand the scope of the project;</li><li class="h4-style">Define the website’s target audience;</li><li class="h4-style">Define your branding and messaging;</li><li class="h4-style">Research the websites of your competitors;</li><li class="h4-style">Identify the main goals for the website.</li></ul></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The most important thing is to highlight your unique value proposition and do so in clear and concise terms.</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">2. Content</p></div></div>

<div class="p-lr mt-24 mb-128"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">This is the time to structure the website, make a very rough draft of every page, pick a design direction and do some early copywrite, so that the visuals that would be made to support it aren’t made in a vacuum. But first, this is the time to come up with a concept: every good website should be memorable, but it’s especially important at the early stages for a startup. Stories are what we remember, and stories are what we share with each other. Here's the website for <a href="https://maze.co/" class="underline">Maze</a>:</p></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/6328834461cedd00591748db_es-1.webp" loading="lazy" alt="" class="s_image_full mb-128">

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">You want your visitors to later tell someone “have you seen that website with those crazy animated mazes?” rather than not say anything at all, because there was no story to tell.</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">3. Design</p></div></div>

<div class="p-lr mt-24 mb-128"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The design stage is the time to refine everything: pick the right colors, fonts, all the imagery, et cetera. The important thing is to make the homepage first, but even more so, the very first screen should explain and show exactly what your product does.</p></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/63288345b1e6485e80be2a1b_es-2.webp" loading="lazy" alt="" class="s_image_full">

<div class="mt-16 mb-128"><p class="text-gr"><a href="http://asana.com/" class="underline">Asana</a></p></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">4. Development</p></div></div>

<div class="p-lr mt-24 mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">And then it’s time to actually develop the thing. Because you need it fast, and because you’re just a startup, you probably won’t hire a development team to custom code everything (unless you already have one) — out of all the website builders, we can’t recommend Webflow enough. You can learn why in our article on <a href="http://www.embacy.io/stories/how-long-does-it-take-to-build-a-website" class="underline">how long does it take to build a website</a>.</p></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">To get more in-depth on these subjects, you could read our other articles: <a href="http://www.embacy.io/stories/web-page-in-7-steps" class="underline">Web Page In 7 Steps</a>, <a href="http://www.embacy.io/stories/how-to-make-a-b2b-website-a-guide" class="underline">How To Make a B2B Website</a>, and our longread touching on nearly everything relating to web design, <a href="http://www.embacy.io/stories/the-complete-guide-on-website-redesign" class="underline">The Complete Guide on Website Redesign and Why Is It Exactly Like Going Into Space</a> (spoiler: because if you do it wrong, everything explodes).</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Stand Out In A Crowd: Why You Need A Loud Website</p></div></div>

<div class="p-lr mt-24 mb-128"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Good design is expected. It’s the default now. As a product that’s breaking into the market, you can’t afford to have a website that’s just good. You need to be bold. Let’s take a look at <a href="http://intercom.com/" class="underline">Intercom</a>:</p></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/632883447f0787b549bc4d72_es-3.webp" loading="lazy" alt="" class="s_image_full mb-128">

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Intercom’s website is the most common reference we receive in our briefings, and for good reasons: every year they redesign it, and each iteration is more than well-made. It’s practically the model for a website for a digital product. However, it’s perfectly inoffensive (unless you have a personal vendetta against the color blue). Already established, Intercom can have a perfectly safe website. A startup can’t. A startup has to be memorable.</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Need For Speed: How Much Time Can You Afford</p></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">A startup needs a website quickly, but you have neither the time nor the money for a big, complicated website. You should make a small website and then grow it as needed over time. As a digital product, you probably have an in-house team, say, a team that specializes in UI/UX. It might make sense to just let them do the website — but while the skillsets are tangentially related, they’re not actually web designers. You might waste more time and money trying to do everything in-house. But if you plan everything out right, a website can be done quickly — we’ve even done a lot of <a href="http://www.embacy.io/website-in-5-days" class="underline">websites in five days</a>. We don’t do that anymore, because that amazing pace is truly neck-breaking, but still — a good agency can make a website in just a couple of weeks.</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Some of The Startup Websites That We’ve Made</p></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/63288344fe3fef3ca30c7737_es-4.webp" loading="lazy" alt="" class="s_image_full mt-128">

<div class="mt-16 mb-128"><p class="text-gr"><a href="http://behance.net/gallery/92469447/Leadly-Identity-website" class="underline">Leadly</a> — we visually represent this lead-generating tool as a powerful magnet pulling everything towards itself, be sure to check it out in motion</p></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/632883455ffcd380bf8102cf_es-5.webp" loading="lazy" alt="" class="s_image_full">

<div class="mt-16 mb-128"><p class="text-gr"><a href="http://behance.net/gallery/107722755/EcoEnergy-Website-and-style" class="underline">Eco Energy</a> — at an early stage you can’t yet brandish lines such as “millions of active users”, but you can talk about what your product solves: on the about us page for Eco Energy we wrote how many people are already choosing to live green, and how much you overpay for electricity while there are cheaper and sustainable options available</p></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/63288345701afccc45836da1_es-6.webp" loading="lazy" alt="" class="s_image_full">

<div class="mt-16 mb-128"><p class="text-gr"><a href="http://behance.net/gallery/98993387/VCV-Product-Page" class="underline">VCV</a> — while already established as a B2B solution, this video resume service wanted to branch out into B2C, and for them, we’ve made a product page that immediately shows the interface and highlights that it’s truly the resume that speaks</p></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Outro</p></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">You need to quickly make a website that’s simple enough, but that’s bold and memorable. If you don’t, you’ll be lucky that your visitors are gone in sixty seconds, and not a lot less.</p></div></div>