Using Dropmark to design Dropmark

Dropmark is a core part of our workflow. We thought we would show you how we used Dropmark for our redesign — yes, we’re getting meta in this post.



As you can see, our design collection grew over time. To keep things organized into iterations, we utilized stacks. Having one centralized group with stacks allowed us to remain focused on the project, but still have a historical record of where we’d been. If we found that we wanted to reference a particular design later down the line, we would always know where it could be found.

To start, like most design processes, we gathered inspiration like a combine harvester. Dropmark is excellent for saving inspiration and generating effortless mood boards. In fact, with a whole group of people uploading to one centralized place we got a great head start on defining elements that we wanted to explore further.


We knew we were invested in exploring an illustration style that was characterized by flat, clean lines, and color blocking. We were also drawn to illustrations which were textural, rough around the edges, and playful without becoming babyish. We love Swiss-style black and white typography and wanted to explore type-on-a-path, letterspacing, and text overlays.

Once these had been defined, we got started in earnest with experiments like this video by Hayelin Choi.


We wanted to try to convey the many ways that people use Dropmark. Students, teachers, designers, marketers, parents, and PR specialists all use Dropmark & it’s essential for us that everyone feels welcome.

We were interested in changing up the color palette after this experiment and felt that the textural nature of this video was awesome, but didn’t fit into Dropmark’s aesthetic.

GIF of Dropmark exploration in museum style

For the next iteration, we dialed back on the textural elements while retaining the rough around the edges look. We were excited by the use of negative space here. The new direction also treated Dropmark less like a scrapbook, and more like a museum.

We wanted to explore that more thoroughly and found that the parameters of a museum or art gallery felt applicable to how people use Dropmark in a visual sense. We also started to hone our messaging, describing Dropmark as a place for organizing, collaborating, and discussing anything.



We were initially excited by thinking about Dropmark as a museum, but after further exploration, we realized it might not be the best fit. Dropmark is a living, breathing resource for your team. And it’s accessible. We want you to interact with the stuff on your screen: drag them, drop them, delete them. They’re your items, not ours.

In the end, we realized that not all that many people go into art galleries and take stuff off the walls, so we needed to go back to the drawing board. Instead, we explored something that people do go into and touch things on the shelves: libraries.



By this point, we were about 80% happy with the illustration style, 90% happy with the color, and 99% happy with the typography. We knew though that the last 20% would make all the difference. So, we reached out to the awesome Meg Lewis to help zap our brains with some creative juice.

Our user base is quite diverse, and we didn’t want to come off too design-elitist, but still be aspirational. Minimalism (with a touch of joy) was our North star to aim for where design enthusiasts and non-designers can feel comfortable and seen. “Less but better” as our hero Dieter Rams says.

Screenshot of illustrations by Meg Lewis

After working with Meg to define more of the illustrative style and color palette, we began working with Frank Chimero. Frank worked with us to hone the direction of the site, including the paper fold universe you see on our site now.

Sharing those wireframes in Dropmark meant we were able to generate feedback and quickly gain a consensus.

Screenshot of wireframes made by Frank Chimero

You’ll notice in this collection a text item in the top left corner. Frank used Dropmark’s text tool to set expectations and rationale out for the team in the stack. This meant that everyone had clear expectations before viewing through the stack as a whole.

We don’t sing the praises of Dropmark’s text feature enough. It can be invaluable as a way of sharing information with your team or a wider audience. It even works using Markdown if that floats your boat. Markdown is a super simple HTML format which generates text attributes using symbols you already use all the time. For example, to make a word bold, you’d surround it with two asterisks either side. Simple and effective.

Screenshot of comments within Dropmark

After the wireframes and full-fledged designs, we got down and dirty with the code. When we had the site in a place on a staging server for QA testing, we were able to utilize Dropmark once more.

As we were refining, we used Dropmark’s browser extension to take full-page shots of the staging site and see if there needed to be tweaked.

Annotations and comments in Dropmark make getting into the details like this so much easier than running emails back and forth. Everyone can see your thoughts in realtime and from months ago without having to search through Slack or have back and forth in meetings.

