Facebook App Design Concept

Im_Q

New member
Nov 26, 2012
119
0
0
Visit site
Hi everyone. There are some really beautiful apps on Windows Phone and then there are some really disappointing looking ones. One of the apps that has really irked me is the Facebook app. I'm a dev that focuses largely on attractive UX and proper usage of WP's Modern design language. I'd like to share what I've come up as what I believe to be a good compromise between Facebook's design language (to keep apps consistent between platforms) and Windows Phone's Modern design language (to give it a unique personality on this platform.) Let me know what you guys think.

FB_Modern.png

Scrolling will collapse the AppBar:
FB_Modern_Scroll.png

While looking at this, I'd like to provide a few bits of information:

- The page title is the same formatting as (position, capitalization, etc) as system apps like messaging, mail, any pivots, etc to keep a consistent feel with the OS.

- The bar with the four buttons are analogous to iOS' bottom bar in that it switches views but here, the look is drawn from the buttons in the Action Center. Again, this is to give it a WP feel.

- Tapping on one of the four buttons switches to the appropriate view. I've also changed the badges from the red iOS-like ones to a more WP live tile-like ones as seen with the "notifications" button. I prefer it this way, but Facebook can stick with the red round badge for notification count just as easily. With the "news feed" one, a star is shown when there are new stories.

- The main two colors are the standard FB blue, and the FB blue accent that's used in the Windows 8 app and iOS app to keep consistent with Facebook's designs. The grays are a mix of Facebook's and the OS' light theme grays.

- Much less chrome. Modern UI showcases content, not chrome so I've removed excess rectangles and boxes around news feed posts and let the typography and images shine through.

- WP apps usually have a consistent left and right margin. Notice how almost everything lines up the same distance away from the edge of the screen. This is subtle but gives it a clean and polished look.


If you guys really like this, feel free to pass along this screenshot to Facebook or Microsoft. Hopefully, it'll at least spur them to try a little harder on designing their WP app.
 
Last edited:

vakama94

New member
Feb 9, 2013
44
0
0
Visit site
Sir, this is a beautiful concept and it really looks like the Facebook that we should have on WP 8.1. Congratulations.


Sent from my iPod touch using Tapatalk Pro
 

sd173

New member
Dec 24, 2013
2,305
0
0
Visit site
Wow. I don't even use Facebook but this looks so good that if it were what the app actually looked like I might consider it.
 
Last edited:

baseballbert

New member
Aug 14, 2011
1,610
2
0
Visit site
I'd like to be able to open a thread and see the comments already displayed like in ios without having to take another step to get to them.

"Never half *** two things. Whole *** one thing." - Ron Swanson
 

Im_Q

New member
Nov 26, 2012
119
0
0
Visit site
I'd like to be able to open a thread and see the comments already displayed like in ios without having to take another step to get to them.


"Never half *** two things. Whole *** one thing." - Ron Swanson




Can you elaborate on this? Not sure what you mean.
 

Im_Q

New member
Nov 26, 2012
119
0
0
Visit site
I agree this was the best one. I felt like it was actually a Windows Phone app not just a copy of the other OS' apps.


I too like this design a lot. Unfortunately, I don't ever see Facebook supporting separate app designs again so this was the best compromise I could come up with.

Although the app layout is not very Modern UI-like, I've tried to incorporate a lot of subtle design cues to give it a more WP feel.
 

jailman

New member
May 14, 2013
71
0
0
Visit site
I like the design it will make wp look like a giant competing OS instead of stupid IOS/Android lookalike wich makes wp look like its trying to catch up
 

SammUL

New member
Apr 13, 2014
97
0
0
Visit site
I use the facebook Messenger app, which is official and made by facebook and not by a third party (Microsoft). And for the rest of facebook I just use the website, it works perfectly on the browser and there's no need for an app (clicking on a name in the messenger app will open the website anyway). My guess is that Facebook doesn't care much about WP as it's not a popular OS (or for whatever other reason), but Microsoft can't allow not having a facebook app on their phone OS since it's very popular and basically a "must have" for an OS, so they build it themselves and the results will never be like an official app.
 

vakama94

New member
Feb 9, 2013
44
0
0
Visit site
I agree this was the best one. I felt like it was actually a Windows Phone app not just a copy of the other OS' apps.

Definitely. That type of design was the thing that made me interested in Windows Phone when it was first announced. It's too bad they are just copying and pasting without taking the time to make their app look good and stay fast and stable.


Sent from my iPod touch using Tapatalk Pro
 

Im_Q

New member
Nov 26, 2012
119
0
0
Visit site
That looks gorgeous. Is this a concept u came up with on "paper" or are u actually writing this app?


I actually have it running on my phone but it doesn't actually pull any real data. It's just using sample data so it displays something. Any running code I have currently is just to make the UI function. If I had permission and full access from fb, I'd be more than willing to bring this concept across the finish line and write a full app.
 

Im_Q

New member
Nov 26, 2012
119
0
0
Visit site
I like it a lot but the bar in the bottom doesn't seem nice . Without that bar it would be a awesome design


I can understand that. It's there because I can't remove any features otherwise it'd a bad design. All of the Facebook apps have the option to post and check in right in the news feed. If it helps, the bar shrinks to the minimal size when scrolling down and the icons are supposed to be dark gray rather than the black I have now. I'll update with a better screenshot soon.
 

Members online

No members online now.

Forum statistics

Threads
322,908
Messages
2,242,875
Members
428,004
Latest member
hetb