GitLab Brand Design Resources, 7 Feb 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Brand Guidelines - Updating Pajamas using Web IDE

Description

The Brand Design team is responsible for maintaining the Brand Guidelines on design.gitlab.com. This meeting recording features a demo of making updates to Pajamas using Web IDE. The Product team supports the Brand Design team in merge requests.

Learn more on the Brand Design handbook page.

A

Okay cool so um today, I want to go over uh what I have in the agenda, which is basically just an overview of pajamas, so that everyone on the brand design team can get familiar and then, from there, um we'll kind of put everything that we learned into practice with a demo. So Tori and Jeremy are our lovely friends over on the product side.

A

Who are our go-to people for all the updates that we make so we can assign all the merge requests to them and they have been really great to like just as a resource, helping us and um you can't break anything because they're going to be there to help and always go over like questions and improvements.

A

So um let me share my screen.

A

All right I have a really wide screen. So sorry, if it's showing a funky for you, but I thought it would just be helpful to have like a side by side of pajamas next to um like the different topics that I want to go over. So when you are in pajamas, if you need to make an update, you can just scroll down to the page and go right into open web IDE.

A

And this is what you'll see so, maybe a little bit familiar for those of you who um you know have made updates to the handbook, but there's a whole lot more here. So I want to go over like the safe areas to kind of explore, so the first is going to be um under the contents folder, which is the brand brand design and brand logo. So this has like all of the pages that we've added under brand guidelines.

A

So, as you can see, the tabs are here, and another important thing I wanted to show was where we will upload media. So that's under static image brand, so um any yeah, any media that links back to the brand guidelines pages are going to be here.

A

And if you are adding like a new page, you can just right click on the folder here and add new file. So this is the part that I wanted to check with you, Jeremy and Tori. If, if you're just adding a new page, it's simply going to be like the name of the page and markdown right as the file extension and then you would just upload it from there. Is that correct, yeah, yeah, Okay cool so.

B

I, try to also have that path match what you would want. Your path to be yeah.

A

B

Just to help keep them in sync, but.

A

Yeah, so the that's, the URL so, for instance, um like marketing illustrations that would be oh I just lost it. Okay, new file, it would be like marketing Dash illustrations. So it's what would show up in the URL and then after you add it there what's important to know. Is that any page, you add also has to be added to the navigation, which is this file right here.

A

So um there's like a structure that each of these follows and anything that's like indented more is nestled from the page above it and the path and the title are going to be very similar, but the difference is that the title is what is displayed right here and then the path is the URL, so you just have to um adjust those accordingly.

A

A

I see I see a nod from Tina, so we're going to move on. Okay. So um that's how you add a new page and then update the navigation bar and then adding media in general, so Jeremy and Tori I would love to for you all to explain why SVG is like the preferred format and like best practices for that.

B

Yeah so I'll I guess I would back up and just say it depends on what it is. So if you're, obviously, if you're, maybe not, obviously, but if you were putting up an image of like a marketing brochure or a banner of sorts, that's you know happens in print or the Tanuki.

B

Do don't examples, then, then you want like an image format, uh something that's that's bitmap in that way, I would do you know a ping or jpeg uh and then optimize that so otherwise, any anything SVG is just so that it's scalable, so anything that you're wanting to remain high resolution and and uh scale with the page I think that's why we would go with that format.

A

And gifts are not preferred correct.

B

That's correct, yeah.

A

And we can also embed things like video, so we'll show that later on.

A

So the other thing once you're, adding your media I'll just go over to an example. Here you add, you add it as a figure. So this is another thing where I think uh Jeremy and Tori. You all are probably able to explain it a little bit better than me, but um like how the figure is kind of constructed, with all the different components.

B

Yeah, so we use figures because it helps associate a visual with a caption and uh there's accessibility reasons for that, but also like it's just kind of a good. That's what the element's for and it works really well, when we're doing something and providing these examples and then associating an explanation with it. uh Just about a backup, Scott dejong he's on the the foundations team he's an engineer he's going to be working on creating uh like a helper to construct figures. So it could get a lot easier in the future.

