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:- 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/