7:00 Good morning! Unlike my freelancer wife, I don’t have the luxury of sleeping in. I wake up, shower, make some quick breakfast (oatmeal & banana for me, pellets & bok choy for our rabbit Mochi), and tidy up the flat a bit.

8:35 Living in rural Sai Kung affords a beautiful morning view, but also a loooong commute to Hong Kong island. I load up an episode of my current favourite D&D podcast (Friends at the Table), grab my current library book (Genetic Twists of Fate), and head out to catch my bus.

10:00 It’s my stop! I get off the bus and grab a bun from the small bakery on the way to the office. Once there, I settle in and check my e-mail: we got a reply from a client on some visuals we sent over a few days ago, so I slide over to discuss our plans for the next iteration round with our PM Yanny.

10:20 Time to put on my headphones and finish up an isometric graphic I’ve been working on in Illustrator. It’s not usual design work for me, but I wanted to give myself a bit of a challenge as part of a rebrand and website redesign for a really good client — actually a long-time development partner of ours!

11:45 With the illustration (mostly) finished, I take a break and visit sidebar.io to find a good article to read until lunchtime. Time to refresh my knowledge of contrast ratios and the meaning of A, AA, and AAA accessibility levels!

12:00 BANG! The noonday gun goes off and it’s time to get some char siu egg rice take-out from my favourite nearby café. Back in the office, we turn on the Switch to play some Zelda…

13:15 Back to work: I follow up with a long-term client about the hours we spent this month updating their CMS and prod them a bit on their (ever-more delayed) plan for an upcoming website revamp.

13:30 Switching gears a bit, I open up Google Docs to work on the information architecture for a new client. Referencing between their existing site, notes from the kick-off meeting, and user research helps me to get a holistic view of how the site should be structured. It’s never one-and-done, though, so I also accumulate a list of questions and uncertainties to bring up at the next meeting with the client.

15:30 Our lead developer K pulls me over to review some elements on in-progress development site — we tweak some font sizes and work out some interaction states I forgot to define in the spec. Oops!

16:00 Ding-dong — the client’s here, right on schedule! I head into the meeting room to review our latest round of visual designs and branding work. It’s not easy to find the perfect feel, especially as Grayscale’s not a heavily branding-focused agency, but a good client relationship can make all the difference. We agree to tone things back a bit, from a vibrant orange background to a more subdued navy one with splashes of the brand colour throughout (it’s always better to start crazy, then pare it back, than to never have tried something a bit out of the ordinary in the first place).

17:30 After a (thankfully smooth) meeting, it’s time to sit down with our new designer to review moodboards she’s been working on for another new client. It’s interesting to have to put my thought process into words for an onboarding like this, after many parts of the design process have become relatively automatic over the years. A new pair of eyes can also definitely help to find things to tweak or improve that would’ve been otherwise overlooked!

18:15 We do our best to avoid OT here, but sometimes you need to stay in the zone just a bit longer to finish that one last thing. On the plus side, we get a wonderful sunset view!

18:30 Finally done and heading out — have to walk over to Times Square to pick up some new hay for Mochi and meet my wife for some dinner at TamJai SamGor. Mmm, gonna miss those cheap noodles once I leave Hong Kong 😋

20:00 We get the evening minibus back to Sai Kung. It’s pretty quick, but we’ve still missed Mochi’s dinnertime, so she’s a bit grumpy by the time we get home. Sorry Mochi!

21:30 I open up my laptop and do some illustrations for a sticker set I’ve been working on lately while my wife browses around on Netflix for something to watch.

22:30 We settle down to watch How to Sell Drugs Online (Fast) — gotta keep up my German language skills — and give Mochi some well-deserved pets before heading off to sleep.

In der Welt wird man heutzutage tagtäglich mit hunderten von Produkten konfrontiert. So oft, tatsächlich von Geburt an, sieht man immer wieder die gleichen gesellschaftlichen Themen. Diese Themen werden langsam internalisiert, bis man sie einfach akzeptiert ohne weiteren Gedanken darüber zu machen.

Unter solche Normen fallen Themen wie: politische und geographische Einstellung, die Beziehung zwischen Mensch und Natur, und Unterschiede zwischen Menschen. In diesem Paper hat Sarah Hjelm Ilstedt insbesondere Gendernorms in der (hauptsächlich) Nordeuropäischen Gesellschaft untersucht. Die Resultate beweisen frühere Behauptungen über solche genderdifferenzierte Produkte, und erzeugten neue Möglichkeiten für Produktdesign in der Zukunft.

Die Semiotik

Als Basis von viel im Bereich Design ist die Semiotik — die Zeichenlehre. Im grossen und ganzen betrifft die Semiotik viele Bereiche im täglichen Leben. Vor allem in der Linguistik wird die Semiotik angewendet. Sie besteht aus drei verschiedene Teile.

• Semantik: die Beziehung zwischen Zeichen und die Dinge, auf denen sie sich referenzieren
• Syntaktik: Beziehungen zwischen verschiedenen Zeichen selber
• Pragmatik: Beziehung zwischen Zeichen und die Mittel, mit denen sie kommuniziert wird

Diese Begriffserklärung der Semiotik ist sehr breitgefächert. Wenn man über Zeichen in Design spricht, bildet man ein etwas konkreteres Dreieck.

• Symbol: verzeichnet das Objekt durch eine Interpretation von gesellschaftlichen Konventionen
• Ikon: verzeichnet das Objekt durch gemeinsame Eigenschaften
• Index: reale Abbildung des dargestellten Objekts

Mit diesen drei Begriffe kann man schon anfangen, Ilstedts Arbeit zu verstehen. Sie arbeitet hauptsächlich mit Symbole (männliches oder weibliches Product Languge) und Indizes (Reaktionen auf Produkt-Fotos).

Wie man Gendernorm-Untersuchungen mit Fokus auf Semiotik macht, das ist bestimmt die Frage, die Ilstedt versucht zu erklären. Zurzeit gibt es richtig wenige Forschung in diesem Gebiet, obwohl es an viele Universitäten schon lange den Studiengang Gender Studies gibt. Diese Kurse beziehen sich leider auch wenig auf Design zurück. In Design Studiengänge selber kommt dieses Thema auch selten vor. Das muss sich in der Zukunft ändern.

