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

macOS Riot icon (edit: fixed tabs)? #4474

Open
wants to merge 14 commits into
base: develop
from

Conversation

Projects
None yet
10 participants
@alicerunsonfedora
Copy link

commented Jun 30, 2017

In the Riot chat, we discussed bringing a new macOS-specific icon for Riot to make it more in-line with other Mac apps. This is my request to add that icon in (but I may have added the code in the wrong package.json file) using this: https://www.github.com/electron-userland/electron-builder/wiki/Options#user-content-MacOptions-icon

Either way, there's a new icon file in the img folder of the electron_app folder (if that makes sense).

EDIT: Fixed tabbing

@@ -168,6 +168,9 @@
"StartupWMClass": "riot"
}
},
"mac": {

This comment has been minimized.

Copy link
@t3chguy

t3chguy Jun 30, 2017

Collaborator

please fix your indentation

@t3chguy

This comment has been minimized.

Copy link
Collaborator

commented Jun 30, 2017

You also must follow the contribution doc, specifically Sign-Off:
https://github.com/matrix-org/synapse/blob/master/CONTRIBUTING.rst#sign-off

Done :)

Marquis Kurt
Fixed tabs
Signed-off-by: Marquis Kurt <ubunturox104@gmail.com>

@alicerunsonfedora alicerunsonfedora changed the title macOS Riot icon? macOS Riot icon (edit: fixed tabs)? Jun 30, 2017

@alicerunsonfedora alicerunsonfedora changed the base branch from master to develop Jun 30, 2017

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Jun 30, 2017

Signed-off-by: Marquis Kurt ubunturox104@gmail.com

@t3chguy

This comment has been minimized.

Copy link
Collaborator

commented Jun 30, 2017

riot

^^^ PNG for easier viewing for Windows users ^^^

structurally PR looks good and should work, now its down to whether the logo is wanted/liked :)

PR structurally good now

@ara4n

This comment has been minimized.

Copy link
Member

commented Jul 9, 2017

@ubunturox104 thanks for this! sorry for the delay in response - we've been having a slightly nightmarish week. The icon is an improvement on what we have currently, although I'm not entirely sure that it's completely on brand. I'm going to ask the folks who originally designed the logo if they have a macOS variant which we can add into the PR here.

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Jul 9, 2017

@ara4n No worries. I tried to base it off of the Riot website in terms of the gradient and pulled one of the Riot vector images from the older website:
img_0354

Primarily, I made this to make it more in line with other macOS icons, especially with Apple’s Human Interface Guidelines. I understand if it may need to be changed a bit to better suit the brand.

@rodneyrod

This comment has been minimized.

Copy link

commented Sep 30, 2017

Any news on this?

@ara4n

This comment has been minimized.

Copy link
Member

commented Oct 14, 2017

it's tricky. i like the logo, and it's better than the current one. but for consistency with the other platforms (iOS & Android) I think we should be using the purple-on-concentric-green variant: https://github.com/vector-im/logos/blob/master/riot/riot-im-logo-1.svg

If this was put inside a white/grey plinth I'd merge it like a shot. Sorry for being picky :(

@ara4n

This comment has been minimized.

Copy link
Member

commented Oct 14, 2017

(and sorry that this has dragged on for months)

@lukebarnard1

This comment has been minimized.

Copy link
Contributor

commented Oct 25, 2017

If this was put inside a white/grey plinth I'd merge it like a shot

@alicerunsonfedora, would you be able to have another go, using https://github.com/vector-im/logos/blob/master/riot/riot-im-logo-1.svg ?

@dbkr

This comment has been minimized.

Copy link
Member

commented Nov 27, 2017

Please also not that the raster versions of these icons are generated from vector versions. We'd need a vector version to be able to merge this I'd think, otherwise we'd be stuck having to redraw it if we needed any changes made.

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Nov 27, 2017

