Tags: workshop

54

sparkline

Monday, October 23rd, 2017

Voice Guidelines | Clearleft

I love what Ben is doing with this single-serving site (similar to my design principles collection)—it’s a collection of handy links and resources around voice UI:

Designing a voice interface? Here’s a useful list of lists: as many guiding principles as we could find, all in one place. List compiled and edited by Ben Sauer @bensauer.

BONUS ITEM: Have him run a voice workshop for you!

Monday, October 2nd, 2017

CSS and SVG animation workshop by codebarbrighton

There were two days of Codebar workshopping on the weekend as part of the Brighton Digital Festival. Cassie talked people through this terrific CSS animation tutorial, making this nifty Brighton-based piece.  

Monday, July 17th, 2017

Despicable Design — When “Going Evil” is the Perfect Technique

I really like this “evil” design exercise that Jared has documented on Ev’s blog.

I broke them up into small groups of three, spreading each role across separate groups. I then asked each person to grab a sheet of paper and make their own list of ways they imagined the product’s user experience could be made worse.

Monday, July 3rd, 2017

UX London 2017 - YouTube

If you’ve never been to UX London, this short video communicates the flavour of the event nicely.

Wednesday, May 24th, 2017

A workshop on evaluating technology

After hacking away at Indie Web Camp Düsseldorf, I stuck around for Beyond Tellerrand. I ended up giving a talk, stepping in for Ellen. I was a poor substitute, but I hope I entertained the lovely audience for 45 minutes.

After Beyond Tellerrand, I got on a train to Nuremberg …along with a dozen of my peers who were also at the event.

All aboard the Indie Web Train from Düsseldorf to Nürnberg. Indie Web Train.

I arrived right in the middle of Web Week Nürnberg. Among the many events going on was a workshop that Joschi arranged for me to run called Evaluating Technology. The workshop version of my Beyond Tellerrand talk, basically.

This was an evolution of a workshop I ran a while back. I have to admit, I was a bit nervous going into this. I had no tangible material prepared; no slides, no handouts, nothing. Instead the workshop is a collaborative affair. In order for it to work, the attendees needed to jump in and co-create it with me. Luckily for me, I had a fantastic and enthusiastic group of people at my workshop.

Evaluating Technology

We began with a complete braindump. “Name some tools and technologies,” I said. “Just shout ‘em out.” Shout ‘em out, they did. I struggled to keep up just writing down everything they said. This was great!

Evaluating Technology

The next step was supposed to be dot-voting on which technologies to cover, but there were so many of them, we introduced an intermediate step: grouping the technologies together.

Evaluating Technology Evaluating Technology

Once the technologies were grouped into categories like build tools, browser APIs, methodologies etc., we voted on which categories to cover, only then diving deeper into specific technologies.

I proposed a number of questions to ask of each technology we covered. First of all, who benefits from the technology? Is it a tool for designers and developers, or is it a tool for the end user? Build tools, task runners, version control systems, text editors, transpilers, and pattern libraries all fall into the first category—they make life easier for the people making websites. Browser features generally fall into the second category—they improve the experience for the end user.

Looking at user-facing technologies, we asked: how well do they fail? In other words, can you add this technology as an extra layer of enhancement on top of what you’re building or do you have to make it a foundational layer that’s potentially a single point of failure?

For both classes of technologies, we asked the question: what are the assumptions? What fundamental philosophy has been baked into the technology?

Evaluating Technology Evaluating Technology

Now, the point of this workshop is not for me to answer those questions. I have a limited range of experience with the huge amount of web technologies out there. But collectively all of us attending the workshop will have a good range of experience and knowledge.

Interesting then that the technologies people voted for were:

  • service workers,
  • progressive web apps,
  • AMP,
  • web components,
  • pattern libraries and design systems.

Those are topics I actually do have some experience with. Lots of the attendees had heard of these things, they were really interested in finding out more about them, but they hadn’t necessarily used them yet.

