Special Offer for Startups: Branding + Website in a Month đ
Embrace the vacation vibes of August while priming for an autumnal leap into high gear.
â landing page,
â logo and style,
â branding materials and pitch deck
in only 4 weeks and just $10K.
<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>