How Long Does It Take To Build A Website

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">How Long Does It Take To Build A Website And What Tools You Could Use To Build One</p></div></div></div>

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The obvious answer is “depends”. From an hour all the way to infinity. Building a website is complex, and depends on a whole variety of factors. But it boils down to how big of a website you need, and what tools you use. If you use a simple online builder, the whole process is just a couple of steps and might take no more than an hour. But then you’d get the website you’d expect from an hour of work. Might take half a year, if not more, if there’s a meeting on every little detail and you use the wrong tools for the job. With us, it only takes a few weeks. Now we’ll guide you on how we manage to provide high-quality work in such a small amount of time, and what tools could be used in building a website.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">How We Do It: Our Workflow and General Time Estimates</p></div></div></div>

<div class="p-lr mt-24 mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">We go into detail on our workflow and how exactly we approach building websites in our guides on <a href="https://www.embacy.io/stories/the-complete-guide-on-website-redesign" class="underline">website redesign</a> and <a href="https://www.embacy.io/stories/how-to-make-a-b2b-website-a-guide" class="underline">B2B websites</a>, but the simple answer as to how we manage is the well-structured workflow and the use of Figma and Webflow. We use Figma to design the website, and then Webflow to build it.</p></div></div></div>

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The first step is to come up with the concept for a website. It doesn’t mean it has to be something complicated, it’s just that it’s not enough anymore for most industries to have a blunt website. To be memorable, a website now needs to be a coherent and meaningful whole, with everything in content and design supporting each other, supporting the same idea. We come up with three concepts and present them to our clients. The second step is to choose the design direction. Even with the limitations of a particular industry, the product, the trends at the moment, and the time constraints, any idea could be expressed in an endless amount of ways. Again, we come up with three options. Once the design direction is chosen, we make a layout of the homepage, already with the draft copy. The homepage serves as the proof of concept and once every detail is perfected on the homepage, the style could be extended to every page. All of this might sound like a lot, but this is a work of a couple of weeks.</p></div></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The unique pages, following the guidelines set by the homepage, take a day each. Repetitive service pages could be done two per day. Adaptable mobile versions of the pages could be done three per day. All these estimations don’t account for unique illustrations, motion, and other labor-intensive design elements — those are done in parallel during the work on the design.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">The Scope of the Project: From Landings to Massive Websites</p></div></div></div>

<div class="p-lr mt-24 mb-16"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">Landings and smaller websites 2-3 weeks</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">A corporate landing can be done quickly because it’s a separate entity. It doesn’t have to follow all the established rules and guidelines for a corporate website: it can bend them a little, break out in places, be colorful and exciting. In just a week, you can get something working, but it’s not recommended. To have the time to refine the finer details, make the adaptable versions for mobile and a variety of platforms, it’s better to aim for two weeks. The same goes for a smaller website, consisting of two to five pages the homepage, product page, about us, and not much more. It could be done in a couple of weeks, but it’s better to take more time for a more refined final result. And this is the landing we’ve made for <a href="http://vcv.me/" class="underline">VCV</a> :</p></div></div></div>

<div class="p-lr mt-104 mb-16"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">Medium size websites 3-5 weeks</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Six to ten pages. Aiming for more than the essentials, for a company providing a variety of products, detailed career page, blog with CMS, and more, would take more time. The following is the website we’ve made for <a href="https://vauban.io/" class="underline">Vauban</a>: naturally, unique style supported with fitting illustration and copy takes more than just a week or two. You could read in detail about our work on Vauban in <a href="https://www.embacy.io/stories/vauban-case-study" class="underline">our case story</a>.</p></div></div></div>

<div class="p-lr mt-104 mb-16"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">Big websites 5-? weeks</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">More than eleven pages, potentially, a lot more. For a website with a lot of repetitive service pages and product pages, it would be necessary to spend more time on the blueprint. It would need to be perfect, well-thought-out, ready to use with different types of content, and for the content to be structured in a variety of ways. The following is the website we’ve made for <a href="http://sk.ru/" class="underline"> Skolkovo Innovation Center</a>. The innovation center supports *thousands* of start-ups, and each of them needs to have its own page. We had to make a resilient template that could handle a page for any company.</p></div></div></div>

<div class="p-lr mt-104 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Now that we’ve looked at the theoretical side of the question, well, the theory is nice, but theory without practice ain’t nothing. Let’s look at the actual tools that you could use to build a website: simple all-in-one builders like Squarespace and Wix, more complex and flexible builders such as Tilda and Readymag, our precious Webflow, that we use daily to great results, and finally, just coding the whole damn thing.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">All-In-One Website Builders: Squarespace, Wix, etc</p></div></div></div>

<div class="p-lr mt-104 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">These services are suitable for very, very small business. They’re easy to use for people who never approached development before, they’re very cheap, and you’ll have your website in an hour or two. That’s all for the benefits. The negatives are that your website won’t stand out at all and that it’ll be near impossible to implement any custom solutions. You’ll always be limited to the templates provided by the platform. When you’ll need a website with any complexities whatsoever, you’ll have to get back to building from nothing.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">More Complex Website Builders: Tilda, Readymag</p></div></div></div>

<div class="p-lr mt-104 mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Tilda, Readymag, and more builders like these also provide templates, but with a lot more freedom and flexibility. You don’t have to stick to the templates.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">The benefits</p></div></div></div>

<div class="p-lr mt-24 mb-16"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Ease of use. It’s not particularly complicated, and you could learn how to work with Tilda within a week. Or your designer could, even if they have never worked with web design in particular before.</p></div></div></div>

