UI redesign+My Mockup

[haze007]

Hello

So I saw the UI of this really cool app and I thought I could begin sketching a new UI for it and here's the result: http://imgur.com/CuKd4dV I could share the background and everything else I used there in case you like my mockup and I'm curious to know what you guys think.

Regards Haashir

[max-mapper]

Hi @haze007! thanks for taking the time to do your mockup. I think it looks great overall!

I'm kind of curious to see what it looks like with flat color backgrounds rather than the blurry photo background

Another idea would be to see a version with black text on a white background

I'm also curious to hear the design feedback from others here

Are these done in Illustrator?

[haze007]

Thanks a lot They're done with Sketch App. Since you asked for a Flat UI, here's another one inspired from the OS X's UI: http://imgur.com/QSnRk25

Here are the color codes and the logo I used for the above mockup:

74A3D7

222426

424555

FFFFFF

Logo: https://www.dropbox.com/s/s9wnxze39sf2vpf/friends_logo.png?dl=0

[hackergrrl]

Nice work @haze007! I'm really digging the latest OSX-like mockup. :+1:

Is it possible to share the design file somehow so that others could prod/poke/tweak?

[haze007]

Thanks again Sure, here's the file: https://www.dropbox.com/s/eqi6gk1l01wk099/Friends%20redesign.sketch?dl=0

[mstuefer]

Hey! Looks good @haze007. I can integrate it until tomorrow and make a PR if you want?
ps: I'ld use the ggl font (Nunito) instead of the one you used with Sketch (Avenir)?

[mstuefer]

See PR #152

[haze007]

@mstuefer Sure. That will be cool and since I'm kinda busy with my exams here, can you edit it manually there by yourself?

[jsimplicio]

Hey all just thought I'd contribute. I like the direction of @haze007's design. Some things could look a bit better. I don't think it's necessary to have a blurred image as a background and white text on top of it. Black text on white bg like @maxogden suggested is way more legible for the case of most users, and since this is a chat app we should lay the conversations out as most legible as possible. I also don't quite understand the colors next to each message, does each user have its own color? The input field for sending the message is also a little vague looking, it should resemble more of an input instead of just a line, it's looking too minimal I feel. I like the direction but think it's a little over designed. I took your mockup and really liked the use of each user having its own message box, so I just made a different version and went along implementing with some of the things I've already mentioned.

Let me know what you folks think.

[beaugunderson]

looks very clean! there's a lot of vertical space between messages though and i think the right margin on the avatar could be smaller too

in fact i don't think there needs to be a border around each message at all

[jsimplicio]

@beaugunderson True, I tend to give a lot of white spacing to things! I'd like to hear more about other people and what they think about borders around each message. I was going along @haze007's design but to be honest borders aren't necessary at all, they're just really a very visual way to separate messages.

[jsimplicio]

Here's a version without the borders around messages at all.

[jsimplicio]

The one color theme could potentially let people choose a color they want the app to stick to. I made it initially in blue but here's in red and green tones too.

[max-mapper]

@jsimplicio wow I'm super into these. @feross @mafintosh we should do a code sprint on Friends again sometime :D

[beaugunderson]

:+1: for the no borders version :)

[haze007]

I think chat bubbles around the messages should make the app look more user-friendly. Normally all modern IMs today follow this pattern. Great work everybody ;)

[ungoldman]

Thanks @haze007 and @jsimplicio for your work!

@haze007 It's true that a lot of Instant Messaging applications use chat bubbles, but Friends is a group chat application. Bubbles around every piece of chat content would quickly make it difficult to follow the conversation if more than a couple of users were present and chatting simultaneously. Friends is trying to emulate Slack in a lot of ways ("Friends is like Slack except P2P, offline friendly and open source." from http://moose-team.github.io/friends/). Here's an example of their UI:

I think a pattern like that works better for group messaging. It looks like @jsimplicio's second set of designs captures the need to display chat content from many users at a time.

[jsimplicio]

I feel like bubble chats are mostly helpful when it's a one to one conversation. The avatars next to the messages separate them well enough when you look at long conversations between people.

[ghost]

My opinion: I think there should be one UI because consistency really matters. But wouldn't it be really great if there were an option "skin"/"appearance"?

This option could give the users the possibility to choose a certain color palette from pre build color pallets. Or they could choose "Operating system them" or something like that to choose a color palette based on the colors used by the Operating system (in Windows 8.1/Windows 10 for example you can right-click on the desktop to go to the personalization menu to choose a color).

Of course that's just an opinion, what do you guys think of it?