And so I ended up doing a lot of the talking …which wasn’t the plan at all! That was just the way things worked out. I was more than happy to share my opinions on those topics, but it was of a shame that I ended up monopolising the discussion. I felt for everyone having to listen to me ramble on.

Still, by the end of the day we had covered quite a few topics. Better yet, we had a good framework for categorising and evaluating web technologies. The specific technologies we covered were interesting enough, but the general approach provided the lasting value.

All in all, a great day with a great group of people.

Evaluating Technology

I’m already looking forward to running this workshop again. If you think it would be valuable for your company, get in touch.

Monday, May 22nd, 2017

Evaluating Technology | Calum Ryan

Calum’s write-up of the workshop I ran in Nuremberg last week.

Wednesday, April 26th, 2017

1 day public speaking workshop in Brighton for digital professionals - £95 + VAT Tickets, Thu, 18 May 2017 at 10:00 | Eventbrite

I’m not going to be around for this, but I wish I could go. If you’re in Brighton, I highly recommend this one-day workshop from Matt. He’s been doing some internal workshops at Clearleft and he’s pretty great.

Sunday, September 25th, 2016

Web Animation Workshops

Val Head and Sarah Drasner have teamed up to offer a two-day workshop on web animation. If you have a chance to attend, do it!

Monday, July 25th, 2016

A workshop for codebar students: Build a portfolio or blog site | Charlotte Jackson, Front-end developer

Charlotte did a fantastic job putting this workshop together on the weekend. It was inspiring!

Wednesday, October 28th, 2015

Storyforming

It was only last week that myself and Ellen were brainstorming ideas for a combined workshop. Our enthusiasm got the better of us, and we said “Let’s just do it!” Before we could think better of it, the room was booked, and the calendar invitations were sent.

Workshopping

The topic was “story.”

No wait, maybe it was …”narrative.”

That’s not quite right either.

“Content,” perhaps?

Basically, here’s the issue: at some point everyone at Clearleft needs to communicate something by telling a story. It might be a blog post. It might be a conference talk. It might be a proposal for a potential client. It might be a case study of our work. Whatever form it might take, it involves getting a message across …using words. Words are hard. We wanted to make them a little bit easier.

We did two workshops. Ellen’s was yesterday. Mine was today. They were both just about two hours in length.

Get out of my head!

Ellen’s workshop was all about getting thoughts out of your head and onto paper. But before we could even start to do that, we had to confront our first adversary: the inner critic.

You know the inner critic. It’s that voice inside you that says “You’ve got nothing new to say”, or “You’re rubbish at writing.” Ellen encouraged each of us to drag this inner critic out into the light—much like Paul Ford did with his AnxietyBox.

Each of us drew a cartoon of our inner critic, complete with speech bubbles of things our inner critic says to us.

Drawing our inner critic inner critics

In a bizarre coincidence, Chloe and I had exactly the same inner critic, complete with top hat and monocle.

With that foe vanquished, we proceeded with a mind map. The idea was to just dump everything out of our heads and onto paper, without worrying about what order to arrange things in.

I found it to be an immensely valuable exercise. Whenever I’ve tried to do this before, I’d open up a blank text file and start jotting stuff down. But because of the linear nature of a text file, there’s still going to be an order to what gets jotted down; without meaning to, I’ve imposed some kind of priority onto the still-unformed thoughts. Using a mind map allowed me get everything down first, and then form the connections later.

mind mapping

There were plenty of other exercises, but the other one that really struck me was a simple framework of five questions. Whatever it is that you’re trying to say, write down the answers to these questions about your audience:

  1. What are they sceptical about?
  2. What problems do they have?
  3. What’s different now that you’ve communicated your message?
  4. Paint a pretty picture of life for them now that you’ve done that.
  5. Finally, what do they need to do next?

They’re straightforward questions, but the answers can really help to make sure you’re covering everything you need to.

There were many more exercises, and by the end of the two hours, everyone had masses of raw material, albeit in an unstructured form. My workshop was supposed to help them take that content and give it some kind of shape.

