Templates for Salesforce UI Design

When I’m working on what a given user interface might look like in Salesforce.com, I do my best to clearly represent my intent while avoiding too much detail or fidelity at an early stage. The trick is keeping the sketches both clean (since messiness gets in the way of understanding) and low fidelity (since things could change significantly).

A typical sketch I’d make early in the design process

I think of sketches like these as “conversation starters” between myself and the decision makers on the client/executive team. They’re meant to represent the general direction the design is heading and get feedback (or extra levels of detail).

Keep It Clean

The Internet is full of design advice telling you to crank out a ton of different ideas quickly on paper, since there’s always more than one way to skin a cat. There’s definitely true, but the thing no one tells you is you probably don’t want to show those pages to your clients or executive stakeholders. (Whoopsie!) I’ve found most folks won’t be able to see what you’re getting at from a few squiggles on your page. You’ll probably also need to send it to someone electronically after the meeting, so you’ll be going digital before long.

For me, this is where the iPad comes in. Using a combination of Paper (my favorite sketching app) and the Apple Pencil, I’m able to crank out a digital rendering of my idea in an entirely reasonable amount of time. Sometimes I start with the concept worked out on a random scrap of paper and I’m just translating it to a digital format, and other times I can go straight to the iPad.

Templates Speed Things Up

Templates can be a real time-saver when it comes to the digital realm, and I’ve shared a few on my Public Stream via Paper. Maybe they’ll help you too.

The skeleton of a page in the Salesforce Lightning Experience
A blank Empathy Map