PF Visual Library

[bekah-stephens]

Problem statement

Inconsistent and ad-hoc image usage for Medium articles results in a lack of branding and strategy. The current approach of using Unsplash images and, occasionally, self-made graphics fail to consistently align with the website’s visuals and the larger PatternFly identity, potentially creating a disjointed user experience.

Impact statement

The absence of a consistent graphic strategy negatively impacts user engagement, brand recognition, and overall website aesthetics. Featured blog previews with misaligned images diminish the homepage's visual cohesion. Creating custom graphics will improve user connection to stories, strengthen brand consistency across platforms, and enhance the PatternFly brand image.

Definition of done

Develop a standardized graphic creation process that adheres to brand guidelines and visual identity and can be recycled and used across platforms. The idea is to use a set of visuals (images, shapes, patterns, etc.) to create templates that can be used to custom graphics for different use cases. When a request comes in, we can either customize one of the template layouts or create something from scratch using the library of elements.

Level of effort

5-6 sprints

Work breakdown proposal

Sprint 1: research analysis & planning
Sprint 2-3: first draft visuals & refinement
Sprint 4-5: 2nd draft visuals & refinement
Sprint 6: final refinement & documentation

Links

• Figma brainstorming & research
• Epic story
• Figma Visual Library

References

• Brand & Experience Team's "Hybrid Style Guidelines" deck