Refresh Press page

Description

The current Press page (https://about.gitlab.com/press/) contains images of the application that are outdated.

We need to refresh those screenshots with the current layout.

cc @luke

@regisF who is the best person to coordinate with to get updated screenshots? @awhildy? Once we have them I'm happy to create a MR with the updated screenshots.

@luke thanks! Yes, I think we have someone make sure we have a pretty screenshot from @awhildy 's team.

Yep! Is it the same list of screenshots that are currently on that page? Any changes?

@awhildy thanks for this pertinent question.

I'd say it's not complete at all

Let's go with:

• project view
• a view that shows pipelines
• merge request
• diff view with comments
• issue boards

@awhildy if you / your team want me to help you out with those screenshots, just let me know.

@regisF and @awhildy can we use the screenshots from the features or EE page?

They should cover most, if not all, of the screens you've request Regis

@amara @awhildy if that's easier and if they contain meaningful data, yes.

By meaningful, I mean, if those screenshots end up in the press, they have to contain fake data, but fake data that looks real and pertinent.

@regisF they should be up to par, check them out: https://about.gitlab.com/features/

diff view with comments might be the only one that's not on /features

Thanks Luke.

Yea, you're right. We don't have a screen for diff view since inline commenting was not in the screenshot row.

Good thinking @amara! So it sounds like we just need 1 screenshot?

And thanks @timpeix! It would be awesome to have your help! Would you be able to help out with the one screenshot needed?

@amara @luke @regisF I'm guessing the screenshot should be the same size as those on about.gitlab.com/features? It looks like those assets are 1720x1146px, but scaled down to a width of 800px on the site, and that includes the shadow (https://about.gitlab.com/images/feature_page/screenshots/03-gitlab-pages.png).

@awhildy for these screenshots we can use the original assets (1720x1146px) as those will likely be more accommodating than the scaled down versions with shadows included.

Does anyone on the UX team have a Sketch mockup of the diff view that we can export/screenshot? I believe all of the other screenshots came from Sketch files.

Ah, ok. Makes sense @luke.

@dimitrieh has a diff.Sketch file here: https://gitlab.com/gitlab-org/gitlab-design/tree/master/progress/dimitrie/Object-views-issues-mr-pipelines-builds-commits/diffs. Is that something we can use for this?

@regisF @amara @luke @awhildy Following the conversation, we nee one more additional screen shot diff view with comments for which I can use @dimitrieh 's sketch file. All other screenshots can be taken from https://about.gitlab.com/features/ or as @luke mentioned from Sketch files. All screenshots in 1720x1146px, correct? I'm happy to replace all screenshots with an updated version, just need to know exactly where to take them from.

nice! for the people without sketch. there are always sketch previews automatically rendered out to bitmaps, like you can see here: https://gitlab.com/gitlab-org/gitlab-design/tree/master/progress/dimitrie/Object-views-issues-mr-pipelines-builds-commits/diffs/diffs-sketch-previews

this way you can open it with any bitmap editor and crop out any image you want

Thanks @dimitrieh! Looking closer at the raw screenshots that we used for /features they are actually 2560x1600, which we also plan to user here. Is it possible to get a diff view with comments screenshot that size? I wasn't able to get any of your sketch assets to scale and fit 2560x1600 perfectly. cc @awhildy

Just to understand, is there a reason we are going off of sketch assets instead of screenshots of the actual product?

@awhildy I think this is why: https://gitlab.com/gitlab-com/www-gitlab-com/issues/1113#note_22676622

I see. Most of the images on https://about.gitlab.com/features/ felt like they were just screenshots of the GitLab CE, but maybe I just fell for the faked data

Hey everyone, here's an update:

• I've created new screenshots based on the sketch file features-page-v2-screenshot-template by @dfranca
• I used the 2560 x 1600 px screenshots that @luke added to https://gitlab.com/gitlab-com/marketing/tree/master/design/_resources/product-screenshots last week
• Created a new version of that template using 2560 x 1600 px as @luke suggested in https://gitlab.com/gitlab-com/www-gitlab-com/issues/1113#note_22742622 and exported as PNGs.

I matched the screenshots with the list @regisF gave in https://gitlab.com/gitlab-com/www-gitlab-com/issues/1113#note_22599597

project view

gitlab-pages.png

a view that shows pipelines

continuous-integration.png

merge request

merge-requests.png

issue boards

issue-board.png

as @luke mentioned https://gitlab.com/gitlab-com/www-gitlab-com/issues/1113#note_22742622 we still need a 2560 x 1600 px version of diff with comments. @dimitrieh can you help us out?

Thanks @timpeix

The only thing I would change, is gitlab-pages.png. We see the mention "example" multiple times. It gives me same feeling as if I was looking at Lorem Ipsum :-) Can we change this to something else?

@regisF first I would need to know where to take an alternate project view from, especially if it needs fake data. What data / entries would you suggest for this view?

@luke are the screenshots you added to https://gitlab.com/gitlab-com/marketing/tree/master/design/_resources/product-screenshots exported from sketch files or actual screenshots from the site?

@timpeix gitlab-pages.png image has the title above called "project view", which this image isn't - what you've shown is the group project view.

You could grab a screenshot of https://gitlab.com/gitlab-org/gitlab-ce for this. @luke what do you think?

@regisF I don't see any reason why we couldn't screenshot https://gitlab.com/pages/pages.gitlab.io — which view, exactly, would you like to see?

@regisF ah, sorry...it's a project view we are looking for there. So yes, we can use https://gitlab.com/gitlab-org/gitlab-ce as you referenced above if there are no objections.

mentioned in merge request !4847 (merged)

@regisF I was able to put together a diff view from @dimitrieh's Sketch file, it's not quite 1600px tall but I think it will work. Let me know if the content on the screenshot will work and I'll add it to the MR.

@luke I'm not sure it does, just because it shows a screenshot (within this screenshot) and we might think that the buttons that appear in it ("Preserve log" etc...) is part of the MR process, which does not. And at first glance, I doubt that people will notice that it's a screenshot, and therefore might think we have this tool built-in.

@regisF I thought some of those buttons/icons didn't look right, but it was the only complete screen I could find. Is there currently anything (fairly simple, no sensitive info) in the CE project that we can screenshot?

@luke there is no sensitive info on CE Everything is public. However, https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/8898/diffs is a good example, I'd say.

closed via merge request !4847 (merged)

mentioned in commit virtuacreative/www-gitlab-com@8da55b84

@luke are you still in need of screens on that? as per https://gitlab.com/gitlab-com/www-gitlab-com/issues/1113#note_22742622

@dimitrieh we got it taken care of, thanks for checking in!