for Logical Position
Logical Position is a digital marketing company specializing in SEO and digital advertising.
UI Design
Documentation
Worked alongside our UX designer
In general, I follow a typical design thinking process with the end goal of create beautiful and functional designs that perfectly align with user needs and business goals.
I learn about the problem, the users, and the business goals. Once I’ve defined the problem statement and gathered all the data I can from stakeholders and the project brief, I start mapping out a strategy.
I start working on the building blocks of the concept. This could be playing around with color, type, sketching visuals, or experimenting with flows and wireframes. Getting early feedback is essential at this phase.
After gathering feedback from the initial proof of concept, design decisions are applied and prototypes or models are created. This is where the magic happens! Especially in visual design.
Once the design is complete it’s time to reflect on performance and optimize for the future. Learning is the best part of design. It’s where great ideas are tested and improved.
Context
Over the years Logical Position used and created many different icon styles on its website, tools, and other applications, creating a disconnected brand image. In addition, many of the icon options were not tested or designed to be accessible, especially at smaller sizes.
Design a set of icons that are clear, consistent, scalable, and would reflect the brand in an accessible and cohesive way.
Create a template for future icons to be designed.
Document design process and usage guidelines.
Discover & explore
Before doing any visual design, I did research on best practices for icon creation to ensure clear usability, consistency, and scalability.
To get a full picture of how many icons needed, I did an inventory of Logical Position’s website, internal tools, marketing materials, and discussed future needs with our UX designer who would be using the icons on the company dashboard.
I also dove into Material Design, IBM, and Atlassian’s icon design documentation and guidelines to inform my design decisions.
Icons should be built using a consistent grid at 100% to ensure pixel perfect visibility.
While many aspects of icon design are the same across the board the anatomy components of the icon, like the curves and shapes, are what can make the style unique to your brand.
Outlined icons can be harder to identify if proper spacing and line size are not used.
150 icons will be needed in the MVP list to cover icons used on current applications plus key addition icons for the new company dashboard.
Discover & explore
Drawing from the foundations of Material Design, I began mapping out the framework. Knowing that the anatomy would be the important elements to style, and to align with the company brand, I started sketching and doing simple mock-ups of a few icons applying different style elements.
Discover & explore
After looking at sketches, the design grid, corner radius, stroke weight and end caps, color, spacing, and bounding were defined to align with Logical Position’s visual brand. The goal was to create icons that were lighter and softer in appearance. In addition, to ensure icons were recognizable, they would follow established patterns of recognizable icons and more literal representations.
Outlined icons were chosen as the primary style over filled icons. They created a much lighter feel to the icons and provided more opportunities to make them more unique within the stroke styling. Solid icons were created in conjunction for certain interface icons that would be needed for an “on” and “off” status.
A 2px stroke would be used for the best balance between clarity and readability.
Rounded end caps would give the icons a softer feel.
To ensure the lighter and softer feel, rounded corners would be used.
Depending on the angle of the corner, a different pixel radius would be used. This variability in the corner radius was chosen to ensure that the icons would feel soft but not so rounded that each shape begins to look the same.
Execution
The design template was made with a 24×24 artboard. The artboard displayed the pixel design grid at 100% to ensure pixel perfect clarity while designing.
Within the grid the basic shape guides (square, circle, and rectangle) were placed to help maintain consistent shapes and sizes within all the icons. Each icon would be designed starting with basic geometric shapes.
Execution
With the list of icons needed and the template created it was time start building out the icons. Each icon was designed, exported as PNGs and SVGs, and then added into the company design system.
I built out the icons by category then sent them to our UX designer for testing and any feedback before the final files were exported.
The entire build out of icons included 16 categories with 187 icons.
Execution
In the beginning stages I was given an image that showed the inspiration for the brand styling, which included a mock-up of the logo wordmark.
You can see the usage of the icons is different between the two examples below. On the website (right), the icons are used as more supporting imagery. They use a larger size and can be more interpretive vs. literal. On the dashboard (left), the icons serve a more functional purpose. They are used for navigation and guidance for the user.
Execution
After getting the architecture and flow down I started building out the components that I would need.
In the beginning stages I was given an image that showed the inspiration for the brand styling, which included a mock-up of the logo wordmark.
In the beginning stages I was given an image that showed the inspiration for the brand styling, which included a mock-up of the logo wordmark.
c 2024 thehamerdesign.com All Rights Reserved