Start With Words
I start most of my interface designs in plain text. (TextEdit on the Mac, if you’re curious.) Why? Because it forces me to focus on the words. Words are like stock in a delicious stew. If you don’t have good stock, the whole meal feels off.
Plain-text-the-design-tool is surprisingly robust. Let me give you an example.
Say I’m designing a rather standard looking confirmation modal with two options for the user. To start, I’ll open TextEdit and start writing:
Are you sure you want to cancel?
----------
Your account will remain active until 2/1/2018.
- If you resubscribe by 3/10/2018 you will retain your data.
- If you resubscribe after 3/10/2018 you'll have create a new account.
- You may download your data until 3/10/2018.
[ No ] [ Yes ]
You can almost see the modal, can’t you? You can tell that “Are you sure you want to cancel?” is some sort of header. You also know that [ No ] and [ Yes ] are buttons. If you’re feeling fancy, you can even bump up the border radius:
( No ) ( Yes )
Joking.
Now here’s where the real magic happens — the editing. Before opening a design tool or a new HTML document, continue to iterate on the language. Sometimes it helps to pretend like I have to actually speak these words to someone who’s sitting right in front of me. How would I write this for another human to read?
Are you sure you want to cancel?
Your account will remain active until 2/1/2018.
Come back anytime before 3/15/2018 to reactivate your account or request a copy of your data. After 3/15, your account and data will be permanently deleted.
[ Nevermind ] [ Cancel my account ]
Better. Fewer bullets, more readable.
Constraints help create better designs. plain text forces me to focus on the smallest (yet arguably most important) part of any design: the words. Because there’s no functional UI yet, my copy can’t hide behind appealing aesthetic, and I’m less prone to overwriting.
TextEdit is what I use, but pen and paper, or even Google Docs work equally as well. Whatever you use, start with words, and then build your design from there.