It is important to have a workflow that works for both you and the client
What are the stages to your design process?
Discovery
It is important to establish the scope of the project and also to gain insight of the company you are designing for. Ideally, a face-to-face meeting before work commences will help to ensure that you and your client's visions are aligned. Due to the global pandemic, a phone call and email questionnaire can also be used.
At this stage it is essential that you are happy with your relationship with your client. As with all relationships, if you get a bad feeling then it probably isn't worth persuing. Refund the deposit and say farewell!
Plan
At this stage a sitemap is submitted and discussed so that each party is happy with the general structure of the pages, and also the rough content that will be displayed. Next up, the designing can start.
Wireframe
I usually create black and white wireframes at this point. This will put down on paper the general layout and visual structure of the pages. I break these into components that can be reused, to ensure a consistent look throughout the whole site.
Mockup
Components can now be created fully in design software and the finer details can be discussed, such as colour, hover animations, button animations and visual prompts. Of course, some people trust your judgement ( that is why you have the job ) and this may not be required, or wanted!
Full Page Visual
Once everything is appoved, then we are free to create a homepage visual. This is one of my favourite stages in the process, and it is important to get correct. This will be the first real visual that the client will get, and sets the tone for the rest of the site. I usually spend a lot of time tweaking at this stage, ensuring that the site fit in perfectly with the company's branding.
Presentation
It is usually best to present the homepage design proposal to the client in person. You can gauge their reaction and also explain the decisions you have made. Why have you not put a giant chat window in the corner? Why can I not get every page from the navigation bar? Why have you not used the low resolution picture from my facebook page that has my mum in it?
Alternatively, present the visuals as responsive pages so the client can see a desktop and mobile version of the homepage.
If you have been thorough with the previous stages, then 9 times out of 10 there will be no changes required. You've nailed it. You can crack on with the code!
Top comments (1)
This is my web development process. I also start doing the design in figma or sometimes adobexd. Once the design is finished, then I use Desech Studio to import the design file and get the html structure and style. I have to change the margins and sizes and then I do the responsiveness.
Then I can work with static html/css and do the programming in vanilla javascript. If the project requires react, angular or vue, then I use the necessary Desech Studio plugin and export my code to react or what ever.