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