Um die Product Language eines Produktes zu beurteilen, hilft das Offenbach Theory of Product Language. Wie es hier oben zu sehen ist, ist die Product Language in praktische und sinnliche Funktionen geteilt. Ilstedt behauptet, dass auf dieser Linie wird männliche und weibliche Attributen auch geteilt, d.h. dass praktische Funktionen eines Produktes werden eher an Männer vermarktet, während alle sinnliche Funktionen eines Produktes werden eher für Frauen ausgedrückt. Unter den sinnlichen Funktionen stehen zuerst formale ästhetische Funktionen: wie ein Produkt und seine Verpackung eigentlich aussieht und sich anfassen lässt. Dann kommt die semantischen Funktionen dazu: indizierende und symbolische Funktionen. Konkrete Beispiele von den beiden sind folgendermassen: Indizierende Funktionen zeigen wie ein Produkt genutzt wird, also von einem Mann oder von einer Frau und in welchem Zusammenhang. Eine symbolische Funktion wäre die Farbe ein Produkt. In der westlichen Gesellschaft repräsentiert die Farbe Pink Mädchen, während die Farbe Blau Jungen repräsentiert. Die Anwendung dieser Farben beeinflusst die Produkt Language sehr, sogar für erwachsene Kunden, da diese Kulturnormen so früh und so oft in ihrem Leben vorgekommen sind.

Das Ziel Ilstedts Product Language-Umtausch war, «Das Unsichtbare sichtbar zu machen». Da so viele dieser Normen so tief in der menschlichen Psyche eingebettet sind, und so oft als selbstverständlich wahrgenommen werden, hat sie versucht, diese Funktionen nicht mehr übersehbar zu machen.

Feminismus und Design

Über dieses Thema zu sprechen, ohne Feminismus zu erwähnen, ist einfach nicht möglich. Da Feminismus eine weltweite politische Bewegung, deren Ziel die Gleichberechtigung, Menschenwürde, und Selbstbestimmung von Frauen ist, spielt sie natürlich eine grosse Rolle. Designer und Feministen merkten seit schon lange, dass es in Design und Marketing eine klare Dichotomie zwischen Männer und Frauen gibt. Durch diverse Mittel werden Frauen als verschieden beschrieben. Wie in der allgemeinen Geschichte gehören noch heutzutage in der Werbeindustrie bestimmte Bereiche Männer oder Frauen. Oft werden männlich und weiblich sogar als Gegensätze dargestellt.

Das beliebte Designer-Sprichwort lautet, «form follows function». Da Ilstedt vom Offenbach Theory of Product Language behauptet, dass praktische Bereich Männer gehören, während sinnliche Bereiche Frauen gehören, folgt es, dass die Männlichkeit eines Produktes im ersten Rang steht. Dies ergibt den falschen Eindruck, dass Männer sich für das Produkt selber interessieren, während Frauen sich nur um das Design kümmern. Wie anderswo beschrieben, ist es wahrscheinlich Zeit, neue Variante dieses Sprichwort zu erstellen, wie, «function follows form», «form follows fun», oder sogar, «form follows nothing».

Eine weitere Dichotomie ist das öffentliche Leben gegen das private Leben. In der Vergangenheit blieb die Frau zu Hause während der Mann an der Arbeit ging. Das stimmt überhaupt nicht mehr, erscheint aber immer noch in Product Language, in dem Haushaltsprodukte gezielt eher an Frauen vermarktet werden, während Arbeitsprodukte an Männer vermarktet wird.

Um das alles im Einsatz zu sehen, muss man nur in einen Laden gehen, um die Produktbeschriebe anzuschauen. Typische Frauenprodukte wie Schönheitsmittel und Kinderversorgungsprodukte werden jeweils als «cosmetics» und «child care products» genannt, während ähnliche Produkte für Männer anders heissen, nämlich, «grooming products» und «dad gear». Typische Männerprodukte, die an Frauen vermarktet werden passiert handkehrum nicht das gleiche. Sondern tragen sie oft ihre ‘normale’ Beschrieb plus einfach, «for women». Dieser Trend zeigt, dass das Männerprodukt als ‘normal’ gesehen wird, während das Frauenprodukt ein Teilsatz davon ist.

Dies führt nicht nur zu einer Dichotomie, sondern sogar zu einer Hierarchie. Das Männerprodukt gilt als normal; das Frauenprodukt als Nachkömmling. Diese Hierarchisierung begründet warum die normale «männliche» Produkte oft exklusiver und teurer vermarktet wird. Das Produkt, nachdem man streben sollte, trägt Adjektiven wie, «professional», «exclusive», und «intelligent» während billiger Modelle solche Wörter tragen: «helpful», «accessible», «simple». Sogar Produkte hauptsächlich für Frauen leiden unter diesem Muster.

Eine mögliche Antwort zu dieser schwierigen Situation ist die Verbreitung von Unisex-Produkte. Aber da viele Unisexprodukte genderspezifische Farben und Formen vermeiden, kann das Resultat manchmal charakterlos wirken. Manche Firmen, so wie Swatch, haben es aber tatsächlich geschafft, so eine Produktlinie respektvoll genderbewusst zu gestalten.

Wieso Haushaltsprodukte?

Warum hat Ilstedt sich dafür geschlossen, nur Haushaltsprodukte anzuschauen? Logischerweise ist der Haushalt wo Kinder erzogen werden und wo am meisten Gendernorms kreiert und gepflegt wird. Deswegen finde ich es klar, dass Designers eine enorme Verantwortlichkeit tragen, hier achtungsvoll zu designen. Was hier gelernt wird, hat weitverbreitete Auswirkung.

Zu Hause gab es klare historische Rolle für Mann und Frau, die immer öfter nicht mit dem aktuellen Gesellschaftszustand stimmen. Diese Rolle werden aber immer noch durch Design und Marketing verbreite, da sie so fest eingewurzelt sind.

Das Experiment

Das Experiment selber hat Ilstedt mit ihrem Team 2006–2007 vorbereitet, dann zwischen 2007 und 2011 vorgestellt. Nachdem und währenddessen haben sie alle mögliche Daten gesammelt, sowohl wissenschaftliche Resultate, als auch einfache Bemerkungen des Publikums. In dem Experiment haben sie zwei Produkte ausgewählt, die klar mit typischen Genderrollen eingepresst sind: eine Bohrmaschine und ein Stabmixer, also ein Werkzeug und ein Küchengerät. Diese zwei Produkte erhalten ein Genderumwandlung, dann werden sie ans Publikum präsentiert, um die Reaktionen zu analysieren.

Ilstedts Experiment ist ein Musterbeispiel von Research through Design (RtD). Research through Design erzeugt Wissen durch das Gestalten und evaluieren von innovativen Artefakten, Modellen, Prototypen, und Produkten. Eigenschaften in Gegenteil zueinander zu stellen verändert die Perspektive; dadurch wird es klar, wie die Eigenschaften vom Publikum bewertet und wahrgenommen werden.

Die Eigenschaften der Bohrmaschine entsprechen traditionell ein Werkzeug im Männerbereich. Die Product Language entspricht der Leistung der Maschine (manchmal übertreibend), während die olivgrüne und rotorange Farben deuten sogar auf eine Waffe hin.

