Wordsmith

I made a pared-down word processor focused on tools writers need instead of superficial formatting.

Summary of My Role

This is what you’d call a “personal project,” which is to say I did everything myself, from conceptualization to code-signing. Version 1.0 shipped on OS X Mountain Lion, was one of the first Mac Apps to support iCloud, and received a special promotional callout on the Mac App Store.

Design and Creative

  • Anvil Icon and Wordsmith Branding
  • Lots of custom UI elements, visual and interaction design
  • Copywriting and illustrations for online user manual
  • Scripting and Production of Introduction videos

Development and Implementation

  • Document-based OS X application with iCloud
  • GCD-based multithreading, extensive string manipulation and parsing
  • Many custom user interface components, precision typography, User Guide

Six Elements of a Better Word Processor

Here’s a quick run-down on what made the app itself. 

LINGUISTIC ANALYZER

This “analyzer” was really a collection of features that worked to identify and make accessible an index of proper names and places in your document. It was also the source of the data presented by the readability ribbon.

I made the video below to promote the crazy thing.

RELATIVE READABILITY

A ribbon next to the text of the document that provided and x-ray view of the adjacent text. Darker areas indicate more complex or ambiguous prose. Again I made a promotional video:

THE INSPECTOR

wordsmith-inspector-annotation

Presented here with a capitalized initial article, The Inspector sounds like a schlocky sleuth, but to the user it was the foundation of Wordsmith’s design approach. A contextually-aware inspector that was there when you needed it and disappeared when you didn’t. Annotate, Markup, Linking, Flagging and Highlighting all available with animated transitions.

INSTANT REFERENCES

Generate Academic-Style Citations easily as scanning a barcode. Wordsmith looked up the user’s reference on the internet and filled in all the boring fields automatically.

Integrated Themes

Wordsmith included a few simple controls to manifest a great variety of themes. Users who wanted to create an entirely custom theme could easily do so with a separate, free, theme designer application.

wordsmith-theme-unawake.png

Building the App

Wordsmith was written in Objective-C in Xcode on OS X 10.8.

As you might expect, Wordsmith made extensive use of Cocoa Text, the text layout engine used to render text on OS X. This system is famously easy to configure for most common uses, but becomes more difficult to work with in combination with modern platform API like Animation, HiDPI, and Concurrency. Locating and drawing controls around arbitrary text in a performant way was challenging.

Beyond the App

Website, User Guide, and Support Forum: Wordsmith’s promotional website was responsive way back in 2012. It ran WordPress and used bbPress to manage the associated support forums. The user guide was created using a custom post type and a couple of custom taxonomies.

1449801560321

This site has its own page on my portfolio.

Promotional Videos: The videos (Above: Linguistic AnalyzerRelative Readability) were created entirely by me except for the music because I could not carry a tune in a bucket. The animation was made in Apple Keynote using a few slides to control overall pacing with timed transitions applied to the elements of each scene. Keynote exports to 1080p, then I moved it into iMovie to splice in the screen recording and record the narration.

Published by Frankie Winters

I'm a Designer, Maker, and Developer in Portland, Oregon. I have two little girls and keep a meticulously organized garage.

Top