Make highlighting of screenshots nicer #52

lhinderberger commented 2020年09月01日 10:39:04 +02:00

@n suggested in #47 to use zoom and blur effects similar to how GitHub does it, instead of red circles.

I think we should agree on a highlighting style and apply this Documentation-site-wide.

@n suggested in #47 to use zoom and blur effects similar to how GitHub does it, instead of red circles. I think we should agree on a highlighting style and apply this Documentation-site-wide.

lhinderberger commented 2020年09月20日 00:56:57 +02:00

My opinion: Zoom-and-blur looks really nice, but (correct me if I'm wrong 😉) it is a bit harder to do than adding simple red circles. Remember that we might have to re-do screenshots as Gitea/Codeberg develops and changes its shape.

So I'm personally torn in between the time-efficient, effective but less visually appealing solution of adding big red circles and the more time-intensive, equally effective (plus maybe drawing attention a bit better?) and visually very nice solution of zoom and blur.

What's the general feeling? Do we lean towards quick-but-plain or beautiful-but-elaborate?

I personally like both approaches, but I'm slightly leaning towards quick-but-plain.

My opinion: Zoom-and-blur looks really nice, but (correct me if I'm wrong :wink:) it is a bit harder to do than adding simple red circles. Remember that we might have to re-do screenshots as Gitea/Codeberg develops and changes its shape. So I'm personally torn in between the time-efficient, effective but less visually appealing solution of adding big red circles and the more time-intensive, equally effective (plus maybe drawing attention a bit better?) and visually very nice solution of zoom and blur. What's the general feeling? Do we lean towards quick-but-plain or beautiful-but-elaborate? I personally like both approaches, but I'm slightly leaning towards quick-but-plain.

n commented 2020年09月21日 10:23:29 +02:00

Agreed!

What do you think about just cropping screenshots? It shouldn't be much more effort since we can do it on the fly. See this GitHub guide for examples.

Agreed! What do you think about just cropping screenshots? It shouldn't be much more effort since we can do it on the fly. See this [GitHub guide for examples](https://guides.github.com/features/pages/).

lhinderberger commented 2020年09月22日 01:07:51 +02:00

I like it! 👍 It also makes it better readable, especially on mobile.

_{As a side note: I wonder if there are any handy tools out there that speed up making and highlighting screenshots in a consistent style.}

I like it! :thumbsup: It also makes it better readable, especially on mobile. _{As a side note: I wonder if there are any handy tools out there that speed up making and highlighting screenshots in a consistent style.}

lhinderberger commented 2020年09月26日 12:40:11 +02:00

Then again, for highlighting and explaining multiple elements on a screen (like in Orienting yourself on Codeberg), how would that approach work?

Then again, for highlighting and explaining multiple elements on a screen (like in [Orienting yourself on Codeberg](https://docs.codeberg.org/getting-started/first-steps/)), how would that approach work?

n commented 2020年09月26日 12:44:15 +02:00

It would depend on the context, but when multiple elements are highlighted it is fine to have a full screenshot.

It would depend on the context, but when multiple elements are highlighted it is fine to have a full screenshot.

lhinderberger commented 2020年09月26日 12:45:49 +02:00

In that case, would we fall back to the red circles and numbers as well?

In that case, would we fall back to the red circles and numbers as well?

n commented 2020年09月27日 09:53:41 +02:00

Yes. Though we should use rounded rectangles instead of circles there since it more accurately represents the button there.

Yes. Though we should use rounded rectangles instead of circles there since it more accurately represents the button there.

n commented 2020年09月27日 09:56:41 +02:00

Here's a guide that I think is worth following: https://medium.com/technical-writing-is-easy/screenshots-in-documentation-27b45342aad8

Here's a guide that I think is worth following: https://medium.com/technical-writing-is-easy/screenshots-in-documentation-27b45342aad8

n commented 2020年09月27日 10:03:46 +02:00

Also, in my opinion, the first picture on the First Steps article is not necessary since there's a big register button at the center of the page.

Also, in my opinion, the first picture on the First Steps article is not necessary since there's a big register button at the center of the page.

lhinderberger commented 2020年09月27日 13:26:06 +02:00

Yes, the guidelines shown in the article sound very reasonable. 👍
I also like the style the author uses for their numbering.

I'll sum up the results of this discussion in #69 next weekend, and then we could get started re-doing the screenshots in the new style.

Yes, the guidelines shown in the article sound very reasonable. 👍 I also like the style the author uses for their numbering. I'll sum up the results of this discussion in #69 next weekend, and then we could get started re-doing the screenshots in the new style.

lhinderberger commented 2020年09月27日 13:26:31 +02:00

As for the first picture of First Steps: True that. Feel free to remove it, if you want :)

As for the first picture of First Steps: True that. Feel free to remove it, if you want :)

lhinderberger commented 2020年10月05日 00:48:22 +02:00

Should we open an extra issue for the task of updating previous screenshots to the current guidelines? Should we even do that at all or just apply the guidelines for future screenshots, to save some time?

Should we open an extra issue for the task of updating previous screenshots to the current guidelines? Should we even do that at all or just apply the guidelines for future screenshots, to save some time?

n commented 2020年10月05日 12:41:29 +02:00

Let's keep it to future screenshots. We might want to update them once Gitea 1.13 is released :)

Let's keep it to future screenshots. We might want to update them once Gitea 1.13 is released :)

lhinderberger commented 2020年10月05日 22:13:40 +02:00

True 😉 Okay, then I'm closing this issue here.

True :wink: Okay, then I'm closing this issue here.