January 10, 2017
It is tempting, easy and quick to grab a “free” icon or icon set off the internet. If you want to use one of those icons just understand it is most likely being used on several other apps or websites. I do not have any issues with using the common trash can icon or pencil edit icon that most users understand the function of. What I am talking about is using the icons found on sites for anyone to download, to tell your visual story or help with the user experience. At PointSource, we believe designing custom icons are as important as designing the user experience. Designing custom icons are not only for telling a visual story but for added functionality and/or building identity of a product.
Why is it important?
First, it is hard to find the right icon and/or set of similar icons to be used throughout a design. As with UX designers working to create a unique user experience, eye-catching custom icons are a great way to capture your user’s attention. Visual elements such as icons should be congruent with each other and the visual narrative flows. Designing icons and working them into the user experience helps break up large amounts of content. Well-designed icons add to the experience, help direct users through an application or website, create scannable sections and give the app or website personality.
From sketch to final icon process
The design team at PointSource has several approaches when it comes to designing icons. Each designer has a slightly different approach but overall we go about it the same way. We start by working with the UX designers to identify places to simplify a user experience or solve a user task through icons. Next, we research how others have solved similar problems, look at the latest UI trends for inspiration and gather the brand’s visual identity if one exists. If a product does not have a clear visual identity we may need to work further with the client to establish one for the product. After we have done our research and concepted with our UX designers, (we call it at PointSource “Co-Designing”), we may continue sketching out our ideas or start roughing out the icon design in Sketch or Adobe Illustrator. Once several rough designs have been completed, we put the designs into lightweight A/B testing to ensure the meaning, story or function is clear to a user. After the testing process has been completed we make revisions and start the final icon design or icon set designs.
As a PointSource designer, we use many different tools to get to the final design. Often, we use a good old pencil, paper and sharpie. Programs we use are Sketch App, Adobe Illustrator and icomoon for importing svg’s to create our custom icon sets for our development team to use.
If the icon or icon set is designed correctly and tested correctly you will end up with a product that is not only visually stunning but also functional. At PointSource we test everything, work collectively and help each other work through tough design problems. As a result, we are able to provide the best possible product for our clients and their users.