Consolidate icons into TM typeface

[DinisCruz]

I completely agree with @luchia on her comment at https://github.com/TeamMentor/TM_4_0_Design/issues/574

One thought I've had is that maybe we should look at doing our own icon set. We currently have upwards of 250 icons attached to our application, of which we use roughly 20. It's nice to have options, but it is excess code in our stylesheets. If we created our own typeface set, we could take icons from wherever we like (eg. some from Bootstrap, some from Foundation, some from other locations) and create the one set that really represents the supporting text.

This will make it easier to keep a consistent fell for all icons and reduce the amount of files/css/icons we need to load

---

EDIT BY LUCY: Adding checklist to this so it's easy to track -

I've seperated the icons into two different types - ones that are able to be more creative and ones that need to be simple. The ones that are able to be more creative:

• [x] Fix vulnerabilities
• [x] Reduce vulnerabilities
• [x] Expand knowledge
• [x] Delivers compliance
• [x] Integrates
• [x] Stores and cross-references
• [x] Provides guidance

The other icons, which are only going to appear in the application and need to be very simple, are the following:

• [x] Footer Email
• [x] Footer Twitter
• [x] Footer TOC
• [x] Button 'Start your free trial'
• [x] Button 'See for yourself'
• [x] Search icon
• [x] Index icon
• [x] Docs icon
• [x] Logout icon
• [x] Contact team icon
• [x] Filter / Technology / Web Application icon
• [x] Filter / Technology / All icon
• [x] Filter / Technology / C++ icon
• [x] Filter / Technology / iOS icon
• [x] Filter / Technology / Android icon
• [x] Filter / Technology / Java icon
• [x] Filter / Technology / .NET icon
• [x] Filter / Technology / Scala Play icon
• [x] Filter / Technology / PHP icon
• [x] Filter / Technology / HTML5 icon
• [x] Filter / Type / Guideline icon
• [x] Filter / Type / Checklist Item icon
• [x] Filter / Type / How To icon
• [x] Filter / Type / Code Example icon
• [x] Filter / Type / Vulnerability icon
• [x] Filter / Phase / Deployment icon
• [x] Filter / Phase / Design icon
• [x] Filter / Phase / Implementation icon
• [x] Filter / Phase / Test icon
• [x] Flare - Filters Icon
• [x] Flare - Save Icon
• [x] Flare - Share Icon
• [x] Flare - Trash Icon
• [x] Flare - Saved Articles Icon

[romichg]

Can't have two actions :)

[luchia]

I started sketching out ideas for the creative icons and will begin rendering these at some point today -

[DinisCruz]

cool, I like this a lot :)

[michaelhidalgo]

Yes I agree, it looks pretty cool.

2015-04-02 6:44 GMT-06:00 Dinis Cruz notifications@github.com:

cool, I like this a lot :)

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/TM_4_0_Design/issues/634#issuecomment-88885731 .

Michael Hidalgo http://michaelhidalgocr.blogspot.com

The future has many names: For the weak, it means the unattainable. For the fearful, it means the unknown. For the courageous, it means opportunity. (1802-1885) French Poet, Dramatist, Writer

[luchia]

First version of 'Fix vulnerabilities' icon -

This is the first icon on the landing page icon that represents this text:

Fix vulnerabilities quicker than ever before with TEAM Mentor's seamless integration into a developer's IDE and daily workflow.

[pjenney58]

I like the circle …

Cheers!

pete.;1

---)------------------------------------- Security Innovation, Inc. Peter H. Jenney VP, Strategic Initiatives Ombudsman

o: 978.694.1008 x164 m: 603.264.3961 Skype: PeteJenney

On Apr 2, 2015, at 9:01 PM, Luchia Bloomfield notifications@github.com wrote:

First version of 'Fix vulnerabilities' icon -

https://cloud.githubusercontent.com/assets/4547737/6976709/d22413f4-d9f0-11e4-8206-a8af3c72c0dd.png This is the first icon on the landing page icon that represents this text:

