Flowchart, Functionalities and Concept (part 1)


Let’s get started with the first blog of a series about how to create a website. In this blog we will be talking about the basics of creating a flowchart for a website, decide what functionalities to use and how to create a concept for the website. I’ll try to keep it as simple as possible with some examples I come across on a daily basis.

Flowcharts for websites

Every heard of a flowchart? No? Oké, a flowchart is a diagram of the sequence of movements or actions of people or things involved in a (complex) system or activity. You can use a flowchart as a basis for what your visitors can do on your website, but you can also use it to represent small tasks. First let me show you a flowchart of a small task, like filling in a contact form.

Contact form flowchart


Flowchart contact
This is a simple flowchart. You start with the functionality, in this case, a contact form on the contact page of a website. The next step is that it’s filled in, after doing that the visitor has to send the contact form. If this is successful the user gets a notification on the screen or in the mail or so. If the send isn’t successful there will be a warning message and the fields that were wrong have to be filled in again.

‘Big’ flowchart

Flowchart website
Let’s take the ‘big’ flowchart as an example. This is created for a relatively simple, but different tasks. So which page leads to which page and what sub-pages are present. With this in mind, you know what information you want on which page and you don’t have to create extra pages. Let’s create one yourself.

How to create a flowchart yourself?

You now know what flowcharts are right? Next, is creating them yourself. You can use all different kind of tools for it. You can sketch it on paper, use different design tools or even Microsoft Word. A very handy tool to use is Draw.io (I use it myself all the time). It’s easy to understand and FREE! So give it a try. The flowcharts don’t have to be very fancy, spend the time on creating logical flowcharts or other steps.

Now you know why and how to create flowcharts for your current or next projects. This is a very good start.

Landing page flowchart?

Nowadays if our website is already online we’re creating landing pages. Landing pages are pages on your website created to share with a small audience. It’s focused on giving a different entry point for your visitors. This means, for example, that you can create a page for an event which you can share. On this page is all the event information and people can subscribe to it. There’s no need for them to go to any other of your website pages unless the goal of the landing page is to lead your visitors somewhere else on your website. You can create flowcharts for landing pages just like you can for functionalities and the overall website. Next up is user flows.

What are and how to create user flows

User flows look like flowcharts, only user flows are focused on where users come from and where they are going to. So where do your visitors come from, where are they landing or your website and what kind of tasks do they want to complete.

User flowchart

In the above image, I took some random guy that really likes branding, he’s searching on Google for more information and cool blogs about this subject. He comes across nrd.Talks and filters on the category branding on the homepage. He finds blog titles he likes and clicks on one. While he’s reading the blog he enjoys it, at the end he checks for related blogs since it was so interesting. He finds related blogs and likes them as well. The guy now adds our blog to his bookmarks/favorites so he can check it more often.

Our goal here is that he adds us to his bookmarks/favorites. Now I’ve created this flowchart for a user I see. I’ve never told him or any visitor to add nrd.Talks to their favorites. So in the process, if I want them to add this website to their bookmarks/favorites, I have to remind them of this and somehow add this in the blog posts. If I wouldn’t have created this user flow I would have forgotten about creating call-to-action for this goal, but now I don’t!

All the functionalities

Now we’re going to decide what functionalities should be on the website. With the flowchart, we found out which pages we need for the visitors to the website to be functional. But what functionalities will we add to make it a great and easy experience that your visitors can relate to? Let’s check what pages we’ve created in the website flowchart.

nrd.Talks functionalities for example:

  • Subscribe to newsletter
  • Search function
  • Comment system
  • Social media sharing
  • Contact form
  • Slider (please don’t, I hate sliders)
  • Affiliate system
  • Recent, Related or Liking blogs

Why is this so important? You will need this to create wireframes. How are you ever going to create wireframes without knowing what has to in those wireframes? Also, this is a step that’s easy to update and gain feedback on without having to change a lot. As a freelancer, this could be an approval step – which means your client can agree or disagree on this – that will be the basis for your wireframes. So after this, your client can’t go back which means no extra work or they have to pay more. Sounds good right?

Things that take time

Now we’re going to get started with some branding. Yeah even before the wireframing has even started yet! So there are some things you’ve got to know before you create your website. Things like, which colors are you going to use, what fonts and do you already have a logo? Down below I’ve created a little checklist of things you’ve got to do before you start wireframing.

Your project or company needs a name that suits it. Don’t rush this over and give yourself some time to think about it.

URL (Website domain)
This might be different from your company/project name if your company/project name is too long or isn’t available.

With the name, you can choose to also think of a slogan. Your slogan can be funny or serious, as long as the slogan fits the audience you target with your website/project.

Tone of voice
For whom are you creating this website and what style do my visitors like. What do I want to represent and why do you want to do that. With this, you can also start thinking about the primary colors you want to use.

These are things that might take some time. This means you can work on those things and on the wireframes at the same time. If you’re stuck at one point you can work on another one. It can be demotivating if you can’t work on something else while you’re stuck. Doing two parts at the same time will keep you more motivated, trust me.

Thanks, ready for part 2?

This was it for the first part of the series. I hope you’ve enjoyed it and that it might be useful for you. The next blog will be focused on wireframing and prototyping! I will talk about how to do it and what kind of tools you can use for it. Check this page if you want to learn more about how to create a website.

Follow me on Instagram @sandervolbeda or on Twitter @sandervolbeda. Also, don’t forget to like our Facebook page so you will always know when there’s a new blog online. Thanks for reading and if you’ve any questions don’t hesitate to ask me.