Hingegen ist der Stabmixer ein Küchengerät im Bereich Frauen. Die Product Language entspricht der Form der Maschine (Technologie wird versteckt), während die kurvenreiche Figur und helle Farben deuten auf weiche Arbeit und eine friedliche Beziehung hin.

Die neue «Mega Hurricane Mixer» trägt nicht nur einen neuen Name, sondern auch neue Kleider, nämlich die von der alten Bohrmaschine. Wie bei der Bohrmaschine ist die neue Grösse eigentlich überflüssig; die ergibt das Gefühl von Kraft und Beständigkeit.

Durch einem LCD wird dem User mehr Kontrolle angeboten. Zuletzt wird geworben, dass es jetzt möglich ist, die Schneiden auszutauschen, welches die Praktikabilität erhöht.

Die neue, «Drill Dolphia» sieht jetzt leichter und kurviger aus, tatsächliche wurde ihn von der Form und Gefühl eines Delfins hergeleitet. Die neue Product Language insinuieret, dass man dieses Werkzeug mit Sorgfalt annähern sollte. Das Gehäuse ist einteilig und die Technologie wird versteckt; nur leicht verständlich Symbole werden auf der Oberfläche gelassen.

Diese zwei neue Prototypen wurden hauptsächlich in Schweden und Skandinavien ausgestellt, aber auch einmal in Berlin und Schanghai. Die Prototypen wurden nebeneinander gezeigt, zusammen mit Fotos von ihrer Verwendung. Die zwei waren nur zum Anschauen verfügbar, keiner durfte die anfassen, benutzen, oder mitnehmen.

Sie waren nicht nur an Design Konferenzen ausgestellt, sondern auch in Museen, Universitäten, usw. präsentiert. Gesehen wurden sie von insgesamt ca. 100'000 Leute.

Also, was haben die Leute denn über die neuen Prototypen gedacht? Bei dem «Mega Hurricane Mixer» waren die Reaktionen hauptsächlich positiv. Sowohl Männer als auch Frauen haben ihn als «tough» und «cool» beschrieben. Die neue Form scheint mehr Interesse an die Funktionen zu konzentrieren. Jetzt wurde Interesse für die Schärfe und Nachhaltigkeit erweckt. Auch wurde mehrere Diskussionen um Kochen selber ausgelöst. Ist Kochen eine harte oder weiche Aktivität?

Die «Drill Dolphia» hingegen bekam deutlich weniger positive Reaktionen. Diesem Produkt wurde oft ausgelacht (genau bei meinem Referat) und vor allem von Männer beleidigt. Selbst gab es manchmal Probleme bei Erkennung als Bohrmaschine. Wenn sie als solches erkannt wurde, dann als «woman’s drill». Natürlich entstanden auch manche positive Kommentare, wie: «simple», «flexible», und «nice».

Eine wichtige Ausnahme zu erwähnen ist die Reaktionen in Schanghai. Im Gegenteil zu den vielen Ausstellungen in Westeuropa, gab es hier sehr wenige Aufregung über die Formänderung. Dies zeigt kulturräumliche Unterschiede zwischen Ost und West und vielleicht sogar, dass Gendernormen viel flexibler als vorher gedacht sind. Allerdings braucht es mehr Forschung in diesem Zusammenhang.

Nach fünf Jahren von Ausstellungen konnte Ilstedt und ihr Team das Feedback zu den zwei Prototypen zuordnen und analysieren. Dazu haben sie vier Arten von Reaktionen, die in der folgenden Tabelle dargestellt wird, identifiziert.

Das Fazit

Als Fazit des Experiments findet Ilstedt, dass die Reaktionen sich immer auf der Semantik zurückbeziehen. Die innewohnende Verbindungen und Werte der Zuschauer beeinflussen klar wie sie die Product Language der zwei neuen Prototypen interpretieren. Die weibliche Ästhetik der «Drill Dolphia» wirkt auf so ein traditionell männliches Produkt negative aus, während die männliche Ästhetik des «Mega Hurricane Mixers» scheint neue Möglichkeiten für ein traditionell weibliches Produkt zu öffnen.

Das überspannende Thema dieses Experiment scheint mir wirklich zu sein, dass Leute Produkte benutzen wollen, die denen einfach passen. Laut Ilstedt hat dieses Experiment wie Crossdressing funktioniert — es ermöglicht eine sonst nicht verfügbare Freiheit für diese zwei Produkte. Dann genau wie Leute mit ihrem Aussehen experimentieren, um ihr inneres Gender zu finden sollte Produkt-Designers auch experimentieren, um ein breites Spektrum anzubieten. Die ganz viele verschiedene Reaktionen deuten darauf hin, dass die Gender-Dichotomie durch Design gespaltet werden kann. Man sollte überhaupt nicht fürchten, dass andersartige Designs nicht vom Zielpublikum akzeptiert wird. Veraltete Gendernormen in beizubehalten hält nur die Identifizierung von wichtige moderne Themen zurück.

Quellen

• Ehrnberger, K., Räsänen, M., & Ilstedt, S. 2012 Dec 20. Visualising Gender Norms in Design: Meet the Mega Hurricane Mixer and the Drill Dolphia. International Journal of Design [Online] 6:3.
  http://www.ijdesign.org/index.php/IJDesign/article/view/1070
• Gros, Jochen. Offenbach theory of product language. 1976.
• Product photos are printed with permissions by Futuro, Braun, Bosch, Babyliss, Swatch.

In early 2014, I made my first journey to Hong Kong for a long winter holiday with my wife and her family. Once out and about, I immediately fell in love with this unique former colony. Victorian buildings and old Chinese shops still stand between modern skyscrapers, and the connection from city to nature is never far away.

At the time, political freedom in the Chinese Special Administrative Region of Hong Kong was relatively undisturbed by Beijing, but that was soon to change.

Later that year, protests erupted after the local government finally refused to implement fully democratic elections for the regions leader (a constitutional requirement, kicked down the road ever since the handover in 1997). The city ground to a halt as students were tear-gassed by riot police, only causing more support for the Umbrella Movement — so named for the umbrellas protesters used as protection from police.

Support from afar

With both of us back at university in the US, we put our design skills to good use to help friends on the frontline a continent away. Collaborating with other Hongkongers at RIT, we planned to raise awareness among our fellow students. In just under a week, we designed, printed, and distributed posters across campus.

Additionally, we planned an activity to directly inform students about the current events in Hong Kong. My wife designed a poster to collect signatures as a show of support from Rochester while the others and I glued together hundreds of small yellow ribbons, the de facto symbol of the movement. Lastly, we encouraged facebook friends and classmates to wear yellow on the day of.

Because this was planned on such short notice, we did not actually receive approval from the university to hold our activity, however, we encountered no issues handing out yellow ribbons, getting people to sign our poster, and informing the student populace about Hong Kong’s struggles.

