What is Webdesign to Flow

Well-designed websites offer much more than just aesthetics. They attract visitors and help people understand the product, company, and branding through a variety of indicators, encompassing visuals, text, and interactions. That means every element of your site needs to work towards a defined goal.


These are the steps that we've outlines the process, let's dig a bit deeper into each step.



Where I work with the client to determine what goals the new website needs to fulfill, what its purpose is of this website.


Once we know the site's goals, we can define the scope of the project. I.e., what web pages and features the site requires to fulfill the goal, and the timeline for building those out.

Wireframing & Early Development

With the scope well-defined, we can start digging into the sitemap, defining how the content and features we defined in scope definition will interrelate. Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages. It's vital that you have real content to work with for our next stage.

Visual Design

With the site architecture and some content in place, we can start working on the visual brand. Depending on the client, this may already be well-defined, but you might also be defining the visual style from the ground up. Tools like style tiles, moodboards, and element collages can help with this process. 


By now, we have  all your pages and defined how they display to the site visitor, so it's time to make sure it all works. Combine manual browsing of the site on a variety of devices with automated site crawlers to identify everything from user experience issues to simple broken links.


Once everything's working beautifully, it's time to plan and execute your site launch! This should include planning both launch timing and communication strategies.


Goals the new website needs to fulfill

Research Phase

The research design refers to the overall strategy and analytical approach that we have chosen in order to integrate, in a coherent and logical way, the different components of the study, thus ensuring that the research problem will be thoroughly investigated. It constitutes the blueprint for the collection, measurement, and interpretation of information and data. Note that the research problem determines the type of design we choose, not the other way around.



Defining the scope of the project, with research of the old project
Define 2

The main problem with the design of the previews website, is the amount of text, the customer still wanted to apply a lot of text. We still edited a lot of text to simply copy

Define 3

The main language of the website would be based on icons, images and the text would be simplified


Wireframing, Early Development

Defining how the content and features we defined in scope definition will interrelate
Wireframing, Early Development 1
Wireframing, Early Development 2
Wireframing, Early Development 3

A wireframe is a layout for a web page that demonstrates what interface elements will exist on the main pages. It is a critical part of the interaction design process. The purpose of a wireframe is to provide a visual understanding of a page at the beginning of a project to gain approval from stakeholders and the project team before the creative phase begins. Wireframes can also be used to create the global and secondary navigation to ensure that the terminology and structure used for the site meet user expectations.


Visual Language

Moodboarding, Visual language research
Visual Language 1
Visual Language 2

Color Study

While text-based content is always important when seeking answers to a question, creating visuals such as infographics, charts, graphs, animated GIFs, and other shareable images can do wonders for catching your readers' attention of the article or report. Knowing colour theory and design can help you make content stand out

Visual Language 3

Iconification & Illustration

The Client's website had already a lot of icons and some illustrations, we decided to move forward within this direction

Brand Colour Study

We decided to create a brand language, so it would be easier to produce and resolve problems at hand



By now, we have all your pages and defined how they display to the site visitor, so it's time to make sure it all works
Visual Language 5

Early Prototyping

Prototyping is interwoven with nearly all product, service, and systems development efforts. A prototype is a pre-production representation of some aspect of a concept or final design, we use Figma to produce these and they can be shared with the client, facilitating changes and communication

Prototyping often predetermines a large portion of resource deployment in development and influences design project success, our websites focus heavily on this phase to facilitate the end of the pipeline 



Mobirise is perfect for non-techies who are not familiar with the intricacies of web development.