How I Learned to Build My Own Interfaces

As a good backend developer, I can say I'm a beginner in the world of frontend and design. I've always worked as a Full Stack developer, but with more of a focus on the backend (PHP 💜). In 2022, I decided to venture into the universe of design and dive deeper into frontend, because I wanted to create and develop the layouts of my own projects. Did I know anything about design? Very little, almost nothing, to be honest. But even so, I embraced the challenge and started a new journey. I'm going to tell you a bit about how I learned to build my own interfaces.

For this read, I recommend some good lofi, along with a cup of coffee or tea. Ready? Let's get to reading.

The beginning of it all

If there was anyone with zero design skills and far from being good at frontend, that person was me. I considered myself a true survivor, doing my best with what I knew. The projects I worked on were in Angular, and the videos from Loiane's YouTube channel were my real lifesaver, helping me a lot during that phase.

After a while working with backend, I felt I had a good grasp of the area and wanted to challenge myself with something new. I thought: why not frontend? And not only that, why not also create the design of my own projects? I had already made a few clones of interfaces, but over time I realized I wasn't actually learning. You know that feeling of just copying and pasting? That's exactly how I felt. Nothing against that kind of practice (I think it's totally valid), but I wanted to go further, think outside the box, and develop my own projects from scratch, from the design to the final interface.

Well, it wasn't that easy. On my first attempt, I spent hours staring at a blank screen, unable to do anything. I tried again and again, and nothing. Soon came the thought that this wasn't for me and that I wouldn't be able to do it.

Where was I going wrong?

At the start of my learning, something that held me back a lot was the urge to create something super elaborate, beautiful, and complex, with that air of being super innovative. However, this mindset ended up hurting me, because I could never get past the blank page or keep going on a project, since it wasn't good enough, and then I'd give up.

Every project went like this: I'd spend hours trying to build something cool in Figma, but nothing seemed good enough. In the end, all that was left was a blank screen or an unfinished one, and a huge feeling of frustration. The same happened when I tried to develop an interface; even though I knew HTML, CSS, and JavaScript, sometimes I'd get really stuck, unable to solve a problem.

I have many unfinished projects because of this.

But here's the question: was it really necessary to start out that way, with such a mindset? If I was at the beginning of my journey. And that was my other mistake, I didn't respect my own learning process, I wanted to skip too many steps to advance quickly, to the point that I forgot how important the fundamentals were and that I was also lacking knowledge.

An example of this was me jumping to Next.js without yet understanding important React concepts.

What did I do to improve?

After understanding where I was going wrong in both frontend and design, I began to structure my studies better. First, I decided to start with the design part, because having focus is important; cramming several things to study at the same time can throw you off.

Important tip: Have a focus. Pick one area to study, break the content within it into small parts. Mark a check on each topic you've finished. In the end, you'll realize how much you've grown. Remember, you don't need to rush, it's not a marathon. Respecting your learning process is important.

Moving on, a friend recommended a book called The Non-Designer's Design Book, which was great for starting to understand the fundamentals. I started studying a bit about UX/UI and following professionals in the field. I also thought: What if I try starting with something really simple? Without so many details and it doesn't need to be beautiful, just to start getting into the flow and see if I can make something. I remember making the artwork for the tech content I created for my Instagram, and that helped me a lot. And little by little I kept improving in the design part.

Over time, I had an easier time sketching and building screens in Figma, and with that I saw it was time to go back to frontend. Now, I'm doing a review of the JavaScript language through a really good YouTube channel called SuperSimpleDev (recommended). It teaches a lot about the basic and advanced concepts of the language.

Look for references and sites for inspiration

A mistake I also made at the beginning was wanting to do something truly from scratch, without any influence from other designs that already existed. A selfish thought that ended up hurting me a lot. You can build layouts from scratch, but with references that can help you in that process.

Sites like:

Became my greatest allies when building a design. I also follow some YouTube channels, such as:

Design events are also a source of inspiration for me, both in the visual identity and in the talk slides. I also have several sites saved that inspire me with their design. And even so, I'm able to create something with my own signature and design.

Remember: you don't have to do everything alone

I reached out to my friends to help me. Whenever I finish a design or an interface, I send it to them so they can give me feedback on how it's coming along, what I can improve, and so on.

I also collaborate on projects with them, and we do code reviews for each other, which is really cool.

It's worth noting that none of the friends I send my designs to are trained in Design. That turns out to be interesting, because I end up getting their perspective as users. As for the frontend part, I send it to my friends who work in the field.

I started having mentoring sessions with a friend who is a designer. During the mentoring, I gained a better understanding of the field.

Look for friends or people who can support you on your journey.

Practice leads to "perfection"

Without practice, I wouldn't have gotten to where I am today. It was fundamental to this whole process, and it doesn't lead to perfection, but it will help you grow. I didn't gain superpowers in design; on the contrary, I often catch myself building a screen, then it doesn't work out, so I go and try again, then I look at it, realize I can improve it, and so it goes. My Figma won't let me lie (laughs).

figma interface sketch

The same goes for the frontend. I keep practicing.

Conclusion

So, I'll leave two reflections. Two questions that guided me throughout this process:

Do all websites need to be completely different?
Do I really need to create something 100% original for it to work?

The answer I found is: no. Design patterns exist for a reason; they were devised by professionals who studied user experience deeply. And following these patterns doesn't take away the value of the creation; on the contrary: they are the foundation for building better and more intuitive interfaces.

Today, creating my own interfaces has become less scary. I'm able to think about the structure, sketch the screens, build them in Figma, and turn that into code with much more clarity and confidence. I still have a lot to learn, but I've understood that creating good interfaces is a continuous process, made of practice, study, and the courage to start, even without knowing everything.

If you're also on this path, know that every step matters. And the next one could be your best layout yet.