08-29-2014 11:11 AM
96 123 ...
tools
  1. Im_Q's Avatar
    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 by Im_Q; 06-17-2014 at 03:57 PM.
    05-25-2014 10:38 PM
  2. vakama94's Avatar
    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
    von929Shavone likes this.
    05-25-2014 10:43 PM
  3. troylytle's Avatar
    Shared with Belfiore.
    Im_Q and bijak_riyandi like this.
    05-25-2014 11:21 PM
  4. sd173's Avatar
    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 by sd173; 05-26-2014 at 11:21 AM.
    05-25-2014 11:25 PM
  5. baseballbert's Avatar
    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
    05-25-2014 11:43 PM
  6. Im_Q's Avatar
    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.
    05-26-2014 09:13 AM
  7. Im_Q's Avatar
    Thanks, everyone. I'm glad that you guys like the design.

    Sent from my Lumia 920 using Tapatalk
    05-26-2014 09:14 AM
  8. Jonas_H's Avatar
    :0 omg it's beautiful! I want it!!
    05-26-2014 09:30 AM
  9. travis_valkyrie's Avatar
    Never forget.

    facebookonwindowsphone.jpg
    rdubmu, colinkiama, sd173 and 12 others like this.
    05-26-2014 09:49 AM
  10. dlalonde's Avatar
    Never forget.

    Click image for larger version. 

Name:	Facebookonwindowsphone.jpg 
Views:	86 
Size:	64.5 KB 
ID:	67476
    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.
    05-26-2014 12:38 PM
  11. Im_Q's Avatar
    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.
    05-26-2014 01:42 PM
  12. jailman's Avatar
    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
    05-26-2014 01:54 PM
  13. SammUL's Avatar
    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.
    05-26-2014 02:02 PM
  14. vakama94's Avatar
    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
    05-26-2014 02:24 PM
  15. Bashar Awwad's Avatar
    That looks gorgeous. Is this a concept u came up with on "paper" or are u actually writing this app?
    05-26-2014 02:55 PM
  16. Im_Q's Avatar
    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.
    05-26-2014 03:21 PM
  17. mike13ftw's Avatar
    I like it a lot but the bar in the bottom doesn't seem nice . Without that bar it would be a awesome design
    05-26-2014 03:27 PM
  18. Im_Q's Avatar
    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.
    05-26-2014 04:02 PM
  19. colinkiama's Avatar
    If you make this app... The amount of downloads this will get..
    sd173 likes this.
    05-26-2014 04:10 PM
  20. sd173's Avatar
    If you make this app... The amount of downloads this will get..
    ...It'll be over 9,000!
    colinkiama and Im_Q like this.
    05-26-2014 08:08 PM
  21. colinkiama's Avatar
    ...It'll be over 9,000!
    Nailed it;)
    sd173 likes this.
    05-26-2014 08:15 PM
  22. Sheamartin's Avatar
    Latest FB update keeps resetting and closing. I'll try another soft reset. But FB is having real glitch on my Icon with 8.1
    05-26-2014 08:45 PM
  23. NokiaBeast's Avatar
    I'm having some of the same problem on my 1020 with FB fairly frequent resetting and closing. I really like the OP's new design!
    05-26-2014 09:03 PM
  24. lordsnow's Avatar
    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.
    Could you post the xap, only for seeing this awesome design on my phone? :)
    05-26-2014 09:36 PM
  25. Im_Q's Avatar
    If you make this app... The amount of downloads this will get..

    As cool as that would be, it's just too much for one dev to do on the side. Now if Facebook commissioned me to develop the app, that'd be a different story.

    The best we can hope is that Microsoft/Facebook adopts some or suggestions and/or utilize my design to improve their app. I'm gonna try to contact all relevant parties and try and see if I can get their attention. I'm not holding my breath though.
    05-26-2014 09:49 PM
96 123 ...

Similar Threads

  1. How to get my paid apps again but from a different microsoft account?
    By alexgonzales in forum Microsoft News & Rumors
    Replies: 2
    Last Post: 05-26-2014, 10:47 AM
  2. WP 8 Calendar-3rd party apps/Private Appts?
    By urik770 in forum Windows Phone 8
    Replies: 1
    Last Post: 05-25-2014, 10:35 PM
  3. Calendar app
    By anon5954042 in forum Applications
    Replies: 5
    Last Post: 05-25-2014, 09:05 PM
  4. Testing the security of the Windows Phone email app
    By ListenUpGuys in forum Windows Phone 8
    Replies: 1
    Last Post: 05-25-2014, 07:33 PM
  5. Grab this free app now to keep your Windows Phone Lockscreen fresh
    By WindowsCentral.com in forum Windows Central News Discussion
    Replies: 1
    Last Post: 05-25-2014, 04:15 PM
LINK TO POST COPIED TO CLIPBOARD