“A mockup is worth a thousand lines of code”

January 8th, 2010 by Seif Lotfy Leave a reply »

Kalle Persson said “A mockup is worth a thousand lines of code

I fully agree! Thanks to Hylke’s mockup and guidance during the development of it, things started becoming more reality.

Randal Barlow hacked the little calendar on the bottom and the rounded corners. The Zeitgeist Engine team jumped in to fix bugs. Apoorca Sharma fixed some theme issues we had. Collabora finished “Teamgeist” which will be implemented in the UI and Codethink are helping us with the Tracker integration. Ahhhhhh I love you all :)

Here is the mockup

Here the implementation (missing the month labels) that took us around a week…

Screenshot-23

*UPDATE: Randal finished the calendar! With some minor adjustments we now have….

Screenshot-24

Advertisement

32 comments

  1. zerwas says:

    Great mockup. Do you think that verbs like “viewed” and “read” are needed? I am indecisive if it helps people to understand what they see or not. Keep on rockin’..err, coding!

  2. twilightomni says:

    The UI screenshot on this post is pretty than the one on Planet Ubuntu. This screenshot uses a nice gradient on the Today header.

    Is Planet Ubuntu pulling the wrong picture?

  3. Matthew says:

    Why not ‘Viewed or Modified Code”. I think it sounds nicer than whats in place atm.

  4. Pettson says:

    feedback: i find the flat version of blue on “today” in the mockup more attractive than the gradient in the real app. also, if i can say, i think it would be nice to see bigger arrows, as in the mockup, and that the day before wednesday, in this case, overlapped was also a really nice touch.

    also curious about what it looks like with a scrollbar? where is it placed etc.?

  5. mike says:

    Beautiful.

    But I agree with Pettson, the light blue is way more friendly than the gradient. That looks like this standard Wordpress theme ;)

    Besides, it’s really awesome :)

  6. Randal Barlow says:

    Quick update. Before I slipped out we had the mockup down to the tee, but someone tried a few things before the blog post. The white and gradient were removed. Here is how it looks as of the last push

    http://i49.tinypic.com/24nl63q.png

  7. tobi says:

    beautiful!

    feedback: i think the thumbnail for the mp4 is quite useless, maybe an icon would be better?
    also: cant identify what the screenshot icon is, the real screenshot or an “icon for screenshot” ?

  8. mike says:

    @Randal: Perfect :)

    As far the thumbs: I think below 92*92, icons are much more “readable”, dunno how you planned some zooming or sth.

    What’s the arrow at the top right corner doing? Preferences or sth?

  9. Seif Lotfy says:

    @mike
    it takes u back to Today

  10. mike says:

    ahh, “fast forward” :)

  11. Dylan McCall says:

    Beauty!

    Now, it would be especially good if one could scrub along that histogram with the mouse, instead of needing to click on the segments one by one. As a power user, I also feel that I should be able to select an arbitrary range of dates, but I guess that could get a bit complicated for other users.

    Nice work so far. I’m following this really excitedly so that I’ll be able to contribute patches :)
    (Maybe I’ll even be able to crack this one, but I’m no GTK+ guru).

  12. Matthew says:

    Is there a way to search?

  13. Seif Lotfy says:

    Not yet. We have the tracker wrappers for it. Hylke is thinking of a nice way to integrate it in the view :)

  14. Randal Barlow says:

    I got the cal to work just as shown in the mockup. Looking good. Take a look at the trunk

  15. Randal Barlow says:

    Updated version image here: http://i48.tinypic.com/s5k0er.png

    Hopefully I am soon done with this so I can move onto some other part, calendars ugh!

  16. frustphil says:

    excellent!

  17. Randal Barlow says:

    Hbons posted a new mockup tonite:
    http://img35.imageshack.us/img35/8432/calendart.png

    After I got home I finished this, it is working out very well
    http://i45.tinypic.com/vfcydi.png

  18. Milad says:

    @Randal Barlow
    Man, this looks good.

  19. How is Codethink helping on Tracker where Lanedo isn’t?

  20. Ulisse says:

    there is still something wrong with the use of the colors from the theme, even if it looks already better than the previous checout.
    Here is a quick mockup of how it looks with my theme (Leaf) and how it should look, with Nautilus in a corner as a sample:
    http://dl.dropbox.com/u/212852/Schermata-Activity%20Journal.png

    The color used by Nautilus as background is referred as base[NORMAL] in the theme, and it isn’t overriddden in the theme in use.

    Keep rockin’! :)

  21. Wow! Really sleek interface, nice work :-)

  22. Ulisse says:

    I found a way to change the color to the right one, but keep in mind that IANAC and my knowledge of Python is just as good as my knowledge of Russian: practically zero! :D
    here is my diff:
    change line 99 in daywidgets.py from “color = rc_style.bg[gtk.STATE_NORMAL]” to “color = rc_style.base[gtk.STATE_NORMAL]”

    Maybe you already knew that, and have a good reason to have it in that way, but let me be proud of my first little Python hacking success :)

  23. Dylan McCall says:

    Those month dividers look really fuzzy for me.
    http://dl.dropbox.com/u/2117279/FuzzyMonthDivider.png
    The current line ends up with a shadow, which you can see if you zoom in on my screenshot. Just not consistent with the sharp edges used elswhere. Perhaps a thinner (or lighter) line would do it. Same deal with the font being used; looks very bulky to me.

    (Also, I’m sure you’ve noticed, the month dividers are misaligned. They land one day early)

  24. Don says:

    Great! but the blue in implementation looks faded, the fonts are worse, and icons make text-alingment look bad (some are wider than the others ([+]) ). Details matter :)

  25. Bernd says:

    I think it would be a good idea to talk with the developers from “Project Hamster” to provide similar looking timelines in both applications.

    It’s cumbersome to see different layouts and approaches for the same problem in various gnome applications.

  26. Miguel de Icaza says:

    This is looking gorgeous. Congratulations to all involved!

    Miguel.

  27. Dan says:

    That looks awesome, is the idea that you can select an arbitrary set of days with [dragging|shift|alt]+clicking?

  28. sparky11 says:

    If you change the date with the calendar, the buttons above the calendar stay disabled (the forward and the today button) Maybe you could make it not get disabled for now, or implement it so it refreshes the state even when you change the date with the calendar.
    Also, the day headers seem to be a little brighter than the rest of the Day “box”

    Other than that, its looking great!

  29. Brian says:

    One suggestion — I think it would look great if you used clutter animations to make switching from one group of days to another, flipping through your journal, have smooth scrolling animations. Also, I noticed that in Hylke Bons’ mockup there are what look calendar entries to the left and right, where the left/right arrows are. I don’t know if he also intended for those to fit in with some kind of scrolling flow, but I think it would look great if it was all part of one animated continuum. Great job, and keep up the good work!

Leave a Reply