Some great apps to optimize workflows

All apps are free, unless otherwise noted.

 

thumbs up sign – Recommended

 

trophy – Must have

 

Inspiration

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1456000097973_file.png

 

Ember ($30)

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1456000021791_file.png

 

Dragdis (Web app) (Free with paid options)
Collect Images, links, videos and texts you find online easy and quick with drag & drop.

 

Pixa ($25)
Organizing your images, the easy way. Collect, design, deliver: effortlessly improve your workflow with Pixa.

 

Inboard ($20)

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1456114532842_file.png
You like Pinterest and Dribbble, but prefer a desktop-based digital scrapbook to view image files where your performance is not limited by your web browser and you don’t get distracted by millions of tabs. View your images in an awesome grid that you can take full screen.

 

Pixave ($10)

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1456114714902_file.png

 

Pixave provides the optimum environment to manage your images. With the user-definable ‘Collection’ feature you manage your images, using folders to categorize and suit your needs. In addition, you can organize numerous images using the highly intelligent ‘Smart Collection’ feature and search for them instantly.

 

Prototyping

 

Change the way you design with the most powerful prototyping platform on the planet. Pixate generates 100% native prototypes, so you can experience your ideas on device as if they’re completely real.

 

Principle ($100) mobile phone
Principle makes it easy to create animated and interactive user interface designs. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing.

 

Briefs ($200) mobile phone

 

thumbs up sign Marvel (Free with paid options) mobile phone personal computer
Turn sketches, mockups and designs into web, iPhone, iOS, Android and Apple Watch app prototypes.

 

grinning face Silver (Currently in beta, invite only) mobile phone personal computer
Silver is the first prototyping tool built exclusively for Sketch. It is perfect for making quick, flow-based prototypes, but it also plays nice with Framer.js to help you add micro-interactions to your flows.

Version Control

(Asset Management)

Pixelapse (Subscription)
Visual version control and collaboration workflow for open source and private design projects. Built for individuals, trusted by agencies.

 

thumbs up signFolio ($50)
Simple version control app for designers. It lets you quickly browse and restore previous versions of your design documents.

 

Use Kaleidoscope to spot the differences in text, images, and folders. Review and merge the changes in seconds with the world’s most advanced file comparison application.

 

Sketch Plugins

 

Quickly create dummy data such as avatars, names, and geo location.

 

Import rich data and duplicate design assets faster than ever before.

 

Import rich data and duplicate design assets faster than ever before.

 

A Sketch plugin that lets you save and load colors into the color picker.

 

Chrome Extensions

 

Re-size your browser’s window to emulate various resolutions.

 

Screen capture your current page in it’s entirety, reliably.

 

Simple extension to view image image width, height and file size from your browser’s context menu.

 

View image in current tab.

 

Whenever you find yourself with too many tabs, click the OneTab icon to convert all of your tabs into a list. When you need to access the tabs again, you can either restore them individually or all at once.

 

LivePage is a developer tool which reloads website resources (such as CSS, HTML and JavaScript) as they change on the server, so you are always looking at the most up-to-date version of a web page. It can make developing websites a lot faster, by helping productivity.

 

User styles are themes for web sites. User styles empower your browsing experience by letting you customize web sites. Take out irrelevant content, change colors, or completely redesign the entire site.

 

Project Naptha (Advanced OCR-ing tool)
Project Naptha automatically applies state-of-the-art computer vision algorithms on every image you see while browsing the web. The result is a seamless and intuitive experience, where you can highlight as well as copy and paste and even edit and translate the text formerly trapped within an image. Live demo

 

Design Software

 

trophysparklesSketch 3 ($99)
Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design.

 

Project Comet (Adobe XD Price Unknown)
Design and prototype websites and mobile apps faster than ever with Project Comet,
the first all-in-one solution for UX designers. Coming in early 2016 from Adobe.

 

Affinity – the fastest, smoothest, most precise professional creative software, exclusively for Mac.

 

Mischief ($25)
Mischief is an easy-to-use, intuitive freehand drawing app ideal for sketching, brainstorming and ideation.

 

