A system of icons developed from a UX perspective
A family of icons (as a system) is a key element for every user experience. A consistent and compelling iconography always adds significants and values to the product.
A family with a purpose
An example of a subsystem of icons specifically created to be part of a product belonging to a brand.
Grid + Modular generation system
The icons were developed from a family of shapes and modules.
This system of weather icons was created from the modular+grid design system.
Legibility. All shapes and lines are perfectly balanced and spaced.
Examples on the SERP page.
The logo as a starting point
One of the best ways to generate a consistent family of icons is to base them on the same morphology.
The logo and its derivatives
Inverted version. Created to perfectly work on both contrasting backgrounds.
Category icons. Applied to the SERP page.
Photographic weather icons
The Ask.com's Weather Team wanted to create a new set of icons as part of their product strategy. The search engine needed graphic elements that would improve, not only the user experience design, but also the branding experience as a whole.
Brainstoming + Benchmarking: As on every design job, the research stage is essential. We must consider competitors & inspirational styles. Here's a selection of those examples that I found inspiring.
Creating an icon
On some icons I started from square one. In other cases, some retouching of existing images was required.
Complete set of icons
The final destination of this set of icons, was the SERP on all platforms.
On iPhone. UI Design prepared for smartphones.
Conclusions / Solutions
I developed a set of weather icons in a variety of styles. The photo-realistic ones were the prefered choice, after usability studies conducted by the company determined so. The most interesting aspect of this project was being able to fuse my experience as a photographer with the need for a realistic approach in our design.
A uniform system, or a subsystem of icons is always designed with the same criteria used for all other modules and elements on the site. A modular, or any other systematic way of ideation, ensures a solid construction basis for new icons needed by designers seeking quick and consistent experiences.
- Typography Typography + Iconography
- web designs Web Design
- Interactive Design + Usability Interactive Design + Usability
- Information Architecture Information Architecture
- Ideation & Conceptual Development Ideation & Conceptual Development
- Creative Suitecase Creative Suitecase Ninja
- Business Business Understanding
- Projects Projects & Small Teams Leading