Saas.HP.com Pattern LibraryUI design and development

Introduction - When users get to the pattern library, they are greeting by a quick introduction on what they will find and how they can take advantage of it. Color pallete - Moving into styles, first up is the color palette. This palette outlines the primary and secondary colors used, as well as the available tints. Links and Buttons - Moving into UI, this page details out all UI elements based on the specifications I set, starting with links and buttons. Specifications - All UI elements offer specifications (for designers) on everything they could need to reproduce the style (ie, font size, color, border color, border radius, etc.) Code to drop it in a page - Users can also see the code they will need to drop that element into a page using the correct styles. Form Styling - The UI page goes on to cover form styling with everything from input fields to checkboxes. I even designed and developed a fun trick with form labels so they won't dissapear when the user needs them, check it out! Components Page - The component page goes over larger UI pieces of our site such as our global header/footer, sub-menus and tables. Resources Page - The resources page is possibly the most helpful page in the library. It provides all possible links, downloads of any assets we can offer (product logos, fonts, etc.) and much more! Example .PSD resource for designers - As a special addition for our design team, I built out each of the UI elements (according to the specifications I set) in photoshop. Above is the desktop template designers can use as a starting point for a new page. Change Log - Things are constantly changing in the design world so anything that has been recently changed is marked with a notification and all changes are logged and categorized. The pattern library is updated with the regular sprint cycle (two weeks).

Project Goal

Build a library the UI elements used on Saas.HP.com as a resource for designers and developers.

Tools

HTML5, CSS3/SASS, Adobe Photoshop & Illustrator

Project Overview

The pattern library covers all UI elements on Saas.HP.com. This project involved building one CSS stylesheet that could be the source of truth for all UI elements. It details out what design specs each element has and the code a developer needs to drop it into a page. The site also includes a resources section where visitors can download fonts, a color palette, and any neccesary assets. The resources also includes .PSD files for designers with drop-in elements of buttons, forms, navigation bars, etc. to make designer easier and more consistent.

Team

I worked as the sole member of this project. My tasks involved coordinating with designers to define specifications, building out the website and maintaining the CSS.