{"id":21,"date":"2023-09-26T16:33:21","date_gmt":"2023-09-26T16:33:21","guid":{"rendered":"https:\/\/uianimationguide.co.za\/?page_id=21"},"modified":"2023-11-14T14:52:22","modified_gmt":"2023-11-14T14:52:22","slug":"homepage","status":"publish","type":"page","link":"https:\/\/uianimationguide.co.za\/","title":{"rendered":"Home"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.23.1″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/1.-Home-50-1.jpg” background_position=”bottom_center” background_vertical_offset=”25%” min_height=”100vh” scroll_fade=”0|50|50|100|100%|100|0%” background_last_edited=”on|phone” background_image_phone=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/1.-Home-50-1.jpg” background_enable_image_phone=”on” background_size_phone=”custom” background_image_width_phone=”350%” background_position_phone=”top_left” background_horizontal_offset_phone=”5%” background_vertical_offset_phone=”2%” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”3_4,1_4″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” global_colors_info=”{}”][et_pb_column type=”3_4″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#FFFFFF” text_font_size=”50px” custom_margin=”10vh||80px||false|false” custom_margin_tablet=”10vh||80px||false|false” custom_margin_phone=”5vh||20px||false|false” custom_margin_last_edited=”on|phone” animation_direction=”left” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” text_line_height_tablet=”” text_line_height_phone=”1.2em” text_line_height_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

Welcome to the world of<\/p>\n

[\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#FFFFFF” text_font_size=”100px” custom_margin=”50px||50px||false|false” custom_margin_tablet=”50px||50px||false|false” custom_margin_phone=”20px||||false|false” custom_margin_last_edited=”on|phone” animation_direction=”left” text_font_size_tablet=”100px” text_font_size_phone=”40px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>UI Animation<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.23.1″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#FFFFFF” text_font_size=”18px” text_line_height=”1.8em” width=”47.6%” width_tablet=”47.6%” width_phone=”100%” width_last_edited=”on|phone” custom_margin=”50px|-200px|||false|false” custom_margin_tablet=”50px|-200px|||false|false” custom_margin_phone=”50px|0px|||false|false” custom_margin_last_edited=”on|phone” custom_padding=”6px|||||” animation_direction=”left” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>Empowering Designers with UI Animation<\/strong><\/p>\n

Unleash the power of motion to elevate your designs and captivate users through seamless and engaging interactions.<\/span><\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/1.-Welcome-to-the-world.gif” title_text=”1. Welcome to the world” src_tablet=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/1.-Welcome-to-the-world.gif” src_phone=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/1.-Welcome-to-the-world.gif” src_last_edited=”on|phone” disabled_on=”on|off|off” _builder_version=”4.22.2″ _module_preset=”default” width=”130%” width_tablet=”130%” width_phone=”50%” width_last_edited=”on|phone” module_alignment=”center” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/5.-Feedback-50.jpg” background_position=”top_center” background_vertical_offset=”6.3%” min_height=”100vh” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.23.1″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/2.-Reached-UI-Animate-Guide.gif” title_text=”2. Reached UI Animate Guide” _builder_version=”4.22.2″ _module_preset=”default” width=”100%” max_width=”80%” module_alignment=”center” custom_margin=”-30px||||false|false” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>You’ve reached the UI Animate Guide!<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” global_colors_info=”{}”]<\/p>\n

<\/span>Learn about the transforming possibilities of UI animation! Infuse your designs with motion that is dynamic, transitions that are seamless, and interactions that are engaging to create engaging user experiences.<\/span><\/p>\n

Let’s completely rethink how you build digital interfaces and how you lead users on intuitive journeys, shall we?<\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ custom_padding_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”efcf7d1d-5880-4d57-b334-749cdaf38d14″ background_color=”RGBA(255,255,255,0)” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/4.-Affordance-50.jpg” background_position=”top_center” background_vertical_offset=”15%” min_height=”100vh” custom_padding_tablet=”” custom_padding_phone=”0px||0px||false|false” link_option_url=”UIAnimation” border_width_top=”10px” border_color_top=”RGBA(255,255,255,0)” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” saved_tabs=”all” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>What is UI Animation?<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||0px|false|false” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>User interface animation, often known as UI Animation, is the process of applying visual effects to user interface elements and components in order to make them interactive. Imagine utilising a map to find your way through the galaxy; this type of interaction helps users find their way through a digital interface while also generating an immersive and entertaining experience for the user.<\/span><\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/What-is-UI-Animation-.gif” title_text=”What is UI Animation-” align=”center” _builder_version=”4.22.2″ _module_preset=”default” max_width=”80%” module_alignment=”right” custom_margin=”-50px||||false|false” custom_margin_tablet=”-50px||||false|false” custom_margin_phone=”0px||||false|false” custom_margin_last_edited=”on|phone” module_alignment_tablet=”right” module_alignment_phone=”center” module_alignment_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”UIAnimateGuide” _builder_version=”4.22.2″ _module_preset=”default” background_enable_color=”off” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/3.-Discoveraility-50.jpg” background_position=”top_center” background_vertical_offset=”11%” min_height=”100vh” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ module_id=”UIAnimateGuide” _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/What-is-the-UI-Animate-Guide.gif” title_text=”What is the UI Animate Guide” align=”center” disabled_on=”on|off|off” _builder_version=”4.22.2″ _module_preset=”default” max_width=”80%” module_alignment=”left” custom_margin=”-30px||||false|false” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>What is UI Animate Guide?<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” global_colors_info=”{}”]<\/p>\n

<\/span>The UI Animate Guide is a toolkit developed specifically for UI designers looking to include UI animations in their own digital interfaces. This toolkit features a series of recommendations, best practices and guidelines for creating animations.<\/span><\/p>\n

This toolkit contains a library of pre-designed animated examples that designers can utilise as a starting point or source of creative motivation in their own work.<\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”ToolkitGuidelines” _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/11\/1.-Homepage-Section-Full-50.jpg” parallax=”on” min_height=”100vh” scroll_fade_enable=”on” scroll_fade=”0|50|50|100|0|100|0%” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” saved_tabs=”all” global_colors_info=”{}”][et_pb_row module_id=”ToolkitGuidelines” _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#FFFFFF” text_font_size=”50px” text_line_height=”1.2em” custom_margin=”||10px||false|false” custom_padding=”|||30px|false|false” scroll_fade_enable=”on” hover_enabled=”0″ text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}” content_last_edited=”on|phone” content_phone=”<\/p>\n

<\/span><\/span><\/span>Toolkit Guidelines<\/span><\/p>\n

” custom_padding_last_edited=”on|phone” custom_padding_phone=”|||15px|false|false” sticky_enabled=”0″ content_tablet=”<\/p>\n

<\/span><\/span><\/span>Toolkit Guidelines<\/span><\/p>\n

” custom_padding_tablet=”|||30px|false|false”]<\/p>\n

