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

Create a logo for Brouter(web) #286

Open
bagage opened this issue Apr 14, 2020 · 14 comments
Open

Create a logo for Brouter(web) #286

bagage opened this issue Apr 14, 2020 · 14 comments
Labels
help wanted ui/ux Issue requiring User Interface/experience design

Comments

@bagage
Copy link
Collaborator

bagage commented Apr 14, 2020

It would be nice to have a proper logo for BRouter to display (for favicon, manifest.json for progressive web app, maybe even the Android application).

WDYT @nrenner, @abrensch?

I'm not able to create a proper logo personally*, but I believe we could find someone which could help for that.

  • my own made logo is 😨:
    icon-192
@nrenner
Copy link
Owner

nrenner commented Apr 15, 2020

Yes, having a logo would be nice, I personally have this in mind for a 1.0 version once more pressing issues are done.

One idea for a temporary solution I have, would be to use the current BRouter app image and maybe add some "-Web" to it, which often is some kind of globe icon? But I don't know if having a common base brand is a good idea or desired.
BRouter logo

A bike symbol might not fully represent what BRouter stands for, as abrensch seems more interested in electric car support lately and we offer all kinds of profiles.

@bueltge
Copy link

bueltge commented Apr 22, 2020

I'm not a designer, but maybe the follow examples are useful.
I would use only a logo and the string 'BRouter' shoud always add via text, string inside the markup, code. So is much easier to scale that.

image

@nrenner
Copy link
Owner

nrenner commented Apr 23, 2020

Thanks for the suggestion!

@bagage bagage mentioned this issue May 21, 2020
8 tasks
@nrenner
Copy link
Owner

nrenner commented May 23, 2020

@bueltge I like the core idea of using a curved arrow as a symbol for a route.

However, the proposed icon very much looks like a random/shuffle symbol, e.g. as used in music players like Spotify for random play, which is a bad analogy for routing:

random (Font Awesome)

I would make one arrow shaded or gray, it would better reflect that a router chooses one optimal route, and less ideal alternatives, e.g. like the duotone variant:

random duotone (Font Awesome)

Some more thoughts/ideas:

  • An arrow starting at the bottom middle going upwards would better represent the road ahead (although, we don't do turn-by-turn navigation, so might be misleading).
  • The alternative should probably use the same start and end point, it just chooses another way to get there.
  • Leaving the second arrowhead off might better emphasize the main arrow and that line could then also represent the general road network. Or it could be just a fork branching off the main arrow.

Browsing the Play store for similar apps like BRouter or Komoot I found these two icons of MapFactor Navigator and Wikiloc (and lots of bike symbols btw.) that go a bit in the direction I imagine:

MapFactor Navigator icon Wikiloc icon

As a more general note, an icon would ideally also symbolize the special features of BRouter that distinguishes is from many others (on the other hand, an icon should be as simple as possible):

  • flexible, custimizable (obvious symbols would be wrench or cog/gear)
  • elevation aware (arrow going around, alternative over a hill)
  • routing accross tiled data files

@bueltge
Copy link

bueltge commented May 23, 2020

Really great comment with important content. I haven't any knowledge about icons, symbols or similar. My idea was only started with the idea of routing.
Thanks for this clarifies words.

@datenchef
Copy link

datenchef commented May 25, 2020

Here are two different ideas which where made before the ongoing icon input.

Bildschirmfoto 2020-05-25 um 16 55 10 1
Bildschirmfoto 2020-05-25 um 16 55 04 2

Bildschirmfoto 2020-05-25 um 16 54 55 3
Bildschirmfoto 2020-05-25 um 16 54 51 4

Thanks to @bueltge for have a tweet about this ticket.

@Phyks
Copy link
Contributor

Phyks commented May 25, 2020

My personal preference goes to number 2 and 3.

Number 1 has a too strong emphasis on the pinpoint I think, at the expense of the bike. Number 2 is very well balanced on this.

Not sure I can explain the same way my preference for 3 over 4. Is number 4 using the bike = green analogy? Number 3 sounds more neutral.

No strong preference between 2 and 3, they are very different but both would fit well in my opinion! :)

@bagage bagage added help wanted ui/ux Issue requiring User Interface/experience design labels Jun 6, 2020
@nrenner
Copy link
Owner

nrenner commented Jun 6, 2020

@datenchef Thanks a lot for your suggestions! Looking good and professional, I could imagine using one of those.

I will comment and think about it more and coordinate with abrensch, but want to get a bugfix release out first.

@datenchef
Copy link

hi guys, just a quick follow up without to annoy. we were just asking us in a team and project chat whats may be up. i see this is a decision with major impact but low priority ;)

@nrenner
Copy link
Owner

nrenner commented Oct 7, 2020

Still on my task list as one of the next things to look at and think about.

@rkflx
Copy link
Contributor

rkflx commented May 11, 2021

I'm in the process of refining the visuals of BRouter-Web a bit, so the question of the default color scheme came up too. For now I decided to not change anything (i.e. keep dark top bar, keep default Bootstrap blue).

Still, before deciding on a logo it might also make sense to think about branding in general a bit. This does not have to be complicated, we could simply decide on a new default accent color. For me, the default Bootstrap blue is boring and not connected to bikes or routing at all. For example, https://mailbox.org recently changed from orange to green, which took some time getting used to, but IMO works very well for them ("100% green energy").

As for the logo, a couple of things to keep in mind:

  • The logo should work well with the default accent color.
  • It should look good in small spaces like the navbar, so it cannot contain too much details and too thin strokes.
  • Deriving a simplified favicon should be possible.
  • It should be able to be used on dark and light backgrounds. This can be done by providing a colourful version for the promo website, and a outline-only version which can be inverted for use on the dark navbar. However, the logo has to be designed with those conversions in mind from the start.

A common solution to satisfy those demands is to combine a graphical icon shape (which could be used standalone too) with a typographically enhanced version of the project's name.

IOW, I would recommend to assess logos in their context of use (e.g. provide screenshot of promo website and navbar of BRouter-Web with the new logo).

@hungerburg
Copy link

Brouter is all about energy, so I read. Below a childishly simple drawing. To be seen: The sun, our biggest source of energy, three tracks, of varying energy demand.

BrouterLogoTiny _ _ BrouterLogoSmall _ _ BrouterLogoMedium _ _ BrouterLogoLarge

Might serve as a tourism advert too :)

@nrenner
Copy link
Owner

nrenner commented Aug 2, 2022

@hungerburg: Thanks for the suggestion. Somehow reminds me a bit of the old GPSies icon and header image, that I really liked:

gpsies_icon 
© old gpsies.com

But without the description I would interpret the stripes as (heated up) landscape rather than tracks.

@hungerburg
Copy link

Thank You for the kind statement. I completely forgot about this drawing. It is nowhere near as cute as the GPSies one and far from the heat fixed on canvas by some impressionist painters of the past, depicting melting landscapes. Still, I like the observation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted ui/ux Issue requiring User Interface/experience design
Projects
None yet
Development

No branches or pull requests

7 participants