<?xml version="1.0" encoding="UTF-8"?>
<!--Generated by Site-Server v@build.version@ (http://www.squarespace.com) on Sun, 05 Apr 2026 09:51:55 GMT
--><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://www.rssboard.org/media-rss" version="2.0"><channel><title>HUDS+GUIS</title><link>https://www.hudsandguis.com/</link><lastBuildDate>Fri, 20 Mar 2026 00:12:51 +0000</lastBuildDate><language>en-US</language><generator>Site-Server v@build.version@ (http://www.squarespace.com)</generator><description><![CDATA[<p>Articles</p>]]></description><item><title>2025 Recap</title><dc:creator>Jono Yuen</dc:creator><pubDate>Mon, 22 Dec 2025 05:03:00 +0000</pubDate><link>https://www.hudsandguis.com/home/2025/2025-recap</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:6948cb88b25e2d11b7152bac</guid><description><![CDATA[<figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/428ca1bc-7c71-44a0-bd7d-906513fd3393/img_2025.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/428ca1bc-7c71-44a0-bd7d-906513fd3393/img_2025.png?format=1000w" width="1180" height="664" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/428ca1bc-7c71-44a0-bd7d-906513fd3393/img_2025.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/428ca1bc-7c71-44a0-bd7d-906513fd3393/img_2025.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/428ca1bc-7c71-44a0-bd7d-906513fd3393/img_2025.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/428ca1bc-7c71-44a0-bd7d-906513fd3393/img_2025.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/428ca1bc-7c71-44a0-bd7d-906513fd3393/img_2025.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/428ca1bc-7c71-44a0-bd7d-906513fd3393/img_2025.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/428ca1bc-7c71-44a0-bd7d-906513fd3393/img_2025.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <p class="">It’s that time again, we’re wrapping up the year, so here’s our recap of what we explored in 2025.</p><p class="">This year we explored some examples of retro sci-fi, from the analog-future vibes of <a href="https://www.hudsandguis.com/home/2025/alien-romulus" target="_blank"><em>Alien: Romulus</em></a> and <a href="https://www.hudsandguis.com/home/2025/silo-ui" target="_blank"><em>Silo</em></a>, to anime cyberpunk in <a href="https://www.hudsandguis.com/home/2025/cyber-city-odeo-808" target="_blank"><em>Cyber City Oedo 808</em></a>. Along the way, we revisited how older visions of the future continue to shape modern design language.</p><p class="">On the product side, we looked into evolving UI systems like <a href="https://www.hudsandguis.com/home/2025/apple-liquid-glass" target="_blank"><em>Apple’s Liquid Glass</em></a> and <a href="https://www.hudsandguis.com/home/2025/google-m3" target="_blank"><em>Google’s Material 3</em></a>, exploring how motion, depth, and tactility are redefining contemporary interfaces. We also explored Korean FUI through <a href="https://www.hudsandguis.com/home/2025/the-silent-sea" target="_blank"><em>Silent Sea</em></a>, highlighting how regional design approaches bring a different perspective to sci-fi interfaces.</p><p class="">As always, a huge thank you to everyone who reached out, shared posts, bought a book, grabbed some merch, or supported us in any way. Your encouragement keeps this project moving forward.</p><p class="">Enjoy the holiday break, and we’ll see you next year for more FUI in 2026 🚀</p><p class=""><a href="https://www.jonoyuen.com/" target="_blank">Jono Yuen</a></p><p class=""><a href="mailto:info@hudsandguis.com">Send me a message</a></p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2025/alien-romulus" target="_blank" aria-label="Alien: Romulus" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766379228502-H14WNQUQAQT4ZEIM65VD/img-alienRomulus.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Alien: Romulus" data-load="false" data-image-id="6948ced785e0c93d16f73ee4" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766379228502-H14WNQUQAQT4ZEIM65VD/img-alienRomulus.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2025/silo-ui" target="_blank" aria-label="Silo" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766379237910-IHM5P8YWHY61U7GX558V/img-silo.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Silo" data-load="false" data-image-id="6948cedd9c369e5e2293cae3" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766379237910-IHM5P8YWHY61U7GX558V/img-silo.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2025/cyber-city-odeo-808" target="_blank" aria-label="Cyber City Oedo 808" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766379247196-3EK87115KQ3ZTHDLU16B/img-cybercityodeo.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Cyber City Oedo 808" data-load="false" data-image-id="6948cee7938dd61d1f66e67c" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766379247196-3EK87115KQ3ZTHDLU16B/img-cybercityodeo.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2025/apple-liquid-glass" target="_blank" aria-label="Apple Liquid Glass" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766379250454-KOKSRS0VUFJ71YEC1QY9/img-appleWWDC.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Apple Liquid Glass" data-load="false" data-image-id="6948cef011e5162e3389d2db" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766379250454-KOKSRS0VUFJ71YEC1QY9/img-appleWWDC.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2025/google-m3" target="_blank" aria-label="Google Material 3" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766379255920-7N7UMQ5K3H647OJLBR3C/img-googleM3.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Google Material 3" data-load="false" data-image-id="6948cef53c01d26a7f40fce6" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766379255920-7N7UMQ5K3H647OJLBR3C/img-googleM3.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2025/the-silent-sea" target="_blank" aria-label="The Silent Sea" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766379264228-717JQLTP9C5IVLXN19TT/img-theSilentSea.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="The Silent Sea" data-load="false" data-image-id="6948cef9d884412467670f71" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766379264228-717JQLTP9C5IVLXN19TT/img-theSilentSea.png?format=1000w" /><br>
                </a>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1766381879754-NLD2ZUPAWKJL5SAPOMV7/img_2025.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">2025 Recap</media:title></media:content></item><item><title>The Silent Sea</title><category>Film</category><category>GUIs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Tue, 07 Oct 2025 07:26:21 +0000</pubDate><link>https://www.hudsandguis.com/home/2025/the-silent-sea</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:68e38b0bd102fb25231e7b7c</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/2f10061a-d700-4eb7-8292-12725be41891/img-theSilentSea.png?format=1000w" />


  <p class="">The South Korean Netflix series <a href="https://www.imdb.com/title/tt11570202/" target="_blank">The Silent Sea</a> is packed with FUIs, from holographic displays and weapon UIs to handheld scanners, mobile interfaces, and control panels.</p><p class="">I was very interested to see FUI designs from a Korean production. Korean characters tend to be more compact than English, providing designers with a bit more breathing room in layouts. That said, I was surprised to find that many of the interfaces were in actually in English.</p><h2>Boardroom hologram</h2><p class="">The rotating hologram works beautifully in this boardroom setting. What an engaging way to talk through a mission. You’d structure presentations differently if this technology were available, shifting focus between the holograms and the speaker and choreographing moments of attention. It would be even more engaging if it were interactive, the ability to rotate, zoom, or highlight sections in real time would make for an incredibly immersive briefing.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743697432-BAZJ6K3TKICL80P3I00T/boardroom-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743697432-BAZJ6K3TKICL80P3I00T/boardroom-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="boardroom-1.gif" data-load="false" data-image-id="68e38e4f14cdc14680593b16" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743697432-BAZJ6K3TKICL80P3I00T/boardroom-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743670776-USVLXX54TNNN8YYSMGOQ/boardroom-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743670776-USVLXX54TNNN8YYSMGOQ/boardroom-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="boardroom-2.gif" data-load="false" data-image-id="68e38e4f0d5d824b029f2c32" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743670776-USVLXX54TNNN8YYSMGOQ/boardroom-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743702380-2H2O8TPXR238ERRO0VQ7/boardroom-3.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743702380-2H2O8TPXR238ERRO0VQ7/boardroom-3.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="boardroom-3.gif" data-load="false" data-image-id="68e38eb878a6b52b64d0994f" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743702380-2H2O8TPXR238ERRO0VQ7/boardroom-3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Gun UI</h2><p class="">There’s something about having a display on a gun that makes it feel instantly futuristic. Here, the UI lets you see ammo counts and mode settings at a glance and even switch the weapon to fire a tranquilliser.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743858134-Y4T55IA3MUSREA93142Y/gun-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="gun-1.gif" data-load="false" data-image-id="68e38f16aaf763581570881e" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743858134-Y4T55IA3MUSREA93142Y/gun-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743800353-36047VHY72QRJIQX2JWT/gun-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="gun-2.gif" data-load="false" data-image-id="68e38f16b005703a2fd2e1a8" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743800353-36047VHY72QRJIQX2JWT/gun-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Scanner</h2><p class="">Here’s a classic sci-fi horror trope, a scanner that helps detect missing crew members or other lifeforms. Similar to Aliens, it serves a familiar narrative purpose, but The Silent Sea uses a high-fidelity display as opposed to a low-fi aesthetic. Check out (<a href="https://www.hudsandguis.com/home/2014/06/04/alien-isolation" target="_blank">Alien: Isolation</a> and <a href="https://www.hudsandguis.com/home/2025/alien-romulus" target="_blank">Alien Romulus</a>)</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743967991-A6CBUJPPZBOI84EGAI3Q/handheld-radar-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="handheld-radar-1.gif" data-load="false" data-image-id="68e38fb38fdb1c59fcd21150" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743967991-A6CBUJPPZBOI84EGAI3Q/handheld-radar-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759744031446-9KL5H18JL3GBJC2F7DKC/handheld-radar-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="handheld-radar-2.gif" data-load="false" data-image-id="68e38fb3b005703a2fd2f32d" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759744031446-9KL5H18JL3GBJC2F7DKC/handheld-radar-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743992668-B4VPQNAC1UYMQVH0887T/handheld-radar-3.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="handheld-radar-3.gif" data-load="false" data-image-id="68e38fe1d102fb25231f1a28" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759743992668-B4VPQNAC1UYMQVH0887T/handheld-radar-3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Window display</h2><p class="">Here, we see a window looking out onto the surface of the moon, which tints to become a display. While it looks like a classic sci-fi interface, this kind of technology is available today. Smart glass and tintable surfaces are becoming more common, so what feels futuristic in the show might not be far from reality.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759744497582-GJ4G0UMOK7UBHANI5VOD/kiosk-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759744497582-GJ4G0UMOK7UBHANI5VOD/kiosk-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="kiosk-1.gif" data-load="false" data-image-id="68e391e2b7e5e77901a9d6d2" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759744497582-GJ4G0UMOK7UBHANI5VOD/kiosk-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759797026782-9TEY7FIL10ESWTBR37K3/window-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759797026782-9TEY7FIL10ESWTBR37K3/window-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="window-1.gif" data-load="false" data-image-id="68e45ef7dc2303576bb60e0f" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759797026782-9TEY7FIL10ESWTBR37K3/window-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759797046483-1G3CXET5KT328CL00EE5/window-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759797046483-1G3CXET5KT328CL00EE5/window-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="window-2.gif" data-load="false" data-image-id="68e45ef752662259b97701c5" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759797046483-1G3CXET5KT328CL00EE5/window-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Mobile device</h2><p class="">This one is a bit strange, it’s hard to see how the user could type messages using just three buttons and no keyboard. There is a suggestion wheel, but having to tap repeatedly to cycle through options seems tedious. That said, the interface probably isn’t meant to be scrutinized closely or looped over repeatedly. Viewed in context, it reads as something “from another time and world,” reinforcing the sense that this is technology shaped by its own unique environment.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759745408495-R2PXKWHIEY7G886Q2M4S/mobile-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759745408495-R2PXKWHIEY7G886Q2M4S/mobile-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="mobile-1.gif" data-load="false" data-image-id="68e3956578a6b52b64d187c8" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759745408495-R2PXKWHIEY7G886Q2M4S/mobile-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759745512966-8ZYC40PXVWTIV090ZU10/mobile-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759745512966-8ZYC40PXVWTIV090ZU10/mobile-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="mobile-2.gif" data-load="false" data-image-id="68e395c8398fbc2e1517ccb3" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759745512966-8ZYC40PXVWTIV090ZU10/mobile-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Control panel</h2><p class="">Here’s a series of control panel screens, showing a mix of Korean and English. I found it interesting that many of the design elements are so small and thin, especially considering the astronauts’ thick gloves. You might expect a chunkier, more simplified design to accommodate the tactile limitations. However, as long as the interactive areas are large enough, the fine detail of the display becomes less of an issue and it makes for a visually elegant interface that doesn’t feel clunky.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759746166626-WW12DNCXAITFHJYEPKYG/panel-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="panel-1.gif" data-load="false" data-image-id="68e397f4f1e52d70a4f089e7" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759746166626-WW12DNCXAITFHJYEPKYG/panel-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759746157891-DDDK1DVSW3K4ZHUQGXZD/panel-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="panel-2.gif" data-load="false" data-image-id="68e397f3e0ec970c2e4794f1" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759746157891-DDDK1DVSW3K4ZHUQGXZD/panel-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759746188705-0FI2WJ8QXGYZ3UZZN3KH/panel-3.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="panel-3.gif" data-load="false" data-image-id="68e3986f16bcb23b07587146" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759746188705-0FI2WJ8QXGYZ3UZZN3KH/panel-3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759746193208-73PF485HGUP91SY2GS2V/panel-4.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="panel-4.gif" data-load="false" data-image-id="68e398780388af3e4418a569" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759746193208-73PF485HGUP91SY2GS2V/panel-4.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759746224703-D6DMBL4LJM6YPJUWXXZK/panel-5.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="panel-5.gif" data-load="false" data-image-id="68e3988eee7a7e371203df7b" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759746224703-D6DMBL4LJM6YPJUWXXZK/panel-5.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759746257120-YZFU5A89J9A9V9ERIEZO/panel-6.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="panel-6.gif" data-load="false" data-image-id="68e398935c87c717e9726739" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759746257120-YZFU5A89J9A9V9ERIEZO/panel-6.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Wrist UI</h2><p class="">The wrist UI is primarily used to display life stats, like oxygen levels and other vital signs, keeping the crew informed at a glance. It also doubles as an authentication device for accessing locked areas.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759795597067-ZR53YCSZIBOKSGPQQV3D/wrist-fill.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="wrist-fill.gif" data-load="false" data-image-id="68e459557fee9c0004e1762f" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759795597067-ZR53YCSZIBOKSGPQQV3D/wrist-fill.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759795625316-Y43G61H26SH1ULRLC3E8/wrist-level1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="wrist-level1.gif" data-load="false" data-image-id="68e45955b8482f7877307a85" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759795625316-Y43G61H26SH1ULRLC3E8/wrist-level1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759795635629-APQD9TP7IX2OD0BNZXXP/wrist-unlock-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="wrist-unlock-1.gif" data-load="false" data-image-id="68e4598fc1b7573a72fff6dc" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759795635629-APQD9TP7IX2OD0BNZXXP/wrist-unlock-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759795640501-OY3R684P311LJR8A3LQQ/wrist-unlock-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="wrist-unlock-2.gif" data-load="false" data-image-id="68e459ab219df81b1af230c1" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759795640501-OY3R684P311LJR8A3LQQ/wrist-unlock-2.gif?format=1000w" /><br>
                </a>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759742806217-SJVNUUJLW1VUHAMH3VVH/img-theSilentSea.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">The Silent Sea</media:title></media:content></item><item><title>Google Material 3 Expressive</title><category>Products</category><dc:creator>Jono Yuen</dc:creator><pubDate>Mon, 29 Sep 2025 22:59:27 +0000</pubDate><link>https://www.hudsandguis.com/home/2025/google-m3</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:684d0b7ce57e334c66841c0d</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/dc9325ca-71fc-431e-a0f3-2c0b9303e00a/img-googleM3.png?format=1000w" />


  <p class="">Continuing on the topic of UI systems, here’s a look at <a href="https://m3.material.io/" target="_blank">Google’s Material 3 Expressive design system</a>. The past decade has been dominated by extreme minimalism, so it’s refreshing to see an update that doesn’t strip things away, but instead brings personality, variety, and more human qualities back into interfaces.</p><p class="">Material Design has long been celebrated for its consistency. But consistency can lead to sameness. Many apps and interfaces began to feel like interchangeable containers, lacking personality.</p><p class="">Expressive feels like a deliberate evolution. It embraces playful typography, stronger motion principles, and colour systems that give interfaces character and encourages individuality.</p><p class="">It also highlights an interesting pattern in design, where a wave of restraint is often followed by a wave of expression.</p><p class="">What I really like is its emphasis on how interfaces feel, and its focus on bringing emotion into the experience.</p>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1759132244295-SRX07ECAHJ83GX1Y98O8/img-googleM3.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Google Material 3 Expressive</media:title></media:content></item><item><title>Apple’s Liquid Glass</title><category>Products</category><dc:creator>Jono Yuen</dc:creator><pubDate>Tue, 22 Jul 2025 05:10:04 +0000</pubDate><link>https://www.hudsandguis.com/home/2025/apple-liquid-glass</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:684d056db1a5ec0335d217ac</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/9802c6ff-c8cb-4a0e-a9dc-927ead88c44a/img-appleWWDC.png?format=1000w" />


  <p class="">Here’s a look at <a href="https://www.apple.com/au/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/" target="_blank">Apple’s Liquid Glass UI</a>, showcased at WWDC 2025. Reviews have been mixed, with some praising its visual ambition and others highlighting accessibility concerns, even likening it to Windows Vista. Whether you're a fan or not, there’s no denying it has sparked important conversations in UI design.</p><p class="">Personally, I see it as a promising move. It’s encouraging to see a major industry leader putting renewed value on visual expression. Over the past few years, UI design has become highly standardised, heavily influenced by established systems like Google’s Material Design. As a result, many interfaces have started to look predictable and, frankly, a bit boring.</p><p class="">It’s helpful when an influential company does something differently. It sets a precedent and opens up new conversations. For instance, the dynamic corner radius would rarely make it into serious design and development discussions. The value is hard to quantify compared to the effort required to implement it. But now, Apple has made it tangible, shifting what’s considered impossible into the realm of the plausible.</p>





















  
  














































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/8485bc8d-4952-468c-af4b-68d8efb4fda2/adoption-guide-slider.gif" data-image-dimensions="800x236" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/8485bc8d-4952-468c-af4b-68d8efb4fda2/adoption-guide-slider.gif?format=1000w" width="800" height="236" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/8485bc8d-4952-468c-af4b-68d8efb4fda2/adoption-guide-slider.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/8485bc8d-4952-468c-af4b-68d8efb4fda2/adoption-guide-slider.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/8485bc8d-4952-468c-af4b-68d8efb4fda2/adoption-guide-slider.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/8485bc8d-4952-468c-af4b-68d8efb4fda2/adoption-guide-slider.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/8485bc8d-4952-468c-af4b-68d8efb4fda2/adoption-guide-slider.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/8485bc8d-4952-468c-af4b-68d8efb4fda2/adoption-guide-slider.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/8485bc8d-4952-468c-af4b-68d8efb4fda2/adoption-guide-slider.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <p class="">Liquid Glass also signals a shift away from older technical constraints. Remember the rise of flat design? It was a direct response to the limitations of early smartphones, chosen for its scalability and lightweight performance demands. In contrast, Liquid Glass showcases real time light rendering, something not feasible on consumer hardware a decade ago.</p><p class="">This brings up some interesting questions. For example, will we be seeing more UI that's inspired by what you would normally find in game engines, reacting dynamically to its environment? As spatial interfaces become more common, especially on platforms like <a href="https://www.hudsandguis.com/home/2023/apple-vision-pro" target="_blank">Apple Vision</a>, it seems likely that game like UI could shape the next evolution of interface design.</p><p class="">(UPDATE) - In light of Apple’s Liquid Glass, Figma has released new Glass effects. Check out this <a href="https://www.figma.com/community/file/1522715486231239473/glass-effect-playground" target="_blank">Glass Effects Playground file</a> to play around with it.</p><p data-rte-preserve-empty="true" class=""></p>





















  
  














































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b0fc4090-2942-41ae-aac4-52def5459a6a/smartwatch.gif" data-image-dimensions="600x726" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b0fc4090-2942-41ae-aac4-52def5459a6a/smartwatch.gif?format=1000w" width="600" height="726" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b0fc4090-2942-41ae-aac4-52def5459a6a/smartwatch.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b0fc4090-2942-41ae-aac4-52def5459a6a/smartwatch.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b0fc4090-2942-41ae-aac4-52def5459a6a/smartwatch.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b0fc4090-2942-41ae-aac4-52def5459a6a/smartwatch.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b0fc4090-2942-41ae-aac4-52def5459a6a/smartwatch.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b0fc4090-2942-41ae-aac4-52def5459a6a/smartwatch.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b0fc4090-2942-41ae-aac4-52def5459a6a/smartwatch.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753009454260-FFJXINTHA583JFAN2YCA/article_283553_apple_liquid_glass_ui_early_reactions_1749579697048_45f7c7ecd7.jpeg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753009454260-FFJXINTHA583JFAN2YCA/article_283553_apple_liquid_glass_ui_early_reactions_1749579697048_45f7c7ecd7.jpeg" data-image-dimensions="1280x720" data-image-focal-point="0.5,0.5" alt="article_283553_apple_liquid_glass_ui_early_reactions_1749579697048_45f7c7ecd7.jpeg" data-load="false" data-image-id="687ccd2d32c23a4b422503f0" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753009454260-FFJXINTHA583JFAN2YCA/article_283553_apple_liquid_glass_ui_early_reactions_1749579697048_45f7c7ecd7.jpeg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008595723-WID9KHQL7EIXKR8129X9/focus__ggpbjiev9i62_large_2x.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008595723-WID9KHQL7EIXKR8129X9/focus__ggpbjiev9i62_large_2x.jpg" data-image-dimensions="744x900" data-image-focal-point="0.5103739754098361,0.4965986394557823" alt="focus__ggpbjiev9i62_large_2x.jpg" data-load="false" data-image-id="687cc9d3fedbb369d610f850" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008595723-WID9KHQL7EIXKR8129X9/focus__ggpbjiev9i62_large_2x.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008593575-9CFIA0F0RHWSMTVQ7U5C/dynamic_controls__ezqkwhge3vsm_large_2x+%281%29.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008593575-9CFIA0F0RHWSMTVQ7U5C/dynamic_controls__ezqkwhge3vsm_large_2x+%281%29.jpg" data-image-dimensions="1392x900" data-image-focal-point="0.5,0.5" alt="dynamic_controls__ezqkwhge3vsm_large_2x (1).jpg" data-load="false" data-image-id="687cc9d041ee9d520a093e78" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008593575-9CFIA0F0RHWSMTVQ7U5C/dynamic_controls__ezqkwhge3vsm_large_2x+%281%29.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008590914-96X2PAYXGM5PRY95FYBJ/app_icons__ghno6awtphe2_large_2x.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008590914-96X2PAYXGM5PRY95FYBJ/app_icons__ghno6awtphe2_large_2x.jpg" data-image-dimensions="744x900" data-image-focal-point="0.5,0.5" alt="app_icons__ghno6awtphe2_large_2x.jpg" data-load="false" data-image-id="687cc9ce0193ca69b629a143" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008590914-96X2PAYXGM5PRY95FYBJ/app_icons__ghno6awtphe2_large_2x.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008590629-GN37HMOML298N4B89MHI/controls__djddwinnqlqq_large_2x.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008590629-GN37HMOML298N4B89MHI/controls__djddwinnqlqq_large_2x.jpg" data-image-dimensions="744x900" data-image-focal-point="0.5,0.5" alt="controls__djddwinnqlqq_large_2x.jpg" data-load="false" data-image-id="687cc9cea63e0b48569ffac2" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008590629-GN37HMOML298N4B89MHI/controls__djddwinnqlqq_large_2x.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008592755-0QPIGMXU4PGKK3LPL375/design__51h6pg9xusii_large_2x.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008592755-0QPIGMXU4PGKK3LPL375/design__51h6pg9xusii_large_2x.jpg" data-image-dimensions="1392x900" data-image-focal-point="0.5,0.5" alt="design__51h6pg9xusii_large_2x.jpg" data-load="false" data-image-id="687cc9cf65caa0077fb8fef9" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008592755-0QPIGMXU4PGKK3LPL375/design__51h6pg9xusii_large_2x.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008598009-1AH42M4UF76X94V3AYWD/liquid_glass__f595gw1ozwi2_large_2x+%281%29.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008598009-1AH42M4UF76X94V3AYWD/liquid_glass__f595gw1ozwi2_large_2x+%281%29.jpg" data-image-dimensions="2520x1360" data-image-focal-point="0.5,0.5" alt="liquid_glass__f595gw1ozwi2_large_2x (1).jpg" data-load="false" data-image-id="687cc9d55f5c4325c68950ee" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008598009-1AH42M4UF76X94V3AYWD/liquid_glass__f595gw1ozwi2_large_2x+%281%29.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008597048-NNVO3IAM09WTUD645P22/intelligent__es592gzxo9qq_large_2x.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008597048-NNVO3IAM09WTUD645P22/intelligent__es592gzxo9qq_large_2x.jpg" data-image-dimensions="2520x1360" data-image-focal-point="0.5,0.5" alt="intelligent__es592gzxo9qq_large_2x.jpg" data-load="false" data-image-id="687cc9d490921d333fa42d91" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008597048-NNVO3IAM09WTUD645P22/intelligent__es592gzxo9qq_large_2x.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008816503-C11RH60US7JZ7R6H5EAE/navigation__gdkvxthggeai_large_2x.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008816503-C11RH60US7JZ7R6H5EAE/navigation__gdkvxthggeai_large_2x.jpg" data-image-dimensions="744x900" data-image-focal-point="0.5,0.5" alt="navigation__gdkvxthggeai_large_2x.jpg" data-load="false" data-image-id="687ccaaf9e22143862e98a38" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008816503-C11RH60US7JZ7R6H5EAE/navigation__gdkvxthggeai_large_2x.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008621484-X0319AQN2YIPDTWPSGAB/liquid_glass_hero__e4g9pjpws8ya_large_2x.png" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008621484-X0319AQN2YIPDTWPSGAB/liquid_glass_hero__e4g9pjpws8ya_large_2x.png" data-image-dimensions="2880x1800" data-image-focal-point="0.5,0.5" alt="liquid_glass_hero__e4g9pjpws8ya_large_2x.png" data-load="false" data-image-id="687cc9d8d45772685d56fa10" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008621484-X0319AQN2YIPDTWPSGAB/liquid_glass_hero__e4g9pjpws8ya_large_2x.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008595247-UPJ1YSIZ13JS8YHSBK8R/dynamic_controls__ezqkwhge3vsm_large_2x.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008595247-UPJ1YSIZ13JS8YHSBK8R/dynamic_controls__ezqkwhge3vsm_large_2x.jpg" data-image-dimensions="1392x900" data-image-focal-point="0.5,0.5" alt="dynamic_controls__ezqkwhge3vsm_large_2x.jpg" data-load="false" data-image-id="687cc9d14af24c3eb16c19b9" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008595247-UPJ1YSIZ13JS8YHSBK8R/dynamic_controls__ezqkwhge3vsm_large_2x.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008925996-TWI4SKW7WF3734PUSKRQ/toolbars.png" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008925996-TWI4SKW7WF3734PUSKRQ/toolbars.png" data-image-dimensions="1582x472" data-image-focal-point="0.5034013605442177,0.4188565340909091" alt="toolbars.png" data-load="false" data-image-id="687ccb1c9dd1844b15420436" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008925996-TWI4SKW7WF3734PUSKRQ/toolbars.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008605255-NWM8D00I9S5JQTX5W4HW/liquid_glass__f595gw1ozwi2_large_2x.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008605255-NWM8D00I9S5JQTX5W4HW/liquid_glass__f595gw1ozwi2_large_2x.jpg" data-image-dimensions="2520x1360" data-image-focal-point="0.5,0.5" alt="liquid_glass__f595gw1ozwi2_large_2x.jpg" data-load="false" data-image-id="687cc9d665caa0077fb8ff03" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008605255-NWM8D00I9S5JQTX5W4HW/liquid_glass__f595gw1ozwi2_large_2x.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008617290-J5KURHOTWS3XEKZ9MO51/liquid_glass_hero__e4g9pjpws8ya_xlarge_2x+%281%29.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008617290-J5KURHOTWS3XEKZ9MO51/liquid_glass_hero__e4g9pjpws8ya_xlarge_2x+%281%29.jpg" data-image-dimensions="3360x1800" data-image-focal-point="0.5,0.5" alt="liquid_glass_hero__e4g9pjpws8ya_xlarge_2x (1).jpg" data-load="false" data-image-id="687cc9de288b80587e12c7be" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008617290-J5KURHOTWS3XEKZ9MO51/liquid_glass_hero__e4g9pjpws8ya_xlarge_2x+%281%29.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008623133-0W9WVBQ1ED4IUTM4YSMB/liquid_glass_hero__e4g9pjpws8ya_xlarge_2x.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008623133-0W9WVBQ1ED4IUTM4YSMB/liquid_glass_hero__e4g9pjpws8ya_xlarge_2x.jpg" data-image-dimensions="3360x1900" data-image-focal-point="0.5,0.5" alt="liquid_glass_hero__e4g9pjpws8ya_xlarge_2x.jpg" data-load="false" data-image-id="687cc9eb64ff953005a7b5ac" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008623133-0W9WVBQ1ED4IUTM4YSMB/liquid_glass_hero__e4g9pjpws8ya_xlarge_2x.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008623552-XTF0P3G07UM1EGGWIGEY/menu__dowiti2aeu2q_large_2x.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008623552-XTF0P3G07UM1EGGWIGEY/menu__dowiti2aeu2q_large_2x.jpg" data-image-dimensions="744x900" data-image-focal-point="0.5,0.5" alt="menu__dowiti2aeu2q_large_2x.jpg" data-load="false" data-image-id="687cc9ef65caa0077fb8ff45" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1753008623552-XTF0P3G07UM1EGGWIGEY/menu__dowiti2aeu2q_large_2x.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  





















































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/05de4cfb-6a9d-4fb4-a7d2-f6856d2cb6e0/vision.gif" data-image-dimensions="800x432" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/05de4cfb-6a9d-4fb4-a7d2-f6856d2cb6e0/vision.gif?format=1000w" width="800" height="432" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/05de4cfb-6a9d-4fb4-a7d2-f6856d2cb6e0/vision.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/05de4cfb-6a9d-4fb4-a7d2-f6856d2cb6e0/vision.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/05de4cfb-6a9d-4fb4-a7d2-f6856d2cb6e0/vision.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/05de4cfb-6a9d-4fb4-a7d2-f6856d2cb6e0/vision.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/05de4cfb-6a9d-4fb4-a7d2-f6856d2cb6e0/vision.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/05de4cfb-6a9d-4fb4-a7d2-f6856d2cb6e0/vision.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/05de4cfb-6a9d-4fb4-a7d2-f6856d2cb6e0/vision.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <p class=""><br></p>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1751108869906-GJJQ9KEGYA02FXOY2LWA/img-appleWWDC.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Apple’s Liquid Glass</media:title></media:content></item><item><title>Cyber City Odeo 808 - Cyberpunk UI</title><category>Film</category><category>HUDs</category><category>GUIs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Sat, 17 May 2025 05:14:58 +0000</pubDate><link>https://www.hudsandguis.com/home/2025/cyber-city-odeo-808</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:681172bf8b90fe5868be4d2b</guid><description><![CDATA[<figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/04db438a-f382-401f-a2ea-e05634af766a/img-cybercityodeo.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/04db438a-f382-401f-a2ea-e05634af766a/img-cybercityodeo.png?format=1000w" width="1180" height="664" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/04db438a-f382-401f-a2ea-e05634af766a/img-cybercityodeo.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/04db438a-f382-401f-a2ea-e05634af766a/img-cybercityodeo.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/04db438a-f382-401f-a2ea-e05634af766a/img-cybercityodeo.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/04db438a-f382-401f-a2ea-e05634af766a/img-cybercityodeo.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/04db438a-f382-401f-a2ea-e05634af766a/img-cybercityodeo.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/04db438a-f382-401f-a2ea-e05634af766a/img-cybercityodeo.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/04db438a-f382-401f-a2ea-e05634af766a/img-cybercityodeo.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <p class="">Here’s a look at the FUI of Cyber City Oedo 808, a gritty cyberpunk anime full of retro-futuristic designs. From car dashboards and cockpits readouts to police files, and schematics, these interfaces play a key role in shaping the world and its atmosphere.</p><h2>Dashboard and cockpit UI</h2><p class="">The designs are wonderfully abstract, using lines, shapes, and motion to suggest complexity without over-explaining. Much of the detail is implied rather than shown, and that restraint adds to the aesthetic. Animation does a lot of the storytelling here: the pacing, the rhythm, the manic flickering during tense moments, all of it conveys mood and urgency without a single word. The car dashboard in particular, is so full of personality.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745985401584-QZIW7B6CAOG6G5Q46FMX/cardash.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745985401584-QZIW7B6CAOG6G5Q46FMX/cardash.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="cardash.gif" data-load="false" data-image-id="68119e852df89a60d6eccba2" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745985401584-QZIW7B6CAOG6G5Q46FMX/cardash.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745985376405-MBYSNTVK5V1Q5G14V2II/cardash2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745985376405-MBYSNTVK5V1Q5G14V2II/cardash2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="cardash2.gif" data-load="false" data-image-id="68119e85b371fb7f1a171086" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745985376405-MBYSNTVK5V1Q5G14V2II/cardash2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745990357406-IDJU97ZLZURT9RIR19LG/shipcomputer.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745990357406-IDJU97ZLZURT9RIR19LG/shipcomputer.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="shipcomputer.gif" data-load="false" data-image-id="6811b276f9b2c9706ffda5ae" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745990357406-IDJU97ZLZURT9RIR19LG/shipcomputer.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745990758420-WH0PDTLODXP9UKVM5CLT/cockpit.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745990758420-WH0PDTLODXP9UKVM5CLT/cockpit.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="cockpit.gif" data-load="false" data-image-id="6811b3b22df89a60d6ef155f" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745990758420-WH0PDTLODXP9UKVM5CLT/cockpit.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745990702642-W57WZQ7B74W9CE7FFS77/targeting.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745990702642-W57WZQ7B74W9CE7FFS77/targeting.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="targeting.gif" data-load="false" data-image-id="6811b3b2169c2b16ca242ccf" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745990702642-W57WZQ7B74W9CE7FFS77/targeting.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Police files</h2><p class="">The police systems use a distinct and well-balanced colour palette, cool blues and white for type, with turquoise, deep pink, and red as accents. It gives the interface a clean yet stylised look that feels both official and futuristic. The top-down wipe transitions are a nice touch too as it subtly hints at older technologies and adds to the retro future aesthetic.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745985760861-TW6UGDSZV0SVEPPMCAKI/police2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745985760861-TW6UGDSZV0SVEPPMCAKI/police2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="police2.gif" data-load="false" data-image-id="6811a080c2ecde105c830554" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745985760861-TW6UGDSZV0SVEPPMCAKI/police2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745986536755-MBKANJY73PLCYP5BAU0O/mugshot1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745986536755-MBKANJY73PLCYP5BAU0O/mugshot1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="mugshot1.gif" data-load="false" data-image-id="6811a364ff778609d5df2f7e" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745986536755-MBKANJY73PLCYP5BAU0O/mugshot1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745987665553-XB5JH1AIWR5SURMZQJHP/scan.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745987665553-XB5JH1AIWR5SURMZQJHP/scan.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="scan.gif" data-load="false" data-image-id="6811a83521231b1c050a5dc3" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745987665553-XB5JH1AIWR5SURMZQJHP/scan.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745986477759-DK7VWZXTD965BJ2ZEKMX/mugshot2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745986477759-DK7VWZXTD965BJ2ZEKMX/mugshot2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="mugshot2.gif" data-load="false" data-image-id="6811a3662ed38a4a752e2835" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745986477759-DK7VWZXTD965BJ2ZEKMX/mugshot2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Computer interfaces</h2><p class="">Here’s a mix of screens that involve hacking, mapping and simulations. The screen designs really capture the retro future feel thanks to the fonts, low resolution and animation style and could easily fit into the same timeline as <a href="https://www.hudsandguis.com/home/2010/12/12/blade-runner" target="_blank">Blade Runner</a> or <a href="https://www.hudsandguis.com/home/2025/alien-romulus" target="_blank">Alien Romulus</a>.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745988727197-ME11E5KEGVP1FS9CO6AS/computer1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745988727197-ME11E5KEGVP1FS9CO6AS/computer1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="computer1.gif" data-load="false" data-image-id="6811abf7455d0a72eb11e8af" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745988727197-ME11E5KEGVP1FS9CO6AS/computer1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745988766120-X77VG349N3SMKG2RTGGJ/computer2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745988766120-X77VG349N3SMKG2RTGGJ/computer2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="computer2.gif" data-load="false" data-image-id="6811abf725bebe2305cd3d6a" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745988766120-X77VG349N3SMKG2RTGGJ/computer2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745988865637-TZDBRODQ6T4GQN1P298G/computer3.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745988865637-TZDBRODQ6T4GQN1P298G/computer3.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="computer3.gif" data-load="false" data-image-id="6811ac79169c2b16ca239139" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745988865637-TZDBRODQ6T4GQN1P298G/computer3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745988933270-L289MIA2S4P4P26E1359/computermap.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745988933270-L289MIA2S4P4P26E1359/computermap.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="computermap.gif" data-load="false" data-image-id="6811aca0f32be02dbef85f81" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745988933270-L289MIA2S4P4P26E1359/computermap.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1747360139117-H1B00PBNMESNCYO3YJ9Y/hack1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1747360139117-H1B00PBNMESNCYO3YJ9Y/hack1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="hack1.gif" data-load="false" data-image-id="6826985a7c42ae1fb858386d" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1747360139117-H1B00PBNMESNCYO3YJ9Y/hack1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1747360117186-C8DYOIL3884I3J1XRLL2/hack3.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1747360117186-C8DYOIL3884I3J1XRLL2/hack3.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="hack3.gif" data-load="false" data-image-id="6826985a50eb7d050d908c75" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1747360117186-C8DYOIL3884I3J1XRLL2/hack3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1747360547842-98P0WV6USNWGY2ODEN0E/computer1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1747360547842-98P0WV6USNWGY2ODEN0E/computer1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="computer1.gif" data-load="false" data-image-id="682699f95c64f11a38f6b6a5" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1747360547842-98P0WV6USNWGY2ODEN0E/computer1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1747360581869-XQYVWK7XM01VMGXR1Y50/simulation.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1747360581869-XQYVWK7XM01VMGXR1Y50/simulation.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="simulation.gif" data-load="false" data-image-id="682699f94eef4e2a793c02f8" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1747360581869-XQYVWK7XM01VMGXR1Y50/simulation.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Handheld UI</h2><p class="">This is a really fun device that has a large screen up top for visuals and a secondary screen below for supporting details. The controls at the bottom are reminiscent of early ’90s Japanese tech and really adds to the device’s retro-future appeal.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989745810-3QSYH27VL26EN3A253DZ/phone1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989745810-3QSYH27VL26EN3A253DZ/phone1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="phone1.gif" data-load="false" data-image-id="6811afcc4efb05223177bd6d" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989745810-3QSYH27VL26EN3A253DZ/phone1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989703335-60TVDR8V6T61OY5HHVMQ/phone2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989703335-60TVDR8V6T61OY5HHVMQ/phone2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="phone2.gif" data-load="false" data-image-id="6811afcde409cb061855c7a9" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989703335-60TVDR8V6T61OY5HHVMQ/phone2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989802040-S09KYSDS4SF4I0REHCN0/phone3.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989802040-S09KYSDS4SF4I0REHCN0/phone3.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="phone3.gif" data-load="false" data-image-id="6811b0494f90ec2b0776edac" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989802040-S09KYSDS4SF4I0REHCN0/phone3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>DNA sequencing</h2><p class="">These screens give off a distinctly scientific feel, thanks to the combination of complex diagrams, no-nosense typography and basic animation.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989511081-6V3NRVQUQTUZNG368D4D/dna1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989511081-6V3NRVQUQTUZNG368D4D/dna1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="dna1.gif" data-load="false" data-image-id="6811aeea78936e0df4a34e9b" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989511081-6V3NRVQUQTUZNG368D4D/dna1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989453989-4C6OUI52PZ7LZCJ5HMZK/dna2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989453989-4C6OUI52PZ7LZCJ5HMZK/dna2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="dna2.gif" data-load="false" data-image-id="6811aeeb7100c605a9a20fca" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989453989-4C6OUI52PZ7LZCJ5HMZK/dna2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989463144-IR0G65ZWBU1WN2POIQKQ/dna3.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989463144-IR0G65ZWBU1WN2POIQKQ/dna3.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="dna3.gif" data-load="false" data-image-id="6811af4ff7f45e1b720f1e15" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989463144-IR0G65ZWBU1WN2POIQKQ/dna3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989508558-4YMR62G2FWAS4NBXAEUM/dna4.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989508558-4YMR62G2FWAS4NBXAEUM/dna4.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="dna4.gif" data-load="false" data-image-id="6811af58c35ab222f555db76" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989508558-4YMR62G2FWAS4NBXAEUM/dna4.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989519785-S9IUSVYMOVLRH4QNJY9K/dna5.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989519785-S9IUSVYMOVLRH4QNJY9K/dna5.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="dna5.gif" data-load="false" data-image-id="6811af8525bebe2305cd94dd" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989519785-S9IUSVYMOVLRH4QNJY9K/dna5.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Interface control panels</h2><p class="">The interface controls are often complex, built from clusters of small details and elements that sit flat on the console surface. Instead of a standard keyboard, the layouts use generously spaced-out symbols that span across a large panel. The designers did a good job of suggesting complexity through the use of lines and irregular shapes.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745995967721-19OA72L0WZFLU74X8STR/comp-1.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745995967721-19OA72L0WZFLU74X8STR/comp-1.jpg" data-image-dimensions="1920x1080" data-image-focal-point="0.5,0.5" alt="comp-1.jpg" data-load="false" data-image-id="6811c8bb4f90ec2b0778fa16" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745995967721-19OA72L0WZFLU74X8STR/comp-1.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745995966955-TT7TKKN11FG8FNSZYZYG/comp-2.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745995966955-TT7TKKN11FG8FNSZYZYG/comp-2.jpg" data-image-dimensions="1920x1080" data-image-focal-point="0.5,0.5" alt="comp-2.jpg" data-load="false" data-image-id="6811c8bb78936e0df4a5f3d0" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745995966955-TT7TKKN11FG8FNSZYZYG/comp-2.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745995972476-JUGCS7PAAUYVE91VDC2W/comp-3.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745995972476-JUGCS7PAAUYVE91VDC2W/comp-3.jpg" data-image-dimensions="1920x1080" data-image-focal-point="0.5,0.5" alt="comp-3.jpg" data-load="false" data-image-id="6811c8bfd1488c6016556863" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745995972476-JUGCS7PAAUYVE91VDC2W/comp-3.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745995973712-I3HWZ4ZC04XQO17FGROY/comp-4.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745995973712-I3HWZ4ZC04XQO17FGROY/comp-4.jpg" data-image-dimensions="1920x1080" data-image-focal-point="0.5,0.5" alt="comp-4.jpg" data-load="false" data-image-id="6811c8c1715da62f2cfbb229" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745995973712-I3HWZ4ZC04XQO17FGROY/comp-4.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Targeting UI</h2><p class="">The design of this targeting system is pretty unique. Firstly, it’s not often that you see a serif font used in a high-tech interface, like the word ‘TARGET’. The triangular layout of the callout text is also unusual. Not sure I understand the logic behind it but stylistically it’s very cool and adds to building the design language throughout the world.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989185701-LT8PXP6GY0SN34BIX8Q6/targeting1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989185701-LT8PXP6GY0SN34BIX8Q6/targeting1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="targeting1.gif" data-load="false" data-image-id="6811ad7e5f09744a604232a2" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989185701-LT8PXP6GY0SN34BIX8Q6/targeting1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989050986-FXAX15OWOUX7C206EW3N/targeting2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989050986-FXAX15OWOUX7C206EW3N/targeting2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="targeting2.gif" data-load="false" data-image-id="6811ad7edc5b460647448b43" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989050986-FXAX15OWOUX7C206EW3N/targeting2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989165262-NQBM80QDH22Z1VZDY2S3/targeting3.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989165262-NQBM80QDH22Z1VZDY2S3/targeting3.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="targeting3.gif" data-load="false" data-image-id="6811adbd5f2a2e0ba25407e3" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1745989165262-NQBM80QDH22Z1VZDY2S3/targeting3.gif?format=1000w" /><br>
                </a>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/04db438a-f382-401f-a2ea-e05634af766a/img-cybercityodeo.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Cyber City Odeo 808 - Cyberpunk UI</media:title></media:content></item><item><title>Silo - Dystopian UI</title><category>Film</category><category>GUIs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Mon, 24 Mar 2025 05:04:36 +0000</pubDate><link>https://www.hudsandguis.com/home/2025/silo-ui</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:67bfdf321be9df0c5f2aff5b</guid><description><![CDATA[<figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741818526192-TGUV7ZUN8B12R8O95YYU/img-silo.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741818526192-TGUV7ZUN8B12R8O95YYU/img-silo.png?format=1000w" width="1180" height="664" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741818526192-TGUV7ZUN8B12R8O95YYU/img-silo.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741818526192-TGUV7ZUN8B12R8O95YYU/img-silo.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741818526192-TGUV7ZUN8B12R8O95YYU/img-silo.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741818526192-TGUV7ZUN8B12R8O95YYU/img-silo.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741818526192-TGUV7ZUN8B12R8O95YYU/img-silo.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741818526192-TGUV7ZUN8B12R8O95YYU/img-silo.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741818526192-TGUV7ZUN8B12R8O95YYU/img-silo.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <p class="">Here's a look at the UI from the Apple TV series <a href="https://tv.apple.com/au/show/silo/umc.cmc.3yksgc857px0k0rqe5zd4jice" target="_blank"><em>Silo</em></a>, which takes place in an underground city where the citizens rely on fairly dated technology. Much of the UI work here is reminiscent of old DOS-based systems, but there are also glimpses of more modern and advanced UI.</p><h2>Hard Drive UI</h2><p class="">The hard drive retrieved by George features a series of simple text-based menus with a green monochrome palette, accented with subtle yellow hues. Besides the menus, it also features some interesting schematics and maps, showing a mixture of orthographic and 3D diagrams. Having the 3D elements creates an unusual aesthetic, when played on a low resolution CRT monitor. The animations are also thoughtfully designed, taking on a no frills, lo-fi look, that reenforces the utilitarian feel of the Silo’s technology.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757073216-XZXDBI04QYPTCSK73QCS/drive-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757073216-XZXDBI04QYPTCSK73QCS/drive-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="drive-1.gif" data-load="false" data-image-id="67d11a04f8a100390b50a8b1" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757073216-XZXDBI04QYPTCSK73QCS/drive-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628522405-RY0X55AZN4P2X8GDNVX9/drive-9.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628522405-RY0X55AZN4P2X8GDNVX9/drive-9.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="drive-9.gif" data-load="false" data-image-id="67bfe1ca8d80df12a803ba16" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628522405-RY0X55AZN4P2X8GDNVX9/drive-9.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740627862478-8JS8J59GHC95CZFCKQXD/drive-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740627862478-8JS8J59GHC95CZFCKQXD/drive-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="drive-2.gif" data-load="false" data-image-id="67bfdf44ef4fc17b41613d5b" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740627862478-8JS8J59GHC95CZFCKQXD/drive-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740627939377-H24QDY3G7JMAE5L9G55R/drive-3a.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740627939377-H24QDY3G7JMAE5L9G55R/drive-3a.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="drive-3a.gif" data-load="false" data-image-id="67bfdf45d8f0a2686e74f0a9" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740627939377-H24QDY3G7JMAE5L9G55R/drive-3a.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740627988489-12X2S29X8LAXV9P7BDK5/drive-3b.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740627988489-12X2S29X8LAXV9P7BDK5/drive-3b.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="drive-3b.gif" data-load="false" data-image-id="67bfdf97f16d771170d1e1b8" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740627988489-12X2S29X8LAXV9P7BDK5/drive-3b.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628227068-JS3WS15VSW0RTVYKE4KF/drive-4.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628227068-JS3WS15VSW0RTVYKE4KF/drive-4.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="drive-4.gif" data-load="false" data-image-id="67bfdfe658dc15273ef0eaf9" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628227068-JS3WS15VSW0RTVYKE4KF/drive-4.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628223489-I32SF5GY896M2HJM44O0/drive-5.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628223489-I32SF5GY896M2HJM44O0/drive-5.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="drive-5.gif" data-load="false" data-image-id="67bfe016fd73db0fa0d8d988" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628223489-I32SF5GY896M2HJM44O0/drive-5.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628423685-NT8CIWDBOHPN1XS9ZY91/drive-6.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628423685-NT8CIWDBOHPN1XS9ZY91/drive-6.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="drive-6.gif" data-load="false" data-image-id="67bfe102f16d771170d20521" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628423685-NT8CIWDBOHPN1XS9ZY91/drive-6.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628479160-OL0J5BFBF4ES0OWG4OFG/drive-7.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628479160-OL0J5BFBF4ES0OWG4OFG/drive-7.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="drive-7.gif" data-load="false" data-image-id="67bfe1061e70733aaf8835ea" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628479160-OL0J5BFBF4ES0OWG4OFG/drive-7.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628600639-8C8WU97DX4D9BFPJ95SY/drive-10.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628600639-8C8WU97DX4D9BFPJ95SY/drive-10.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="drive-10.gif" data-load="false" data-image-id="67bfe201ea2b722bdeb1b967" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1740628600639-8C8WU97DX4D9BFPJ95SY/drive-10.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757386910-PMYVY6Q575P4LS121FHG/sims-3.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757386910-PMYVY6Q575P4LS121FHG/sims-3.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="sims-3.gif" data-load="false" data-image-id="67dbb52896ef930bc17e7959" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757386910-PMYVY6Q575P4LS121FHG/sims-3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757431649-WKK9JAOLZMTX4FKNYJ1J/sims-6.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757431649-WKK9JAOLZMTX4FKNYJ1J/sims-6.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="sims-6.gif" data-load="false" data-image-id="67dbb52832b4d36969a05ae4" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757431649-WKK9JAOLZMTX4FKNYJ1J/sims-6.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757427280-EY341P7AXR48F5RGTHRW/sims-4.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757427280-EY341P7AXR48F5RGTHRW/sims-4.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="sims-4.gif" data-load="false" data-image-id="67dbb528e63f083a35bf0dd3" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757427280-EY341P7AXR48F5RGTHRW/sims-4.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757476999-RS9BUVDN9CJYL9DLP342/sims-8.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757476999-RS9BUVDN9CJYL9DLP342/sims-8.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="sims-8.gif" data-load="false" data-image-id="67dbb528a01e230773714ab6" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757476999-RS9BUVDN9CJYL9DLP342/sims-8.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757482617-MOANS4Q3K2F2MG3BCVEN/sims-7.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757482617-MOANS4Q3K2F2MG3BCVEN/sims-7.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="sims-7.gif" data-load="false" data-image-id="67dbb5286f8d7c77ddbd88f3" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757482617-MOANS4Q3K2F2MG3BCVEN/sims-7.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Reproductive Clearance UI</h2><p class="">Here’s the very formal and sterile UI process for reproduction in the Silo. The depiction of this journey is great, and says so much about the rigid structure of the Silo itself. The layout of the countdown screen is kind of awkward in a good way. It’s able to communicate what it needs to in order to progress the story, but the unusual layout subtly adds to the oddity of this world.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741756734132-BYP46KXBC723253WVWU0/reproduce-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741756734132-BYP46KXBC723253WVWU0/reproduce-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="reproduce-1.gif" data-load="false" data-image-id="67d118dec6c479669264fb19" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741756734132-BYP46KXBC723253WVWU0/reproduce-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741756713259-SQ3CYP5LQDTYD4ZI13HJ/reproduce-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741756713259-SQ3CYP5LQDTYD4ZI13HJ/reproduce-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="reproduce-2.gif" data-load="false" data-image-id="67d118dead549478a1d6b49f" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741756713259-SQ3CYP5LQDTYD4ZI13HJ/reproduce-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757666527-XJKQ3BYVRNXRHTE8B5H9/reproduce-3.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757666527-XJKQ3BYVRNXRHTE8B5H9/reproduce-3.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="reproduce-3.gif" data-load="false" data-image-id="67d11c5a390eec01314ba2af" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757666527-XJKQ3BYVRNXRHTE8B5H9/reproduce-3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Terminal</h2><p class="">The form factor for the terminals is quite nice, especially with the pull out keyboard. The screens feel a little more technical here as it’s meant for specialists and not everyday users. This design really leans into efficiency, cutting out any fluff and putting function front and centre.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757834907-ZW8GJ2EXJ7VN2DSO4CI5/terminal-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757834907-ZW8GJ2EXJ7VN2DSO4CI5/terminal-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="terminal-1.gif" data-load="false" data-image-id="67d11d2dbdb856041ec14969" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757834907-ZW8GJ2EXJ7VN2DSO4CI5/terminal-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757812466-RV7SPEL0RH3W3DB5RSMK/terminal-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757812466-RV7SPEL0RH3W3DB5RSMK/terminal-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="terminal-2.gif" data-load="false" data-image-id="67d11d2ec25779460aec01ac" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757812466-RV7SPEL0RH3W3DB5RSMK/terminal-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757853306-FYUEQD1JJTWO7D6K52O5/terminal-3.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757853306-FYUEQD1JJTWO7D6K52O5/terminal-3.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="terminal-3.gif" data-load="false" data-image-id="67d11d7658551e093a570fd5" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757853306-FYUEQD1JJTWO7D6K52O5/terminal-3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Relic Database</h2><p class="">Here’s a quick snippet of the relic database that Sims uses. It’s interesting to see that even those in charge and in high positions of power also have to rely on dated technology. It uses a very basic text-based GUI and a fun mixture of type.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1742452993434-HEX3LGDO7XBINDXYWCMO/sims-1.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1742452993434-HEX3LGDO7XBINDXYWCMO/sims-1.jpg" data-image-dimensions="3008x1692" data-image-focal-point="0.5,0.5" alt="sims-1.jpg" data-load="false" data-image-id="67dbb8fdb572ca7f177b3e38" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1742452993434-HEX3LGDO7XBINDXYWCMO/sims-1.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1742452993408-ES1Y0PHSNL1DYK68K5PI/sims-2.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1742452993408-ES1Y0PHSNL1DYK68K5PI/sims-2.jpg" data-image-dimensions="3008x1692" data-image-focal-point="0.5,0.5" alt="sims-2.jpg" data-load="false" data-image-id="67dbb8fc5b696c743a598eb1" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1742452993408-ES1Y0PHSNL1DYK68K5PI/sims-2.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758644807-TM115IE37MPO29OARHLY/relic.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758644807-TM115IE37MPO29OARHLY/relic.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="relic.gif" data-load="false" data-image-id="67d12091efa9e91ad95c7f60" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758644807-TM115IE37MPO29OARHLY/relic.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Video Screens</h2><p class="">The video played from the hard drive is glitchy, washed out and very pixelated. There’s some nice touches in making this video look low quality, like the artefacts and the smearing when George moves his hands too quickly.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757933570-Y8D3WWW3AXVSJ7WLY1YT/video-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757933570-Y8D3WWW3AXVSJ7WLY1YT/video-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="video-1.gif" data-load="false" data-image-id="67d11db5501b6857c0ed7615" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741757933570-Y8D3WWW3AXVSJ7WLY1YT/video-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758003226-BJ3LIPWXE87K4XY1VIJE/video-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758003226-BJ3LIPWXE87K4XY1VIJE/video-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="video-2.gif" data-load="false" data-image-id="67d11db5efc5e95f9fc41e11" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758003226-BJ3LIPWXE87K4XY1VIJE/video-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Tablet UI</h2><p class="">Here’s one of the very few modern interfaces. It’s a voice-activated tablet app that accesses information from an archive. The UI is intentionally unfamiliar, which lets the viewer somewhat empathise with what the character Lukas must be feeling. The layout features thumbnails on the left leading into a spiral of content, which maybe represents the spiral staircase of the silo?</p><p class="">The tablet app gives off a mysterious feel with its gold and black colour palette, accented by glows and subtle lighting. The tablet itself looks like it has a metallic frame, which also adds to the mystique surrounding the device.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758296783-L4J8H2YXALSHJFG6SS9X/tablet-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758296783-L4J8H2YXALSHJFG6SS9X/tablet-1.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="tablet-1.gif" data-load="false" data-image-id="67d11e5b0f43436354f9a0ec" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758296783-L4J8H2YXALSHJFG6SS9X/tablet-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758141654-FHF24YTXS6K9LTYULX2R/tablet-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758141654-FHF24YTXS6K9LTYULX2R/tablet-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="tablet-2.gif" data-load="false" data-image-id="67d11e5b9caad30cb2071a29" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758141654-FHF24YTXS6K9LTYULX2R/tablet-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758261988-0IQJLXRAMLWHX731BXIA/tablet-3.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758261988-0IQJLXRAMLWHX731BXIA/tablet-3.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="tablet-3.gif" data-load="false" data-image-id="67d11ebfcceb4113bae0343a" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758261988-0IQJLXRAMLWHX731BXIA/tablet-3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758335691-622Q4QVTQNRBRZ62SEH6/tablet-4.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758335691-622Q4QVTQNRBRZ62SEH6/tablet-4.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="tablet-4.gif" data-load="false" data-image-id="67d11f387f1f781e498a615b" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741758335691-622Q4QVTQNRBRZ62SEH6/tablet-4.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>AI</h2><p class="">Finally, we get a glimpse of the AI, which appears as a hologram projected onto a curved, transparent screen. It builds up the 3D image of Lukas using what looks like a point cloud. Even though it’s monochrome and doesn’t reveal anything too dramatic, it still feels significantly more advanced, especially considering we’ve only seen DOS-like, text-based UIs up until this point.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1742453422243-7IEO2L5ZRUPCW3HYY1K1/ai.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1742453422243-7IEO2L5ZRUPCW3HYY1K1/ai.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="ai.gif" data-load="false" data-image-id="67dbba89c59a502503cfdadb" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1742453422243-7IEO2L5ZRUPCW3HYY1K1/ai.gif?format=1000w" /><br>
                </a>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1741818526192-TGUV7ZUN8B12R8O95YYU/img-silo.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Silo - Dystopian UI</media:title></media:content></item><item><title>Alien Romulus - Retro Sci-Fi UI</title><category>Film</category><category>GUIs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Tue, 18 Feb 2025 22:50:03 +0000</pubDate><link>https://www.hudsandguis.com/home/2025/alien-romulus</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:67a164f6017a296928208594</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/e3f8c598-1bb9-48f0-a367-13e8d0c8c68d/img-alienRomulus.png?format=1000w" />


  <p class="">The Alien franchise has always been a rich resource for fans of FUI, and <a href="https://en.wikipedia.org/wiki/Alien:_Romulus" target="_blank">Alien: Romulus</a> is no exception. This latest entry has loads of examples that stay true to the signature retro sci-fi aesthetic that we’ve come to know and love from this universe. From cockpit displays and control panels to handheld scanners, CRT video feeds, and even an auto-aiming rifle scope, <a href="https://en.wikipedia.org/wiki/Alien:_Romulus" target="_blank">Alien: Romulus</a> has lots to unpack.</p><h2>Cryo Station UI</h2><p class="">This no-nonsense interface has an industrial feel, with bold icons, thick line work, and minimal animation. I also appreciate the use of a stylus over a touchscreen as it offers greater precision, especially when dealing with cold hands or wearing gloves.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738637299725-9VW9XCKMLIJ8JW23Y9WC/cryo-recording.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738637299725-9VW9XCKMLIJ8JW23Y9WC/cryo-recording.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="cryo-recording.gif" data-load="false" data-image-id="67a17f5f47ff0e2c18ddfcef" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738637299725-9VW9XCKMLIJ8JW23Y9WC/cryo-recording.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738637337951-K96G1U3IU8Q2XUEEC6H3/cryo-ui.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738637337951-K96G1U3IU8Q2XUEEC6H3/cryo-ui.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="cryo-ui.gif" data-load="false" data-image-id="67a17f5f5d893133bc4ab5ec" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738637337951-K96G1U3IU8Q2XUEEC6H3/cryo-ui.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Mining Ship UI</h2><p class="">These screens look like they’ve been ripped straight from a Commodore 64—everything about this setup screams 1980s, from the materials and colors to the chunky keyboard and floppy disk drive. The pixelated graphics and monochrome displays add to the retro charm. Imagine navigating space with computers this basic, now that would be truly terrifying!</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738637686474-I9E6LX1Z7OJQUL0531Q4/miner-screen-1.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="miner-screen-1.gif" data-load="false" data-image-id="67a180be88d4b56853937014" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738637686474-I9E6LX1Z7OJQUL0531Q4/miner-screen-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738637689134-ZF8NTHXIR13W04AXT1K6/miner-screen-2.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="miner-screen-2.gif" data-load="false" data-image-id="67a180e42268f421b870a782" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738637689134-ZF8NTHXIR13W04AXT1K6/miner-screen-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738637882149-BWZOVVZ01T7M4D84T7AI/miner-screen-3.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="miner-screen-3.gif" data-load="false" data-image-id="67a1814bebc6462b0944ecb6" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738637882149-BWZOVVZ01T7M4D84T7AI/miner-screen-3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738638191047-0MUN0X179L4FHE9CNR8J/miner-screen-4.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="miner-screen-4.gif" data-load="false" data-image-id="67a182cebe37b2149380931e" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738638191047-0MUN0X179L4FHE9CNR8J/miner-screen-4.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Video watch</h2><p class="">I grew up expecting gadgets to look like this in the future. The chunky, boxy design of the watch, paired with its low-resolution screen and desaturated colors, perfectly captures that retro sci-fi aesthetic. There’s something nostalgic about the mix of on-screen UI and tactile buttons—so much so that part of me prefers this over a modern smartwatch.</p>





















  
  






  <h2>Panel Screens</h2><p class="">These share the same no-nonsense UI design as the Cryo UI, maintaining a cohesive aesthetic throughout the ship. They’re often shown with a compact screen, tactile buttons, and an array of jacks, reinforcing the utilitarian feel.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738638542593-VRZVWS5D15SUD6Y5BVHD/panel-1.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="panel-1.gif" data-load="false" data-image-id="67a1843021fd5d53e64def6b" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738638542593-VRZVWS5D15SUD6Y5BVHD/panel-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738638562245-7AUAHB2RUDNOMZL4QMI7/panel-2.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="panel-2.gif" data-load="false" data-image-id="67a1843015eb07127b1fa652" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738638562245-7AUAHB2RUDNOMZL4QMI7/panel-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Weyland-Yutani Admin Office</h2><p class="">This showcases the computer system used by Weyland-Yutani admin officers—a glitchy, low-resolution screen encased in a grimy shell. While it offers more colours and slightly better image quality than the mining ship's system, it’s still heavily pixelated. The way the photograph loads in with increasing clarity is a nice touch, subtly hinting at the technology’s limitations.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639303452-B6FAV59CIIMHI6GFOX13/quota-1.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="quota-1.gif" data-load="false" data-image-id="67a18782deea8415f46f4dfe" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639303452-B6FAV59CIIMHI6GFOX13/quota-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639345601-B7FFN1V7DX3HLZ6N0AND/quota-2.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="quota-2.gif" data-load="false" data-image-id="67a1878267488156453ebfaf" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639345601-B7FFN1V7DX3HLZ6N0AND/quota-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Pulse Rifle - Auto-Assistance UI</h2><p class="">I love the boot-up animation when the display flips open—it’s such an unexpected touch for something as utilitarian as a weapon. A gun with a video display instantly screams <em>future</em> to me. The design language of the interface feels ripped straight from the ‘80s, and when paired with the low-resolution screen, it seamlessly fits into the film’s cohesive retro-futuristic UI style.</p>





















  
  






  <h2>Handheld Scanner</h2><p class="">What’s an <em>Alien</em> movie without a handheld scanner? This time, the scanner presents a 3D perspective. Despite the 3D image being a simple wireframe, it still feels advanced in a world dominated by basic pixel art.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639575055-C2FSEESPLUWA0WSDIGUY/scanner-1.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="scanner-1.gif" data-load="false" data-image-id="67a18886a5d12a6b4c8ed869" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639575055-C2FSEESPLUWA0WSDIGUY/scanner-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639581190-RKVN65L8H3PVPZ3P9L7N/scanner-2.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="scanner-2.gif" data-load="false" data-image-id="67a18886c57c831e83142fef" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639581190-RKVN65L8H3PVPZ3P9L7N/scanner-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Android Chip Port</h2><p class="">Not exactly UI, but I just love how the Android’s chip port is portrayed. I love the mechanical nature of it, it reminds me of loading a Discman and has all the satisfying clickiness of inserting a sim card into a phone. The spring-loaded action is a hallmark of devices from this era, making it feel instantly nostalgic.</p>





















  
  






  <h2>Cockpit UI</h2><p class="">The cockpit UI design is quite beautiful. Whether intentional or not, the use of duotone monitors creates a cohesive color palette that feels more deliberate compared to full-color displays. The boxy,  chunky forms add a lot of character to the overall design. It resembles a pared-down version of an '80s space shuttle cockpit—less complex, slightly more minimalist, but still rich in tactile detail.</p>





















  
  






  <h2>Video Screens</h2><p class="">The video screens vary in fidelity, ranging from monochrome to full color. There’s even a brief glimpse of a video game console, showcasing a game reminiscent of Atari-era graphics but slightly more advanced, thanks to a subtle 3D perspective. Once again, the small screens are framed by tactile switches and buttons, seamlessly blending into the overall aesthetic.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639056401-9PBH48KPDBOAH6QAOE88/video-1.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="video-1.gif" data-load="false" data-image-id="67a18658c5cea727c561e497" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639056401-9PBH48KPDBOAH6QAOE88/video-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639133750-AFCPVF891DZJVXEX71EP/video-2.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="video-2.gif" data-load="false" data-image-id="67a186587210295cdbd39b84" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639133750-AFCPVF891DZJVXEX71EP/video-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639110237-F0WE2AQVLCNCTTJ38WCO/video-3.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="video-3.gif" data-load="false" data-image-id="67a186d281927d2a3d61a0cc" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639110237-F0WE2AQVLCNCTTJ38WCO/video-3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639737325-62800PJX43FK94QDXD4V/gun-ui.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="gun-ui.gif" data-load="false" data-image-id="67a1895eb94c4f3479a29f68" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639737325-62800PJX43FK94QDXD4V/gun-ui.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639754251-REMINLQP32KTLM2NFHM6/game.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="game.gif" data-load="false" data-image-id="67a1897b76f60949cc0be43d" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639754251-REMINLQP32KTLM2NFHM6/game.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639867951-D442XFNSVXZWV6DEZH0X/gravity-purge.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="gravity-purge.gif" data-load="false" data-image-id="67a1897b1f18f826c4ef808c" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738639867951-D442XFNSVXZWV6DEZH0X/gravity-purge.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>X-Ray Scanner</h2><p class="">It’s not exactly UI, but it’s a futuristic device nonetheless. This scanner lets you peer beneath your skin, revealing the inner workings of your body in real time. The way this effect is visualized is brilliantly executed, making it feel both tactile and eerily believable.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738640367435-QRIYKDZSNDSAIUS77BUN/xray-2.gif" data-image-dimensions="800x450" data-image-focal-point="0.5,0.5" alt="xray-2.gif" data-load="false" data-image-id="67a18b786f8b1a7c5e3fd609" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738640367435-QRIYKDZSNDSAIUS77BUN/xray-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a role="presentation" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738640364604-KUO0ONDNB2NCZ7M0FRJX/xray.gif" data-image-dimensions="800x331" data-image-focal-point="0.5,0.5" alt="xray.gif" data-load="false" data-image-id="67a18b7878899c4a662ed468" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738640364604-KUO0ONDNB2NCZ7M0FRJX/xray.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <p class="">The production team clearly had a strong grasp of the era in which this technology would have been developed, ensuring that the UI design authentically reflected its time period. Make sure to check out <a href="https://en.wikipedia.org/wiki/Alien:_Romulus" target="_blank">Alien: Romulus</a> if you haven’t already!</p>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1738641733547-POSFYIMBFY0M91X6UFOH/img-alienRomulus.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Alien Romulus - Retro Sci-Fi UI</media:title></media:content></item><item><title>2024 Recap</title><category>Showcase</category><dc:creator>Jono Yuen</dc:creator><pubDate>Fri, 20 Dec 2024 03:53:06 +0000</pubDate><link>https://www.hudsandguis.com/home/2024-recap</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:67499a30e39e66038b52ea0b</guid><description><![CDATA[<figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6d5fc4cc-f7b9-4161-b795-d0bbe1653a8f/img_2024b.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6d5fc4cc-f7b9-4161-b795-d0bbe1653a8f/img_2024b.png?format=1000w" width="1180" height="664" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6d5fc4cc-f7b9-4161-b795-d0bbe1653a8f/img_2024b.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6d5fc4cc-f7b9-4161-b795-d0bbe1653a8f/img_2024b.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6d5fc4cc-f7b9-4161-b795-d0bbe1653a8f/img_2024b.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6d5fc4cc-f7b9-4161-b795-d0bbe1653a8f/img_2024b.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6d5fc4cc-f7b9-4161-b795-d0bbe1653a8f/img_2024b.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6d5fc4cc-f7b9-4161-b795-d0bbe1653a8f/img_2024b.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6d5fc4cc-f7b9-4161-b795-d0bbe1653a8f/img_2024b.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <p class="">We’re reaching the end of the year, so here’s our recap of 2024. Unsurprisingly, several of the projects we explored this year had something to do with Artificial Intelligence, whether it’s innovative product developments or fictional interpretations of AI.</p><p class="">There’s no doubt that AI is going to be a part of our world moving forward so we will likely be seeing more explorations of this in future posts.</p><p class="">A special heartfelt thanks to everyone who reached out, contributed, bought a book, bought some merch or donated. All your kindness and friendliness has kept us going. Thanks for being cool people!<br><br>Have a nice holiday break and we’ll catch you next year for more FUI and future concepts in 2025!</p><p class=""><a href="https://www.jonoyuen.com/" target="_blank">Jono Yuen</a></p><p class=""><a href="mailto:info@hudsandguis.com">Send me a message</a></p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2024/lightyear" aria-label="Lightyear" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1732877045661-4UXMBC04OHY0WK0N6EM0/img-lightyear.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Lightyear" data-load="false" data-image-id="67499aef5c7c65383dbf2042" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1732877045661-4UXMBC04OHY0WK0N6EM0/img-lightyear.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2024/bmw-i5-flow" aria-label="BMW i5 flow" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1732877034653-46X8QFX8AEYB6A6YCB4D/img-bmw-i5.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="BMW i5 flow" data-load="false" data-image-id="67499ae2c6201d6dd416ae40" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1732877034653-46X8QFX8AEYB6A6YCB4D/img-bmw-i5.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2024/humane-ai" aria-label="Humane AI pin" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1732877055762-MRN1K7BK4YANCHFI7GZQ/img-humaneai.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Humane AI pin" data-load="false" data-image-id="67499afc528a0d12e6b461cd" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1732877055762-MRN1K7BK4YANCHFI7GZQ/img-humaneai.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2024/frame" aria-label="Frame" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1732877066173-LQIT9DX3JKCPGD1PCP9K/img-frame.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Frame" data-load="false" data-image-id="67499b0646e7914545e75823" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1732877066173-LQIT9DX3JKCPGD1PCP9K/img-frame.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2024/heart-of-stone" aria-label="Heart of Stone" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1732877077371-DJTH1BBN2BVXUWDV11AD/img-heartofstone.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Heart of Stone" data-load="false" data-image-id="67499b0eb6305e04d237dec3" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1732877077371-DJTH1BBN2BVXUWDV11AD/img-heartofstone.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2024/gundam-arcade" aria-label="Gundam Arcade" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1732877088449-OKEWA5M51YC0V0M2C8TH/img-gundam.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Gundam Arcade" data-load="false" data-image-id="67499b1676ab594ee07dfa61" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1732877088449-OKEWA5M51YC0V0M2C8TH/img-gundam.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2024/mi-dead-reckoning" aria-label="Mission Impossible - Dead Reckoning" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1733179621396-U1X09OF3I7X3VYKASO1J/img-MI-DeadReckoning.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Mission Impossible - Dead Reckoning" data-load="false" data-image-id="674e38de0f51dd7082cbaaba" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1733179621396-U1X09OF3I7X3VYKASO1J/img-MI-DeadReckoning.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.jonoyuen.com/hudsandguis" aria-label="" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1733810936761-U5S5DXLRF8UWJSWTKDO8/Merch-store.png" data-image-dimensions="1593x1061" data-image-focal-point="0.5,0.5" alt="Merch-store.png" data-load="false" data-image-id="6757daf04924794ffb195131" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1733810936761-U5S5DXLRF8UWJSWTKDO8/Merch-store.png?format=1000w" /><br>
                </a>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1734648577629-VBN744QXG0B8A588YJRY/img_2024b.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">2024 Recap</media:title></media:content></item><item><title>Official store</title><category>Products</category><category>_</category><dc:creator>Jono Yuen</dc:creator><pubDate>Tue, 10 Dec 2024 06:04:44 +0000</pubDate><link>https://www.hudsandguis.com/home/2024/official-store</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:674e5adb121a13567674c3b0</guid><description><![CDATA[<figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          <a class="
                sqs-block-image-link
                
          
        
              " href="https://www.jonoyuen.com/hudsandguis" target="_blank"
          >
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d0abb693-5c5e-4206-a0a1-ce2ceb53c627/Merch-store.png" data-image-dimensions="1593x1061" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d0abb693-5c5e-4206-a0a1-ce2ceb53c627/Merch-store.png?format=1000w" width="1593" height="1061" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d0abb693-5c5e-4206-a0a1-ce2ceb53c627/Merch-store.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d0abb693-5c5e-4206-a0a1-ce2ceb53c627/Merch-store.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d0abb693-5c5e-4206-a0a1-ce2ceb53c627/Merch-store.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d0abb693-5c5e-4206-a0a1-ce2ceb53c627/Merch-store.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d0abb693-5c5e-4206-a0a1-ce2ceb53c627/Merch-store.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d0abb693-5c5e-4206-a0a1-ce2ceb53c627/Merch-store.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d0abb693-5c5e-4206-a0a1-ce2ceb53c627/Merch-store.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          </a>
        

        
      
        </figure>
      

    
  


  





  <h3>🎉 The HUDS+GUIS Store is officially open!</h3><p class="">You can now pick up some HUDS+GUIS merch, including caps, t-shirts, and mugs! We’re just getting started and might add even more goodies down the line.</p><p class="">A huge thank you to everyone who’s already grabbed a t-shirt, cap or a book — your support means the world to us. And for those who’ve been asking for more ways to show support, now you can do so in style!</p>





















  
  








   
    <a href="https://www.jonoyuen.com/hudsandguis" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" data-sqsp-button target="_blank"
    >
      VISIT OFFICIAL STORE
    </a>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1733189825213-2JC7EXG4QGDSV3H1JJOH/Merch-store.png?format=1500w" medium="image" isDefault="true" width="1500" height="999"><media:title type="plain">Official store</media:title></media:content></item><item><title>Mission Impossible: Dead Reckoning</title><category>Film</category><category>HUDs</category><category>GUIs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Mon, 02 Dec 2024 05:53:16 +0000</pubDate><link>https://www.hudsandguis.com/home/2024/mi-dead-reckoning</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:674d18676bb1423092063bec</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/f794b111-e15e-4be6-a365-3df6ca2c04b0/img-MI-DeadReckoning.png?format=1000w" />


  <p class=""><a href="https://en.wikipedia.org/wiki/Mission:_Impossible_%E2%80%93_Dead_Reckoning_Part_One" target="_blank">Mission: Impossible – Dead Reckoning</a> revolves around artificial intelligence, which seems to be a common theme lately (see <a href="https://www.hudsandguis.com/home/2024/heart-of-stone">Heart of Stone</a>). The film does a great job of exploring the powerful implications of a weaponised AI. So as you’d expect there’s plenty of nice examples of FUI in this latest instalment but this time with a deeper focus on AI.</p>





















  
  






  <h2>Artificial Intelligence</h2><p class="">An AI model can be visualised in so many different ways and in Mission: Impossible – Dead Reckoning it’s presented as a constantly shifting data cloud with an undulating core. This interpretation is quite simple but really effective. The erratic, ever-changing outer edges convey relentless activity, while the steady, glowing core exudes a sense of ominous power and control. It’s a thought-provoking representation that perfectly complements the AI’s mysterious and formidable nature.</p>





















  
  






  <h2>Tracking</h2><p class="">This sequence is really fun as it shows two opposing sides tracking Hunt at the airport, each using distinctly different interfaces. The government’s interface is clean and orderly, while the Mission Impossible team’s system feels intentionally raw and hacker-like.</p><p class="">The MI team’s interface has a no-frills, engineering-led aesthetic - everything is neatly arranged and functional. Yet, it’s peppered with those slight visual touches that add a bit of flair without sacrificing utility.</p><p class="">The tracking of Hunt’s photo in the security footage is also worth noting, in particular the extra layer of rectangles that sits behind his figure. This tiny detail gives depth to the tracking and really completes the design.</p><p class="">What’s most interesting about this sequence though, is the concept behind it. The idea that AI could manipulate security footage in real-time is quite unsettling,</p>





















  
  






  <h2>Hacked interface</h2><p class="">Here’s a nice little example of an interface glitching and being hacked.</p>





















  
  






  <h2>ID Scan</h2><p class="">A simple visualisation of a fingerprint and facial scan that allows the story and camera to flow nicely.</p>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1733112766801-7MC01PCJVW7F09G7ITRQ/img-MI-DeadReckoning.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Mission Impossible: Dead Reckoning</media:title></media:content></item><item><title>Mobile Suit Gundam: SENJOU NO KIZUNA II</title><category>Games</category><category>HUDs</category><category>GUIs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Fri, 08 Nov 2024 09:17:08 +0000</pubDate><link>https://www.hudsandguis.com/home/2024/gundam-arcade</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:667a3cff5debf14af7435457</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1231856d-7425-40c4-ab1f-591117c4c194/img-gundam.png?format=1000w" />


  <p class="">Mobile Suit Gundam: SENJOU NO KIZUNA II is a multi-screen, fully immersive arcade experience. The setup uses multiple displays that give players the sensation of piloting a huge mech. Even the lobby screen is presented to feel like you’re in a hanger loading bay being prepped before battle.</p><p class="">The triple-screen setup creates a cockpit atmosphere where menus and controls surround you, adding a wider field of vision to navigating the game. With dual control sticks, you get tactile feedback that enhances the sensation of controlling a machine. </p><p class="">When in battle, you’re met with a HUD that’s filled with damage schematics, ammo indicators, and a subtly moving reticle that provides a layered depth to the visuals. I really like camera shakes and how the screen glitches every time you take damage, these little details go a long way in building the atmosphere. There are different HUDs depending on the suit you choose. The game is seen primary from a first-person perspective, so it relies heavily on the cockpit to bring out the individual suit’s design and personality.</p><p class="">There is also a very interesting map navigation UI, where you choose your landing point when re-entering the battlefield. The design is a bit unusual, and it feels like you’re navigating parallel to the ground but it works and it’s great. There’s a slight parallax effect between the grid and the map which makes it particularly nice.</p><p class="">Overall, the design is fantastic, with subtle details and animations that truly elevate the experience, making it feel like an authentic mech-piloting adventure.</p><h2>Startup UI</h2>





















  
  






  <h2>Map Navigation UI</h2>





















  
  






  <h2>Battle HUD</h2>





















  
  






  <h2>Operation over UI</h2>





















  
  






  <h2>UI Menu</h2>





















  
  






  <h2>Full walkthrough video</h2>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1722499608291-UAJP4CI3LVHZLZ2LW9BK/img-gundam.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Mobile Suit Gundam: SENJOU NO KIZUNA II</media:title></media:content></item><item><title>Heart of Stone</title><category>Film</category><category>Gestural UI</category><category>GUIs</category><category>HUDs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Tue, 29 Oct 2024 10:27:29 +0000</pubDate><link>https://www.hudsandguis.com/home/2024/heart-of-stone</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:6719f0ebf5a0a972a99c997b</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/e611a776-ba7f-4ab8-90a3-0075c0c6c7c3/img-heartofstone.png?format=1000w" />


  <p class=""><a href="https://www.imdb.com/title/tt13603966/" target="_blank">Heart of Stone</a> is an action-packed espionage thriller, centred around an advanced AI system called “The Heart'“, which has the ability to predict and prevent global threats. The film does an amazing job of visualising how it functions and how users interact with it. Every scene featuring FUI, is beautifully presented and easy to comprehend. This is a real treat for FUI fans, there are plenty of great examples here!</p><h2>Mission Assist UI</h2><p class="">Here is the interface used by Jack, Stone's tactical support during missions. Jack provides critical intel—highlighting alternate routes, enemy positions, and real-time updates on mission success probabilities. Essentially, he's Stone's version of what Ned from <em>Spider-Man: Homecoming (</em><a href="https://www.hudsandguis.com/home/2018/spiderman-homecoming" target="_blank"><em>see article</em></a><em>)</em> would call the ultimate 'guy in the chair.'</p><p class="">Through the use of holograms, Jack is able to see a god’s eye view of Stone’s surroundings and move things around, setting markers, or highlighting items of interest like a coach in a football game. The interactions feel like a VR experience, but without the controls and headset, Jack navigates with natural gestures, smoothly zooming, panning, and casually tossing elements around with his hands in a similar way to how <a href="https://www.hudsandguis.com/home/2011/02/13/ironman-hud-part-2" target="_blank">Tony Stark</a> interacts with UI.</p>





















  
  






  <h2>HUDS - Heads-up displays</h2><p class="">The HUDs are displayed through contact lenses, much like the tech in Continuum (<a href="https://www.hudsandguis.com/home/2013/04/17/continuum-sci-fi-interfaces" target="_blank">see article</a>) or Mojo Lens (<a href="https://www.hudsandguis.com/home/2022/mojo-vision" target="_blank">see article</a>). The clips primarily showcase wayfinding, represented by a cluster of dynamic white nodes alongside a smooth green line that appears to average all the node data points. It makes for a great visual device that focuses your attention and is very easy to comprehend.</p>





















  
  






  <h2>Data cloud UI</h2><p class="">These scenes do a great job of visuallising big data, it shows that Jack has access to vast amounts of organised data. Presenting the information across a vast, open space gives you the feeling like you’re walking inside a giant catalogue of information, almost like a galaxy of content.</p>





















  
  






  <h2>Sphere map UI</h2><p class="">I wanted to highlight this specifically because I absolutely love how the map unfurls, wrapping around the user like a sphere. It looks incredibly immersive, and you can imagine how awe-inspiring it would be to pan around the UI whilst standing in the middle of it.</p>





















  
  






  <h2>Music player UI</h2><p class="">This one was unusual but interesting in it’s own right. It doesn’t seem to fit in with the rest of the task orientated interfaces in the film, it’s a music player that Jack pulls up before diving into his work. I like how the multi-colour audio visualisation unpacks and wraps around the user in pulsing bars and the radial control is a nice touch too.</p>





















  
  






  <p class=""><a href="https://www.imdb.com/title/tt13603966/" target="_blank">Heart of Stone</a> showcases FUI that is both visually striking and thoughtfully designed. There’s consistency throughout and the interactions are meaningful and comprehensive. The UI played a large role in effectively showcasing the power of the Heart (AI) and how much of an advantage it is to have control of it. Congrats to the team!</p>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1729756844730-TEH8UD6V7ER83D78GQM7/img-heartofstone.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Heart of Stone</media:title></media:content></item><item><title>Frame by Brilliant Labs</title><category>Products</category><category>HUDs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Thu, 23 May 2024 07:41:28 +0000</pubDate><link>https://www.hudsandguis.com/home/2024/frame</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:6649627196feda55398fdf25</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/0e0f33c0-e5a7-498f-8411-4311ccb1e153/img-frame.png?format=1000w" />


  <p class="">Here’s a quick look at <a href="https://brilliant.xyz/products/frame" target="_blank">Frame</a>, AI powered glasses by <a href="https://brilliant.xyz/products/frame" target="_blank">Brilliant Labs</a>. Frame is powered by an AI assistant called Noa, which utilizes cutting-edge AI models including Perplexity AI, Stable Diffusion (Stability AI), GPT-4 (OpenAI), and Whisper for speech recognition.</p><p class="">Many AI powered glasses in market utilise audio feedback, like the Ray-Ban Meta smart glasses. Those rely on voice commands and speakers embedded in the glasses. <a href="https://brilliant.xyz/products/frame" target="_blank">Frame</a> however, provides visual feedback by displaying information on the lens. There have been other examples of this but not many that look as nice as <a href="https://brilliant.xyz/products/frame" target="_blank">Frame</a>. <a href="https://brilliant.xyz/products/frame" target="_blank">Frame</a> doesn’t come with speakers but allows you to sync with smartphones and earbuds.</p><p class=""><a href="https://brilliant.xyz/products/frame" target="_blank">Frame</a> offers the advantage of providing information in small, easily digestible doses, allowing for discreet access with minimal disruption. It’s also compatible with prescriptions.</p><p class="">The future seems to be moving towards a world where AI assistance through wearable devices becomes an normal part of our daily lives, not unlike the film <a href="https://www.hudsandguis.com/home/2014/07/09/her-invisible-technology" target="_blank"><em>Her</em></a>. It’s fascinating to see the different approaches to how we will interact with these technologies and to see which ones become the most widely adopted or preferred.</p>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1716085430493-84PZFMHDNKDB0UPC1EF0/img-frame.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Frame by Brilliant Labs</media:title></media:content></item><item><title>Humane Ai Pin</title><category>Products</category><category>GUIs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Tue, 14 May 2024 23:54:52 +0000</pubDate><link>https://www.hudsandguis.com/home/2024/humane-ai</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:6623af9e0bbe717de2de4ea1</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/2b2363b5-f1a3-4e69-9541-91166110c42e/img-humaneai.png?format=1000w" />


  <p class="">Here’s a closer look at the <a href="https://humane.com/" target="_blank">Humane AI pin’s</a> projection UI and gestural inputs. The <a href="https://humane.com/" target="_blank">Humane AI pin </a>is a multi-modal wearable device that attaches to your clothing via a strong magnet. The pin allows you to access a voice assistant and also engage with a UI that’s projected from the pin onto your hand.</p><p class="">There’s been a lot of criticism about this first generation release but despite this there’s some really interesting interactions that work surprisingly well.</p><h2>Depth Gesture Navigation</h2><p class="">One interesting technique that the <a href="https://humane.com/" target="_blank">Humane AI pin</a> uses is navigating a carousel by moving your hand towards and away from you. The UI reacts accordingly as the user moves their hand closer and further away. This ‘Rolodex’ type navigation is quite unusual but works surprisingly well. </p>





















  
  














































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d6946604-7617-47c0-8b5c-62f527bf861e/rollerdeck.gif" data-image-dimensions="600x300" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d6946604-7617-47c0-8b5c-62f527bf861e/rollerdeck.gif?format=1000w" width="600" height="300" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d6946604-7617-47c0-8b5c-62f527bf861e/rollerdeck.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d6946604-7617-47c0-8b5c-62f527bf861e/rollerdeck.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d6946604-7617-47c0-8b5c-62f527bf861e/rollerdeck.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d6946604-7617-47c0-8b5c-62f527bf861e/rollerdeck.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d6946604-7617-47c0-8b5c-62f527bf861e/rollerdeck.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d6946604-7617-47c0-8b5c-62f527bf861e/rollerdeck.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d6946604-7617-47c0-8b5c-62f527bf861e/rollerdeck.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <h2>Pinch</h2><p class="">A pinch action is used to confirm selections. A pretty simple solution and something you can do with relative ease and quickness but at the expense of reducing your viewable area in the process.</p>





















  
  














































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d1d22789-5431-4ac7-a4ac-e1094072dfba/pinch.gif" data-image-dimensions="600x300" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d1d22789-5431-4ac7-a4ac-e1094072dfba/pinch.gif?format=1000w" width="600" height="300" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d1d22789-5431-4ac7-a4ac-e1094072dfba/pinch.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d1d22789-5431-4ac7-a4ac-e1094072dfba/pinch.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d1d22789-5431-4ac7-a4ac-e1094072dfba/pinch.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d1d22789-5431-4ac7-a4ac-e1094072dfba/pinch.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d1d22789-5431-4ac7-a4ac-e1094072dfba/pinch.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d1d22789-5431-4ac7-a4ac-e1094072dfba/pinch.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d1d22789-5431-4ac7-a4ac-e1094072dfba/pinch.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <h2>Rotation navigation</h2><p class="">Another very unique solution and one that feels quite intuitive. The user can rotate their hand to navigate a circular interface. The challenge here is doing it whilst keeping your UI in view and avoiding too much distortion.</p>





















  
  














































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/361abd90-df26-4795-a003-ecce67aff2fa/rotate.gif" data-image-dimensions="600x300" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/361abd90-df26-4795-a003-ecce67aff2fa/rotate.gif?format=1000w" width="600" height="300" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/361abd90-df26-4795-a003-ecce67aff2fa/rotate.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/361abd90-df26-4795-a003-ecce67aff2fa/rotate.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/361abd90-df26-4795-a003-ecce67aff2fa/rotate.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/361abd90-df26-4795-a003-ecce67aff2fa/rotate.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/361abd90-df26-4795-a003-ecce67aff2fa/rotate.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/361abd90-df26-4795-a003-ecce67aff2fa/rotate.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/361abd90-df26-4795-a003-ecce67aff2fa/rotate.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <h2>Push</h2><p class="">Users move deeper into menus by moving their hand forward in a push motion and close their hand into a fist to move backwards in the menu.</p>





















  
  














































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/4dece6ee-201e-476e-8be8-371e5e5e6b13/push.gif" data-image-dimensions="600x300" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/4dece6ee-201e-476e-8be8-371e5e5e6b13/push.gif?format=1000w" width="600" height="300" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/4dece6ee-201e-476e-8be8-371e5e5e6b13/push.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/4dece6ee-201e-476e-8be8-371e5e5e6b13/push.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/4dece6ee-201e-476e-8be8-371e5e5e6b13/push.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/4dece6ee-201e-476e-8be8-371e5e5e6b13/push.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/4dece6ee-201e-476e-8be8-371e5e5e6b13/push.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/4dece6ee-201e-476e-8be8-371e5e5e6b13/push.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/4dece6ee-201e-476e-8be8-371e5e5e6b13/push.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <h2>Projection Images</h2><p class="">There is an option to view images in this projection UI but due to the limited detail and colour it doesn’t really work.</p>





















  
  














































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/97a37f6f-11e7-4dc8-a443-fce3d8f08ba6/images.gif" data-image-dimensions="600x300" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/97a37f6f-11e7-4dc8-a443-fce3d8f08ba6/images.gif?format=1000w" width="600" height="300" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/97a37f6f-11e7-4dc8-a443-fce3d8f08ba6/images.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/97a37f6f-11e7-4dc8-a443-fce3d8f08ba6/images.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/97a37f6f-11e7-4dc8-a443-fce3d8f08ba6/images.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/97a37f6f-11e7-4dc8-a443-fce3d8f08ba6/images.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/97a37f6f-11e7-4dc8-a443-fce3d8f08ba6/images.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/97a37f6f-11e7-4dc8-a443-fce3d8f08ba6/images.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/97a37f6f-11e7-4dc8-a443-fce3d8f08ba6/images.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <p class="">The initial release of the <a href="https://humane.com/" target="_blank">Humane AI pin</a> has faced substantial criticism, largely stemming from comparisons to the capabilities of smartphones, which it currently cannot rival. It's a strange situation; had this technology been unveiled thirty years ago, it would have been hailed as a groundbreaking achievement, and in many ways, it still is. However, the rapid pace of technological advancement and widespread adoption over the past three decades has raised the bar significantly. Today, users expect frictionless experiences, especially within the market this product targets.</p><p class="">I don’t think it’s entirely fair for the <a href="https://humane.com/" target="_blank">Humane AI pin</a> to endure so much criticism, because they did a lot of things right and are trying something completely new which is something HUDS+GUIS tries to celebrate and encourage. Yet, it's undeniable that developing such products has become increasingly challenging as user expectations have grown significantly.</p><p class="">Images are from <a href="https://www.youtube.com/@mkbhd" target="_blank">Marques Brownlee</a><strong> </strong>extensive review of the <a href="https://humane.com/" target="_blank">Humane AI pin</a>.</p>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1715677008654-TUMUT6FP0I5WCF3VYU1L/img-humaneai.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Humane Ai Pin</media:title></media:content></item><item><title>BMW i5 Flow NOSTOKANA - Color Changing Technology</title><category>Automotive</category><category>GUIs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Thu, 18 Apr 2024 08:25:16 +0000</pubDate><link>https://www.hudsandguis.com/home/2024/bmw-i5-flow</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:661f1fd555cedb71e9d8decd</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/8afe45d0-28a7-4449-ac7d-9989c2488a5b/img-bmw-i5.png?format=1000w" />


  <p class="">Here’s a look at BMW’s i5 Flow NOSTOKANA, a concept car showcasing their color changing technology. Through electrically animated E Ink film segments, this vehicle essentially transforms into a life sized Hot Wheels car.</p><p class="">The car uses the work of African artist Esther Mahlangu to demonstrate the concept but you can imagine the possibilities.</p><p class="">The technology works by using electrically charged ink, which, when subjected to voltage, brings the individual colors to the surface.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713316696284-XJ2BNK9SZC72YD4RQG5C/eink-04-media-hd.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713316696284-XJ2BNK9SZC72YD4RQG5C/eink-04-media-hd.gif" data-image-dimensions="1920x843" data-image-focal-point="0.5,0.5" alt="eink-04-media-hd.gif" data-load="false" data-image-id="661f232f666a043afb91241a" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713316696284-XJ2BNK9SZC72YD4RQG5C/eink-04-media-hd.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713316692015-LUHV88TYGJYOBYM3IELJ/eink-06-media-hd.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713316692015-LUHV88TYGJYOBYM3IELJ/eink-06-media-hd.gif" data-image-dimensions="1920x843" data-image-focal-point="0.5,0.5" alt="eink-06-media-hd.gif" data-load="false" data-image-id="661f232f89290b05c98e3f79" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713316692015-LUHV88TYGJYOBYM3IELJ/eink-06-media-hd.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <p class="">Will we see this in the future? Will we be walking through a city where everything is an animated surface? (see <a href="https://www.hudsandguis.com/home/2023/vegas-sphere" target="_blank">Vegas Sphere</a>)</p><p class="">This reminded me of Sony and Honda’s <a href="https://www.hudsandguis.com/home/2023/afeela" target="_blank">AFEELA concept car</a>, which explored the idea of presenting content outside of the car. With that in mind, I can imagine the possibility of using this technology to display information such as petrol levels, battery levels or even have a debug mode to assist with servicing and repairs. Whether that’s practical or not, I’m not sure but it is interesting to explore these possibilities.</p><p class="">Are there interesting applications to this technology? Let me know what you think in the comments section below!</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713316899276-YZTR3N2EC2REXB1IR0DU/purple-ezgif.com-video-to-gif-converter.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713316899276-YZTR3N2EC2REXB1IR0DU/purple-ezgif.com-video-to-gif-converter.gif" data-image-dimensions="600x338" data-image-focal-point="0.5,0.5" alt="purple-ezgif.com-video-to-gif-converter.gif" data-load="false" data-image-id="661f23f583cf91347453b09c" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713316899276-YZTR3N2EC2REXB1IR0DU/purple-ezgif.com-video-to-gif-converter.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713316928803-3NERVI5847CKZ2S3IHV3/PF0009657_264-ezgif.com-video-to-gif-converter.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713316928803-3NERVI5847CKZ2S3IHV3/PF0009657_264-ezgif.com-video-to-gif-converter.gif" data-image-dimensions="600x338" data-image-focal-point="0.5,0.5" alt="PF0009657_264-ezgif.com-video-to-gif-converter.gif" data-load="false" data-image-id="661f23f55907802551542b43" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713316928803-3NERVI5847CKZ2S3IHV3/PF0009657_264-ezgif.com-video-to-gif-converter.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317078339-5V18FILJP59MSAMG7LU3/P90539534_highRes_bmw-i5-flow-nostokan.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317078339-5V18FILJP59MSAMG7LU3/P90539534_highRes_bmw-i5-flow-nostokan.jpg" data-image-dimensions="6000x4000" data-image-focal-point="0.5,0.5" alt="P90539534_highRes_bmw-i5-flow-nostokan.jpg" data-load="false" data-image-id="661f249fcff3377cddd72b8a" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317078339-5V18FILJP59MSAMG7LU3/P90539534_highRes_bmw-i5-flow-nostokan.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317078784-A9LRG1BM8CHQYAT6KOJL/P90539536_highRes_bmw-i5-flow-nostokan.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317078784-A9LRG1BM8CHQYAT6KOJL/P90539536_highRes_bmw-i5-flow-nostokan.jpg" data-image-dimensions="6000x4000" data-image-focal-point="0.5,0.5" alt="P90539536_highRes_bmw-i5-flow-nostokan.jpg" data-load="false" data-image-id="661f249f1dd40617f1655864" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317078784-A9LRG1BM8CHQYAT6KOJL/P90539536_highRes_bmw-i5-flow-nostokan.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317137435-ZOUZV28F8TALH0HD26D4/P90539538_highRes_bmw-i5-flow-nostokan.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317137435-ZOUZV28F8TALH0HD26D4/P90539538_highRes_bmw-i5-flow-nostokan.jpg" data-image-dimensions="6000x4000" data-image-focal-point="0.5,0.5" alt="P90539538_highRes_bmw-i5-flow-nostokan.jpg" data-load="false" data-image-id="661f24d70375c557356097dc" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317137435-ZOUZV28F8TALH0HD26D4/P90539538_highRes_bmw-i5-flow-nostokan.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317137500-UW5QSJTXSYHRJKGI39P4/P90539540_highRes_bmw-i5-flow-nostokan.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317137500-UW5QSJTXSYHRJKGI39P4/P90539540_highRes_bmw-i5-flow-nostokan.jpg" data-image-dimensions="6000x4000" data-image-focal-point="0.5,0.5" alt="P90539540_highRes_bmw-i5-flow-nostokan.jpg" data-load="false" data-image-id="661f24d85b3b1549a38b588e" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317137500-UW5QSJTXSYHRJKGI39P4/P90539540_highRes_bmw-i5-flow-nostokan.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317200703-VDR9Q8JY4P33C1RAJVIS/P90539542_highRes_bmw-i5-flow-nostokan.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317200703-VDR9Q8JY4P33C1RAJVIS/P90539542_highRes_bmw-i5-flow-nostokan.jpg" data-image-dimensions="6000x4000" data-image-focal-point="0.5,0.5" alt="P90539542_highRes_bmw-i5-flow-nostokan.jpg" data-load="false" data-image-id="661f2512b428b2730dcfacf1" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317200703-VDR9Q8JY4P33C1RAJVIS/P90539542_highRes_bmw-i5-flow-nostokan.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317217545-HYENZOLJC6XUZLMDEVZ2/P90539545_highRes_bmw-i5-flow-nostokan.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317217545-HYENZOLJC6XUZLMDEVZ2/P90539545_highRes_bmw-i5-flow-nostokan.jpg" data-image-dimensions="6000x4245" data-image-focal-point="0.5,0.5" alt="P90539545_highRes_bmw-i5-flow-nostokan.jpg" data-load="false" data-image-id="661f25186bca1a688439fa54" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317217545-HYENZOLJC6XUZLMDEVZ2/P90539545_highRes_bmw-i5-flow-nostokan.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317220274-IZ9VPUMRWE58OA6CJQEJ/P90539547_highRes_bmw-i5-flow-nostokan.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317220274-IZ9VPUMRWE58OA6CJQEJ/P90539547_highRes_bmw-i5-flow-nostokan.jpg" data-image-dimensions="5160x3692" data-image-focal-point="0.5,0.5" alt="P90539547_highRes_bmw-i5-flow-nostokan.jpg" data-load="false" data-image-id="661f2552058a9d5b78d197a1" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317220274-IZ9VPUMRWE58OA6CJQEJ/P90539547_highRes_bmw-i5-flow-nostokan.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317262756-Q8NCSFQ0JYUQ572BKXQ9/P90539550_highRes_bmw-i5-flow-nostokan.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317262756-Q8NCSFQ0JYUQ572BKXQ9/P90539550_highRes_bmw-i5-flow-nostokan.jpg" data-image-dimensions="6000x4500" data-image-focal-point="0.5,0.5" alt="P90539550_highRes_bmw-i5-flow-nostokan.jpg" data-load="false" data-image-id="661f25631dd40617f1658bba" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713317262756-Q8NCSFQ0JYUQ572BKXQ9/P90539550_highRes_bmw-i5-flow-nostokan.jpg?format=1000w" /><br>
                </a>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1713315946344-KJ0ZTAAL4BS7JABQZDMF/img-bmw-i5.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">BMW i5 Flow NOSTOKANA - Color Changing Technology</media:title></media:content></item><item><title>Lightyear FUI</title><category>Film</category><category>GUIs</category><category>HUDs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Wed, 20 Mar 2024 03:04:41 +0000</pubDate><link>https://www.hudsandguis.com/home/2024/lightyear</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:65e6c85611bc6b59f02d7f1e</guid><description><![CDATA[<figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b19b5401-6512-4978-bd28-0c2fe3e59f75/img-lightyear.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b19b5401-6512-4978-bd28-0c2fe3e59f75/img-lightyear.png?format=1000w" width="1180" height="664" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b19b5401-6512-4978-bd28-0c2fe3e59f75/img-lightyear.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b19b5401-6512-4978-bd28-0c2fe3e59f75/img-lightyear.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b19b5401-6512-4978-bd28-0c2fe3e59f75/img-lightyear.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b19b5401-6512-4978-bd28-0c2fe3e59f75/img-lightyear.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b19b5401-6512-4978-bd28-0c2fe3e59f75/img-lightyear.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b19b5401-6512-4978-bd28-0c2fe3e59f75/img-lightyear.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/b19b5401-6512-4978-bd28-0c2fe3e59f75/img-lightyear.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <p class="">Here’s a look at the various FUI from Disney + Pixar’s Lightyear. There’s a lot of different examples in the film, all of which fits within this overarching feel that blends a toy-like aesthetic with a touch of realism.</p><h2>Wrist mounted UI</h2><p class="">The interfaces used by Buzz Lightyear and the other characters from Earth seem to draw inspiration directly from Buzz's iconic space suit. They all have this moulded plastic look much like a Super Nintendo controller and other similar devices from the early 90s, and helps build this toy aesthetic used throughout the film.</p>





















  
  














































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/001c2252-92e7-4937-9548-47381f8ed74b/wrist.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/001c2252-92e7-4937-9548-47381f8ed74b/wrist.gif?format=1000w" width="800" height="330" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/001c2252-92e7-4937-9548-47381f8ed74b/wrist.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/001c2252-92e7-4937-9548-47381f8ed74b/wrist.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/001c2252-92e7-4937-9548-47381f8ed74b/wrist.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/001c2252-92e7-4937-9548-47381f8ed74b/wrist.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/001c2252-92e7-4937-9548-47381f8ed74b/wrist.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/001c2252-92e7-4937-9548-47381f8ed74b/wrist.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/001c2252-92e7-4937-9548-47381f8ed74b/wrist.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <h2>Portable interface</h2><p class="">Here’s another device that looks like it was designed in the 90s. Featuring chunky buttons, a fold up display and rounded edges, it almost looks like a kids toy. In fact the UI features a lot of chunky icons and diagrams and could easily be mistaken for a kids game.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623567067-PCCTFY7D01MCLOQWV4YC/cat-computer-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623567067-PCCTFY7D01MCLOQWV4YC/cat-computer-1.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="cat-computer-1.gif" data-load="false" data-image-id="65e6c8f75aabb124890445eb" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623567067-PCCTFY7D01MCLOQWV4YC/cat-computer-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623601032-R2S9U0GC1WAEVTQTBX0V/cat-computer-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623601032-R2S9U0GC1WAEVTQTBX0V/cat-computer-2.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="cat-computer-2.gif" data-load="false" data-image-id="65e6c8f7a027206f2fd47a62" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623601032-R2S9U0GC1WAEVTQTBX0V/cat-computer-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623629434-HJZ1YFYGHLW9F7QCZD3G/cat-computer-3.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623629434-HJZ1YFYGHLW9F7QCZD3G/cat-computer-3.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="cat-computer-3.gif" data-load="false" data-image-id="65e6c912a5e2813513220b49" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623629434-HJZ1YFYGHLW9F7QCZD3G/cat-computer-3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709695946132-UTSJOHW4GU2LUZE6ZY3J/fuel-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709695946132-UTSJOHW4GU2LUZE6ZY3J/fuel-1.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="fuel-1.gif" data-load="false" data-image-id="65e7e3644d9dc22172dd77fd" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709695946132-UTSJOHW4GU2LUZE6ZY3J/fuel-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709695922048-AUDO566ZK5L6O5PO256T/fuel-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709695922048-AUDO566ZK5L6O5PO256T/fuel-2.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="fuel-2.gif" data-load="false" data-image-id="65e7e3648ea4834ecf4228f7" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709695922048-AUDO566ZK5L6O5PO256T/fuel-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Mission Control</h2><p class="">All mission control screens use a one colour palette, which helps with focusing the shot. The blueprint of the XL ship is quite nice and gives context to what Buzz Lightyear is doing.</p>





















  
  














































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6f90c199-388f-4705-87ca-1c9d68a21434/mission-control.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6f90c199-388f-4705-87ca-1c9d68a21434/mission-control.gif?format=1000w" width="800" height="330" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6f90c199-388f-4705-87ca-1c9d68a21434/mission-control.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6f90c199-388f-4705-87ca-1c9d68a21434/mission-control.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6f90c199-388f-4705-87ca-1c9d68a21434/mission-control.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6f90c199-388f-4705-87ca-1c9d68a21434/mission-control.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6f90c199-388f-4705-87ca-1c9d68a21434/mission-control.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6f90c199-388f-4705-87ca-1c9d68a21434/mission-control.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/6f90c199-388f-4705-87ca-1c9d68a21434/mission-control.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <h2>Turnip UI</h2><p class="">The UI in the Turnip takes on an amber colour palette, with accents of red for critical messages. This contrasts the background nicely particularly on the screen HUD against the clouds and grey rocks of the planet. It makes you wonder what would happen if they visited a predominantly golden planet? Would that cause major accessibility issues?</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709700671397-RZ8C59ANV5VF6Z3TFLQ1/wake.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709700671397-RZ8C59ANV5VF6Z3TFLQ1/wake.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="wake.gif" data-load="false" data-image-id="65e7f5dc72cd8130d1158c43" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709700671397-RZ8C59ANV5VF6Z3TFLQ1/wake.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709702771406-4JBPXZVSM49RZC7TAM13/confirm.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709702771406-4JBPXZVSM49RZC7TAM13/confirm.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="confirm.gif" data-load="false" data-image-id="65e7fe53994cce074e5ff023" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709702771406-4JBPXZVSM49RZC7TAM13/confirm.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1710828751541-FT1OWIN4GL9PXZ9EK5UJ/turnip-1.png" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1710828751541-FT1OWIN4GL9PXZ9EK5UJ/turnip-1.png" data-image-dimensions="2396x988" data-image-focal-point="0.5,0.5" alt="turnip-1.png" data-load="false" data-image-id="65f92cc8fe8e171b12783a9e" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1710828751541-FT1OWIN4GL9PXZ9EK5UJ/turnip-1.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1710828751698-MPKGTL3XYLSPP2VZ22CX/turnip-2.png" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1710828751698-MPKGTL3XYLSPP2VZ22CX/turnip-2.png" data-image-dimensions="2396x988" data-image-focal-point="0.5,0.5" alt="turnip-2.png" data-load="false" data-image-id="65f92cc81ce67c5443e33283" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1710828751698-MPKGTL3XYLSPP2VZ22CX/turnip-2.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Viewfinder</h2><p class="">This neat little viewfinder follows the same colour palette as the Turnip spaceship. The shape of the viewfinder is a nice touch.</p><p class="">It reminds me of the scopes from <a href="https://www.hudsandguis.com/home/2021/mandalorian-season-2-ui" target="_blank">Mandalorian</a>.</p>





















  
  














































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/abd3f1aa-e011-40e1-867d-8cab1be68635/binoculars.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/abd3f1aa-e011-40e1-867d-8cab1be68635/binoculars.gif?format=1000w" width="800" height="330" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/abd3f1aa-e011-40e1-867d-8cab1be68635/binoculars.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/abd3f1aa-e011-40e1-867d-8cab1be68635/binoculars.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/abd3f1aa-e011-40e1-867d-8cab1be68635/binoculars.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/abd3f1aa-e011-40e1-867d-8cab1be68635/binoculars.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/abd3f1aa-e011-40e1-867d-8cab1be68635/binoculars.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/abd3f1aa-e011-40e1-867d-8cab1be68635/binoculars.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/abd3f1aa-e011-40e1-867d-8cab1be68635/binoculars.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
      
        </figure>
      

    
  


  





  <h2>Holograms</h2><p class="">The examples appear in two very common scenarios; a mission briefing and a video message.</p><p class="">Holograms are great for mission briefings, offering 360-degree views of a scene. This provides participants with enhanced spatial awareness and allows them to view things from different angles. In addition to that, using holograms for mission briefings is great for film, as it allows viewers to see the presentation content whilst also seeing the characters’ facial reactions.</p><p class="">In terms of the video message, we’re not far off having something like that available now.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709697015193-HGTGVVYO0H7QU2G36SHO/hologram-briefing.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709697015193-HGTGVVYO0H7QU2G36SHO/hologram-briefing.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="hologram-briefing.gif" data-load="false" data-image-id="65e7e76f7e722c5db3b3bb34" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709697015193-HGTGVVYO0H7QU2G36SHO/hologram-briefing.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709696979787-CVJJ03ALXNAFCQGQBKTX/hologram.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709696979787-CVJJ03ALXNAFCQGQBKTX/hologram.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="hologram.gif" data-load="false" data-image-id="65e7e76f8cedec288bd57f77" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709696979787-CVJJ03ALXNAFCQGQBKTX/hologram.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Spaceship Cockpit UI</h2><p class="">The cockpit in Buzz Lightyear’s spaceship features a lot of buttons and dials, it also includes a HUD and even a holographic display projected from his IVAN device.</p><p class="">The buttons themselves are worth having a look at as they feature a really interesting set of icons.</p><p class="">The HUD is fairly standard but does a great job of communicating story beats.</p><p class="">The holographic display also does a great job of condensing a pretty complicated scenario into a digestible diagram.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698426174-SK0QL2G489SNAFJ954ZI/ship-buttons.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698426174-SK0QL2G489SNAFJ954ZI/ship-buttons.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="ship-buttons.gif" data-load="false" data-image-id="65e7ed0ecaa3282f4f62a946" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698426174-SK0QL2G489SNAFJ954ZI/ship-buttons.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698373121-IUPSGE67P6ULR118AL50/ship-hud.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698373121-IUPSGE67P6ULR118AL50/ship-hud.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="ship-hud.gif" data-load="false" data-image-id="65e7ed0e3e3b2f3cfdd2a191" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698373121-IUPSGE67P6ULR118AL50/ship-hud.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698460492-8DK01BS2USYMSYSX72O5/ship-warning-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698460492-8DK01BS2USYMSYSX72O5/ship-warning-2.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="ship-warning-2.gif" data-load="false" data-image-id="65e7ed463bd89b76cf29d676" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698460492-8DK01BS2USYMSYSX72O5/ship-warning-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698466913-6Q0DAPRSMV532P6ZXJ6R/ship-warning-3.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698466913-6Q0DAPRSMV532P6ZXJ6R/ship-warning-3.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="ship-warning-3.gif" data-load="false" data-image-id="65e7ed7b826b107d021d0e8b" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698466913-6Q0DAPRSMV532P6ZXJ6R/ship-warning-3.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698553983-A67V7UJ71KX2HQ99D1JR/ship-warning.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698553983-A67V7UJ71KX2HQ99D1JR/ship-warning.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="ship-warning.gif" data-load="false" data-image-id="65e7ed9e6250647f1828654a" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709698553983-A67V7UJ71KX2HQ99D1JR/ship-warning.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709699169024-3V2XVZXMJ7BWL0C9VQZM/ship-hud-2-shorter.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709699169024-3V2XVZXMJ7BWL0C9VQZM/ship-hud-2-shorter.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="ship-hud-2-shorter.gif" data-load="false" data-image-id="65e7f02826d80e2e732eae22" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709699169024-3V2XVZXMJ7BWL0C9VQZM/ship-hud-2-shorter.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709699344107-46167TJ01E50YYYL6310/ship-holo-shorter.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709699344107-46167TJ01E50YYYL6310/ship-holo-shorter.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="ship-holo-shorter.gif" data-load="false" data-image-id="65e7f0c75cdf725eb6846eb9" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709699344107-46167TJ01E50YYYL6310/ship-holo-shorter.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709705229579-VYYMWR0FSJVULBR1WC4L/icons.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709705229579-VYYMWR0FSJVULBR1WC4L/icons.jpg" data-image-dimensions="2390x981" data-image-focal-point="0.5,0.5" alt="icons.jpg" data-load="false" data-image-id="65e8080b8cedec288bdb67da" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709705229579-VYYMWR0FSJVULBR1WC4L/icons.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1710829035371-EM9515CYYFYB1UMQZSML/ivan-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1710829035371-EM9515CYYFYB1UMQZSML/ivan-2.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="ivan-2.gif" data-load="false" data-image-id="65f92da8a3a96e4a814678cb" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1710829035371-EM9515CYYFYB1UMQZSML/ivan-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1710829013767-K0ONIUWAF12JGNAKP4HX/ivan.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1710829013767-K0ONIUWAF12JGNAKP4HX/ivan.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="ivan.gif" data-load="false" data-image-id="65f92da82e24b169ea2e4c45" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1710829013767-K0ONIUWAF12JGNAKP4HX/ivan.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Alien Ships</h2><p class="">The UI found on the alien ships are drastically different to the human ships, except perhaps for the countdown timer. It’s all about irregular shapes and symbols of varying colours and sizes.</p><p class="">The HUD in the alien cockpit continues this direction nicely. Changing the shapes of the form factor on the main computer and the HUD display also helps build on this visual language of alien tech.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623452956-6KVJOCOZTI8XS0CJXTRV/alien-self-destruct-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623452956-6KVJOCOZTI8XS0CJXTRV/alien-self-destruct-1.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="alien-self-destruct-1.gif" data-load="false" data-image-id="65e6c85d425a2d39de55d49c" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623452956-6KVJOCOZTI8XS0CJXTRV/alien-self-destruct-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623452695-MMX1Z1O4CJT8MYOK6ILY/alien-self-destruct-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623452695-MMX1Z1O4CJT8MYOK6ILY/alien-self-destruct-2.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="alien-self-destruct-2.gif" data-load="false" data-image-id="65e6c85de1d8664d94b24e17" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709623452695-MMX1Z1O4CJT8MYOK6ILY/alien-self-destruct-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709702888996-4BDREQRY8QIRT3MI47SX/zerg-ship.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709702888996-4BDREQRY8QIRT3MI47SX/zerg-ship.gif" data-image-dimensions="800x330" data-image-focal-point="0.5,0.5" alt="zerg-ship.gif" data-load="false" data-image-id="65e7fecb1e6b69502396092c" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709702888996-4BDREQRY8QIRT3MI47SX/zerg-ship.gif?format=1000w" /><br>
                </a>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1709706677598-HYY2QNLHFEPMF16P61T6/img-lightyear.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Lightyear FUI</media:title></media:content></item><item><title>2023 Recap</title><category>HUDs</category><category>GUIs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Wed, 27 Dec 2023 10:42:09 +0000</pubDate><link>https://www.hudsandguis.com/home/2023-recap</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:657edf823182b30fc6c8fafc</guid><description><![CDATA[<figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/7c5400e1-0fbe-466c-af9c-35f4817bd280/images-years-2023.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/7c5400e1-0fbe-466c-af9c-35f4817bd280/images-years-2023.png?format=1000w" width="1180" height="664" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/7c5400e1-0fbe-466c-af9c-35f4817bd280/images-years-2023.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/7c5400e1-0fbe-466c-af9c-35f4817bd280/images-years-2023.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/7c5400e1-0fbe-466c-af9c-35f4817bd280/images-years-2023.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/7c5400e1-0fbe-466c-af9c-35f4817bd280/images-years-2023.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/7c5400e1-0fbe-466c-af9c-35f4817bd280/images-years-2023.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/7c5400e1-0fbe-466c-af9c-35f4817bd280/images-years-2023.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/7c5400e1-0fbe-466c-af9c-35f4817bd280/images-years-2023.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <p class="">That’s another year done, time is flying! We explored some interesting projects this year and uncovered some really thought provoking ideas. We dived deep into some sci-fi and spy genres and explored the future with some brave concept projects.</p><p class="">I say this every year but I mean it every time… I am always blown away by the awesome people who have made HUDS+GUIS such a great project since it’s inception. I’m incredibly grateful for all of you who contributed, created, asked a question, asked for advice, purchased a book, showed support or just stumbled across the site,</p><p class="">HUDS+GUIS could have stopped a long time ago but it’s kept on rolling on thanks to all of you. So a huge thank you from me! Hope you all have a wonderful holiday break, we’ll be back next year after a short rest.</p><p class="">Looking forward to exploring more FUI and future concepts with you all in 2024!</p><p class=""><a href="https://www.jonoyuen.com" target="_blank">Jono Yuen</a></p><p class=""><a href="mailto:info@hudsandguis.com">Send me a message</a></p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/star-citizen-revisited-part-1" target="_blank" aria-label="Star Citizen - UI Revisited (part 1)" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814285475-41UF31R6HBV5RQC5BQGV/img-starCitizen.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Star Citizen - UI Revisited (part 1)" data-load="false" data-image-id="657ee2466a25a9120077f3ea" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814285475-41UF31R6HBV5RQC5BQGV/img-starCitizen.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/star-citizen-revisited-part-2" target="_blank" aria-label="Star Citizen - UI Revisited (part 2)" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814294767-FKLVYG1VJXG7M50CNZKM/img-starCitizen-part2.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Star Citizen - UI Revisited (part 2)" data-load="false" data-image-id="657ee24eab49377b056a7f1c" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814294767-FKLVYG1VJXG7M50CNZKM/img-starCitizen-part2.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2023/apple-vision-pro" target="_blank" aria-label="Apple Vision Pro - AR/VR" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814311372-0994BQ7NKBMXUXEGYQET/img-appleVisionPro.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Apple Vision Pro - AR/VR" data-load="false" data-image-id="657ee25f8d70cc66b0fec729" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814311372-0994BQ7NKBMXUXEGYQET/img-appleVisionPro.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2023/afeela" target="_blank" aria-label="AFEELA EV Prototype" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814320507-Z91WUMYZ8B4TVJGP0H8U/img-AFEELA.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="AFEELA EV Prototype" data-load="false" data-image-id="657ee268333dc77984ec6afb" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814320507-Z91WUMYZ8B4TVJGP0H8U/img-AFEELA.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2023/vegas-sphere" target="_blank" aria-label="Vegas Sphere" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814331074-HVS31ZRHECBHPZR6J7OK/img-vegasSphere.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Vegas Sphere" data-load="false" data-image-id="657ee271471ae01f58315e77" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814331074-HVS31ZRHECBHPZR6J7OK/img-vegasSphere.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2023/mi-rogue-nation" target="_blank" aria-label="Mission Impossible: Rogue Nation" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814344652-C4JUSNS2TOBXP2ZERQV4/img-MI-RogueNation.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Mission Impossible: Rogue Nation" data-load="false" data-image-id="657ee27c93e687054257cb92" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814344652-C4JUSNS2TOBXP2ZERQV4/img-MI-RogueNation.png?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a href="https://www.hudsandguis.com/home/2023/motorola-bendable-concept-phone" target="_blank" aria-label="Motorola Bendable Concept Phone" class="
                    image-slide-anchor
                    
                    content-fill
                  "
                >
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814351655-8MM2WBR6BCAL0V8333LC/img-motorola.png" data-image-dimensions="1180x664" data-image-focal-point="0.5,0.5" alt="Motorola Bendable Concept Phone" data-load="false" data-image-id="657ee289467e4b148d63fc71" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702814351655-8MM2WBR6BCAL0V8333LC/img-motorola.png?format=1000w" /><br>
                </a>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1702816224787-ZBSHDPYG5936FDAXU936/images-years-2023.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">2023 Recap</media:title></media:content></item><item><title>Motorola Bendable Concept Phone</title><category>Future Visions</category><dc:creator>Jono Yuen</dc:creator><pubDate>Thu, 23 Nov 2023 22:58:04 +0000</pubDate><link>https://www.hudsandguis.com/home/2023/motorola-bendable-concept-phone</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:655efe54d184914c4f280017</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/59274312-92c8-4a34-94ab-ddcde1d7e013/img-motorola.png?format=1000w" />


  <p class="">Here’s a look at Motorola’s Adaptive Display Concept, which is essentially a bendable smart phone with interesting features. It’s great to see concepts that explore the use of flexible displays, which has recently become more feasible and affordable. </p><p class="">The best application of the flexible feature that Motorola has shown, is the ability to attach it to your wrist and to stand it up on a flat surface. To take the concept further, it would be great to be able to mount, hook or attach a smart phone to any surface, perhaps if the phone was even more flexible in the future, it would be possible.</p><p class="">In terms of attaching the phone to your wrist, it becomes like a sort of smart-bracelet. It’s quite thick right now but in the future I’m sure it would be plausible to have a thin slap-band version, which would be much more practical.</p><p class="">It’s not the first time I’ve seen this idea presented, but it’s encouraging to see other brands play and evolve on the idea until eventually it becomes a reality.</p><p class="">What do you think? Would you want something like this in the future?</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724762136-EAH5T1MVY6SG3EU9ZWQF/Adaptive-Display-Slab.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724762136-EAH5T1MVY6SG3EU9ZWQF/Adaptive-Display-Slab.jpg" data-image-dimensions="4000x2667" data-image-focal-point="0.5,0.5" alt="Adaptive-Display-Slab.jpg" data-load="false" data-image-id="655f001250f20176d72b33fc" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724762136-EAH5T1MVY6SG3EU9ZWQF/Adaptive-Display-Slab.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724763510-WMRSDUVNNA69WFTWA6FW/Adaptive-Display-tent-2.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724763510-WMRSDUVNNA69WFTWA6FW/Adaptive-Display-tent-2.jpg" data-image-dimensions="4000x2667" data-image-focal-point="0.5,0.5" alt="Adaptive-Display-tent-2.jpg" data-load="false" data-image-id="655f00126eae2905b0e01895" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724763510-WMRSDUVNNA69WFTWA6FW/Adaptive-Display-tent-2.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724773582-S1SNHJXLAN7JO1FEA2JK/Adaptive-Display-tent.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724773582-S1SNHJXLAN7JO1FEA2JK/Adaptive-Display-tent.jpg" data-image-dimensions="4000x2666" data-image-focal-point="0.5,0.5" alt="Adaptive-Display-tent.jpg" data-load="false" data-image-id="655f001b4d4eeb5e8b632919" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724773582-S1SNHJXLAN7JO1FEA2JK/Adaptive-Display-tent.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724776614-CH0D4XAA3K256HGP0CTJ/Adaptive-Display-Upright-Video-call.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724776614-CH0D4XAA3K256HGP0CTJ/Adaptive-Display-Upright-Video-call.jpg" data-image-dimensions="4000x2666" data-image-focal-point="0.5,0.5" alt="Adaptive-Display-Upright-Video-call.jpg" data-load="false" data-image-id="655f001dc3d0775456e277ed" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724776614-CH0D4XAA3K256HGP0CTJ/Adaptive-Display-Upright-Video-call.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724784292-XLBM9395U01ZFC2O5VI9/Adaptive-Display-Upright.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724784292-XLBM9395U01ZFC2O5VI9/Adaptive-Display-Upright.jpg" data-image-dimensions="4000x2666" data-image-focal-point="0.5,0.5" alt="Adaptive-Display-Upright.jpg" data-load="false" data-image-id="655f00272fe34e1c75d5395e" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724784292-XLBM9395U01ZFC2O5VI9/Adaptive-Display-Upright.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724789295-51POQKAVEBPMXOE5K4IC/Adaptive-Display-Watch-2.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724789295-51POQKAVEBPMXOE5K4IC/Adaptive-Display-Watch-2.jpg" data-image-dimensions="4000x2667" data-image-focal-point="0.5,0.5" alt="Adaptive-Display-Watch-2.jpg" data-load="false" data-image-id="655f002aab4ae045ef26d248" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724789295-51POQKAVEBPMXOE5K4IC/Adaptive-Display-Watch-2.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724806844-VSP7A08GTKZZLJ12LIWT/Adaptive-Display-Watch.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724806844-VSP7A08GTKZZLJ12LIWT/Adaptive-Display-Watch.jpg" data-image-dimensions="4000x2667" data-image-focal-point="0.5,0.5" alt="Adaptive-Display-Watch.jpg" data-load="false" data-image-id="655f00310bbe257465275d0b" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724806844-VSP7A08GTKZZLJ12LIWT/Adaptive-Display-Watch.jpg?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724824539-JEHGZA3K07GNA5820AI2/Adaptive-display-wrist.jpg" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724824539-JEHGZA3K07GNA5820AI2/Adaptive-display-wrist.jpg" data-image-dimensions="4000x2667" data-image-focal-point="0.5,0.5" alt="Adaptive-display-wrist.jpg" data-load="false" data-image-id="655f0036cfa2bc772a5fd5de" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700724824539-JEHGZA3K07GNA5820AI2/Adaptive-display-wrist.jpg?format=1000w" /><br>
                </a>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1700725075767-GO3MJP9QSLHFFVRMHWPY/img-motorola.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Motorola Bendable Concept Phone</media:title></media:content></item><item><title>Mission Impossible: Rogue Nation</title><category>Film</category><category>HUDs</category><category>GUIs</category><dc:creator>Jono Yuen</dc:creator><pubDate>Tue, 29 Aug 2023 07:52:37 +0000</pubDate><link>https://www.hudsandguis.com/home/2023/mi-rogue-nation</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:64db2ff17814965907605aee</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/5eb7513d-ef94-47ba-9300-9270cd6ad016/img-MI-RogueNation.png?format=1000w" />


  <p class="">As you would expect from a Mission Impossible movie, there are many examples of sophisticated, innovative and covert gadgets. Let's take a closer look at some of the more interesting ones.</p><h2>Record player</h2><p class="">The video below showcases an interactive display cleverly concealed within the guise of a record player. The base itself functions as a fingerprint scanner, while the glass lid serves neatly as the housing for the display. This embodies a recurring trope within the Mission Impossible franchise: an object assuming the appearance of the everyday, yet hiding a covert secondary function.</p>





















  
  






  <h2>Pamphlet computer</h2><p class="">Here we see another example of a disguised object, this time an opera program that functions as a computer. The scene unfolds as Simon Pegg inserts a USB stick to initiate the computer's startup sequence. This creative concept aligns seamlessly with the narrative.</p><p class="">It's worth noting that Mission: Impossible – Rogue Nation was released in 2015, and remarkably, in less than a decade, this seemingly imaginative idea has transitioned into plausible reality. The evolution of technology, particularly the availability of flexible displays and e-ink, similar to the technology used in Kindle devices, has made this conceivable.</p>





















  
  














































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/deb9424b-03e8-404d-a866-99499fd290db/book.gif" data-image-dimensions="800x335" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/deb9424b-03e8-404d-a866-99499fd290db/book.gif?format=1000w" width="800" height="335" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/deb9424b-03e8-404d-a866-99499fd290db/book.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/deb9424b-03e8-404d-a866-99499fd290db/book.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/deb9424b-03e8-404d-a866-99499fd290db/book.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/deb9424b-03e8-404d-a866-99499fd290db/book.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/deb9424b-03e8-404d-a866-99499fd290db/book.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/deb9424b-03e8-404d-a866-99499fd290db/book.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/deb9424b-03e8-404d-a866-99499fd290db/book.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <h2>Car lock</h2><p class="">This is an interesting idea whereby someone can unlock a car door just by putting their hand against the window and using fingerprint recognition to unlock it. The appeal of this approach lies in its swiftness, sparing the need to search for keys, and its user-friendly simplicity.</p><p class="">Yet, on the flip side, there's a major vulnerability. The possibility of someone forcibly unlocking another person's vehicle raises serious concerns about security. Additionally, practical factors come into play. The system might encounter challenges when windows are unclean, such as when a vehicle is parked beneath a tree teeming with birds.</p><p class="">Nevertheless, the underlying concept remains undeniably captivating.</p>





















  
  






  

  



  
    
      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1692087913699-3TYLWAH58VAZB7OBU1XR/carlock-1.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1692087913699-3TYLWAH58VAZB7OBU1XR/carlock-1.gif" data-image-dimensions="800x335" data-image-focal-point="0.5,0.5" alt="carlock-1.gif" data-load="false" data-image-id="64db35b4fc9a3302f2e75b2b" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1692087913699-3TYLWAH58VAZB7OBU1XR/carlock-1.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      

        

        

        
          
            
              
                
                <a data-title="" data-description="" data-lightbox-theme="dark" href="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1692087809858-IE9BNPD6DGJ25BE4R64Y/carlock-2.gif" role="button" aria-label="" class="
                    image-slide-anchor
                    
                      js-gallery-lightbox-opener
                    
                    content-fill
                  "
                >
                  
                    <span class="v6-visually-hidden">View fullsize</span>
                  
                  <img class="thumb-image" elementtiming="system-gallery-block-grid" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1692087809858-IE9BNPD6DGJ25BE4R64Y/carlock-2.gif" data-image-dimensions="800x335" data-image-focal-point="0.5,0.5" alt="carlock-2.gif" data-load="false" data-image-id="64db35b42c5a37757f93d4c0" data-type="image" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1692087809858-IE9BNPD6DGJ25BE4R64Y/carlock-2.gif?format=1000w" /><br>
                </a>
                
              
            
          

          
        

      
    
  

  













  <h2>Wetsuit UI</h2><p class="">Here’s a great concept for a display tailored for use underwater. In this concept, the UI is integrated into the very fabric of the wetsuit. This is a clever application particularly with its potential utility in specialised scenarios like cave diving and scuba diving.</p><p class="">Consider its potential in aiding underwater navigation. By seamlessly incorporating crucial directional cues into the wetsuit itself, this concept could offer an intuitive solution for maintaining orientation beneath the waves.</p><p class="">This becomes particularly relevant in situations like cave diving, where divers encounter difficulties in determining their direction due to poor visibility caused by the disturbance of sediment or silt in the water, often called silt-outs. With the UI embedded into the wetsuit, the diver could receive real-time guidance, swiftly correcting their sense of direction, enhancing their ability to navigate accurately and possibly saving their lives. Better still it could be incorporated as a HUD on the scuba mask.</p>





















  
  














































  

    
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/803af484-7e9c-463d-bbc2-aa01f98448c0/oxygen.gif" data-image-dimensions="800x335" data-image-focal-point="0.5545851528384279,0.773098269670258" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/803af484-7e9c-463d-bbc2-aa01f98448c0/oxygen.gif?format=1000w" width="800" height="335" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/803af484-7e9c-463d-bbc2-aa01f98448c0/oxygen.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/803af484-7e9c-463d-bbc2-aa01f98448c0/oxygen.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/803af484-7e9c-463d-bbc2-aa01f98448c0/oxygen.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/803af484-7e9c-463d-bbc2-aa01f98448c0/oxygen.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/803af484-7e9c-463d-bbc2-aa01f98448c0/oxygen.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/803af484-7e9c-463d-bbc2-aa01f98448c0/oxygen.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/803af484-7e9c-463d-bbc2-aa01f98448c0/oxygen.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <h2>Mask sequence</h2><p class="">Synonymous with the Mission Impossible franchise is, of course, the mask sequence. Here is a great example of FUI being used to sell and explain a concept — in this case, utilising facial analysis to 3D print a mask. The entire process is succinctly portrayed within a mere 10 seconds of film.</p>





















  
  






  <h2>Briefing sequence</h2><p class="">There is also an example of a briefing sequence that is clear to read and to the point, aiding in advancing the plot.</p>





















  
  






  <p class="">This was a fun film filled with interesting gadgets. Look forward to seeing more from Mission Impossible!</p>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1692088965669-KGAK86FX1QULFQCU386J/img-MI-RogueNation.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Mission Impossible: Rogue Nation</media:title></media:content></item><item><title>Vegas Sphere</title><category>Practical</category><dc:creator>Jono Yuen</dc:creator><pubDate>Tue, 25 Jul 2023 07:56:58 +0000</pubDate><link>https://www.hudsandguis.com/home/2023/vegas-sphere</link><guid isPermaLink="false">5438bd1be4b0446f6692b906:544d83e9e4b05a6814bdc4e3:64afacb6812414558111e67e</guid><description><![CDATA[<img data-load="false" data-image-focal-point="0.5,0.5" src="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/d268b11a-e01b-4738-a2dc-d4ba3652e785/img-vegasSphere.png?format=1000w" />


  <p class="">Here's a quick look at the <a href="https://www.thespherevegas.com" target="_blank">Vegas Sphere</a>, officially known as Sphere at The Venetian Resort. It's a massive dome that spans 366 feet tall and 516 feet in diameter and claims to be the world's largest video screen with its 580,000 sq ft fully programmable LED screen called the Exosphere.</p><p class="">It's an eye-catching and impressive structure that is built to host a wide range of events from concerts and live performances to sporting events and corporate conferences.</p><p class="">From a FUI point of view, the idea of a future where buildings project visual content on their exteriors is quite interesting. This concept could morph urban landscapes into living canvases, potentially redefining advertising, architecture, and the design of public spaces.</p><p class="">It makes you wonder whether it enhances the cityscape, turning it into an interesting mix of art and technology, or if it might cause sensory overload and encroach on the tranquility of urban life.</p><p class="">Additionally, it's interesting to recognize that we're moving away from traditional flat screens and embracing immersive mediums like VR and displays such as the Exosphere. It will be fascinating to see what else becomes available and how this revolutionizes the way we create and absorb content.</p>]]></description><media:content type="image/png" url="https://images.squarespace-cdn.com/content/v1/5438bd1be4b0446f6692b906/1689835501806-4YGXZCT61GLOQMGT0WQ0/img-vegasSphere.png?format=1500w" medium="image" isDefault="true" width="1180" height="664"><media:title type="plain">Vegas Sphere</media:title></media:content></item></channel></rss>