{"id":1,"date":"2025-08-30T16:07:06","date_gmt":"2025-08-30T16:07:06","guid":{"rendered":"http:\/\/mavicoutinho.com\/?p=1"},"modified":"2025-09-04T06:04:00","modified_gmt":"2025-09-04T06:04:00","slug":"ui-kit-and-app-design-for-condominium","status":"publish","type":"post","link":"https:\/\/mavicoutinho.com\/pt\/ui-kit-and-app-design-for-condominium\/","title":{"rendered":"UI Kit and App Design for &#8220;Minha Encomenda&#8221;"},"content":{"rendered":"<p>Aplicativo para gerenciamento de entregas de encomendas, concebido e entregue em agosto de\n2024.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1621\" height=\"677\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/minha-encomenda-app.png\" alt=\"\" class=\"wp-image-526\" style=\"border-radius:16px\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/minha-encomenda-app.png 1621w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/minha-encomenda-app-300x125.png 300w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/minha-encomenda-app-1024x428.png 1024w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/minha-encomenda-app-768x321.png 768w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/minha-encomenda-app-1536x642.png 1536w\" sizes=\"(max-width: 1621px) 100vw, 1621px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Funcionalidade<\/strong><\/h2>\n\n\n\n<p>A principal funcionalidade era permitir que um porteiro registrasse as encomendas recebidas, que posteriormente poderiam ser entregues ao respectivo morador. O s\u00edndico do pr\u00e9dio tem a fun\u00e7\u00e3o de gerenciar o aplicativo e adicionar ou remover porteiros.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Entrega<\/strong><\/h2>\n\n\n\n<p>O projeto incluiu a entrega de um design completo do aplicativo para o cliente, incluindo um kit de interface do usu\u00e1rio totalmente personaliz\u00e1vel.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Problema<\/strong><\/h2>\n\n\n\n<p>O cliente precisava de um aplicativo que tivesse suporte para&nbsp;<strong>interfaces de tablet e celular,<\/strong>&nbsp;j\u00e1 que o porteiro usa tablets, enquanto outros usu\u00e1rios, como gerentes e moradores, podem acessar por seus celulares.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Minha fun\u00e7\u00e3o<\/strong><\/h2>\n\n\n\n<p>Product Designer respons\u00e1vel pelo&nbsp;<strong>Design de Experi\u00eancia (UX)<\/strong>&nbsp;e&nbsp;<strong>Interface do usu\u00e1rio (UI)<\/strong>.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Design System<\/strong><\/h2>\n\n\n\n<p>The first step was defining the color variables, with the primary color chosen by the client. Then, I created&nbsp;<strong>variable components per mode<\/strong>. Since the client wanted the app to support both&nbsp;<strong>light and dark modes<\/strong>, components were designed from the start to accommodate this feature.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cores<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"226\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-21-1024x226.png\" alt=\"\" class=\"wp-image-540\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-21-1024x226.png 1024w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-21-300x66.png 300w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-21-768x169.png 768w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-21.png 1360w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Componentes<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-grid wp-container-core-group-is-layout-988b637e wp-block-group-is-layout-grid\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"802\" height=\"692\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-14.png\" alt=\"\" class=\"wp-image-531\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-14.png 802w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-14-300x259.png 300w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-14-768x663.png 768w\" sizes=\"(max-width: 802px) 100vw, 802px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-13-1024x574.png\" alt=\"\" class=\"wp-image-530\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-13-1024x574.png 1024w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-13-300x168.png 300w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-13-768x430.png 768w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-13.png 1128w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"866\" height=\"808\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-15.png\" alt=\"\" class=\"wp-image-532\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-15.png 866w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-15-300x280.png 300w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-15-768x717.png 768w\" sizes=\"(max-width: 866px) 100vw, 866px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"409\" height=\"1024\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-19-409x1024.png\" alt=\"\" class=\"wp-image-536\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-19-409x1024.png 409w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-19-120x300.png 120w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-19-613x1536.png 613w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-19.png 766w\" sizes=\"(max-width: 409px) 100vw, 409px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"463\" height=\"1024\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-16-463x1024.png\" alt=\"\" class=\"wp-image-533\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-16-463x1024.png 463w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-16-136x300.png 136w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-16-768x1698.png 768w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-16-695x1536.png 695w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-16.png 770w\" sizes=\"(max-width: 463px) 100vw, 463px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-18-576x1024.png\" alt=\"\" class=\"wp-image-535\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-18-576x1024.png 576w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-18-169x300.png 169w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-18-768x1366.png 768w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-18.png 770w\" sizes=\"(max-width: 576px) 100vw, 576px\" \/><\/figure>\n<\/div>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Resultados<\/strong><\/h2>\n\n\n\n<p>O aplicativo foi criado em tr\u00eas vers\u00f5es diferentes, com suporte para iOS, Android e tablets.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/Gravacao-de-Tela-2025-08-21-as-13.58.14.mov\"><\/video><\/figure>","protected":false},"excerpt":{"rendered":"<p>Aplicativo para gerenciamento de entregas de encomendas, concebido e entregue em agosto de 2024. O projeto incluiu a entrega de um design completo do aplicativo para o cliente, incluindo um kit de interface do usu\u00e1rio totalmente personaliz\u00e1vel. A principal funcionalidade era permitir que um porteiro registrasse as encomendas recebidas, que posteriormente poderiam ser entregues ao respectivo morador. O s\u00edndico do pr\u00e9dio tem a fun\u00e7\u00e3o de gerenciar o aplicativo e adicionar ou remover porteiros.<\/p>","protected":false},"author":1,"featured_media":739,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[13,10,20],"class_list":["post-1","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-app","tag-design-system","tag-ux-ui"],"_links":{"self":[{"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":13,"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":785,"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/posts\/1\/revisions\/785"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/media\/739"}],"wp:attachment":[{"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}