Icons

 

Icon2Image (Price)
Image2icon is the easiest way to create your own mac icons and customize your folders and files.

 

Photography

 

BatchImageCropper lets you easily crop multiple images at one time.

 

Social

 

Slack brings all your communication together in one place. It’s real-time messaging, archiving and search for modern teams.

 

Music

 

Stop chasing music across the web – to services you don’t use, or sources you don’t have access to. Given the name or link to a song, album or playlist, Tomahawk will find the best available source for you and just play it.

 

Soundnode App is an Open-Source project to support Soundcloud for desktop Mac, Windows, and Linux. It’s built with NW.js, Node.js, Angular.js, and it uses the Soundcloud API.

 

iTunes-like SoundCloud client for OSX.

 

Gear ($6)

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1456114934411_file.png

 

The Google Music and YouTube player for Mac and iPhone

 

Yate ($20)
Yate was developed for people who want complete control over their tagging experience.  The application was designed from the ground up for Mac users. It is a 100% Cocoa written application and uses its own tagging library. Yate will tag aiff, dff, dsf, flac, m4a, mp3, mp4 and wav audio files. Yate also supports m4v and mp4 video files.

 

Mail

 

Unibox ($16)
Unibox is an email client that groups your messages by person. This way your emails are organized automatically and you always find what you are looking for.

 

 

Notes

 

Quip is the modern productivity suite that helps your team get work done faster.

 

Paragraphs is built for one thing and one thing only: writing. It gives you everything you need to create brilliant prose and does away with the rest.

 

Byword (Mac – $12 / iOS – $5.99)
Byword is designed to make writing more enjoyable with Markdown. All the tools you need to write effectively, with keyboard shortcuts, word counters with live update, and more.

 

News

 

With Feedly, you can easily organize all your publications, blogs, YouTube channels in one place and consume and share more efficiently. No more zig zagging. All the content comes to you in one place, in a clean and easy to read format.

 

Reeder 3 ($10)
A news reader for Feedbin, Feedly, Feed Wrangler, FeedHQ, NewsBlur, The Old Reader, Inoreader, Minimal Reader, BazQux Reader, Fever, Readability and Instapaper.

 

Bookmarks

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1455993553614_file.png

 

thumbs up sign Raindrop.io (Free with paid options)
Stop chasing music across the web – to services you don’t use, or sources you don’t have access to. Given the name or link to a song, album or playlist, Tomahawk will find the best available source for you and just play it.

 

Git

 

Tower ($70)
Version control with Git – made easy. In a beautiful, efficient, and powerful app.

 

A free Git & Mercurial client for Windows or Mac.

 

FTP

 

Libre FTP, SFTP, WebDAV, S3, Azure & OpenStack Swift browser for Mac and Windows.

 

A simple app.

 

Text Editors

 

Coda 2 ($100)
You code for the web. You demand a fast, clean, and powerful text editor. Pixel-perfect preview. A built-in way to open and manage your local and remote files. And maybe a dash of SSH.

 

TextWrangler is a powerful and richly featured tool for composing, modifying, and transforming text stored in plain-text files.

 

Sublime Text (Evaluate for free / purchase for $70)
Sublime Text is a sophisticated text editor for code, markup and prose. You’ll love the slick user interface, extraordinary features and amazing performance.

 

Web Design

 

SiteSucker is a Macintosh application that automatically downloads websites from the Internet. It does this by asynchronously copying the site’s webpages, images, PDFs, style sheets, and other files to your local hard drive, duplicating the site’s directory structure. Just enter a URL (Uniform Resource Locator), press return, and SiteSucker can download an entire website.

 

Turn any mockup into a floating guide, and visually align pixels with ease.

 

Automation

 

Keyboard Maestro is the leading software for Mac OS X automation. It will increase business productivity by using macros (or shortcuts) with simple keystrokes.

 

trophy Hazel ($30)
Hazel watches whatever folders you tell it to, automatically organizing your files according to the rules you create.

 

