Codeberg pages appearance update suggestion #5

Closed
opened 1 year ago by mray · 16 comments
mray commented 1 year ago
Collaborator

The new codeberg pages landing page is awesome!
I have a suggestion on how to enhance it:

image

Some benefits in my eyes:

  • clearer color coding
  • new logo
  • icons focus on temporal order

It is just a lazy screenshot, but maybe somebody sees value and acts on it. :)

The new codeberg pages landing page is awesome! I have a suggestion on how to enhance it: ![image](/attachments/da8a2a5b-9821-4f29-ae69-e7a74e0b414f) Some benefits in my eyes: * clearer color coding * new logo * icons focus on temporal order It is just a lazy screenshot, but maybe somebody sees value and acts on it. :)
118 KiB
hw commented 1 year ago
Owner

I like it. As soon a PR comes in, we can deploy to codeberg-test.

I like it. As soon a PR comes in, we can deploy to codeberg-test.

Hi, I really like your ideas and I have also a few suggestions:

  • Apply some shadow to the icons (as before) to clearly seperate them from the card description and title.

  • Don't split the main title ("Codeberg Pages.") into two sections and apply the same color as used in your logo. Here is a suggestion:

grafik

Hi, I really like your ideas and I have also a few suggestions: - Apply some shadow to the icons (as before) to clearly seperate them from the card description and title. - Don't split the main title ("Codeberg Pages.") into two sections and apply the same color as used in your logo. Here is a suggestion: ![grafik](/attachments/10a0fc7a-eafe-4c1b-88a4-54352031fef6)
mray commented 1 year ago
Poster
Collaborator

The shadows under the numbers are a good catch. It makes total sense to give them a shadow. I either forgot or was too lazy – thanks for pointing that out.
I guess you had something in mind like that:

image

I think I get you point about merging the "Pages" into the title, but I see a problem. It impacts ont the CI that takes size, position & kerning into account. Also the dot makes it part of a sentence – which isn't really a desired handling imho. For reference I quickly put the approaches side by side:

image

In that exaple you notice how the text gets much smaller in contrast to the figure.
Another issue is that we want to be clear about "Codeberg" not being "Codeberg Pages".
These are some reasons why we often find design manuals stressing that the word/figurative mark is supposed to stay "untouched".

I went ahead anyway and tried to do something that would still work (but I still lilke the "all-pages-stuff-is-dark approach" better)

image

The shadows under the numbers are a good catch. It makes total sense to give them a shadow. I either forgot or was too lazy – thanks for pointing that out. I guess you had something in mind like that: ![image](/attachments/fc0cfff4-7f00-4922-9aa7-1b3a20202940) I think I get you point about merging the "Pages" into the title, but I see a problem. It impacts ont the CI that takes size, position & kerning into account. Also the dot makes it part of a sentence – which isn't really a desired handling imho. For reference I quickly put the approaches side by side: ![image](/attachments/f2a90c4a-2b03-4384-bc8b-394207a5838d) In that exaple you notice how the text gets much smaller in contrast to the figure. Another issue is that we want to be clear about "Codeberg" not being "Codeberg Pages". These are some reasons why we often find design manuals stressing that the word/figurative mark is supposed to stay "untouched". I went ahead anyway and tried to do something that *would* still work (but I still lilke the "*all-pages-stuff-is-dark approach*" better) ![image](/attachments/a2cb7fc8-a6f2-4d86-a9ea-d9a3db30b33e)

Concerning the icons: Yes, that's what I meant. They look much better now! 😃

You're absolutely right about the second part. I have been thinking a bit and these are some ideas of mine (I'm sorry for the poor resolution):

1st suggestion:

image

2nd suggestion:

image