The structure of stories

Ellen and I have been enjoying some great philosophical discussions about exactly what a story is, and how does it differ from a narrative structure, or a plot. I really love Ellen’s working definition: Narrative. In Space. Over Time.

This led me to think that there’s a lot that we can borrow from the world of storytelling—films, novels, fairy tales—not necessarily about the stories themselves, but the kind of narrative structures we could use to tell those stories. After all, the story itself is often the same one that’s been told time and time again—The Hero’s Journey, or some variation thereof.

So I was interested in separating the plot of a story from the narrative device used to tell the story.

To start with, I gave some examples of well-known stories with relatively straightforward plots:

  • Star Wars,
  • Little Red Riding Hood,
  • Your CV,
  • Jurassic Park, and
  • Ghostbusters.

I asked everyone to take a story (either from that list, or think of another one) and write the plot down on post-it notes, one plot point per post-it. Before long, the walls were covered with post-its detailing the plot lines of:

  • Robocop,
  • Toy Story,
  • Back To The Future,
  • Elf,
  • E.T.,
  • The Three Little Pigs, and
  • Pretty Woman.

Okay. That’s plot. Next we looked at narrative frameworks.

Narrative frameworks as Oblique Strategies.

Flashback

Begin at a crucial moment, then back up to explain how you ended up there.

e.g. Citizen Kane “Rosebud!”

Dialogue

Instead of describing the action directly, have characters tell it to one another.

e.g. The Dialogues of Plato …or The Breakfast Club (or one of my favourite sci-fi short stories).

In Media Res

Begin in the middle of the action. No exposition allowed, but you can drop hints.

e.g. Mad Max: Fury Road (or Star Wars, if it didn’t have the opening crawl).

Backstory

Begin with a looooong zooooom into the past before taking up the story today.

e.g. 2001: A Space Odyssey.

Distancing Effect

Just the facts with no embellishment.

e.g. A police report.

You get the idea.

In a random draw, everyone received a card with a narrative device on it. Now they had to retell the story they chose using that framing. That led to some great results:

  • Toy Story, retold as a conversation between Andy and his psychiatrist (dialogue),
  • E.T., retold as a missing person’s report on an alien planet (distancing effect),
  • Elf, retold with an introduction about the very first Christmas (backstory),
  • Robocop, retold with Murphy already a cyborg, remembering his past (flashback),
  • The Three Little Pigs, retold with the wolf already at the door and no explanation as to why there’s straw everywhere (in media res).

Once everyone had the hang of it, I asked them to revisit their mind maps and other materials from the previous day’s workshop. Next, they arranged the “chunks” of that story into a linear narrative …but without worrying about getting it right—it’s not going to stay linear for long. Then, everyone is once again given a narrative structure. Now try rearranging and restructuring your story to use that framework. If something valuable comes out of that, great! If not, well, it’s still a fun creative exercise.

And that was pretty much it. I had no idea what I was doing, but it didn’t matter. It wasn’t really about me. It was about helping others take their existing material and play with it.

That said, I’m glad I finally got this process out into the world in some kind of semi-formalised way. I’ve been preparing talks and articles using these narrative exercises for a while, but this workshop was just the motivation I needed to put some structure on the process.

I think I might try to create a proper deck of cards—along the lines of Brian Eno’s Oblique Strategies or Stephen Andersons’s Mental Notes—so that everyone has the option of injecting a random narrative structural idea into the mix whenever they’re stuck.

At the very least, it would be a distraction from listening to that pesky inner critic.

Monday, June 22nd, 2015

Visual Essentials for Product Design — Cennydd Bowles

This one-day workshop that Cennydd is running in London on July 22nd looks like it’s going to be really good.

Saturday, May 30th, 2015

100 words 069

I made mention already of an exercise that myself and Charlotte came up with to help developers to think in terms of granular components: using a humble pair of scissors to cut up screenshots or mockups into their constituent parts.