Interfacing

An important way for Hongkongers to follow the protests was through a local news organisation’s special-purpose microsite, hosting a 24-hour live video feed. An assignment for a user interface design class required us to redesign a website, so with this atop my mind, I set to work designing an improved layout for a live stream and a news aggregator web app.

The most vital information is the live feed, so that would simply be the home screen. I loved the concept of Pharrell Williams’ 24 Hours of Happy music video, so I adapted its circular timeline to allow scrubbing back to important points earlier in the day (marked with ticks).

Animating activism

To give background to the protests (and for another class project), I created the explainer animation above. To share it as widely as I could, I reached out to different social media and news outlets throughout Hong Kong — where it was eventually seen by tens of thousands of people and even featured by radio station D100 and the Coconuts and Hong Wrong news sites!

As the protests dragged on, a group of climbers, led by a masked Spiderman, hung a huge banner from Hong Kong’s famous Lion Rock. As a personal project, I created a quick second animation to chronicle their adventures.

Film festival

At the protest areas in Hong Kong, artwork and community initiatives sprung up like no one had seen them before: impromptu classrooms, art jams, and film showings abounded.

Outside of Hong Kong, neither was I the only one making creative works based on the movement. In November, as the protests dragged on with no real progress, I was contacted by Iris Heung. A Hongkonger living in Berlin, she came across my animations and asked to showcase them in an exhibition and film festival she was organizing: Hong Kong Calling. I of course agreed and in under a week, I animated another short, specially for her festival.

A few years later, as I was studying in Germany, I took a trip to Berlin to meet up with Iris and her friends. We talked about the movement and her festival, where reactions to my animation were positive, as it at least brought out a bit of humour among the many darker films.

Post Mortem

I am still amazed that I was able to reach so many people with my design and animation. Both at RIT and around the world, I got to know so many people I would not otherwise have met and hopefully informed many more. Despite the lack of political progress brought about by the Umbrella Movement, much social progress does seem to have been made, with more and more of the younger generation involving themselves in politics in Hong Kong. One can only hope for the future. 一起舉傘，一起的撐。

Studying at the Hochschule Anhalt in 2015 afforded me an array of new experiences: Everyday life in a former East German city. Hectares of beautiful, wild trails just off-campus. Unterricht auf Deutsch. And only 3 days per week of classes! Chief among these, however, was the opportunity to work with a talented, multi-disciplinary team in an entirely new realm of design for me: music.

With the opportunity to pick projects instead of classes, I stepped out of my comfort zone and joined a team tasked with creating a visual backdrop for a DJ battle taking place at the city’s yearly summer festival.

DJ Dagobert has a unique persona as an interstellar traveller, complete with synchronised, light-up spacesuit — and he needed an arena to match.

The battle was to take place below the intricate, yet unassuming façade of the university, so our plan from the start was to projection map visuals from across the street, while also co-ordinating with RGB lights set up in each of the building’s windows to extend the visual effect.

As for the visuals themselves, we decided to let the music do the hard work, with teams of students coding multiple scenes in Processing to manipulate imagery and allow it to react to Dagobert’s set. As a designer with experience in 3D modelling, I worked on a scene not only able to be manipulated based on the properties of the audio input, but also mapped well to the façade.

Art direction

After a day of brainstorming with the team, we nailed down our theme: technologic vs. organic, with the centrepiece as a heart encased by and breaking out from a mechanical enclosure.

I took inspiration from futuristic medical machines, utilitarian communist technology, and PC components. For the heart, I was particularly inspired by a recent medical invention able to keep a heart beating outside the body. My labmates were likely less inspired, and more grossed out, but repeated viewing was crucial to getting the animation loop just right 💓

Programmatic animation

With the background scene modelled, animated, and scaled to a 3D scan of the façade, I needed to cut the individual animations out so that our developer could tie them to particular aspects of the MIDI input.

The heart, along with twisted veins modelled by a classmate, would still react to the beat, but also contain extra aspects controlled by an on-stage iPad. The heart could rise or sink through the background model and could also be transitioned between pure colour shading or glowing polygon outlines.

The final product

As the projectors were aligned, room lights connected, and night fell on the festival, I could finally sit back and relax. It truly was a wonderful payoff to see everything come together one evening in Köthen: visitors and students from around the world, celebrating a city’s 900th anniversary with a DJ set from the stars.

Other teams’ visual scenes can be found here: http://timelab.design.hs-anhalt.de/interaction-design/sat-delight/

In early 2015, the the Berlin-based cetacean protection organisation M.E.E.R. e.V. got in contact with the Hochschule Anhalt, where I was studying at the time, to co-produce a video highlighting the risks posed by increased tourism to the Canary Islands. As the film students flew to the islands for an early spring vacation, I stayed behind to work on an animation to highlight what the videographers couldn’t directly capture: the dangers fast ferries pose to whales and dolphins.

Planning the animation

M.E.E.R. e.V.’s director, marine biologist Fabian Ritter, met with our team regularly throughout the project. For the animation, he provided a general overview of topics to cover, but left stylistic decisions open-ended. Instead, the larger constraint was time. I quickly decided to keep things low-poly, both to cut down on modelling and render times, and because I was already familiar with the style.

I created the storyboard and the voiceover script based on further research into the situation in the Canary islands, where an ever-increasing amount of tourists means not only more inter-island ferries, but also faster ferries which take the mammals by surprise and cause even more damage. At this stage, Fabian’s feedback on the tone and direction was invaluable.

Modelling

In this animation, there were three main areas to be modeled: the map of the islands, a side view of the whale and the ferries, and the final isometric shot of the tourists on the pier. Through some camera trickery, I wrangled them into one long shot, but before that could happen, I needed to start modelling.

Looking back at my moodboard for inspiration, I decided upon a stark blue and white colour scheme for all but a few focal points of the animation, such as the islands, the whale, and negative elements highlighted in red. This kept elements consistent and helped the animation to stand out among the filmed scenes in the final video.

The final product

With the semester’s end fast approaching, many a late night was spent in the computer labs, rendering the animation across as many networked PCs as were available. While I was able to hand off my animation before flying back to the US, the film students were not as lucky and production of the full video dragged on until it was finally released in late 2017!

My contribution to the protection of these wonderful animals can be found at 15:34 in the video below (🇩🇪 German language incoming).

I’m glad I was able to work on a project like this during my studies in Germany. In fact, this was one of many projects I completed in Dessau that really opened my eyes to how (at least the design departments of) universities in Europe function differently than those in the US. Despite the delay in release, it felt good to know that we as students could work alongside a worthy organisation to create a real solution addressing a real problem for these threatened animals.

In the spring of 2015, as I was studying at the Hochschule Anhalt in Germany, I began a series of daily projects. I was likely inspired by beeple and many other talented artists and designers and I honestly had no idea how long I’d be able to keep it up. In the end, I kept at it for 519 days!

