Skip to content
Snippets Groups Projects

[META] "Design.GitLab.com" UX/Marketing/Branding Guide/Documentation revamp/refactor/evolution

Motivation

  • Introduction of the marketing design system https://gitlab.com/gitlab-com/marketing/issues/1290
  • Our UX efforts in setting up a better design library solution (with front-end export) https://gitlab.com/gitlab-org/gitlab-design/issues/26
  • Our increased efforts in documenting design paradigms.
  • Our introduction of the 8px grid system.
  • We as a team have agreed that the UX guide is too far hidden inside the handbook, plus restricted by it visually.
  • Looking towards our competitors, they have gone for a similar solution into better informing internal and external sources on how to design for them.
  • We want to be a front-runner in leading the efforts on designing and solving problems encountered developing an integrated solution such as GitLab.
  • This will allow us to better communicate new changes to UX efforts to the rest of the team, plus see more clearly what areas still needs work/definition.
  • Part of UX plan https://gitlab.com/gitlab-org/gitlab-design/issues/30

Proposal/Goal

We want to have a combined place/website, without the limitations of the handbook, to help everyone design and create for GitLab. This should most probably include information regarding:

  • Product design (UX)
  • Marketing design
  • Brand guidelines (perhaps part of marketing)
  • Perhaps FE as well? (I think this can be added later and would fill the "component" sections inside every pattern)

We should strike a balance between being informative and keeping this manageable/maintained.

Structuring

  • Home
    • Principles (What do we stand for/design with in mind? for example: Clarity, efficiency, consistency, beauty, considered, gives value, prioritises, opinionated, offers choice, gives control, etc)
    • Product design
      • Foundation
        • Iconography
        • Color Usage
        • Illustrations
        • Writing style
        • Accessibility
        • Localisation
        • Layout/grid
        • Messaging
        • Animation & Motion
        • Research
          • Personas
      • Patterns/Paradigms
        • Subitem (To be filled in, for example empty states)
          • Components
      • Resources
        • Color palettes
        • Stylesheet/UI Kit
        • Product Design Repository
        • Presentation kit
    • Marketing design
      • Foundation
        • Iconography
        • Color Usage
        • Illustrations
        • Imagery
        • Writing style
        • Accessibility
        • Localisation
        • Layout/grid
        • Messaging
        • Animation & Motion
      • Patterns/Paradigms
        • Subitem (To be filled in, for example pricing tables)
          • Components
      • Resources
        • Color Palettes
        • Presentation Kit
        • Logos
        • Fonts
        • Stylesheet/UI Kit
        • Marketing Design Repository
    • Workflow
      • Tools
      • Designing together remotely best practices
      • Remote Design sprinting
    • Design articles (GitLab blog)
    • Latest Dribbble posts
    • Join us/jobs
    • privacy/license/trademark
    • what's new (initially link to commit list)

Initial Visual Target (using fake/copied imagery)

home_with_browser

subpage_with_browser

Slice

Figma document

Inspiration

Design system inspiration:

Favorites:

Visual design inspiration:

Implementation

Our implementation should be fast, modular and easily maintainable/extendable by anyone.

We need image classes similar to what medium offers for image options: similar width as text column, wider than text column, max-width, image row, left sided image, right sided image, image grid, annotations

Options to look into:

  • Static website generator like middleman/jekyll etc
  • Build it with custom web-components so we have clear formatting and easy separation of styles - Polymer & Webcomponents.org
Edited by Dimitrie Hoekstra