Multi-tier system that can go from block layouts all the way to fully polished UI
Layouts and components are based on relative values to allow for easy nesting and reusability
Customizable, programmable UI system components including brand guides
Semantic naming structure and responsive system facilitates easy dev hand-off
This is a portion of the system that was used to build a system map and blocked layout of dashboard web application.
These are high-level categories that help define the hierarchy of the application and include areas for notes that explain the purpose of the element.
The scale and contrast of the grayscale elements are designed to help facilitate an understanding of the general layout distracting design elements.
(original)
updated logo
difficult navigation
The menu structure required users to follow a path that was defined for them.
Store content and company content was intertwined, making it unclear where users were and where they were able to go.
Content broken down into clear and concise sections, each occupying approximately 1 screen-height
Bright colors, bold text, and large product shots
Maps with landmarks, transit routes, and locations of everyday errands.
unclear hierarchy
With only one color and minimal text styling, there is no clear visual hierarchy.
initial version presented (rejected)
logo construction
rejected variations
horizontal orientation, light & dark
single color
company messaging given no focus
The company mission statement was buried well within the site. We loved the message and wanted to move it front and center to promote the brand.
property pages content flow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
mobile first approach
The site looking great on mobile was a must. I knew The WIHN wanted a bold design and what better way to achieve that with heavy font weights and splashes of color?
product data example
Pico's product catalog includes machines with comprehensive specs. The current layout wasn't optimally organized and was inconsistent across the catalog.
looks pretty zen to me
photoshop > filter > mosaic
warm, sunset colors juxtapose the cool hues
tints and shades of hues from the palette are used to build the grayscale palette.
a typeface for each voice
ui cards and icon set design direction
typography and supporting UI ELEMENTS
Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
We used a pre-navigation bar that allows users to switch between Pico companies. As companies are added, additional tabs are added.
The main navigation is used for navigating through global contact which is defined as anything that isn't unique to a company page. This includes contact forms, theblog, FAQs, etc.
which property is for you?
Location and amenities can be a deciding factor. Most tenants don't have cars and need easy access to both local and regional transit.
Pico-published news, upcoming events, promos, guides to other areas of blog or site
Defined as articles and references from non-Pico companies
Content published by Pico
past tenant review
Knowing what others say about the neighborhood is a great way to get a feel for the areas you're considering.
