How do you get an idea about the design first when you aren't a designer

Saniru Rajapaksha
4 replies
Not every developer does design. And personally, I've found designing the UI is too boring and not interesting whatsoever, and also starting to code without a design is also a really tough thing to do. How do you guys manage to get an idea about the UI design when starting to code? Do you guys design the UI first by yourself and then hop into coding or is it just by figuring out what to do next on the UI as you code along?


Often times I start doing a mockup on Figma. This mockup is only basic functionality and layout and without any details. I use plain shapes like gray rectangles in this stage. After that, I start coding and go with the flow. Sometimes I find more things to include in my design as I go along, sometimes it's good enough. Once I programmed the basic layout and functionality, I invest in a better design, either coming up with something by myself or hiring a designer. So, my approach is to start with a mockup that only contains the shapes and layout and fulfills the functionality I have in mind.
Saniru Rajapaksha
@atlas_00 Thanks for sharing. I'm also taking somewhat same path as yours
Björn Morén
Forget about the graphical design, and focus on what kind of GUI controls you need (buttons, lists, tabs, etc), and how they should be arranged on screen for the most intuitive experience. There is no way around that process, because before you have figured out a GUI, you can't write a single line of code. The actual graphical design can come later, made by someone with design skills.
Jesús Zorrilla
Try using Adobe XD, you can put some boxes, zoom in, zoom out, and preview on your phone (by using the Mobil app) and if it does not feel right, change/move, zoom in, zoom out until you have something. You can also use it with notepad and write all the things your project will do, and how, and then try to make it with boxes... At the end you'll have a basic idea of UI and de UX without been an expert. Also, try using only 2-3 text styles, a limited color palette and a consistent padding from the border