Logo

[jordanliu]

Is there a logo for CodeRoad? For the docs and vscode icon, if not - are there any suggestions on what it should look like?

Related: #176

[ShMcK]

Currently no selected logo, but open to suggestions!

The original intention in the name is about following a 'path' or a 'road' towards a goal.

[jordanliu]

@ShMcK I made some mockups, went for a little abstract design.

Used a green/yellow gradient but can be changed if another colour scheme is provided.

V1:

V2:

V3:

Please let me know what you think 😄

[ShMcK]

I'm leaning towards V1 for its simplicity and minimalism. Always open to other ideas though if inspiration strikes.

In terms of color scheme, I think it makes sense to align with the VSCode default color scheme for now.

Out of curiosity, what would the logo look like if it were a bit more "ribbon-like", as in the VSCode logo?

[jordanliu]

@ShMcK see updates - changed to blue, made some variations and attempted ribbon. Let me know how they are now 😸

V1

V2

V3

V4

[ShMcK]

Now I'm thinking v4 is too "vscode-like".

The simplicity of the 3 lines could make for some interesting animations.

@jordanliu - In your opinion, what do you consider the primary difference between v1 and v2?

[jordanliu]

@ShMcK The difference between v1 and v2 are the shading of the gradients, look at the tip of the > and you'll see there is an interception

v1 is a bit more plain while v2 has more depth

[ShMcK]

Oh, I mean in terms of "symbolism" of the logo, what's the difference in the interpreted meaning between v1 & v2?

To me, v1 looks more like a code symbol as a coherent >

v2 looks more like a shape that folds out at each corner.

[jordanliu]

Oh, I mean in terms of "symbolism" of the logo, what's the difference in the interpreted meaning between v1 & v2?

To me, v1 looks more like a code symbol as a coherent >

v2 looks more like a shape that folds out at each corner.

Well, v1 and v2 are intended to represent the same meaning >, just different styling.

[ShMcK]

So far v1 is my favorite. 👍

It may help to go into restrictions for a logo as well.

1. it should look good small.

• VSCode marketplace sizes: 128x128, 256x256 (retina)
• I also hope to use the icon as the SVG file icon (16x16) for the loaded web app. Possibly too small to do much. See the top left corner below.

• I hope to later put the logo into the side menu (see below), meaning that there should be a single color variant that is recognizable as a centered 24x24 SVG

[jordanliu]

The current size you see there is 128x128

16x16:

24x24:

They're made using vectors so svg is an easy export, if the design is confirmed. I'd love to implement the new logo in the docs 😄

[ShMcK]

That's recognizable enough. Let's go with that logo.

I can implement it in the extension once you've added the different sizes.

[jordanliu]

I'm on it

[ShMcK]

The logo might look good on a banner at the top of the README as well

As a replacement for the ### CodeRoad VSCode text

[jordanliu]

@ShMcK check out #433 - i'll create a banner once some creative juices flow 😄

[jordanliu]

ps: @ShMcK should consider changing the organization picture to the logo, it would look neat

[ShMcK]

The org logo is recommended at 500 by 500 pixels, looks a bit pixelated at 200.

[jordanliu]

@ShMcK

Dropbox: https://www.dropbox.com/s/av9mqg6sva88r51/500x500_logo_coderoad.png?dl=0

500x500

[ShMcK]

I'm not sure how familiar you are with React, but the "Start" page in the app could use some logo/design love.

https://github.com/coderoad/coderoad-vscode/blob/master/web-app/src/containers/Start/index.tsx

It can be developed using React storybook, a development playground.

[jordanliu]

I'm familiar with react, I'll give it some love as soon as I can. Any special requests?

[ShMcK]

@jordanliu we can follow up at #435. Also sent you an invite to the org!

I've added the logo config to the vscode marketplace, should be ready to go with the next release. I'll close this issue for now.