How to design a web app as developer

As indie developer I have one big issue; I really can’t come up with a beautifull designed websites. I am fluent in Javascript, CSS and HTML. I can translate a designed Figma/Sketch file into a beautifull working web app or landingpage. But I just cannot design something properly.

I have tried many things over the years. Initially, I thought it was the tools. So, to overcome this I learned how Sketch and Figma worked. That didn’t work out great. From using these tools myself I only learned which tools I preferred and why (I like Figma a lot by the way). But being able to use design tools, doesn’t make you a designer.

This frustrations is coming back to me again and again. So, it took the last few days to reflect over this and try to come up with a solution that actually works. I have identified a few issues with my design approach

  • I focussed on the tools, not the outcome. I thought having knowledge on how Figma or Sketch works, made me a better designer.
  • I skipped multiple steps in the design process, mainly because of impatience. I wanted to create a beautifull web design on a blanc canvas, while ignoring design steps like low fidelity mockups, high fidelity mockups, user interaction design and user experience design.
  • I was very result driven, and didn’t account for the process. Every beautifull website is not created over night by a single designer. Design takes time. Especially, when you are designing and building the website yourself, you should be satisified with taking baby steps.
  • I also tried design without any design tools. I just fired up a dev server and started hacking with CSS or a component library like Chakra-UI. However, again the same issue here, I didn’t break my design up in multiple phases. I want from a blank canvas to a beautifull navbar, that didn’t align with anything else in the site. I was - again - not applying any of the practises learned from low fideltiy or user interaction design phases. I was just focussing on a single component - while ignoring the bigger picture.
  • I cannot draw - so creating any custom design tokens are out of my league

Reflecting over the process and steps I took (or didn’t take), identified 2 main issues: I was being impatience and I didn’t follow any basic plan to get from a blank canvas to a beautifull design.

So, here is the challenge I came up with:

  • Don’t use any other graphic design tools like Figma, Sketch or Adobe XD. Just stick to the tools you know best. In my case: Chakra UI and their low level design system.
  • Split the design process in 3 phases:
    1. Low fidelity design: create basic layouts, only using black/white colors and whitepace.
    2. Make sure the site works: users can click links, the content is finished.
    3. As a last step: add colours, fonts and animations

So, here is my developer oriented process to design websites:

  • Implement low fidelty mockups in the browser, using default Chakra UI, Styled System or any other design system
  • Add colors, fonts, shadows, hovers, animations and spacing to create a high fideltiy mock up - mainly using a centralized theme of the design system
  • Outsource any other missing design tokens, like a logo, images and photos to an actual designer