While each project we work on at Cloudberry presents unique challenges, there are certain to-dos which will re-occur more often than not. To efficiently accomplish these known knowns, we rely on a number of apps, plugins, extensions and other time-savers to assist along the way.
Here are some of our favorites we can’t live without. And who knows? You may add a few of these to your toolbox before you’re done reading.
For Wireframing
Wireframing should not be a chore. For all of the components that we find ourselves using time and time again (like dropdowns, radio buttons, and modal windows) we access them from our custom-built Sketch Library. And since each component is a symbol (or a symbol nested within a symbol), the sizing and spacing are pre-determined, allowing for a seamless handoff to our visual design team. Take the time upfront to build and maintain a Sketch Library as it will save you much effort and frustration in the long run.
See it in action:
For Plugging in Real Copy
One amazing feature available on Adobe XD is the Google Sheets plugin. By linking a sheet to text components on an art board, we can then plug in content from that sheet without having to copy and paste ad nauseam. And if the sheet is ever updated, the content in the art board is quickly refreshed as well. Using likely content in our designs helps us communicate a story clearer and forces us to proof our layouts in realistic environments. This plugin makes it easier to skip the lorem ipsum shortcut.
See it in action:
For Uncovering User Behavior
Using a JavaScript snippet embedded on predetermined pages, Lucky Orange shows us how users scroll, click and browse…through video and very visually effective heat maps. All of the potential uncertainties Google Analytics does not tell us are quickly cleared up when we can witness behavior with our own eyes. And with appropriate security in place (such as data scrambling), we are only looking at the high-level user behavior needed to confidently iterate on our designs.
See it in action:
For Accessibility
We run audits on existing sites using a Google Chrome browser extension called AXE. In just a few clicks, it exposes Web Content Accessibility Guidelines (WCAG) violations down to the line of code. Even better, it offers clear guidance on how to fix these issues. Give it a try on your site today to see where you stand.
See it in action:
For Designing
The Sketch plugin Anima helps transform artboards into interactive prototypes. But did you know about the auto-stacking it also provides? When we stack multiple objects together, we can lock the spacing and alignment of these objects. So if the width of an object is edited, it readjusts its position with the rest of the stack. This is invaluable when we are trying to create tables as it keeps everything tidy no matter how much editing we are doing.
See it in action:
For Inspiration
The web is massive. So when we randomly stumble onto a website, image, or other artifacts that we want to save for later, we add it to Raindrop. More than just a bookmark collector, Raindrop allows us to tag and classify our files. That way the next time we want inspiration on, say, “product pricing pages”, we have a bunch available that we collected in the times past.
For Analytics
We all know and love Google Analytics, but have you tried the built-in feature, Analytics Intelligence? Rather than drilling down levels deep into data, you can simply type in a question like “How did user get to my site in February?” and get instant results. This a huge time saver for us. And it works extremely well when clients ask hard to predict questions on phone calls.
For Remote Collaboration
For uncovering stakeholder input, nothing is better than an in-person closed-door work session. But when the next best thing available is a web conference, we use Mural to keep everyone on the same page and engaged. Reproducing the whiteboard experience, Mural helps us quickly jot down talking points on “post-it notes” and then arrange them on an open canvas for all to see. And with ready-made templates available, you can leave the meeting with a solid journey or affinity map already digitized.
For Customizing Email Templates
We have developed a set of specifically tailored-to-the-task components and configured these in our development tool of choice – WebStorm. Just typing a few first letters allows us to insert well-tested chunks of HTML email markup and save time.
For Content Writing
We use Grammarly to double-check grammar quickly. (Even writers get a comma wrong, once and again.) It not only proofs, but it also looks for things like clarity, conciseness, and syntax, so we know where our writing might need a little more polish. (I even just checked this sentence in Grammarly – it’s addictive!)
For Front End Coding
We love the Emmet plugin, which allows us to use smart abbreviations, which expand into longer constructs. For example, typing “w100p” in the CSS editor would expand to “width: 100%”, and typing “MRA” would expand to “margin-right: auto”. Or when coding HTML, typing “ul > li*10” would create a full-fledged UL structure with 10 blank items, ready to be populated.
In summary, we love:
- Analytics Intelligence
- Anima
- AXE
- Google Sheets plugin for Adobe XD
- Grammarly
- Emmet
- Lucky Orange
- Mural
- Raindrop
- Sketch Libraries
- WebStorm