Recently we repeated and added to this exercise. Once the groups of components are gathered together—buttons, form elements, icons, whatever—we go through each group. Everyone writes on a post-it what name they would give this component—button, formField, icon, etc. Then everyone slaps down their post-it notes at the same time. See any overlap? That’s your class name.

Wednesday, May 20th, 2015

GSWO Workshop with Sparkbox

Katie, Divya, and the other great designers and developers at Sparkbox run workshops on HTML and CSS for girl scouts. They’ve shared their resources and I might just borrow some of them for Codebar.

Monday, May 18th, 2015

100 words 057

It’s UX London week. That’s always a crazy busy time at Clearleft. But it’s also an opportunity. We have this sneaky tactic of kidnapping a speaker from UX London and making them give a workshop just for us. We did it a few years ago with Dave Grey and we got a fantastic few days of sketching out of it.

This time we grabbed Jeff Patton. He spent this afternoon locked in the auditorium at 68 Middle Street teaching us all about user story mapping. ‘Twas most enlightening and really helped validate some of the stuff we’ve been doing lately.

Thursday, May 14th, 2015

Browser Prototyping — a one-day workshop for designers

This looks like it’ll be brilliant! Nat is running a prototyping workshop the day before Responsive Day Out:

This workshop is for designers with no coding experience — if you’re an absolute beginner who wants to find out whether coding can help you with your job, this is for you!

Tuesday, December 16th, 2014

The Session trad tune machine

Most pundits call it “the Internet of Things” but there’s another phrase from Andy Huntington that I first heard from Russell Davies: “the Geocities of Things.” I like that.

I’ve never had much exposure to this world of hacking electronics. I remember getting excited about the possibilities at a Brighton BarCamp back in 2008:

I now have my own little arduino kit, a bread board and a lucky bag of LEDs. Alas, know next to nothing about basic electronics so I’m really going to have to brush up on this stuff.

I never did do any brushing up. But that all changed last week.

Seb is doing a new two-day workshop. He doesn’t call it Internet Of Things. He doesn’t call it Geocities Of Things. He calls it Stuff That Talks To The Interwebs, or STTTTI, or ST4I. He needed some guinea pigs to test his workshop material on, so Clearleft volunteered as tribute.

In short, it was great! And this time, I didn’t stop hacking when I got home.

First off, every workshop attendee gets a hand-picked box of goodies to play with and keep: an arduino mega, a wifi shield, sensors, screens, motors, lights, you name it. That’s the hardware side of things. There are also code samples and libraries that Seb has prepared in advance.

Getting ready to workshop with @Seb_ly. Unwrapping some Christmas goodies from Santa @Seb_ly.

Now, remember, I lack even the most basic knowledge of electronics, but after two days of fiddling with this stuff, it started to click.

Blinkenlights. Hello, little fella.

On the first workshop day, we all did the same exercises, connected things up, getting them to talk to the internet, that kind of thing. For the second workshop day, Seb encouraged us to think about what we might each like to build.

I was quite taken with the ability of the piezo buzzer to play rudimentary music. I started to wonder if there was a way to hook it up to The Session and have it play the latest jigs, reels, and hornpipes that have been submitted to the site in ABC notation. A little bit of googling revealed that someone had already taken a stab at writing an ABC parser for arduino. I didn’t end up using that code, but it convinced me that what I was trying to do wasn’t crazy.

So I built a machine that plays Irish traditional music from the internet.

Playing with hardware and software, making things that go beep in the night.

The hardware has a piezo buzzer, an “on” button, an “off” button, a knob for controlling the speed of the tune, and an obligatory LED.

The software has a countdown timer that polls a URL every minute or so. The URL is http://tune.adactio.com/. That in turn uses The Session’s read-only API to grab the latest tune activity and then get the ABC notation for whichever tune is at the top of that list. Then it does some cleaning up—removing some of the more advanced ABC stuff—and outputs a single line of notes to be played. I’m fudging things a bit: the device has the range of a tin whistle, and expects tunes to be in the key of D or G, but seeing as that’s at least 90% of Irish traditional music, it’s good enough.

