Implementing User interface designs done by an experienced designer usually seem difficult at first look. Yes some designs could be complex mostly based on the User Experience part and it makes it difficult for the developer to navigate around the entire designs, but they are some core things you as a developer need to know about a design before you start writing your code and that is what I will talk about in this article.
The steps I am about to share are what helps me pull through every design that I wish to implement, it might be the conventional way but I believe it can help you
Before rushing into writing codes and implementing designs it is pertinent to have a thorough look at the design and be able to identify out three major things.
Things Every Design is Made Up Off
Every design is made up of the followings
- Lines: In every design, you come across you will find lines, which most often they come together to form a shape, it could be a circle, rectangle, square or triangle as the case may be. It is important to identify them accordingly. Most times the will come in with different colours and most times they serve as the container holding other things inside of it, it could be text, picture, illustration or even another shape. so but this you can have a shape embedded inside another shape.
- Vectors and Text: This probably could be referred to as the content of the designs, without them the design will just be empty with boxes and circles and no details. They are always placed in columns and row.
- Rows and Columns: It is very important to note that everything in the design is arranged in rows and columns, both shapes, vectors and text are often arranged next to each other either in a row (horizontally) or in column (vertically). Before starting to write code always endeavour to align out which item is aligned in a row and which is aligned in a column. I do this in my mind while inspecting the design and only when I can identify all the rows and column I can’t start implementing.
This is the most important things to note. However, the are other little things that will save you some fight with your designer
- Alignment: as a developer, to implement a design neatly you need to be aware of how items are aligned. For example, the space between the left hand of the screen should always be the same with the right-hand side for contents that takes full width. For example, if you have padding or margin of 10px from your left it should also be same with your right. Also very important let your centre be in the centre, avoid forcing items to be in the centre by using margin and padding to push them, always make use of your FlexBox.
- Responsiveness: Whether as a web developer or as a mobile developer you have to always put this into consideration because different screens can make your beautiful app have a comma in the eyes of your reviewer mostly it is advisable to make use of your FlexBox
If you take everything I have mentioned above before starting to code you will be halfway implementing the design.
