{"id":3192,"date":"2024-04-13T14:54:49","date_gmt":"2024-04-13T14:54:49","guid":{"rendered":"https:\/\/www.sergiuszstein.pl\/?page_id=3192"},"modified":"2026-01-31T23:39:11","modified_gmt":"2026-01-31T23:39:11","slug":"tutorials","status":"publish","type":"page","link":"https:\/\/www.sergiuszstein.pl\/?page_id=3192","title":{"rendered":"Tutorials"},"content":{"rendered":"\n<div class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-6601f770 wp-block-group-is-layout-flex\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-group has-accent-4-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-56003dff wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<h1 class=\"wp-block-heading has-text-align-center has-ast-global-color-0-color has-text-color has-link-color wp-elements-96953efabb1d3fdbadbd9dd01e1866ac\">Tutorialization and FTUE Design<\/h1>\n\n\n\n<p class=\"has-ast-global-color-0-color has-text-color has-link-color has-medium-font-size wp-elements-a19a289e78e2cb81ec8e09cda13fd63f\">During my time as a designer I\u2019ve manager to work on 4 tutorials and a set of card game instructions in 5 separate projects and I\u2019ve had a lot of fun doing it. Tutorialization and FTUE is such a crucial part of any game because there are so many things the player has to understand in order for them to have the best possible experience and there&#8217;s often so little time to explain all of it to them.<\/p>\n\n\n\n<p class=\"has-ast-global-color-0-color has-text-color has-link-color has-medium-font-size wp-elements-191bd5115b1385fcdf55cdf1a4ea7ae1\">It&#8217;s interesting how when you design a tutorial you are not only explaining important information to the player but also conditioning them to think about problems the game presents them with in a particular way. If you&#8217;re able to make the player think a certain way about solving problems in your game you can make sure that they will have the best possible experience.<\/p>\n\n\n\n<p class=\"has-ast-global-color-0-color has-text-color has-link-color has-medium-font-size wp-elements-a78c1aa838160b44d1ac4ae739c5b189\">So far tutorialization and FTUE is my favourite part of UX design.<\/p>\n\n\n\n<p class=\"has-ast-global-color-0-color has-text-color has-link-color has-medium-font-size wp-elements-ef5b7c558f09b616244896e0ca93f92f\">Below you can take a look at how I designed tutorials for video games.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-ast-global-color-0-color has-accent-4-background-color has-text-color has-background has-link-color wp-elements-d0853254e3f6907676914c17f12ede9c is-layout-flex wp-container-core-columns-is-layout-0920c19d wp-block-columns-is-layout-flex\" style=\"border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-22223934 wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h5 class=\"wp-block-heading has-ast-global-color-0-color has-text-color has-link-color wp-elements-2ac658fec4e0e306caef4fa22541f182\">Going Dark&#8217;s Hidden Tutorials<\/h5>\n\n\n\n<p class=\"has-medium-font-size\">For Going Dark I designed a tutorial in the form of hidden messages, only visible when the lights are turned off. That way I quickly teach the player to turn off all sources of light. The player not only learns to play the game but also reinforces a pattern of thinking that will serve them well when playing the game.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" controls loop muted src=\"https:\/\/www.sergiuszstein.pl\/wp-content\/uploads\/2024\/04\/Tutorial_GoingDark_720p_Comp.mov\"><\/video><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-ast-global-color-0-color has-accent-4-background-color has-text-color has-background has-link-color wp-elements-2598feeb882201d0a8c72e7bace1ce65 is-layout-flex wp-container-core-columns-is-layout-0920c19d wp-block-columns-is-layout-flex\" style=\"border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-22223934 wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h5 class=\"wp-block-heading has-ast-global-color-0-color has-text-color has-link-color wp-elements-a1b5f56bbfc44a8d2924c860532b2a9e\">Yarg!!!&#8217;s Step By Step Instructions<\/h5>\n\n\n\n<p class=\"has-medium-font-size\">For Yarg!!! I designed a tutorial where the player is tasked with preparing the ship for the hunt. For every step the player is told few things and I had to make sure that the thing they need to know to progress the tutorial is learned last. I did it by exploiting the fact that people read from top to bottom. The Information that will let the player progress the tutorial is always at the bottom.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" controls loop muted src=\"https:\/\/www.sergiuszstein.pl\/wp-content\/uploads\/2024\/04\/Tutorial_Yarg_720p_Comp.mov\"><\/video><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-ast-global-color-0-color has-accent-4-background-color has-text-color has-background has-link-color wp-elements-1fd198bf31f2591648abc302eed74ac8 is-layout-flex wp-container-core-columns-is-layout-0920c19d wp-block-columns-is-layout-flex\" style=\"border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-22223934 wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h5 class=\"wp-block-heading has-ast-global-color-0-color has-text-color has-link-color wp-elements-77c3b956101f609c42964f8c2ff99706\">Cursor Chaos&#8217;s Animated Tips<\/h5>\n\n\n\n<p class=\"has-medium-font-size\">For Cursor Chaos I designed animated tutorial tips with descriptive graphics and very few words. They&#8217;re meant to grab attention and explain everything to the player without taking away the fun of experimentation from them.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" controls loop muted src=\"https:\/\/www.sergiuszstein.pl\/wp-content\/uploads\/2024\/04\/Tutorial_CursorChaos_720p_Comp.mov\"><\/video><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-ast-global-color-0-color has-accent-4-background-color has-text-color has-background has-link-color wp-elements-6ecb4007ffeb7afdb7c955702e815c8c is-layout-flex wp-container-core-columns-is-layout-0920c19d wp-block-columns-is-layout-flex\" style=\"border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-22223934 wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h5 class=\"wp-block-heading has-ast-global-color-0-color has-text-color has-link-color wp-elements-20b6c487ff5d3a274701daf106fd82c1\">Honk! Honk!&#8217;s Drivable Tutorial Menu<\/h5>\n\n\n\n<p class=\"has-medium-font-size\">For Honk! Honk! I designed a main menu in which you start a level, exit the game, and select difficulty by parking on a designated parking spot with your bus. This way the main menu teaches the player how to play the game before they even start the level.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" controls loop muted src=\"https:\/\/www.sergiuszstein.pl\/wp-content\/uploads\/2024\/04\/Tutorial_HonkHonk_720p_Comp.mov\"><\/video><\/figure>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tutorialization and FTUE Design During my time as a designer I\u2019ve manager to work on 4 tutorials and a set of card game instructions in 5 separate projects and I\u2019ve had a lot of fun doing it. Tutorialization and FTUE is such a crucial part of any game because there are so many things the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-3192","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sergiuszstein.pl\/index.php?rest_route=\/wp\/v2\/pages\/3192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sergiuszstein.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sergiuszstein.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sergiuszstein.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sergiuszstein.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3192"}],"version-history":[{"count":11,"href":"https:\/\/www.sergiuszstein.pl\/index.php?rest_route=\/wp\/v2\/pages\/3192\/revisions"}],"predecessor-version":[{"id":4255,"href":"https:\/\/www.sergiuszstein.pl\/index.php?rest_route=\/wp\/v2\/pages\/3192\/revisions\/4255"}],"wp:attachment":[{"href":"https:\/\/www.sergiuszstein.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}