Fix vulnerabilities quicker than ever before with TEAM Mentor's seamless integration into a developer's IDE and daily workflow.

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/TM_4_0_Design/issues/634#issuecomment-89100954.

[tekgirl77]

I like the square and the circle... I guess my preference depends on what the other 2 icons will look like on that page.

They look very cool!

Salle Ingle Support & Implementation Specialist, eLearning [image: https://www.securityinnovation.com/_img/art/logo.png]

On Thu, Apr 2, 2015 at 8:13 PM, Pete Jenney notifications@github.com wrote:

I like the circle …

Cheers!

pete.;1

---)------------------------------------- Security Innovation, Inc. Peter H. Jenney VP, Strategic Initiatives Ombudsman

o: 978.694.1008 x164 m: 603.264.3961 Skype: PeteJenney

On Apr 2, 2015, at 9:01 PM, Luchia Bloomfield notifications@github.com wrote:

First version of 'Fix vulnerabilities' icon -

< https://cloud.githubusercontent.com/assets/4547737/6976709/d22413f4-d9f0-11e4-8206-a8af3c72c0dd.png

This is the first icon on the landing page icon that represents this text:

Fix vulnerabilities quicker than ever before with TEAM Mentor's seamless integration into a developer's IDE and daily workflow.

— Reply to this email directly or view it on GitHub < https://github.com/TeamMentor/TM_4_0_Design/issues/634#issuecomment-89100954 .

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/TM_4_0_Design/issues/634#issuecomment-89121560 .

[romichg]

So some of my 5c. Expand knowledge icon associates with callosotomy :). sorry, I have vivid imagination :). but that is just me. What if you try the expanding universe, or galaxy? Somewhere we make a reference to the galaxy of knowledge. Or maybe just use less gray matter in the picture :) Also what about something simple like IQ+?

Provides guidance associates with a homeless guy :). What about something like a "tour guide" or a traffic cop, a school crosing guard, a teacher, coach, a map, (especially since we have an idea of the map in the CC). Or maybe simply car lane markings?

Love the delivers compliance. Love the fix vulnerabilities (sketch). Maybe 'integrates" could use double twist instead of singe.

In the first version of the "fix vulnerability" - the lamp, implies long hours. Which is not the message we want to send, the pencil cup looks too much like coffee, which implies long hours as well. Also perhaps we want to make the suggestion that vulnerability is already fixed by putting a little checkmark next to the screw-driver. I personally think though that the composition is too busy for an Icon. If we go with busy than add a chair, swiveled sideways, implying that the dude has left to play football already because vulnerability was fixed.

[DinisCruz]

on the 'icons being busy' I quite like the path @luchia is going,

In a way (from a design point of view) we’re such a plain company. Most of our icons look like we bought them off icon-finder (or are using default css icon libraries). I think these add personality to what we’re doing. It looks like we care enough to hire a designer to design an icon set (which we do)

let's give @luchia space to create a full set and then see which ones could be tweeaked

[romichg]

I am sure @luchia put the work here for comments, not as a request for space. I think constructive comments is important early in the cycle.

[luchia]

I did try to go simple like my sketches @roman87 but it wasn't really doing it for me -

I was then thinking about the email thread talking about the competitor analysis last week and how we could differentiate from our competition. Coffee doesn't necessarily have to mean long hours, nor does the lamp. I was thinking it was more of a 'work-from-home' situation in the icon for a number of reasons including the computer being a laptop. But it's just different perspectives, everyone has their own idea of what things mean. Thinking about that lead me to the following -

Fix vulnerabilities

Reduce number of vulnerabilities

Expand knowledge and improve process

You know that I'm normally open to feedback and try to take onboard what everyone says about my work so I can improve. I really, really like these though and I think they do give us character and personality. The application icons aren't going to be this creative or have as much stuff going on, they're going to be similar to what we have now.

I thought while I had the opportunity to be creative, I should try to create icons that represent as much as the text as possible and tell our story. I think they're awesome and I don't often think that about my work.

[romichg]

