Guidelines for illustrations

@sarrahvesselov @pedroms @tauriedavis @cperessini @dimitrieh Let me know if you have feedback. Thanks!

Those guidelines are super clear, thanks a lot @hazelyang!

When you add a transparent white layer to lighten the colors, do you ever flatten the layers or do you always keep them separate?

This is amazing @hazelyang! I made some small grammar suggestions to make it as clear as possible.

assigned to @hazelyang

I assigned this back to you @hazelyang until the comments get resolved.

@cperessini @sarrahvesselov @tauriedavis Thanks for your feedback and corrections! I'll resolve those comments when I finished my 9.5 issues.

@hazelyang Yes! Very clear and informative, good job From the top of my head, some things that might be helpful to think about and document (doesn't need to be on this MR):

Size:
- What do we have to keep in mind when designing illustrations for both desktop and mobile?
- If the areas available for the illustrations can be small (e.g. merge request widget) or big (e.g. empty states), should the visual complexity/details increase or reduce accordingly?
Words: can the illustrations incorporate words?
Tanuki: can or can't use in the illustrations? (My preference goes to not using the tanuki, but you decide )

Great points @pedroms!

added 1 commit

635564ba - Illustration guidelines - Fix grammar error and update images.

Compare with previous version

mentioned in issue gitlab-com/marketing#1290

@luke would you mind giving a look at these guidelines?

Thanks for the ping @pedroms!

At first glance I think these guidelines are really great @hazelyang, everything is documented well and the example images further illustrate and back up the guidelines. Very simple and straight-forward.

It would be great to see these guidelines and illustration style applied on the marketing side as well. I've established a more detailed illustration style for social ads and other images, but I could certainly see this style being used on about.gitlab.com. This would help in creating a more unified experience from the marketing website to the product.

Have you considered expanding the color palette in future iterations to provide some variety? e.g. colors that contrast well on dark backgrounds, 1-color variations, other 2-color combinations, etc.

Also is there currently, or planned to be, a library or document with illustration elements? It would be great to have a living library to reuse and add new elements to. Not so much for our illustrations to become "cookie cutter" templates, but a resource we can pull from and iterate on / add to for consistency.

Let me ponder this over the weekend and get back to you with any other thoughts. Great work, Hazel!

added 1 commit

290076da - Add size part to the guideline

Compare with previous version

@luke Thanks for your feedback!

Have you considered expanding the color palette in future iterations to provide some variety? e.g. colors that contrast well on dark backgrounds, 1-color variations, other 2-color combinations, etc.

Yes, I think we should provide more different combinations and colors in the future.

Also is there currently, or planned to be, a library or document with illustration elements? It would be great to have a living library to reuse and add new elements to. Not so much for our illustrations to become "cookie cutter" templates, but a resource we can pull from and iterate on / add to for consistency.

Currently, we don't have a library or document. But if we had it, that would be great. Do you have any thoughts for creating a library? I don't have the experience in creating a library with illustration elements, so if we create a one in the future, maybe we can discuss how to make the library easy to use.

added 1 commit

9e5e0925 - Add the situation of illustration on mobile

Compare with previous version

@hazelyang thanks for adding some guidance for the size variations. Would you mind running the text through Grammarly or similar, as I've seen some typos?

@hazelyang as a first iteration, just to get something out there, you could simply build out a Sketch doc with all of your illustration elements in it. From there we can iterate on it and perhaps build elements out as symbols or add it to https://brand.ai/git-lab/ if that's something we will continue to use.

IMO it will be a challenge to balance this being more of a guide for illustration rather than being the only elements you can use. Let it be an ever-evolving document/library.

added 1 commit

b16b6ea3 - Fix typo errors

Compare with previous version

From there we can iterate on it and perhaps build elements out as symbols or add it to https://brand.ai/git-lab/ if that's something we will continue to use.

Exactly what I was thinking @luke

Thanks @luke! I will create an issue in gitlab-design for organizing the illustration elements.

Assign to @sarrahvesselov to review the document.

assigned to @sarrahvesselov

mentioned in issue gitlab-design#47

It looks like you have some merge conflicts @hazelyang. Are you working locally on this? If so, you should pull master and merge it into your branch to sync them. If you aren't sure how to do this let me know and I can do it for you.

Also, is there a review app so I can see this? I don't see a link here.

@sarrahvesselov I think we only have review apps enabled for gitlab-com/www-gitlab-com

Are you working locally on this? If so, you should pull master and merge it into your branch to sync them. If you aren't sure how to do this let me know and I can do it for you.

@sarrahvesselov I am working locally..and I am not sure how to do this. Can you help me?

I pulled the branch locally @hazelyang and tried to merge in the changes from master but I get the following error @hazelyang:

I am not entirely sure what the issue is, I think we need an assist from someone in Front End.

added 9052 commits

b16b6ea3...f9df0e13 - 9040 commits from branch master
fb664d37 - Add new file
a7b1779c - Update illustrations.md
a331d760 - Update illustrations.md
55a6d20a - Update illustrations.md
f09a7b0b - Add the images for illustration guidelines
85efbd1f - Add some images to illustrations.md
7125082e - Update image size in illustrations.md
c93131d3 - Update illustrations.md
ff9a2a8b - Illustration guidelines - Fix grammar error and update images.
05ddd46c - Add size part to the guideline
8d84b7c4 - Add the situation of illustration on mobile
dc3450d3 - Fix typo errors

Compare with previous version

resolved all discussions

I rebased with master and resolved the conflict (which was in locale/gitlab.pot). Pipeline is running again

Looks like test are passing cc @sarrahvesselov

Thanks @tauriedavis! I had a similar issue with that file when I updated the icons for docs.

approved this merge request

assigned to @fatihacet

assigned to @sarrahvesselov

assigned to @mikegreiling

I assigned this to you @mikegreiling since you are a reviewer. If you are swamped, feel free to suggest someone else.

Keep in mind, next time when changes like this are made which strictly address documentation, you can bypass the full CI pipeline by naming the branch docs/*. There's no need to run the full test suite when no code changes are being made

https://docs.gitlab.com/ce/development/writing_documentation.html#testing

Ah, nice tip @mikegreiling. Had no idea

I presume the substance of the document has been agreed upon by somebody from UX so there's not much for me to review here, other than ensuring that the images are correctly linked and the formatting isn't broken somehow. This looks great to me

Should there be a link to this page from doc/development/ux_guide/index.md?

Not sure who to assign this back to. @tauriedavis can you handle this?