B

Right now, there's a lot of manual and there are three parts in there that you'll see. uh There's the Aria label, there's the actual alt tag and then the Fig caption and all three of those have different meaning or values from an accessibility standpoint and the figure element is not always interpreted the same for different screen, readers and and whatnot.

B

So that's why there's some repetition in information there, the Aria label and the uh fig caption that actual live text, that's visible, those are duplicated and then the alt tag for the imager or diagram, whatever you might have within, is unique and the way I've kind of approached it is that the Fig caption is like that visible text that from very high levels, it says like hey. These are the examples yeah it's it's displayed like that and then the the alt tag is specific to that example.

B

This one is, you know this is typography samples, it's pretty plain, but we you know you could expound on it, maybe uh to explain a little deeper I think the limit is like well I, don't know there might be it's like a couple hundred characters per potentially, but anyway alt should be short, but it's just a more descriptive way to uh to explain what is actually the content of that image where the clot, the the caption is more about the purpose of it. So that helps.

A

Yeah thanks. um The other thing that I wanted to appear is the sizing of things so like this size kind of controls that uh the image will fit the width of the page, whereas this one, the 50, denotes it it'll, be half scale so like 50 of the page so um like jumping over here. This graphic is the full width of the page, whereas this one is half the width.

A

um Let me see okay, the other important thing here is that the source is uh the extension of the file name of whatever you added to the static image brand folder.

A

Okay, so I think that covers like the major things in here to get familiar with, so we can kind of jump over to the demo. Next and I do have you know more details about pushing uh your merge request, but I thought it'd be helpful, just to go through the demo before showing the merge request so before I um jump over to some of the edits that we're trying to make um Jeremy and Tori I wanted to know which would be better to keep the commit.

A

Smaller, should I start just from the top and start making edits, and then you all say: okay, stop like that's getting too big like let's push that, or would it be better to make the edits for all things that are related, such as like we have a bunch of um motion samples with embed codes like should I tackle all those, and then we do a commit like solely focused on that and then another commit solely focused on content.

A

Is that the latter.

B

Sorry you're talking about doing multiple, Mrs or multiple commits.

A

um Which would be better because I know if we did multiple commits you would have to squash it? Is it preferred that we do like multiple commits in one Mr or we do multiple merge requests with each like one commit each.

B

Yeah, the as far as I understand it. It will squash commits by default, but in it can be helpful to use, commits to help organize your work as you track it. But it's still going to be depending on how large the end result or the end changes and Tori. You feel free to jump in on on your perspective too, but uh I I haven't seen quite your outline here with what you're working on um so without seeing kind of the scope.

A

B

Hard to hard to say how I might break it down. Okay,.

C

So yeah I would say it one it's okay to have multiple commits if you're committing uh individual changes. That should be distinct. So, but that said most of the time, it's probably easier to break those distinct Parts into distinct, remote requests.

A

C

From what you're saying, either starting from the top and doing all of the changes until it gets too too large of a merge requests or doing related pieces I would do related pieces.

B

C

That the reviewer is able to kind of review all the related things together and then move on to the next merge request and have those related things together. Okay,.

A

Yep, so um what we have is quite a number of uh embed code to put for the motion samples and then my comments on the side. Are the content edits that we have so it's kind of a lot of content edits, but each one is like small like as you can see, this is just like a word here. So um I'll start with the embed code, so just to make this easier.

A

Okay, so jumping over to the motion tab. We have this just copy and add it where we had this to do.

A

And then we had another one in the iconography section.

A

Another one in the dot animations.

B

Where she's doing that, do you know if we handle Vimeo embeds versus YouTube differently or Vimeo extra scripts will be stripped out.

C

I, don't think we've done it yet so I don't know.

A

B

