New artwork: Woman, Why Weepest Thou? (Taking the idea from He Is Risen and going a little further with it.)
Blog
Another in-progress bit of design, this time from a writing app I’m working on. (Which I’m thinking of as a potential replacement for Storybook.)
Panes
One of the core ideas I want to explore with this app is a pane-based layout system, similar to what you get in Blender and After Effects, and in tiling window managers. Here’s what Blender looks like:
There’s a lot going on there, but fundamentally it’s just panes. You can split a pane, merge it with another, resize panes, and change the type and/or contents of a pane.
There is also usually the idea of a workspace, where you can switch between different pane layouts for different types of work. (In Blender, for example, there are workspaces for modeling, shading, animating, compositing, and more.) Photoshop has echoes of this as well, though it’s not fully pane-based.
A brief analysis
Some of the advantages of panes (at least in my mind):
- Flexibility. You can create the workspace you need, with things arranged the way you want.
- Simplicity. You can see everything in a workspace, with nothing hidden under another window. (This isn’t completely true, though.)
- Responsive. Because the layout needs to adapt to a variety of configurations, each pane needs to work at pretty much any size.
- I’m not sure yet what to call this, but you can easily switch between tasks, whether that’s changing a pane briefly or switching workspaces.
And some of the disadvantages of panes:
- Fiddly. Because it’s malleable, you end up spending more time tweaking the layout.
- Connected. Resizing a pane resizes the adjacent panes on the other side of the divider.
- Complexity. There can be (and usually are) panes that you don’t have visible in your workspace, with state about your project. Some things are hidden after all.
Because I’m interested in interface design, and because I’ve long wanted to explore this particular space, I’m going to try applying the pane idea to writing. I’m not sure it’s a good fit, but if it’s not, I want to find out which factors determine that, and which types of activities would be better candidates for a layout system like this.
Panes on mobile
Designing for mobile first, I immediately ran into the hard, cold fact that a phone screen is too small to split into panes.
This got me thinking about what panes do, at a more abstract level. My conclusion: panes let you have multiple things open at a time, in a way that preserves state (where you are in each pane, to use a spatial metaphor).
With that in mind, it seems to me that the closest analogue would be a screen for each pane, with a way to switch between them — similar to the way Safari handles the open tabs in iOS in portrait mode on a phone. This model allows for switching between tasks in a reliable, persistent way on a device with a small screen.
Pane types
I first brainstormed some possible pane types and came up with this tentative list:
- Draft. Where you do the writing.
- Outline. A foldable outline or note cards or something in that vein.
- Feedback. Comments from beta readers and editors.
- Notes. Your notes on characters, locations, etc.
- Labels. Working off the idea that you can label a chapter/scene/paragraph, this would be a pane for working with labels (navigating and managing the list of labels, seeing what has been tagged with a given label, etc.).
- History. A way to see previous drafts. My plan involves a branching model ala Git, though, which would include experimental drafts, so this probably needs to be renamed.
Mobile pane design
I made some quick sketches and considered turning them into a prototype, but going to wireframes instead seemed a better use of my time (it’s much easier to iterate on wireframes).
Here’s the current state of the prototype (made in Figma with variants and auto layout and Smart Animate). It’s not finished, and it’s still a bit rough, but you can at least start to get the idea:
And some of the screens:
Further work
Some of the things I’m thinking about at this point, that I plan to validate and iterate on through testing:
- Whether the switcher makes sense as an overlay (what we’ve got here) or its own screen. Leaning towards an overlay so that the other panes are near the bottom of the screen, closer to the user’s hand.
- Whether a right-handed overlay is problematic for left-handed users. (Keeping in mind that the button for the switcher is already on the right side of the screen, and so the user’s finger will already be in the vicinity. But that may not make a difference.)
- Whether a list like this is the right way to display panes, or if a visual of the actual panes (like the app switcher in iOS) would be better. For visual-based work this makes sense, but for work like writing that’s largely text-based, I’m not sure. This will affect the type of transition used when switching between panes, too.
- When you add a new pane, what the pane type should be and where it should be navigated to. The same type/contents as the active pane? The same type but reset to the beginning of the project? Some default pane type?
- Whether switching a pane’s type (by tapping on the pane type icon in the switcher list) makes sense in this context. I believe it does when you’re working with actual panes on a larger screen, but it may not fit.
Once I’ve got this sorted out (by testing and iterating), I’ll follow the same process to design the UI for working with panes at larger screen sizes.
New artwork: Seventy Times Seven.
Weeknotes #20
- Merry Christmas! I hope you’re all well and safe.
- As mentioned, the initial version of the portfolio is up. I’ve decided to jettison the type design tool idea (too niche, and perhaps a bit too technical) and instead design a writing app ala Scrivener for my next case study.
- With my art, I’ve moved from an every-other-day release schedule (a bit much) to releasing on Mondays and Thursdays. This past week I’ve had three people separately suggest that I make a book of my art, so I’m now mulling that over and trying to figure out whether running a Kickstarter is something I can do in the near future. (I’m also thinking, though, about making a coloring book from some of my existing pieces. It would be a free PDF download.)
- Tonight I freshened up the design of my site and redid the home page. Eternal tinkering.
- Nonfiction reading: I’m two-thirds of the way through Stalling for Time. Fascinating reading. The extra detail on the Ruby Ridge and Waco fiascos has been riveting though sad.
- I haven’t been reading as much of Benjamin Franklin as I’d like lately, but I’m planning to ramp that up this next week.
- Fiction reading: Finished The Humans. Thought-provoking.
- I also read Ben Aaronovitch’s Midnight Riot (Rivers of London in the UK). A bit earthy in places but other than that I really liked it, and I wish I lived in London, and I kind of wish I was born in London too.
- And now I’m a fifth of the way into Cormac McCarthy’s The Road. I’ve gone in knowing only that it’s depressing and post-apocalyptic and that it’s somewhat light on punctuation; I have no idea what happens beyond that. He’s a heck of a writer so far.
New artwork: Come unto Christ. This one started as a piece about Lorenzo Snow’s couplet “As man now is, God once was; as God now is, man may be,” but after dozens of iterations trying to nail down the concept, I still felt unsettled about it. Then I came across Moroni 10:32 last week, and it immediately became clear to me that the title of this piece needed to change. Once that was in place, everything else came together quickly.
I’m slowly getting back into doing non-religious art, and What Do You Mean, “What Are You Doing?” is my first real entry there. It started out as a random doodle in pencil, which I scanned and then redrew in Procreate Pocket on my phone, which is also where I did the coloring and texturing.
With this piece, by the way, I found that a) working on an iPhone 11 really, really makes me miss the pressure sensitivity on my old iPhone 8, and b) I’m at the point where I’ve finally decided to start saving up for an Apple Pencil and iPad. I’ve hesitated to go down that path since it’s an expensive one (the iPad part, that is), but the benefits are now pretty clear to me.
New artwork: Ministering of Angels.
The initial version of my design portfolio is now live. Whew. Time for a breather over the weekend and then I’ll be diving back in to work on the next case study, a web-based revamp of Curves. It’ll be a new, graphical tool for designing type, and yes, I’m totally re-using the name because a) I never released the old project with the same name (the Python library), and b) there was actually a graphical version that came first (though I don’t know how much of that initial mockup will make it into the new design).
New artwork: In Swaddling Clothes. (Figured it was time for another Christmas piece.)
Weeknotes #19
- I am now, I believe, in possession of a master’s degree. (Pedantic aside: is stating this a bit on the premature side? I mean, can I really say I have a master’s before the grades have gone through? Or before the diploma is safely in my hands? Perhaps. I’ve done everything that I can do on my end, so that’s what I’m in possession of, whatever it is.) Yesterday marked 1,574 days since I decided to get this degree, and whew, that makes it sound really long. Which it was. But the time passed quickly. I’m delighted to be on this end of it.
- I’m oh so close to having the initial version of my portfolio ready. Out the gate I’ll have a small new case study along with three retrospective case studies from my time designing at the library. It’s not a ton, but at least it’s something to get out there, allowing me to start applying for jobs while I work on expanding the portfolio with new case studies.
- Writing? What’s that?
- The every-other-day release frequency has worked out well for the art, I think. An important consequence I hadn’t considered beforehand is that it also keeps me in the art headspace more often, and as a result I’ve had a lot more momentum. FWIW for those who are curious: I currently have four pieces textured and ready to release, seven more ready for texturing, and dozens more ideas in Paper and Figma waiting to be fleshed out.
- Nonfiction reading: I finished Grinding It Out and while it was interesting enough to actually finish, I found myself liking Ray Kroc less and less as the book went on. So there was that.
- I also blazed through She Said by Jodi Kantor and Megan Twohey. Oh, how I love reading about journalists’ investigations—I also really liked Ronan Farrow’s Catch and Kill for the same reason. Somber subject matter, but it’s good to see a predator taken down.
- Yesterday I began reading Stalling for Time by Gary Noesner, about his time as an FBI hostage negotiator. (Not a job I’d ever want.) Riveting so far.
- Fiction reading: I’m halfway through The Humans and enjoying it. (It’s been much more of a nonfiction week, thus the slow progress on this book in spite of it being a very easy read.)