Improve the Notfication Bell Icon by using the KAlarm design
ClosedPublic

Authored by trickyricky26 on Jan 25 2019, 7:40 PM.

Details

Summary

BUG: 400570

FIXED-IN: 5.55

Improve the preferences-desktop-notification-bell icon by using the design from the KAlarm app icon.

Test Plan

Diff Detail

Repository
R266 Breeze Icons
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.
trickyricky26 created this revision.Jan 25 2019, 7:40 PM
Restricted Application added a project: Frameworks. · View Herald TranscriptJan 25 2019, 7:40 PM
Restricted Application added a subscriber: kde-frameworks-devel. · View Herald Transcript
trickyricky26 requested review of this revision.Jan 25 2019, 7:40 PM
trickyricky26 edited the summary of this revision. (Show Details)EditedJan 25 2019, 7:42 PM
trickyricky26 edited the test plan for this revision. (Show Details)
trickyricky26 added a reviewer: VDG.

I have made some slight adjustments from the original KAlarm design, such as a shadow line at the bottom instead of orange, to better fit our style.
Should I make those changes in the original icon as well?

trickyricky26 edited the summary of this revision. (Show Details)Jan 25 2019, 7:44 PM
krop added a subscriber: djarvie.Jan 26 2019, 9:26 AM
ndavis added a subscriber: ndavis.EditedJan 26 2019, 6:12 PM

I have made some slight adjustments from the original KAlarm design, such as a shadow line at the bottom instead of orange, to better fir our style.
Should I make those changes in the original icon as well?

I think the original icon, and by extension this one, needs a bit of a redesign. It's too flat. I know it's hard to make an icon with no overlapping parts look 3D, but using more stops in the gradient to increase the complexity of it and give the curves more depth can help.

trickyricky26 planned changes to this revision.Jan 26 2019, 8:49 PM

I will try to visually improve the design.

I actually think this new icon is pretty great as-is (at the minimum, it's much better than the existing icon) but I agree that it could benefit from a bit more depth.

Here's another idea: maybe tilt the bell a bit to make it looks like it's in the middle of ringing--say, 20 degrees clockwise.

Any update/progress on this?

I changed the shape a bit, but making it less flat is difficult: Linear gradients look off because of the curvature of the bell.

Other options are blurring a curved object or using mesh gradients, but I'm not sure how well, if it all, these will work in icons.
This is what I have:

How about putting a line under the little nubbin on top?

ndavis added a comment.EditedFeb 1 2019, 6:11 PM

The colors are not very good, but this is what I was talking about. It looks more 3D.

abetts added a subscriber: abetts.Feb 1 2019, 6:16 PM

The colors are not very good, but this is what I was talking about. It looks more 3D.

I would only add to this to lighten up the colors closer to yellow so that it retains the brightness that the flat icon had. You can achieve a 3D effect with brighter yellows. Orange tends to darken images.

ndavis added a comment.Feb 1 2019, 6:20 PM

The ringer inside the bell has contrast issues with the standard Breeze Dark background color:

The ringer inside the bell has contrast issues with the standard Breeze Dark background color:

Yeah, needs a light outline like we do for the clock.

ndavis added a comment.EditedFeb 1 2019, 6:22 PM

The ringer inside the bell has contrast issues with the standard Breeze Dark background color:

Yeah, needs a light outline like we do for the clock.

Or a different color. TBH, I don't remember seeing many bells with black ringers, but it does contrast nicely with the orangish-yellow of the bell.

  • Use a less flat gradient with a silver ringer
trickyricky26 edited the test plan for this revision. (Show Details)Feb 2 2019, 10:22 AM
ngraham accepted this revision.Feb 2 2019, 4:35 PM

I love it!

This revision is now accepted and ready to land.Feb 2 2019, 4:35 PM
This revision was automatically updated to reflect the committed changes.