New admin design, retooled links and notes, better comment notifications, featured public projects and more

Last week we launched one of the biggest updates in Mocksup’s short history. And now that it’s been out in the wild a few days and we’ve had a chance to squash most of the bugs, we wanted to brag about it a little bit.

New admin design

New admin design

Lots of Mocksup’s old admin design had been done in just 48 hours during last year’s Rails Rumble. Needless to say, that’s not much time to create an interface. And even though it served us well, there were several things about it we’ve been itching to improve:

  • We’ve added breadcrumbs to make it much easier to navigate around and know where you are
  • Before, the mockup tree and comment area each took up half the vertical space of the sidebar. This made the interface overly crowded and didn’t give enough room to either the tree or the comments. So we’ve moved comments to its own tab, freeing up a lot more space for both and making the interface a lot less cluttered.
  • On the project dashboard we’ve added two useful new features. First, you can now add an optional “project description”, so you can better explain what a set of mockups is all about. And, second, with private projects you now see a list of everyone invited to a project, so you no longer need to ask the admin if so-and-so has access a project.

New project dashboard

  • The invitations page is now much improved. You can send the same note to multiple people without having to rewrite it every time. And we added autocomplete so now you just need to remember the first letter or two of someone’s email address to add them.
  • Lots more small stuff: new icons to show which of your projects are public and which are private, projects are now organized on your dashboard by “last updated”, a new announcement area on the dashboard to let you know when we’ve written a blog post, pushed changes, etc.

Retooled links and notes

Before, when you created a link or note, you’d be asked where you wanted it to go or what you wanted it to say, then a 50px by 50px square would be dropped into the upper left of your mockup and you’d have to move it to where you wanted and resize it. That was an inefficient artifact of how we first had to create links and notes and we couldn’t wait to get rid of it.

Well now, finally, the first step in creating a link or a note is drawing the box onto the mockup, and the second step is choosing the page you want to link to or what you want the note to say. We think it’s a huge improvement and we hope you do, too.

Better comment notifications

New comment notifications

Not everyone needs to be notified by email about every new comment. So, now, when you leave a comment you can control who gets notified via email about the comment and who doesn’t. Less email! Yay!

Featured public projects

New Examples page

When people like Garrett Dimon started linking to their Mocksup projects on sites like Dribble, we decided it was a great way to get the word out about Mocksup and we wanted to encourage more of it.

So we created a new Examples page that makes it easy to browse some of the best public projects. We’ll try and rotate the projects in and out every couple of weeks, so check back regularly for fresh new inspiration and real world examples of how people use Mocksup everyday (if you’re logged out, you can also visit our newly redesigned tour and pricing pages).

Sidebar slideout, keyboard shortcuts

When you’re presenting a mockup on Mocksup to a group, you almost always minimize the sidebar, right? And that works great except when you need to navigate to the next mockup. Then you have to maximize it, click the link to the next mockup, then minimize it again. Well, no more! There are actually two new ways to get around this annoyance.

First, you can hover over the minimized sidebar for a second or so and it’ll automagically maximize, letting you click the next mockup, and then once you’re taken to that mockup, the sidebar is minimized again. Saves you two clicks everytime!

Second, you can use our newfangled keyboard shortcuts:

Navigation

  • Ctrl + ↓, Ctrl + ↑: Go to the previous or next mockup

When a link or note is selected

  • Alt + arrow keys: Move the link or note 1 pixel in whatever direction
  • Alt + Ctrl + ←, Alt + Ctrl + ↑: Make the link or note 1 pixel skinnier or shorter
  • Alt + Ctrl + →, Alt + Ctrl + ↓: Make the link or note 1 pixel wider or taller

This update was a long time coming and we hope you’re as pleased with it as we are. In the coming days we’re going to be updating our help center to better reflect all the changes and better answer some of the real world questions we’ve gotten in the recent months. As always, if you have any questions, please don’t hesitate to send us a note.

Thanks for making 2010 such a great year for Mocksup. We simply can’t wait for 2011. Until then, Happy Holidays!