Whatever The Wearther

UX and UI design are two complicated and widely misunderstood parts of design. Many people, including designers, have had a hard time differentiating the two and often use the terms interchangeably. I took it upon myself to do some research and find out what the cause of this confusion is.

UX and UI work together but are not necessarily the same types of design. Let me explain; User Experience Design or UX Design is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.

User Interface Design or UI Design is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing the user experience. Essentially, UX design is about how the product feels and UI design is about how the product is laid out and how it looks. UI design is where the graphic designers come in; although in this field graphic designers are referred to as visual designers, their role is to design the icons, choose colours, fonts and other visual elements to be made for the interface.

Now that we’ve gotten past all the complicated stuff, the fun begins. To fully understand UI and UX design; I designed the interface for an app called Wearther; An app that helps people decide what to wear based on the weather.

When the user signs up, the app collects data about the user’s location, gender and style-sensibilities and uses this data together with the information gathered from local weather-forecasting sites and clothing retailers to give suggestions on what colours and clothing items the user could wear.

I started with designing the logo and identity of the app. I needed to make it easily recognizable so I used a degree symbol together with the letter ‘w’ for the icon. The degree symbol also appears in the full logo. Wearther BLOG-01 After designing the logo, I focused on the colours and fonts to be used for the app. I chose a neutral colour palette so that the colours of the app do not clash with those of the clothes. I used Helvetica for the descriptive text of the app and Tittilum Web for the login, sign-up and next buttons. Wearther BLOG-03Icons are an important part of an app’s interface; they help people navigate through the app quickly without having to read too much information. The icons I designed are fairly simple, minimal and straightforward. ezgif.com-optimizeI then moved on to designing the actual interface, starting with a grid. The grid allowed me to arrange my objects on-screen in the most efficient way, making sure that the controls, images and content were well displayed. After drawing out the grid I made a wireframe, which would then be the basic guidelines of where the objects would be placed. Wearther BLOG-02 Wearther BLOG-04Going through the process of designing this app was not easy. I had to make sure that everything is in the right place, the right size, the right language, etc. which all required a lot of contemplation and often going back to the drawing board and re-thinking some ideas. I think of all things this entire process taught me, two of the most important ones are researching and remembering to design for people. I think that a lot of designers, including myself, sometimes steer away unintentionally from designing for people and tend to design for ourselves but with a product like an app, I needed to take the back seat and keep my focus on the user. I quite enjoyed doing this and I like how the product turned out, lets just hope one day the app can be in development so that it will help all the poor souls we see out there in bad clothes to style-up a little. If this is not a public service, than I do not know what is.

Written by Muzi Ndlovu – Graphic Designer

Share your thoughts