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. 👍

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]

👍 for the no borders version :)