{"componentChunkName":"component---src-templates-project-template-project-template-js","path":"/projects/Chat-Application-UI-Design","result":{"data":{"project":{"title":"Chat Application UI Design","id":"96e4b52d-0a7e-5855-a9c7-fcd5f5e43c7d","description":"A cool UI for a chat application, which is simple and user friendly.","languages":["Figma","Ionicons Plugin"],"slug":"Chat-Application-UI-Design","content":{"childMarkdownRemark":{"html":"<p><img src=\"//images.ctfassets.net/d8xmlp2haryb/3UiFZ1dLqTieRfWWuDl1Yo/907f5db9c2906d2f4a122e53ba2777e7/chat.PNG\" alt=\"Chat Application UI Design Picture 1\"></p>\n<h2>Goal</h2>\n<p>Make a UI Design of a very simple chat application that is easy to use and not clustered and complicated to overwhelm the user.</p>\n<h2>Problem</h2>\n<p>Most of the chat applications we have now are not easy and simplier to users, they have e-commerce, marketing, advertisement capabilities in them, which overwhelms a new user or even a long term user.</p>\n<h2>Design System</h2>\n<p>A Design System keeps me consistent through the design of the application.</p>\n<h3>Colors</h3>\n<p><img src=\"//images.ctfassets.net/d8xmlp2haryb/5c0ho7TacciULSbkmhOK68/feea464202bbb51fc173db755803266d/Capture1.PNG\" alt=\"Capture1\"></p>\n<p>I choose these colors, the green and grey and I use the alpha value for controlling the density of the color on the sidenav and sidebar.</p>\n<ol>\n<li>The Green color is known for its nature centered ability to bring to a user and this brings comfortability and calmness to a user as nature does. The user must be at ease and expect that the application is complex.</li>\n<li>The dark grey color is for emphesis or to be more dominant on the page so that a user can always know where the sidenav and sidebar are located.</li>\n</ol>\n<h3>Fonts</h3>\n<p><img src=\"//images.ctfassets.net/d8xmlp2haryb/2aBxvXhQ1JhnN0tCMoukCB/34ce34dcd7c100278dc46b5b42fef20d/Capture4.PNG\" alt=\"Capture4\"></p>\n<p>I chose QuickSand for the font of the application. It brings a friendly look to the user, its not rough, sketchy nor standard but has a play-look on it. It is one of the nicest and used fonts besides Roboto.</p>\n<h3>Icons</h3>\n<p>I have used Ionicons for the icons of the application. They are easy to use, customize and very minimal, which benefits big time when importing them into your app.</p>\n<h2>Results</h2>\n<p><img src=\"//images.ctfassets.net/d8xmlp2haryb/3UiFZ1dLqTieRfWWuDl1Yo/907f5db9c2906d2f4a122e53ba2777e7/chat.PNG\" alt=\"Chat Application UI Design Picture 1\"></p>\n<h2>Conclusion</h2>\n<p>Most social media apps are complex and overwhelming in terms of content so a simple UI Design makes a huge difference.</p>"}}},"site":{"siteMetadata":{"author":"Philane Msibi - UI/UX Designer and Software Developer"}}},"pageContext":{"slug":"Chat-Application-UI-Design"}},"staticQueryHashes":[]}