DIY UI, Part 2: Extracting Assets from UI Kits
Introduction: Welcome back! In the first post in this series, we delved into the world of DIY UI design for embedded systems and introduced the concept of using off-the-shelf UI Kits and Element Packs. Today, we're taking the next step in this journey. You've chosen your UI Kit, and now it's time to extract the assets you need to create a cohesive and visually stunning user interface. This blog will focus on two popular types of UI Kits: Photoshop documents (.psd) and Figma files (.fig). We'll cover the essentials of working with these files, ensuring you can efficiently and effectively extract the elements needed for your embedded systems project. Getting Started with .psd UI Kits: Opening the Kit: While Photoshop is a widely used standard of the design industry, it may not be acceptable for a myriad of reasons. There are several free or cheap alternatives, but Photopea.com has become my editor of choice when I need photoshop effects and filters, i.e. the fancy stuff that makes it look professional. When choosing your editor, make sure the opened file looks just like the website preview and that you do not need to flatten or merge any layers upon opening the file. Left: .psd imported into Photopea. Right: Watermarked preview from CreativeMarket.com Exploring Layers and Groups: The best .psd UI Kits are like well-organized filing cabinets, with each layer and group neatly labeled and structured. Start by familiarizing yourself with the layers and groups in the file. There should be logical hierarchy, making it easy to locate the elements you need. Look for layer groups named "Buttons," "Icons," "Backgrounds," etc. This organization is your map, guiding you through the design assets. Customizing Elements: Before extracting, you may want to customize certain elements to match your project’s theme. Change colors, adjust sizes, and tweak designs as necessary. For instance, if you have a button that needs to be a different shade to match your brand’s color scheme, now is the time to make those adjustments. If you are new to these tools there is a large user community out there to help with video tutorials. Still uncomfortable? Check out our Design Services. Removing Embedded Text: Most UI Kit files come with text layers that you might not need but are there to provide examples of what it could look like and offer a suggested font that pairs well with the design. To ensure the elements are ready for use in your embedded system, you will either need to remove any embedded text layers or create duplicate copies of each item for all possible labels, including any translations. It might seem like a no-brainer to remove the text, but that is not always the case. This choice might depend on the effects used on the label itself, such as glowing letters. Also note that many embedded systems do not have the full suite of text editing features that you have in graphic design tools, so dynamic text may not look as good as the text shown in the .psd file. Exporting Elements: Once you've customized
Boosting Bytecode Efficiency: The Power of GCC’s Label as Value
GEMscript and Virtual Machines If you've been using GEMstudio, you’re probably familiar with our programming language, GEMscript. We designed GEMscript to be a user-friendly, C-like language with the intention of enabling a “write once, run anywhere” approach. This means it can be used seamlessly across all our platforms, including GEMplayer on PC and various hardware devices. GEMscript is a VM (virtual machine) based language, meaning your code gets compiled into "bytecode" and runs in a VM interpreter instead of being compiled down to native machine code. This allows us to achieve our goal of running the same compiled code across multiple platforms. Additionally, by sandboxing GEMscript from our OS in a VM, we avoid some pitfalls of writing in native C, such as unsafe memory access and code execution. However, there’s a big trade-off when using VMs: speed. It's no secret that VMs are generally slower than native machine code. Therefore, optimizing VMs is crucial, particularly for limited hardware where every bit of speed counts. So, I rolled up my sleeves and started exploring ways to optimize our code. And guess what? I found a neat and easy trick for speeding up opcode dispatch. This article discusses the performance improvements I achieved by optimizing opcode dispatch in GEMscript using GCC's "Label as Value" feature, demonstrating a significant speed increase. Enhancing VM Performance: Speeding Up Opcode Dispatch When I started looking at our VM, I realized that focusing on opcode dispatch could yield significant performance gains. Efficient opcode dispatch is key to faster execution because it reduces the overhead of interpreting each instruction in the VM. Let me put this in simpler terms: Imagine you’ve got a list of vocabulary words to study. One way to do this is by using the index at the back of a dictionary. For each word, you: Look up the page number in the index. Flip to the correct page to read about the word. Return to the index for the next word. Doing this for each word is straightforward but slow and tedious. Now, imagine using index cards with all the vocabulary words printed in order. For each word, you: Read the information on the top index card. Move instantly to the next card. No more flipping back and forth! This method is much faster and more efficient, even though it takes a bit of effort upfront to set up the index cards. Similarly, by optimizing our opcode dispatch, we can make our VM run instructions more quickly and efficiently. The Basics of VM Interpreting Let’s start with a basic interpreter loop for a VM, which is similar to using the dictionary index method. Instead of a list of vocabulary words, we have bytecode, which is a list of opcodes in memory. Instead of searching an index for the correct page, we use a switch statement, with each opcode case representing a different operation. This switch case is in a loop, so we repeatedly look for our current opcode and execute it until we run out of opcodes. Here’s a simple example in C: void runVM(){ uint32_t pc
Beyond Usability: How Aesthetics in UX Design Foster Brand Loyalty and Intuitive Experiences
In the realm of User Experience (UX) Design, aesthetics extend far beyond the mere appearance of a product. They encompass the overall sensory experience a user encounters when interacting with a digital interface. This includes the layout, color scheme, typography, and imagery that collectively evoke an emotional response. Aesthetics in UX design play a pivotal role in the digital landscape, as they significantly influence user engagement, satisfaction, and, ultimately, the success of a product or service. This article will shed light on the importance of aesthetics in UX design, setting the stage for a deeper exploration of how aesthetic elements contribute to an enriching user experience that goes beyond basic functionality. Beyond Functionality: Aesthetics in UX While functionality addresses the practical aspects of user experience, ensuring that a product or service operates smoothly and efficiently, aesthetics elevate this experience to a more profound, emotional level. The distinction between usability and aesthetic experience lies in the engagement and satisfaction derived from the visual and sensory aspects of a design. A well-crafted aesthetic not only complements functionality but can also enhance it by making interfaces more intuitive and easier to navigate. The contribution of aesthetics to usability is multifaceted. For instance, a cohesive color scheme can guide users effectively through a website, highlighting important elements like calls-to-action and navigation buttons. Similarly, the use of typography and white space can improve readability and reduce cognitive load, making information processing more effortless for users. This symbiotic relationship between aesthetics and functionality illustrates how aesthetic elements are integral to creating a seamless and enjoyable user experience. By blending form with function, designers can craft interfaces that are not only efficient but also emotionally resonant, fostering a deeper connection between the user and the product. Emotional Connections Through Aesthetic Design The psychology of aesthetics in UX design is rooted in the emotional responses elicited by visually appealing interfaces. Aesthetic designs can evoke feelings of pleasure, satisfaction, and even delight, thereby transforming a mundane interaction into a memorable experience. This emotional engagement is crucial for user retention and satisfaction, as users are more likely to return to products that provide not only functional solutions but also positive emotional experiences. The emotional connection fostered by aesthetically pleasing designs not only enhances the immediate user experience but also has long-term impacts on user engagement and loyalty. As users form emotional attachments to products that resonate with them on a personal level, they are more likely to advocate for and remain loyal to these brands. Aesthetics Impact on Brand Perception and Loyalty The aesthetic elements of a product or service significantly shape the initial impressions users form about a brand. These first impressions are critical, as they can set the tone for the user's entire relationship with the brand. An aesthetically pleasing design can convey professionalism, reliability, and attention to detail, attributes that positively influence brand perception. Brand identity is closely tied to its visual and interactive elements. Consistency in aesthetics across all touchpoints — from the website to the app, and even to offline materials — helps reinforce brand identity,
Unlocking Superior HMI Design: Simple Strategies to Elevate Your HMI Game
In the realm of embedded firmware engineering, creating a product that not only functions flawlessly but also boasts a superior Human-Machine Interface (HMI) is a challenge worth embracing. For engineers with advanced technical experience but limited exposure to User Interface (UI) and User Experience (UX) design, differentiating your HMI from the competition may seem daunting. Fear not – in this guide, we'll explore practical strategies to set your HMI apart without delving into the intricacies of UI/UX design. 1. Start with User-Centric Functionality While your focus may be on your product's technical intricacies, it's essential to approach HMI differentiation from a user-centric perspective. A notable quote from Marc Gobe’s book Emotional Branding is, “The question for designers should not be, how do we make this product work? That’s a given- the only question is how do we make this product worth working with?” Identify the key functionalities that resonate with your target audience and ensure your HMI prioritizes a seamless user experience. This approach could involve simplifying complex processes, streamlining workflows, or offering unique features directly addressing user needs. 2. Leverage Pre-Built Templates and Design Tools UI/UX design may not be your forte, but you can still benefit from existing design resources. Look for HMI solutions that offer pre-built templates and user-friendly design tools. These resources can help you create a polished and professional interface without the need for extensive design expertise. Check out our article on using UI kits and how they can help supplement your design process. 3. Prioritize Customization Without Complexity Differentiation often lies in customization. Offer users the ability to tailor their HMI experience without overwhelming them with complexity. Allow straightforward customization options, such as choosing color schemes, arranging widgets, or adjusting display preferences. This customization empowers users to personalize their experience without requiring advanced design skills. 4. Integrate Advanced Functionality Thoughtfully While advanced technical features can set your HMI apart, thoughtful integration is critical. Avoid overwhelming users with a myriad of complex options. Instead, focus on implementing advanced functionalities that enhance the user experience without sacrificing simplicity. Provide clear documentation and support to help users leverage these features effectively. 5. Continuous Improvement Through User Feedback Even without a UI/UX design background, you can continually enhance your HMI by actively seeking user feedback. The most surefire way to ensure your product's HMI wins market viability is to start the design process with user feedback and testing. The product teams with a test early and often mentality are the most successful at producing a top-notch product and saving the company money on costly redesigns. Establish channels for users to share their experiences, suggestions, and pain points. Use this feedback to make iterative improvements, ensuring your HMI evolves based on real-world user interactions. Embrace the Power of User Experience Design For engineers accustomed to intricate technical controls, bridging the gap between complexity and simplicity in your HMI is crucial. Enlist the expertise of a user experience designer to help facilitate the user's needs, create intuitive navigation and controls that are easy for users to understand and
Designing Cohesive User Interfaces for Embedded Systems – A DIY Approach
The Challenge for Engineers: As engineers, our primary focus is on functionality and performance. We thrive on solving complex problems and pushing the boundaries of technology. But when it comes to UI design, we often find ourselves out of our depth. You want it to be intuitive, visually appealing, and seamlessly integrated with your project. This type of design requires a different set of skills - skills that many of us simply don't possess. The best results are usually going to come from a professional User Experience and User Interface Designer. It is difficult to replace the benefits of a highly skilled graphic designer, but the cost of hiring one can be out of reach for smaller projects or hobbyists. And relying on random images sourced from the depths of the internet is like navigating a minefield, with the constant risk of running into copyright issues for products that will be sold, or ending up with a mishmash of styles that detract from the overall user experience. Fear not, fellow engineer! I'm here to introduce you to a game-changing solution: DIY UI design using off-the-shelf "UI Kits". These collections of professionally designed images with a common theme are the secret weapon to create a cohesive and visually stunning UI for your embedded systems project, without breaking the bank or risking legal troubles. Why DIY?: Now, let's talk business. As a company, your bottom line is always top of mind. So, why should you consider DIY UI design for your embedded systems projects? It's simple: time and money. When you opt for DIY UI design using off-the-shelf UI Kits, you're not just saving on upfront costs compared to hiring a professional designer. You're also saving valuable time. Time that would otherwise be spent searching for the perfect images, negotiating licenses, or waiting for a designer to deliver the goods. And as we all know, time is money. The quicker you can iterate on your HMI, the quicker you can get your product to market. And in today's fast-paced business landscape, speed is everything. By embracing DIY UI design, you're streamlining the design process, giving you more time to focus on the core competencies of your product and staying ahead of the competition. But it's not just about speed. It's also about control. With DIY UI design, you have control over your UI, from the layout to the functionality. You're in the driver's seat, able to make changes on the fly and pivot as needed to meet the ever-changing demands of your customers and market, all without breaking the bank. It is important to note that DIY UI design is not a substitute for the most crucial part of the design process, which is the User Experience. UI kits are exceptionally well made, and are usually up to date with the current trends in visual design, but these features do not guarantee an experience that is optimized for your user which will result in costs down the road to fix. In fact using UI kits may prove to be limiting in many