Ever since I started development I have struggle with my personal project designs. To correct this I decided to try out a design tool called Figma. I love building projects but I never have a design to work from. I would just make things up as I go which led to reverting hours worth of progress on lost ideas.

I thought 'time for a change!' 👏.

I have always been interested in art & design and I loved it at school. So I thought I could apply this using Figma. First I would design a desktop landing page for a fictional Software As A Service (SaaS) product with Figma and then build it with code.

I'm not saying you need to go out and put all of your focus on web-design as a developer. However a little knowledge will make you a better developer. If you start working in the industry it is possible you'll end up working with a web designer.

This means you'll start developing to satisfy some design right? 🙂

All of this got me thinking about the benefits of learning a little design for a developer. Let's explore these benefits and the project that inspired them.

My Figma landing page project

First let me share the deployed project. This is the hero page at desktop size 👇

and part of the featured services section 👇.

I wanted to keep the stack simple. No need for any complicated frameworks here. It is built with 👇

• Figma for design
• HTML
• SCSS
• Vanilla JS (Not required. Site functions the same without it)
• Snowpack

Live site is available here 👉kieran-sass-landing.netlify.app

Code is available here 👉 github repo

And the lighthouse scores 👇.

I still have a few improvements to make. These include:

• Reducing font sizes
• Altering the hero content
• Filling some of the whitespace in the features section after hero
• Maybe some subtle animations

Let me explain why the benefits you will see with a little design knowledge and how working from design improved my development efficiency 👏.

Content

1. You'll shorten your development time by using a design tool
2. Your project will look much better from the first version
3. You get practice for when you work with designers
4. Your eye for detail will improve
5. You start learning a new skill
6. Maybe your a better designer than developer

1.) You'll shorten your development time by using a design tool

If you're at least a little familiar with the basics of your design tool you should be able to speed up your development time. It took me a couple of hours to get accustomed to Figma before I started on the project.

I'm definitely no expert with design or Figma but I was quickly able to throw things on the page and piece something together. I was surprised at how fast I was able to do this and that it actually looked pretty good 😃. This couple of hours I spent designing the landing page saved me so much more time in development.

It is much easier to build when you have a full design to reference. I was able to visualize the different components I had meaning I could group common styles together in advance.

You will completely avoid situations where you decide to revert changes and lose potentially hours worth of work. I found it to be much more effective having my design side-by-side with the code and I don't ever think I can go back for any significant project 👏.

2.) Your project will look better from the first version

Leading on from the previous point your project UI will be much improved from the start. Trying out more complex designs is much quicker inside Figma. You can create all kinds of different shapes in seconds and move things around at will.

In previous projects the first versions of my UI design were pretty poor. I can't tell you how many times I've changed things around in my portfolio. Much of this could have been avoided if I started with a design in mind.

Be honest, how many times have you changed around your portfolio design? 😄

And your UI is vitally important especially if you expect to retain users on your site. Bad UI is one of my biggest turn offs for a website and spending a little time working out your design first will pay off later 😃.

3.) You get practice for when you work with designers

It is likely that at some point you will end up working with a web-designer. Having a little design knowledge will help you provide meaningful feedback and suggest changes etc.

Sometimes things that seem good in design doesn't translate well into code. Maybe it's inefficient or negatively affects other parts of the site. Whatever it is being able to recognize this is a useful skill to have to avoid losing hours of progress.

4.) Your eye for detail will improve

I found that creating a design from scratch focused my eye for detail. You are forced to ensure that every item is aligned as it should be and you'll start noticing when things are not. Because you don't have to write the code immediately there are less distractions and you can focus on one element at a time.

I realized I would focus in on factors like colors, typography and spacing making sure everything was exactly as I wanted and although not perfect it is a hell of a lot better that it otherwise would have been.

5.) You start learning a new skill

As developers we thrive on learning new skills. For me it's one of the biggest motivations because I love learning new things. Web-design is a skill that ties in closely with development. They complement each other 🤝.

If you think about it every time you build a project that includes a front-end you will be working with design whether you use a design tool or work in the browser.

It is very possible that one day you might be working on a solo project. Maybe it's some service that you intend to run as business. If this is the case you'll want to make sure your design is as good as it can possibly be because a bad UI will not get you anywhere.

6.) Maybe your a better designer than developer

This one is a stretch but you never know 😉. Maybe you realize you prefer design. It takes very little time to at least try it out and it will definitely make you are more well rounded developer.

Conclusion

I really loved this project! Creating the design was a lot of fun and actually a lot faster than I imagined. It's not perfect nor near the level of a designer but it's something I'm proud of 😄.

I will absolutely be using a design tool from now on going into personal projects after seeing the benefits to my work.

If you enjoyed the article please leave a like or let me know about it @Kieran6dev. I really love hearing your thoughts and comments.

Until next time 👋.