Skip to content

Aligning on an AI Tanuki Illustration

Purpose

Code_Suggestions-blankThe current Code Suggestions non-purchased state does not include any AI Illustration. It was hard to determine if we had something official to use in these scenarios. I think the addition of an illustration will not only make pages like this more visually appealing but also help with AI feature (brand) recognition within the product.

  • ⭐ [Main Goal] To create an illustration for AI addon empty states in GitLab built within our illustrative guidelines.
  • 🌟 [Stretch Goal] Can we align AI illustration across marketing and product?

Usage Overview

Marketing Gitlab.com
Group_7631 Group_7632

Concepts

Initial explorations

Explorations

Current Proposal

current_proposal

After a few variants and testing through different concepts, I opted to remove the base background and craft a medium + small proposal that is more closely aligned with the current illustration. It's heavily based on the current artistic direction but sits within our illustration Grid structure. I wanted to bring a little more balance to elements to make sure we have clearly defined focal areas with vertical and horizontal alignment.

Below are some examples of before + after executions.

Example of implementation within Gitlab.com

Current Proposal illustration
Current_1 Proposal_1
Current_2 Proposal_2

Explorations can be found in the 🎨 Figma Explorations branch.

Checklists

After all of the following tasks are complete you can close this issue:

Assignee tasks:

See tasks:
  1. Start with a branch of the GitLab Illustration file in Figma. Prefix the branch name with the issue number, and add your GitLab username as the suffix. For example, #120-feature-illustration-jelder.
  2. Choose/copy a grid frame from the Grid page. Work on your illustration in the appropriate component or library page. A small illustration that can be used as a standalone "spot" illustration, or as a reusable element in a larger illustration can be added in the Components page, while all others can be added to the library page that makes the most sense.
  3. Ensure that the illustration follows the Illustration guidelines. For third-party trademarks, please review the third-party trademark usage guidelines.
  4. Request a review from a FE/UX Foundation designer for your Figma branch. If they have the capacity, they should assign themselves to this issue. If not, try pinging another designer.

Reviewer tasks:

See tasks:
  1. Review the illustration. Add design-specific comments in Figma to maintain context. Add general comments to this issue, including your approval status. Once approved, assign to a Figma maintainer for final review.

Maintainer tasks:

See tasks:
  1. Either merge the branch and publish library changes, or copy/paste the illustration from a draft file to the illustration file under the appropriate page and category. The frame name should match the exported file name (without the extension).

Library addition tasks:

Once the Reviewer or Maintainer has approved your illustration, consider the following tasks to add it to the gitlab-svgs library.

See tasks:
  1. Create a new merge request (MR) from this issue.
  2. Checkout the new branch locally.
  3. Export the illustration from the illustration file in Figma to the /illustrations folder in your local instance of the repo. The file name should be lowercase, and use hyphens as a separator between terms. If necessary, place the illustration in one of the sub-directories.
  4. In a terminal window, run yarn run dev to preview the SVG library locally. Find the new illustration and ensure it is rendered accurately.
  5. After you’ve committed the changes and the pipeline passes, double-check your illustration in the review app and test that it matches your expectations.
  6. Assign the MR to a review by a maintainer, and proceed with any changes.

If you run into any problems, ensure that all other steps in the project README have been followed.

Links / references

Edited by Tim Noah