What do a website and building a house have in common?
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.
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.
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
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.
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
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 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.
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.
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
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.
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.