Create a logo/mascot for ninya.io

[cburgdorf]

The new name of the website will be ninya.io. The domain is already working as www.ninya.io (not working without www yet). Would anyone be willing to contribute a nice logo / mascot?

@timhartmann @PascalPrecht @herschel666

[0x-r4bbit]

I could spend some time working on a mascot with pen and paper. Somebody
has to digitalize it then somehow (@tim_hartmann maybe?)
On Mar 2, 2014 10:13 PM, "Christoph Burgdorf" notifications@github.com
wrote:

The new name of the website will be ninya.io. The domain is already
working as (www.ninya.io)[www.ninya.io]http://www.ninya.io)%5Bwww.ninya.io%5D(not working without www yet). Would anyone be willing to contribute a nice
logo / mascot?

@timhartmann https://github.com/timhartmann @PascalPrechthttps://github.com/PascalPrecht
@herschel666 https://github.com/herschel666

Reply to this email directly or view it on GitHubhttps://github.com//issues/30
.

[cburgdorf]

@PascalPrecht that would be very much appreciated! I already ninyafied the website (www.ninya.io) but I'll postpone breaking the buzz until the site has a proper logo.

[cburgdorf]

Some examples to fire up imagination:

http://static4.wikia.nocookie.net/__cb20131220003040/ninjago-fanon/images/3/36/Lucy_Ninja.png

http://techclash.com/wp-content/uploads/2014/01/Ninja1.jpg

http://www.chinatownconnection.com/images/ninja.gif

http://fc04.deviantart.net/fs71/f/2009/347/4/3/Ninja_by_mspowell.jpg

http://www.sushininja.de/assets/img/ninja-logo.png

[oriSomething]

So, hi. need help?

I should mention, I might only have time next week.

P.S. proper logo, also means that the whole design suppose to speak the language

[0x-r4bbit]

@oriSomething Go for it please! :) Also how did you get to the project? :)

[oriSomething]

Christoph twitted me.

Also, I have one question: is this a truly open source project or it has some future plan of… let's say being “less open source”?

[janpantel]

Maybe some inspiration through the ninject ninja? :)

http://www.ninject.org/

[cburgdorf]

@oriSomething Thanks for your willingness to help. I agree that together with the logo, the whole design should be aligned. If you could provide us with mocks, we should be able to do the rest (that doesn't mean we would hold you back from sending a complete PR though ;-))

Rest assured that this will continue to be an open source project as long as I'm in charge of things. I'm very committed to open source for years and I wish a lot more things of our daily life were open source and improvable for everyone. That doesn't mean that we won't ever try to cover our costs with premium features etc at some point in the future. But even then the code behind the service would remain open source. Everyone could grab the code and try to build a better or more successful service out of it. And if they can, they deserve it. But to be honest, I'm currently far far far away from wasting any thoughts about business. I'm just trying to make this a successful open source project which people use and have fun with. And there are lot's of cool plans to improve the service.

@Kyjan you're right! Thanks for sharing this!

[oriSomething]

Anyway, so because I'm busy at this time (full time employee + freelance), it might take a while. But I hope during this week to post some sketch/es. Anything that you think is a nice direction feel free to post here.

[oriSomething]

today evening or tomorrow at max i'll upload something

[cburgdorf]

Quite thrilled :)

[oriSomething]

This is the direction I thought about. Please tell me what you think

[cburgdorf]

yeah! I like the direction this is going! The logo is pretty awesome. Great job!

I wonder if there is something that could be done with the eye part to stand out more though. Not exactly sure what. Something to make it just a bit more concrete. I love the abstract fashion in general. I just wonder if something can be made to to make it just a tiny bit more concrete.

Is this ninya writing a special font or did you shape that yourself? This looks super rad! Love it.

I don't like the color scheme too much though. I think it's too dark and greyish. For the result list, I think we should use cards. Something in the direction of what has been discussed here: #21.

Cards will also allow us to use some nice effects like that you can turn a card around (css transforms) and then have some special infos on the backside like the top three answers etc.

@PascalPrecht @CrashKid @timhartmann @herschel666 do you like to add your feedback?

[herschel666]

Really like the approach and especially the logo. Though I would stick to the single input that's invisibly splitted. Looks like less effort to visitors I think.

And the content area looks like it's covered with a semi-transparent black layer. It could be more whitish.

[cburgdorf]