Fake ($30)
Fake is a new browser for Mac OS X that makes web automation simple. Fake allows you to drag discrete browser Actions into a graphical Workflow that can be run again and again without human interaction. The Fake Workflows you create can be saved, reopened, and shared.

 

Screen Capture

 

DreamShot becomes the brains of your screenshot workflow, presenting the most relevant options for dealing with an image. You select a destination, DreamShot sends it, then gets out of the way, with nothing left on your desktop. Try it once, and you’ll never go back.

 

Voila ($15)
Screen recording or image capture, full screen or selective area – capture them all. With an intuitive interface and a powerful toolset, you get to effortlessly annotate images, export videos, organize files or simply share the way you want.

 

Screen Sharing

 

Reflector is a wireless mirroring and streaming receiver that works great with Google Cast, AirPlay and AirParrot 2. Mirror your content to the big screen without wires or complicated setups. Play games, watch movies, demo applications or present from the palm of your hand. Even send your screens directly to YouTube for others to watch live. Everything you do on your device can be wirelessly sent to Reflector!

 

AirParrot allows you to wirelessly beam your screen or media files to a variety of media receivers. AirParrot quickly discovers available receivers on your network, and uses Quick Connect to connect directly to a device running Reflector 2. Easily share your screen, videos, audio, presentations and so much more.

 

Tools & Utilities

 

trophyAlfred 2 ($30)
Alfred is an award-winning app for Mac OS X which boosts your efficiency with hotkeys and keywords. Search your Mac and the web effortlessly.

 

trophy Bartender 2 ($30)
Bartender 2 lets you organize your menu bar apps, by hiding them, rearranging them, or moving them to the Bartender Bar.

 

thumbs up sign CleanMyMac 3 ($40)
Clean, optimize, and maintain your Mac with the all-new CleanMyMac 3. It scans every inch of your system, removes gigabytes of junk in just two clicks, and monitors the health of your Mac.

 

MagicPrefs (Customize magic mouse preferences)
MagicPrefs Magic Mouse, Magic Trackpad advanced preferences, custom clicks, gestures configuration, expose, dashboard, middle click.

 

BetterTouchTool (Customize magic mouse preferences) (Pay what you want)
BetterTouchTool is a great, feature packed app that allows you to configure many gestures for your Magic Mouse (1 & 2), Macbook Trackpad and Magic Trackpad (1 & 2) and also Mouse Gestures for normal mice.

 

A Better Finder Rename’s huge array of renaming options are organized into 15 intuitive categories that cover all the text, character, position, conversion and truncation features that you would expect from a great file renamer.

 

Type more with less effort! TextExpander saves your fingers and your keyboard, expanding custom keyboard shortcuts into frequently-used text and pictures.

 

thumbs up sign Unclutter ($6)
A new handy place on your desktop for storing notes, files and pasteboard clips.

 

Take control of hidden files on Mac OSX.

 

thumbs up sign Hyperdock ($10)
HyperDock adds long awaited features to your Dock: Select individual application windows just by moving the mouse on a dock item, use mouse clicks to quickly open new windows and many more.

 

Can’t remember a shortcut? Just hold the ⌘ key to get a list of all active shortcuts for the current application.

 

Attach a menu bar to the active app window.

 

thumbs up sign Divvy ($14)
Managing windows can be frustrating, requiring precision control of your mouse or trackpad for clicking, dragging, pushing and pulling your windows to the size and position you desire. Even with all this work, it’s very difficult to get windows exactly where you want them, so most of the time windows are left scattered all over the screen. The solution? Divvy.

 

Magic Launch is a preference pane that lets you customize the experience of opening files on your Mac. Open your files using the original application that created them or create custom rules to decide which application should open a file.

 

A fast, easy, and free BitTorrent client.

 

Thoroughly uninstall unwanted apps. Simply drop an application onto the AppCleaner window. It will find related files and you can delete them by clicking the delete button.

 

File Management

 

Trickster ($10)
Trickster keeps track of recent files you’ve been using on your Mac and gives you super easy and lightning fast access to them.

 

