The tremendous thing about our GIS community is that we all love to share. We really do... Whether we share our Apps, Data & Content, our thoughts and findings via in-depth blogs, or by giving advice/feedback on a forum.
In the spirit of sharing, I wanted to give you an extensive list of UI Freebies, these should allow you to enhance your apps and customise your products.
Icons
When it comes to Web and Mobile App UI design, one of the most time-consuming tasks an interface designer will have to accomplish is creating a consistent collection of icons or glyphs that complement the design of the UI.
Thankfully, there are many professionally designed, ready-made icon sets freely available to use in your maps and applications.
Here you will find hundreds of free icons, covering many design styles and trends that are sure to match your idea, including flat design, Material Design, line-style icons, block-styles, icon fonts, mobile icons (iOS & Android), and maybe even a few old school skeuomorphic sets.
The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64.
* Flaticon does require attribution for each resource.
77,600 Free Flat Icons in any format, size and color in 20 seconds.
Carefully crafted vector icons, perfect for use in your next project, as a web component or font or as SVG's.
Freepik is a huge resource with a lot more than just icons. You’ll certainly find plenty of beautiful icons here and, as the name suggests, for free. Note, Freepik does require attribution for each resource.
Fonts
Maybe you’re looking for a sans-serif font for that special project that needs it ‘just-so’. Perhaps you feel a handwriting font would be perfect for that custom Story Map you’re creating. Or you need a headline-grabbing serif web font for a bespoke application you’re building.
Making the web more beautiful, fast, and open through great typography.
Hand selected typefaces that are 100% free for commercial work
CSS
Where HTML elements give a web page structure, CSS (Cascading Style Sheets) controls how those HTML elements are presented on that web page. A style sheet can be applied to any web page and makes it much easier to edit and manage the appearance of a site.
CSS3 is the latest version of CSS and includes many powerful features and properties that give web designers & developers more control over a web page or application.
Here you will find articles, tutorials, snippets and collections - covering almost all areas of CSS and CSS3.
Leaders in online education and learning to code, they've taught over 45 million people using a tested curriculum and an interactive learning environment.
Thousands of free tutorials and online courses to help you learn web design.
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.
Tips, Tricks, and Techniques on using Cascading Style Sheets.
CodePen is a social development environment for front-end designers and developers. It's the best place to build and deploy a website & then show off your work.
Need help using any of the resources in your projects?
I hope you have enjoyed reading this post and want to learn more! If you would like to discuss how any of these resources can be incorporated into your ArcGIS app & projects, feel free to contact our UX team via ux@esriuk.com.
Happy building!