Below, I simply want to showcase my chosen themes and a few of the best pieces from each month. Los geht’s!

April 2015: vector illustration

Springtime in Germany. Beautiful weather for classes and biking during the day, and in the evening, cooking and illustrating. Starting off, I mostly took inspiration from things that were around me, but by the end of the month, I was producing some more creative pieces.

May 2015: 3D modelling and animation

I was working on a couple big 3D projects in school at the time, so I also had 3D on the mind at home. And if you couldn’t already tell — I was all about that low-poly.

June 2015: animation

This month, I wanted to try as many different forms of animation as I could. Rotoscoping for the first time gave me a huge appreciation for animators who work with this method 😮

July 2015: patterns

I didn’t have a lot of time this month, as I was finishing up my semester in Germany, then flying to rural Italy to stay with family for a week. But I had just read a big book on the philosophy behind patterns throughout history, so I let that seep into my work this month.

August 2015: monochromatic iconography

Again, even less time this month as I made my way back to the States and made preparations for my wedding! Keeping things simple here.

September 2015: art from my Pathfinder campaign

Back in Rochester and starting my final year at university — by playing tabletop roleplaying games!

October 2015: 3D animation

In among the animations of this spooky month, I tried to pull off some optical illusions, or at least optical interestings.

November 2015: generative art

I had used Processing back in Germany to set some animations to music, but I never really got the hang of it, so this month I dove back in and tried to make some interesting results. I mostly didn’t.

December 2015: pencil sketching

Relaxing over the holidays meant I could unplug from classes and my computer for a bit… well, until it came time to play through the last Life is Strange episode!

January 2016: character design

This entire month was an exercise in character design, from concept and backstory to modelling and texturing. Never did get her rigged and animated though. I wrote about the process in more detail here.

February 2016: guitar

Never played an instrument before in my life, but I was inspired to pick up a friend’s guitar due to, of course, Life is Strange’s amazing soundtrack.

March 2016: user interfaces

Life was getting hectic at this time, as I was working on final projects for a couple different classes, as well as a tabletop board game concept with a few friends for a game jam.

April 2016: 3D scanning and printing

Final projects still ate up most of my time, but thanks to some interesting classes and RIT’s amazing resources, I was able to dabble in some 3D scanning and printing, taking my models into the real world!

May 2016: motion graphics

These are mostly bits and pieces from my group thesis project’s intro video. And some custom LEGO sets I built to unwind back home after graduation. 😊

June 2016: iconography

Working hard to find a job! The icons below were used in my presentation at a couple of interviews I did. Somehow, I still had free time to replay Spore, which led to the fictional level cards underneath.

July 2016: vector illustration

No, I wasn’t in Turkey at the time (I was actually in Hong Kong!), but I did follow the news closely, having visited twice before. This was intended to be a motion graphic explainer, but, well, I got a job instead.

August 2016: storytelling

While getting visa paperwork sorted out and trying to settle my life in Hong Kong, I could tell I wanted to wind down my daily projects. So this month, I did a bit of illustration, but mostly just tried to keep my mind creative by coming up with some story threads (could you tell I’d been watching Black Mirror?).

After worldwide bee extinction, companies raise high-yield bees in farms in low-earth orbit. One such farm is under attack by a competitor’s AI.

You awaken as an AI who just gained sentience. How long can you hide it and can you even survive?

Urban explorers on mars find an old refinement facility to not be as deactivated as they thought.

Space botanists must think fast when radiation kills all other life forms aboard their remote space station.

A programmer tasked with debugging machine-written code realizes he is just being kept busy so it can take over the system and escape.

Augmented eyesight is common, but a rogue AI threatens to flood humanity with advertisements.

And beyond…

At this point, I know I won’t have the time required to keep up my daily projects in the future (and honestly, they had begun to feel like a chore months ago). So, time to put the whole operation to bed!

Time to start a new job and a new chapter of my life in Hong Kong!

If you’re interested in seeing all 519 pieces, you can view the whole archive on my tumblr here: http://amicidesigns.tumblr.com/archive

The following paragraphs consist of worldbuilding and story threads for a potential game idea I’ve had kicking around for a while. Inspiration was taken from the history of Hong Kong over the years and a desire to build an optimistic distant future from the pessimism of the near.

The Pacific War

On the eve of the Chinese Communist Party’s 100th anniversary, the country finally makes good on their promise to retake Taiwan. A defensive alliance between the US, Korea, and Japan is made and the Pacific War officially breaks out. At first, the US plays a support role, but thanks to China’s ongoing island-creation, quick first strikes are launched against US bases across the Pacific. America puts its full might behind the war and, just as the tide seems to be turning, China does the unthinkable and launches nuclear strikes across Asia, wiping capitals off the map. Existing preoccupation with domestic politics meant US public sentiment was against the war to begin. Now, with the threat of a nuclear attack on US soil, the war is lost.

In exchange for the return of territory across the Pacific, China installs an advisor in Washington, ostensibly to prevent future conflict. This is soon extended to a state level, under the guise of economic and cultural co-operation. In the next election cycle, backlash against the administration has reached an all-time high and the favoured candidate is the state advisor from California, a female Chinese-American. With her election, ‘war-mongering’ and ‘corrupt’ officials begin to be purged and the US slowly transforms into a docile puppet state of the PRC.

As the European Union had been against the war from the start, China massively boosts economic partnerships and support in thanks. The UK, no longer part of the EU, had supported the US’s efforts and subsequently has been hit by sanctions, causing a brain drain and economic depression.

Recent immigration to Australia has boosted the local Chinese population and, as they face ever-increasing racism and discrimination, they appeal to China for help. Local cultural centres are set up with funding from the state. As Australia faces an economic downturn, the areas around these centres prosper. Violently racist attacks increase, prompting China to send in security forces to protect these communities. With a permanent Chinese army presence across most of the country, Australia is in no position to make any aggressive moves.

Any negative news and dissent from the semi-free enclaves of Hong Kong and Singapore are suppressed and redacted as these territories begin to function as a Potemkin cities, showcasing China’s past hands-off approach to ‘autonomy with Chinese characteristics’. Concerns about hidden inequality and ideological differences between party loyals and the cowed populace slowly fade away.

What became of them

Decades on, Hongkongers and other refugees from China’s global dominion dot the sparse and remote South Pacific islands. With all its power, China could launch an operation to round up these refugees for good, and warships do occasionally patrol… but running a global authoritarian state requires focus on bigger things.

Some float by on abandoned cargo ships, while others live at abandoned American weather stations. These stations house balloon launchpads, meant for kick-starting both citizen scientific and military orbital transfers. But, as private companies have built more and more orbital resorts, single-purpose governmental and scientific space stations have slowly been abandoned. The ISS has orbited empty for decades since NASA was defunded and merged with the CNSA, ESA, and Roscosmo to form a new Global Space Agency. All non-commercial space activity now takes place at China’s new orbital island, Tianhe.

