Jump to content

Thoughts on flat window mockup?

Recommended Posts

Hey guys,


So I was recently invited to be Dribbble player, and I'm hoping to make a good first impression on the site. I spent the past week putting together this conceptual design for a language exchange platform (and of course, it's flat). Tried going for extreme simplicity while still ensuring basic functionality. I suppose the only thing that would require some explanation is the fact the plus icon is to be used for starting a new chat. Anyway, I was wondering if you guys could give me some design advice and/or just talk about your first impressions. I'd really appreciate it! Thanks!


Share this post

Link to post
Share on other sites

I do like your design’s simplicity. Very much. It is much more pleasing than some of the ‘in your face’ type of design chosen for some web content. I am one of those who were pleased with the recent design shift which Apple underwent with Yosemite and iOS with which this design would blend well.


As ‘flat’ design lends itself more readily to larger elements by virtue of its ‘flatness’, it might be worth the effort to see if increasing the size of the bell, gear, and the plus sign to the same height and size as the circular avatar space was allotted on the left might possibly be seen as an improvement. What might not work so well, but may also be worth a look-see, would be to then place the badges for these icons slightly above and to the right of each icon at a level with the Apple-like ‘traffic light’ on the left - were the icons larger it could be fitting. Maybe. (Too large and it could become too ‘Fischer-Pricey’; but it could work well in this context, especially considering the lack of harsh colour.) Perhaps changing the icon's badges from the Blue to a Red which matched that of the 'traffic light' on the left would impose a bit of balance when present and additionally cause them to stand out and be more readily noticeable. 


As the rest of the design is mostly in muted tones, perhaps you might try changing the text of the chat participant’s names from Red and Blue to Bold black (for the other person) and the same Lighter Grey as the bell, gear, and plus sign (for the ‘Me’). As such they would still be clearly distinct from the black body text yet, somehow, less distracting and easier on the eye.


I have enjoyed and appreciated this and your other posted work (especially your excellent tutorial) and look forward to seeing more!


* That the 'plus sign' is to be used for starting a new chat should not require explanation, as everyone knows that 'plus' simply means 'more' or 'further' in Latin - don't they!  :rolleyes:

Share this post

Link to post
Share on other sites

That looks really very smart! I'd be very impressed to see an actual app like that - looks really modern :)  I do agree with justwilliam about the red and blue colours - I understand why you've used them because it makes complete sense to be very clear about which person is which, but I think that they're a little distracting for me - and with a page full of chats it would start to look a bit too busy for my eye? Other than that, really well done! :D

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.