Illustration of Dropmark's new branding

And, that’s how we did it! Let us know your thoughts on our process, design, or product on Twitter or Instagram.

Behind the scenes with Kelli Anderson

Kelli Anderson is a designer, author, and paper genius. We’ve been longtime fans of Kelli’s work, and we were thrilled to work with her on our new video.

We chatted with Kelli about how she made the video, including getting those wiggles just right.

Did a real road trip inspire the video?

Most of the “road trips” I’ve taken are just really long bike rides, interspersed with trains. But I aspire to sit still long enough to go on the classic, geodesic dome-spotting California road trip. (I hope it isn’t apparent that this video wholly depicts a charlatan New Yorker’s fantasy of California!)

How long did crafting the paper take, and what does that process entail?

A few weeks. I made the wiggly sine wave animation in Processing, then illustrated around those waves in Illustrator to make the map, the dome, the surf-waves, etc. Each wiggle loop is seven frames in total. I then would laser cut those illo-wiggles and use the negative space to position and glue them onto a white piece of paper. It was essential to ensure that they were exactly parallel to each other, any rotation would cause the animation to lose its smooth continuity.

tidepools.gif

I scanned in those pages for the wiggle illustrations but then animated all of the other elements in a more traditional, stop motion way: using DSLR and Dragonframe and teeny-tiny movements. I fussed-with each frame in Photoshop and then edited them all to music in Premiere.

You shared a picture using natural lighting; how do you work with light sources to keep things consistent?

On a clear day, in my apartment, the lighting is pretty consistent between the hours of 11 am and 3 pm. So, I shoot during those hours. In theory, it makes more sense to use artificial, controllable light for stop-motion. However, I haven’t yet found a way to replicate sunlight’s effect on colors.

geodesic.gif

How do you decide which parts to do digitally, and which to do manually?

Computers tend to be good at the things that the physical world is bad at. It makes sense to automate many processes digitally because computers act faster — and with more accuracy — than hands, including sequencing frames, batch-reordering, photoshop actions (i.e., for color correction). However, for aesthetics, movement, and texture, “organic” feel a lot more comfortable than simulations do.

The increments of motion in manual stop-motion animation are just about as accurate as a human being can get which feels right to human eyes. Anything too perfect, too without flaw or character, floats over into uncanny valley territory quickly.

googlemaps.gif

Read more about how Kelli uses Dropmark to get stuff done. You can see more of Kelli’s work on her website, including more paper-y goodness like This Book Is A Camera, and follow her on Instagram & Twitter.

Get a free pair of Dropmark socks

We love you. You love Dropmark. Help spread the word, and get a free pair of Dropmark socks!

Today is National Customer Appreciation Day — everyone’s favorite (totally real) holiday. We wanted to show you how excited we get whenever you share Dropmark with friends, family, and strangers on the internet.

All you have to do is share Dropmark with five people, and we’ll send you a pair of socks for free! The socks are cute as heck, 100% cotton, made in the USA, and available to ship worldwide.

These socks were specially made for the launch of Dropmark’s new look, and we only have a limited quantity — so don’t drag your feet.

Gif of Dropmark socks dancing
Exciting things are afoot

Get off on the right foot and by sharing your referral link today. You can share your referral link across the internet, on a postcard, or whisper into the wind. We’re not sure how successful the last one will be, but do whatever you think is best.

Your unique referral link can be the found in the sidebar of your Account page. It’ll look like this: http://dropmark.com/?ref=username

Once five of your friends have signed up for Dropmark we will send you a free pair of Dropmark socks. All you have to do is share your referral link and put your feet up.

We will email you to let you know when you’ve hit the magic number and ask you for your mailing address. This offer is open worldwide, so you can share Dropmark with anyone no matter where they live.

Our referral program also allows you to get additional storage for free if anyone you refer decides to upgrade to one of our paid Solo plans.

Free users: Earn 5GB free storage space for each Solo account you refer.

Solo users: 10GB free storage space for each Solo account you refer.

Your friend will also receive the same amount of additional storage for free — so everybody wins!

Gif of Dropmark socks dancing
Put your best foot forward