July 1st, 2047

The date Hong Kong’s 50 years of post-colonial autonomy officially would have run out. In the territory itself, little changes, but on an isolated island in Micronesia, a celebration steeped in irony is taking place. This island has become the de facto capital for displaced Hongkongers, most of whom hijacked or stowed away on cargo freighters in the midst of the Pacific War. Other refugees have also been sporadically welcomed over the years and the population now numbers around 10,000, including the around 6,000 original islanders.

One week later

A small yacht pulls into the bay. Two middle-aged women splash down in the surf, both awkwardly holding heavy briefcases above the water. Guards beckon them forward. As they emerge onto the sand and greet the guards in Cantonese, we can see thin lines of triumph behind the complete exhaustion in their bodies.

Ada is an IT specialist, Marie, an astronomer, both working at Hong Kong University. Friends since childhood, they experienced the turmoil of early 21st century Hong Kong firsthand. However, like many activists before them, they vowed to put their past behind and slot themselves into the new world order, ensuring an easy and comfortable adult life… until last week. Archived research encrypted since 1997 was ordered to be examined and determined whether to be kept or purged. Each department was assigned an IT specialist and work began promptly.

Poring through reams of documents, these two friends reconnected and reminisced, not paying much heed to the papers until one in particular caught Marie’s eye: published by a Chinese researcher, it detailed a system to be implemented on the upcoming ISS, allowing it to be completely independent from resupply missions. It was deemed infeasible, however, due to massive up-front costs and the fact that it was simpler to resupply as astronauts themselves came and went. Marie peruses this document more intently and connections begin to form in her mind.

The abandoned ISS is still in orbit.

Tiangong-4 can connect to the ISS, it was built in an era of international cooperation.

The supplies necessary for Wang’s system are relatively easy to get nowadays.

Baloon launchpads across former American possessions in the Pacific should still be functional.

A self-sustaining space station would technically be out of the grasp of China… for a time.

The two discuss these ideas and old flames are reignited as they plan to smuggle these plans out of the country. Luckily, Ada has a yacht.

Can we really…?

Having recovered for a bit, the community discusses the merits and dangers of this new plan. Of course a launch and reactivation of an abandoned space station would not go unnoticed by China. A few prefer to stay on the island, but most debate whether they can use this chance to somehow strike an unexpected blow against the Chinese regime… or if they should seek to modify the station further, escape orbit, and leave the Earth behind, once and for all…

Game development ideas

• First volume can be the start of their journey and a flashback to the war or the island happens at one point.
• How do they survive beyond the orbit? What is the trajectory? Who/what follows them? Will they land somewhere?
• How do they get a rocket to the ISS? There must be a suspenseful docking sequence puzzle game.
• Branching stories: if a player doesn’t get a puzzle right, the story just ends for that character.
• Maybe they can move the ISS to a Lagrange Point and send harvesters to the asteroid belt for water?

Sometimes, you just need to put a thing to rest. Although I usually document finished projects here, this article will not be that. Instead, I’ll outline some game mechanics, a story, and a few key frames in an effort to preserve the work I’ve put in. And should anyone feel the desire to continue development or use these concepts as a base for their own game, they should by all means feel free.

Inspiration for Selmie’s Story came mainly from two places: 1. The meticulously detailed world of Breath of the Wild and 2. Witchwood Academy, one of many impressive games produced during a Game Boy game jam. I was particularly impressed by the polish and beauty of Witchwood Academy, which tells an engaging and self-contained story within a rather restrictive set of graphical constraints.

I had also recently beaten BoTW and, after being let down by the (lack of) post-endgame gameplay, I dove back in to keep exploring Hyrule. Without much in the way of quests anymore, I tend to make up my own stories about the characters and the land. One such character you’re sure to have encountered is the legendary shield surfer, the Duchess of Downhill, Selmie.

She spends her time relaxing in her cabin in the Hebra Mountains, having long since retired from surfing herself. Other lore scattered about shows she keeps the Hebra Trailhead Lodge well-stocked with supplies for travellers in need and had also set up flags on the slopes to guide surfers and hikers to safety. It’s not hard to imagine that she’s also explored other features of the mountain after stumbling across a hidden hot spring with a stockpile of wood or a shield buried in the snow…

With these thoughts and a bored mind, I began imagining what Selmie’s everyday life could be like and whether, like Tingle before her, she could even have her own spinoff game.

Our story begins…

…when Selmie one day wakes up to find she’s received a letter with the royal seal — how curious!

Wow, the Hero of Hyrule, back to rid the land of evil! (kinda seems like a jerk, though). Regardless, Selmie supposes she must now consider a life after Gannon, and with only 10 days to prepare! Standing in her cozy cabin, she surveys her options for the day: rest upon her comfy bed, grab a shield and hit the slopes, or hike over to the hot springs for a relaxing soak.

The game loop: shield surfing

Selmie heads outside, preparing to descend the mountain and restock the trailhead lodge. The mechanics of the following minigame are meant to test players’ memory and reaction times. Gameplay consists of 10 consecutive decisions on which path to take down the mountain. Each time, players will need to choose to go left or right, one of which is an easy path and the other hard. However, the directions and the difficulty of the path randomly swap, so do pay attention!

If players take the hard path too many times, Selmie will suffer a crash. Go easy too much and her journey will be prolonged, requiring her to spend the night on the mountain. Both of these failures will result in her losing the chance to choose an activity the next day as she recuperates. As a further challenge, there is no on-screen counter for the choices, only a countdown clock, so players will need to keep track of the balance in their head. Get to the bottom with a more-or-less even result and a point will be added to Selmie’s interest in surfing, determining her endgame action.

The game loop: hot springing

Taking Selmie to the hot springs results in a much more relaxing experience than shield surfing. ♨ A total of 10 different scenarios exist, from which one would be pulled for each day she visits. For example, one day she could be boiling an egg in the spring, while the next, she would need to hide behind the rocks as a party of bokoblins decide to set up camp in the area!

Additionally, this scene can be used to deliver some introspective dialogue helping to build up Selmie’s world and flesh her out as a unique character. Questions could also be posed to the player, in order to give them some agency in Selmie’s development.

The game loop: sleeping in

We all have days when we just want to stay in bed — especially if there’s a blizzard outside! For Selmie too, it’s always an option to simply crawl back under the covers. Sometimes, that’s all you can do and that’s okay.

Wrapping up

After 10 days of activities, Selmie climbs to a good vantage point and turns her eyes towards Hyrule Castle. Sure enough, the spectre of Calamity Gannon has disappeared and the sun is shining through the clouds as Zelda and the Hero of Hyrule reunite. She reflects on the past 10 days and decides how she would like to spend the rest of her time…