@lukebarnard1 I'll see what I can do to update the icon. Anny suggestions for the background color of the icon?

@lukebarnard1

This comment has been minimized.

Copy link
Contributor

commented Nov 28, 2017

@alicerunsonfedora I'd have to defer to @ara4n on that one. Riot iOS and Android both appear to use a white background.

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Sep 17, 2018

Sorry for the long update, but I am working on a vector version:

screen shot 2018-09-17 at 9 22 41 am

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Sep 17, 2018

Any thoughts on this redesign?
riot-mac-icon.svg.zip

@HansJK

This comment has been minimized.

Copy link

commented Feb 13, 2019

Like the purple one. The "RIOT.IM" text takes away the clean design. But since Riot is being rebranded, there might be new possibilities for a new icon. I think it's more important that the icon looks clean and nice even if it's not 100% with the brand. Personally I made this one for personal use. Never liket the standard icon. The blue color is from the sidebar from the new Riot design. Hope to see a new clean icon with the 1.0 realise.
screenshot 2019-02-13 at 01 05 22

alicerunsonfedora added some commits Feb 13, 2019

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Feb 13, 2019

@HansJK I like that design! I'm going to try a 'version three' by combining your design and the brand colors to see if I can come up with something.

@HansJK

This comment has been minimized.

Copy link

commented Feb 14, 2019

@alicerunsonfedora Looking forward to seeing what you can come up with. The current one is just not professional enough.
screenshot 2019-02-14 at 22 51 03

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Feb 25, 2019

I have a few different ideas, though I feel they need some refinements.

aaaaaa

@HansJK

This comment has been minimized.

Copy link

commented Feb 25, 2019

This is my first try after the redesign. I used the two blue colours from the current Riot logo, (Blue to lighter blue) in this gradient, so it works with Riot's branding.
riot-mac-icon

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Feb 25, 2019

I personally would up the saturation on the blue a little bit and make the R itself match with the outer metal. I'll get a render of it later.

@HansJK

This comment has been minimized.

Copy link

commented Feb 26, 2019

Agree that the saturation should be turned ip, it would look more modern. But the problem is that Riot's branding use somewhat dated colours. This colors where taken from the logo itself. I don't think they would like an icon that dosen't use their branding colors.

Don't think the (R) would work well with a gray gradient. But I can try. Btw, I used your border.

@HansJK

This comment has been minimized.

Copy link

commented Feb 26, 2019

Made some new versions of the icon
riot-mac-icon

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Feb 28, 2019

I like number 6 in particular, though I'd change the logo itself so it acted more like number 3 (ish) and follow the flow of the outer gradient.

@HansJK

This comment has been minimized.

Copy link

commented Mar 1, 2019

Added gradient on the on the Riot logo in number 7. I think I like it better as it is in number 6. Not sure if this is what you meant or not.
riot-mac-icon

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Mar 2, 2019

Yeah, that's close enough. I was about to make one that resembled it

@HansJK

This comment has been minimized.

Copy link

commented Mar 2, 2019

Here I have SVG and ICNS of number 6 and 7. I'm very happy about how they turned out.
riot_icon.zip

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Mar 2, 2019

Awesome, thanks! I'll make a few minor adjustments to logo 7 and will get to work on getting the PR rolling again, granted that the 'highlight-js' problem gets resolved (hence why Travis has been failing constantly).

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Mar 2, 2019

Also, @t3chguy Is there a way to do a sign-off on behalf of more than one person? I'd like to give credit to @HansJK as well.

@aaronraimist

This comment has been minimized.

Copy link
Contributor

commented Mar 2, 2019

You can do co-authored-by:

Example matrix-org/matrix-doc@6e8739c

@HansJK

This comment has been minimized.

Copy link

commented Mar 2, 2019

@alicerunsonfedora What kind of adjustments are you thinking about?

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Mar 2, 2019

Mostly drop shadows.

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Mar 2, 2019

riot icon 7 improvement sheet

