Improve appearance of project logos #13

Open
opened 2022-05-21 22:37:30 +00:00 by bvisness · 0 comments
Owner

Project logos currently are a real awkward fit sometimes:

image

This is not great. The background-size: cover looks good for some logos, but seems to be a poor choice for most.

There are a few considerations to make here:

  • Project cards often end up slightly tall when viewed on mobile, because the project description wraps to more lines.
  • Project logos sometimes contain text, and cutting off text looks really disastrous.
  • We currently have no aesthetic guidelines for logos whatsoever, and this combined with...well, programmers, often results in logos that just look bad in a majority of use cases.

A good solution to this problem would not just do background-size: contain, but would consider what we could do to make logos look good in more situations, possibly involving some recommended aspect ratios and aesthetic guidance about where to put key content.

For inspiration, we could look at itch.io and what they do for their logos. I believe they allow you to upload key art for a few different important use cases on the site, and while that is probably overkill for us, they may have some good ideas we could adapt.

This is on the jam milestone because we're probably going to use personal projects for the jam.

Project logos currently are a real awkward fit sometimes: ![image](/attachments/0296a6c0-75d8-4a6f-9390-1017f6e788f8) This is not great. The `background-size: cover` looks good for some logos, but seems to be a poor choice for most. There are a few considerations to make here: - Project cards often end up slightly tall when viewed on mobile, because the project description wraps to more lines. - Project logos sometimes contain text, and cutting off text looks really disastrous. - We currently have no aesthetic guidelines for logos whatsoever, and this combined with...well, _programmers_, often results in logos that just look bad in a majority of use cases. A good solution to this problem would not just do `background-size: contain`, but would consider what we could do to make logos look good in more situations, possibly involving some recommended aspect ratios and aesthetic guidance about where to put key content. For inspiration, we could look at itch.io and what they do for their logos. I believe they allow you to upload key art for a few different important use cases on the site, and while that is probably overkill for us, they may have some good ideas we could adapt. This is on the jam milestone because we're probably going to use personal projects for the jam.
bvisness added this to the Jam 2022 milestone 2022-05-21 22:37:30 +00:00
bvisness added the
design
good first issue
labels 2022-05-21 22:37:30 +00:00
Sign in to join this conversation.
No Milestone
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: hmn/hmn#13
No description provided.