[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
Maintaining a consistent brand and UX design across all touch points, from cell phones to interconnected IoT devices, social networks, press releases and massive media presence is vitally important for a number of reasons.
It provides a recognizable and enjoyable experience, giving our user audiences the confidence to explore more of our application ecosystem.
It increases our efficiency and productivity by allowing us to move faster.
It allows our many services to be developed collectively, rather than independently.
Prior to Nubola, all of our Apps, WebApps and BO were designed differently, resulting in a sometimes confusing user experience. The creation of Nubola brings much needed consistency and consolidation. It standardizes our foundation, our brand management, grid, typography and iconography, as well as many of our interaction patterns such as cards, messages, carousels, etc. But, like any other language, the vocabulary of the Graphic System will expand over time.
Our teams will work tirelessly to increase your flexibility while focusing on ease of use.
As EatCloud evolves, it needs to be more flexible. A renewed and larger ecosystem of applications demands a wider range of expression, hence the constant technical and visual evolution of the Graphic System. This is an ongoing challenge, but one that we love. After all, we are designers and artists. It’s what we do; exploit ideas to create value. <\/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=”Scalable design” 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
As a design team grows it is common for different roles to specialize, this can lead to a fragmentation of the visual style, like a Tower of Design Babel, where each designer speaks his or her own language. This occurs when designers solve problems individually and not systematically. <\/span><\/p>\n Without a unified language the user interface begins to deteriorate.<\/span><\/p>\n Mockups are static photos that quickly become outdated. That’s why design teams build Graphic Systems. <\/span><\/p>\n [\/et_pb_blurb][et_pb_blurb title=”Consistent design” 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 Standardized components used consistently and repeatedly create applications that are easier for the user to understand. Standardized components also allow the team to spend less time focusing on styling and more time developing a better user experience. <\/span><\/p>\n [\/et_pb_blurb][et_pb_blurb title=”Fast iteration” 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 Whether evolving the UI styles of our Apps, or making UX changes to their flow, a good design system reduces the effort of hundreds of lines of code to just a few, allowing for painless iteration and agile experimentation.<\/span><\/p>\n [\/et_pb_blurb][et_pb_blurb title=”A creative framework” 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 The components of a design system are interdependent. This means that when a change is made in one location, the change will be inherited throughout the system. This makes style updates within a system trivial in effort but much more impactful. What used to be weeks, if not months, of work can now be accomplished in an afternoon. <\/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=”Low technical debt” 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 As teams age, they build debt. Not financial debt but technical and design debt. This debt is acquired by building in the short term. Design debt grows from the abundance of non-reusable and inconsistent styles and conventions and the interest on this debt is the impossible task of managing them. Over time, the accumulation of this debt becomes an enormous burden and leads to slow growth. <\/span><\/p>\n [\/et_pb_blurb][et_pb_blurb title=”Rapid prototyping” 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 Working with a design system allows us to create application flows using standardized components as if they were lego pieces. This allows us to build lots of prototypes and variants for experimentation, helping the team to gain insights and better data. <\/span><\/p>\n [\/et_pb_blurb][et_pb_blurb title=”Better usability” 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 Inconsistent conventions pummel usability. When you increase CSS for countless unique interface elements and their interactions, you also increase the cognitive load and weight of the page. This makes for a terrible user experience. It can also generate conflicts between CSS and JavaScript, potentially breaking our applications. By using a layout system, we can avoid these conflicts by building a holistic library of components, rather than on a page-by-page basis, which means we spend less time ensuring the quality of our apps. <\/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 <\/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 Understanding not only the what, but also the why behind the design of a system is critical to creating an exceptional user experience. Defining and adhering to standards is how we create that understanding. Doing so eliminates the subjectivity and ambiguity that often creates friction and confusion within product teams. Standards encompass both design and development. Standardizing elements such as naming conventions, accessibility requirements and file structure will help teams work consistently and avoid errors. Visual language is a fundamental part of our design standards. Defining the purpose and style of color, shape, type, icons, space and motion is essential to creating a consistent, brand-aligned user experience. Every component of our design system must incorporate these elements and they play an integral role in expressing our brand’s personality. Without standards, decisions become arbitrary and difficult to critique. Not only does this not scale, it creates an inconsistent and frustrating user experience. <\/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 Components are portions of reusable code within a design system and serve as the building blocks of the interface of our applications. Components vary in complexity. Reducing components to a single function, such as a button or drop-down menu, increases flexibility, making them more reusable. More complex components, such as tables for specific types of data, may serve their specific use cases well, but this complexity limits the number of applicable scenarios. The more reusable components are, the less we have to maintain them and the easier they are to scale. [\/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 [\/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>\nA good design system unites two key concepts: Standards and Components.<\/h2>\n
Standards: <\/h3>\n
Components:<\/h3>\n
Component-based development reduces technical overhead by making code reusable. Standards govern the purpose, style and use of these components. <\/p>\nEvery day more food with a home and fewer households without food<\/h4>\n