<\/span><\/span><\/span>Toolkit Guidelines<\/span><\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_slider arrows_custom_color=”#FFFFFF” dot_nav_custom_color=”#8300E9″ arrows_custom_color_tablet=”#FFFFFF” arrows_custom_color_phone=”RGBA(255,255,255,0)” arrows_custom_color_last_edited=”on|phone” module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” header_text_color=”#FFFFFF” header_font_size=”25px” header_line_height=”1.2em” body_font=”Lato||||||||” body_text_color=”#FFFFFF” body_font_size=”18px” body_line_height=”1.8em” background_color=”RGBA(255,255,255,0)” text_orientation=”left” custom_margin=”-100px||||false|false” button_alignment_tablet=”” button_alignment_phone=”” button_alignment_last_edited=”on|phone” custom_css_slide_description=”font-family: lato, sans-serif;” custom_css_slide_title=”font-family: dita, sans-serif;||padding-bottom: 12px;||font-weight: 600;” custom_css_slide_button=”display: none;” body_text_shadow_style=”preset1″ body_text_shadow_color=”rgba(0,0,0,0)” text_shadow_style=”preset1″ text_shadow_color=”rgba(0,0,0,0)” global_colors_info=”{}” content_width__hover_enabled=”on|desktop” custom_css_slide_button_last_edited=”on|phone” custom_css_slide_button_phone=”display: none;” custom_css_slide_button_tablet=”display: none;”][et_pb_slide heading=”Space Unveiled: Animation in Storytelling” button_text=”Click Here” image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/0.-General-Guidelines.gif” arrows_custom_color_phone=”RGBA(255,255,255,0)” arrows_custom_color_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” background_enable_color=”on” background_enable_image=”off” parallax=”on” global_colors_info=”{}” sticky_transition=”on”]<\/p>\n

