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!

post-14266-0-79522500-1439525606_thumb.png

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:

Link to post
Share on other sites
  • Moderators

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. 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.