Because we we, if we've done anything, it's YouTube and not Vimeo so yeah it'll, be uh with the iframes and whatnot it'll, be interesting to see what happens. Yeah.

A

We'll try it: okay, we're just gonna, try it: okay, yeah cool.

D

There are different settings in Vimeo, though, that we could take a look at um if that helps so we'll see how it looks.

B

Yeah and, and to that point too, it might help be helpful to just like do a few of these changes and then push it and like.

A

Right there, like should I try what we have currently.

B

I think yeah stop like when you hit a new section like you know, instead of going through the gradients, maybe yeah maybe just stop where you're at and then you've got a good spot to to do that. Yeah.

A

All right, I'm, just gonna empty it bone all right.

A

um Let me see I think I forgot how to do the commit in the new uh the new web ID. Is it.

B

You click on that button. That has the number of changes yeah there you go there.

A

All right so now let me jump back over to our agenda, which are um conventional, commit so Warrior Jeremy. You want to shed some light on that.

B

uh The most painful coding thing ever, no, not really uh so conventional commits again I'm I'm a designer speaking of this, so maybe it'll be helpful to her. You could probably have like a more technical explanation. I think, but conventional commits what they do is they. They just really help us identify what is being changed, what the type of change it is and then any specific notes related to that, and we follow that. So it's it's easier to parse and easier to track.

B

So it makes it a requirement that we know we're we're doing a fix on typography or we're adding a feature for this we're working on docs. So it helps categorize those changes with a description.

B

Okay, Tori's nodding so yeah, and we do that so that we can just help understand what the changes are and better track them. But.

C

Yeah so so time, you're writing conventional commits just reference. The docs and I'll post I mean there's some stuff here and I'll post the docs Link in the agenda um once you do it a few times, it'll start to become more familiar and but always reference the docs. If you have any questions, if you get it wrong, it's fine like we'll, say something when we're reviewing or we may be able to just update it ourselves. So don't worry too much about it. Just do your best.

B

Yeah and- and it doesn't impact your changes, your code, it's all going to get pushed, it just impacts the danger bot preventing it from merging. So it's all uh no, no technical arm done if it's, if it's not correct so.

A

Yeah and so majority of times, when we make uh a commit, it will be the the feet right now when it comes to the bug. Sometimes I was second guessing myself, because I was thinking that you know the bug is like for defects I'm like well. If I'm I messed up some content before and I'm fixing the content now.

A

Is that um like a bug or is it a maintenance or is it still like a feature I think when it comes to like some of the uh brand stuff, it's a little gray, but for the most part it would be a feature. Is that correct.

C

Yeah I think, if you're adding new content, then that can be considered a feature if you're fixing like a spelling, error or something like that, that would just be like maintenance, okay, okay, there are some Nuance, so again choose what you think is best, and if you know someone reviewing has a suggestion, they can either help you change it or help you pick or fix it. For.

A

You yeah all right so.

B

And on that, why we're yeah? Why we're talking about that really quick docs is, is one of the conventional commit types and the re and that one's a bit has been a bit confusing with pajamas, because pajamas is a documentation site right, so you might think, like oh I'm, updating the docs for uh promotion, but the docs in pajamas is specific to anything in the repo, so the readme or other templating or files behind the scenes actually is part of the repo uh that you would not see on the pajamas website.

B

So so docs, you probably won't use uh at all unless you're adding guidelines like if you were to post a guideline on on this process for the brand Team, then maybe that's actually like a readme, or you know some type of markdown file in the repo that isn't in pajamas. So all.

A

Right good to know um so, for this one I will start by eat brand and then um embedding motion samples and then uh just push from here correct.

B

You cut and before you do that this is one where you you might even be more specific, so yeah. So like brand motion or in that feature, oh.

A

Up here um would I keep it. One word like that.

B

That's how I would treat it yeah, okay and.

A

B

A

It's located that where the edit is being made, so it's just more specific, is that right, yeah.

