Categories
108 Koans Art

Introduction – 108 Koans Retrospective

Some background information about how 108 Koans came to be and what I was trying to achieve.

Categories
108 Koans Art

108 Koans five year anniversary announcement

It’s the five year anniversary of 108 Kōans! And I have stuff to say about it.

Categories
DIY Usability

Incorporating usability into DIY projects

I recently made the framework for a flower wall that Snapdragon Studio will use for weddings. Making it was fairly simple; basically I used two pieces of peg board bolted to a couple 1″×4″s (check out the bottom of the post for more details). The fun part was making sure that it was quick, easy, and obvious to put together and take apart.

 

Silvia attaches greenery to the front of the pegboards.
Back view

No tools

There are a lot of moving parts when setting up flowers for a wedding, and I didn’t want the Snapdragon folks worrying about “Crap, we forgot the socket wrench for the flower wall!” I used wingnuts to fasten the bolts, so the whole thing can easily be put together by hand.

Wingin’ it.

Labels

Ideally, the orientation of the boards wouldn’t matter—you could put either board on either side in any orientation and it would still work. Unfortunately, that wasn’t possible because boards I was working with weren’t straight. :/ So I had to ensure that the boards would be put together the right way with … LABELS!

Bottom’s up. Wait … no!

The key thing to keep in mind here was to not make all the labels too overwhelming. I started by labeling the top and bottom of the boards with text labels and arrows. Easy enough.

I marked the middle where the two pegboards meet with text and arrows. I also marked the two pieces with diagonal lines that align when the pieces are matched correctly. (I learned that trick from my dad when he helped me put in some laminate flooring.)

Thanks, Dad.
I think you can tell where this is going.

For the placement of the two boards, I didn’t use “left” and “right” because 1) that’s too much text, and 2) left and right are confusing when you can look at something from the front or the back. So, I opted to mark the two boards with two different shapes. The same symbols on the pegboard indicate the correct placement. This works great because it’s less of a cognitive load to match shapes than to read and interpret text. You can do it without thinking about it.

Yes, I accidentally put a circle on the top right instead of a triangle. :O I fixed it later.
And just in case there’s any confusion …

Requirements & Solution

Finally, if you’re interested here are all the requirements I had to meet and the solution I came up with.

Requirements

  • large enough to cover a doorway and serve as a photo backdrop for people standing in front of it.
  • small enough to fit inside an SUV.
  • easy to store when not in use.
  • made of material that allows flowers and greenery to be wired to it.
  • sturdy enough to hold up to the weight of all those flowers (which can actually get quite heavy).
  • secure enough that it won’t slide or tip over.
  • leans almost upright against a door or wall.
  • does not have ugly hardware visible from the side, such as an A-frame or a base coming out the back.

 

Additionally, I put on my UX designer hat and added some more considerations:

  • People can get pretty smashed at weddings. Taking a selfie in front of a flower wall only adds to the rambunctiousness. The wall needs to survive drunk people falling into it, hanging off of it, etc.
  • As outlined above, it should be easy, quick, and obvious to put together without tools.

    Initial sketch.

Solution

  • Size 4′×7′, cut into two 4’×3.5′ pieces. The 4’×7′ would have fit in the the SUV, but cutting it into two pieces makes it easier to store and maneuver.
  • Material Peg board allowed flowers to be easily wired through the holes.
  • Sturdiness — The peg board needed something to keep it from sagging when leaned against the wall. Plus, since we decided to cut it into two pieces, it needed something to join the two pieces together. Two cheap 1″×4″s on the back of the peg board did the trick.
  • Security — Since I couldn’t build any structure coming off the back for aesthetic reasons, I had to get creative. Two eyehooks attached to the top of the 1″×4″s allow a cord to be tied from each hook to the door—this prevents any chance of it tipping over. Rubber pads on the bottom of the 1″×4″s keep them from sliding. I had a couple other ideas to keep it from moving, which you can see in the sketch above. But the rubber pads were actually enough to hold it in place.

    Ta-da!
Categories
Virtual Reality

Learning virtual reality

