Let's talk about how we do the magic we're well known for.
The simple truth is that every application is a means-to-an-end. It's purpose so to say and how it is going to express this purpose with visual appearance. To the user one of the core things is obviously what use the application itself provides and from there it is the user experience part of it which allows the user to easily use the application to reach that purpose. So here we understand the concept & create possible methods in which this app would behave by applying imagination, writing down all of the ideas that we get.
Now that we've procrastinated about this concept & have written down all of our crazy ideas. We need to create a visual representation of these possibilities in what the muggles might call "wireframing". Which is like a skeletal representation of an app, it is mostly done on paper(don't tell us what to do) because it helps us in widely debating our approaches with the team. It involves in creating a rough layout & basic navigation. Wireframing stage is generally there to slash out possibilities and discover the best possible way to create a feasible UI & UX.
UI - which is user interface, the layout of the app. UX - the behaviour of the app & the user's experience while using the app. Now both of these play into each other, they're intricately involved. Let's say one of the features of the app is placed on a screen in the form of an unrecognizable icon, the user experience suffers because of bad interface, the user is not aware of what this icon does, or he forgets about it's purpose.
Equally if core features of the app require 4-5 steps of interaction & navigation through multiple screens, the UI suffers due to bad experience design. So in the wireframing we specifically deal with the issues of not running into such difficulties & properly creating a well structured layout for the appearance with a balanced navigation with least required interaction.
So now that we've after the first round of Designer vs. Client Vs. Developer is over, the final wireframe is converted to a prototype, which is basically a rough recreation of a working application. Basically the prototype is used to live test the UX, and if the navigation & application behaviour is good, if the user is able to achieve the desired outcome with minimal effort & if the the experience of reaching the desired outcome is enjoyable.
( Play dress up with the app, make it look pretty )
This is where the fun starts,
User Experience (UX) Designing: So here we the whole architecture of the design is created, such as the interaction structure, the navigation details & the Design Elements. The UX designer also decides on important animations such as layout movement & the choreography of the elements when animated, the easing in or easing out. The animation graph for the choreography. The purpose of such details is to achieve best possible application behaviour & a smooth experience.
User Interface (UI) Designing: Now at this stage we dress up the application, bring in the colors, put it in some magic with vibrance. The UI designer adds the life into the application by adding graphic design & typography, also in certain cases cute logo svg animations or visual effects. Investing time into this particular process allows us to build a uniquely specific visual appearance that caters specifically to the application's purpose as we had discussed earlier.
This phase itself has many review stages & is a multi-layered process but upon it’s completion the final output is achieved, nothing like sweet, sweet victory.