(Also colors might be skewed a bit because of the import into GravitDesigner. Oof.)

@HansJK

This comment has been minimized.

Copy link

commented Mar 2, 2019

If it is a problem with the colors in Gravitdesigner, i can just modify the shadow in Illustrator.

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Mar 2, 2019

Attached are the redesigns I just did as SVG. On second glance, I'm thinking Affinity Photo skewed as the SVGs appear normal now... (I use P3 in Affinity Photo)

r7_improvements.zip

@HansJK

This comment has been minimized.

Copy link

commented Mar 2, 2019

Just so we are on the same page, is the r1 you included this one? I prefer this one or the one where the R is tilted. Also is the colors fine now, Affinity didn't accidentally change anything? :)
screenshot 2019-03-02 at 23 52 49

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Mar 3, 2019

Both R1 and R2 use the straight icon. I don't really think the diagonal really works here as those are usually reserved for the rectangular shapes like the Pages icon. I haven't seen a lot of circular icons have a shape that tilts that way before, and I assume that's for macOS HIG consistency. Though it is ultimately up to the community whether they want the straight one or not as, in theory, it lines up with the grid just fine.

Also, GravitDesigner seemed to handle the colors just fine, but when I imported the PNG versions of my exported SVGs into Affinity Photo to make the sheet from earlier, that's when the colors were skewed. It happened because I use the P3 color spectrum/gamut thingy for it (to match my MacBook's display) and thus "richened" the colors.

@HansJK

This comment has been minimized.

Copy link

commented Mar 3, 2019

Yeah I think the strait one has the biggest chance of making it. Really happy with how it turned out with he fill.

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Mar 3, 2019

I have no clue if that worked correctly as I don't have @HansJK 's GitHub email address, but hopefully, that should suffice. The commit includes both the ICNS file and the SVG version for rendering.

@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Mar 3, 2019

Here's how it looks on the Dock:
screen shot 2019-03-03 at 13 43 27

@HansJK

This comment has been minimized.

Copy link

commented Mar 3, 2019

Looks amazing!

Fix sizing errors. Signed-off-by: Marquis Kurt <software@marquiskurt.…
…net>. Co-authored-by: HansJK <contact@hanskristiansen.com>
@alicerunsonfedora

This comment has been minimized.

Copy link
Author

commented Mar 3, 2019

I just discovered that the sizing of the icon was off when I was working on a new Mac icon for Hyperspace. I just resized it and made the changes here. Again, looks like co-authoring didn't work, but it hopefully should still give attributes as necessary.

@nadonomy

This comment has been minimized.

Copy link
Contributor

commented Mar 11, 2019

Hey @alicerunsonfedora @HansJK,

Thanks for putting the time and effort into this. Apologies for not being a part of the previous discussions. From my side, there's a few blockers that stand in the way of merging:

  1. Internally we use Sketch for almost all of our vector based work, along with treating some assets with Adobe Creative Cloud tools for print. While exporting for web/desktop can be more forgiving, we can't guarantee other tools will work well in all contexts (colour profiles and print generally being the most fussy). As a small team, out of pragmatism we need to ensure community contributions are authored using a pipeline we work with.
  2. I'm concerned about using perspective and texture to style the icon to look like a native macOS app. I don't think it's healthy signalling for the Electron app.
  3. Drastically varying the icon per platform dilutes brand equity and is confusing for a lot of users, along with setting a precedent that we adhere individually to each platform we package for. We could consider using the same mark but varying how we crop and treat the design on different platforms, though.
  4. The mark itself has been modified, for example the stem lacks a rounded cap.

Apologies that these points weren't raised before you spent time on it— we've had the electron icon on our internal agenda for a while and we weren't anticipating external activity on it.

If you're interested in working through the above, please message me on Matrix and I can share some internal assets with you— including some of the existing icon source files, and some brand guidelines that have helped inform the redesign to date.

Cheers,
Nad

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.