For more information on our referral program please see our support site.

New look, same great Dropmark

Today we are launching a brand new look for Dropmark. Still the same great app you use across web, Mac, and iOS, but with a more human focus.

Dropmark allows you to collect, organize, and discuss anything online. To us, this means any skill, any interest, any individual, and any team can use Dropmark. We wanted to make that clear in our redesign.

Whether you’re gathering inspiration, sharing designs with clients, or collaborating with your team; Dropmark is a tool that will help you get stuff done. But crucially, the hard work is done by our users, Dropmark is just the platform. We wanted to put our users in the picture.

Illustration of three people fixing up the Dropmark logo

Dropmark has a diverse user base — from Norwegian graphic designers to global book editors. Our goal was to represent our users while communicating a clear design direction. People upload their whole workflow to Dropmark. Everything from napkin sketches to After Effects renders — and of course GIFs. Making it clear that Dropmark is a place for all these different elements was an exciting challenge.

We began by thinking about the range of content uploaded to Dropmark as building blocks. Seeing images, maps, videos, and links all in one place on the screen; in contrast to bookmarks and scraps of paper in the physical world. These elements evolved to create an illustrated three-dimensional paper folded universe. A place where people are inspired to build, collaborate, and grow.

Collaboration and privacy are at the very core of Dropmark’s mission, so the new imagery shows users interacting with Dropmark alone and with their team. Our new site also highlights more of the real teams using Dropmark at companies across the globe.

Meg Lewis' paper exploration of Dropmark's interface
Photo: Meg Lewis

You’ll also notice a change in our typeface. As Dropmark continues to grow internationally, we want to support more languages. In the development of our iOS app, we found our old font had issues rendering non-Latin characters. So, we set out to find a font that would be able to handle localization while retaining our high typographic standards.

After an exhaustive search, we found that FF Real by Erik Spiekermann was the font of our dreams. Not only a great solution in-app, it felt right to incorporate the font into our logo during the redesign. The heavier weight helped ground the logo and allowed for more visual variation. We also chose to capitalize the ‘D’ in the logo. This was important for us because we wanted to elevate our brand a little bit and shrug off the awkward teenage headgear.

Finally, we’ve tweaked the names of our pricing plans to better differentiate our offerings. Solo (previously Pro) is perfect for freelancers or anyone looking to improve their flow and work with individuals. Teams are designed with groups in mind and give you access to all the collaboration tools you could need. Enterprise is ideal for companies and can be reconfigured to perfectly fit any organization.

Visual organization is in our DNA. When approaching our redesign, it was essential for us to keep the essence of Dropmark. It’s important to us that no matter what you do, you can see that Dropmark is a place for you.


Shout-out to the whole team at Oak Studios for their hard work, and to our friends and collaborators: Kelli Anderson, Meg Lewis, Hayelin Choi, and Frank Chimero.

Closing the feedback loop

Dropmark is designed to gather clients, coworkers, and co-conspirators in one place so you can get the feedback you need to make magic.

You can like items or collaborate on collections for a lighter touch, or delve into the details using comments, annotations, and our Slack integration.

Get a consensus

Click the heart icon to show your collaborators that you like something. Liking items on Dropmark is surprisingly powerful because you can sort your collections by the number of likes each item has. This can be invaluable when viewing a large number of images - like a contact sheet from a photoshoot. Sort by most popular to gain a consensus without having to get involved with polls or email ping-pong.

gif showing how to like items on Dropmark

Collaborate better

Collecting all your inspiration in one place is a super way to kick off a project. Dropmark helps you to generate beautiful mood boards where videos, images, and links can all live harmoniously in one place.

Adding collaborators to your collection allows everyone to add their inspiration too. By encouraging collaborators to upload their vision, you can get to the heart of the project and make sure everyone is on the same page.

Dig into the details

Stop giving feedback like ‘You’re the best’ and ‘OMG I love this’. While these reactions are lovely to receive, they’re not constructive for your personal growth or your wider team. Giving specific feedback allows others to understand what you love in particular - is it the color palette, the word choice, or the font? Being clear about your thoughts makes you more aware of your own response, as well as giving clarity to your teammates.