Whenever there’s a new tune, it plays it. Or you can hit the satisfying “on” button to manually play back the latest tune (and yes, you can hit the equally satisfying “off” button to stop it). Being able to adjust the playback speed with a twiddly knob turns out to be particularly handy if you decide to learn the tune.

I added one more lo-fi modification. I rolled up a piece of paper and placed it over the piezo buzzer to amplify the sound. It works surprisingly well. It’s loud!

Rolling my own speaker cone, quite literally.

I’ll keep tinkering with it. It’s fun. I realise I’m coming to this whole hardware-hacking thing very late, but I get it now: it really does feel similar to that feeling you would get when you first figured out how to make a web page back in the days of Geocities. I’ve built something that’s completely pointless for most people, but has special meaning for me. It’s ugly, and it’s inefficient, but it works. And that’s a great feeling.

(P.S. Seb will be running his workshop again on the 3rd and 4th of February, and there will a limited amount of early-bird tickets available for one hour, between 11am and midday this Thursday. I highly recommend you grab one.)

Monday, December 15th, 2014

ST4I - Stuff That Talks To The Internet - workshop on Vimeo

Seb will be running this workshop again at the start of February—details here. I can’t recommend it highly enough—it’s so, so good!

Sunday, August 10th, 2014

Responding

Last week I had responsive-themed tour of London.

On Tuesday I went up to Chelsea to spend the day workshopping with some people at Education First. It all went rather splendidly, I’m happy to report.

It was an interesting place. First of all, there’s the office building itself. Once owned by News International, it has a nice balance between open-plan and grouped areas. Then there’s the people. Just 20% of them are native English speakers. It was really nice to be in such a diverse group.

The workshop attendees represented a good mix of skills too: UX, front-end development, and visual design were at the forefront, but project management and content writing were also represented. That made the exercises we did together very rewarding.

I was particularly happy that the workshop wasn’t just attended by developers or designers, seeing as one of the messages I was hammering home all day was that responsive web design affects everyone at every stage of a project:

Y’see, it’s my experience that the biggest challenges of responsive design (which, let’s face it, now means web design) are not technology problems. Sure, we’ve got some wicked problems when dealing with non-flexible media like bitmap images, which fight against the flexible nature of the web, but thanks to the work of some very smart and talented people, even those kinds of issues are manageable.

No, the biggest challenges, in my experience, are to do with people. Specifically, the way that people work together.

On Thursday evening, I reiterated that point at The Digital Pond event in Islington …leading at least one person in the audience to declare that they were having an existential crisis (not my intention, honest).

I also had the pleasure of hearing Sally give her take on responsive design. She was terrific at Responsive Day Out 2 and she was, of course, terrific here again. If you get the chance to see her speak, take it.

There should be videos from Digital Pond available at some point, so you’ll be able to catch up with our talks then.

Tuesday, June 17th, 2014

Girls Imagineer the Future | Curiosity Hub Event

Jacqueline Currie is running Robotics/Bioengineering/Computing workshops for girls (ages 6-16) this Saturday at the University of Brighton.

Monday, March 3rd, 2014

Brighton workshops

There are some excellent workshops coming up in Brighton soon.

Seb will be teaching a two-day course on CreativeJS Fun and Games on the 13th and 14th of March. I went on one of Seb’s workshops a while back, and it was really, really good. He really does make it fun.

Then on April 2nd, Remy will be teaching a one-day workshop called Debug, and know thy tools. It sounds like it will be an “I know kung-fu” moment for front-end dev tools. Alas, I will be out of the country at An Event Apart Seattle at that time (I say “alas”, but of course I’m really looking forward to getting back to Seattle for An Event Apart).

Anyway, if you’re in Brighton—or looking for a good reason to make a trip to Brighton—I can highly recommend these workshops.