Bookmarking made beautiful

The internet is a magical place. When you find a gem, whether that be an article, image, or website and you know you’re going to want to reference it later, it makes sense to save it.

Sometimes the perfect time for that inspiration is in a few short weeks, but sometimes it’s a few years. Inspiration is a funny creature. It worms its way into your brain, and suddenly you need to look at that stained glass series from 2015.

You could trawl your Slack messages, hope it was funny enough to have tweeted about, or if you’re smart you can log onto Dropmark.


Browsers have been able to bookmark webpages for years, and for some people that was enough. All you had to do was click on the heading, scroll down to the site you wanted and boom: you were back on Lolcats. But the internet has moved on, and bookmarking has too.

Dropmark is a visual bookmarking resource. You can scroll through your collections to find what you’re looking for. Forget where you saw what, but remember the important things - like how it made you feel. Saving your inspiration to Dropmark pays off in so many ways; but we’ve broken down the top four for you.

visual-bookmarking-5.jpg

Share your vision

With Dropmark, you can always find the exact article, image, or website you need. Share with a client or co-worker so they can understand what you’re thinking. Get on the same page quickly, and then get going on your project.

Get unstuck

Feeling uninspired? Scroll through a collection of inspiration that you curated to get those creative juices flowing. Having a folder of color palettes, for example, can help you come up with the perfect color scheme for your next project.

Never lose anything

You ensure that your favorite pieces aren’t lost to the sands of time. Should a blog shut down, or a product be discontinued, you can still have a record of it in Dropmark. Make sure you save the imagery or took a full page screenshot using our browser extension to archive. Read more about using Dropmark as an archive.

Search your stuff

Dropmark’s global search helps you narrow down your millions of items with just a few words. Supercharge your search capabilities and find connections between your items using tags.

visual-bookmarking-3.jpg

How do you use Dropmark to supercharge your visual bookmarking? Let us know on Twitter or Instagram.

How Trade Coffee gets things done

Trade is a tailored subscription service that helps you get up in the morning, giving you access to over 400 different coffees from specialty third-wave roasters.

No matter how much you do or don’t know about coffee, Trade will help find the right bean for your brew. Their easy quiz helps you identify what you need; from single origin beans to the perfect sweet and smooth blend for cold brew.

Trade_forDropmark_8.jpg
We chatted with Erika (Director of Coffee) and Linda (Senior Graphic Designer) from Trade about inspiration, their process, and how they use Dropmark to get things done.

Can you tell me a little about Trade Coffee, how did it get started?

Linda: Trade believes that every cup you make should be your best ever — no matter how you take your coffee! Launched in 2018, we unite the nation’s top roasters directly with drinkers, offering 400+ coffees at an incredible value and freshness you won’t find anywhere else. Most people don’t drink freshly roasted, personalized coffee that supports roasters and farmers. Trade was started to introduce everyday coffee drinkers to their best coffees and positively impact the world of specialty coffee. It started with our company seeing these problems and creating something meaningful to address them.

Trade_forDropmark_4.jpg

How does being in New York impact your work & do you have any favorite NY roasters?

Erika: Joe, Irving Farm, and Gimme!

If you had to describe your brand with three flavor notes, what would they be?

Erika: Sweet, Inviting, and Fun

How does design fit into Trade’s culture?

Design is at the center of everything that we do. We believe that great coffee should be for everyone, and we are committed to helping our customers find the right coffees — regardless of their experience level. Through design, we strive to make specialty coffee fun and accessible — turning coffee drinkers into coffee lovers.

Trade_forDropmark_5.jpg

What does your team’s creative process look like?

Linda: We begin all of our work by defining the problems that we are trying to solve. We think about the best experiences that we can bring to our customers and what we are trying to build as a brand and as a business. From there, we create briefs and have content planning meetings to see what projects need new assets to be shot.

If we require new assets, we have brainstorming sessions, which get translated into a shot list. Once the shot list is approved by everyone collaborating, I will purchase props and ingredients to shoot the images with our photographer.

Trade_forDropmark_7.jpg

After that, we have creative reviews to make sure we’ve checked off all the objectives and finesse the design and copy until everyone gives their stamp of approval.

If you could only make coffee one way for the rest of your days, what would it be?

Erika: An automatic drip, haha. It’s so consistent and easy, and you can play around with ratio and grind size if you really want to get experimental, but I love the ease and consistency of an automatic drip.

Trade_forDropmark_9.jpg

How does Dropmark fit into your workflow?

Linda: We use Dropmark to collect ideas and swipe for everything. Not just for day-to-day design projects, but we also have collections that we add to when we find something interesting. It’s like saving them for a rainy day. Some of these collections are categorized for art direction inspiration, email layouts, illustration styles, and content ideas.

What’s great about Dropmark is that anyone can add to them, so we get to share these collections with each other to help communicate our ideas.

Trade_forDropmark_1.jpg

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

Linda: All kinds of cocktail garnishes! We have a Summer Sips series featuring cold brew-based cocktail and mocktail recipes created by baristas around the country and by our Trade Ambassadors. I’ve been Dropmarking swipe of cold drinks and cocktails as a reference on how to style cocktails. Our design team is small, so I am also in charge of art direction and prop and food styling on set and need all the reference I can gather.

Trade_forDropmark_6.jpg

See more about Trade at drinktrade.com and follow them on Instagram, Twitter, and Facebook.

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.