Category Archives: design

Launching Codeless

So, it finally happened.  My team and I got Codeless into the App Store.

I started writing Codeless off the side of my desk in 2015.  I had a couple weeks between projects, and I thought there was no way this could take more than a couple of weeks to prove the concept.  Here’s the oldest screenshot I could track down from July 30, 2015.

C74A0255 9196 4713 8DCB 3D0EE6D559BE 1 105 c

These days, it looks more like this:

Simulator Screen Shot 2nd gen iPad Pro 2020 05 12 at 01 21 26

It’s just beginning, but I think it’s gotten pretty good.  If you’re into app design and you’ve got an iPad, give it a download and tell me what you think!

P.S.: Thanks to Adam, Brendan, Jen and Owen.  This thing wouldn’t exist without you all.

Prelude to codeless

I love working on side projects, but I don’t usually talk about them until they’re ready to demo.  

What if I decide this isn’t worth pursuing in six months?  What if this turns out to be vapourware – will that hurt my reputation?  When I go down a blind alley and have to turn around, will I look stupid in front of my peers?  What happens if we get really busy at work and I can’t make any progress for a month?

On the other hand, I have a burning desire to try and build a side project ‘in public’.  I want to get people excited about this project, and I want to see if people are interested in it before I get too far down the path of building it.  I want to build the projects reputation, so that on launch day we’re ready to talk about it confidently.  And I want to tap into the hive mind that is the internet and see if anyone suggests something I never considered.

With that in mind, I’ve decided on a couple things.  I’m going to tell you about a side project I’ve been working on, only a few weeks into it’s life.  I’m going to try to stay open about it, and to tell you about where it’s gone and where it’s heading.  And I’m going to commit to releasing it as open source if I ever decide to put it on the shelf for good.

The problem we’re solving

I find it pretty frustrating how apps are designed right now.  Static mockups are made 

I get really frustrated with apps designed in photoshop…

…because it feels like someone handed me storyboard mockups and claimed they were a completed film.  I’ve been running an consulting company that specializes in mobile development for the last three years, and I’m always annoyed when a designer hands me a photoshop mockup for the app.  Because I know they’re going to want it translated to the screen in a pixel-perfect fashion, despite the fact that they built it in an image editor, and not on the platform.

Here are a few things that commonly fail in translation:

– Font rendering is different across platforms.

– Sometimes things look better on a 30” monitor than a 3.5” device.  Button sizes that look perfectly reasonable in photoshop are usually impossible to hit.

– For that matter, we usually only get photoshop documents for a single size of screen, and it’s usually not the largest or the smallest.  Apps designed this way are usually too tight on small screens and too spread out on large ones.

– Often there’s a graphic effect they’ve carefully tweaked, but want rendered live.  A blur over content is a common example.

These are all things that get screwed up in translation.  I’d like to be able to design apps on the actual device, with the native elements, so that I know things will render the same way in the final product.

We’re also wasting a lot of time and money

In the current model of handing off mockups, two expensive people doing the same work over.  The designer does a great job in photoshop, then the developer has to do the *same great job* in code.  And the developer is probably going to miss some subtleties.  Just look at how hard it is to do those ‘find ten differences’ puzzles you see in newspapers. Right now, every screen of the app is one of those.

No, I’m not saying the entire job of a designer is positioning elements, but the final output is a graphic file.

The ultimate aim for a mobile design app would be to output actual compilable code at the end.  Let the designer do their job in the *actual medium*, and let the developer take that work and build on it, not redo it.

So…codeless?

codeless is an iPad app I’ve been working on.  It’s in the early days right now, only supporting a few things like view positioning and some basic property editing.  But it’s going to be great.

Think of it as a cross between Photoshop and Interface Builder, with a little bit of Invision App thrown in for good measure.

It’s ugly as sin right now.  Here’s the first screenshot.

codeless screenshot

You can probably tell, there’s quite a ways to go.  Come with me.

Check out Pixate

This popped up in my feed today: Pixate.

It’s a cross between a motion design tool and an interaction design tool.  You should check out the video.  It looks excellent, and I can’t wait to give it a try.

We desperately need as many good motion design tools as we can get.  The amount of designers I deal with who still think in terms of static screens is staggering.

Design on the Phone Screen

When you’re a first-time mobile designer, the lowest hanging fruit for creating good designs is previewing on an actual device.  Simulators don’t count.  Slapping iPhone.jpg around your PSD as a frame doesn’t count.  You need to actually hold the design in your hand.

I often get to work with designers who are taking their first stab at designing for mobile.  Mobile design has been around for a few years now, but it’s not yet a common skill.  In the same way that web and print have different design processes, mobile also has it’s own unique toolset.  We see a lot of common errors while they get up to speed on the new platform.

The most frequent one is the amount of content that they’re trying to fit onto a single screen.  It looks great on a Cinema Display, but when you bring it down to pocket size, the text is often eyestrain-worthy or worse.  Perfectly reasonable looking buttons are obviously unusable.

You’ll find that previewing the design on the device solves that.  Even if there’s no functionality, just trying to tap the buttons provides insights on hard to reach areas.  Trying to read the text means that you won’t overload the screen.  Common design mistakes become easy to pick out.

There are tools to help you with this.  If you’re looking for a minimal solution, I recommend LiveView, which just positions a viewport on your desktop.  Whatever’s in that frame gets transmitted to your phone.  If you can’t manage to part with Photoshop, this is an easy tool to use with any design app.

If you’re willing to go further, I recommend learning how to use Sketch.  It’s designed for interface designers, makes exporting assets an absolute dream, and has a companion app called Sketch Mirror that streams your designs to your phone without having to fiddle with viewports.

When you design for print, you deal with printed proofs.  It would be insane to trust that you can translate your design from one medium to the next without error.

I get designs that have been approved for development when they’ve never been viewed on an actual phone.  That’s absurd.  Mobile is no different from any other format – designing without outputting to the final medium is the same as designing blind.