Project

General

Profile

Design/UX #14712

Design/UX #13998: Homepage Redesign

Default avatar images

Added by Colin McDonald 5 months ago. Updated 2 months ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
Public Portfolio
Target version:
Start date:
2021-08-12
Due date:
% Done:

0%

Estimated time:

Description

Sara had the great idea on yesterday's dev call to redesign the default avatar icons for members, groups and sites to match the overall new visual feel. I'm assigning it to her here, where she can ask for more feedback from the team and share drafts.

We also noted yesterday that the main icon on internal pages like this:
https://commons.gc.cuny.edu/groups/cac-community-team-project-planning/

These icons 150x150, so we'll need the new defaults to be at least that large, and we'll also be pulling the different sizes to different places on the new design where we might want to incorporate a bigger or smaller icon.

5d64323757db0-bpfull.png (11 KB) 5d64323757db0-bpfull.png Colin McDonald, 2021-08-16 12:06 PM
Screenshot_2021-10-27_09-02-19.png (273 KB) Screenshot_2021-10-27_09-02-19.png Boone Gorges, 2021-10-27 10:02 AM
Screenshot_2021-10-27_08-57-45.png (72.3 KB) Screenshot_2021-10-27_08-57-45.png Boone Gorges, 2021-10-27 10:02 AM
Screenshot_2021-10-27_09-01-55.png (152 KB) Screenshot_2021-10-27_09-01-55.png Boone Gorges, 2021-10-27 10:02 AM
Screenshot_2021-10-27_08-57-19.png (171 KB) Screenshot_2021-10-27_08-57-19.png Boone Gorges, 2021-10-27 10:02 AM

Related issues

Related to CUNY Academic Commons - Bug #13994: Some Site icons missing on Site archiveResolved2021-02-16

History

#1 Updated by Raymond Hoh 5 months ago

  • Related to Bug #13994: Some Site icons missing on Site archive added

#2 Updated by Boone Gorges 5 months ago

  • Target version set to 1.19.0

Tentatively putting this into the 1.19.0 milestone, in hopes that we can tackle alongside the homepage redesign.

#3 Updated by Sara Cannon 3 months ago

Avatar images 150x150 jpgs are shared in this google drive folder: https://drive.google.com/drive/folders/1izn1V4-kUz2OPlJw4t9FWvwE-E2Dxu0p?usp=sharing

#4 Updated by Boone Gorges 3 months ago

  • Assignee changed from Sara Cannon to Boone Gorges

I'll try to get this implemented in the upcoming days so that the team can decide whether the all-blue scheme is a good one.

#5 Updated by Raymond Hoh 3 months ago

I'll try to get this implemented in the upcoming days so that the team can decide whether the all-blue scheme is a good one.

I've already implemented this for user avatars :)

Check cdev for the change. Code is in wp-content/plugins/bp-custom.php. Haven't committed it yet. For the hash, I'm using crc32() on the email address and using the modulus of the numeric hash to get the random number from 1 to 5 to be used for the default avatar.

I had to upload the default avatar images to production at /blogs.dir/1/files/avatars/random/ so Gravatar could pick it up for display on cdev.

#6 Updated by Boone Gorges 3 months ago

Thanks for doing this so quickly, Ray! Let's try to get some eyes on cdev to see what we think. I've also attached some screenshots.

I assume we're going to use the same defaults for groups and sites as well, correct?

#7 Updated by Matt Gold 3 months ago

To be honest, the blues look fine to me. Happy to hear objections from those who don't agree!

#8 Updated by Boone Gorges 3 months ago

Ray, quick follow-up that I had to commit your change in order to merge with some other stuff.

#9 Updated by Raymond Hoh 3 months ago

  • File deleted (Screenshot_2021-10-26_13-30-38.png)

#10 Updated by Raymond Hoh 3 months ago

  • File deleted (Screenshot_2021-10-26_13-28-18.png)

#11 Updated by Raymond Hoh 3 months ago

I assume we're going to use the same defaults for groups and sites as well, correct?

Yeah, I wasn't sure what we wanted to do here. I assumed the opposite as I think groups and sites should have a different style since they are different objects.

To be honest, the blues look fine to me. Happy to hear objections from those who don't agree!

Looking at the screenshots a bit, I feel the two hues of blue used for the line and background are too similar. Perhaps we can either darken the line or lighten the background so there is a bit more contrast?


(Side note: I removed two screenshots that were not related to this ticket and meant for #13998 here .)

#12 Updated by Colin McDonald 3 months ago

I agree with Ray that we might want to consider a different color or treatment for groups and sites. Is it too straightforward to consider an orange and a green in the canonical Commons color scheme, one each for groups and sites? I think the lines look ok generally, but I'm open to other contrast as Ray mentioned.

#13 Updated by Boone Gorges 3 months ago

I think we definitely need to do something for groups and sites. The gravatar defaults don't fit the theme.

I'm sensitive to Sara's line of reasoning here. The purpose of avatars is to assist users in scanning lists and conversations. If the defaults are all the same, they become useless for this purpose. And having users all default to blue while sites default to orange (for example) doesn't help this. I'd be in favor of having 3-5 visually distinct defaults, and have all items (groups, sites, users) pull from this default set.

#14 Updated by Sara Cannon 3 months ago

  • Assignee changed from Raymond Hoh to Sara Cannon

I'm also in favor of having all items pulled from a default set.

I've played around with some new variants - you can see them here: https://share.getcloudapp.com/ApuERrBj

Files in Google Drive: https://drive.google.com/drive/folders/1G_G3cD9pzqy7rxHVHeNB4IEYLmOzRpcN?usp=sharing

#15 Updated by Raymond Hoh 3 months ago

I've updated cdev so groups and sites use the new default avatar set: https://github.com/cuny-academic-commons/cac/commit/08ed2e5611e0e98ca9090b1dc19a9b070080a4ed.

For members, the new image set may not be ready for some users due to Gravatar caching: https://meta.stackexchange.com/a/139673. So if you're seeing an older avatar, check back in an hour or so and hopefully Gravatar's CDN is updated by then.

#16 Updated by Boone Gorges 3 months ago

Seeing these new avatars in practice, I think they strike the perfect balance between variability and subtlety.

#17 Updated by Matt Gold 3 months ago

I heartily agree. Beautiful work, Sara!!!!

#18 Updated by Boone Gorges 2 months ago

  • Category name set to Public Portfolio
  • Status changed from New to Resolved

Going to mark this one as resolved.

Also available in: Atom PDF