PDA

View Full Version : ICS Mockup from Reddit


htwyford
01-30-2012, 12:48 PM
A few hours ago somebody posted this mockup on Reddit: http://u.filepak.com/FpNh_UI.png
Considering the poor quality of the Android App an ICS'd layout would be amazing. Someone at Valve see this, and hire this guy!
Original reddit post: http://www.reddit.com/r/Android/comments/p2mu1/wasnt_happy_with_the_copypaste_ios_ui_move_that/
User who made the mockup: http://www.reddit.com/user/Dicko21

Savage Alien
01-30-2012, 05:28 PM
Yep, this is pretty much exactly what we need.
The mockup artist took the Android Design guide (http://developer.android.com/design/index.html) and made a spot on mockup for what it SHOULD look like on Android [especially ICS].

I would maybe change the Unread Message count red flag to something more appropriate. Also, I'm guessing that the grey Lorem Ipsum text on the friends page under Status, must be a preview of the last message sent?

Also, in true Steam fashion, we could have Friends and Groups on one view with tabs to switch between the two [especially if we had a Group Chat feature].

Scared
01-30-2012, 05:38 PM
I would maybe change the Unread Message count red flag, and I'm not sure what we'd have on the friends list where they put the Lorem Ipsum, preview of the last message sent?

I think it already does that. Lorem Ipsum is the name I assume, below that is their status (ie in game) and below that it looks like the last message (I don't read that language, if it's a real language and not just mashing the keyboard)

D1cko
01-30-2012, 06:07 PM
I wanted to post that mockup here first (But had to wait the day for my steam forum account to be approved. Also wasn't allowed "Dicko21" due to the word "♥♥♥♥" and the filters picking it up, so this will have to do!) and I realise now that the image should have had a lot more of an explanation along with it.

Scared is right - Lorem Ipsum is the name, status below that and yes, last message sent or received from that player is below that. The red flag is number of unread messages from them (Like the balloon you get on the current steam app). Someone on Reddit suggested that the icons were too big for people with 100's of friends, so I mocked an alternate view style (Which in the ideal world would be able to switch between): http://fpk.im/WeEM

In that image, status is replaced with last message received.

I also like Savage Alien's idea to merge groups and friends into the one screen (Might create another mockup to suit this later! :D).

Cheers guys, I'm pretty excited thanks to all of the positive feedback this received! :)

Savage Alien
01-30-2012, 07:35 PM
I think it already does that. Lorem Ipsum is the name I assume, below that is their status (ie in game) and below that it looks like the last message (I don't read that language, if it's a real language and not just mashing the keyboard)

Oh, sorry, I meant the grey part under Status, obviously it goes Username then Status. I totally overlooked the fact that the names used Lorem Ipsum, too.

FYI, Lorem Ipsum (http://en.wikipedia.org/wiki/Lorem_ipsum) is latin, and it's used by designer as filler text to demonstrate how a design will look.

spartan0078
01-30-2012, 07:50 PM
I personally like the look of the app, feels like I'm using a steam oriented app.

Scared
01-30-2012, 07:53 PM
Oh, sorry, I meant the grey part under Status, obviously it goes Username then Status. I totally overlooked the fact that the names used Lorem Ipsum, too.

If you mean the "Lorem Ipsum" near the top of the middle image I think it is right to have it there since it's representing the current page that you are on.

D1cko
01-30-2012, 08:22 PM
If you mean the "Lorem Ipsum" near the top of the middle image I think it is right to have it there since it's representing the current page that you are on.
Yep, on the center screen, Lorem Ipsum is their username.

Scared
01-30-2012, 08:50 PM
Someone on Reddit suggested that the icons were too big for people with 100's of friends, so I mocked an alternate view style (Which in the ideal world would be able to switch between): http://fpk.im/WeEM

I think this is the better size. The other one would work if you only had a dozen friends but with up to 250 friends then we would need to save some space on the pictures.

Savage Alien
01-30-2012, 11:13 PM
I think you could scroll through your list fairly fast. Just swipe, lol.

Here's my edit of the original mockup.
Friends list: I added tabs, colours to the various Headlines. I made the user-bar smaller, not quite as small as the 2nd mockup by D1cko but, compared to the current Steam App, you only lose 2 users on screen.

In chat, I added the dropdown arrowns, to indicate profile access, and a speech balloon arrow; both to follow ICS design. Oh, and the Type Message box, which was missing.

http://fpk.im/kD23

I think the chat could be too dark, but I'm going to leave that for now.

D1cko
01-31-2012, 12:14 AM
I think you could scroll through your list fairly fast. Just swipe, lol.

Here's my edit of the original mockup.
Friends list: I added tabs, colours to the various Headlines. I made the user-bar smaller, not quite as small as the 2nd mockup by D1cko but, compared to the current Steam App, you only lose 2 users on screen.

In chat, I added the dropdown arrowns, to indicate profile access, and a speech balloon arrow; both to follow ICS design. Oh, and the Type Message box, which was missing.

http://fpk.im/kD23

I think the chat could be too dark, but I'm going to leave that for now.
Wow, this is impressive! Excellent work there man :D

I've submitted this to the original Reddit thread as well :).