Read/Unread
Recently I’ve been talking to Bryan about how we can differentiate between Unread and Read messages. Before we were simply using background colors to indicate old vs new. We felt this created too much of a responsibility to mark everything as read, and wanted something more subtle. We decided to leave the background color white no matter what, and simply change the way information is presented in older messages. We also make a subtle but obvious change in the opacity of the message title in older messages.
A message appearing as unread. We display full information, preview the message body, and thumbnail attachments.
The same message appearing as read. We display less information, cut out the message body preview, and summarize attachments.
An even more compressed version of a read message.
Raindrop design status
Hey everyone - Sorry for the major delay since the last update. In this blog post I’m going to try and summarize what’s been happening here at Raindrop for the past month, and consolidate all of its Flickr activity into one post. I’ll be talking about what’s currently live, what we’re still iterating on, and what we still need to think about. I’ll also talk about our near future plans for a hosted version (so you can easily get your hands on it), and included at the end is a short screencast of our current interactions. Ok go!
Navigation and organization
So it has been a little while since the last update but we have been busy putting together some plans for the very near future. Hit the jump to check out some new mockups as well as an update on the current status of Raindrop.
Subtle changes
Just a quick blog post showing a new look for the summary and widget view. The summary widget now connects to the main inflow to better communicate what it is talking about. The widgets also now expand and collapsed in a stacked layout. The information which will be in the summary is not finalized, however to start with it will simply display new message counts. The widgets themselves will communicate the widget specific new activity. This is not shown in the mockup above. There is a very basic demo that I put together so you can roughly see how it works, which you can check out here.
This new layout is based on Bryan Clark’s sketches which can be seen here.
-Andy Chung
A personal message
This is a quick demo of the way in which we would preview a new message that has arrived in the inflow. This is showing an example which has a lot of information - several replies in a group message with many links and attachments. This demo shows the way in which we will allow you to preview and navigate through links and attachments (try the prev/next links), as well as how we could expand content (click the read more link) within the inflow itself (ideally this would transition or animate from a preview to full message, not just an open/close state).
Also, please excuse my poorly pieced together html for this demo, it’s just hacked together and is no indication of the actual code! Check out the DEMO HERE.
3.1 Widget differentiation
In this blog post I will talk about the subtle differences between the different types of widgets which will appear in the sidebar.
Thinking mobile
View on flickr, or click image to view full size
One of the initial goals with Raindrop was to develop it as both a browser based application for your desktop, as well as a web based mobile application. Designing for a desktop and designing for a mobile phone present different and unique challenges. This blog post will go over some very initial ideas for how Raindrop could function as a mobile application.
A conversation in XHTML
While crafting up some of the HTML we’re using for the listing of conversations in the main view we’ve taken a quick look at the hAtom micro-format and started adapting our classes to use that in a meaningful way.
One of our goals is to write clean, easy to understand HTML and CSS that will help others who are adapting or extending raindrop.
Message types
This post goes into detail about the subtle differences within message types, and how they are displayed.
04. Iteration 3.1
↪Iteration 3.1: View full size | Discuss on Flickr
Since the third iteration post we’ve gotten a decent amount of feedback, through this blog, the flickr group, and in real life. Since then we have come up with a solution that we will implement into the current development version Raindrop.