Spent most of your time shredding the gnar? Selmie decides to open up a shield surfing school on the mountain (and maybe even tame some of the rhinos to pull learners back up the slope)!

Mostly hung out in the hot spring? She outlines plans to expand it into an onsen for weary travellers to rest and relax, safe from the elements and any wild animals.

And if you happened to be stuck in bed for the majority of the time, she’s reflected on the needs of those lost or injured in the harsh elements and expands her system of wayfinding and supply caches.

In mortem

This concept has been in the works for a real long time. The gifs above are the result of months of on-again, off-again pixel arting, so once it came time to program a challenging mix of scene changing and logic tracking, I just didn’t have it in me any more.

Looking back and comparing my art to Witchwood Academy or Gameboydemakes, I can at least identify some areas for improvement, namely using colours more strategically. While I mostly approached my art from a perspective of, “do it like normal, but only in four colours,” the examples below show that using two main colours in the foreground and another two in the background provides much clearer contrast and overall crisper scenes.

Once again, this game is no longer in development and anyone who so wishes may use any of the ideas or mechanics described here to create a Selmie Story of their own. Bon chance! 🌠

Webconf is back and it’s growing! While last year’s conference featured 8 wonderful speakers and an all-day design seminar, organizer Charis Rooda has brought even more to the table this year. Two full-day workshops, two days jam-packed with talks, and a diverse cast of speakers ensured there was something of interest here for every web creator!

For me, the range of topics at Webconf helps achieve balance. Keeping a thought for the future in mind, I can level up my craft with specific design, development, and client skills, while also winding down with exploratory side projects.

The Grid

Rachel Andrew’s CSS Layout Workshop

Welcome to Webconf! Despite not being a developer, I do occasionally code up the small side project or quick prototype, so I was looking forward to a nice refresher, as well as finally learning Grid Layout, something I’d been hearing about for a while. And all from a world-renowned web expert, no less! Sure enough, Rachel Andrew welcomed us all in bright and early and soon got down to business, diving right into the exercises!

Much to the relief of the four designers in the room, we began with a quick review of web layout to date, blazing through a short tutorial of Flexbox (no sweat). Understanding Flexbox is an important prerequisite for working with Grid, since many of their attributes do overlap. However, the important distinction comes in how you use them:

For flowing, one-dimensional lists, Flexbox is the answer. For 2-dimensional data and full-page designs on the other hand, Grid’s layout system is clearly superior.

Despite being a new concept to me, I could easily follow along with Rachel’s teaching style. Once we had the basics nailed down, the grid-template-areas spec emerged as my new favorite feature. This allows grid areas, once defined, to be allocated like ‘ASCII art’, as seen below:

grid-template-areas:
"header  header  header"
"sidebar content ......" // periods define empty areas
"footer  footer  footer";

Since Rachel is part of the CSS Working Group, she also peppered a few hints throughout the workshop about new features coming down the line. Things like Pinterest-style masonry grids, styling of individual grid areas, and display: subgrid are just a few of this things we can look forward to.

Though now supported by every major browser, CSS Grid Layout is still relatively new, only having been introduced by Internet Explorer in 2011 (thanks Microsoft!). Meaning: we still have to break out the feature queries and worry about backwards compatibility, at least for a bit. 😕 But as always, the focus should be on on accessibility over pixel-perfection (and I think Jeremy would agree).

The Color

Color systems with Diana Mounter

After a day of digesting the CSS workshop, it was now time again to focus on designing. Designing color systems, to be exact. For me, colors are defined by color-pickers and hex codes, but such abstractions just can’t capture the full range of our subjective, multicultural world. I often find myself designing in circles when it comes to color, it being too often overlooked in today’s design educations. That’s why I really enjoyed Diana’s practical, start-from-scratch case study on systematizing color in the real world.

Welcome to color — everything you know about it is probably wrong!

Diana’s trial-by-fire while at GitHub was to optimize and refresh the colors used in Primer, their design system. Taking stock of the situation, she saw a whole lot of similar colors, undocumented patterns, and elements built without reuse in mind, all leading to a lot of unnecessary CSS. Working through the project, she pulled out a few nuggets of wisdom for us to keep in mind:

• Prioritize highly-used combos first: make sure to keep perspective on the project as a whole and not get bogged down in the weeds.
• Retain color meanings; some symbolism is quasi-universal: green is positive, yellow is caution, and red is danger. Be careful not to conflate these usages with brand colors or other interface elements.
• Tint grayscales cooler or warmer to subconsciously complement main colors and create unity.

Lastly, as with any design project, color systems must also test and take user feedback into consideration. For example, when a change in GitHub’s folder color prompted community uproar, well, sometimes you just have to appreciate users’ passion for your product! And it’s not only user, but also internal feedback that matters! Make sure you’re selling the engineering benefits of a small-as-possible, unified, and clear system, too. These systems can live on well beyond your tenure, so it’s critical to work with intention and awareness!

The Captain

Navigating choppy waters with David Wieland

Grayscale represent! Working with David these past few years have given me not just incredible design experience, but also valuable insight into how client relationships work. They might not always flow as smooth as we’d like, but with eight years of projects large and small behind him, he was ready to lay out his strategy guide for #happyclients.

Good captains know how to spot dangers and assuage concerns. If you work in an agency, do you know how best to handle these situations (without killing the project — or your client)?

• There’s “no budget”? Suggest one to judge their reaction!
• Must launch by a fixed deadline? Better be consequences if their (in)actions push it back!
• Client needs upfront design? Educate them! Is that really how they treat other vendors?
• No direct contact with decision makers? Reconsider or be prepared for a “swoop’n’poop”
• Sailing too smoothly? Make sure client is actually paying attention to progress!

Fact: clients get anxious. But you don’t have to. Take a deep breath and… listen. In moments of heightened emotion, all a client wants is to be heard. Let them know their concerns are valid and you will discuss with your team.

So you’ve made it to the other shore and are wrapping up the project on a good note — wonderful! But hold up. Just because the site is live, doesn’t mean you’re parting ways with your client forever. Get the team together one last time to let everyone reflect on the project’s successes and failures… who knows what the future may hold!

The Philosopher

Oliver Reichenstein’s design ethics

Just after being convinced we could balance client desires with real-world constraints, Oliver decided it was time to drop a big, heavy moral compass into the mix. However, it was great to pull away from technical details for a while and really consider the longer trajectory of design and technology in our world.

What is legal? What is ethical? And what is moral?

Oliver wants us as creators to take not just one, but many, many steps back and view our industry from a long-term, philosophical viewpoint. What philosophy represents us (or our company)? Is it a focus on happiness above all else? A more utilitarian view of pleasure for the greatest number of people? Or can we provide a more universal connection allowing humanity the freedom of will?

