This is what my Things list looks like.

5 weeks late, the weeknote is back. The last time I had a weeknote ready to draw up, I was going to talk about the Knife Collection Design, which is up at chefsteps.com/knife-collection.

We worked really hard on the design and implementation of this page so that it would work on mobile as well as desktop. The original idea I had for the knives came from (of all places) Boden, which featured large, lovely pictures of clothing and touch or click targets on top of those that opened up a popover to purchase. For the life of me, I can’t find any good examples of them doing that now, and it’s possible they’ve moved on from that design, but I liked it, so cribbed it, mostly because I knew we wanted to have a very photography heavy experience and to highlight those knives. Since our pics are so great, wtf not, right?

Additionally, we have these awesome stories to tell, and I wanted to draw the eye to them when users scrolled so that it wasn’t ignored. You’ll see the pics naturally, but the words about these knife makers is pretty freaking cool, so I used a little javascript magic to put a cool gray background behind the words. This, you’ll see was another idea stolen from kerem.co, whose got a beautiful website as well.

When we had our first iteration, responsive was screwing everything up, and our mobile screens weren’t doing what we wanted so I iterated on those a bit. Truth be told, I should obviously be designing mobile first, but our user base does actually skew heavily towards desktops, though we absolutely expect that to change. So instead, I pitched the push-right, push-left idea to Huy, and he came up with a great implementation. Affordances to show that you can click off (or the plus button) to close the window were light, so another idea, from Path’s menu was taken.

So that’s it! Those are all my design secrets. We’ve been hard at work on the macaron course, which involves brand-new content (of course) but also a redesign landing page and activity pages for the courses, streamlined with a focus on getting through and experiencing the content so that there’s less jumping back and forth. If you’re interested in getting a sneak preview and talking about it for a while, leave a comment.