Personal projects are a great way to demonstrate your skills. But what when you want to make some UI application. It needs to look good. You just spent weeks or months learning code, and the last thing you want is someone closing it because out of all that effort, they don’t like colors on it. When I build UI applications, I start with prototyping design, and here you can read how I do it.
Choosing your design
Design is complicated, mostly because you don’t have a clear rule. Yes, there are guides like which colors fit with which, sizes, and similar. But in the end, you need to set up your solution and hope people like it. Thankfully, today using google, dribble, and many other similar sites, you can see other people’s solutions for some inspiration. And this is where the problem comes for developers. If you are working on a personal project, you generally don’t have a designer. What you end up doing is imagining a solution in your head and start coding. A couple of hours, or even days in, your website starts getting its shape. And you don’t love it. You don’t even like it. You don’t like colors, that navigation just doesn’t fit as you would like it, and you have so many more complaints. But you already spent much time, and changing design would require a rewrite of everything. That is why I start with a design prototype.
What is a design prototype?
As a word prototype says, it is an early concept. It is a non-functional sample of how your new application needs to look. You are not writing any code; you are just focusing on the looks. Your argument might be that you are not an artist or don’t know Photoshop. The truth is that you don’t need to. There are many other existing solutions like Figma, Invision, and Adobe XD. Inside, you already have enough resources needed for the majority of UI applications. All you need to do in those programs is drag and drop squares. That way, you can see how your application looks before you even start to build it. It helps you organize your code better and gives you more information ahead of work.
Can I use pen and paper?
Pen and paper are an excellent option for sketching your layout. And I encourage you to start with that. But you cant stay at only that. Using pen and paper gives you information about the placement of the items. It is not telling anything about how colors fit with each other, exact values of sizes, and which font to use where. And if you are placing an image, you can’t draw that by hand. Using prototyping software, you get all that information.
Different devices
You often have to design for different devices: desktop and mobile. If you don’t know how it works ahead, it might be problematic to structure it. When using prototyping software, it is easy to plan for that. Most of them support layouts for different devices. Often, all you need to do is copy content from one layout to another and make some slight adjustments.
Actions
Having a design prepared is useful for having a clear picture of how your application needs to look. What could improve it even further is knowing how you would go between the screens. With most of the prototyping software, you can do this without writing any code. All you need to do is have your two screens designed, and you easily link them. You can select an element, and when you click on that element area, it takes you to the next screen.
If you like this article, you could follow me on Twitter or Linkedin. I write about software development and that way you can be up to date with my next. For my projects, you can also take a look at my Github page.