7 Free Resources for Embedded UI Design

Terry West
Terry West has over 25 years experience building new embedded technology businesses at Intel, Microchip, and RIM. As the first employee of RIM in 1988, Mr. West fueled the early growth of RIM while developing the technologies and customer relationships leading to the RIM BlackBerry. At Intel, he managed an XScale® (ARM) processor internal startup from first shipment to $85M run-rate in less than 3 years, led a $300M acquisition for the company, and developed and marketed numerous software+silicon+tools platform technologies for the embedded market. Recently at Microchip, Mr. West launched their flagship line of 32-bit microcontrollers and directed a comprehensive re-engineering of their global customer-facing marketing presence.

7 Free Resources for Embedded UI Design

Designing an embedded HMI’s User Interface (UI) and User Experience (UX) can be a daunting task. We hate that the old adage is true: Engineers make great musicians, not so great graphic designers. Just because we are engineers doesn’t mean that all hope is lost. We’ve compiled seven free resources to equip you and your creative team (if you’re lucky enough to have one), with an arsenal to leverage when drafting your UI design.

1. Color Swatches

A challenge often faced by developers creating their own UI designs is how to either select their color scheme or properly translate their companies brand colors onto an embedded system which is often far less capable than a modern computer or mobile device.You may now be wondering how to select an LCD friendly color swatch that closely matches brand colors. Google has a beautiful library of module LCD-friendly color swatches to choose from. Marketing teams can provide developers with Google Color Swatch hex codes that most closely match brand colors. This reduces coding/development time in color translation by preventing weeks of choosing and testing hex codes by trial and error. If there’s one rule we want you to remember, it’s our most important one; “utilize turnkey resources whenever possible.” It will spare you from going down numerous rabbit holes.
  • Developers & Engineers: Once you have your team’s color hex code preferences, you can apply those to your GUI development in SHIPTide. We’ve got more information on that here. Don’t have a team of UI designers? We can help. Contact us to request free mockup of one of your product screens.
  • Marketing Teams: Need ASE files for your Adobe Illustrator of Photoshop design files? Download them here.

2. PLACEHOLDER ICONS

Icons are the name of the game for intuitive UI design. However, don’t jump the gun and purchase Icons you may not need until later in the process. Instead, we recommend you download the Material Design Icons set (also provided by Google) to use as placeholders. Download icons in either white or black and use them as the placeholder for your UI development. Search for a specific action or use case here.A special note about Icons: There is a license note provided for Google Icons. If your legal team deems this acceptable for continued use in your product – follow their instructions.However, we recommend, that to protect your team and product, you engage in a small custom icon project with a graphic designer. This short-term project will save you many headaches downstream. Using your sample icons for what you’d like to use, and some others for design style preferences, you’ll be equipped to provide them with a strong design brief. Need help with this? Contact our team. We can help.

3. Royalty-Free Stock Photos

In need of great stock photos but don’t know where to start? We recommend using royalty free stock photos as early draft placeholders (or if your budget is small – as final photos). Once you have a final approach to the design approach, you can purchase other stock photos (if this is your marketing team and budget preference).The following are just some of our favorite royalty free stock photo sites: Note: We caution you to ensure your legal team reviews the license requirements before final GUI phase.

4. Free GUI BUilder

We can’t help but brag about our free graphic user interface (GUI) builder tool – SHIPTide. It’s specifically designed for developers, enabling them to completely specify all aspects of the user interface (UX, UI, layout, events, actions, and resources like fonts, images, hex codes, etc).Enjoy the benefits of quickly deploying testing of GUI architecture through this free software. Download here.We also provide a free arsenal of training videos for your use. Go ahead, we dare you not to try it.

5. Open Source & Multi-Language Fonts

We love quality open source resources that are intuitively built – so we may appear a little biased. You’ll understand why in a minute. Fonts can be a worrisome topic. While marketing teams enjoy the tailored look of a purchased font – those fonts are not open to thousands plus product uses and often come with heavy licensing restrictions. The alternative is to make a major investment in a custom, royalty free font. After we picked our jaws off the floor in that endeavor with our clients, we recommend the use of an existing resource: Google Noto Fonts.Our current favorite is the Noto Sans Display Condensed. We love how any of these fonts are responsive to language changes. Therefore, allowing you to scale the lifetime of your GUI with small layout tweaks in the future. Excited? Go ahead, download the full package here (warning, direct download).

6. PINTEREST – YES, YOU HEARD US RIGHT

After you stop laughing at our recipe pins, we want to encourage you to look at our UI Design Boards here. Pinterest can allow you and your creative team to quickly share inspiring product samples using leading UI design.We dare you not to copy our pins. In return, we won’t tell your colleagues about the lasagna recipe you’re about to pin as well.

7. FREE ILLUSTRATOR TEMPLATE

We’ve created UI templates to inspire you to leverage the above mentioned free resources. Quick here to download the right size illustrator file for your product module.

A Serious Tip for the Thoughtful Engineer

Don’t feel like you have to go it alone. Have more UI or UX questions about your product? We can help! Contact us .

Interested in accelerating your UI Design?

We can help! Our team of developers and graphic designers can become an extension of your own team – allowing you to move quickly and efficiently. Contact us to get started.

3 Pillars of Embedded Innovation

Three pillars of innovation – communications, control, and human machine interface (HMI) – drove a consumer device revolution.
How are these affecting the embedded systems you design?

Are we Doomed to be Integration Engineers?

Developers are between a rock and hard place managing increasing design complexity and are turning to off-the-shelf hardware and software ingredients. Are we doomed to become integration engineers?

The Top 3 Problems Holding Back Embedded Systems Engineering

Most embedded system developers don’t realize it, but they have three mindset problems that are preventing them from getting to market faster and decreasing their engineering costs: customization,
starting out too low-level, and believing that all software should be free.

How to Scope Your First HMI Project

HMI developer often under estimates the total extent of what is necessary to successfully pull off the project. In this post, we will examine what is necessary to scope your first HMI project and make it a success.

The Siren’s Call of the Pseudo Platform

An LCD and touch screen are certainly important, outward facing factors of a Human Machine Interface (HM). But behind the scenes, there is much more to a display module than meets the eye — it’s is a highly integrated real-time embedded system tuned to efficiently interact and communicate with its environment.

The Anatomy of a Display Module: Software

there is a lot of software that is used to get a Human Machine Interface (HMI) display module up and running. To compete in today’s fast-paced and competitive market, can you leverage an existing display module to accelerate your development cycle and beat the competition to market?

The Anatomy of a Display Module: Hardware

An LCD and touch screen are certainly important, outward facing factors of a Human Machine Interface (HM). But behind the scenes, there is much more to a display module than meets the eye — it’s is a highly integrated real-time embedded system tuned to efficiently interact and communicate with its environment.