B

Yeah and that I mean that could be nuanced too, but that's like that would be my Approach uh and then like you can shorten the rest of the message should just be like embed samples, because we already know it's part of motion. So it's a way to yeah uh to do that, and then there is a limit on your commit length, and so that also helps keep it a little more concise. There's some other rules like I can't remember.

B

If you have to have like three words in the as part of that Tori I, don't know, do you and does that I'd have to look at pulpless.

C

Specs, but push it and see.

A

Okay, push um yes to a new branch.

A

And then um create the Mr.

A

All right, so uh this is the section where I can just add, like more information on that correct.

C

Yeah anything you want the reviewer to know, okay good, so what the changes are and that's pretty much it.

A

um Corey I'm choosing to.

A

Now reviewers, do you all recommend I go ahead and just add an additional person from my team.

C

So I would assign yourself as the assignee and I am the reviewer. So then.

D

C

I, don't respond, I mean, hopefully this doesn't happen, but if I don't respond for our amount of time, you still have this assigned to you so you're keeping it moving along yeah. Let me see.

E

C

If you want someone from your team to review content or something like.

A

C

Should assign it to someone on your team first, so they would do a first post review.

E

C

Then you would assign it to either Jeremy or I after you get their approval. Okay,.

A

Awesome Network.

B

And- and it probably comes down to your preference for my workflow I- typically don't even assign a reviewer until the pipeline is passing.

A

B

uh Because if there's no review app or there's something else that that is that I need to just clean up it, it just helps avoid any kind of noise for a reviewer to go in and and be like. Why is this test failing or why is that until I've had a chance to to triage that so, okay.

A

Well, let me test that method out then foreign, all right, creating that merge request.

A

I think all right, so that's that's good. No major, like alerts so I'll, add.

E

B

Well, this way it hasn't passed, yet it's.

A

Still running so.

B

You, wouldn't you wouldn't know yet.

A

Oh okay, all right, yeah.

B

Well, uh so, if I'm going through this process, usually what I do uh from the web, IDE you'll notice that there's zero commits zero changes. I, don't know why that doesn't automatically update, but I'll hit a Refresh on this page because then it'll load up my my.

C

E

B

Commits my changes that gives me a chance to review my commit message. It gives me a chance to be like okay here all the changes I expected are being applied and they look they're formatted correctly, um even before I pass it on to a reviewer. If there's like a specific change that I want to highlight, I'll, go in and add a comment on that on that.

E

B

Number to be like, oh, we talked about this and whatever or here's the decision that we made to help so that once I assign it to review like everything, is there, but.

A

B

Just it's just part of that process, but yeah make sure the changes are there as you expected and then yeah go back to the overview and and wait for that pipeline to pass.

A

Okay, cool and then um I guess something that we'll need to keep an eye out for is if the Vimeo links work, but um we'll be able to tell that, like once, it's passed and improved right.

C

Yeah, so it says there that I will deploy to the review app once once that job finishes in the pipeline will be able to open it, and then we can view it in the review app to see what it looks like okay, so you can see like all those circles, you can see the blue one that looks like it's in progress.

C

That just means the pipeline is still running and the the gray dots those those jobs in the pipeline haven't started yet so it's going in order once all of those are green, then that the pipelines passed completely.

A

Okay and so you're saying once they're green to assign the uh one of you as a reviewer. At that point,.

C

Yes, however, I mean this is a new process for.

A

C

Lot of people. So if the pipeline fails and.

A

You're, like I, don't know, what's going on right, just.

C

Assign it to us, so we can help.

A

Okay, awesome, that's good to know um so my team. Are there any questions throughout all of this uh hi Adam. You joined you, you missed the meat of it, so you probably might have some questions later.

E

I I I joined a few minutes. I saw a lot of it there, so I've been around so cool.

A

um Well, I think that covers most things. I'll, probably just you know in my own time, work on the other. um The other updates that we had that are mostly content and then I'll, just uh put in another merge request for those.

