{"id":1418,"date":"2018-10-03T04:10:58","date_gmt":"2018-10-03T07:10:58","guid":{"rendered":"https:\/\/www.pengreendesign.com\/?p=1418"},"modified":"2024-01-09T03:49:37","modified_gmt":"2024-01-09T03:49:37","slug":"the-importance-of-designing-interfaces-with-coding-in-mind","status":"publish","type":"post","link":"https:\/\/www.pengreendesign.com\/pt-br\/a-importancia-de-projetar-interfaces-com-o-codigo-em-mente\/","title":{"rendered":"A import\u00e2ncia de projetar interfaces com o c\u00f3digo em mente"},"content":{"rendered":"<p>N\u00e3o, designers n\u00e3o precisam necessariamente codificar. A menos que queiram se aprofundar nesta \u00e1rea, principalmente designers de intera\u00e7\u00e3o, n\u00e3o \u00e9 necess\u00e1rio que saibam codificar do zero uma interface. Mas \u00e9 extremamente necess\u00e1rio entender o b\u00e1sico. Afinal, a interface \u00e9 o elo entre a m\u00e1quina e todo o funcionamento interno com o usu\u00e1rio leigo, portanto ela tem que falar ambas as l\u00ednguas.<\/p>\n\n\n\n<p>Os pontos principais que um designer precisa para pensar para melhorar seus trabalhos s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\n<p><strong>Entender a estrutura:<\/strong>&nbsp;como meu design vai ser implementado? Em grid? Quantas colunas? Posso colocar um elemento num local espec\u00edfico?<\/p>\n<\/li>\n\n\n\n<li>\n<p><strong>Entender o responsivo (web) ou adaptativo (aplicativo m\u00f3vel):<\/strong>&nbsp;Quais s\u00e3o os tamanhos de tela mais usados? Quais s\u00e3o as limita\u00e7\u00f5es de um smartphone? Como funciona os modos horizontais e verticais dos smartphones e tablets?<\/p>\n<\/li>\n\n\n\n<li>\n<p><strong>Work with technical&nbsp;possibilities and impossibilities:<\/strong> O que posso fazer? N\u00e3o posso fazer? Isso \u00e9 vi\u00e1vel de ser implementado? Quais as consequ\u00eancias de implementar isso, vou atrapalhar a experi\u00eancia do usu\u00e1rio para conseguir implementar o que eu projetei? Vou aumentar drasticamente o tempo de desenvolvimento?<\/p>\n<\/li>\n\n\n\n<li>\n<p><strong>Efici\u00eancia ao desenvolver:<\/strong>O que posso fazer de diferente que ir\u00e1 entregar a mesma experi\u00eancia - ou at\u00e9 melhor - mas deixar o desenvolvimento mais eficiente?<\/p>\n<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"600\" src=\"https:\/\/static.pengreendesign.com\/uploads\/2024\/01\/work-together-designer-developer-1.jpg\" alt=\"\" class=\"wp-image-7079\" title=\"\" srcset=\"https:\/\/static.pengreendesign.com\/uploads\/2024\/01\/work-together-designer-developer-1.jpg 644w, https:\/\/static.pengreendesign.com\/uploads\/2024\/01\/work-together-designer-developer-1-300x280.jpg 300w, https:\/\/static.pengreendesign.com\/uploads\/2024\/01\/work-together-designer-developer-1-13x12.jpg 13w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/figure>\n<\/div>\n\n\n<p>Os benef\u00edcios s\u00e3o percebidos por todos os envolvidos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <strong style=\"font-size: revert; color: initial;\">Desenvolvedores:<\/strong><span style=\"font-size: revert; color: initial;\"> Eles v\u00e3o agradecer ter uma interface feita com o c\u00f3digo em mente, pois isto agiliza seu trabalho, n\u00e3o precisam implementar solu\u00e7\u00f5es diferentes que possam a causar bugs e alongar o projeto. Al\u00e9m disso, h\u00e1 menos possibilidade de de recair a culpa neles por n\u00e3o desenvolver como foi projetado.<\/span> <\/li>\n\n\n\n<li> <strong style=\"font-size: revert; color: initial;\">Usu\u00e1rios finais:<\/strong><span style=\"font-size: revert; color: initial;\"> a experi\u00eancia destas pessoas ser\u00e1 muito pr\u00f3xima \u00e0quela pretendida pelos designers, pois as diferen\u00e7as entre o projeto gr\u00e1fico e a entrega ap\u00f3s o desenvolvimento diminuem e muito.<\/span> <\/li>\n\n\n\n<li> <strong style=\"font-size: revert; color: initial;\">Contratante:<\/strong><span style=\"font-size: revert; color: initial;\"> mais agilidade para receber o projeto, melhor retorno por entregar a experi\u00eancia pretendida, e menos stress, tudo isso gera custos menores para quem solicitou o servi\u00e7o.<\/span> <\/li>\n<\/ul>\n\n\n\n<p><b><i>B\u00f4nus: \u00e9 poss\u00edvel assim desenvolver uma interface menos remendada e mais \u00e1gil, o que facilita futuros trabalhos e ajustes.<\/i><\/b><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Resumindo<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Mais r\u00e1pido, mais limpo e melhores resultados no desenvolvimento, e uma experi\u00eancia mais agrad\u00e1vel para o usu\u00e1rio final.<\/h4>\n\n\n\n<p>Aqui na Pengreen Design, todos os nossos designers desenvolvem ou sabem o b\u00e1sico de desenvolvimento para que as interfaces sejam as melhores poss\u00edveis.<\/p>\n\n\n\n<p><strong>Gostaria de contar com uma equipe com designers experientes que desenvolvem as interfaces com o c\u00f3digo em mente para que voc\u00ea <a href=\"https:\/\/www.pengreendesign.com\/pt-br\/servicos\/terceirizacao\/\">terceirize o trabalho de design<\/a> tenha um projeto eficiente? Conte com a gente! Somos reconhecidos como uma das principais empresas de design de experi\u00eancia do usu\u00e1rio pelo <a href=\"https:\/\/www.designrush.com\/agency\/user-experience-design\" target=\"_blank\" rel=\"noopener\">DesignRush<\/a>, seu projeto estar\u00e1 em boas m\u00e3os.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.pengreendesign.com\/pt-br\/contato\/\">Agende uma reuni\u00e3o<\/a><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>No, designers do not necessarily have to code. Unless you want to dig deeper into this area, especially interaction designers, you do not need to know how to code from scratch an interface. But it is extremely necessary to understand the basics. After all, the interface is the link between the machine and all back-end [&hellip;]<\/p>","protected":false},"author":1,"featured_media":1432,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[22],"tags":[],"class_list":["post-1418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"meta_box":[],"_links":{"self":[{"href":"https:\/\/www.pengreendesign.com\/pt-br\/wp-json\/wp\/v2\/posts\/1418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pengreendesign.com\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pengreendesign.com\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pengreendesign.com\/pt-br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pengreendesign.com\/pt-br\/wp-json\/wp\/v2\/comments?post=1418"}],"version-history":[{"count":0,"href":"https:\/\/www.pengreendesign.com\/pt-br\/wp-json\/wp\/v2\/posts\/1418\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pengreendesign.com\/pt-br\/wp-json\/wp\/v2\/media\/1432"}],"wp:attachment":[{"href":"https:\/\/www.pengreendesign.com\/pt-br\/wp-json\/wp\/v2\/media?parent=1418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pengreendesign.com\/pt-br\/wp-json\/wp\/v2\/categories?post=1418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pengreendesign.com\/pt-br\/wp-json\/wp\/v2\/tags?post=1418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}