Software Dev

“Sketching” out an app prototype

I’ve learned a lot making apps for big companies, mostly about process: how a good continuous integration process works, how code reviews can be productive (or not productive), how to break a big app into smaller components so lots of people work on related things at the same time.

Still, it’s helpful to do something fresh and new 100% on your own from time to time. Doing something new all your own, you get to try any architecture you want, go all in on the latest asynchronous programming techniques, fully embrace the amazing new(ish) declarative/reactive view layer, and even try out a new CI framework to two.

But the most fun part of all is developing the idea of your app. What does your app do? How exactly does it work from a user perspective? And what do the screens look like in detail?

πŸ‘‰This time around, I’m prototyping my new app idea on my phone so that I can get a feel for how it works in my hands before writing all that code. ^

I tried out a few prototyping tools. After looking at some basic options and some pretty involved options (arguably too involved), I landed on a pretty “sketchy” Mac app that handles full-on detailed UI design and kind of does mobile prototypes through its “mirroring” iOS app. Perfect. πŸ‘Œ

πŸ‘‰ Sketch | mirroring app

I will say that Figma looks pretty promising as well. What nudged me over to Sketch was Apple’s Sketch-compatible design resources. There are some third-party iOS design resources for Figma, but I’d rather go with Apple’s official offering. Sorry, Figma. πŸ€·πŸ»β€β™‚οΈ

So my new design process is this, now that I’ve finally learned Sketch:

Rough sketch on paper ➑ realistic visual design in Sketch ➑ prototype on a phone ➑ code

My instinct is to talk about the app itself while it’s in progress, but sorry… that’s top secret for now. πŸ•΅οΈβ€β™€οΈ

Software Dev

It’s Time for Snapshot Testing

I love the idea of snapshot testing. It’s a simple way to automatically test an app’s UI.

It works like this:

  1. Set the app up in a certain state and take a screenshot. Save the screenshot. πŸ“Έ
  2. Next time when you run the same test, you compare screenshots. πŸ“· πŸ“Έ
  3. If something changed unexpectedly, then you know there’s trouble. πŸ’₯

Here’s a nice series about how to do it for iOS/ Xcode.

πŸ‘‰ Snapshot Testing. Testing the UI and Beyond (Part 1)

And GitHub: swift-snapshot-testing

The coolest thing is that you actually upload your screenshots in any new pull requests, so you can literally see what the change is all about (“The perfect pull request”). 🀯

Image for post

Via iOS Dev Weekly.

Software Dev


Trying to make a good-looking app but not a designer or want a head start with ready-made UI designs? You can always try an app template. I did this a few years ago with part of one of my apps.

And here’s a modern new collection of iOS app templates written in Swift.

πŸ‘‰ AppDesignKit: Swift coded, ready-to-use, iOS app templates

They seem to be basic UIKit apps, with no SwiftUI support. They is no authentication or backend support. They run on dummy data and free sample pictures. But from a purely UI / design perspective, these templates look they have good potential. They have templates for an e-commerce app, finance, fitness, food, media, reader, social, and travel.

Via iOS Dev Weekly.

Software Dev

Cool Controls for iOS

Some great open source libraries for all sorts of UI goodness in your iOS app. These are interesting because most of them are circular dials, like from the Nest app or Autosleep, which you don’t get from the standard iOS controls.

5 iOS Libraries to Improve Your App: Circular view slider, selector, volumelike slider, stepper, and more

Addition: some newly posted iOS UI libs:

πŸ‘‰ 5 iOS Libraries to Make Your App’s UI Really Pop