Ensure the animations used for visibility are subtle and not overly distracting, allowing essential content to shine.<\/p>\n

Use opacity transitions or fades sparingly to gently reveal or hide elements without overwhelming the user.<\/p>\n

[\/et_pb_slide][et_pb_slide heading=”Consistency across the Cosmos” button_text=”Click Here” image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/0.-General-Guidelines.gif” arrows_custom_color_phone=”RGBA(255,255,255,0)” arrows_custom_color_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” background_enable_color=”on” global_colors_info=”{}” sticky_transition=”on”]<\/p>\n

Consistency in animation is key to providing a seamless and harmonious user experience. This means using a unified set of effects, easing functions, and timing patterns throughout your designs.<\/p>\n

By sticking to a consistent animation language, you’ll ensure that your interfaces remain user-friendly and engaging.<\/p>\n

[\/et_pb_slide][et_pb_slide heading=”Embrace the universe of Animation” button_text=”Click Here” image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/0.-General-Guidelines.gif” arrows_custom_color_phone=”RGBA(255,255,255,0)” arrows_custom_color_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” background_enable_color=”on” global_colors_info=”{}” sticky_transition=”on”]<\/p>\n

Designers, take flight beyond the ordinary! Delve into the universe of animation possibilities provided by this toolkit.<\/p>\n

Unleash your creativity, push the boundaries of traditional UI Animations, and venture into crafting extraordinary and captivating cosmic interactions.<\/p>\n

