Prototyping, timelines, coding, and more! Here are the most important steps to follow when designing a website.
While doing the process over and over for many years, my best products come to life when the stages of design were followed and there was time in between each iteration reflect and let everything sink in; with finely designed timelines and review stages added in the design process, we have been able to cater a better outcome. In earlier years of my experience, I would jump across an idea to development – which may still happen for prototyping an idea; today I find it most practical to go through each step.
1.Project Definition – Gathering the goal and what the project is going to deliver is key for any project. For website design, the requirements will touch various areas and different ways of shaping the solution which makes it critical to make a list of required deliverables. Defining a Minimum Viable Product (MVP) is a good practice to finalize this step. MVP means what does my project need to deliver to function at the minimum, what are the additions we can add to it?
2.Project Timeline – With a deadline and start date as part of the project definition, it’s often best to design our timeline to allow iterations, reviews, and design with stakeholders. Rushing the design process is never a good idea and planning ahead can make your design project much more lasting!
3.Creating a Design Board – Digital or on a real wall, it’s great to put up all the ideas and the design pieces as we gather them and create the first prototypes all the way through the final design. It makes sure we follow and keep improving, not going back or sideways! Starting prototypes may suggest various directions, but once the design direction is defined, it becomes harder and very costly to go back.
4.Prototyping early – Again, it’s easier to prototype stuff and go through many ideas with rough lines and sketches. Once remaining pieces are assembled it becomes much harder to make abrupt moves or the changes become less viable on the count of our design decision-making process.
5.Organizing Content – From copy, fonts, images, and graphics, it’s best to keep them all organized. Documents can be shared via sharing apps to keep the editing team and the designers and developers on the same page. Images and media files also are best to be kept with the source files within shared folders across the team. Keeping the files organized will save time and will also help to deliver the same organization through the project. For example, when all source images are available, a developer can run an automation script with photoshop to export all images at the resolution needed and rename them quickly. The marketing team can review the file names and make sure they have the right meta and so on.
6.Low-Fidelity and High-Fed Design – Getting the final designs done with content, images and all key pages of a website in UI and UX design stage will help the development to go smooth and with little challenge. With responsive layouts also provided to developers, there are fewer assumptions and more predicted scenarios for each User Experience that needs to be achieved in our final web design.
7.Website Structure – CMS or Just HTML is the question we often ask. If the content is going to be changed more than once every 3-6 months, then developing a CMS website can be advantageous. With the idea of keeping a fresh site and blogging, often CMS wins this, but there are still plenty of landing pages and one-off campaigns that don’t need a CMS.
8.Website Coding - To deliver a website with custom design, handling html, css and javascript are needed to achieve the full results. Using page builders and template websites is also a way to get small projects up and running and there will be more automation and less need for coding all the pieces of front-end websites as we move forward with the evolution of web development technologies.
9.Website Testing – After completion of Frontend coding and backend integrations, the website is required to pass some web standard tests and compliance. There are stricter standards such as Web Accessibility becoming mandatory for the modern web that promotes equality of access to information.
10.Website Launch – Website launch can go as expected with planning and organizing the process. See our website launch checklist for what we recommend to be done before each launch.