Blog

#tech

#apple

Love cool manufacturing videos like this one. Apple knows their audience.

Designing a Hand-Crafted App in 2018

Early this year I started playing with an app idea that became Selah Chords. I had a working prototype of the engine that would power it. I knew it could work. But what would differentiate it would be care for UI. Make it easy to do the things that needed to be easy. Instead of focusing on all the other tools that could be added— literally, the competition nearly includes the kitchen sink in their apps— I would focus on doing one thing really well.

A recently (at the time) published article from Michael Flarup had me encouraged to explore skeuomorphic design again, something I had been itching to do for years. To be honest, app design today is too bland. Most of us know that. It used to be full of texture and UI work, parts of the process that would take months. Each app had personality. Then iOS 7 happened. And all that work got thrown aside. Read that article.

I explored a number of paper, notebook, and other interface metaphors for Selah, trying to find a voice that could work. And in the end, I could not find a voice there. And the reason was because I wanted to rely on the screen, not the physical world’s physics.

I had one major interaction that needed to be nailed, in my opinion. Finding a chord. Seems easy, I know. But everyone makes the easy hard, for some reason.

Guitar Gravitas

This is a great app. I honestly use it quite a bit, as it supports chords that Selah Chords does not support. But finding a chord in Guitar Gravitas sucks. First, the root note selector is a slider. Second, the selected state is a dotted, 1px tall underline. This thing is horrible.

Then there is the scroll direction change in finding a chord. This app uses multiple panels that all scroll independently. This is not an iOS convention and instantly feels off. Mind you, on iPad, this is better because of the screen size.

The biggest reason that I use this app regularly, as opposed to others, is because of the chord charts. It shows me tons of voicings without the trouble that other apps make of that.

Guitar Tuna

One of the most popular guitar apps, as it is a tuner— a pretty good one— that also provides other tools. Personally, if you want a good tuner, get Fine Tuner, but that is a different topic. The chord library tool is what we are focusing on here. Once again, sliding lists for root and chord, but made worse by the scroll for voicing. Guitar Tuna only provides a handful of voicings— standard movable shapes, essentially. But to see them, you have to flick one-by-one through them.

I do not use this app much. Mostly because the interface is less than ideal.

Guitar Master

Another popular guitar app. Tuner? Check. Metronome? Check. Scales? Yup. And chords. That root note selector is better. All on one screen. No scrolling. But now to select a chord, you have to find it in a scrolling collection view— rows and columns— and expand it.

Wait, don’t tap— damn. It just played the chord. You wanted to see more voicings, didn’t you. Yeah, tap that small expand icon. And now, when the collection would have made since, you get this scrolling list of voicings and a guitar neck that takes up two-thirds of the screen.

Finding my Voice

As I looked to solve this one interaction, Jared Sinclair shipped ’Sodes. And boy. While not skeuomorphic, while super minimalist, it wasn’t boring. It wasn’t bland. Subtle gradients, sparse, well-thought our content layout design. The content was king, not the interface. But even without the interface being king, it didn’t get so far outta the way that you were confused. Buttons had borders. They looked like buttons.

So instead of making beautiful, meticulous textures, I started storyboarding animations. The first test of what I deemed gooey animation was built.