[\/et_pb_slide][\/et_pb_slider][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ custom_padding_last_edited=”on|phone” module_id=”Aim” _builder_version=”4.22.2″ _module_preset=”efcf7d1d-5880-4d57-b334-749cdaf38d14″ background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/6.-Mapping-50.jpg” background_position=”top_center” background_vertical_offset=”13%” min_height=”100vh” custom_padding_tablet=”” custom_padding_phone=”0px||0px||false|false” link_option_url=”UIAnimation” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” saved_tabs=”all” global_colors_info=”{}”][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” custom_margin_tablet=”” custom_margin_phone=”||10px||false|false” custom_margin_last_edited=”on|phone” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>The Aim of the Toolkit<\/span><\/p>\n

[\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_font=”||||||||” text_text_color=”#8300E9″ text_font_size=”25px” text_line_height=”1.8em” custom_margin=”||0px||false|false” custom_padding=”|||0px|false|false” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Empower<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_margin=”||||false|false” custom_padding=”|||0px|false|false” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Empower your designs with dynamic motion, seamless transitions, and engaging interactions.<\/span><\/p>\n

[\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_font=”||||||||” text_text_color=”#8300E9″ text_font_size=”25px” text_line_height=”1.8em” custom_margin=”||0px||false|false” custom_padding=”|||0px|false|false” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Amplify<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_margin=”||||false|false” custom_padding=”|||0px|false|false” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Leverage the power of UI Animation to amplify key interaction principles.
Transform abstract concepts into dynamic visual narratives that vividly illustrate visibility, feedback, mapping, and more.<\/span><\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/Aim-of-Tookit.gif” title_text=”Aim of Tookit” align_tablet=”” align_phone=”center” align_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” width_tablet=”” width_phone=”80%” width_last_edited=”on|phone” custom_margin=”-50px||||false|false” custom_margin_tablet=”-50px||||false|false” custom_margin_phone=”0px||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”InteractionPrinciples” _builder_version=”4.22.2″ _module_preset=”default” background_enable_color=”off” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/Artboard-1-50.jpg” background_position=”top_center” background_vertical_offset=”52%” min_height=”100vh” scroll_fade=”0|50|50|100|0|100|0%” border_width_top=”5px” border_color_top=”#FFFFFF” border_width_bottom=”5px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text content_tablet=”<\/p>\n

The Galaxy of<\/p>\n

Interaction Principles<\/span><\/p>\n

” content_phone=”<\/p>\n

The Galaxy of Interaction Principles<\/span><\/p>\n

” content_last_edited=”on|phone” module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#FFFFFF” text_font_size=”80px” module_alignment=”center” custom_margin=”30vh||||false|false” animation_style=”zoom” scroll_fade=”0|50|50|100|0|100|0%” scroll_scaling_enable=”on” text_font_size_tablet=”80px” text_font_size_phone=”40px” text_font_size_last_edited=”on|phone” text_letter_spacing_tablet=”” text_letter_spacing_phone=”0px” text_letter_spacing_last_edited=”on|phone” text_line_height_tablet=”” text_line_height_phone=”1em” text_line_height_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

The Galaxy of<\/p>\n

Interaction Principles<\/span><\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”Visibility” _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/5.-Feedback-50.jpg” background_position=”top_center” min_height=”100vh” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” custom_margin=”||0px||false|false” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>1. Visibility:
<\/span><\/p>\n

[\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”||0px|32px|false|false” custom_padding_last_edited=”on|phone” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>Cosmic Clarity<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||35px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>Learn how UI Animation provides users with real-time visual clues that makes system statuses and actions more easily identifiable.<\/span><\/p>\n

[\/et_pb_text][et_pb_button button_url=”https:\/\/uianimationguide.co.za\/?page_id=93″ button_text=”Learn More” _builder_version=”4.22.2″ _module_preset=”dab665d9-661c-4e48-a514-da1944b31c93″ custom_margin=”|||40px|false|false” custom_margin_tablet=”|||40px|false|false” custom_margin_phone=”|||30px|false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_button][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/3.-Visibility.gif” title_text=”3. Visibility” align=”center” _builder_version=”4.22.2″ _module_preset=”default” width=”70%” module_alignment=”center” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/4.-Affordance-50.jpg” background_position=”top_center” background_vertical_offset=”10%” min_height=”100vh” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” width=”120%” width_tablet=”120%” width_phone=”100%” width_last_edited=”on|phone” custom_margin=”||0px||false|false” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>2. Discoverability:<\/span><\/p>\n

[\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” width=”120%” width_tablet=”120%” width_phone=”100%” width_last_edited=”on|phone” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||35px|false|false” custom_padding_last_edited=”on|phone” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>Explore Cosmic Secrets<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_margin=”||||false|false” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|35px||35px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>Explore the realm of UI Animation and its potential to direct user investigation\u00a0 and feature discovery.<\/span><\/p>\n

[\/et_pb_text][et_pb_button button_url=”https:\/\/uianimationguide.co.za\/?page_id=107″ button_text=”Learn More” _builder_version=”4.22.2″ _module_preset=”dab665d9-661c-4e48-a514-da1944b31c93″ custom_margin=”|||40px|false|false” custom_margin_tablet=”|||40px|false|false” custom_margin_phone=”|||30px|false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_button][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/4.-Discovrability.gif” title_text=”4. Discovrability” align=”center” _builder_version=”4.22.2″ _module_preset=”default” width=”70%” module_alignment=”center” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.22.2″ _module_preset=”default” background_enable_color=”off” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/3.-Discoveraility-50.jpg” background_position=”top_center” background_vertical_offset=”15%” min_height=”100vh” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” custom_margin=”||0px||false|false” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>3. Affordances:
<\/span><\/p>\n

[\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||35px|false|false” custom_padding_last_edited=”on|phone” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>Cosmic Control<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||35px|false|false” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>Discover the immense possibility of Affordances to clearly represent the available interactive possibilities.<\/span><\/p>\n

[\/et_pb_text][et_pb_button button_url=”https:\/\/uianimationguide.co.za\/?page_id=112″ button_text=”Learn More” _builder_version=”4.22.2″ _module_preset=”dab665d9-661c-4e48-a514-da1944b31c93″ custom_margin=”|||40px|false|false” custom_margin_tablet=”|||40px|false|false” custom_margin_phone=”|||30px|false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_button][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/Affordance-V2.gif” title_text=”Affordance V2″ align=”center” _builder_version=”4.22.2″ _module_preset=”default” width=”70%” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/1.-Home-50.jpg” background_position=”top_center” min_height=”100vh” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” custom_margin=”||0px||false|false” custom_padding=”|0px||||” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>4. Feedback:
<\/span><\/p>\n

[\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” width_tablet=”” width_phone=”100%” width_last_edited=”on|phone” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||35px|false|false” custom_padding_last_edited=”on|phone” scroll_fade_enable=”on” text_font_tablet=”” text_font_phone=”” text_font_last_edited=”on|phone” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>Stellar Interactions<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|0px||35px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>Embark on an adventure through the world of UI Animation, a place where immediate Feedback is visualised in order to provide users with the tools they need to engage in interactions that are responsive.<\/span><\/p>\n

[\/et_pb_text][et_pb_button button_url=”https:\/\/uianimationguide.co.za\/?page_id=124″ button_text=”Learn More” _builder_version=”4.22.2″ _module_preset=”dab665d9-661c-4e48-a514-da1944b31c93″ custom_margin=”|||40px|false|false” custom_margin_tablet=”|||40px|false|false” custom_margin_phone=”|||30px|false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_button][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/6.-Feedback.gif” title_text=”6. Feedback” align=”center” _builder_version=”4.22.2″ _module_preset=”default” width=”70%” module_alignment=”center” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/6.-Mapping-50.jpg” background_position=”top_center” background_vertical_offset=”16%” min_height=”100vh” border_color_all=”#FFFFFF” border_width_top=”10px” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” header_text_color=”#8300E9″ width=”120%” custom_margin=”||0px||false|false” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>5. Mapping:<\/span><\/p>\n

[\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” header_text_color=”#8300E9″ width=”120%” width_tablet=”120%” width_phone=”100%” width_last_edited=”on|phone” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||32px|false|false” custom_padding_last_edited=”on|phone” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>Making Galactic <\/span>Paths<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||35px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span>Explore the ways in which UI Animation gives the concept of mapping new life, as you map the space itself, which connects user actions and system reactions in a way that is both dynamic and illuminating.<\/span><\/p>\n

[\/et_pb_text][et_pb_button button_url=”https:\/\/uianimationguide.co.za\/?page_id=137″ button_text=”Learn More” _builder_version=”4.22.2″ _module_preset=”dab665d9-661c-4e48-a514-da1944b31c93″ custom_margin=”|||40px|false|false” custom_margin_tablet=”|||40px|false|false” custom_margin_phone=”|||30px|false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_button][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/7.-Mapping.gif” title_text=”7. Mapping” align=”center” _builder_version=”4.22.2″ _module_preset=”default” width=”70%” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

Welcome to the world ofUI AnimationEmpowering Designers with UI Animation Unleash the power of motion to elevate your designs and captivate users through seamless and engaging interactions.You’ve reached the UI Animate Guide!Learn about the transforming possibilities of UI animation! Infuse your designs with motion that is dynamic, transitions that are seamless, and interactions that are […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21"}],"version-history":[{"count":138,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":1178,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions\/1178"}],"wp:attachment":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}