Being precise is excellent when giving praise, but it’s priceless when giving criticism. Critique is an essential part of every project but can be perilous if you’re not dedicating enough time to it, and using Dropmark can help that.



Use comments to keep conversations centralized on the item at hand, instead of diverting in other directions. Dropmark’s annotation function allows you to get into the nitty-gritty of what is or isn’t working. Annotations can be added using your cursor to draw, highlight, or point with the arrow tool to target precisely what needs to be improved.

Stay in sync

On our Teams plan, you can integrate collections with Slack channels. Helping you keep in sync with everything that’s being discussed, without having to break your stride in Slack.

Whenever a new comment or item is uploaded, you’ll get a notification in the Slack channel of your choosing. Perfect for managers to use privately, or add to group channels and keep everyone in the loop.

woman on her laptop

Want more highlights on how to use Dropmark to close the feedback loop? Read our blog post on three different ways to use Dropmark with clients.

How Tattly gets things done

In 2011, Tina Roth Eisenberg decided to stop getting annoyed by the ugly temporary tattoos her daughter loved and take matters into her own hands.

Tattly make fake tattoos designed by real artists. Tattly’s artists include lettering genius Jen Mussari, picture book aficionado Oliver Jeffers, doodler Jon Burgerman, and stationary dream Rifle Paper Co.

Image of Tattly sets laid out on a table

You can make custom temporary tattoos with Tattly, perfect for a conference, wedding, or even your son’s 7th birthday. One of our favorite custom creation is this sheet of the Tattly team’s faces to celebrate April Fool’s Day.

We chatted with Elisabeth Morgan, Tattly’s Social Media and Marketing Manager, about inspiration, Tattly’s process, and how they use Dropmark to get things done.

Image of woman with Tattly tattoos of dogs cuddling a real dog

How do you work with real artists to create fake tattoos?

Our founder, Tina and our creative team keep an eye out for new artists all the time on social media and out and about in the world. We license their artwork and make it into high-quality temporary tattoos made in the US, and the artists get a generous cut of every sale. Last year we passed the $1million mark in royalties!

Image of a woman in a hijab, wearing cat Tattlys alongside a woman with her arms and back covered in temporary tattoos

How does design fit into Tattly’s culture?

We believe good design makes people happy. Most of our team comes from a design or artistic background, and design is central to everything we create. We want everything to be delightful.

Image of a child wearing animal themed Tattlys

Tattly’s are sold in over 40 countries(!) – how does Brooklyn inspire your team?

Most obviously, it’s the number of artists and designers living so close that are an inspiration to our team and our collections. On a more subtle level, we’re always inspired by the level of activism and community participation that surrounds us.

We love when people come by our headquarters to pick up Tattly that they’re going to wear for a parade for Pride or the Women’s March. And it’s been an honor to be a part of some very quintessentially New York events: we’ve brought Tattly to everything from Time Out’s Battle of the Burger to Christie’s Old Masters Week.

Image of Tattly's temporary tattoos spilling out of a pencil case

How does Dropmark fit into your workflow?

As a social media manager, I often use Dropmark to save posts that have particularly resonated with our audience. It’s great to be able to see all the popular ones together so we can see if any patterns show up, like color palettes or specific designs.

I also use it to share stats with my team, who are super visual learners. Instead of handing them a spreadsheet of engagement rates, reach, and impressions, I’ll Dropmark the posts that I’m analyzing them and organize them into boards in a particular order to communicate their effectiveness. I like to link back to the original social post, so it’s easy for everyone to click into whatever platform it comes from to get more context into what else we were sharing that week.

Image of two women wearing black line work Tattly tattoos surrounded by flowers

What’s the most interesting thing you’ve Dropmarked lately?

We recently Dropmarked submissions for a collaboration we’re doing with Society6! We asked some of their artists to create custom temporary “Flash Sheets” for us that we’re going to make into Tattly. We had a TON of original submissions flow in that were so fun to sort through. We Dropmarked our final choices to see how they would come together as a collection.

See more about Tattly at tattly.com and follow them on Instagram, Twitter, Pinterest, and Facebook.