What do a website and building a house have in common?

autor Hanna Krupa, UX/UI designer
blog_2

Today, if you will say that you have a website, hardly anyone will be surprised. It has become so easy, that even an amateur will be able to develop one using site constructor or CMS. Therefore, people often take creating a website as something insignificant, and simply don’t understand why they do it.

However, if you want a website to be a really powerful tool, which will solve your business problems and indicate your brand or service in the online world, you should follow the proper development process.

We can compare website development with building a house. You need a plan, a team, and certain tools for implementation in both cases. As we continue, you will see this analogy clearer.

art
House plan
art
Website plan

Let’s say that any building can serve different purposes. Office or living hospital, kindergarten, supermarket - they all are buildings. However, there are differences in appearance, architecture, and target audience.

The same thing with a website - it has different information architecture, development technology, content and design, depending on its purpose. An online store sells your products, a portfolio shows your projects, a landing page promotes a product or service, a resume website introduces a person to recruiters, a blog shares your knowledge, an event website helps you to manage your entertainment and so on.

If you are a front-end developer you’ve probably heard this from a client during the late development stages… “I just realized that I need to add one more section to the menu.” Before finishing building a house I’m more than sure that no builder ever heard: “I think we should add one more room on the first floor of this building”.

Yes, I know what you will say. There's a big difference between them. But is there?

Attitude is the most important thing about this. Some clients think that a website is something so easy to change that they neglect basic principles and workflow. This will ultimately lead to bad site performance and malfunctioning.

art

To succeed with your website you should follow established development flow:

Ideation and planning

This is the stage when you decide to develop a website and just form your ideas or concepts. If you already know why you need it, and what outcome you want to achieve, you can think of your content, information architecture, navigation, motion and development technology.

Content

10–20 seconds. This is the amount of time you have to hold a user's interest in your page according to surveys. Are you sure your content is good enough for that challenge?

When you prepare your content (images, videos, texts), remember that we live in a time when people are overloaded with information. That’s why it should be meticulously filtered and clear. Always put quality over quantity. Research proves that the majority of users scan all the content on a page, while only a few of them read the text carefully. Besides, usually, reading speed decreases on a desktop screen, so only publish your best content.

It is better to have your content ready before the design and coding, but in practice, usually, clients take their time for proofreading and review. This is ok. At the development stage the content doesn't need to be crystal clear, but the closest it is to the final version the fewer edits developers will need to make, consequently, the more money the client will save. So, it is better to be prepared.

Sitemap and wireframes

Another important deliverable is the sitemap. This is a diagram of the hierarchy of your site. It is really useful if your website has branched branched information architecture, many menu items and subitems. This helps you to structure the content, define proper navigation and think over the global user flow.

art
Website sitemap

When the work of organizing content is done, you can start with wireframes, which represent the skeletal framework of a website. This can be sketched on paper, or you can use web tools for this (Balsamiq, InVision). The main purpose is to show navigation elements, and visualize information architecture to make sure that the logic and UX is enjoyable.

The good thing about wireframes is that editing at this stage will cost you nothing, meanwhile, the same corrections during development will entail unforeseen expenses, not to mention giving the developer’s a headache.

Design

Design is the most interesting part in my opinion (probably, because I am a designer). This is the time when all analytical work is complete and you can indulge in creativity, plunging your mind into a world of fonts, colors and illustrations. Visual design is what makes website unique and remarkable. So, make it stand out from the crowd or you will have just another general web address.

art

Also, if you want to add some interaction and animation - it is time to think this over and prepare graphic assets for your developer if needed.

Coding

At this step, you can finally reanimate approved designs by means of writing code.

A developer implements all the designs into HTML/CSS code with all necessary animation and effects. They can also use some advanced functionalities, JavaScript frameworks, and libraries such as Angular, React, Vue, etc...

Nowadays, having responsive design goes without saying. Smaller screens can bring huge impact. So don’t forget about smartphone and tablet users.

Testing

After the development is done it goes through several tests to make sure there are no bugs or issues, and it is ready for launch. A QA engineer performs tests that can check the functionality, usability, compatibility, performance, etc. Once the green flag from QA is given, it is deployed to the server.