@herschel666 agreed, I'm also a big fan of the combined search box.

[oriSomething]

• the logotype will might be changed a bit (but not much)
• about the logo, i didn't understand about the thing with the eyes. can you try explaining me this in a different way. not sure what you mean. (and what do you mean when you say “more concrete”? sorry, english isn't my first language)
• ninya's font, i made by myself. it's based on a few fonts i saw in the past (like namco's logo, samurai jack's…, etc…). i think i'll make it a little lighter
• i'll try a different color scheme, but not too different :)
• about the card, it's better to think what kind of data suppose to be there, because maybe you'll find "card design" useless. i understand you like 3d transition, but it wouldn't be the wisest to base the design on some transition that may not feet the best to the purpose. usability usually first (exclude when there is something that is truly cool :P)
• another thing about the cards, it will make it a bit harder to find information. it could be fine if we make sure all the cards in the same size, which it might not the most fluid. think for example when there are tags for two row instead of one? pinterest layout isn't feet the best to information that should be read line by line (or card by card if you like). anyway we can try
• about the combine fields, i've separated them because a few reasons: 1) it's a bit easier to make it responsive 2) you need to be more careful with accessibility 3) maybe in near future we'll add another field, and then another. yeah sure it will have to have anyway a different solution, because showing just 3 or more fields will become ugly… ok, i'll make a combined version :)

[cburgdorf]

@oriSomething what I mean about the eyes is that they could be a bit more detailed maybe. I'm not a designer so I have trouble to express myself properly here ;-) Currently it is very abstract (which is cool!) but I wonder if we could spice it up by making it just a little bit more detailed. For instance if you look at this logo here: http://gruntjs.com/

This is less abstract and more detailed. But I don't really think we need to be that detailed. Just a little bit more than what it is now would be awesome I think. Could be that I'm wrong though ;-)

[oriSomething]

i understand what you mean, but i don't think it's apply to this style. if i think about something good (or if you do {or anyone else} feel free to say).

anyway light / dark versions:

[oriSomething]

i think i need to make the text on the light version darker

[oriSomething]

some small fixes. wait for your feedback

[cburgdorf]

I love the direction this is going :)

How about placing the cards a bit more like that: #21 (comment) ?

It's easier to get the rank of the user when there are not multiple cards on one line directly next to each other. And I would love to have the rank number somewhere. In my head it looks great to place huge numbers next to the cards but that might just be me and my weird imaginations ;-)

[oriSomething]

i think it's unneeded.
if you need someway to show a rank. you don't need really need anything exclude the first 3 places. or at least a small place for badge. and with no relation the huge numbers are way too much.
i think that first thing you need to think about is what are your expatiation from this project. it will also help to design this project, and if a badge system is needed it can help to decide about what are the badges that needed.

[cburgdorf]

I think I'm currently the most active heavy user of ninya so I'll describe a bit how I use it. It's a great tool to discover other users that share your interests and also to compare them or yourself against others.

Let's stay in my hood and search for angularjs in Hanover.

@PascalPrecht is leading the game here with me being second.

Let's add git to the skills and you see that I'm taking lead because my cumulated skills of angularjs + git are greater than Pascals (whereas his angularjs score outperforms mine).

Unfortunately we don't show this score anywhere yet. We only show the overall reputation which becomes irrelevant once you start filtering by skills.

So, in this simple example it's easy to live without the ranking numbers being visible. However, let's add Hamburg to the locations to combine results for Hamburg and Hannover.

I fall back to number seven (not in the screenshot) but in order to get that information I have to scroll and count the users manually. That's unfortunate. In fact, it's one of the most annoying things for me currently.

We don't have to go with my proposal of arranging the cards irregularly and place huge numbers next to the card. But we should show the ranking numbers somehow because it's really super annoying to count them manually.

I think it's a bit misleading if we place multiple users in one row. Do you have an example of a ranking where they do that? I think it makes it harder to grasp that the order is important.

[cburgdorf]

Ah, I just passed @PascalPrecht with angular skills...invalidates my example. Just take it for granted ;-)

[oriSomething]

sadly you're not using Ember.js (yet) ;)

about, using cards, ranks and stuff:

