top of page
Portfolio-v4Icons-set.jpg

ROSALIND Platform Iconography

In order to maintain a clean and consistent image of the platform, I created a family of icons to be used as part of ROSALIND'S main navigation. This project called for a visual language to represent areas of the platform that are of a higher work-domain complexity, i.e, experiment setup, proteomics analysis, and genome tracking. It was important to create a set of distinct and clear icons to represent these features that are unique to the platform.

Portfolio-v4Icons-set.jpg
Portfolio-v4Icons-NavigationMockup.png

This mockup demonstrates how the icons might look when arranged in a megamenu. The addition of the item titles and a short description was made with the intention of further clarifying the navigation and the icon's meaning.

v4NavIcon-IconGuide.png
v4NavIcon-IconGuide-Vertical.png
v4NavIcon-IconGuide-Square.png

I utilized an icon sizing template to help make sure that each icon optically looked to be the same size, despite differences in height, width, and shape.

v4NavIcon-IconGuide-Strokes_DxM Dashboard.png
V4NavIcons_GridSamples_DxM BioBank.png
v4NavIcon-IconGuide-Strokes_Pages.png

In a previous iteration, we designed a family of outlined icons, but we figured that these didn't make as strong an impression on the user as did a set of filled icons.

First Iteration Sketches

v4Icons-FirstSketches
  • Instagram
  • linkedin icon
bottom of page