Website Design Process No-Code Development
10 Minute Read
August 24, 2021
I have just wrapped up a website project and I needed to stick to a tight time frame as I had a tight deadline.
I took some time at the start to make sure I had an overview and understanding of my process to make sure I could be efficient with my design and development process to hit the clients deadlines.
All the way from the Strategy to design to development and finally launch phase to see if there was any gaps in my process.
Here is the stages of the process below and explaination.
A great website offers much more than just the look but it solves a problem for the client through strategy. Work with the client to understand what they need in their website.
Wheather it is a fresh site or a redesign, It is important to understand what the purpose of the website is? Are their trying to generate leads with it? Build brand awareness, Showcase new products, build team culture or show their knowledge through a blog or content.
It’s important to know what kind of website you need to be making for them, if you understand their goals you can make something that will please them!
It is important to create a timeline with web design and to include the client in this process. This will help to avoid scope creep in your project. It will also help keep the client in check, for example if you are expecting things from them by a certain date have it written. This is a great benefit if you work for yourself or a company being able to maintain a timeline and be efficient with your time will help increase profit in your business.
One of the big things in building websites that I used to get wrong was the content side.
I would build a great sites but not work with the client with collecting text, images or any content to populate the website with. I would end up with having a empty shell of a website!
It is important at the start to work with the client in discussing content. Work out do they have the ability to provide what is needed? This would be writing copy, high quality images, video content or many other. Or do they need your help to do it? This can be a great help for clients is helping them source content, it will also help you network. Have suppliers you can rely on to help with these needs and more than likely they will refer you on as well when they need website help! It's a win win on every side!
A sitemap is a good way to create a birds eye view of how the website is going to connect. How is each page going to join to others. It's great at this stage to think through what is the ideal user journey you want your customer to run through. At this stage you don't need to make it pixel perfect but an overlay of what pages the website will need and how they will connect to each other.
Work with the client to figure out the visual style that works for the client. You can do this with helping the client by presenting mood boards of different visual styles to see what appeals to the client most. If it is an existing brand ask if they have a style guide that helps you understand the brand guidelines.
Start with sketching out the low-fidelity wireframes, this just means draw out what each page of the website will look like. I always like to start with pen and paper. It’s important to start rough and be ok with being messy you just need to get your ideas out. You don’t need to worry about making it pixel perfect just yet. It’s important to be able to move quickly through ideas and get them onto paper.
Use a legend (Guide) that makes sense to you to be able to recognise what each item represents, if you are working with a team you want everyone to be able to work it out as well. I also at times when in this stage will have boxes with a label e.g. 'nav menu', 'footer' as I am focusing more on the structure.
For Example, when I create wireframes I use the following items:
- Boxes with X's in them - mean an image
- Squiggly lines - Paragraph of text
- Box with a play button - A video
- Rectangle with H1-H6 - Heading and importance of it
- Box with a circle - Button or a clickable link
Once you have completed your sketches on paper time to move them onto the computer. Use a program like XD, Figma, Sketch. These are programs designed with Wireframing in mind.
This might seem a redundant to re-do it but it has helped me. By looking it out and redoing it you can most likely improve it. As before we were moving fast to get ideas out, now we slow it down slightly to really straight refining it. Start fleshing out some of the boxes and giving them a bit more depth of what they will look like and how they relate to other items.
By this point, you will need all of the content so this where its good to have a strict timeline so you don't have any down time.
You will still be using a wire framing tool like Sketch or XD but now you will be able to input all of your photo's, videos and text paragraphs.
Change the boxes with X's to actual photos and input the paragraphs you have been provided. You might need to rearrange some sections as the photo's or copy you have been provided fit's differently that how you laid it out. This is totally ok and shows your expertise to be able to adapt and still make the design work with what you have been provided.
It is good to get a check in with the client when this stage is finished. To make sure you are still going in the right direction. Book in a meet and walk them through your wireframes and address any issues they have.
I use Webflow as my choice for development. Webflow is a powerful no-code website builder. This is when you will be taking your high fidelity wireframes and turning them into fully functioning web pages.
Once you have your designs approved time to start developing. It is great to check back in on the style guide for the site listing the h1-h6 fonts, colour codes…etc, this will dramatically improve your efficiency as well as keeping everything on brand.
When building you might againfind areas you can improve on or need to be altered to improve the web experience.
The website development process has multiple steps I work through listed below.
With Modern Web design it is a must that your website is functioning and responsive to fit every screen size, from the largest monitor all the way down to your phone screen.
Test it on different screen sizes and make changes needed, having a great website needs to look just as amazing on mobile as it does on computer.
Does the website need a CMS (content management system), a blog or maybe a team page that can be updated easily without needing a developer to come help. Make sure this is laid out as easy to follow as possible.
This is where I add in animation once the design is finished. I normally take note as I am building of elements I would like to come back to later to animate
There are many websites being put up everyday, how is yours going to help the client stand out from the rest? Adding animation could be the finishing touch to make it really pop. Don’t rely on animation if you have bad design you still need the fundamentals. But adding high quality animations that improves the user experience and gives it the wow factor will have your client raving about you!
Not everyone does this but i don’t like giving a half baked website. I find it important to make sure the website is SEO optimised. Follow best practices like - alt tagging images, compressing images for quick loading, proper meta descriptions, title tags, submitting a sitemap to google. By showing all the extra mile you are putting in really helps to show how much of a complete package you are, it also is really setting your client up for success with a website that is easily discoerbale in the eyes of Google!
Here is final check off before the website goes live. Walk the client through and show them the functionality of it and how to use. I record videos so my client has a library they can refer back to instead of needing to contact me.
If anything needs changing here make them, but if you have been in contact during the period their shouldn’t be any huge surprising changes thrown at you as you have be collaborating through the entire process.
You will need to either purchase the domain if it’s a new website or gain access to their domain provider to put in the DNS information.
Setting up DNS is very easy within Webflow, this stage will be different depending on what you have built with website with and where you are planning on hosting it.
A rule of thumb I always attempt to launch websites later in the evening or over weekends, as normally this is a lower viewed time and gives me the time to work through any issues that arise.
Best to do a final bug check across browsers to see if there is any strange glitches and update accordingly.
This depends on what kind of business you are running, if you provide maintenance packages this is a good time discuss the future if it hasn’t already been. If you offer monthly SEO talk about this now.
Having a process you follow and can rely on has helped me improve my turn around time, efficiency and operate at a more professional level.
