DEV Community

Cover image for How Can a Programmer Design a Website? (That is actually good)
Itay Schechner
Itay Schechner

Posted on

How Can a Programmer Design a Website? (That is actually good)

As a web developer, the #1 topic I've been struggling with is designing. I managed to master HTML\CSS, React.js, Node.js, TypeScript, Java and Spring Boot but something about my websites always felt wrong.

As I began working on my big project called Partydeck, this issue became a real struggle.

This is the homepage I had designed last March. It looks clean, the theme is clear, and it's easy to understand what the user is expected to do. Yet, something is missing.

The Old Website

This is the homepage I am currently designing. You can see it is in a whole new level, containing colorful interfaces and is able to keep the user's eyes hooked for a longer time.

The New Website

What to do?

Here are some of the tips I found the most inspiring and that have helped me the most. Do you have any other good tips? Let me know in the comments!

Use a designing software

The reason this is so important is because it's much more easy to experiment and see what works best when you design your website in an external software before actually programming it.

You don't have to master Photoshop or be the best Adobe user on the planet, just have the minimal understanding of the software of your choice.

My personal preference is Figma, because... it's made of React.js, which I absolutely love.

A great example of the usage of Figma for designing websites can be found in this video:

Get Inspired

If you design a To-Do app, get to Todoist, or any other website with a purpose close to yours and get inspired by their design.

In my case, my website is similar to Quizlet and Kahoot, so I visited their websites many times to get inspired.

Don't be afraid to use colors

The only website I have ever seen with an almost 100% monochromatic UI is Instagram, and the reason it looks good is because the posts are the ones who keep the user's eyes hooked. Unless you design a social media application, use a color theme.

I don't want you to pick an exact shade, but a color from a pre-made theme such as the Material color theme.

Once you have a color theme, here's what you do:

  • What is your primary color? Use it for ~60% of your interface. In my case - the Tailwind.css indigo.
  • The secondary color should be similar to the primary, but a bit lighter or darker. You can use different shades of the same color to spice things up.
  • What are your accent colors? Picking one is interesting, but in the context of my application I thought I should pick more. Use it in unexpected locations.

A great usage of color themes can be found in the Quizlet website

About Me And My Project

Last October, My friend gave me an excellent app idea. I decided to develop it and gained tond of experience regarding app development, project management and product design. I'm planning on posting a lot about this topic later on.

Check out my project -

GitHub logo itays123 / partydeck

A cool online card game!

Partydeck - A cool online card game

The Partydeck app contains 3 microservices, all connected:

  • The live server, responsible for creating live games, shufling the cards and generating game codes. Powered by Java and the Spring framework.
  • The live game, the fronend React.js app that connects to the live server.
  • The game panel, a traditional MERN application to store and manage decks.

Want to give it a try?

  1. Go to the game panel url:
  2. Sign up and create a game (or choose one from the public library)
  3. Click 'play' to create a live game
  4. Invite your friends to play


This software has no open-srouce license, which means the default copyright laws apply to it. Under Github's terms of service, you can view and fork the code for this repository for private use.

For more information regarding non-licensed softwares:

Top comments (4)

steelwolf180 profile image
Max Ong Zong Bao

Nice, I love the video and I'm a figma fan. So I appreciate it that you do a video and article on it.

itays123 profile image
Itay Schechner

Thanks a lot! I'm a beginner with Figma, do you have any special hacks and plugins you use?
And It's not my video tho, it's just a useful video that expose me to the idea of using figma.

steelwolf180 profile image
Max Ong Zong Bao

I didn't started to use plugins when I started using Figma so it's kind of hard to help you in it.

Thread Thread
itays123 profile image
Itay Schechner

Go It. Thanks!