We are still undeniably HP, but in a new and refreshing way.
Our design system is built using the foundation of HP's new and fresh visual identity (VisID) and we use it in a way that delivers consistency, distinctiveness, and quality for the HP brand. It's simple in its approach, using a combination of photography, typography, lines, and color to create endlessly configurable user interface components.
Our pages should follow the hiearchy of the brand.
Vision, Mission, and Belief
It's the tip of the pyramid. The focus of the brand and the driving force for all the work.
Philosophy and Tone
This is the glue of brand. It holds together the levels above and below. It's how we show up and manifest the Vision, Mission, and Belief and how we express the design principles.
Design Principles
They're the base for everything we do and the groundwork supporting everything. They're how we visually execute the two levels above and the container messaging, style, and aesthetics.
Dave and Bill, those two engineers who wanted to make a difference to the world, were radically thoughtful. They were thoughtful and considerate, but their output and ideas were always unexpected and trailblazing.
The thought they put into their work produced unexpected, trailblazing ideas. This is how we want to present HP.com. Our designs should inspire action, be fused with inspiration and excitement, and encourage new types of thinking.
Design approach
Make it work first
Before making it cool, just make it work. Does it read well? Does it make sense? Is it clear? Does it have nice proportions? Is it spaced well?
People, product, or idea
Make it about the people. Make it about the product. Make it about a big Idea. Don’t over-complicate it.
No gimmicks
No need for tricks or gimmicks or extra decoration. No cheesy filters, elaborate composites, or special effects. Embrace simplicity.
Confidence
Be OK with the lack of flashy stuff. Don’t try to overcompensate. Just lay things out nicely. Showcase the people and products confidently.
Hiearchy
Everything should flow from the top down or left to right in a very logical and pragmatic way. Using the grid and the VisID stacking structure, there is no guessing which piece of content comes next.
Stay pragmatic
Think like an engineer. These layouts and system in general are about functionality.
Be consistent
Show up and perform the same way over time. Work to create cohesion and family building.
Repeatability
Just keep doing it. Frequency and saturation are key to creating consistency. The more things repeat, the more the visual style and system will become an identifiable and memorable feature of the brand.
Don't over-design it!
Everything above adds up to “Don’t Over-design It!” The Vis ID is about the collective work, and not any one individual thing being a superstar. If every product tries to fight for importance the Vis ID will revert back to things trying to stand out and becoming mismatched. Be OK with things family-ing together.