Exactly because we have room to be creative here, we need to make sure we embed correct symbolism. Symbols are extremely important in our society and cause us to make subconscious decisions (where all decisions are made). Here is an experiment I recently read about: participants were in a room, divided 50/50. Each person in group 1 was given $10. They had to give some of that cash to another person from the other group. They both got to keep the money iff the other person agreed to take it. So if there was a backpack somewhere in the room, most offered $5 to the other participant. If there was a briefcase in the room, most offered $2-3 to the other participant. When meeting a person for the first time, if you hold a warm drink, you a perceived as a warmer person. We also need to focus on the message we want to portray. Work from home, has nothing to do with the product we are selling :) Anyways, just some fun facts so you know why I think its really important not to get it wrong. So, I like the "Fix vulnerabilities" except for the red cross in one of the lines. It creates a conflict with the theme. I am not sure what pencil cup symbolizes. But it seems in place. I don't like "Reduce number of vulnerabilities" Maybe make the line straight instead? I like the last one. Maybe putting arrows showing expansion of the light bulb (instead of a lighting thing) will drive the "expanded" part better.

[DinisCruz]

I quite like what @luchia is doing here, she is having a good feel for it, and I agree that they look really cool

Also let's not get to hang on the details since some of them will not be THAT visible. @luchia can you post some of icons in the size that we will be using them?

[romichg]

Look, @luchia is a Professional Designer. With a capital D.

_B_e_i_ng this makes it it is extremely important to get the details, no matter how small, right. They are the difference between someone han_gi_ng on your site _l_ong enough to engage your brain and actually read what is being offered, and maybe take it for a spin, and moving down the list of search results.

Watch this on the power of this: https://www.youtube.com/watch?v=befugtgikMg

[DinisCruz]

that is why I was saying that we should go with @luchia opinion

[romichg]

That is why she shares her work to get oppinions that matter. It takes a TEAM to make a Mentor :)

[luchia]

Some revisions after our discussion in the meeting this morning -

Fix vulnerabilities

I removed the cup of pencils but I like it better with it because I think it makes it seem more realistic and the asymmetry of the icon looks better than it being perfectly balanced in my opinion.

Reduce vulnerabilities

I tried a straight graph but I honestly prefer the more realistic verison of the graph which shows fluctuations -

Expand knowledge and improve process

I tried some of your ideas @roman87 and even a few of my original ideas involving brain power and knowledge represented through the brain and couldn't really get it to work. I still prefer my original on this one -

I just pushed some work to the branch Issue_634 and if you go to the POC pages, you'll be able to see the icons in action. This is just a quick prototype but if everyone thinks I should continue, I would tidy up alignment and obvious issues.

[romichg]

Yea the straight line doesn't really work and green arrows ether.

I don't know if it is supposed to be like this, but on my screen they are quite large:

[luchia]

So I'm really happy with the first sets but still not satisfied with the last one. I will work on it early Monday morning so we have something for release. I will need everyone to weigh on which structure you like (the list items vertical or horizontal) and which set of icons (round, rect or none).

You can find these pages in the POC directory on the branch Issue_634. Thank you.

[DinisCruz]

nice, send it a PR when your happy,

It would be cool to add this to next week's beta

[romichg]

1 vote for vertical 1 vote for round :)

[luchia]

I had a minor mishap this morning when I realised that all my photoshop files were/are gone from my computer. Thankfully, we had production ready png's in the application and my code was on Github so I was able to retrieve PNGs for Jade at the very least. From these, I will need to remake the Photoshop files but it should simply be a matter of selecting and filling all of the shapes with colour, not having to redraw every single shape.

Below is a gif of testing the icon sprite that I made in three browsers - Chrome, Safari and Firefox -

I've sent a pull request for @DinisCruz.

[luchia]

Here's the PR @DinisCruz.

[luchia]

Update re missing icons - all my ongoing work will be stored in the What's Cookin' repo (the specific directory can be found here). We're now back up to date and I'm going to start working on the Features pages icons now.

[DinisCruz]

you really need to have an auto backup for your photoshop files

