I prefer development over design but right now I am not working with a designer so guess what, I’m the designer.
The word on the web it to design in Adobe XD or Figma or Sketch before building your website in code. The rest of the post is from a living with pixels video which can be seen here.
Zoom out and see multiple pages and zooms and views (web versus desktop) colors web whitespace, etc.
Old version versus new versions. 10 versions of the homepage before the final going back and forth with a client. It takes time to build. Quickly build in figma before wasting time building in code.
Take the old site and screenshot and bring in for comparison
Bring in screenshots from other websites to use for inspiration (dribble)
You can bring in an inspiration board and send it to your client in an email and ask them what they like.
Professional design process for clients:
You can send a wireframe (a website in grayscale) so the client can just think about the structure and not worry about colors yet.
Only once the client agrees to the design will you build the website because it is very difficult to build it and change it later one.
Creating SVGs from the design is super easy (import from flaticon and then make adjustments)
Import images before (from client are too small or too big). your design and figma
The idea in designing in figma first is to get on the same page as early as possible
use view mode in figma. view mode is an uneditable but viewable version. developers can see CSS code. Can click other persons avatar to navigate around and show viewbox of something.
overall sharing with a client you want to screen share via a conference call instead of emailing images or a link. You ca verbally add context and “get a feel” for their feedback.