{"id":16252,"date":"2026-06-18T06:15:44","date_gmt":"2026-06-18T11:15:44","guid":{"rendered":"https:\/\/visuall.ca\/gui\/?page_id=16252"},"modified":"2026-06-18T09:07:53","modified_gmt":"2026-06-18T14:07:53","slug":"courses-previews","status":"publish","type":"page","link":"https:\/\/visuall.ca\/gui\/courses-previews\/","title":{"rendered":"Courses Previews"},"content":{"rendered":"<style id=\"divi-off-canvas-hide-on-load\">\n[data-interaction-target=\"4afzwt0el4\"] { display: none !important; }\n[data-interaction-target=\"oijvssy850\"] { display: none !important; }\n[data-interaction-target=\"2goidx3nff\"] { display: none !important; }\n[data-interaction-target=\"nv0vbwqfc1\"] { display: none !important; }\n[data-interaction-target=\"75c2wpiwwm\"] { display: none !important; }\n[data-interaction-target=\"mcm2g7nzh0\"] { display: none !important; }\n[data-interaction-target=\"gc3bmjda7l\"] { display: none !important; }\n<\/style>\n<div class=\"et_pb_section_0 et_pb_section et_section_regular et_flex_section snap-section FirstRow\" id=\"hero1\">\n<div class=\"et_pb_row_0 et_pb_row et_flex_row FirstRow\">\n<div class=\"et_pb_column_0 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_6_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_group_0 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>BEGINNER<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_0_wrapper\"><a class=\"et_pb_button_0 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#\">Part 1: Materials in Unreal I<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_1_wrapper\"><a class=\"et_pb_button_1 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero2\">Part 2: Materials in Unreal II<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_2_wrapper\"><a class=\"et_pb_button_2 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero3\">Part 3: Responsive Materials in UE<\/a><\/div>\n\n<div class=\"et_pb_text_1 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\"><div class=\"et_pb_text_inner\"><p>INTERMEDIATE<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_3_wrapper\"><a class=\"et_pb_button_3 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero4\">Part 4: Responsive Loading screen<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_4_wrapper\"><a class=\"et_pb_button_4 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero5\">Part 5: Responsive Layouts in UE<\/a><\/div>\n\n<div class=\"et_pb_text_2 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\"><div class=\"et_pb_text_inner\"><p>ADVANCED<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_5_wrapper\"><a class=\"et_pb_button_5 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero6\">Part 6: Material UI Workflow<\/a><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_column_1 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_12_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_3 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">Part 1: Materials in Unreal engine I<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_slider_0 et_pb_slider et_pb_slider_fullwidth_off et_pb_slider_no_arrows et_pb_slider_no_pagination et_slider_auto et_slider_auto_ignore_hover et_slider_speed_12000 et_pb_module et_flex_module\"><div class=\"et_pb_slides\">\n<div class=\"et_pb_slide_0 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark\" data-slide-id=\"divi\/slide-0\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><\/div><\/div><\/div><\/div>\n\n<div class=\"et_pb_slide_1 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark\" data-slide-id=\"divi\/slide-1\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><\/div><\/div><\/div><\/div>\n\n<div class=\"et_pb_slide_2 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark\" data-slide-id=\"divi\/slide-2\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><\/div><\/div><\/div><\/div>\n\n<div class=\"et_pb_slide_3 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark\" data-slide-id=\"divi\/slide-3\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n\n<div class=\"et_pb_text_4 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">PROJECT FILES - 7 ASSIGMENTS - <span style=\"color: #ff6600;\">12 LESSONS<\/span><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_text_5 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\" data-et-mv-hidden-phone=\"true\"><p><span data-token-index=\"0\" class=\"notion-enable-hover\">In order to begin understanding what the material system can offer us in order to achieve our responsive interfaces, we will begin by learning the basic elements. <\/span><!-- notionvc: ceef65e9-61a3-4acc-8edb-1c5637b58351 --><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_group_1 et_pb_group et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_6_wrapper\"><a class=\"et_pb_button_6 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero2\">Next<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_7_wrapper\"><a class=\"et_pb_button_7 et_pb_button et_pb_bg_layout_light et-interaction-target-p713fhsxik et_pb_module et_block_module\" href=\"\" data-interaction-trigger=\"j9m1ncpep3\" data-interaction-target=\"p713fhsxik\">Courses<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_8_wrapper\"><a class=\"et_pb_button_8 et_pb_button et_pb_bg_layout_light et-interaction-target-nrkimu14w4 et_pb_module et_block_module\" href=\"#hero7\" data-interaction-trigger=\"o1c31pu49b\" data-interaction-target=\"nrkimu14w4\">Workshops<\/a><\/div>\n<\/div>\n\n<div class=\"et_pb_image_0 et_pb_image et-interaction-target-rsq6s8z1fx et_pb_module et_flex_module\" data-interaction-trigger=\"xdqz6z5ges\" data-interaction-target=\"rsq6s8z1fx\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n\n<div class=\"et_pb_column_2 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_6_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_slider_1 et_pb_slider et_pb_slider_fullwidth_off et_pb_slider_no_arrows et_pb_slider_no_pagination et_slider_auto et_slider_auto_ignore_hover et_slider_speed_10000 et_pb_module et_flex_module\"><div class=\"et_pb_slides\">\n<div class=\"et_pb_slide_4 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark et_pb_text_align_center\" data-slide-id=\"divi\/slide-4\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><h2 class=\"et_pb_slide_title\">Goal<\/h2><div class=\"et_pb_slide_content\"><p style=\"text-align: center;\">This documentation mean to be a comprehensive overview of different workflows and pipelines that use materials to build our screens.<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n<div class=\"et_pb_slide_5 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark et_pb_text_align_center\" data-slide-id=\"divi\/slide-5\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><h2 class=\"et_pb_slide_title\">TIP<\/h2><div class=\"et_pb_slide_content\"><p style=\"text-align: center;\">Materials are also a great way for any number of developers to work in the same screens.<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n<div class=\"et_pb_slide_6 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark et_pb_text_align_center\" data-slide-id=\"divi\/slide-6\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><h2 class=\"et_pb_slide_title\">TIP<\/h2><div class=\"et_pb_slide_content\"><p style=\"text-align: center;\">Materials are also a great way for any number of developers to work in the same screens.<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n<div class=\"et_pb_slide_7 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark et_pb_text_align_center\" data-slide-id=\"divi\/slide-7\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><h2 class=\"et_pb_slide_title\">TIP<\/h2><div class=\"et_pb_slide_content\"><p style=\"text-align: center;\">Materials are a very efficient way of solving visual requirements for our GUI.<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n<div class=\"et_pb_slide_8 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark et_pb_text_align_center\" data-slide-id=\"divi\/slide-8\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><h2 class=\"et_pb_slide_title\">TIP<\/h2><div class=\"et_pb_slide_content\"><p style=\"text-align: center;\">Materials are a very efficient way of solving visual requirements for our GUI.<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_1 et_pb_row et_flex_row et-interaction-target-4afzwt0el4 FirstRow\" data-interaction-trigger=\"ownyz40ikg\" data-interaction-target=\"4afzwt0el4\">\n<div class=\"et_pb_column_3 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_group_2 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_6 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><h3>Overview<\/p>\n<\/h3>\n<p><span data-token-index=\"0\" class=\"notion-enable-hover\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/Untitled-1-1.png\" width=\"1127\" height=\"521\" alt=\"\" class=\"wp-image-14079 alignnone size-full\" \/><\/span><\/p>\n<p>In order to begin understanding what the UMG designer and the Material system can offer us in order to achieve our responsive interfaces, we must start \\ familiarizing with the basic elements of the materials or shaders. Once you start understanding the basics I promise everything else will come along. The learning curve is steep but is worth as this knowledge is very useful from 3d meshes UV to special effects. Many game engines share the same HLSL shading language.<\/p>\n<p>This documentation mean to be a comprehensive overview of different workflows and pipelines that use materials to build our screens, layouts and widgets and NOT a material formation.<\/p>\n<p>Welcome to the shader or material environment. How are you schools math? Well here you may find some use for that knowledge you thought you will no needed any more.<\/p>\n<p>Packed inside a <strong>material<\/strong>, we can have as many GUI visual elements we required to render-and visualize a complex widget as complex as a game mode banner, all of a header avatar states, any number of buttons input feedback motions or a shiny and full of details store tile.<\/p>\n<p>By grouping all the visual requirements like shapes or colors into a material, we can then instantiate it and obtain child-instances to cover all our visual needs.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/instance.png\" width=\"1157\" height=\"601\" alt=\"\" class=\"wp-image-14080 alignnone size-full\" \/><\/p>\n<p>Each instance has properties: shapes, images, masks, borders, outlines, gradients and colors that we can set for each use case. These are the visual equivalent of a widget, packed in a single material instance.<\/p>\n<p>Here some examples that are instantiated from the same parent material in the above example, we are able to change the background colors, the image textures, we can add borders, modify the offsets and their angles. We can add a shadow or an outline to the image textures. All is done in the parent and in the instances we set the property values as we required for each use case. Instances can be as flexible as we require, being our imagination and performance requirements the limit.<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_image_1 et_pb_image et-interaction-target-nnyuwzok5a et_pb_module et_flex_module\" data-interaction-trigger=\"lyztq2jmgp\" data-interaction-target=\"nnyuwzok5a\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_1 et_pb_section et_section_regular et_flex_section snap-section FirstRow\" id=\"hero2\">\n<div class=\"et_pb_row_2 et_pb_row et_flex_row FirstRow\">\n<div class=\"et_pb_column_4 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_6_24 et_flex_column_2_5_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_group_3 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_7 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>BEGINNER<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_9_wrapper\"><a class=\"et_pb_button_9 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero1\">Part 1: Materials in Unreal I<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_10_wrapper\"><a class=\"et_pb_button_10 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#\">Part 2: Materials in Unreal II<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_11_wrapper\"><a class=\"et_pb_button_11 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero3\">Part 3: Responsive Materials in UE<\/a><\/div>\n\n<div class=\"et_pb_text_8 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\"><div class=\"et_pb_text_inner\"><p>INTERMEDIATE<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_12_wrapper\"><a class=\"et_pb_button_12 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero4\">Part 4: Responsive Loading screen<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_13_wrapper\"><a class=\"et_pb_button_13 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero5\">Part 5: Responsive Layouts in UE<\/a><\/div>\n\n<div class=\"et_pb_text_9 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\"><div class=\"et_pb_text_inner\"><p>ADVANCED<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_14_wrapper\"><a class=\"et_pb_button_14 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero6\">Part 6: Material UI Workflow<\/a><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_column_5 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_12_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_10 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">Part 2 Materials in Unreal engine II<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_video_0 et_pb_video et_pb_module et_flex_module\"><div class=\"et_pb_video_box\"><video controls><source type=\"video\/mp4\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/Part2_Assingment02.mp4\" \/><\/video><\/div><div class=\"et_pb_video_overlay\" style=\"background-image:url(https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/Part2_Slide_0.jpg)\"><div class=\"et_pb_video_overlay_hover\"><a class=\"et_pb_video_play\" href=\"#\"><\/a><\/div><\/div><\/div>\n\n<div class=\"et_pb_text_11 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">PROJECT FILES - 6 ASSIGMENTS - <span style=\"color: #ff6600;\">11 LESSONS<\/span><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_text_12 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\" data-et-mv-hidden-phone=\"true\"><p>At this point you got what this is about. In this follow up part, we can go with the fun stuff. <span data-token-index=\"0\" class=\"notion-enable-hover\">Something less based on maths and more in mask white-black mask.<\/span><!-- notionvc: 11254499-203d-4f2e-b13d-ffee159ef73b --><\/p>\n<p><!-- notionvc: ceef65e9-61a3-4acc-8edb-1c5637b58351 --><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_group_4 et_pb_group et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_15_wrapper\"><a class=\"et_pb_button_15 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero3\">Next<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_16_wrapper\"><a class=\"et_pb_button_16 et_pb_button et_pb_bg_layout_light et-interaction-target-e1d41on36s et_pb_module et_block_module\" href=\"\" data-interaction-trigger=\"pn49t9vsar\" data-interaction-target=\"e1d41on36s\">Courses<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_17_wrapper\"><a class=\"et_pb_button_17 et_pb_button et_pb_bg_layout_light et-interaction-target-k6z1oq2z4g et_pb_module et_block_module\" href=\"#hero7\" data-interaction-trigger=\"2ozu1cyg06\" data-interaction-target=\"k6z1oq2z4g\">Workshops<\/a><\/div>\n<\/div>\n\n<div class=\"et_pb_image_2 et_pb_image et-interaction-target-n8ribes0im et_pb_module et_flex_module\" data-interaction-trigger=\"txpzv48rcl\" data-interaction-target=\"n8ribes0im\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n\n<div class=\"et_pb_column_6 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_6_24 et_flex_column_2_5_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_slider_2 et_pb_slider et_pb_slider_fullwidth_off et_pb_slider_no_arrows et_pb_slider_no_pagination et_slider_auto et_slider_speed_10000 et_pb_module et_flex_module\"><div class=\"et_pb_slides\">\n<div class=\"et_pb_slide_9 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark et_pb_text_align_center\" data-slide-id=\"divi\/slide-9\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><h2 class=\"et_pb_slide_title\">Goal<\/h2><div class=\"et_pb_slide_content\"><p style=\"text-align: center;\">We will se how we can add multiple images to a material, controls their position, sizes, opacity and other parameters<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_3 et_pb_row et_flex_row et-interaction-target-oijvssy850 FirstRow\" data-interaction-trigger=\"hchc8nnyqw\" data-interaction-target=\"oijvssy850\">\n<div class=\"et_pb_column_7 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_group_5 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_13 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><h3>Overview<\/h3>\n<p><span data-token-index=\"0\" class=\"notion-enable-hover\">At this point you got what this is about. Now in this follow up part, we can go with the fun stuff. Something less based on maths and more in mask white-black mask. Texture images, masks, shadows and animation. More of a practical approach. Goal is to see how this is hell of relevant.<\/span><\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/ImageTexture.png\" width=\"853\" height=\"355\" alt=\"\" class=\"wp-image-14108 alignnone size-full\" \/><span data-token-index=\"0\" class=\"notion-enable-hover\"><\/span><\/h3>\n<p><span data-token-index=\"0\" class=\"notion-enable-hover\">To begin this part we are going to go for the images, the image textures. How we can add multiple images to a material, controls their position, sizes, opacity and other parameters. Let\u2019s begin. <\/span><!-- notionvc: e271ece4-cbdb-4914-8cc4-72e36217caa5 --><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_image_3 et_pb_image et-interaction-target-9t1744x60r et_pb_module et_flex_module\" data-interaction-trigger=\"flhdn8rct1\" data-interaction-target=\"9t1744x60r\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_2 et_pb_section et_section_regular et_flex_section snap-section FirstRow\" id=\"hero3\">\n<div class=\"et_pb_row_4 et_pb_row et_flex_row FirstRow\">\n<div class=\"et_pb_column_8 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_6_24 et_flex_column_2_5_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_group_6 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_14 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>BEGINNER<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_18_wrapper\"><a class=\"et_pb_button_18 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero1\">Part 1: Materials in Unreal I<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_19_wrapper\"><a class=\"et_pb_button_19 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero2\">Part 2: Materials in Unreal II<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_20_wrapper\"><a class=\"et_pb_button_20 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#\">Part 3: Responsive Materials in UE<\/a><\/div>\n\n<div class=\"et_pb_text_15 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\"><div class=\"et_pb_text_inner\"><p>INTERMEDIATE<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_21_wrapper\"><a class=\"et_pb_button_21 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero4\">Part 4: Responsive Loading screen<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_22_wrapper\"><a class=\"et_pb_button_22 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero5\">Part 5: Responsive Layouts in UE<\/a><\/div>\n\n<div class=\"et_pb_text_16 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\"><div class=\"et_pb_text_inner\"><p>ADVANCED<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_23_wrapper\"><a class=\"et_pb_button_23 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero6\">Part 6: Material UI Workflow<\/a><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_column_9 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_12_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_17 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">Part 3: Responsive Layouts in UE<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_video_1 et_pb_video et_pb_module et_flex_module\"><div class=\"et_pb_video_box\"><video controls><source type=\"video\/mp4\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/Part3_ResponsiveMaterials.mp4\" \/><\/video><\/div><div class=\"et_pb_video_overlay\" style=\"background-image:url(https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/Part3_layout.png)\"><div class=\"et_pb_video_overlay_hover\"><a class=\"et_pb_video_play\" href=\"#\"><\/a><\/div><\/div><\/div>\n\n<div class=\"et_pb_text_18 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">PROJECT FILES - <span style=\"color: #ff6600;\">13 LESSONS<\/span><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_text_19 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p>In this part we are going to try to establish the basics to be able to build a responsive layout in UE5 with the help of the responsiveness of the materials.<\/p>\n<p><!-- notionvc: 11254499-203d-4f2e-b13d-ffee159ef73b --><\/p>\n<p><!-- notionvc: ceef65e9-61a3-4acc-8edb-1c5637b58351 --><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_group_7 et_pb_group et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_24_wrapper\"><a class=\"et_pb_button_24 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero4\">Next<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_25_wrapper\"><a class=\"et_pb_button_25 et_pb_button et_pb_bg_layout_light et-interaction-target-508z4jiq9k et_pb_module et_block_module\" href=\"\" data-interaction-trigger=\"wgv6vlt0ef\" data-interaction-target=\"508z4jiq9k\">Courses<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_26_wrapper\"><a class=\"et_pb_button_26 et_pb_button et_pb_bg_layout_light et-interaction-target-35rnx7u6e9 et_pb_module et_block_module\" href=\"#hero7\" data-interaction-trigger=\"joeex7e9lf\" data-interaction-target=\"35rnx7u6e9\">Workshops<\/a><\/div>\n<\/div>\n\n<div class=\"et_pb_image_4 et_pb_image et-interaction-target-pmw9nrcdxr et_pb_module et_flex_module\" data-interaction-trigger=\"mfuie5z8ck\" data-interaction-target=\"pmw9nrcdxr\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n\n<div class=\"et_pb_column_10 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_6_24 et_flex_column_2_5_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_slider_3 et_pb_slider et_pb_slider_fullwidth_off et_pb_slider_no_arrows et_pb_slider_no_pagination et_slider_auto et_slider_speed_10000 et_pb_module et_flex_module\"><div class=\"et_pb_slides\">\n<div class=\"et_pb_slide_10 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark et_pb_text_align_center\" data-slide-id=\"divi\/slide-10\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><h2 class=\"et_pb_slide_title\">Goal<\/h2><div class=\"et_pb_slide_content\"><p>Organize the widgets inside horizontal, vertical of grid boxes. These are flexible system that will give us options to respond to screen ratios and available space.<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_5 et_pb_row et_flex_row et-interaction-target-2goidx3nff FirstRow\" data-interaction-trigger=\"7548nquob9\" data-interaction-target=\"2goidx3nff\">\n<div class=\"et_pb_column_11 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_group_8 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_20 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><h3>Overview<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/Part3_layout-300x116.png\" width=\"300\" height=\"116\" alt=\"\" class=\"wp-image-14152 alignnone size-medium\" \/><\/p>\n<p>For our GUI to accommodate or respond to the available screen horizontal and vertical spaces, its layout structure and materials must be flexible and every single element must work together and in sync. Screen ratios can make our work difficult and is a matter of finding the right system.<\/p>\n<p>We are going to see how with simple setups we can dig into it and by setting the right elements in the right way everything come along and deliver the result we seek.<\/p>\n<p>Starting from the layout structure we can organize the widgets inside horizontal, vertical of grid boxes. These are flexible system that will give us many options to respond to screen ratios and available space. Alignments will keep everything in place and there are different techniques to make elements grow as required to fill space. Often we will need to add blueprint logic to be able to stop these responses at certain widths, heights or screen ratio. Layout responsiveness starts in the very same way we structure the layout. Is better to spend a good time thinking and planning it.<\/p>\n<p><!-- notionvc: e271ece4-cbdb-4914-8cc4-72e36217caa5 --><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_image_5 et_pb_image et-interaction-target-0d4t1jlvwi et_pb_module et_flex_module\" data-interaction-trigger=\"9qu2rz2few\" data-interaction-target=\"0d4t1jlvwi\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_3 et_pb_section et_section_regular et_flex_section snap-section FirstRow\" id=\"hero4\">\n<div class=\"et_pb_row_6 et_pb_row et_flex_row FirstRow\">\n<div class=\"et_pb_column_12 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_6_24 et_flex_column_2_5_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_group_9 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_21 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>BEGINNER<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_27_wrapper\"><a class=\"et_pb_button_27 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero1\">Part 1: Materials in Unreal I<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_28_wrapper\"><a class=\"et_pb_button_28 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero2\">Part 2: Materials in Unreal II<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_29_wrapper\"><a class=\"et_pb_button_29 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero3\">Part 3: Responsive Materials in UE<\/a><\/div>\n\n<div class=\"et_pb_text_22 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\"><div class=\"et_pb_text_inner\"><p>INTERMEDIATE<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_30_wrapper\"><a class=\"et_pb_button_30 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#\">Part 4: Responsive Loading screen<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_31_wrapper\"><a class=\"et_pb_button_31 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero5\">Part 5: Responsive Layouts in UE<\/a><\/div>\n\n<div class=\"et_pb_text_23 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\"><div class=\"et_pb_text_inner\"><p>ADVANCED<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_32_wrapper\"><a class=\"et_pb_button_32 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero6\">Part 6: Material UI Workflow<\/a><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_column_13 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_12_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_24 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">Part 4: Responsive Loading screen<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_video_2 et_pb_video et_pb_module et_flex_module\"><div class=\"et_pb_video_box\"><video controls><source type=\"video\/mp4\" src=\"https:\/\/visuall.ca\/bideoak\/Part0400_2_Overview.mp4\" \/><\/video><\/div><div class=\"et_pb_video_overlay\" style=\"background-image:url(https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/Part4_featured_1.jpg)\"><div class=\"et_pb_video_overlay_hover\"><a class=\"et_pb_video_play\" href=\"#\"><\/a><\/div><\/div><\/div>\n\n<div class=\"et_pb_text_25 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">PROJECT FILES -15 LESSONS- <span style=\"color: #ff6600;\">3h VIDEOS<\/span><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_text_26 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\" data-et-mv-hidden-phone=\"true\"><p>We are going to build a responsive loading screen in two ways: <strong>a<\/strong> <strong>canvas<\/strong> layout with image brush textures and <strong>a<\/strong> <strong>material<\/strong> with textures and a reveal transition mask.<\/p>\n<p><!-- notionvc: 11254499-203d-4f2e-b13d-ffee159ef73b --><\/p>\n<p><!-- notionvc: ceef65e9-61a3-4acc-8edb-1c5637b58351 --><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_group_10 et_pb_group et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_33_wrapper\"><a class=\"et_pb_button_33 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero5\">Next<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_34_wrapper\"><a class=\"et_pb_button_34 et_pb_button et_pb_bg_layout_light et-interaction-target-p2ghb82eh5 et_pb_module et_block_module\" href=\"\" data-interaction-trigger=\"mtt5c6jc13\" data-interaction-target=\"p2ghb82eh5\">Courses<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_35_wrapper\"><a class=\"et_pb_button_35 et_pb_button et_pb_bg_layout_light et-interaction-target-4u9oysdnvh et_pb_module et_block_module\" href=\"#hero7\" data-interaction-trigger=\"faz2kdxmxv\" data-interaction-target=\"4u9oysdnvh\">Workshops<\/a><\/div>\n<\/div>\n\n<div class=\"et_pb_image_6 et_pb_image et-interaction-target-dewrevf2gg et_pb_module et_flex_module\" data-interaction-trigger=\"56d9p37sam\" data-interaction-target=\"dewrevf2gg\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n\n<div class=\"et_pb_column_14 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_6_24 et_flex_column_2_5_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_slider_4 et_pb_slider et_pb_slider_fullwidth_off et_pb_slider_no_arrows et_pb_slider_no_pagination et_slider_auto et_slider_speed_10000 et_pb_module et_flex_module\"><div class=\"et_pb_slides\">\n<div class=\"et_pb_slide_11 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark et_pb_text_align_center\" data-slide-id=\"divi\/slide-11\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><h2 class=\"et_pb_slide_title\">Goal<\/h2><div class=\"et_pb_slide_content\"><p>Our goal is to familiarize with both approaches and compare both in order to understand the advantages that the material responsiveness can provide.<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_7 et_pb_row et_flex_row et-interaction-target-nv0vbwqfc1 FirstRow\" data-interaction-trigger=\"kqe5o3epqq\" data-interaction-target=\"nv0vbwqfc1\">\n<div class=\"et_pb_column_15 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_group_11 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_27 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><h3>Overview<\/h3>\n<h3><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/Part4_featured_1.jpg\" width=\"1200\" height=\"900\" alt=\"\" class=\"wp-image-14134 alignnone size-full\" \/><\/h3>\n<p>We are going to build a loading responsive loading screen in two different ways:<\/p>\n<p>1. A canvas layout with image brush textures<br \/>2. A Material with textures and a reveal transition mask<\/p>\n<p>The full screen background image need to respond and adapt to the screen width from tablet to mobile ultrawide screen without losing most of its details like the represented scene and character. In order to do that we need to separate its elements and make them respond differently without compromising the assembly of some characters of Porcco Rosso the movie.<\/p>\n<p>Our goal is to familiarize with both approaches and compare both methods in order to understand the advantages that the material responsiveness can provide.<\/p>\n<p>We are going to relay in a material function we can reuse later as a great way to speed up our material workflow. It is important to understand this key aspect of working with materials.<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_image_7 et_pb_image et-interaction-target-da03es5nuc et_pb_module et_flex_module\" data-interaction-trigger=\"og1l12kl49\" data-interaction-target=\"da03es5nuc\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_4 et_pb_section et_section_regular et_flex_section snap-section FirstRow\" id=\"hero5\">\n<div class=\"et_pb_row_8 et_pb_row et_flex_row FirstRow\">\n<div class=\"et_pb_column_16 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_6_24 et_flex_column_2_5_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_group_12 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_28 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>BEGINNER<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_36_wrapper\"><a class=\"et_pb_button_36 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero1\">Part 1: Materials in Unreal I<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_37_wrapper\"><a class=\"et_pb_button_37 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero2\">Part 2: Materials in Unreal II<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_38_wrapper\"><a class=\"et_pb_button_38 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero3\">Part 3: Responsive Materials in UE<\/a><\/div>\n\n<div class=\"et_pb_text_29 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\"><div class=\"et_pb_text_inner\"><p>INTERMEDIATE<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_39_wrapper\"><a class=\"et_pb_button_39 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero4\">Part 4: Responsive Loading screen<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_40_wrapper\"><a class=\"et_pb_button_40 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#\">Part 5: Responsive Layouts in UE<\/a><\/div>\n\n<div class=\"et_pb_text_30 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\"><div class=\"et_pb_text_inner\"><p>ADVANCED<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_41_wrapper\"><a class=\"et_pb_button_41 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero6\">Part 6: Material UI Workflow<\/a><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_column_17 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_12_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_31 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">Part 5: Responsive Layouts in UE<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_video_3 et_pb_video et_pb_module et_flex_module\"><div class=\"et_pb_video_box\"><video controls><source type=\"video\/mp4\" src=\"https:\/\/visuall.ca\/bideoak\/Part0501.mp4\" \/><\/video><\/div><div class=\"et_pb_video_overlay\" style=\"background-image:url(https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/Part5_featured_1.jpg)\"><div class=\"et_pb_video_overlay_hover\"><a class=\"et_pb_video_play\" href=\"#\"><\/a><\/div><\/div><\/div>\n\n<div class=\"et_pb_text_32 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">PROJECT FILES -13 LESSONS- <span style=\"color: #ff6600;\">3h VIDEOS<\/span><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_text_33 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p>Responsive layout that recreates the Android Auto interface in UE5. Taking this layout as example we are going to see how the navigation can be made responsive.<\/p>\n<p><!-- notionvc: 11254499-203d-4f2e-b13d-ffee159ef73b --><\/p>\n<p><!-- notionvc: ceef65e9-61a3-4acc-8edb-1c5637b58351 --><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_group_13 et_pb_group et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_42_wrapper\"><a class=\"et_pb_button_42 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero6\">Next<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_43_wrapper\"><a class=\"et_pb_button_43 et_pb_button et_pb_bg_layout_light et-interaction-target-zjwzpu6gfo et_pb_module et_block_module\" href=\"\" data-interaction-trigger=\"uogo1cpz1e\" data-interaction-target=\"zjwzpu6gfo\">Courses<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_44_wrapper\"><a class=\"et_pb_button_44 et_pb_button et_pb_bg_layout_light et-interaction-target-itgaoo8fsw et_pb_module et_block_module\" href=\"#hero7\" data-interaction-trigger=\"a2w8x1tn54\" data-interaction-target=\"itgaoo8fsw\">Workshops<\/a><\/div>\n<\/div>\n\n<div class=\"et_pb_image_8 et_pb_image et-interaction-target-8b519zr4fj et_pb_module et_flex_module\" data-interaction-trigger=\"l9qnr2rj55\" data-interaction-target=\"8b519zr4fj\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n\n<div class=\"et_pb_column_18 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_6_24 et_flex_column_2_5_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_slider_5 et_pb_slider et_pb_slider_fullwidth_off et_pb_slider_no_arrows et_pb_slider_no_pagination et_slider_auto et_slider_speed_10000 et_pb_module et_flex_module\"><div class=\"et_pb_slides\">\n<div class=\"et_pb_slide_12 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark et_pb_text_align_center\" data-slide-id=\"divi\/slide-12\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><h2 class=\"et_pb_slide_title\">Goal<\/h2><div class=\"et_pb_slide_content\" data-et-mv-hidden-phone=\"true\"><p style=\"text-align: center;\">We start an <span data-token-index=\"1\" class=\"notion-enable-hover\">implementation workflow <\/span>to first study the results we want from our design, then create the elements we require with what we have learn previously.<!-- notionvc: ad451042-0710-409e-ae88-2ebb632b2b7c --><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_9 et_pb_row et_flex_row et-interaction-target-75c2wpiwwm FirstRow\" data-interaction-trigger=\"j1eltqk2vk\" data-interaction-target=\"75c2wpiwwm\">\n<div class=\"et_pb_column_19 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_group_14 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_34 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><h3>Overview<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/Part5_featured_1.jpg\" width=\"1200\" height=\"900\" alt=\"\" class=\"wp-image-14135 alignnone size-full\" \/><\/p>\n<p>Android auto is used in a variety of aspect ratios and the navigation is displayed on the left, top or bottom of the screen. The size of the screen the widget take is also different.\u00a0<\/p>\n<p>Independently where you want your app buttons, the layout and the widgets need to respond correctly to any configuration and this is what we want to achieve here. Also make sure you answer Porcco's call, he is probably in trouble again and you do not want him to die in a random dog fight.<\/p>\n<p>Previously we have learn how to set a fluid layout to respond to different platform ergonomics, inputs and aspect ratios. We have also create responsive materials to help us with that.<\/p>\n<p>In this formation we are going to start following an **implementation workflow** to first study the results we want from our design, then create the elements we require with what we have learn in the previous formations.<\/p>\n<p>Two different implementations, two set of widgets, based on usability platforms needs.<\/p>\n<p>We are also going to introduce the data tables in order to setup the entries we want to work with.<\/p>\n<p>It is a great way to get used to work with a single host widget that will be able to accommodate the data stored in the data table. Is similar work that we should be doing when the data is stored in a server in a live operations environment.<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_image_9 et_pb_image et-interaction-target-dzluqtqtaj et_pb_module et_flex_module\" data-interaction-trigger=\"cbo3r5b5rc\" data-interaction-target=\"dzluqtqtaj\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_5 et_pb_section et_section_regular et_flex_section snap-section FirstRow\" id=\"hero6\">\n<div class=\"et_pb_row_10 et_pb_row et_flex_row FirstRow\">\n<div class=\"et_pb_column_20 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_6_24 et_flex_column_2_5_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_group_15 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_35 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>BEGINNER<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_45_wrapper\"><a class=\"et_pb_button_45 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero1\">Part 1: Materials in Unreal I<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_46_wrapper\"><a class=\"et_pb_button_46 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero2\">Part 2: Materials in Unreal II<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_47_wrapper\"><a class=\"et_pb_button_47 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero3\">Part 3: Responsive Materials in UE<\/a><\/div>\n\n<div class=\"et_pb_text_36 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\"><div class=\"et_pb_text_inner\"><p>INTERMEDIATE<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_48_wrapper\"><a class=\"et_pb_button_48 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero4\">Part 4: Responsive Loading screen<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_49_wrapper\"><a class=\"et_pb_button_49 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero5\">Part 5: Responsive Layouts in UE<\/a><\/div>\n\n<div class=\"et_pb_text_37 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\"><div class=\"et_pb_text_inner\"><p>ADVANCED<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_50_wrapper\"><a class=\"et_pb_button_50 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#\">Part 6: Material UI Workflow<\/a><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_column_21 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_12_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_38 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">Part 6: Material UI workflow<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_video_4 et_pb_video et_pb_module et_flex_module\"><div class=\"et_pb_video_box\"><video controls><source type=\"video\/mp4\" src=\"https:\/\/visuall.ca\/bideoak\/Part0600_Overview.mp4\" \/><\/video><\/div><div class=\"et_pb_video_overlay\" style=\"background-image:url(https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/Part6_featured_1.jpg)\"><div class=\"et_pb_video_overlay_hover\"><a class=\"et_pb_video_play\" href=\"#\"><\/a><\/div><\/div><\/div>\n\n<div class=\"et_pb_text_39 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">PROJECT FILES -17 LESSONS- <span style=\"color: #ff6600;\">5h VIDEOS<\/span><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_text_40 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\" data-et-mv-hidden-phone=\"true\"><p>In this course, we are going to establish a responsive material-centric implementation methodology through some practical examples.<\/p>\n<p><!-- notionvc: 11254499-203d-4f2e-b13d-ffee159ef73b --><\/p>\n<p><!-- notionvc: ceef65e9-61a3-4acc-8edb-1c5637b58351 --><\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_group_16 et_pb_group et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_51_wrapper\"><a class=\"et_pb_button_51 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero7\">Next<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_52_wrapper\"><a class=\"et_pb_button_52 et_pb_button et_pb_bg_layout_light et-interaction-target-zvge7tqrbb et_pb_module et_block_module\" href=\"\" data-interaction-trigger=\"jbkev5cgkd\" data-interaction-target=\"zvge7tqrbb\">Courses<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_53_wrapper\"><a class=\"et_pb_button_53 et_pb_button et_pb_bg_layout_light et-interaction-target-umdmf20uuo et_pb_module et_block_module\" href=\"#hero7\" data-interaction-trigger=\"f3sh7x6xkz\" data-interaction-target=\"umdmf20uuo\">Workshops<\/a><\/div>\n<\/div>\n\n<div class=\"et_pb_image_10 et_pb_image et-interaction-target-o4vhn3likw et_pb_module et_flex_module\" data-interaction-trigger=\"dz3vbaf8b0\" data-interaction-target=\"o4vhn3likw\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n\n<div class=\"et_pb_column_22 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_6_24 et_flex_column_2_5_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_slider_6 et_pb_slider et_pb_slider_fullwidth_off et_pb_slider_no_arrows et_pb_slider_no_pagination et_slider_auto et_slider_speed_10000 et_pb_module et_flex_module\"><div class=\"et_pb_slides\">\n<div class=\"et_pb_slide_13 et_pb_slide et_pb_media_alignment_center et_pb_bg_layout_dark et_pb_text_align_center\" data-slide-id=\"divi\/slide-13\"><div class=\"et_pb_container\"><div class=\"et_pb_slider_container_inner\"><div class=\"et_pb_slide_description et_flex_module\"><h2 class=\"et_pb_slide_title\">Goal<\/h2><div class=\"et_pb_slide_content\" data-et-mv-hidden-phone=\"true\"><p>An effective workflow should resolve most of the visual needs of our GUI, from responsiveness, to visual art style to animation.<\/p>\n<p style=\"text-align: center;\"><!-- notionvc: ad451042-0710-409e-ae88-2ebb632b2b7c --><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_11 et_pb_row et_flex_row et-interaction-target-mcm2g7nzh0 FirstRow\" data-interaction-trigger=\"54mdkuwvx3\" data-interaction-target=\"mcm2g7nzh0\">\n<div class=\"et_pb_column_23 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_group_17 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_41 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><h3>Overview<\/h3>\n<h3><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/Part6_featured_1.jpg\" width=\"1200\" height=\"900\" alt=\"\" class=\"wp-image-14136 alignnone size-full\" \/><\/h3>\n<p>Shaders or materials in unreal engine can be as useful for a GUI visual element, as much as they are for a 3D object or actor in a 3D world environment. The visual advantages of materials can be also applied to UI art. By creating a robust system constructed around shaders, updates, takeovers and live operations will be faster to deliver, way easier and any visual future need could be added quickly. Combined with a system of server based backend or CMS dynamic data, the complexity and speed cycle of updates or live operations will improve significantly, compare to traditional workflows.<\/p>\n<p>In this formation we are going to establish an implementation methodology or material workflow centered in integration-implementation. It will help us see how we can leverage this workflow proposal into your own ways. Hope it helps in long run.<\/p>\n<p>Flexible and optimized Instantiation: All the GUI elements of a widget or even a screen could be drawn from one or two materials. Often, the parent material does not even need to be entirely compiled to draw-render all these materials instances, as they are branched or switched by the required properties.<\/p>\n<p>Scalability: a material parent can be updated and changes will cascade to each instance. If done correctly we can add visual parameters than can be added to new materials instances but will leave old ones unaffected. This is a great workflow for updates, takeovers or IP customization<\/p>\n<p>Parallel development: The same way, a dev can work in the parent while other devs are using the instances or even creating new ones from the parent.<\/p>\n<p>Preview and set states before animation: along with the linear interpolation parameters in the material, the instances allow us to preview and set the required visual states in the instance itself. We do not need to do the animation before.<\/p>\n<p>Interpolated animation: any baking material instance animation workflow. A well designed material will result in the possibility of being use on any widget that has the parameter names included on any animation. Therefore we could use any material instance.<\/p>\n<p>Responsiveness: The UV coordinates inside the material can respond to the screen available space, similar to web design. In fact we can make the material parameters respond to size and scale in many different ways. We do not need to use scale boxes or blueprint overrides. It is like a canvas position inside the UV space of the material itself.<\/p>\n<p>Data tables and material parameters: We can change the material properties to create a workflow based on data tables that can help us to work faster.<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_image_11 et_pb_image et-interaction-target-4jw4nl1t3q et_pb_module et_flex_module\" data-interaction-trigger=\"p3qil595tl\" data-interaction-target=\"4jw4nl1t3q\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_6 et_pb_section et_section_regular et_flex_section snap-section FirstRow\" id=\"hero7\">\n<div class=\"et_pb_row_12 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_24 et_pb_column et_flex_column et_pb_column_empty et_pb_css_mix_blend_mode_passthrough et_flex_column_8_24 et_flex_column_8_24_tablet et_flex_column_24_24_phone\"><\/div>\n\n<div class=\"et_pb_column_25 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_8_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_42 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\" data-et-mv-hidden-phone=\"true\"><p><span style=\"color: #ff6600;\">TAILORED<\/span> WORKSHOPS<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_text_43 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\" data-et-mv-hidden-phone=\"true\"><p><strong>In-Engine training sessions and custom courses for UI designers and engineers.\u00a0<\/strong><\/p>\n<p>Designed as an extension of the 6-part course, these sessions embed into your production reality. From UI architecture to implementation constraints, every workshop is customized to align with your team\u2019s tools, standards, and delivery goals.<\/p>\n<p>These custom workshops focus on integrating the methodology into your live UI\u2014optimizing workflows, improving scalability, and accelerating production readiness.<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_54_wrapper\"><a class=\"et_pb_button_54 et_pb_button et_pb_bg_layout_light et-interaction-target-109e9wpx0i et_pb_module et_block_module\" href=\"https:\/\/visuall.ca\/gui\/contact\" data-interaction-trigger=\"ryruzkeir5\" data-interaction-target=\"109e9wpx0i\">Contact me<\/a><\/div>\n<\/div>\n\n<div class=\"et_pb_column_26 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_8_24 et_flex_column_12_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_text_44 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">INQUERIES<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_contact_form_0 et_pb_contact_form_container clearfix et_pb_module et_flex_module\" data-form_unique_num=\"0\" data-form_unique_id=\"fc315e73-ee8d-4ca9-ae6c-18b8c1c9f0f0\" id=\"et_pb_contact_form_fc315e73-ee8d-4ca9-ae6c-18b8c1c9f0f0\"><div class=\"et-pb-contact-message\"><\/div><div class=\"et_pb_contact\"><form class=\"et_pb_contact_form et_flex_module\" method=\"post\" action=\"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/pages\/16252\">\n<div class=\"et_pb_contact_field_0 et_pb_contact_field et_pb_module et_flex_module et_flex_column_12_24 et_flex_column_12_24_tablet et_flex_column_12_24_phone\" data-id=\"name\" data-type=\"input\"><label class=\"et_pb_contact_form_label\" for=\"et_pb_contact_0_name_0\">Full name<\/label><input type=\"text\" name=\"et_pb_contact_0_name_0\" id=\"et_pb_contact_0_name_0\" class=\"input\" data-required_mark=\"required\" data-field_type=\"input\" data-original_id=\"name\" placeholder=\"Full name\" title=\"\" value=\"\" \/><\/div>\n\n<div class=\"et_pb_contact_field_1 et_pb_contact_field et_pb_module et_flex_module et_flex_column_12_24 et_flex_column_12_24_tablet et_flex_column_12_24_phone\" data-id=\"email\" data-type=\"email\"><label class=\"et_pb_contact_form_label\" for=\"et_pb_contact_0_email_1\">Email<\/label><input type=\"text\" name=\"et_pb_contact_0_email_1\" id=\"et_pb_contact_0_email_1\" class=\"input\" data-required_mark=\"required\" data-field_type=\"email\" data-original_id=\"email\" placeholder=\"Email\" title=\"\" value=\"\" \/><\/div>\n\n<div class=\"et_pb_contact_field_2 et_pb_contact_field et_pb_module et_flex_module et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\" data-id=\"inquery\" data-type=\"select\"><label class=\"et_pb_contact_form_label\" for=\"et_pb_contact_0_inquery_2\">What does interest you?<\/label><select name=\"et_pb_contact_0_inquery_2\" id=\"et_pb_contact_0_inquery_2\" class=\"et_pb_contact_select input\" data-required_mark=\"required\" data-field_type=\"select\" data-original_id=\"inquery\"><option value=\"\">What does interest you?<\/option><option value=\"I&#039;m interested in courses\" data-id=\"\">I&#039;m interested in courses<\/option><option value=\"I&#039;m Interested in workshops\" data-id=\"\">I&#039;m Interested in workshops<\/option><\/select><\/div>\n\n<div class=\"et_pb_contact_field_3 et_pb_contact_field et_pb_module et_flex_module et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\" data-id=\"message\" data-type=\"text\"><label class=\"et_pb_contact_form_label\" for=\"et_pb_contact_0_message_3\">Message<\/label><textarea name=\"et_pb_contact_0_message_3\" id=\"et_pb_contact_0_message_3\" class=\"et_pb_contact_message input\" data-required_mark=\"required\" data-field_type=\"text\" data-original_id=\"message\" placeholder=\"Message\"><\/textarea><\/div>\n<input type=\"hidden\" name=\"et_pb_contactform_submit_fc315e73-ee8d-4ca9-ae6c-18b8c1c9f0f0\" value=\"et_contact_proccess\" \/><div class=\"et_contact_bottom_container\"><div class=\"et_pb_button_wrapper\"><button type=\"submit\" name=\"et_builder_submit_button\" class=\"et_pb_button et_pb_contact_submit\">Send<\/button><\/div><\/div><input type=\"hidden\" id=\"_wpnonce-et-pb-contact-form-submitted-fc315e73-ee8d-4ca9-ae6c-18b8c1c9f0f0\" name=\"_wpnonce-et-pb-contact-form-submitted-fc315e73-ee8d-4ca9-ae6c-18b8c1c9f0f0\" value=\"12da328156\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/gui\/wp-json\/wp\/v2\/pages\/16252\" \/><\/form><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_7 et_pb_section et_pb_section--fixed et_section_regular et_flex_section et-interaction-target-gc3bmjda7l\" data-interaction-trigger=\"lbm7bld37v\" data-interaction-target=\"gc3bmjda7l\">\n<div class=\"et_pb_row_13 et_pb_row et_flex_row FirstRow\">\n<div class=\"et_pb_column_27 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24\">\n<div class=\"et_pb_group_18 et_pb_group et-last-child et_pb_module et_flex_group et_pb_css_mix_blend_mode_passthrough et_animated\">\n<div class=\"et_pb_text_45 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">LEARNING PATH<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_text_46 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\" data-interaction-trigger=\"lbm7bld37v\"><div class=\"et_pb_text_inner\"><p>BEGINNER<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_55_wrapper\"><a class=\"et_pb_button_55 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero1\" data-interaction-trigger=\"lbm7bld37v\">Part 1: Materials in Unreal I<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_56_wrapper\"><a class=\"et_pb_button_56 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero2\" data-interaction-trigger=\"lbm7bld37v\">Part 2: Materials in Unreal II<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_57_wrapper\"><a class=\"et_pb_button_57 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero3\" data-interaction-trigger=\"lbm7bld37v\">Part 3: Responsive Materials in UE<\/a><\/div>\n\n<div class=\"et_pb_text_47 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\" data-interaction-trigger=\"lbm7bld37v\"><div class=\"et_pb_text_inner\"><p>INTERMEDIATE<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_58_wrapper\"><a class=\"et_pb_button_58 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero4\" data-interaction-trigger=\"lbm7bld37v\">Part 4: Responsive Loading screen<\/a><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_59_wrapper\"><a class=\"et_pb_button_59 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero5\" data-interaction-trigger=\"lbm7bld37v\">Part 5: Responsive Layouts in UE<\/a><\/div>\n\n<div class=\"et_pb_text_48 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module preset--group--divi-text--divi-font-body--h1yjkjr--c5jp9bj51o\" data-interaction-trigger=\"lbm7bld37v\"><div class=\"et_pb_text_inner\"><p>ADVANCED<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_module et_pb_button_module_wrapper et_pb_button_60_wrapper\"><a class=\"et_pb_button_60 et_pb_button et_pb_bg_layout_light et_pb_module et_block_module\" href=\"#hero6\" data-interaction-trigger=\"lbm7bld37v\">Part 6: Material UI Workflow<\/a><\/div>\n\n<div class=\"et_pb_image_12 et_pb_image et-interaction-target-1v3fjv1aou et_pb_module et_flex_module\" data-interaction-trigger=\"8n6fj00785\" data-interaction-target=\"1v3fjv1aou\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png\" title=\"plusmore_icon_b\" width=\"122\" height=\"122\" srcset=\"https:\/\/visuall.ca\/gui\/wp-content\/uploads\/sites\/3\/2026\/04\/plusmore_icon_b.png 122w\" sizes=\"(max-width: 122px) 100vw, 122px\" class=\"wp-image-13141\" \/><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16252","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/pages\/16252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/comments?post=16252"}],"version-history":[{"count":11,"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/pages\/16252\/revisions"}],"predecessor-version":[{"id":16281,"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/pages\/16252\/revisions\/16281"}],"wp:attachment":[{"href":"https:\/\/visuall.ca\/gui\/wp-json\/wp\/v2\/media?parent=16252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}