what about dropbox, that should work?

[DinisCruz]

merged and added to https://github.com/TeamMentor/TM_4_0_Design/issues/675

[DinisCruz]

and it looks like this locally

[luchia]

I don't want Dropbox on my machine for privacy reasons. I've set up a workflow now so this doesn't happen again - basically everything of mine is getting synced to the What's Cookin' repo as I work on it.

[DinisCruz]

sure, sounds good

[luchia]

Here's two more. These are super rough because I've been spending a lot of time on Flare this last week. Feel free to throw in ideas for setting the scene in these icons, I honestly haven't had too much time to spend on them the past week (and it's obvious).

Delivers compliance-specific secure coding guidance for PCI-DSS, OWASP Top 10, CWE and other popular frameworks.

Integrates with multiple static analysis tools and developer environments (IDE’s) to map prescriptive coding guidance to scan results to fix vulnerabilities.

I'd really like to get the last two of these out before the end of the week, but not sure if I'll be able to. We'll see.

[luchia]

Further work -

Delivers compliance-specific secure coding guidance for PCI-DSS, OWASP Top 10, CWE and other popular frameworks.

Integrates with multiple static analysis tools and developer environments (IDE’s) to map prescriptive coding guidance to scan results to fix vulnerabilities.

Stores and cross-references your security policies with out-of-the-box secure coding checklists and examples.

Provides guidance to assist developers in reducing security vulnerabilities in software applications.

[luchia]

We have a completed set of landing page icons -

And for arguments sake, here's a second and third set that's simpler but brings in elements from the more complex ones -

[DinisCruz]

Looks good to me.

Once you are happy with them, can you update the https://github.com/TeamMentor/TM_4_0_Design/wiki/TM-Custom-Icons wiki page with details about each one?

[luchia]

Here's my altogether finals, I'd like to hear from @michaelhidalgo @tekgirl77 @roman87 before updating the wiki (but I will once I do).

[luchia]

Rough version of 9/26 application icons. I quickly made these and put them all in a document together so I can make them look as if they are a part of a set -

[tekgirl77]

I like them @luchia . I think the more complex ones could look too busy or over-used. I like the mixture of the final set. I like the bug better on the magnifying glass in this last set also. :) I like the shading that was added. I like the folder that was added to the papers icon. I definitely like the direction you're going with them! Again, I think I'd have to see them on some contextual page samples to have more of an opinion... once we see them on the pages, I think we'll have more firm and immediate favorites.

[romichg]

I think they all look great. I actually like the worm better than the bug :), but I think it doesn't matter. My only few comment are

• I think the checkboxes should be checked. Otherwise its not really clear its a checklist
• The arrows next to the skull and shield look really bleak on my screen, so the skull actually stands out more. Maybe make the arrows darker a bit and maybe move the skull down and shield up (i.e. switch places). Also what about making the skull subtly smaller than the shield. Barely noticeably smaller. This is just a thought. It will be disproportional but barely seen.

[luchia]

I'm actually thinking the more simpler set is going to be the way to go, especially given how small the icons are on the screen. The details get missed -

I did a POC page for each to show what the other set would look like and I think it's better than what we currently have -

[pjenney58]

Ya know, I’m really starting to like the way this looks …

Cheers!

pete.;1

---)------------------------------------- Security Innovation, Inc. Peter H. Jenney VP, Strategic Initiatives Ombudsman

o: 978.694.1008 x164 m: 603.264.3961 Skype: PeteJenney

On Apr 27, 2015, at 9:54 PM, Luchia Bloomfield notifications@github.com wrote:

I'm actually thinking the more simpler set is going to be the way to go, especially given how small the icons are on the screen. The details get missed -

https://cloud.githubusercontent.com/assets/4547737/7361527/3dec4902-ed9d-11e4-9eaf-002aa8094cd3.png https://cloud.githubusercontent.com/assets/4547737/7361528/3e549a20-ed9d-11e4-83a0-9c8b54963ae7.png I did a POC page for each to show what the other set would look like and I think that's -

