From Design To Development

Improving Your Design Tactics For Better Development

I have been coding applications on android for a long time now and being a native java coder I have to code the front-end part in XML which let’s face it gets a lot tedious when you don’t have a design set in your mind and almost every developer has faced this issue. From making layouts to fields to animations the process gets too time consuming if you start from scratch.

I have had proficiency in Designing and used to use softwares like Figma or Adobe XD a lot for freelance projects. Due to this reason I started using Adobe XD as my design tool so that I can make the front end part easier and efficient as these tools help in making high resolution assets which can be directly exported. So much has changed since the early days and it feels like developers and designers have been through a rollercoaster of evolutions and trends. However, while the actual look and functionality of our apps have changed, along with the tools we use to make them, there are some things that have very much stayed the same, such as the process of designing an app and how we go through the many phases that constitute the creation of an app. So in this article I’ll be focussing on designing and then developing the app on Android Studio.

Designing For Developers

Through this article I’ll be focussing on the process and not the idea. I went with a simple login based project manager application which can be used for a teacher student interaction for summer projects and showed how animation in Adobe XD works. I used my goto tool Adobe XD for this, reason being that wireframes and prototypes designed in XD give a more realistic and nearest to thought designs and animations all credits to the auto-animate feature. The design & development process that is usually followed is depicted in the picture below and no matter how much the trends change the basic chronology remains the same.

Sketch

Sketching compiles all the properties and additions decided at the Research stage. It’s a recursive process, works on hit and trial methods, till we obtain the most suitable construct of the website.

This step works to build wireframes. Wireframes are an abstract way to represent the ideology of the website, or how it’ll transit. All the transitions and mockups are made with keeping the technical background in mind, so that every decided step is later implementable. Deciding the user flow is a very important part of this step to make sure what all the user would go through to perform a certain task.

There are mainly two types of wireframes namely low-fidelity and high-fidelity. A low-fid gives an abstract to what the user flow would look like. It mainly consists of sketching the screens and introducing different components that could be included into different screens. This process gives an idea to the users about how the website would flow and basically gives an opportunity to the user to suggest any change which can then be included in the main part of the design.

Continue Reading