Instead of sharps getting their note name repeated, the sharp extended the preceding note button. The construction under the hood is fun, taking accessibility into consideration with an accessibilityLabel of the full name (“C#”).

And then the sliding selection. Clear selection state was important. At this point I was using Guitar Gravitas and that was my biggest grievance. Animating this allows for a fun, hand-crafted interaction, while not getting in your way. This is done by making the animation quick and informative.

The chord selector is brief. I didn’t need to support a hundred chords. Why? Because the most common chords can be summed down to a handful. I’m not looking to build the only chord finder you use, just your favorite.

Is Skeuomorphic Dead, Then?

I hope not. What I know is that it wasn’t right for Selah Chords. Which surprised me at first. I wanted it to be right. It might be for your app.

What’s Next?

Banjo support is coming. Selah Chords started with guitar, ukulele, mandolin, and dulcimer. I am adding banjo. Also copying or dragging voicings out of Selah Chords is coming. And favorite voicings. And who knows what else.

Get Selah Chords today. It’s free and will become an essential part of your musical toolkit.

Selah Chords, a beautiful new chord finder for iOS

Over the last year I have been learning both ukulele and mandolin, after 20 years of playing guitar. As I tweeted over the weekend, I bought a ukulele and looked for a chord app. I had a couple for guitar, but none of them supported ukulele. I found out pretty quickly that most of the apps suffered from similar issues. They were hard to use— bad UX/UI—, lacked iOS esthetic, and didn’t have the features I needed most where they needed to be.

Now so much of that is subjective. Yes. True. When I am looking for a chord voicing, I am looking for where I can play it. The most popular apps show a single voicing at a time.

Take this app from The Ukulele Teacher. Are there other voicings? I will guess that the 1/32 up top indicates that there are. But how do I get to them. Swipe right to left? Nope. Maybe that next arrow in the bottom right? Crap! Now it’s playing an audio clip of the voicing. Swipe up? There it is! But no scroll indicators, just a change of the fretted notes and the “1/32” changed to “2/32”.

Now I want to switch to a D minor. How do I do it? Tap the C major “title” up top? No. The music note at the bottom?

Not the easiest thing to use. And to be hidden away behind an ambiguous button when it is an action I am going to use the most? Not good.

Pulling Back

I have been playing guitar for 20 years and never learned basic music theory. I didn’t know how chords were formed, just where they were. Sure, I knew that they were multiple notes being played, but I never cared or concerned myself with which notes aside from my root was being played.

So I started there. How is a C major chord formed? Well, it’s based on the C major scale. I didn’t know my scales. Or how they were formed. Guess I would start there.

A scale starts with the root note and then takes a certain number of whole and half steps between notes back around. A major scale, for instance goes 1, 1, 0.5, 1, 1, 1, 0.5. That C major scale? C, D, E, F, G, A, B, C.

So back to that C major chord. How is that chord formed? A chord is formed on intervals of a scale. The major chord is using the I, III, and V intervals of major scale. Roman numerals for some reason. There is likely a wiki page for that explanation, if you are interested. So we start at I, which is our C, go to III, our E, and end on V, our G.

To the programmer reading this, you might have noticed that this is math. I certainly did. And math I can do. I love math.

So I Built an App

Looking through the App Store for an app that scratched my itch made me sad. As a UX/UI engineer, I decided that if this was just math, I could design a better looking/working app and build a chord finder that didn’t suck. But first I needed an engine. Take that math and turn it into an algorithm. An algorithm that I could hand a set of strings and tell it to find the C major voicings— different ways to play it across the neck of my ukulele.

This was, surprisingly, done on an iPad. I opened Swift Playgrounds and built the first prototype of the algo there. Even had it doing basic drawing of the chord chart.

The algo was straight-forward. Use the above math to find the notes of the requested chord, find all the notes on the set of strings given, then find all possible combinations of those notes on those strings. From there start narrowing it down to actual, playable chords.

It worked, so I started the design process.

Defining the App

What’s in and what’s out. So I had a powerful algorithm. I could give it 4 strings, and it’d find the voicings of a specific chord. I could give it 5 strings. Six strings. Seven. Ooo. I decided I wanted to support multiple instruments, obviously guitar and ukulele being the top of that list. But as I built the first working prototype app and had it running on my phone, I switched to mandolin strings and went to Guitar Center to play around. See how well it worked and if I could pick up another new instrument. And it was a success. One that went onto me buying a mandolin too.

The app was to stay simple. Prize simplicity, be willing to hold back functionality that other apps may have. No scales, no arpeggios, lots of noes.

So what was required?

A beautiful, clean interface. Easily scroll through a list of chord voicings. Big enough that you could read them comfortably, but small enough that you could see many at once.

A simple mechanic to switching between chords. That above ukulele app made it very difficult to switch chords. Others do as well. I wanted none of that. So my app would have two bars. Segmented controls. Easily switch between root notes and chords.

Multiple instruments/tunings and easy switching between them. This would be in a drop down. I wanted this to be quick to access, but you wouldn’t be switching instruments as often as you switched chords, so a drop down was logical.

Removing Features and Narrowing in on Version One

I wanted banjo support in version one. And the ability to mark a voicing as a favorite. And support for adding custom tunings. But shipping is more important. I shifted from feature building to spit-shine mode in October, realizing that I had a perfectly usable app.

I always remind myself of 37signals’s Rework book. Do I want a half-assed whole product or a kick-ass half product? I can ship a dozen features with bugs and no polish or ship a half-dozen features with delight and polish galore.

So I Spent My Year on an App

Like most programmers that decide to pick up a new hobby, instead of learning and mastering ukulele this year, I learned basic music theory, built, and launched an app.

Yeah.

Selah Chords has shipped. And the initial reviews are that it is beautiful, intuitive, easy-to-use, and extremely useful.

And coming soon, banjo and favorite voicings. And after that, custom tunings.

Get it for free today!

Perfect. I spent most of my summer using my iPad Pro as my primary computer. I love the bewildered look on “professionals” when they see what I can do on it.

There’s no such thing as a laptop replacement, and if there were, the iPad isn’t meant to be one.

Matt Gemmell

Golly, I’ve been thinking the same thing since WWDC. As all the reviews of the new iPads and of iOS 11 have been hitting, the age-old— well, seven year old question has been iterated again and again. Is this the iPad that finally kills the laptop?

Seldom does the writer acknowledge that they mean “is this the iPad that finally kills my laptop?” It’s a very personal question. Apple sells many different computers.

For many, the iPhone is the only computer they need. They scroll through Facebook, reading articles and liking photos. They message their friends. They respond to the occasional email. They watch Hulu and Netflix. My wife is usually in this camp. Perfectly comfortable to never grab a bigger screen.

For others, very powerful, customizable computers are required. Video editing, graphic design, photo editing, and more. They can do everything and more on their MacBook or iMac.

And then there are those that are happy with their iPhone, but sometimes or even often need a larger display. They may use a word processor. They may communicate much more and desire a bigger software keyboard. They may even prefer a Bluetooth keyboard. They may build websites. Or design websites. Or edit photos and video.

Consumers pick the computers that suit their needs. You may find that you can do everything you need on an iPhone. You may want a bigger screen, but more portability than a laptop. Or you may need much more power for your day-to-day tasks.

For me, I haven’t touched my Mac in over a week. I haven’t needed to. I’ve found Web Tools, Coda, and a Droplet to be all I need to get my job done. Most of that time, it has been a 12.9” iPad Pro that has done the job, with an iPhone stepping in occasionally to handle an email or text message.

Is the iPad the computer for you? You won’t know unless you try.

Viticci confirms my suspicions on the new 10.5” iPad Pro. Great device, more portable than the 12.9”, but not as versatile. The resolution means that 50/50 splitscreen renders two iPhone app sizes instead of two iPad app sizes.

When the iPad Pro was first announced, I knew that I needed one. Simply put, I wanted to shift my workflow to something simpler and more focused. That is the reason, by and large, that I have always chosen small laptops. The 12” PowerBook, 13” MacBook Air, and recently the 11” MacBook Air. I love small screens because they allow me to keep my screen more focused on my task at hand. My apps are always full-screened or split-screened for specific app pairs. And the iPad Pro, with split-screen and a large (for iPad) screen told me I could do the same with an OS that was built for focused use.

So I bought one. And built a web inspector for it. And started developing websites on it. Coda + Web Tools made for a great pair. Last year I got to refine my workflow a bit, but then I had to work with a C# project at work, so I went back to my MacBook and built there. Then, in February I got to start working on a new website built the way I wanted it. We chose Craft for the job and I set up an EC2 for remote development from my iPad. It was great. Aside from the few times that I absolutely needed a Mac— Sketch and such— and the few times that I used a Mac out of convenience, the iPad was used for around 80% of the development of the new Sensi website.

I love my iPad. It is my go-to device for nearly everything. But being so close to it every day, I too have had my list of requests. And today, Apple delivered. The iPad just grew up a little. A lot even.

Split screen is a 100% needed feature, and pure delight on the 13” display. However, switching apps has been largely a pain in the ass. Until today. The new Dock has made for a truly amazing experience. Easily drag an app into one of the two sides, paired apps are remembered, and more.

Atop that, drag and drop is one of those things that didn’t make sense until you had two apps sitting side-by-side and no way for assets to get between them. Last week, Readdle added drag and drop between all their apps and it was something truly magical. Today, Apple Sherlocked not only that functionality that Readdle spent no small amount of time on, but also the Documents app that was a lynchpin of that experience. Easily access you files throughout iOS, iCloud Drive, and even third-party document providers.

The iPad is feeling more and more like a “real” computer, whatever that means. For those of us that bought in early on, 18 months ago or even before Apple touched the “pro” space with iPads, this just solidifies our love for the platform.

Now we just need Sketch and Photoshop. A real Photoshop. With those, I could truly do my job without a Mac.

I went to Agile training last month at Asynchrony. Our department director wanted our team and a few others to go. I agree with almost everything about Agile. It’s easy to, at least for me.

Last week, as I prepped for our team’s next project, I decided that I want to push myself to do as much from my iPad Pro as possible. I have edited many sites from my iPad. But at work, I have been working on a C# website for the last few months. Despite trying, it was much easier to work in an IDE (Visual Studio for Mac Preview) on this site. But our next project is a complete redesign of a marketing site, setting it up on a LAMP box with a PHP-powered CMS.

There is a difference between making quick updates to a site and starting one from scratch. Quick updates typically only require Coda and Web Tools. But starting from scratch sometimes requires more tools. So I started looking at what I needed.

Image Tools is what I came up with. Two new tools coming soon to Web Tools. Easily open an image and use a ruler to measure and a loupe to grab colors.

My typical flow is to jot down a stream of consciousness in iA Writer. Lots of unfiltered thoughts. But this time, I downloaded Trello. I’ve never necessarily hated Trello, but I have a thing about todo list apps. I buy tons of them. Trello just didn’t fit my flow before. But this time it did. I created my Ready, Working On, and Done columns and started adding cards to my Ready column.

Saturday, as I finished my designs, I started working cards through my columns. And crap, I’m starting to like Trello.

While Brooks and others are arguing that iPad will eventually replace the Mac, Gruber is arguing there will always be a need for macOS—specifically a desktop operating system. Despite what my aforementioned dalliance with iPad might suggest, I’m firmly in Gruber’s camp.

Here’s the thought experiment, which I used to inform my opinion: If you could take only one device with you, which one would you take? Ben Brooks or Federico Viticci would almost certainly choose an iPad.

However, I’d take a Mac. Exactly the 11” MacBook Air, which I’m using to write this article.

Delusions of Grandeur

Which one would I take?

The other day, we were going to meet up with my extended family for dinner. My wife told me that I needed to bring my laptop, as my aunt wanted to talk about some logo design stuff. I was tired after a day of work and mindlessly grabbed my laptop. I regretted it as soon as we started to talk. Why? Because I couldn’t grab my Pencil and mindlessly sketch out some logos and notes.

Most of my design process is now done on my 12” iPad Pro. Between Adobe Draw, Graphic, and Bez I do a lot of design work on my iPad.

Christmas was on a Sunday. One Thursday, the 22nd, we drove up to Chicago to stay with my in-laws for the weekend. Going iPad-only, I did some doodling, some writing, and some reading. But I wanted to work on an iOS app side project.

Part of my developer life is web development. Something I have done for most of my life. I can do much of this from my iPad. But over the last five years, I’ve delved into iOS development. That “Brooks” that Rob Rhyne mentions above? He, Ben Brooks, linked my professional development app Web Tools right before the New Years, saying, “I wouldn’t be able to troubleshoot website errors without this.” But the sad thing is, I cannot do iOS development on an iPad. Xcode isn’t there yet. So I need my MacBook Air.

So which one would I take? Depends. I have set up a Digital Ocean server, installed Ghost, and built a theme all from my iPad. I have designed entire websites on it too. And designed logos, posters, flyers, and more. But if I need to work on an app, I gotta have my MacBook.

So, it’s like Ben Brooks has said, “I couldn’t use my Mac as my only machine in 2004, but in 2005 I could.” If it were about preference, I’d be on my iPad 100% of the time.

No, I’m not crying! You are. Shut up.