FIXED! Notification box icons: help us find better ones

[Costello]

DISCLAIMER: this thread is not about whether you like the notification box or not, or about you wanting it removed. The notification box will be discussed in a separate thread, this thread focuses on the icons only. Thank you for respecting that

The icons of the notification box are from an old copyright free icon set.
We couldn't produce better ones (due to the lack of a graphic designer in the team) so we had to resort to these:

Individual icons:

Feel free to suggest better ones, designing them yourselves or selecting them from a commercial-free & copyright-free source.

Thanks for your help!

 

[Walker D]

Even though these look great, they want flat, not realism (glossy).

Well...they never said a thing.. ..nobody did really. But if that's the case, I can change it, since I added the gradient myself.
Thanks for the feedback Joostin.. ..if you think something else should be looked at, feel free to tell me

 

[vassildador]

What about using an icon-font like font-awesome? They're easy to set up and you can resize/recolor them at will with CSS font properties. All relevant browsers support this (including IE8. If IE7 is needed they offer you an older version of the font with a smaller amount of icons).

As they're not images, i can't easily add them to the post, but I'd suggest the following ones:
https://fortawesome.github.io/Font-Awesome/icon/envelope-o/
https://fortawesome.github.io/Font-Awesome/icon/bell-o/
https://fortawesome.github.io/Font-Awesome/icon/exclamation-triangle/
https://fortawesome.github.io/Font-Awesome/icon/upload/

Here's some screenshots for reference:

You can easily change the envelope/bell ones to a "full" version (instead of an outline) by removing the "-o" from the URL. If you'd need any help setting them up, I can give you some pointers but it's pretty straight-forward.

They also remain sharp on high-res monitors which use DPI scaling (images won't) as, well, it's a font.

 

[tj_cool]

I do like the look of the font-awesome icons.
(See also the post here)

I don't think they need to be flat per se (unless Costello has a different opinion), but they need to look better and more integrated.

 

[vassildador]

I do like the look of the font-awesome icons.
(See also the post here)

I don't think they need to be flat per se (unless Costello has a different opinion), but they need to look better and more integrated.

Guess I've been beaten to the punch, albeit in a different thread

As a web developer I can't recommend icon-fonts enough. They've saved us an enormous amount of time and hassle at work. The only "issue" I see with popular ones like font-awesome is that you're going to see them on many websites, thus it won't be very unique anymore.

 

[Astoria]

Going to cross-post on here:

Oh, no. That's not how it works. You link the font just like you link any CSS or JS file, users don't have to install anything. Actually, the only thing you need to do is add one line of code to the page:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

And then the font is ready to use. You just use

<i class="fa fa-star"></i>

and it will display a star. It's that simple and works in all current browsers.

More info here on how to get started: https://fortawesome.github.io/Font-Awesome/get-started/
And also here on how to use the icons: https://fortawesome.github.io/Font-Awesome/examples/

EDIT: A quick example of how the change would look like. I'm pretty surprised I didn't need to modify the current CSS at all, I just inserted the icons and they fitted perfectly on the page:

 

[grossaffe]

The alerts icon should be Navi.

 

[Walker D]

the flags will still need to be colored, or kept simple enough to keep their meaning.
they are used on the Ask.gbatemp to determine if the answer has replies or any reply marked as best reply.

I did the thingies. 4 variations for the "portal" icons + the flags:

- I played with color a bit when creating some of the icons... cause colors are cool too

I also went more flat as Joostin suggested... should look fine.

- And one of the other sets, but flatted out too

 

[Walker D]

Kind of a late double-post, but..



..I wanted to know if something about this subjects here have been decided already?

No staff behind the handling of the layout have replied yet, so ...I was wondering if the icons I made with that pack as base are ok? ...or are you guys trying to use other ideas here posted?



Edit: Since I'm posting here anyways, here's a suggestion:

- about the box itself of the notification box (the white rectangle), You could use the "new alert" popup window as a reference of how it could look. So basically, it could have a lower opacity (be more transparent) and have the corners that are visible to be more rounded (maybe even have a darker color for the Dark Theme... ..even though it's not that important.. would look good it seems)
.

 

[daxtsu]

The alerts icon should be Navi.

Only if the mouseover action is to play the sound clip where she says "HAY LISTEN".

 

[MeerkatMario]

Individual icons:

Keep these icons. I like them unchanged that way.

 

[VinsCool]

Just like the guy above said. I get used to them

 

[Walker D]

Just like the guy above said. I get used to them

but that's just lazy ...It doesn't make them any good, or fix anything..



Could someone dealing with this issue give some feedback of what's going on? ...seems like everything got silent at some point.. .. @Costello maybe?

 

[Costello]

we are undecided at the moment sorry

 

[DinohScene]

@AlanJohn GBATemp needs you!

 

[Walker D]

I see.. ok ...If you guys have other things in mind though (design-wise), feel free to share the thoughts, so we can work on other options

 

[AlanJohn]

Sorry guys I couldn't make the icons on time! I was busy with my exams. Good news though, I've flunked my exams, so I have a lot of free time now to make some icons!