C

Yeah, so the pi the deploy job has passed. So if you refresh or actually it says their view, app, that's where you would go to um yeah to the right.

A

C

Yeah right there and you can actually see that the con, at least for me I, don't know yeah. The content is blocked, so we'll have to look into Vimeo and how to get that working. But.

A

C

We can do that out of this call and then okay.

B

All right, Tori are you, do you have that open locally.

C

I just have the review app open.

B

Okay, because I know that ad blockers will prevent these iframes from loading on here, we've had that happen with figma as well. So if you have any kind of a if you're, using any blockers or or anything, it will prevent iframes from loading so.

E

A

Yeah, um knowing that the content is being blocked, let's say that it's not um the ad blockers. How should we approach this Mr.

C

Network this is a funky yeah. This is a great example of like here's a first time, adding something we don't know how it's going to work, let's just assign it to Tori or Jeremy and have them take a look and figure out if, like what the problem is um and then whether that means we need to switch to YouTube, so the content isn't blocked or something needs to change in the code or whatever. It is then we'll have that discussion in the merge request, and then we can add. You know guidelines to our docs.

C

Let's say: either: here's how you embed, Vimeo or.

D

C

Use Vimeo use YouTube or whatever the conclusion ends up being so then it's available to everyone. Okay, does that make sense.

A

Yeah, okay, so this oh the label, so this is something that I should have done um when I was filling out. The more information from right information on the uh merge request, right I should have added that label. Yeah.

C

I mean you want to add the label you didn't so this is a great example of like we have Bots that'll tell you that you need to add the label so no big deal it'll. It can get added later, but yeah. If you add it, when you first create the merge request, then this bot won't yell at you. Yeah.

A

Okay, cool um all right, so I guess we will just figure this one out offline, but thanks everyone.

A

um My next steps um will be that I'm gonna try to get all this information into like our handbook, just for like onboarding, like some of our team members like okay, refer to this recording um and here's kind of like the way to approach it from the web IDE standpoint. Since um that's a little bit different than how you all do it.

D

There's nothing on the Vimeo side by the way that would suggest why wouldn't why it would be blocked. I was just wondering if there was a domain restriction or something but I, checked and there's there's nothing. I can see.

C

C

um Monica I would, just in anything that you can link to reference from our docs is best so that we don't have to.

D

C

It in two places or like say I, don't know something like, for example, Scott's working on that.

A

C

Thing for for uh embedding svgs or figures, if you add the content to your docs and then that changes in pajamas and then we don't realize we need to update it in your docs. So anytime you can link back to the docs and pajamas is best. So it's not duplicated.

A

Yeah I'll do that. um Is there like an issue open, so we can uh stay up to date on progress for that, so that we can I can link it once it's live, I don't know Jeremy do you know.

B

uh I'm not sure at this point, I'd have to look yeah.

C

Yeah we'll take a look at that and then let you.

A

Know also hi Brock and Vic I didn't I had it like on the screen share, so I didn't see everyone's faces so I'm like oh look.

D

I came in halfway, I was on a call. Sorry, that's.

A

Okay, I was just like Tina and Joanna are learning so much okay. Well, awesome! Thank you. Everyone for joining and I'm excited just to talk about. You know the future, updates that we'll be making I think some of Vic's content is next after motion. So thank you, Jeremy and Tori for your time as well.

C

Yeah, of course, does anyone have any questions before we drop off.

E

I, don't think so. This was helpful to see it uh and and again, like plus one thousand to what Monica said: Thank You, Tori and Jeremy for all the support. It's awesome to be able to have these up on the pajama site and be able to reference them. We constantly reference them with our agency partners and contractors. So very much appreciate that.

C

Awesome thanks Monica for getting this all set up. Yeah.

B

Yeah yeah great agenda so.

A

All right, everyone enjoy your day, talk to you later.

B

A