thumbs up sign PathFinder (Finder replacement tool) ($40)
Take full control over your file system! Save your time and work how you want! Say goodbye to the days of weak file management. With Path Finder 7, it’s your files, your way.

 

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1456112094552_file.png

 

Default Folder X attaches a toolbar to the right side of the Open and Save dialogs in any OS X-native application. The toolbar gives you fast access to various folders and commands. You just click on the buttons to go to your favorite and recently used folders, manage the folders and files shown in the list, and make changes to your settings.

 

Productivity

 

Trello (Free with paid options)
Infinitely flexible. Incredibly easy to use. Great mobile apps. It’s free. Trello keeps track of everything, from the big picture to the minute details.

 

Alfred Workflows

 

Play Song is a workflow designed to make playing songs in iTunes extremely quick and convenient.

 

Convert color formats and create code notations of colors from the OS X color panel.

 

This simple workflow lets you search emoji codes and their symbols.

 

You can incremental search for Font Awesome icons and paste them into the front most app.

 

Mobile

 

Lanes ($2)
Lanes is a simple way to organize your workflow. An all-in-one task tracker, kanban board, to-do list and swimlane app.

 

Sketch Mirror lets you preview your Sketch designs on your iOS devices.

 

Alfred Remote is your personal command centre for Alfred 2 for Mac. Your iPhone or iPad now becomes a perfect day-long companion to your Mac; Whether at work or play, be more productive than ever!

 

Clear (Mac – $10 / iOS – $5)
Untangle your life with Clear – the to-do and reminders app used by more than 2.5 million people that ensures you stay focused on what matters.

 

Create simple connections between apps like Facebook, Dropbox, Instagram, Twitter, and Gmail, as well as devices like your iPhone, Nest Thermostat, Fitbit, and Philips Hue.

Interactive Advertising Resources

Designers and creative technologists should take note of a few great resources I’ve learned about in the past few years.

The most important is the Interactive Advertising Bureau (IAB). The IAB provides advertising professionals a way of determining what technologies to use for deliverables like banner ads, micro-sites and other marketing techniques.

Then there’s the World Wide Web Consortium (W3C). The W3C standardizes technology and helps to align different platforms by creating and approving drafts to be adopted as the point of record.

Along with the W3C and IAB there’s the Web Hypertext Application Technology Working Group (WHATWG). The IAB, W3C and the WHATWG often collaborate, determining the delta of front-end technology like HTML, CSS, JavaScript and other components like Adobe Flash. In short, they help to make tools available for us to be creative. There are many other groups, but I tend to gravitate toward these three for currents the most.

While working through problems I often use these indispensable knowledge bases:

Here are some tools for Open Source Software Development (OSS) to get you started:

Here are some good Responsive Web Design (RWD), data-binding, and other goodies:

Two CSS compilers:

Here are some compact JavaScript frameworks:

Like Compilers and strong typing? Try one of these JavaScript alts:

Here are some Content Management System (CMS) choices for MySQL and PHPMyAdmin/PHP, templating nerds:

Here are some good test guys:

A couple good code sharing services for debugging:

Debugging scary things:

Fiddler

There are a lot of choices out there, for instance… I’ve been working a lot with MVC .Net to use and deploy all the above (with the exception of the CMS choices), so remember to explore and have fun!

grinning face 

Prototyping Fresh Paint for Windows Phone

painting-close-up

In the World of prototyping there are many possible outcomes. Sometimes the prototype becomes an application, other times it becomes nothing. The prototype I’ve chosen to discuss is no exception. Sure it’s an application made for Microsoft, but they have changed much as a company in the past four years. I’ve found that the agile development process has been making the rounds on Microsoft’s Redmond Campus like never before, leaving everything up in the air. Not that it has ever been a walk in the park as a designer here at Microsoft, but the ship cycle used to be 3 years and now it’s every week.

