We need icon illustrations to represent the different ways to create a project:
Create new project
Create project from template
Import project
Run CI/CD pipelines for external repositories
Concept
Create new project - The illustration needs to represent creating a blank project from scratch.
Create project from template - The illustration needs to represent creating a project and prepopulating it with data from a template.
Import project - Transfer an external project to GitLab. The illustration needs to represent a one-way flow.
Run CI/CD pipelines for external repositories - Create a project with only CI/CD enabled to run pipelines for an external repository. The illustration needs to represent a connection between the external repo and the GitLab project.
Complete all items in both checklists before closing the issue. All items are the responsibility of the author, unless otherwise noted.
Design
Duplicate the Illustration template and move the copy to your Drafts folder in Figma. Update the file name and cover thumbnail with relevant issue information.
Share your draft file with a FE/UX Foundation designer to review, and make sure they have view permissions in Figma. If they have the capacity, they should assign themselves to this issue. If not, try pinging another designer.
Reviewer: Review the illustration in the author’s draft file. 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: Add the illustration to the Illustrations file under the appropriate page and category. The illustration should be in a frame with the bounds set to the artwork. The frame name should match the exported file name (without the extension).
Author: Move your draft file to the Component archive Figma project.
Library addition
Create a new merge request (MR) from this issue.
Checkout the new branch locally.
Export the illustration from the Illustrations 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.
In a terminal window, run yarn run svg to add the illustration to the library in the /dist folder.
In a terminal window, run yarn run dev to preview the SVG library locally. Find the new illustration and ensure it is rendered accurately.
After you’ve committed the changes and the pipeline passes, 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
✓
11 of 11 checklist items completed
· Edited by
Jeremy Elder
@hdelalic Would you mind voting again? I deleted the comment because the options for the cd/ci pipeline have changed a bit and I didn't want there to be any confusion. I realize I should have just updated the comment.
Amanda Hughesmarked the checklist item Duplicate the Illustration template and move the copy to your Drafts folder in Figma. Update the file name and cover thumbnail with relevant issue information. as completed
marked the checklist item Duplicate the Illustration template and move the copy to your Drafts folder in Figma. Update the file name and cover thumbnail with relevant issue information. as completed
Below is the link to the illustrations for the New Project landing page. I have attached a layout to give you context on where this will appear within the UI.
I'd input and feedback!
The feedback I'm looking for:
Do the illustrations effectively communicate the intent?
Which option do you prefer for the CI/CD pipeline illustration?
Do you have any suggestions on how to improve the illustrations?
Create new project from template: May benefit from grey content in the background page - The colour in the lines implies to me that there is existing content rather than a template for the content.
Import project: My fav - Maybe you could play around and make the flowing data shaped like an arrow.
Run CI/CD pipeline: I think the concept of the repo and pipelines could be more explicit...
Our pipelines look like this...
Our repo icon is a page, but mostly repos are represented as an oil drum type of thing...
Great job! I'm no visual designer, so take everything I say with a heap of salt.
Taking @npost's note about the barrel representing repos and @kassio's note about smaller squares representing CI/CD, I think that this icon should contain a barrel connected to a project by a single dashed gray line (option 1).
Something like this:
I am on the fence about the gray content for templates. Templates do contain content, but it's not really your content, so that could go either way.
@kassio@npost@hdelalic Thank you all for your feedback! I've added variations for the Create from template and Import project illustrations. Please feel free to comment directly on the Figma file.
I've started exploring illustrations for Run CI/CD pipelines for external repositories but there is nothing yet to share. Creating illustrations always reminds me of how difficult they are to design!
I don't know how to comment the illustrations in the figma, I hope you don't mind my comment here.
I saw a draft there that gave me this idea of using the pipeline statuses in the background, the same way you use the traces on the other shapes. I think this would remind the pipelines page
It's probably something that you're already working on, but there's my 2cents.
@amandakhughes nice work, these are really crisp! For all of them I think the gray could use one of the darker options, and the faux shadows can be removed.
Do the illustrations effectively communicate the intent?
I like the simplicity of Create new project, but I’m wondering if instead of the rounded box, we could use something more like the project icon to help reinforce it. In other words, maybe replace the box with something along these lines as the container.
I agree with @npost that gray works better for Create from template. It might even help to have boxes in there rather than the lines — more like a wireframe.
Import projects is , but again it’d be nice to reinforce the projects icon.
Which option do you prefer for the CI/CD pipeline illustration?
I’m on the fence here. I think it could incorporate more of the aspects of the pipelines. I didn’t get a sense of something running, or status here.
Do you have any suggestions on how to improve the illustrations?
All noted above!
Amanda Hugheschanged the descriptionCompare with previous version
Iteration round two is ready for feedback. Please take a look at the Figma file and comment away. I've added the current layout of the New project landing page if you'd like to play around how the icons will look within the cards.
If anyone has any ideas on an icon to represent a repository or concepts to explore, I'm all ears.
@dimitrieh If you have any input on the CI/CD illustration that'd be super valuable.
Thanks in advance! The feedback is great and much appreciated.
Add some comments and played around with some stuff in Figma. Loving the progress.
The 3d icons become a bit clearer when you move the plus over and keep the 3rd party repos as flat. This also creates a nice metaphor to differentiate GitLab as more 3 dimensional!
The data flow in the 3rd illusatration isn't there, but hopefully, you get my gist.
@npost and @kassio Thanks so much for your feedback and input!
Nick, I like how you shifted the "+" and tanuki over a bit. That looks much cleaner than having them centered. Great idea! I also like you suggested for the CI/CD illustration. I can play around with that concept. The illustration needs to communicate a connection, rather than a movement, but I see where you are going with it.
I haven't spent too much time exploring the project icon because I received feedback that it looks like multiple projects, rather than a single project. What are your thoughts there?
Pulled from the New project page:
Run CI/CD pipelines for external repositories
Connect your external repositories, and CI/CD pipelines will run for new commits. A GitLab project will be created with only CI/CD features enabled.
Notice "external repositories" from the text - Should I show multiple repos within the illustration, rather than a single one?
If we were to use the swirly concept, what do you all think about the Create new project, Create from template, Import project reading as more literal, and Run CI/CD reading as more abstract?
I'm not sure I understood the question.
I haven't spent too much time exploring the project icon because I received feedback that it looks like multiple projects, rather than a single project. What are your thoughts there?
Yeah, I can see how it could be interpreted as multiple projects. I'd stick with the "single page" layout then.
Notice "external repositories" from the text - Should I show multiple repos, rather than a single one?
I'd stick with one because I think the image can became convoluted. and the text will add the extra context. But I'm may be wrong here, I'd have to see an image to assess it better.
I'm going to completely take back my question. I was originally asking if the illustrations looked cohesive as a group if we were to use the swirl option. However, I think there are options that would work well together. The question was confusing, sorry about that!
I added a version for import project. I simplified it so that it’s just data-like lines coming into a project.
As part of the guides, we try not to use the tanuki in the illustrations.
For CI/CD, if the CTA is to run CI/CD for an external repo, do we need to show a GitLab project? Can it be simplified to a simple action or button that appears to trigger CI/CD? Same note on the tanuki. I did put together a quick idea too, although it’s based on my limited experience with triggering pipelines on MRs and nothing else.
On a related note. There’s exploration into a new illustration style which would eventually lead to current illustrations being updated. I just want to keep that in mind if it helps with time and revisions on these.
@jeldergl Thanks so much for all of you help with this.
This is the text that appears on the Run CI/CD pipelines for external repositories page:
"Connect your external repositories, and CI/CD pipelines will run for new commits."
I've added some ideas to the Figma file and will continue to explore concepts related to connecting and running. Let me know if you have any ideas please!
That's good to know regarding the new illustration style. Thanks for sharing that info.
@jeldergl Ok great, thank you. I'm going to do some more exploration based on the feedback I received this morning. I'll let you know when I have ideas to share.
Amanda Hughesmarked the checklist item Share your draft file with a FE/UX Foundation designer to review, and make sure they have view permissions in Figma. If they have the capacity, they should assign themselves to this issue. If not, try pinging another designer. as completed
marked the checklist item Share your draft file with a FE/UX Foundation designer to review, and make sure they have view permissions in Figma. If they have the capacity, they should assign themselves to this issue. If not, try pinging another designer. as completed
Amanda Hughesmarked the checklist item Reviewer: Review the illustration in the author’s draft file. 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. as completed
marked the checklist item Reviewer: Review the illustration in the author’s draft file. 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. as completed
Amanda Hugheschanged the descriptionCompare with previous version
changed the description
Amanda Hughesmarked the checklist item Reviewer: Review the illustration in the author’s draft file. 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. as incomplete
marked the checklist item Reviewer: Review the illustration in the author’s draft file. 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. as incomplete
Amanda Hugheschanged the descriptionCompare with previous version
@amandakhughes thanks for reopening this, I’ll see it through!
Jeremy Eldermarked the checklist item Reviewer: Review the illustration in the author’s draft file. 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. as completed
marked the checklist item Reviewer: Review the illustration in the author’s draft file. 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. as completed
Jeremy Eldermarked the checklist item Maintainer: Add the illustration to the Illustrations file under the appropriate page and category. The illustration should be in a frame with the bounds set to the artwork. The frame name should match the exported file name (without the extension). as completed
marked the checklist item Maintainer: Add the illustration to the Illustrations file under the appropriate page and category. The illustration should be in a frame with the bounds set to the artwork. The frame name should match the exported file name (without the extension). as completed
Jeremy Eldermarked the checklist item Author: Move your draft file to the Component archive Figma project. as completed
marked the checklist item Author: Move your draft file to the Component archive Figma project. as completed
Jeremy Eldermarked the checklist item Create a new merge request (MR) from this issue. as completed
marked the checklist item Create a new merge request (MR) from this issue. as completed
Jeremy Eldermarked the checklist item Checkout the new branch locally. as completed
marked the checklist item Checkout the new branch locally. as completed
Jeremy Eldermarked the checklist item Export the illustration from the Illustrations 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. as completed
marked the checklist item Export the illustration from the Illustrations 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. as completed
Jeremy Eldermarked the checklist item In a terminal window, run yarn run svg to add the illustration to the library in the /dist folder. as completed
marked the checklist item In a terminal window, run yarn run svg to add the illustration to the library in the /dist folder. as completed
Jeremy Eldermarked the checklist item In a terminal window, run yarn run dev to preview the SVG library locally. Find the new illustration and ensure it is rendered accurately. as completed
marked the checklist item In a terminal window, run yarn run dev to preview the SVG library locally. Find the new illustration and ensure it is rendered accurately. as completed
Jeremy Eldermarked the checklist item After you’ve committed the changes and the pipeline passes, assign the MR to a review by a maintainer, and proceed with any changes. as completed
marked the checklist item After you’ve committed the changes and the pipeline passes, assign the MR to a review by a maintainer, and proceed with any changes. as completed