Without a doubt, web designers are expected to be familiar with the various platforms and technology required for creating a website. However, we mustn’t ever forget the number one ingredient behind any great design: creativity.

Each designer has his or her own way of expressing creativity; nonetheless, the creative process is composed of five basic steps that all designers go through. This article discusses each one:

Step #1 – Sketching
Once you are able to gather all the information needed for creating a website, the first step in the creative process is sketching. Simply grab a pencil and paper — or a tablet — and start putting down your ideas. The aim here is to come up with a rough illustration of what the website might look like. You will need to sketch not just one, but several designs; narrow them down, and then consult with your client about which design best conveys their message.

Step #2 – Establishing a Workflow
The second step of the creative process is to establish a workflow. Basically, a workflow describes each page or section that will be included in the website. It also presents some brief information regarding the type of content that will be featured on each page. Once again, the workflow is presented to the client for their suggestions on what to add, remove, or change. Upon approval of the workflow, you can now set a more specific budget and schedule for creating the website.

Step #3 – Creating Low-fidelity Wireframes
A low-fidelity wireframe is a basic line drawing of the layout of the website. It focuses on the placement of contents, such as email sign-ups, free newsletter offers, social media widgets, user accounts, and so on. It doesn’t emphasize font, color, and graphics just yet. During this stage, you may need to make not just one but several wireframes, depending on the client’s preferences.

Step #4 – Creating High-fidelity Wireframes
Notably, a high-fidelity wireframe is a more detailed version of the low-fidelity one. It is composed of three main elements: the information design, the navigation design, and the user interface design. The purpose of this step is to present how user-friendly the site will be. At this stage, nothing is final yet, so it is still necessary to come up with several wireframes that would best suit the client’s needs.

Step #5 – Making a Visual Mock-up
As the term implies, a mock-up is a “simulation” of the final product. It aims to show the client what the website will look like when viewed through a browser window. It includes the fonts, colors, spacing, and graphics that will be featured. Once the client gives the thumbs-up to the mock-up (pardon the pun), the web developer can start building the web pages.

Ready to start designing? Simply follow this five-step creative process and have fun!