The Seakart is a new, unique, high performance recreational watercraft. The “ultimate sea toy,” it combines the fun of a jet ski with the comfort and passenger capacity of a yacht tender. We’ve been working with Seakart to show off this cool craft in some novel ways using new technologies such as augmented reality.

As with other luxury items, the Seakart can be configured in a dizzying number of combinations to match the customer’s preferences. When presenting at an event like a boat show, however, there isn’t room to display more than one or two craft on the show floor.


Following my previous article on working with ARKit and SceneKit, we at Black Pixel have had the opportunity to dig into some of the less defined features of the SceneKit editor. If you’re working with 3D in iOS, these tips may save you from a headache or two.

Positioning

There is no apparent way to lock a node’s position in the SceneKit editor. Since you’ll be navigating the viewport by clicking and dragging, it’s very easy to grab a node by accident and bump it out of position. You can make a mess of your scene very quickly just by panning…


Incorporating Pixelboard’s shape recognition tool into the UI.

For the newest update to Pixelboard, we wanted to make it easier to draw basic shapes like rectangles, ellipses, and straight lines. We accomplished this through a regimen of machine learning, with the team training Pixelboard to reliably recognize those inputs. It’s possible to use this feature — called Smart Strokes — without any UI, but for new users we wanted to provide the option to clearly see what’s going on. This component took its own path to release.

The general Smart Strokes flow is as follows:

  1. The user draws a stroke.
  2. If Pixelboard can provide one, the user may…


ARKit is the hot new technology in iOS 11 that lets you view and interact with virtual objects in real space.

It’s not hard to get an ARKit project up and running, but getting your 3D art into it can present some challenges. Fortunately, once your art is imported, you can make a number of adjustments in Xcode’s SceneKit Editor — SceneKit being the 3D graphics framework that ARKit employs.

We’re going to look at preparing your art for ARKit, getting it into the SceneKit Editor, and making final adjustments. You will need an ARKit-capable iOS device to proceed. …


Basic guidelines for clean, consistent development.

For the sake of our own Framer module development, we authored this style guide as a reference for ourselves. We offer it here as a talking point for the Framer community at large. Most of these guidelines may seem like common sense, though it’s helpful to have them in writing. Perhaps one or two points will be new to you. Please feel free to provide feedback, either here or on the GitHub Gist Version.

If you’re just beginning to write your own Framer modules, check out our article on Developing a Framer Module instead. …


How to animate a layer along a motion path.

Framer makes it easy to animate many aspects of a layer, but from time to time you may want to reach beyond the default animatable properties and do something the designers didn’t account for. It’s possible to roll your own animations, with your own animation curves. We’ll look at how to do that using the example of animating a layer along a path.

First, we need a motion path drawn with SVG. You can use any app you like to make this, but I like Boxy SVG for exposing both canvas and code at the same time.

SVGs and Framer…


Using key-value objects to make multi-device prototypes.

If you work long enough with Framer prototypes, eventually you’ll encounter the problem of how to adapt a prototype’s layout to handle multiple devices and orientations. Rather than create a separate prototype for every situation — say, one for iPhone in portrait orientation and one for iPad in landscape — it’s possible to design a responsive prototype that adapts its metrics as the situation demands. This requires some setup, but the process can be greatly simplified by a data structure known as an object.

“Object” is a vague term that could refer to many things. Here, we’re using it to…


Framer Studio is an excellent prototyping tool for designers. Not only does it enable sophisticated prototypes out of the box, but its capabilities can be extended via modules. You’ll find plenty of great modules around the web, but what if you want to build your own?

Unfortunately, there’s a large gap between knowing enough of Framer Studio’s core language, CoffeeScript, to create interactive animations and being able to produce even a simple module. We’ll try to close that gap here.

We’re going to create a module called “GhostLayer” that makes it easier to fade layers interactively. We’ll do this by…


In 2012, a design agency known as Softfacade posted a case study to the Web. Softfacade’s task was to redesign a logo mascot icon originally conceived by Russian studio Turbomilk. At the time of the case study, Softfacade was based entirely in St. Petersburg, so the redesign was Russian as well.

That case study is no longer available on the Softfacade site, and the agency’s focus seems to have shifted in the years since. It’s a shame, because it was one of the most professionally startling things I’d ever come across.

The approach involved creating the icon twice: once as…


The 50% Gray

The question of whether designers should learn to code has sparked a great deal of discussion and furcated into areas that can sometimes seem beside the main point. I myself am a designer who has come to rely on code and who enjoys learning more about it. However, I don’t intend to persuade other designers to follow the same evolution. Instead, I want to sweep a few cobwebs out of the polemical corners.

Naturally, the argument shifts somewhat depending on the area of design in view. …

John Marstall

Designer. Xplane | Firewheel Design | Gowalla | Black Pixel | Kaleidoscope | NetNewsWire | Hypergiant

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store