Illustration Styles

Illustration Styles

Illustration Styles

ui interface

Framed icons (style consistency is recommended; combined for example)

ui interface

Framed icons (style consistency is recommended; combined for example)

Framed icons (style consistency is recommended; combined for example)

Icon examples

ui interface
ui interface

Icons as a composition

Icon examples

Icons

  • Our icons follow a grid of 2.5 pt squares with all lines at 90° angles and curves created from perfect circles

  • Line breaks of 2-3 grid spaces are incorporated to add a signature element to the icons and create clean, unexpected shapes

  • Line weights are consistent and the ideal line weight for an icon composition is in harmony with the other elements on the page  

  • Use framed icons to enhance style, add color, and create presence in marketing materials

Collage

  • Use collage illustration as an approach to visual storytelling that incorporates human touch through collage and gestural lines 

  • The combination of composition, human hand, and a reduced color palette creates a narrative style that is unique to Haworth 

  • Incorporate handcrafted elements such as torn edges, pencil drawings, hole punches, sketches, and scribbles 

  • Elements can be incorporated for texture and to support the composition, versus every element having meaning 

  • Reserved for use in knowledge pieces, aligning the brand with journalism, and communicating design intelligence

A man in an orange shirt sitting at a desk with a computer and mouse.
A man in an orange shirt sitting at a desk with a computer and mouse.
Person sitting cross-legged in casual clothing using a smartphone.
Person sitting cross-legged in casual clothing using a smartphone.
People are working and walking in a modern office space with wooden floors, large windows, and various seating arrangements.
People are working and walking in a modern office space with wooden floors, large windows, and various seating arrangements.

Kit of Parts

  • The Kit of Parts is a set of vector elements for figures, accessories, furniture, and environments used to assemble compositions 

  • The combination of composition, elegant shape and line, and a clean color palette creates a versatile narrative style—communicating an elevated, yet warm and approachable visual language 

  • Use enough line and fill shapes to define a form but not more than necessary

Infographics

  • Infographics are visual representations of information using bold messaging and graphics to create compositions with a mix of tints and accent colors 

  • Use in documents, publications, and digital presentations as visual support 

  • Make infographics at a large scale in a minimalist style 

  • Icon compositions can be incorporated into infographics to visually support data

Sketch

  • Sketch is an approach to representing conceptual spaces 

  • This style adds collage-like techniques with a hand-drawn look to renderings 

  • Avoid filters or stroke styles that too clearly reveal the software features