{"id":6185,"date":"2023-01-16T09:45:01","date_gmt":"2023-01-16T14:45:01","guid":{"rendered":"http:\/\/andrewkuhar.com\/blog\/?page_id=6185"},"modified":"2023-03-06T10:48:07","modified_gmt":"2023-03-06T15:48:07","slug":"the-phantom-pain","status":"publish","type":"page","link":"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/","title":{"rendered":"Vagrant Story UI Remaster Project"},"content":{"rendered":"\n

Welcome to my user-interface remastering project for Squaresoft’s 2000 classic, Vagrant Story<\/em><\/strong>. I’m actively designing a working prototype in Figma, which you can demo below with a supported game controller.*<\/p>\n\n\n\n

Tips for your journey to Le\u00e1 Monde<\/strong><\/h2>\n\n\n\n
  1. Connect a gamepad.<\/strong> The prototype is built from the ground-up for controller inputs. *Currently supported: PlayStation (DualShock 4), Xbox Wireless Controller, and Nintendo Switch Joy-Cons.<\/em><\/li>
  2. Go fullscreen<\/strong>. Ideal for readability and accurate rendering.<\/li>
  3. This is a work-in-progress<\/strong>. Rebuilding the entire UI for a game as complex as Vagrant Story<\/em> will take time. Current functionality includes: entering & exiting the main menu, viewing the Status section, and an early stages loadout feature.<\/em><\/li><\/ol>\n\n\n\n
    \n
    Launch Figma Demo<\/a><\/div>\n\n\n\n
    About the Project (Pg. 2)<\/a><\/div>\n<\/div>\n\n\n\n

    Coming Soon<\/h2>\n\n\n\n

    Upcoming Features:<\/strong> Currently, I am building out the first list & sorting driven views to the menu (Items, Equipment). In addition, I’m working on a complete reimagining of the Workshop interface.<\/p>\n\n\n\n

    Process Documentation:<\/strong> I’ve been logging my progress towards each milestone, which I plan to share some examples of here. This includes early wireframes, previous iterations, excerpts from my sketchbook, and observations about the original game’s design. Stay tuned!<\/p>\n\n\n\n

    \n\n\n\n\n\n\n\n

    About the Project<\/h2>\n\n\n\n

    Vagrant Story<\/em> is still marvelous to fire up, but it’s not easy to find. In fact, I keep my original PlayStation disc in good condition for this reason.<\/p>\n\n\n\n

    Considered the pinnacle of Squaresoft’s collective talent at the time, Vagrant Story <\/em>followed their groundbreaking work in the late 90s bringing Final Fantasy<\/em> to Sony’s first console. Its capital city of Le\u00e1 Monde remains a good mystery, and the experience overall feels timeless thanks to its cinematic direction and real-time combat. You can still trace back many of the innovations Vagrant Story<\/em> established to today’s action RPGs, including Elden Ring<\/em> and The Witcher<\/em>.<\/p>\n\n\n\n

    For as much of an influence as Vagrant Story<\/em> had on me growing up, I never managed to beat it. Back in 2000, every inch of this game was ahead of its time. But no matter how many times I start a new save on my PSone, I can only get so far. It’s not the combat, the puzzles, nor the story that lose their grip on me \u2013 it’s the amount of time I have to spend in the menus, and how often I get lost in them.<\/p>\n\n\n\n

    When it first arrived, Vagrant Story’s<\/em> menu system and the gameplay it supported were mind-blowing. But as a UI\/UX designer today, I start to notice things getting between me and my adventures through Le\u00e1 Monde. Crafting weapons with confidence still eludes me, and entering combat with the wrong one is now an exercise in patience. There are<\/em> things I’d never change about the game: its writing, its one-of-a-kind Shakespearean graphic-novel art style, and its ghostly ambience to name a few. If Vagrant Story<\/em> were to get a second chance on modern consoles, would its UI\/UX age gracefully, too?<\/strong><\/p>\n\n\n\n

    What you’ll find here are my initial answers to that question. This is an ongoing project I’ve been thinking about and taking notes on for years. We have tools today for exploring these ideas more fully, so I thought it’d be fun to imagine a user interface that complements the vintage quality of Vagrant Story <\/em>with ideas today’s players might find more welcoming, contemporary, and accessible.<\/p>\n\n\n\n

    Thanks for entertaining the thought with me, and I hope you’ll visit again to see where it goes.<\/p>\n\n\n\n

    \n
    Return to Project Overview<\/a><\/div>\n<\/div>\n\n\n\n
    \n","protected":false},"excerpt":{"rendered":"excerpt","protected":false},"author":1,"featured_media":6369,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"episode_type":"","audio_file":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","filesize_raw":"","footnotes":""},"class_list":["post-6185","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nVagrant Story UI Remaster Project – By Andrew Kuhar<\/title>\n<meta name=\"description\" content=\"One UI\/UX designer's reimagining of the menus, controls, and HUD for Sqauresoft's 2000 classic, Vagrant Story, as built in Figma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/\" \/>\n<link rel=\"next\" href=\"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vagrant Story UI Remaster Project – By Andrew Kuhar\" \/>\n<meta property=\"og:description\" content=\"One UI\/UX designer's reimagining of the menus, controls, and HUD for Sqauresoft's 2000 classic, Vagrant Story, as built in Figma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/\" \/>\n<meta property=\"og:site_name\" content=\"By Andrew Kuhar\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-06T15:48:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/andrewkuhar.com\/blog\/wp-content\/uploads\/2023\/03\/AndrewKuhar-VagrantStoryUIRemasterProject-Preview.jpg?fit=1920%2C1186&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1186\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@screenlooking\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/\",\"url\":\"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/\",\"name\":\"Vagrant Story UI Remaster Project – By Andrew Kuhar\",\"isPartOf\":{\"@id\":\"https:\/\/andrewkuhar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/andrewkuhar.com\/blog\/wp-content\/uploads\/2023\/03\/AndrewKuhar-VagrantStoryUIRemasterProject-Preview.jpg?fit=1920%2C1186&ssl=1\",\"datePublished\":\"2023-01-16T14:45:01+00:00\",\"dateModified\":\"2023-03-06T15:48:07+00:00\",\"description\":\"One UI\/UX designer's reimagining of the menus, controls, and HUD for Sqauresoft's 2000 classic, Vagrant Story, as built in Figma.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/andrewkuhar.com\/blog\/wp-content\/uploads\/2023\/03\/AndrewKuhar-VagrantStoryUIRemasterProject-Preview.jpg?fit=1920%2C1186&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/andrewkuhar.com\/blog\/wp-content\/uploads\/2023\/03\/AndrewKuhar-VagrantStoryUIRemasterProject-Preview.jpg?fit=1920%2C1186&ssl=1\",\"width\":1920,\"height\":1186,\"caption\":\"Vagrant Story UI Remaster Project by Andrew Kuhar\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/andrewkuhar.com\/blog\/#website\",\"url\":\"https:\/\/andrewkuhar.com\/blog\/\",\"name\":\"By Andrew Kuhar\",\"description\":\"My thoughts on art, design, and storytelling in video games.\",\"publisher\":{\"@id\":\"https:\/\/andrewkuhar.com\/blog\/#\/schema\/person\/33a9cd37fccb972da48f3cdf466e8937\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/andrewkuhar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/andrewkuhar.com\/blog\/#\/schema\/person\/33a9cd37fccb972da48f3cdf466e8937\",\"name\":\"Andrew Kuhar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/andrewkuhar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/627a4ff04003cea0ae0bfd81d8e8a4a27dfe70ed56cda4e9fc31b16b74f42799?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/627a4ff04003cea0ae0bfd81d8e8a4a27dfe70ed56cda4e9fc31b16b74f42799?s=96&d=mm&r=g\",\"caption\":\"Andrew Kuhar\"},\"logo\":{\"@id\":\"https:\/\/andrewkuhar.com\/blog\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/andrewkuhar.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vagrant Story UI Remaster Project – By Andrew Kuhar","description":"One UI\/UX designer's reimagining of the menus, controls, and HUD for Sqauresoft's 2000 classic, Vagrant Story, as built in Figma.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/","next":"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/2\/","og_locale":"en_US","og_type":"article","og_title":"Vagrant Story UI Remaster Project – By Andrew Kuhar","og_description":"One UI\/UX designer's reimagining of the menus, controls, and HUD for Sqauresoft's 2000 classic, Vagrant Story, as built in Figma.","og_url":"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/","og_site_name":"By Andrew Kuhar","article_modified_time":"2023-03-06T15:48:07+00:00","og_image":[{"width":1920,"height":1186,"url":"https:\/\/i0.wp.com\/andrewkuhar.com\/blog\/wp-content\/uploads\/2023\/03\/AndrewKuhar-VagrantStoryUIRemasterProject-Preview.jpg?fit=1920%2C1186&ssl=1","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@screenlooking","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/","url":"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/","name":"Vagrant Story UI Remaster Project – By Andrew Kuhar","isPartOf":{"@id":"https:\/\/andrewkuhar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/#primaryimage"},"image":{"@id":"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/andrewkuhar.com\/blog\/wp-content\/uploads\/2023\/03\/AndrewKuhar-VagrantStoryUIRemasterProject-Preview.jpg?fit=1920%2C1186&ssl=1","datePublished":"2023-01-16T14:45:01+00:00","dateModified":"2023-03-06T15:48:07+00:00","description":"One UI\/UX designer's reimagining of the menus, controls, and HUD for Sqauresoft's 2000 classic, Vagrant Story, as built in Figma.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/andrewkuhar.com\/blog\/the-phantom-pain\/#primaryimage","url":"https:\/\/i0.wp.com\/andrewkuhar.com\/blog\/wp-content\/uploads\/2023\/03\/AndrewKuhar-VagrantStoryUIRemasterProject-Preview.jpg?fit=1920%2C1186&ssl=1","contentUrl":"https:\/\/i0.wp.com\/andrewkuhar.com\/blog\/wp-content\/uploads\/2023\/03\/AndrewKuhar-VagrantStoryUIRemasterProject-Preview.jpg?fit=1920%2C1186&ssl=1","width":1920,"height":1186,"caption":"Vagrant Story UI Remaster Project by Andrew Kuhar"},{"@type":"WebSite","@id":"https:\/\/andrewkuhar.com\/blog\/#website","url":"https:\/\/andrewkuhar.com\/blog\/","name":"By Andrew Kuhar","description":"My thoughts on art, design, and storytelling in video games.","publisher":{"@id":"https:\/\/andrewkuhar.com\/blog\/#\/schema\/person\/33a9cd37fccb972da48f3cdf466e8937"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/andrewkuhar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/andrewkuhar.com\/blog\/#\/schema\/person\/33a9cd37fccb972da48f3cdf466e8937","name":"Andrew Kuhar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/andrewkuhar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/627a4ff04003cea0ae0bfd81d8e8a4a27dfe70ed56cda4e9fc31b16b74f42799?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/627a4ff04003cea0ae0bfd81d8e8a4a27dfe70ed56cda4e9fc31b16b74f42799?s=96&d=mm&r=g","caption":"Andrew Kuhar"},"logo":{"@id":"https:\/\/andrewkuhar.com\/blog\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/andrewkuhar.com"]}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/andrewkuhar.com\/blog\/wp-json\/wp\/v2\/pages\/6185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/andrewkuhar.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/andrewkuhar.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/andrewkuhar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/andrewkuhar.com\/blog\/wp-json\/wp\/v2\/comments?post=6185"}],"version-history":[{"count":111,"href":"https:\/\/andrewkuhar.com\/blog\/wp-json\/wp\/v2\/pages\/6185\/revisions"}],"predecessor-version":[{"id":6374,"href":"https:\/\/andrewkuhar.com\/blog\/wp-json\/wp\/v2\/pages\/6185\/revisions\/6374"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/andrewkuhar.com\/blog\/wp-json\/wp\/v2\/media\/6369"}],"wp:attachment":[{"href":"https:\/\/andrewkuhar.com\/blog\/wp-json\/wp\/v2\/media?parent=6185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}