QUOTE.fm Read WIP Demo

As a designer Marcel often shares screenshots of the designs he is currently working on. I thought about what I can share with you guys that’s more than a screenshot of the pages in a browser, because if I do my job really good it looks exactly like the designs you already saw.

Our process at QUOTE.fm

After Marcel finished his work in Photoshop I take over the PSD files and begin working on the frontend. This means I craft all the HTML and CSS with dummy content and every possible state of every element. I also do all the animation stuff in JS and things like that. When I finished my work, it’s Philipp’s turn. He takes my stuff and integrates it in QUOTE.fm. He makes sure that everything works the way it should. From time to time he discovers minor bugs or needs some elements I forgot to implement. Then it’s my turn again. Sometimes we have to go back even further and do some design changes. We repeat this process over and over again until we are completely happy with the result.

What I am currently working on

The last couple of days I worked – with short interruptions – on the new Read section. As you might know we are building a read later service into QUOTE.fm. But that’s not all. We are also upgrading the read section with some social components.
For example you will see who recommended the story you are currently reading, what they said about it, which paragraph they marked, etc. You will also be able to comment on the article and engage in discussions right from the clean text view.

It’s all far from completion and everything could be changed any second, but I want to share my process along the way. So go ahead and try the QUOTE.fm Read WIP Demo.


    1. Und wenn man aus Versehen hovert und aber gerade an einer anderen Stelle liest? Finde das highlighten der Recommendation schon ziemlich gut gelöst, vielleicht noch ein optischer Hinweis, falls das Zitat außerhalb des sichtbaren Bereiches liegt. Bin mir aber sicher, dass die Jungs sowas eh schon alles bedacht haben. So wie es wird, wird es gut werden.

  1. Awesome! I love the way you seem to be able to customize „read“ to your personal preferences.

    WIP stuff to try out, that’s what you can show that makes your work distinct from the designs Marcel is presenting. Do you happen to have different solutions for a certain problem from time to time? If you create such mockups for your internal use it would be great to see them as well. Comparisons of different navigational approaches for example. But I guess you don’t have such things as your workflow seems to be working differently, right? Anyway, good to see some front-end output as well, I’m keen to see more of that!

    1. We basically do the same as every other read later service, for example the popular Instapaper, does. You can save articles for reading later and we present them in a clean and readable way – and only the ones you saved for yourself. That’s nothing new. We then add the social component, which is actually new.

  2. Looks awesome.

    One suggestion: I would like to be able to switch all quotes on so I only need to scroll through the text to see them instead of scroll, hover, scroll, hover, scroll. Maybe once the people button is activated they are shown in a very light blue.

  3. Pingback: payday loans

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.