Concerning the icons: Yes, that's what I meant. They look much better now! :smiley: You're absolutely right about the second part. I have been thinking a bit and these are some ideas of mine (I'm sorry for the poor resolution): 1st suggestion: ![image](/attachments/436be838-bf07-4f0e-8de1-40432d992bcf) 2nd suggestion: ![image](/attachments/fdd824d5-6781-4260-b1c5-56aeed7d1d14)
mray commented 1 year ago
Poster
Collaborator

I'm quickly reesponding to a post on https://codeberg.org/Codeberg/build-deploy-gitea/pulls/17#issuecomment-69011

In my opinion the arrangement is relatively heavy in comparison. The ease of use of this practical feature gets lost in the rather complex layout. It offers some more information at places, but nothing that the target audience of codeberg.org users would miss imho. Just for comparison I put the new layout sisde by side to my initial one:

image

It is an interesting approach to color coding, and also makes use of extra illustration – which I like. But the depiction of a website is a bit "cheesy" and I'd rather propose to establish a side-wide illustration style that would be used in more places (consistency). That would probably be after settling on a "Codeberg" palette.

I'm quickly reesponding to a post on https://codeberg.org/Codeberg/build-deploy-gitea/pulls/17#issuecomment-69011 In my opinion the arrangement is relatively heavy in comparison. The ease of use of this practical feature gets lost in the rather complex layout. It offers some more information at places, but nothing that the target audience of codeberg.org users would miss imho. Just for comparison I put the new layout sisde by side to my initial one: ![image](/attachments/51ca3bee-1dc7-4a4b-b3ce-822e8c7f4097) It is an interesting approach to color coding, and also makes use of extra illustration – which I like. But the depiction of a website is a bit "cheesy" and I'd rather propose to establish a side-wide illustration style that would be used in more places (consistency). That would probably be after settling on a "Codeberg" palette.
177 KiB
hw commented 1 year ago
Owner

Do we have a PR for this issue in the works?

Do we have a PR for this issue in the works?
mray commented 1 year ago
Poster
Collaborator

Do we have a PR for this issue in the works?

Not from me. I only contributed mockups here so far.

> Do we have a PR for this issue in the works? Not from me. I only contributed mockups here so far.
hw commented 1 year ago
Owner

deployed

deployed
hw closed this issue 1 year ago
mray commented 1 year ago
Poster
Collaborator

I'm glad to see the new font and logo, but some key things are still unchanged:

image

I'm glad to see the new font and logo, but some key things are still unchanged: ![image](/attachments/f3a5f013-d5f5-437c-a6e0-a7326ee87320)
125 KiB
hw reopened this issue 1 year ago

@mray wrote: Another issue is that we want to be clear about “Codeberg” not being “Codeberg Pages”.

I am preparing a project for broader announcement, and its name is also two words, but should not be a sentence. I solved by putting a bullet char between the two words, and you might do that for Codeberg Pages too.

Codeberg • Pages

The advantage is that you might use it to denote a range of services that way, e.g.

Codeberg • Docs

Codeberg • FAQ

> @mray **wrote**: Another issue is that we want to be clear about “Codeberg” not being “Codeberg Pages”. I am preparing a project for broader announcement, and its name is also two words, but should not be a sentence. I solved by putting a bullet char between the two words, and you might do that for Codeberg Pages too. # Codeberg • Pages The advantage is that you might use it to denote a range of services that way, e.g. ### Codeberg • Docs ### Codeberg • FAQ
mray commented 1 year ago
Poster
Collaborator

… you might do that for Codeberg Pages too.

I guess that wouldn't change that much in our case:

image

> … you might do that for Codeberg Pages too. I guess that wouldn't change that much in our case: ![image](/attachments/59568c8b-48ad-4b48-ad33-cf7a953ea133)

I am no UX designer, ha ha, but to me - with the bullet char being big enough - it communicates separation and it reads as Codeberg [slash] Pages :)

I am no UX designer, ha ha, but to me - with the bullet char being big enough - it communicates separation and it reads as `Codeberg [slash] Pages` :)
hw commented 1 year ago
Owner

unrelated and minor question: should it be "pages" or "page" without "s"?

unrelated and minor question: should it be "pages" or "page" without "s"?

I would say "pages", or it would be confusing (the codeberg page?). You deal out multiple pages to multiple projects. And it would align to how GH presents it.

(Alternatively if you want to distinguish from GH, you might look for a different word altogether, e.g. "Sites", "Websites", "Spaces", "Presentation", idk.)

I would say "pages", or it would be confusing (_the_ codeberg page?). You deal out multiple pages to multiple projects. And it would align to how GH presents it. (Alternatively if you want to distinguish from GH, you might look for a different word altogether, e.g. "Sites", "Websites", "Spaces", "Presentation", idk.)
hw commented 1 year ago
Owner

good point, the .page TLD did not exist when this was framed.

good point, the `.page` TLD did not exist when this was framed.
n added the
Kind: Web Design
label 4 months ago
Poster
Collaborator

timed out. probably won't fix.

timed out. probably won't fix.
mray closed this issue 1 month ago
Sign in to join this conversation.
No Milestone
No Assignees
4 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.