I have been learning how to create virtual reality scenes through Udacity’s VR Developer Nanodegree. A lot of my Interactive Media students have been interested recently in 3D design, and I have been wanting to learn more about Unity for game design, so this seemed like a good opportunity to get familiar with both. I’m not sure what I’ll ultimately do with virtual reality—maybe a virtual art installation or an interactive narrative. I’m actually more interested in augmented and mixed reality, but I’ll save that for another post. Right now, I’m having fun just kind of playing around with VR and learning some new skills.

So far I’ve completed two VR projects. The first was just a basic “Hello World” type project in which I worked out all the frustrating kinks of getting my development environment working and successfully deploying to an Android phone. The second project was a little more interesting—it’s a virtual reality apartment.

A top-down view of a 3D rendered apartment.
There it is.
A 3D rendered office scene.
Virtual offices are much less cluttered than real offices.

You can’t do anything other than move around and look at the furniture. But it’s exciting to be creating a place on my laptop, and then be in that place.

Screenshot showing a stereoscopic image of a 3D rendered kitchen.
Screenshot of the app running on Android. If you look at this through a Google Cardboard viewer, this appears as one 3D image.

The most challenging thing about this project was getting everything aligned perfectly so nothing is overlapping and objects are sitting right on top of other surfaces. You’d think there would be an easy shortcut for this, but it’s more difficult than it sounds (at least with my current knowledge of Unity). I had a lot of success with vertex snapping, but with some objects that didn’t quite do the trick and I ended up just eyeballing it.

Close up of Unity interface, trying to align a globe to its stand.
Eyeballing stuff in three dimensions is a pain in the ass.
Unity interface showing books aligned together.
Look at that book alignment, tho.

If you know how to install an APK file on your Android phone and you have a Google Cardboard viewer, you can check out the scene for yourself. It’s up on my github.

Selfie of me wearing a Google Cardboard headset.
I don’t know what’s real anymore.
Categories
UI Design

UI sketching supplies

I pretty much always start on paper when sketching out new ideas (I even write code on paper sometimes). So I really nerded out when I discovered UI Stencils—they have a pixel ruler!! I love anything that brings the digital into the physical world. I splurged and bought myself a bunch of sketching supplies, with the goal of really working on my wireframing and storyboarding chops this summer.

pens, markers, and stencils for making UI sketches
The supplies I used to make my first sketch.

I’m especially happy with what they call the Everyday Carry Kit. It comes with a set of three dot-grid notebooks, a stencil, and a Zebra mechanical pencil that are all small enough to fit in my pocket (at least in the summer while I’m wearing shorts). This has been great way for me to just start sketching something whenever I have a spare moment. For my first sketch, I just started playing around with the stencil, without having a plan of what I was making. It gradually turned into one step of an account setup interface where you would start adding friends.

A pencil sketch of a UI for adding friends to your network.
The initial sketch in pencil. This just came together as I was trying out different parts of the stencil.

The stencil is awesome, although there are some issues. It is hard to align stuff correctly, because the stencil covers up the other parts of the sketch that you are trying to align to. You can see this in the poor alignment of the user icons and the plusses inside the circles. I started to get better at this by really paying attention to the dot-grid, as you can see in the check boxes.

The other purchase I’m really nerding out about is a set of gray Copic markers. They really help set off different parts of your design hierarchy, and make your paper wireframes look more professional. I LOVE the ultra-subtle ‘N0’ color, which I used for the background. I found the Copics cheaper on Amazon than on the UI Stencils site. I also used some other pens and markers to add outlines and annotations.

A finished wireframe sketch in pen and marker.
The finished sketch using gray Copics to further distinguish design elements.

I’m looking forward to devoting some serious time to developing my pen-to-paper skills and making these look even more professional. One thing I realized I need to work on is my lettering. I have okay handwriting, but I’d like to get it looking a little more uniform.

Supplies used

Categories
Uncategorized

Welcome to my sketchbook

Hi! Welcome to my new online sketchbook, in which I’ll be posting images and notes about art, design, and development. I have a lot of interests, so you will likely see all kinds of stuff here, including UX design, game design, web development, and various types of art (conceptual, video, sound, performance, installation, & more!) I’ll try give a little context and insight into my creative process here. Thanks for stopping by. If you want to get back to my main portfolio site, you can click “Back to derekds.com” in the top right.