<div class="p-lr mb-16"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Price point. Compared to hiring a team to custom-code the website — the team including at least a frontend developer, a backend developer, and a web designer — the use of Tilda and comparable website builders is relatively cheap.</p></div></div></div>

<div class="p-lr mb-16"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Loading speed. The website will have a decent loading speed, and Tilda features lazy load option (adaptive image load).</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Tilda CRM. It might not be suitable for big sales departments, but there’s a good CRM system to go with Tilda.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">The drawbacks</p></div></div></div>

<div class="p-lr mt-24 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The limitations. There are modules for a lot of what you would want on your website, such as registration forms, contact forms, processing online payments, etc, but if you need something outside of the box, it would be difficult to realize. You would need a frontend developer to custom code your needed function, and then implement it. This would be tough because Tilda doesn’t feature a W3C valid code. W3C is the standard for valid code: valid code means it’s got proper syntax and “grammar”. When it’s not valid, it affects loading speed, SEO, and it’s simply hard to work with for a developer.</p></div></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Tilda is a great solution for a lot of tasks. It’s great for smaller businesses. And it’s great for web designers in big corporations to experiment while the development team is building something else. But it’s still a builder, you’re still limited to the blocks available. For more complicated websites, be they complicated in design, or function, you would have to look somewhere else. Like Webflow.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">What We Use Every Day: Webflow</p></div></div></div>

<div class="p-lr mt-104 mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Webflow is a visual editor that we use. Like the builders mentioned before, it too offers a wide variety of templates, and you could make a website from scratch. However, it’s a lot more flexible, and the main difference is that the custom elements could be coded and that the final result is in valid W3C code. But there’s no coding required to work with Webflow.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">The benefits</p></div></div></div>

<div class="p-lr mt-24 mb-16"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Little to no limitations. Pretty much any web design you could think of, no matter how outlandish, could be done in Webflow.</p></div></div></div>

<div class="p-lr mb-16"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">No coding required. Outside of adding custom solutions and particular technical features, there’s no coding required. In practical terms, it means that the final result won’t diverge from what the web designer envisioned. Pixel perfect. And that the web designer could build a website by themselves, with no frontend developer required.</p></div></div></div>

<div class="p-lr mb-16"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Valid W3C code. So even if you do think up something completely outlandish, a custom solution would be easy to implement. Because Webflow puts out valid W3C code, that could be easily customized by a frontend developer. Developers weep with joy.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Loading speed. Again, because of the valid code. The two websites completely the same in their visuals and their functionality could load very differently, depending on how well they’re coded. Exactly the same website would load 4.3 seconds if it’s made on WordPress, and 449 milliseconds if it’s built on Webflow. And the loading speed affects SEO too: a slow website would be way down in the results.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">via Webflow Facebook group</p></div>

<div class="p-lr mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Webflow CMS. The content management system in Webflow is easy to use and implement on your website. In practical terms, it means that your marketing director or copywriters won’t need to involve a developer every time there needs to be a new page on the website, they could easily write it up, format it, and publish it to the live website themselves.</p></div></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Motion. Motion is a big current trend in web design, and as technology progresses and a heavy website will impede loading speed less and less, we’ll only see more and more animations on the web. Out of all the visual builders, Webflow has the best support for animation, and 3D animation too.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">The drawbacks</p></div></div></div>

<div class="p-lr mt-24 mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">It’s more expensive than the previously mentioned options. And being more flexible comes at a cost: it’s harder to learn. But still nowhere near as hard as learning to code everything.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">Custom-coded</p></div></div></div>

<div class="p-lr mt-24 mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Finally, you could just get a team to code the whole thing ground up. Reinventing the bicycle has its benefits, but it’s time-consuming and is hardly necessary in most cases.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">The benefits</p></div></div></div>

<div class="p-lr mt-24 mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The main benefit is the complete customization. This option is limited only by the frontend developer’s skills. But you’ll need a frontend developer anyway if your website offers complex services. This option is only practical if you already have a strong team of developers, and if your website needs to feature services far beyond what any online builder could offer.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">The drawbacks</p></div></div></div>

<div class="p-lr mt-24 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">It’s expensive. You’ll need at least a frontend developer and a backend developer. And building a website doesn’t take place in a vacuum, so you’ll need a web designer too.</p></div></div></div>

<div class="p-lr mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">It’s time-consuming. Building your website would take forever. Designing, coding, and testing everything, working out the details, changing things. Even with the most straightforward process, this is the most time-consuming option.</p></div></div></div>

<div class="p-lr mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Hard to update. Your marketing executive or your copywriters won’t be able to put out new content without the developers’ help unless CMS is implemented, which also takes time.</p></div></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The gap between the design and the final result. Because the web designer isn’t the one actually building the website, unlike with using codeless builders, there could be disparities between the web designer’s vision and the developer’s execution. Sometimes, the developer wouldn’t even see that something is wrong, even if the designer is pointing right at it.</p></div></div></div>

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

<div class="p-lr mt-24 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">You need to keep three things in mind to keep everything moving. First, you need to make decisions quickly. It’s better to make a mistake and then correct the course, rather than spending months laboriously arguing over every little thing. Second, for the same reasons, you don’t want to have too many people involved. On our projects, we ask our clients’ to pick someone on their team to communicate with us and make their decisions, and on our side, the project manager is the one responsible for the decisions and the final result. It’s for the same reasons: you want to keep things moving instead of debating every single detail with a committee. Finally, you need to be deeply involved in the process for better results. To hire a designer or an agency and then say, “see you guys in three weeks”, well, it could work. But on our projects we check-in daily and show progress step by step, and this involvement always leads to better final results.</p></div></div></div>

How Long Does It Take To Build A Website

You might also like