The feelings of desperation, anxiety and uncertainty make for an exciting workplace indeed. Not to mention the people for whom I created this prototype are part of Microsoft’s research organization known as the start-up business group. The point being that I had a mere 48 hours to make the prototype and provide the development team – two guys – with the assets and the code necessary to move forward into production. Somewhere around the 14th hour I handed-off a rough prototype to be served as a demonstration to the stakeholders who would make or break the application as far as funding was concerned. Luckily for me as I was coding another designer was kind enough to generate the assets needed for the controls – from the composites. Kind of backwards, eh?

My experience building the Fresh Paint application prototypes reveal the difference between ideal app design process versus actual app design process. Let’s break the two down a bit, shall we?

An Ideal App Design Process

The business, design and technology triad come up with an idea for an app and a strategy

Sketch the UI’s golden path – what are the goals and personality? – and discuss it with the team

Create an app-flow diagram and discuss it with the team

Create wire frames of the UI, smoothing out the UX with functional specifications – functional “specs” cover what the different controls do, their behaviors, events actions and such and discuss these with the team

Create a few personas representing the apps intended users using models from Getty Images and give them names based on character from HBO’s “Game of Thrones” so colleagues chuckle and love you for it then seek compromise with the team

Design a few versions using sexy software like Sketch, Marvel, Pixate, Illustrator, Photoshop, 3D Studio Max and Cinema 4D and discuss them with the team

Put together a deck for presentation to the broader team, usually known as a stop-motion or “paper” prototype to solicit ideas and buy-in

Create motion comps using Adobe After Effects that demonstrate the physics of the UI and give context to the app flow diagram, sometimes using the personas as contacts within the app and discuss animation with the team

Start using the integrated development environment (IDE) of choice like Visual Studio, Eclipse, Source Insight or xCode, using a well-documented and intuitive software development kit (SDK) to generate the code and UI with regards to front-end development resulting in a draft of the prototyped application representing the culmination of efforts of the UX design team by yourself

Iterate and refine based upon feedback from the team

Present a bug-free prototype to the business decision makers within the company

Give high-fives all around when the app is approved for production

deliver the prototype, assets, functional specs and its source code to engineering

Listen to engineers throw chairs at each other whilst shopping for new fonts created by House Industries

FreshPaint_Mobile_App-01-472x266

Actual App Design Process (the order here doesn’t necessarily apply)

Come up with an idea for an app and a persona representing a fictional user, find a cheap stock photo or use family members to represent the user avatar.

Hastily draw the UI’s golden path on a white board and leave it up to serve as the app-flow diagram and wireframe adding as dead-ends occur and discuss it with the team as you code with the available IDE, using an under-documented and under-intuitive software development kit (SDK) as the design composites that will also serve as asset slicer conduits are created by you or a fellow designer

Put together a deck for presentation to the broader team, usually known as a stop-motion or “paper” prototype to solicit ideas and buy-in, use this as a functional spec for the prototype and make changes every day to adhere to good ideas that come from the team meetings

Add assets to the prototype as they become available, but use for placement only (FPO) assets in the meantime

Participate in way too many discussions with engineers and assure business decisions makers that the FPO assets aren’t the ones that will ship as they occasionally help and look over your shoulder

provide a prototype to be presented to the team and make changes based upon everyone’s feedback a couple of times

Give high-fives all around when the app is approved for production

deliver the prototype, assets and its source code to engineering and help integrate the markup

Listen to engineers disagree with each other whilst starting the next prototype with your team

I guess you could call the above comparison a good summary of what it takes to create an app from a design perspective nowadays. The prototype ended up serving as collateral to the PowerPoint presentation as it was more hands-on and could be toyed with as the presenter spoke to the stakeholders. Once we had the green light to move the prototype to engineering it served as a head start for the front-end UI as I coded it to be scalable for the devs – it was far from perfect, but at least they didn’t need to worry as much.

My part of the process involved not only creating the prototype, but all facets of the design process. It was a true team effort, with my main focus being the prototype. There were four designers involved and we worked together to bring Fresh Paint to Windows Phone. That was a busy week and one of the greatest experiences of mine at Microsoft!