https://cloud.githubusercontent.com/assets/4547737/7361535/54ea7728-ed9d-11e4-8dd1-b1c99e8a58c4.png https://cloud.githubusercontent.com/assets/4547737/7361536/54eca1b0-ed9d-11e4-8720-fbe241f9ff44.png — Reply to this email directly or view it on GitHub https://github.com/TeamMentor/TM_4_0_Design/issues/634#issuecomment-96873357.

[DinisCruz]

@pjenney58 thx, the new version will be included in this week's release and should be live in the next couple days

[luchia]

Application icons for Jade are complete -

There are two different types:

1. The ones without circles are in places where it would look odd like in the footer or in the navigation bar.
2. The ones with circles are apart of the application (like filter icons).

This looks good now but the non-application ones may need circles as well. It wouldn't take long to migrate them over so I would just like to see how they look first.

I need to make this a typeface file and then insert them in place of the Foundation icons currently included. I should have this done by the end of the week, max (ready for the next release!)

[luchia]

Yay, they're in the application!!!

Had to test them on another page because my build is broken at the moment. Will finalise this tomorrow once I have it fixed.

[tekgirl77]

These look amazing Lucy! I love them!

[luchia]

Thank you!!!

[pjenney58]

This looks great!

I’m still confused as to why “C” isn’t represented in the list though :-)

Cheers!

pete.;1

---)------------------------------------- Security Innovation, Inc. Peter H. Jenney VP, Strategic Initiatives Ombudsman

o: 978.694.1008 x164 m: 603.264.3961 Skype: PeteJenney

On Apr 30, 2015, at 4:29 AM, Luchia Bloomfield notifications@github.com wrote:

Yay, they're in the application!!!

https://cloud.githubusercontent.com/assets/4547737/7409094/da3928b4-ef66-11e4-9a04-d8bd29fd0edd.png https://cloud.githubusercontent.com/assets/4547737/7409093/da3900e6-ef66-11e4-8690-41d211c556b4.png Had to test them on another page because my build is broken at the moment. Will finalise this tomorrow once I have it fixed.

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/TM_4_0_Design/issues/634#issuecomment-97706460.

[luchia]

It is -

Perhaps i should move the plus plus so it's more obvious the C is a C?

[pjenney58]

That’s cool but I think it needs to be C/C++ or they need to be separate. Two completely different problem sets.

Cheers!

pete.;1

---)------------------------------------- Security Innovation, Inc. Peter H. Jenney VP, Strategic Initiatives Ombudsman

o: 978.694.1008 x164 m: 603.264.3961 Skype: PeteJenney

On Apr 30, 2015, at 6:32 PM, Luchia Bloomfield notifications@github.com wrote:

It is -

https://cloud.githubusercontent.com/assets/4547737/7423791/950af850-efdc-11e4-86e0-c7383f5b803f.png Perhaps i should move the plus plus so it's more obvious the C is a C?

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/TM_4_0_Design/issues/634#issuecomment-97990175.

[luchia]

Oh okay, you mean why is C not in the filter list? I'm not actually sure - maybe @DinisCruz or @roman87 know why.

[pjenney58]

Yes, that's the question. C is the worst offender in The software security 'scape and needs direct representation. I guess my mantra would be, if I actually had one, would be "'new' is not the same as 'malloc'." Hey, maybe we could have t-shirts made? 😀

Cheers!

pete.;1

---)---------------------------- Security Innovation, Inc. Peter H. Jenney Vice President of Strategic Initiatives (office) +1.978.694.1008 x164 (mobile) +1.603.264.3961 (skype) PeteJenney

On Apr 30, 2015, at 19:41, Luchia Bloomfield notifications@github.com wrote:

Oh okay, you mean why is C not in the filter list? I'm not actually sure - maybe @DinisCruz or @roman87 know why.

— Reply to this email directly or view it on GitHub.

[luchia]

What the icons actually look like in the application -

These are ready to be QA'ed! I will create a PR at the end of the week with all of my work for the next release.