1. the first sketch had one "card" or "item" in a row, if you want one item in a row which feel more cardish, i'll make a sketch
2. i don't think that having a few cards in a row will make it harder, it will make it less unique, but will allow to see more information in a page, which might not only text related
3. although at the beginning, it would be better to start with only one way to sort, we can have a few ways to views (i'm talking about design but not limited to). think about as much as in finder / explorer / whatever the name of this in linux. you can have the same data (files) arranged in different views (details / thumbnails / …)
4. i still don't understand what are the expectations of this project. is it about ego / competing thing? to show "hey, i'm better than other in this area and that fields in stack overflow"? what is the purpose of finding people in ninya? because maybe, the whole UX would be better in a very different way. maybe showing some people in the top without even search
5. pagination is something that must. if there be around 500 results in a single search, it would be better to use pagination for better finding. numbers will not help and in the 500th result might look weird
6. about badges we will need to decide. of course "1st", "2nd", "3rd" is something a bit obvious. but also we can think about direction like. "senior", "junior", "rising star", "fast responder", … can make it more interesting even on the 20 page and more informative

p.s.
is hanover the city where the cookie monster stole something from some statue?

[cburgdorf]

if you want one item in a row which feel more cardish, i'll make a sketch

Yep, that would be awesome.

i still don't understand what are the expectations of this projec

Well, there are different use cases. The most obvious is for recruiters. In it's current state it's pretty much like a light version of the Candidate Search of StackOverflow except that it doesn't cost 1000 $ per month ;-)

But I want to connect to different platforms, not just StackOverflow.

However it's not my main goal to build something for recruiters. I just like to discover other users. I think it's cool to figure out who in your city has C#, Node.js, Angular or Ember skills. Maybe I want to follow them on twitter or read their blogs etc.

pagination is something that must

Guess we want something like infinite scrolling at some point in the future

is hanover the city where the cookie monster stole something from some statue?

Wow, you read about that in Israel? Yep, that's my city :)

[cburgdorf]

Btw, can you upload the logo already? Would love to start using it for the twitter account.

[oriSomething]

1. yes, i'll fork and commit. now the question if you prefer the graphic assets on a different branch or just a different folder?
2. i'll check the link. we will probably leave this as a search for now, otherwise this project will begin to ship in 2015. we can always change things later, and some analytics / users feedback can change the direction. but i think the direction goes to a place where i can't say that search engine "as is" seems like the best fit solution. we'll discuss about this later
3. about infinite scroll, watch this. it might fit and might not. but numbers are so so solution (i might wrong), so we need to think about a different direction. maybe a sticky that represent the "current page" even if there are no pages (anyway, think about some badges ideas)

about the cookie monster, my sister lived last year at hanover for three months. she's an artist. anyway, a proper credit for the design would be welcome

[cburgdorf]

now the question if you prefer the graphic assets on a different branch or just a different folder

I would say a different folder should be enough

about infinite scroll, watch this

I'll check it out later.

about the cookie monster, my sister lived last year at hanover for three months

Awesome! Did she enjoy it?

anyway, a proper credit for the design would be welcome

Absolutely!

[cburgdorf]

@oriSomething just wanted to let you know that I rolled out a design improvement that already makes use of your new logo. This is just a temporally step before we get to redesign the whole page.

I have lots of tasks running in parallel and I felt that with relatively low work, we can already make huge progress. Especially since I want to write some blog posts soon, I wanted to have something nicer quickly.

[oriSomething]

yes of course, as you can see i'm a busy lately. soon back to the horse!

[oriSomething]

i got to the conclusions that badges it something that we might don't have enough time to sit it on it seriously. but i think in the "more info" section, we might conclude data for example. "the person is on a specific skill 1st place".
about the "big numbers" i thought about solution when it shows on mouse hover / slide on touch.

2 options (first one is GIF animations of 2 frames):

[cburgdorf]

Sorry, took me a while to get back to this. I was on vacation. I think I like most the first one more where the results really stand apart as cards (in the second screenshot it looks more like a regular list as they glue together)

We should probably start implementing it and fine tune from there.

[oriSomething]

great.
i need to do some presentation in some design collage. if i don't too busy i do might do it on weekend, maybe next one.
what do you prefer?

1. graphic style guide?
2. or static HTML + CSS?
3. or static HTML + CSS (on Bootstrap)?
4. sorry right now, i can't put it in Angular templates

as far as i know, right now it's not responsive, and this is how i work now.
i will add the F.A.Q to the style guide.

[0x-r4bbit]

Just to let you guys know, I also came up with something:

Just playing with it a bit.