Author: Terry West

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:

• Unsplash: https://unsplash.com/
• Stockpic: http://stokpic.com/
• Kaboompics: https://kaboompics.com/
• Startup Stock photo: http://startupstockphotos.com/
• Freerange: https://freerangestock.com/#
• LibreShot: https://libreshot.com/
• Pexels: https://www.pexels.com/
• Foodiesfeed: https://www.foodiesfeed.com/
• Splitshire: https://www.splitshire.com/

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.