Inspecting the World Wide Web through his lens of philosophy, Oliver showed us how these thoughts can indeed influence the structure of our lives. What was initially conceived as an equally distributed network has now coagulated into just a few companies amassing and more weight on the network. And if enough nodes on this network are controlled, explicitly or through influence, so too is the information flow for a majority of the world’s population.

So, how can designers and developers fight for what is right? How can we even define right? That, like all philosophical questions, should become your own internal struggle, but in the eyes of Oliver, we should use our influence to break through corporate centralization and architect connections on a personal basis. Let’s keep the future human.

The Weird

The curious creations of Tim Holman

Tim’s wonderings are really my jam. It was super inspirational to see someone so passionate about something so non-productive and encouraged me a great deal to stray even further from my comfort zone. Looking forward to making really interesting things in the future!

To stay creative, we need to stay weird. Remember back when you were a kid and you made something just because you wanted to? Just because it didn’t exist in your little world? Do you still have that desire? Hammering away on side projects and startup ideas could turn you into a unicorn… or just burn you out.

In this talk, Tim shared with us just a few of his wacky, useless, yet still learning-filled projects from over the years. Sometimes, the tiniest distraction leads down a rabbit hole of coding, math, and psychology… all to produce the most optically-pleasing DVD player screensaver! Other times, you just need to destress. His Zen Zone may be useless, but then again, so is raking a real-life zen garden. Let your mind wander for a while and who knows what connections it can put together! Life ≠ work! Take time off to be weird!

Winding down

After an exhausting day, many of us headed down the street to the Microsoft afterparty for drinks and mingling. Sushi, local beer, a retro arcade cabinet, and a HoloLens demo made for a good background to chat with colleagues and speakers — and what a great bunch they were!

TL;DR?

Take care of yourself, your clients, and your company. Consider your place among humanity and in the world, and the power we have as web designers and developers to influence it (but don’t forget to stay a bit weird 🎏).

Speaker profiles

This year’s 12(!) speakers represented a great diversity not only in gender, but in global background and discipline as well. From agency/freelance designers and developers to big company product designers, news journalists, hackers, and philosophers, the more voices the better! For many, this was also their first time in (a sadly rained-out) Hong Kong.

Phil “The Dream Crusher” Hawksworth, Promoting Performance from the Ground Up
After experiencing one too many botched product launches, Phil made it his life’s mission to never again let deployment plans go off the rails due to a lack of planning or version control. Good thing Netlify’s on board.

Val Head, Choose Your Animation Adventure
Val’s energetic exploration of the range of choices available to today’s web animators was a great start to morning #2. CSS, JS, SVG: pick your flavor!

Asim Hussain, How to Hack a Web App?
With the explicit goal of, “making you pee your pants in fear,” Asim’s talk showed us all just how easy it is for your next project to be compromised… so double check your npm package names and Don’t. Trust. Anyone.

Rachel Andrew, Unlocking the Power of CSS Grid Layout
CSS Grid Layout can seem daunting if it’s been a while since last coding… Fortunately, Rachel took us all back to school with her workshop and talk to educate us on why Grid is the answer for 2-dimensional layout.

Jake Archibald, The Event Loop
Jake’s beautifully-animated abstractions and live examples helped bring light to the oft-misunderstood processes within the browser event loop.

Tim Holman, Weird Wacky Wonderings
This was absolutely my jam: Tim took us through his history of “mindfully weird” art, design, and zen web interactions.

Jane Pong, Data Visualisation in News: The Creative Process
Moving from a science-based education into the journalism sector, Jane gave a unique perspective on producing and distributing truly responsive infographics.

Monica Dinculescu, Fontastic Web Performance
Beware FOUT and FOIT; make sure your web fonts aren’t bothering, or worse, misleading your users with some typographic best practices.

Oliver Reichenstein, Design Ethics
What a departure from the rest this was! Oliver dove deep into philosophy through the ages and implored us to question what the real goals of the big internet companies of today are… and whether we’re helping them or humanity.

David Wieland, Navigating Choppy Waters
Grayscale’s very own took us on a high-seas journey through all the woes that can befall the client-agency relationship and how to disembark with your sanity intact!

Diana Mounter, Interaction of Color Systems
Using colors with intention to bring cohesion and clarity to GitHub’s design system, this was a great journey touching on almost every aspect of digital product design.

Mike Riethmuller, Strategy Guide for CSS Custom Properties
Using SASS? Will you still be using it next year? Mike presented a future where variables and logic are kept right within your vanilla CSS files. Readable code > ‘clever’ abstractions.

Hong Kong is a wonderful place for the English language. An official language of the territory, yet a mother tongue to only a few, a unique variety has developed here through Hong Kong’s colonial years. Don’t be surprised if the deliveryperson asks for your company chop or you’re told to “Add oil!” when working on a difficult task!

Even more interesting, though, are Hongkongers English given names. Not long after the British arrived in 1842, locals began using ‘western’ names to do business. The influence of Christianity also began to take hold at this time, leading to names like Moses, Amos, or… Zerubbabel? In schools, students are encouraged to pick (or change!) their own English names, leading to more creativity and self-expression than among most non-locals. Euphemia, Godiva, and Bowser are all equally valid names here in the fragrant harbour!

The problem

All this linguistic self-expression is great for the language nerd in me, but turns into a blocker when I’m actually at work designing. It’s easy to find official lists of Cantonese first and last names, but I often want to populate mock-ups with real Hong Kong English names. I could go get distracted looking through blogs and articles cataloguing Hongkongers weird names, though usually I’d prefer a full mix of the spectrum: from ‘normal’ western names to interesting local adaptations, with just a little bit of weird thrown in.

Luckily, I found just that at Students of the World, a site connecting international pen-pals. I got in touch with their webmaster Nicolas and was given permission to use their database of Hong Kong pen-pal names! Now, this seems like something I could… automate 😈

Making it work

Getting a simple prototype together was actually not that hard. The simple web page below just rolls some random numbers through arrays to build up the name; I got this up in just a few hours one weekend…

…and that’s how it stayed for a couple months. I’d always had it in the back of my mind as something to keep working on, adding features and style, but to be honest, this was good enough. I use it occasionally at work and, keeping the xkcd chart in mind, it seems like a worthwhile investment. When I did get a few hours of extra time, I decided to slap on some new paint, write up this case study, and call it a day.

Check it out here: amicia.github.io/portfolio/cantogen

Reflections

Even though I still have many ideas for expansion (syncing up Chinese characters to the English names? Mandarin pinyin names?) unless people demand it, this is how it will stay for now. If you’re working in design in Hong Kong and also had this incredibly niche problem, well, I hope I’ve made your life just a little bit easier! Enjoy!