Evgeny Gromov-1056186992-LK-1199x628.jpg

ICANN

 ICANN

AGENCY

Razorfish

DATE

2022

CLIENT

ICANN

PROJECT

Design System

ROLE

Associate Experience Design Director

Anchor Links:

File View

Table of Contents

 

Using clear labeling throughout helped to identify what the user is in search of.

  • Change log so anytime and update was made it can be tracked.

  • Foundation Elements is the style guide touching on color, font, icon, and logos.

  • Getting started where we breakdown the basics of this design system in order for any user to understand.

  • Canvas & Annotation tells what canvas size to use and gutters etc, and how they are to annotate for final delivery.

  • Text styles displays headers, body copy, links.

  • Buttons is the rules around button in hover state and non active state.

  • Navigation & CTAs discusses the headers and footers how they are best utilized.

  • Forms & Search shows the variety of components used in order to build a form for a user to fill out. Being this action is throughout the site the component list is very expansive.

  • Tables breakdown how to use a variety of tables/ spreadsheets within the site.

  • Cards is an essential function that is populated throughout the site from image over text to image next to text and this page shows the variety and there uses.

  • Multimedia goes into details about videos and audio files as well as carousels.

  • Widgets, Social, Banners displays hero banners, social icons and there use, along with other newer less used widgets.

In the content within a page we organized that to best suit the user as well. Structuring each art board with an appropriate title and leaving the components off the board just got quick access.

Full Page Spread

We wanted to continue to keep the theme of clean and usable so as you can see we started the top of the page with highest priority. Generally they will be coming to get a component if it was unable to transfer in with the library. Then we thought about titling large so at a glance a user can see what it is they are in search for or want to investigate. Giving breathing room between each board and object was vital for the user to easily digest.

Art Board Content

Starting from the left we added any rules that weren’t identifiable by clicking the component. Next we showed samples of the component we are discussing in and individual case. We opted to add a strong break line to visually direct the user on how these component are used in context.