{"id":1223,"date":"2023-02-27T08:55:57","date_gmt":"2023-02-27T07:55:57","guid":{"rendered":"http:\/\/chlovis-old.localhost\/?post_type=project&#038;p=1223"},"modified":"2023-02-27T15:22:35","modified_gmt":"2023-02-27T14:22:35","slug":"flat-eye","status":"publish","type":"project","link":"http:\/\/chlovis-old.localhost\/projects\/flat-eye\/","title":{"rendered":"Flat Eye"},"content":{"rendered":"<div class=\"project-block block-hero-project\">\n    <div class=\"content-wrapper\">\n        <div class=\"wrapper\">\n            <div class=\"flex-wrapper\">\n                <div class=\"txt-wrapper\">\n                                            <h1>Flat Eye <\/h1>\n                                                                <ul class=\"tags\">\n                                                            <li>user interface<\/li>\n                                                            <li>user experience<\/li>\n                                                            <li>visual design<\/li>\n                                                    <\/ul>\n                                                                <h2>Goals<\/h2>\n                                                                <div class=\"wysiwyig-content\"><ul>\n<li><span data-slate-fragment=\"JTVCJTdCJTIyY2hpbGRyZW4lMjIlM0ElNUIlN0IlMjJ0ZXh0JTIyJTNBJTIyY3JlYXRlJTIwYW4lMjBlYXN5LXRvLXVzZSUyMGludGVyZmFjZSUyMiU3RCU1RCUyQyUyMnR5cGUlMjIlM0ElMjJwYXJhZ3JhcGglMjIlN0QlNUQ=\">Create a soothing easy-to-use interface for a management game<\/span><\/li>\n<li>Designing an OS with a Kindle inspired aesthetic<\/li>\n<li>Coordination of 3 external freelancers around UI and Branding tasks<\/li>\n<li>Identifying interactions that need priority playtests and conduct iterations for those<\/li>\n<li>Implementing game design mechanics and translating it into UI<\/li>\n<\/ul>\n<\/div>\n                                    <\/div>\n                <div class=\"btn-wrapper\">\n                                            <a href=\"https:\/\/store.steampowered.com\/app\/1358840\/Flat_Eye\/\" title=\"View on Steam \" target=\"_blank\" class=\"btn is-rounded is-rounded-border is-rounded-white-border\">View on Steam <\/a>\n                                    <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<h2 class=\"wp-block-heading\">An Easy-to-Use HUD for a Soothing Experience<\/h2>\n\n\n\n<p>In this project, I designed a user interface for a video game where the player assumes the role of a station manager. My goal was to create an easy-to-use interface that would feel both hypnotic and soothing to the player.&nbsp;<\/p>\n\n\n\n<p>To achieve this, I developed a fake operating system (OS) with a simple and intuitive design that would help players quickly navigate the game. The inspiration for the design was drawn from the iconic Apple design systems of the past, but with a modern twist. I incorporated a&nbsp;<strong>kindle aesthetic<\/strong>&nbsp;that added a special touch to the interface.&nbsp;<\/p>\n\n\n\n<p>The end result was an OS that made the overall gaming experience more immersive while allowing players to focus on managing their station without getting bogged down in complicated menus and instructions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1080\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/obvwzgocycxhxsppwnh0.jpg\" alt=\"\" class=\"wp-image-1225\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/obvwzgocycxhxsppwnh0.jpg 1920w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/obvwzgocycxhxsppwnh0-768x432.jpg 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/obvwzgocycxhxsppwnh0-1536x864.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1080\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/enwt3ectpc1s5nhdx3cx-1.png\" alt=\"\" class=\"wp-image-1238\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/enwt3ectpc1s5nhdx3cx-1.png 1920w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/enwt3ectpc1s5nhdx3cx-1-768x432.png 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/enwt3ectpc1s5nhdx3cx-1-1536x864.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  grey\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<h2 class=\"wp-block-heading\">Component Based Design<\/h2>\n\n\n\n<p>To develop the user interface for this video game, I worked within Figma, prototyping every interaction and refining the design until it was both visually appealing and easy to use.<\/p>\n\n\n\n<p>I also created components for every UI element with their different states, such as hover and click interactions, to make it easier for developers to envision all the different cases at a glance. I like to think that this approach allowed for faster development and ensured consistency across the interface.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"2018\" height=\"1724\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Capture-decran-2023-02-25-a-16.12.26.png\" alt=\"\" class=\"wp-image-1224\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Capture-decran-2023-02-25-a-16.12.26.png 2018w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Capture-decran-2023-02-25-a-16.12.26-768x656.png 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Capture-decran-2023-02-25-a-16.12.26-1536x1312.png 1536w\" sizes=\"(max-width: 2018px) 100vw, 2018px\" \/><\/figure>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  greyF9\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<h2 class=\"wp-block-heading\">The Power of Progression: A Microchip-Inspired Technology Tree<\/h2>\n\n\n\n<p>We created a Technology Tree that took the shape of a computer microchip. The goal was to visually convey the growth of power as the player progressed through the game.&nbsp;<\/p>\n\n\n\n<p>By incorporating the microchip design, we were able to reinforce the technology-driven nature of the game while also making it more visually interesting and engaging. We allowed players to navigate through this tree in both a list view and in the visual representation.<\/p>\n\n\n\n<p>The result was a technology tree that not only provided valuable information to players but also enhanced the overall gaming experience.<\/p>\n\n\n<div class=\"project-block block-slider is-larger\">\n            <div class=\"swiper-container js-swiper-slider\" data-slides-per-view=\"1.25\" data-slides-per-view-sm=\"1.1\">\n            <div class=\"swiper-wrapper\">\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/zgam1kgljniv35eiavkb.png\" alt=\"\" title=\"zgam1kgljniv35eiavkb\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/lspblkkszmvpufgfet1y.png\" alt=\"\" title=\"lspblkkszmvpufgfet1y\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/jlao7cdylmykuk2dgxzu.png\" alt=\"\" title=\"jlao7cdylmykuk2dgxzu\">\n                    <\/div>\n                            <\/div>\n            <div class=\"js-swiper-prev swiper-nav swiper-nav-prev\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/ico-left.svg\" alt=\"Prev\" title=\"Prev\">\n            <\/div>\n            <div class=\"js-swiper-next swiper-nav swiper-nav-next\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/ico-right.svg\" alt=\"Next\" title=\"Next\">\n            <\/div>\n        <\/div>\n            <\/div>\n\n\n<figure class=\"wp-block-video\"><video  src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/TechTree_end-1.mov\"><\/video><\/figure>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  grey\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<h2 class=\"wp-block-heading\">Resource Allocation with Grid System<\/h2>\n\n\n\n<p>The Grid system is the technical view of the installed modules in the station. Each module required specific resources, such as electricity, while also providing resources such as data or DNA when plugged in. As the station expands, players have to optimize each connection and make the most of the available resources, carefully scaling them to avoid overloading the system.&nbsp;<\/p>\n\n\n\n<p>To ensure the grid was manageable, we implemented a lot of iterations with playtests to simplify the interactions, despite the complex technical representation. Proper maintenance of the modules is crucial as there is a risk of a chain reaction of module breakage if one module is not functioning correctly.<\/p>\n\n\n<div class=\"project-block block-slider is-larger\">\n            <div class=\"swiper-container js-swiper-slider\" data-slides-per-view=\"1\" data-slides-per-view-sm=\"1.1\">\n            <div class=\"swiper-wrapper\">\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/xrmlerbdbgzzhps19lky.png\" alt=\"\" title=\"xrmlerbdbgzzhps19lky\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/owfvvxysimr3brzn57jz.jpg\" alt=\"\" title=\"owfvvxysimr3brzn57jz\">\n                    <\/div>\n                            <\/div>\n            <div class=\"js-swiper-prev swiper-nav swiper-nav-prev\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/ico-left.svg\" alt=\"Prev\" title=\"Prev\">\n            <\/div>\n            <div class=\"js-swiper-next swiper-nav swiper-nav-next\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/ico-right.svg\" alt=\"Next\" title=\"Next\">\n            <\/div>\n        <\/div>\n            <\/div>\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<h2 class=\"wp-block-heading\">Three Factions, Three Visual Themes<\/h2>\n\n\n\n<p>In this project, I created three distinct visual themes for the user interface, each corresponding to one of the game&#8217;s major factions: Flat Eye, Hibiscus, and a Hacker group.<\/p>\n\n\n\n<p>Each faction has its own unique visual style, color palette, and design language, and I worked to create a consistent aesthetic throughout all the screens and modules for each theme. This meant developing three separate visual layouts for all of the game&#8217;s UI elements, including buttons, menus, and icons, to ensure that the user experience felt cohesive and immersive, no matter which faction the player chose to align with.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"2701\" height=\"3924\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/FlateyeThemes.png\" alt=\"\" class=\"wp-image-1237\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/FlateyeThemes.png 2701w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/FlateyeThemes-768x1116.png 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/FlateyeThemes-1057x1536.png 1057w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/FlateyeThemes-1410x2048.png 1410w\" sizes=\"(max-width: 2701px) 100vw, 2701px\" \/><\/figure>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  grey\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<h2 class=\"wp-block-heading\">Empowering Players with Personalised Content Warnings<\/h2>\n\n\n\n<p>In the game, we implemented a content warning personalization system. At the beginning of the game, players can select topics they&#8217;re uncomfortable with and want to be informed about when they&#8217;re mentioned in the game story. During the game, before a dialog or document,<strong>&nbsp;players are notified if a section contains any of the selected sensitive themes<\/strong>, giving them full control over how they interact with the game. They can then choose&nbsp;<strong>to skip or keep reading<\/strong>, allowing for a personalized and comfortable game experience.<\/p>\n\n\n<div class=\"project-block block-slider is-larger\">\n            <div class=\"swiper-container js-swiper-slider\" data-slides-per-view=\"1\" data-slides-per-view-sm=\"1.1\">\n            <div class=\"swiper-wrapper\">\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Trigger-Warning-14.png\" alt=\"\" title=\"Trigger Warning 14\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Trigger-Warning-17.png\" alt=\"\" title=\"Trigger Warning 17\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Beginning-Dialog.png\" alt=\"\" title=\"Beginning Dialog\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/FLAT_DOC-Open.png\" alt=\"\" title=\"FLAT_DOC Open\">\n                    <\/div>\n                            <\/div>\n            <div class=\"js-swiper-prev swiper-nav swiper-nav-prev\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/ico-left.svg\" alt=\"Prev\" title=\"Prev\">\n            <\/div>\n            <div class=\"js-swiper-next swiper-nav swiper-nav-next\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/ico-right.svg\" alt=\"Next\" title=\"Next\">\n            <\/div>\n        <\/div>\n            <\/div>\n                    <\/div>\n    <\/div>\n<\/div>","protected":false},"template":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Flat Eye - Designing a Computer UI for a Management Video Game<\/title>\n<meta name=\"description\" content=\"I single-handedly designed the UI of a management video game, including menus &amp; HUDs. Check the case-study.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flat Eye - Designing a Computer UI for a Management Video Game\" \/>\n<meta property=\"og:description\" content=\"I single-handedly designed the UI of a management video game, including menus &amp; HUDs. Check the case-study.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/chlovis-old.localhost\/projects\/flat-eye\/\" \/>\n<meta property=\"og:site_name\" content=\"Chlovis Lobre\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:22:35+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/obvwzgocycxhxsppwnh0.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/chlovis-old.localhost\/projects\/flat-eye\/\",\"url\":\"http:\/\/chlovis-old.localhost\/projects\/flat-eye\/\",\"name\":\"Flat Eye - Designing a Computer UI for a Management Video Game\",\"isPartOf\":{\"@id\":\"http:\/\/chlovis-old.localhost\/#website\"},\"datePublished\":\"2023-02-27T07:55:57+00:00\",\"dateModified\":\"2023-02-27T14:22:35+00:00\",\"description\":\"I single-handedly designed the UI of a management video game, including menus & HUDs. Check the case-study.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/chlovis-old.localhost\/projects\/flat-eye\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/chlovis-old.localhost\/#website\",\"url\":\"http:\/\/chlovis-old.localhost\/\",\"name\":\"Chlovis Lobre\",\"description\":\"I do interaction design &amp; ux consulting for video games, start-ups and agencies.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/chlovis-old.localhost\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flat Eye - Designing a Computer UI for a Management Video Game","description":"I single-handedly designed the UI of a management video game, including menus & HUDs. Check the case-study.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Flat Eye - Designing a Computer UI for a Management Video Game","og_description":"I single-handedly designed the UI of a management video game, including menus & HUDs. Check the case-study.","og_url":"http:\/\/chlovis-old.localhost\/projects\/flat-eye\/","og_site_name":"Chlovis Lobre","article_modified_time":"2023-02-27T14:22:35+00:00","og_image":[{"url":"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/obvwzgocycxhxsppwnh0.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/chlovis-old.localhost\/projects\/flat-eye\/","url":"http:\/\/chlovis-old.localhost\/projects\/flat-eye\/","name":"Flat Eye - Designing a Computer UI for a Management Video Game","isPartOf":{"@id":"http:\/\/chlovis-old.localhost\/#website"},"datePublished":"2023-02-27T07:55:57+00:00","dateModified":"2023-02-27T14:22:35+00:00","description":"I single-handedly designed the UI of a management video game, including menus & HUDs. Check the case-study.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/chlovis-old.localhost\/projects\/flat-eye\/"]}]},{"@type":"WebSite","@id":"http:\/\/chlovis-old.localhost\/#website","url":"http:\/\/chlovis-old.localhost\/","name":"Chlovis Lobre","description":"I do interaction design &amp; ux consulting for video games, start-ups and agencies.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/chlovis-old.localhost\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"acf":[],"_links":{"self":[{"href":"http:\/\/chlovis-old.localhost\/wp-json\/wp\/v2\/project\/1223"}],"collection":[{"href":"http:\/\/chlovis-old.localhost\/wp-json\/wp\/v2\/project"}],"about":[{"href":"http:\/\/chlovis-old.localhost\/wp-json\/wp\/v2\/types\/project"}],"wp:attachment":[{"href":"http:\/\/chlovis-old.localhost\/wp-json\/wp\/v2\/media?parent=1223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}