{"id":239869,"date":"2024-04-23T23:21:49","date_gmt":"2024-04-23T23:21:49","guid":{"rendered":"https:\/\/www.eatcloud.com\/principios-nubola\/"},"modified":"2025-05-28T14:23:46","modified_gmt":"2025-05-28T14:23:46","slug":"principios-nubola","status":"publish","type":"page","link":"https:\/\/www.eatcloud.com\/pt-br\/principios-nubola\/","title":{"rendered":"Princ\u00edpios Nubola"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.18.0″ _module_preset=”default” background_color=”#f0f2f4″ hover_enabled=”0″ sticky_enabled=”0″ custom_margin=”||||false|false” custom_padding=”100px||||false|false” locked=”off”][et_pb_row _builder_version=”4.18.0″ _module_preset=”default” theme_builder_area=”post_content”][et_pb_column _builder_version=”4.18.0″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_post_title meta=”off” featured_image=”off” _builder_version=”4.18.0″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” theme_builder_area=”post_content” custom_margin=”||0px||false|false” sticky_enabled=”0″][\/et_pb_post_title][et_pb_text _builder_version=”4.18.0″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

Manter uma marca consistente e um design UX em todos os pontos de contato, de telefones celulares a dispositivos IoT interconectados, m\u00eddias sociais, comunicados \u00e0 imprensa e presen\u00e7a maci\u00e7a na m\u00eddia \u00e9 de vital import\u00e2ncia por v\u00e1rios motivos.
Ele proporciona uma experi\u00eancia reconhec\u00edvel e agrad\u00e1vel, dando ao nosso p\u00fablico de usu\u00e1rios a confian\u00e7a para explorar mais o nosso ecossistema de aplicativos.
Ele aumenta nossa efici\u00eancia e produtividade, permitindo que nos movimentemos mais rapidamente.
Ele permite que nossos diversos servi\u00e7os sejam desenvolvidos coletivamente, e n\u00e3o de forma independente.
Antes do Nubola, todos os nossos aplicativos, WebApps e BO eram projetados de forma diferente, resultando em uma experi\u00eancia de usu\u00e1rio \u00e0s vezes confusa. A cria\u00e7\u00e3o do Nubola traz a consist\u00eancia e a consolida\u00e7\u00e3o que voc\u00ea tanto precisa. Ele padroniza nossas bases, nosso gerenciamento de marca, grade, tipografia e iconografia, bem como muitos de nossos padr\u00f5es de intera\u00e7\u00e3o, como cart\u00f5es, mensagens, carross\u00e9is etc. Mas, como qualquer idioma, o vocabul\u00e1rio do Sistema Gr\u00e1fico se expandir\u00e1 com o tempo.
Nossas equipes trabalhar\u00e3o incansavelmente para aumentar a sua flexibilidade e, ao mesmo tempo, focar na facilidade de uso.
\u00c0 medida que o EatCloud evolui, ele precisa ser mais flex\u00edvel. Um ecossistema renovado e maior de aplicativos exige uma gama mais ampla de express\u00f5es, da\u00ed a constante evolu\u00e7\u00e3o t\u00e9cnica e visual do sistema gr\u00e1fico. Esse \u00e9 um desafio constante, mas que n\u00f3s adoramos. Afinal de contas, somos designers e artistas. \u00c9 isso que fazemos: explorar ideias para criar valor. <\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.18.0″ _module_preset=”default” custom_padding=”110px||60px||false|false” global_colors_info=”{}” collapsed=”on”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.18.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.18.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_blurb title=”Design escal\u00e1vel” url=”#” use_icon=”on” font_icon=”0||divi||400″ icon_color=”#FFFFFF” image_icon_background_color=”#00B3FE” image_icon_width=”30px” icon_alignment=”left” _builder_version=”4.18.0″ _module_preset=”default” image_icon_custom_margin=”0px||0px||true|false” image_icon_custom_padding=”10px|10px|10px|10px|true|true” custom_padding=”20px|20px|20px|20px|true|true” border_radii=”on|10px|10px|10px|10px” border_width_all=”1px” border_color_all=”#D6D6D6″ border_radii_image=”on|10px|10px|10px|10px” border_color_all_image=”#00B3FE” locked=”off” global_colors_info=”{}”]<\/p>\n

\u00c0 medida que uma equipe de design cresce, \u00e9 comum que diferentes fun\u00e7\u00f5es se especializem, o que pode levar a uma fragmenta\u00e7\u00e3o do estilo visual, como uma Torre de Babel do Design, em que cada designer fala seu pr\u00f3prio idioma. Isso acontece quando os designers resolvem os problemas individualmente e n\u00e3o de forma sistem\u00e1tica. <\/span><\/p>\n

Sem uma linguagem unificada, a interface do usu\u00e1rio come\u00e7a a se deteriorar.<\/span><\/p>\n

Os mockups s\u00e3o fotos est\u00e1ticas que ficam desatualizadas rapidamente. \u00c9 por isso que as equipes de design criam sistemas gr\u00e1ficos. <\/span><\/p>\n

[\/et_pb_blurb][et_pb_blurb title=”Design consistente” url=”#” use_icon=”on” font_icon=”||divi||400″ icon_color=”#FFFFFF” image_icon_background_color=”#00B3FE” image_icon_width=”30px” icon_alignment=”left” _builder_version=”4.18.0″ _module_preset=”default” image_icon_custom_margin=”0px||0px||true|false” image_icon_custom_padding=”10px|10px|10px|10px|true|true” custom_padding=”20px|20px|20px|20px|true|true” border_radii=”on|10px|10px|10px|10px” border_width_all=”1px” border_color_all=”#D6D6D6″ border_radii_image=”on|10px|10px|10px|10px” border_color_all_image=”#00B3FE” locked=”off” global_colors_info=”{}”]<\/p>\n

Os componentes padronizados usados de forma consistente e repetida criam aplicativos que s\u00e3o mais f\u00e1ceis de serem compreendidos pelo usu\u00e1rio. Os componentes padronizados tamb\u00e9m permitem que a equipe dedique menos tempo ao estilo e mais tempo ao desenvolvimento de uma melhor experi\u00eancia do usu\u00e1rio. <\/span><\/p>\n

[\/et_pb_blurb][et_pb_blurb title=”Itera\u00e7\u00e3o r\u00e1pida” url=”#” use_icon=”on” font_icon=”||divi||400″ icon_color=”#FFFFFF” image_icon_background_color=”#00B3FE” image_icon_width=”30px” icon_alignment=”left” _builder_version=”4.18.0″ _module_preset=”default” image_icon_custom_margin=”0px||0px||true|false” image_icon_custom_padding=”10px|10px|10px|10px|true|true” custom_padding=”20px|20px|20px|20px|true|true” border_radii=”on|10px|10px|10px|10px” border_width_all=”1px” border_color_all=”#D6D6D6″ border_radii_image=”on|10px|10px|10px|10px” border_color_all_image=”#00B3FE” locked=”off” global_colors_info=”{}”]<\/p>\n

Seja evoluindo os estilos de interface do usu\u00e1rio de nossos aplicativos ou fazendo altera\u00e7\u00f5es de experi\u00eancia do usu\u00e1rio no fluxo de nossos aplicativos, um bom sistema de design reduz o esfor\u00e7o de centenas de linhas de c\u00f3digo para apenas algumas, permitindo uma itera\u00e7\u00e3o indolor e uma experimenta\u00e7\u00e3o \u00e1gil.<\/span><\/p>\n

[\/et_pb_blurb][et_pb_blurb title=”Uma estrutura criativa” url=”#” use_icon=”on” font_icon=”||divi||400″ icon_color=”#FFFFFF” image_icon_background_color=”#00B3FE” image_icon_width=”30px” icon_alignment=”left” _builder_version=”4.18.0″ _module_preset=”default” image_icon_custom_margin=”0px||0px||true|false” image_icon_custom_padding=”10px|10px|10px|10px|true|true” custom_padding=”20px|20px|20px|20px|true|true” border_radii=”on|10px|10px|10px|10px” border_width_all=”1px” border_color_all=”#D6D6D6″ border_radii_image=”on|10px|10px|10px|10px” border_color_all_image=”#00B3FE” locked=”off” global_colors_info=”{}”]<\/p>\n

Os componentes de um sistema de design s\u00e3o interdependentes. Isso significa que, quando uma altera\u00e7\u00e3o \u00e9 feita em um local, ela ser\u00e1 herdada por todo o sistema. Isso torna as atualiza\u00e7\u00f5es de estilo em um sistema triviais em termos de esfor\u00e7o, mas muito mais impactantes. O que costumava ser um trabalho de semanas, se n\u00e3o meses, agora pode ser realizado em uma tarde. <\/span><\/p>\n

[\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.18.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_blurb title=”Baixa d\u00edvida t\u00e9cnica” url=”#” use_icon=”on” font_icon=”||divi||400″ icon_color=”#FFFFFF” image_icon_background_color=”#00B3FE” image_icon_width=”30px” icon_alignment=”left” _builder_version=”4.18.0″ _module_preset=”default” image_icon_custom_margin=”0px||0px||true|false” image_icon_custom_padding=”10px|10px|10px|10px|true|true” custom_padding=”20px|20px|20px|20px|true|true” border_radii=”on|10px|10px|10px|10px” border_width_all=”1px” border_color_all=”#D6D6D6″ border_radii_image=”on|10px|10px|10px|10px” border_color_all_image=”#00B3FE” locked=”off” global_colors_info=”{}”]<\/p>\n

\u00c0 medida que as equipes envelhecem, elas acumulam d\u00edvidas. N\u00e3o se trata de d\u00edvida financeira, mas de d\u00edvida t\u00e9cnica e de projeto. Essa d\u00edvida \u00e9 adquirida com a cria\u00e7\u00e3o a curto prazo. A d\u00edvida de design aumenta com a abund\u00e2ncia de estilos e conven\u00e7\u00f5es n\u00e3o reutiliz\u00e1veis e inconsistentes, e os juros sobre essa d\u00edvida s\u00e3o a tarefa imposs\u00edvel de gerenci\u00e1-los. Com o tempo, o ac\u00famulo dessa d\u00edvida se torna um fardo enorme e leva a um crescimento lento. <\/span><\/p>\n

[\/et_pb_blurb][et_pb_blurb title=”Prototipagem r\u00e1pida” url=”#” use_icon=”on” font_icon=”}||divi||400″ icon_color=”#FFFFFF” image_icon_background_color=”#00B3FE” image_icon_width=”30px” icon_alignment=”left” _builder_version=”4.18.0″ _module_preset=”default” image_icon_custom_margin=”0px||0px||true|false” image_icon_custom_padding=”10px|10px|10px|10px|true|true” custom_padding=”20px|20px|20px|20px|true|true” border_radii=”on|10px|10px|10px|10px” border_width_all=”1px” border_color_all=”#D6D6D6″ border_radii_image=”on|10px|10px|10px|10px” border_color_all_image=”#00B3FE” locked=”off” global_colors_info=”{}”]<\/p>\n

Trabalhar com um sistema de design nos permite criar fluxos de aplicativos usando componentes padronizados, como pe\u00e7as de lego. Isso nos permite criar muitos prot\u00f3tipos e variantes para experimenta\u00e7\u00e3o, ajudando a equipe a obter insights e dados melhores. <\/span><\/p>\n

[\/et_pb_blurb][et_pb_blurb title=”Melhor usabilidade” url=”#” use_icon=”on” font_icon=”R||divi||400″ icon_color=”#FFFFFF” image_icon_background_color=”#00B3FE” image_icon_width=”30px” icon_alignment=”left” _builder_version=”4.18.0″ _module_preset=”default” image_icon_custom_margin=”0px||0px||true|false” image_icon_custom_padding=”10px|10px|10px|10px|true|true” custom_padding=”20px|20px|20px|20px|true|true” border_radii=”on|10px|10px|10px|10px” border_width_all=”1px” border_color_all=”#D6D6D6″ border_radii_image=”on|10px|10px|10px|10px” border_color_all_image=”#00B3FE” locked=”off” global_colors_info=”{}”]<\/p>\n

Conven\u00e7\u00f5es inconsistentes prejudicam a usabilidade. Quando voc\u00ea aumenta o CSS para in\u00fameros elementos exclusivos da interface e suas intera\u00e7\u00f5es, tamb\u00e9m aumenta a carga cognitiva e o peso da p\u00e1gina. Isso cria uma experi\u00eancia de usu\u00e1rio terr\u00edvel. Al\u00e9m disso, pode levar a conflitos entre CSS e JavaScript, o que pode danificar nossos aplicativos. Com o uso de um sistema de design, podemos evitar esses conflitos criando uma biblioteca hol\u00edstica de componentes, em vez de uma p\u00e1gina por p\u00e1gina, o que significa que gastamos menos tempo garantindo a qualidade de nossos aplicativos. <\/span><\/p>\n

[\/et_pb_blurb][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.18.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.18.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.18.0″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

Um bom sistema de design vincula dois conceitos-chave: padr\u00f5es e componentes.<\/h2>\n

 <\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.18.0″ _module_preset=”default” global_colors_info=”{}” column_structure=”1_2,1_2″][et_pb_column type=”1_2″ _builder_version=”4.18.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.18.0″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

Padr\u00f5es: <\/h3>\n

Compreender n\u00e3o apenas o qu\u00ea, mas tamb\u00e9m o porqu\u00ea do design de um sistema \u00e9 fundamental para criar uma experi\u00eancia excepcional para o usu\u00e1rio. Definir e aderir a padr\u00f5es \u00e9 a forma de criar esse entendimento. Isso elimina a subjetividade e a ambiguidade que geralmente criam atrito e confus\u00e3o nas equipes de produtos. Os padr\u00f5es abrangem tanto o design quanto o desenvolvimento. A padroniza\u00e7\u00e3o de elementos como conven\u00e7\u00f5es de nomenclatura, requisitos de acessibilidade e estrutura de arquivos ajudar\u00e1 as equipes a trabalhar de forma consistente e a evitar erros. A linguagem visual \u00e9 uma parte fundamental dos nossos padr\u00f5es de design. Definir a finalidade e o estilo de cor, forma, tipo, \u00edcones, espa\u00e7o e movimento \u00e9 essencial para criar uma experi\u00eancia de usu\u00e1rio consistente e alinhada \u00e0 marca. Cada componente do nosso sistema de design deve incorporar esses elementos e eles desempenham um papel fundamental na express\u00e3o da personalidade da nossa marca. Sem padr\u00f5es, as decis\u00f5es se tornam arbitr\u00e1rias e dif\u00edceis de criticar. Isso n\u00e3o s\u00f3 n\u00e3o \u00e9 dimensionado, como tamb\u00e9m cria uma experi\u00eancia de usu\u00e1rio inconsistente e frustrante. <\/p>\n

 <\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.18.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.18.0″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

Componentes:<\/h3>\n

Os componentes s\u00e3o partes de c\u00f3digo reutiliz\u00e1vel em um sistema de design e servem como blocos de constru\u00e7\u00e3o da interface de nossos aplicativos. Os componentes variam em complexidade. A redu\u00e7\u00e3o dos componentes a uma \u00fanica fun\u00e7\u00e3o, como um bot\u00e3o ou um menu suspenso, aumenta a flexibilidade, tornando-os mais reutiliz\u00e1veis. Componentes mais complexos, como tabelas para tipos espec\u00edficos de dados, podem atender bem a seus casos de uso espec\u00edficos, mas essa complexidade limita o n\u00famero de cen\u00e1rios aplic\u00e1veis. Quanto mais reutiliz\u00e1veis forem os componentes, menos teremos de mant\u00ea-los e mais f\u00e1cil ser\u00e1 dimension\u00e1-los.
O desenvolvimento baseado em componentes reduz a sobrecarga t\u00e9cnica ao tornar o c\u00f3digo reutiliz\u00e1vel. Os padr\u00f5es regem a finalidade, o estilo e o uso desses componentes. <\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”pie de pagina funcional” _builder_version=”4.16″ background_color=”#00b3fe” collapsed=”off” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.16″ custom_padding=”||2px|||” collapsed=”off” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.16″ global_colors_info=”{}”][et_pb_image src=”https:\/\/www.eatcloud.com\/wp-content\/uploads\/2020\/03\/eatcloud-final-blanco.png” _builder_version=”4.16″ width=”21%” module_alignment=”left” global_colors_info=”{}”][\/et_pb_image][et_pb_text _builder_version=”4.16″ text_font_size=”10px” text_line_height=”2.8em” link_font=”||||||||” link_text_color=”#ffffff” header_3_font=”Encode Sans Semi Condensed|600|||||||” header_3_font_size=”16px” header_3_letter_spacing=”2px” header_3_line_height=”1.6em” background_layout=”dark” width=”100%” custom_margin=”||7px|||” custom_padding_phone=”20px|20px|20px|20px|true|true” custom_padding_last_edited=”off|desktop” text_font_size_tablet=”” text_font_size_phone=”14px” text_font_size_last_edited=”on|desktop” header_3_font_size_tablet=”24px” header_3_font_size_phone=”18px” header_3_font_size_last_edited=”off|desktop” locked=”off” global_colors_info=”{}” header_2_2_font_size_tablet=”36px” header_3_2_font_size_tablet=”36px” header_4_2_font_size_tablet=”36px” header_5_2_font_size_tablet=”36px” header_6_2_font_size_tablet=”36px” header_2_2_font_size_phone=”24px” header_3_2_font_size_phone=”24px” header_4_2_font_size_phone=”24px” header_5_2_font_size_phone=”24px” header_6_2_font_size_phone=”24px” header_2_2_font_size_last_edited=”on|phone” header_3_2_font_size_last_edited=”on|phone” header_4_2_font_size_last_edited=”on|phone” header_5_2_font_size_last_edited=”on|phone” header_6_2_font_size_last_edited=”on|phone”]<\/p>\n

A cada dia, mais alimentos nos lares e menos fam\u00edlias sem alimentos<\/h4>\n

[\/et_pb_text][et_pb_social_media_follow _builder_version=”4.16″ position_origin_a=”bottom_right” position_origin_f=”bottom_right” position_origin_r=”bottom_right” vertical_offset=”60px” horizontal_offset=”10%” text_orientation=”left” width=”100%” global_colors_info=”{}”][et_pb_social_media_follow_network social_network=”facebook” url=”https:\/\/l.facebook.com\/l.php?u=https%3A%2F%2Ffb.me%2Fplataformaeatcloud&h=AT1KLUr-vU2M-VOBK274PhRhq1GGC8vydCzpv1c39sdvo09ef8WCWm3umZ-Hc5cLn3a6V9kk6l9Ebhx6aKxZHc4-3OaZvhehp7LYqqPI9e_ko67HLOgiehq4LvK0OEFQhwO15-xQ” icon_color=”#ffffff” _builder_version=”4.16″ background_color=”rgba(0,0,0,0)” background_enable_color=”on” global_colors_info=”{}” follow_button=”off” url_new_window=”on”]facebook[\/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”instagram” url=”https:\/\/www.instagram.com\/eat.cloud\/” icon_color=”#ffffff” _builder_version=”4.16″ background_color=”rgba(0,0,0,0)” background_enable_color=”on” global_colors_info=”{}” follow_button=”off” url_new_window=”on”]instagram[\/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”twitter” url=”https:\/\/twitter.com\/eatcloud1″ icon_color=”#ffffff” _builder_version=”4.16″ background_color=”rgba(0,0,0,0)” background_enable_color=”on” global_colors_info=”{}” follow_button=”off” url_new_window=”on”]twitter[\/et_pb_social_media_follow_network][\/et_pb_social_media_follow][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ global_colors_info=”{}”][et_pb_code _builder_version=”4.16″ global_colors_info=”{}”]<\/p>\n