{"id":234,"date":"2025-08-29T18:20:57","date_gmt":"2025-08-29T18:20:57","guid":{"rendered":"https:\/\/cyan-wallaby-231954.hostingersite.com\/?p=234"},"modified":"2025-09-22T14:19:36","modified_gmt":"2025-09-22T14:19:36","slug":"ui-kit-and-app-design-for-octopus-dive-academy","status":"publish","type":"post","link":"https:\/\/mavicoutinho.com\/pt\/ui-kit-and-app-design-for-octopus-dive-academy\/","title":{"rendered":"UI Kit e Design do App para a escola Octopus Dive Academy"},"content":{"rendered":"<p>Esse projeto foi desenvolvido de novembro de 2024 a fevereiro de 2025 para a Melo Designer, com o objetivo de atender a uma escola de mergulho.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"446\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/octopus-1024x446.png\" alt=\"\" class=\"wp-image-489\" style=\"border-style:none;border-width:0px;border-radius:16px\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/octopus-1024x446.png 1024w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/octopus-300x131.png 300w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/octopus-768x334.png 768w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/octopus.png 1533w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Octopus Dive Academy<\/strong><\/h2>\n\n\n\n<p>A escola de mergulho oferece cursos de treinamento profissional para mergulhadores, como o curso Open Water Diver, al\u00e9m de cursos de primeiros socorros para ambientes marinhos.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>O projeto<\/strong><\/h2>\n\n\n\n<p>O aplicativo de mergulho foi projetado para instrutores, administradores da escola e estudantes.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Minha fun\u00e7\u00e3o<\/strong><\/h2>\n\n\n\n<p>Como Product Designer, eu liderei toda a experi\u00eancia e interface do usu\u00e1rio neste projeto.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The problem<\/strong><\/h2>\n\n\n\n<p>O principal pedido da escola \u00e9 ter um aplicativo abrangente que suporte os seguintes fluxos:<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\" style=\"margin-left:-24px\"><img decoding=\"async\" width=\"2272\" height=\"2264\" data-id=\"491\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-1.png\" alt=\"\" class=\"wp-image-491\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-1.png 2272w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-1-300x300.png 300w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-1-1024x1020.png 1024w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-1-150x150.png 150w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-1-768x765.png 768w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-1-1536x1531.png 1536w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-1-2048x2041.png 2048w\" sizes=\"(max-width: 2272px) 100vw, 2272px\" \/><\/figure>\n<\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Componentes principais<\/strong><\/h2>\n\n\n\n<p>Para construir a interface, componentes foram criados para manter consist\u00eancia e padr\u00f5es em todos os fluxos. Componentes como calend\u00e1rio, modais, barra de navega\u00e7\u00e3o e bot\u00f5es foram os mais usados frequentemente.<\/p>\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 wp-container-content-2155ee95\"><img decoding=\"async\" width=\"616\" height=\"378\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-5.png\" alt=\"\" class=\"wp-image-495\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-5.png 616w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-5-300x184.png 300w\" sizes=\"(max-width: 616px) 100vw, 616px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large wp-container-content-2155ee95\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-4-1024x590.png\" alt=\"\" class=\"wp-image-494\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-4-1024x590.png 1024w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-4-300x173.png 300w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-4-768x442.png 768w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-4-1536x884.png 1536w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-4.png 1598w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"400\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-2.png\" alt=\"\" class=\"wp-image-492\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-2.png 844w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-2-300x142.png 300w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-2-768x364.png 768w\" sizes=\"(max-width: 844px) 100vw, 844px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"652\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-6.png\" alt=\"\" class=\"wp-image-496\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-6.png 884w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-6-300x221.png 300w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-6-768x566.png 768w\" sizes=\"(max-width: 884px) 100vw, 884px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"980\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-7.png\" alt=\"\" class=\"wp-image-497\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-7.png 884w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-7-271x300.png 271w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-7-768x851.png 768w\" sizes=\"(max-width: 884px) 100vw, 884px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"678\" height=\"400\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-8.png\" alt=\"\" class=\"wp-image-498\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-8.png 678w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-8-300x177.png 300w\" sizes=\"(max-width: 678px) 100vw, 678px\" \/><\/figure>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tipografia<\/strong><\/h2>\n\n\n\n<p>Trabalhamos com dois tipos de estilos de texto: Raleway para t\u00edtulos e Roboto para par\u00e1grafos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"338\" src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-9-1024x338.png\" alt=\"\" class=\"wp-image-499\" srcset=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-9-1024x338.png 1024w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-9-300x99.png 300w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-9-768x253.png 768w, https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/image-9.png 1152w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Resultados<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted src=\"https:\/\/mavicoutinho.com\/wp-content\/uploads\/2025\/08\/video-octopus.mov\"><\/video><\/figure>","protected":false},"excerpt":{"rendered":"<p>Esse projeto foi desenvolvido de novembro de 2024 a fevereiro de 2025 para a Melo Designer, com o objetivo de atender a uma escola de mergulho. A escola de mergulho oferece cursos de treinamento profissional para mergulhadores, como o curso Open Water Diver, al\u00e9m de cursos de primeiros socorros para ambientes marinhos.<\/p>","protected":false},"author":1,"featured_media":742,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[13,10,20],"class_list":["post-234","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\/234","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=234"}],"version-history":[{"count":8,"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/posts\/234\/revisions"}],"predecessor-version":[{"id":555,"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/posts\/234\/revisions\/555"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/media\/742"}],"wp:attachment":[{"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/media?parent=234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/categories?post=234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mavicoutinho.com\/pt\/wp-json\/wp\/v2\/tags?post=234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}