Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update "Upload" icon in Source UI #4535

Closed
ninavizz opened this issue Jun 18, 2019 · 4 comments · Fixed by #4548
Closed

Update "Upload" icon in Source UI #4535

ninavizz opened this issue Jun 18, 2019 · 4 comments · Fixed by #4548

Comments

@ninavizz
Copy link
Member

ninavizz commented Jun 18, 2019

Description

Per #2508 and #1536, the upload icons were changed; first, to a datastore icon, and later to a cloud icon. The design rationale to add the datastore icon was to avoid use of cloud semiotics in the icon, which can scare users. The datastore icon confused users, however, so another cloud icon replaced it.

This issue is to replace the latest cloud icon with a more common upload icon that both speaks to the needs flagged in #1536, while also considering the user feedback that the (admittedly obscure) datastore icon was unclear.

User Needs Evidence

See above

Implementation

The attached files were created from the PNGs currently used in the Source UI. Same size, same placement of the art, same whitespace—so ideally, only the filenames would need to be changed in the code.

@ninavizz
Copy link
Member Author

^ Happy to discuss in forthcoming UX meeting; wanted to get issue in GH for now, however.

@ninavizz
Copy link
Member Author

Discussed in UX meeting. Agreed to action items:

  • Both icons to be replaced
  • @eloquence said he'd do as an off-sprint PR
  • Do this, before updating screenshots (kind of a duh, but shrugs)

@ninavizz
Copy link
Member Author

ninavizz commented Jun 22, 2019

Updated files, based on first rev by Erik revealing sizing weirdness (and wanting to tweek the grey/blu on the Submit page logo):

@eloquence
Copy link
Member

We've poked at this today and are pretty happy with the final version (comment above) of the small icons, but the large one doesn't scale well in Firefox to the 80x80 size it's rendered at (it's nice to use higher res versions to enable zooming on high DPI displays without an 8-bit style appearance). Nina will investigate further.

eloquence added a commit that referenced this issue Jun 24, 2019
This adds a crisp-edges CSS class to force cleaner rendering of
large source PNGs at smaller sizes (the icons are a bit larger than
the rendered output to accommodate zooming).

The new icon was designed by Nina Alter (@ninavizz) and is not
derived from FontAwesome, hence not in the font-awesome directory.

Resolves #4535
eloquence added a commit that referenced this issue Jun 24, 2019
This adds a crisp-edges CSS class to force cleaner rendering of
large source PNGs at smaller sizes (the icons are a bit larger than
the rendered output to accommodate zooming).

The new icon was designed by Nina Alter (@ninavizz) and is not
derived from FontAwesome, hence not in the font-awesome directory.

Resolves #4535
eloquence added a commit that referenced this issue Jun 24, 2019
Adds rendering rule for the icon to accomplish two things:
- give the icon room to breathe
- force crisp rendering, to render large source image cleanly
  at smaller size (the source PNG is a bit larger than the
  default size to accommodate zooming)

The crisp rendering rule may make sense as a generic rule at a
later point, but so far this seems to be the best candidate
for using it.

The new icon was designed by Nina Alter (@ninavizz) and is not
derived from FontAwesome, hence not in the font-awesome directory.

Resolves #4535
eloquence added a commit that referenced this issue Jun 25, 2019
Adds rendering rule for the icon to accomplish two things:
- give the icon room to breathe
- force crisp rendering, to render large source image cleanly
  at smaller size (the source PNG is a bit larger than the
  default size to accommodate zooming)

The crisp rendering rule may make sense as a generic rule at a
later point, but so far this seems to be the best candidate
for using it.

The new icon was designed by Nina Alter (@ninavizz) and is not
derived from FontAwesome, hence not in the font-awesome directory.

Resolves #4535
eloquence added a commit that referenced this issue Jun 25, 2019
Adds rendering rule for the icon to accomplish two things:
- give the icon room to breathe
- force crisp rendering, to render large source image cleanly
  at smaller size (the source PNG is a bit larger than the
  default size to accommodate zooming)

The crisp rendering rule may make sense as a generic rule at a
later point, but so far this seems to be the best candidate
for using it.

The new icon was designed by Nina Alter (@ninavizz) and is not
derived from FontAwesome, hence not in the font-awesome directory.

Resolves #4535
kushaldas pushed a commit that referenced this issue Sep 25, 2019
Adds rendering rule for the icon to accomplish two things:
- give the icon room to breathe
- force crisp rendering, to render large source image cleanly
  at smaller size (the source PNG is a bit larger than the
  default size to accommodate zooming)

The crisp rendering rule may make sense as a generic rule at a
later point, but so far this seems to be the best candidate
for using it.

The new icon was designed by Nina Alter (@ninavizz) and is not
derived from FontAwesome, hence not in the font-awesome directory.

Resolves #4535
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants