Archive: James Rice, Lead Designer

Designing Cold Sun

An exploration into a strange future; narrative, weather and consciousness.

Cold Sun is a dual-mode adventure game that is affected by real-time weather. In the game you flip between your Existence which is set in the future, and your Dream world which is a one-touch platform game where you must navigate a magnified environment—generated by the real weather data. Matt describes the state of this research project so far.

Some themes we explored for this stage one prototype included:

· Coils. Mortal coils, electric coils, etc.
· Circles as a general theme. Sun, timers, time running out, the globe.
· Colours and it’s variation in weather patterns.
· Dreaminess. Blurry. Disorientation, spirals.

After poring over images we pulled together using Pinterest (a really useful collaborative moodboarding tool we love to use) we started to generate some of our own visuals.

Spiral experimentations.

Wind denotations.

A cold sun.

We then started to explore how using these visual ideas could work as a title for the game.

A playful option for Cold Sun.

Cold Sun using ‘weather front’ sign.

We arrived at a really atmospheric graphic that we could use for a title screen, some Dream mode disorientating circular gameplay, and more.

Final Cold Sun title screen.

Dream mode gameplay.

Mudlark creates games, from small mobile and desktop games through to real-world experiences based on your heartbeat or games the size of London. Game design and playful thinking are central to Mudlark’s creative processes. Take a look a other games we have made.

Playful by Design

Each year Mudlark hosts Playful; our one-day conference about games, play, design, interaction and behaviour. Each year we give the conference a new look to reflect that year’s theme, keeping things new and exciting.

Last year we focused on DIY, attempting to inspire people to do things themselves, and so the design was very texture heavy—influenced by the photocopied sleeves of punk 7 inches and worn paint. This year, looking at the things we were interested in—the trends that were bubbling up and the work Mudlark have been doing—we soon realised that the nature of things was central.

We settled on “playing with form” as a broad theme, to look at approaches, materials, and using them differently—creatively and playfully. Changing direction from last year, we flipped the design on its head by employing strong colour, geometry and angles peppered with some cutting-edge browser technologies.

Design in its broadest terms is central to everything we do at Mudlark, from designing the interactions and behaviours around our latest project, the Perceptive Radio, to the wordmark laser-etched into its fascia. From the process that takes a user from A to B in the best and most enjoyable way, as in our work for Ravensbourne university, to social impact game design with Half the Sky.

In a way the design for Playful is a very selfish exercise—one that lets me design to my own brief, to try things or techniques that maybe aren’t quite ready for client consumption. It’s a way of flexing my creative muscles and, really, to show off.

Playing with Form

Greg and I set up a Pinterest board to gather and share visual inspiration and to generate a direction. As things began to develop we saw some fun coming out of using illusions. We liked the idea of messing with people almost to the point of annoyance in a fun way.

Animal Collective’s Merriweather Post Pavillion cover art: a popular application of a visual illusion.

Some early experiments explored pure typography and layout, whilst followed a more rigid and straightforward style with some animated elements; but overall came across a bit too sedate for my own ‘visuals that fuck with people’ remit. I had to get back on track, shake things up a bit.

I was inspired by Siggi Eggertsson when thinking about visual ways of showing form. Eggertsson uses his own geometric grid to create wonderful designs and in some pieces uses contrast to create form between the segments. Initially I thought this could be a route to explore—using subtle contrast and shadows between shapes or images to show form.

A New Year by Siggi Eggertsson: Showing form though a grid, colour and subtle contrast.

A visual trick I eventually developed—the moiré background pattern—became the showpiece of the final design. Using this method I applied different colour combinations and pattern sizes for different sections of the site. I set some of the text at the same obtuse angles making for a playful and unusual layout.

This year’s design has had a very favourable reaction on Twitter and has made its way onto—signs that it has made an impression on people. We pat ourselves on the back at this knowing we’ve done what we set out to do, but also knowing that we have to top it next year.

The moiré pattern made interactive by scrolling: the showpiece of the Playful design.

In Closing

At Mudlark we’re in our element when we get to push the envelope with projects. If you have a design problem then we’d love to hear from you.

Playful 2013 will take place at Conway Hall in London on the 25th of October.

Notes from New Adventures

The other week I went to (probably the last) New Adventures in Web Design conference in Nottingham. Met up with some regular freelance faces and some new ones too.

The atmosphere at New Adventures is always a good one—inclusive, friendly, fun. The free bar at the after-party was one of the highlights. I even managed to miss my last train home (something I’m making a habit of). Here’s a short run-down of what went on.

Notes from New Adventures

The Nimble Process
Jason Santa Maria

  • First up was Jason talking about process. A linear process starts to make no sense (something I also noted in this blog post).
  • Jason talked about being scared of launching when he felt something wasn’t quite ready—something I think a lot of us can empathise with.
  • Show your clients MVU (Minimum Viable Understanding) layouts and designs—don’t spend time working up pixel perfect mockups.
  • Encourage clients to participate in the design process and allow them to feel ownership of a design. This will alleviate blockers in the last furlong of a project.
  • To encourage prolific ideas generation he shared a technique with us: use Alphabet 100 to draw the same thing many times. Use this method for logos, for layouts, etc.
  • Since the web is primarily text, start a design with copy and typography first. (We followed a similar route when re-designing the Mudlark website by choosing to focus on content to dictate our layout and design).
  • Jason quoted Dan Mall “Let’s change the phrase ‘designing in the browser’ to ‘deciding in the browser.’”

Appropriate Tension
Tyler Mincey

  • Tyler began with talking about his time at Apple and finding the right amount of ‘push and pull’ with the various inter-disciplinary teams there.
  • He talked about a ‘culture of respectful challenge’—always ask “why”, it encourages critical thinking and learning.
  • Understanding constraints: Innovation is when you move the constraints iteratively, not just designing within them.
  • ‘Good products as communication’: communicate through your work—the care and attention to detail will show through.

The Inertia of Ideas
Michael Heilemann

  • Michael designed the ‘Kubrick’ default WordPress theme. He explained how it was something he did for fun but ended up becoming wildly popular—people even named their dogs after the theme.
  • He talked about his journey from working on things he enjoyed, to working for the open source community, to then being offered a job at Squarespace.
  • Michael worked on an innovative technique that would improve the user experience of a CMS. It was rolled in to the main Squarespace service the day he showed it to the boss.

Responsive Teaching
Tiago Pedras

  • Tiago is a teacher and designer. He shared with us his journey through life up to how he teaches his classes today; which are practical, engaging and employ gamification techniques (involving a gold spray painted coconut.)
  • He encouraged us to share our passion.

Billboards and Novels
Jon Tan

  • Jon talked about the qualities of ‘impact’ and ‘immersion’.
  • He highlighted that the web is about reading. We can really take advantage of this now that we have webfonts and OpenType control.
  • He discovered that good typography induces a good mood (backed up by science!). Dispelling the common notion that it enables us to read quicker.
  • “Fonts are wayfinding apps for emotions”.
  • Jon taked about scan paths. Where does your eye focus when viewing a website. Use colour to highlight something and interup this scan path (and other techniques).

New Adventures in Code
Seb Lee-Delise

  • Seb started with talking about the separation between a ‘designer’ and ‘developer’.
  • Traditionally in educational settings there has been a (literal / spatial) separation between these disciplines. Anything art related would be in a separate campus to the maths and science classes, for example.
  • Between the ‘designer’ and ‘developer’ there is a hybrid emerging. Things seem to be leveling out. (I commented around this subject a while ago on Twitter).
  • Seb calls himself a “Creative Coder”.
  • He acknowledges coding can be a daunting learning curve but, as with most things, it’s very rewarding once you get there.
  • Seb’s talk was really engaging. He’s a funny guy, and his enthusiasm made everyone want to code.
  • He also did some live coding on a Commodore64 (!) and some JS stuff. Seeing this live was a nice way to break down the barrier of some of my code-related reservations.

The Beauty in the Impermanent
Steph Troeth

  • Steph talked about wabi-sabi, musing that we’re indulging in the immortality of things because we ourself are mortal.
  • She referenced James Bridle’s The New Aesthetic.
  • Showed us some examples of ‘low-res’ shoes, examples of digital imperfections out there in the world.
  • Throwaway vs. permanent or impermanent vs. permanent.
  • We get fonder of things over time.
  • How can we make digital things that are allowed to grow old gracefully?

Wayne Tells it Like it is!
Wayne Hemmingway

  • Wayne went on an entertaining, insightful, funny ramble about his life—an inspiring narrative that highlighted integrity and ballsyness.
  • As a board member of the Design Council he highlighted that investing in design will yield the highest return of all sectors.
  • He also said not to rest on the quality of your work—it’s more about what you stand for.

Jessica Hische

  • Jessica’s bubbly up-beat talk rounded the day off nicely.
  • As a freelancer, she talked about the importance on working on the stuff we love, which will then feed in to the paid work that occupies the bulk of our time (and pays the bills).
  • Jessica also touched on work-life balance, burnout and cats.

Now I should go catch my train. Wait, what time is it?

The New Mudlark: Website

Following on from creating a new identity, the next step was to completely re-build our website from the ground up.

Our approach to the design process was to focus on the content. This meant we concentrated on our message and what we wanted to communicate above everything else. And so content strategy and wireframing was the first practical stage of defining the layout and structure.


‘Mobile-first’ is a design process advocated by LukeW. On a technical level it involves coding the website at its most basic form and to progressively enhance for devices that are more capable, as opposed to serving a full “desktop” style website to a mobile user before stripping away superfluousness after-the-fact.

The core idea is elegantly simple. Rather than the traditional approach of starting with the ‘desktop version’ of a website and then simplifying it for mobile, Wroblewski proposes we begin by building sites that work well on small-screen, portable devices, then build up from there.

Mobile first forces you to get down to the bare essence of what makes your content work. “You don’t think: ‘Oh, let’s add another thing’ – because you simply can’t. Which keeps everything clean and focused from the outset.”

We found this an enjoyable approach as it forces an intense focus on getting the content right. Thinking in a mobile way focussed us. Why should our homepage have this many elements? Does it enhance our core message? If not, then get rid of it—we don’t need it.

Group blackboard session: defining the content hierarchy.

Responsive design

I wrote a blog post about responsive web design back in May and have since experimented with the technique in this memory: a “responsive story” part of our MemCode PLC series.

Traditional websites have been designed and developed around the notion of a canvas—a fixed dimension from which to base a layout and design—a relic from the pre-digital print era. The problem of course is that the web and the browser are not a fixed size, especially when taking into account emergent platforms and their proliferation of screen sizes.

From Brad Frost”s “Responsive Web Design: Missing the Point” blog post.

‘Responsive web design’ (coined by Ethan Marcotte) is an emergent process being adopted as a solution to the fragmented web. Recent high profile examples include the Channel 4 News website () and the new website (launched 17th Oct 2012). These websites have a single responsive layout and design that adapts to the users’ device. The same website will be optimised for both a mobile device (smaller text, more of a ‘stacked’ layout, etc.) and a large desktop screen; as well as everything in between. This is not only monetarily advantageous over maintaining a separate mobile optimised website for the same content, but it also means the user is getting the best possible user experience for their device.

One big “a-ha!” moment was coming to terms with thinking in proportions rather than pixels.

We were mindful that different devices mean different considerations. For example, elements will generally be smaller for a mobile user—but as these devices are often touch enabled—certain elements like buttons ought to be large enough to be easily tapped.

New workflow

And so if we are to think about the web in terms of proportions rather than pixels, how is Photoshop going to be an appropriate web design tool? There”s too big a disconnect between the fixed nature of Photoshop (pixels) and the fluid nature of the web (proportions and responsiveness).

The standard way of website development is the ‘waterfall’ delivery process. Websites would first be sketched out as wireframes, then approved. Then fleshed out as a Photoshop comp, then approved. These mockups then inform how the website would be coded, and finally signed off.

The new multi-device web makes this process less appropriate, less feasible. How can you create a layout in the thousands of possible variations to be approved in this linear way?

We had to change our workflow.

As we waded through these unfamiliar waters we found that the process was cyclical and iterative rather than linear.

  1. Sketch (Content strategy with mobile-first, loose wireframes)
  2. Prototype (rapid HTML builds)
  3. Design (Introduce layers of typographic / visual treatments)
  4. Talk (Discuss with team)
  5. Iterate (Make changes / code refinements)
  6. Repeat

We favoured low-fidelity iterative sketches and mockups of key screens rather than a pixel-perfect comps of each page. Designing in the browser was a new method that seemed to complement this. By using our brand assets we could design and experiment—see our designs in situ—work out what didn’t work and quickly iterate ensuring a layout or design would work across device types.

Wireframing key pages for desktop.

Never really finished

Websites are never finished, they are a fluid ever-evolving thing. There will be imperfections, quirks and cross-browser issues that pop up.

You”re looking at version three of the new Mudlark site, and I”ve got a new version ready to go. You might not notice the change, but we”ll be happier with it, and on particularly small or large screens it will carry our content and branding in the best way possible.

The New Mudlark: Look

Mudlark has been in a transitional period these past few months with Charles stepping up as MD and the company moving to a new base in the city of Sheffield. These changes brought in a refocus on what we do, what we offer and how we communicate that through our identity.

I thought I’d write a short blog post touching on points of our journey developing the new Mudlark look. I’ll follow this up with a post covering our approach to the design and development of our new website.

Letting go of the past

Whilst we used the main tagline of ‘making life playable’, our old website confused communications by using a number of other taglines.

“Mudlark is a cross-platform production company. A partnership between a games company, a TV company and a web company.”

“Mudlark deliver commissions, campaigns and applications.”

“Mudlark produce mobile phone games, ARGs, virtual world experiences, television programmes, digital arts adventures and social network narratives.”

“Mudlark work across platforms, online, offline, real world, virtual world, imaginary worlds and simulations.”

“Mudlark develop original IP value in formats, processes and designs as we tell stories and play games.”

A reminder of the old Mudlark website.

A new direction

After many internal discussions we agreed on a set of qualities which formed the basis of a loose brief. These qualities are; dynamic, playfulness, movement, connectedness, cross-platform, forward-thinking, but most of all: clean, clear and concise.

Some rejected logos.

After exhausting some avenues—including an attempt to breathe life into the old orange Mudlark with a bird-inspired Batman-reminiscent motif—I decided to go back to the drawing board, back to basics and keep it simple.

Mudlark Birdie. The chest and wings form an ‘M’.

The letter M of Mudlark in its simplest form can be created by overlaying two triangles. From this geometric starting point I began to flesh out a new mark. The underlying idea seemed to feel right — it was starting to satisfy our earlier notions of how we want to be seen as a company; connectedness, dynamic, cross-platform.

Early iterations were quite flat, not punchy enough. I started introducing combinations of perspective and experimenting with different line weights.

The evolution of the Mudlark triangles.

What we like about the identity

  • Some people don’t see the ‘M’ right away, and so when they do there is the delight of discovery.
  • The mark is simple and works at smaller size and for social network avatars, etc—important for a digital-centric company.
  • The clean, unfussy lines create a sharp, modern look: we know about the future of products, ideas, etc. and execute without fuss.
  • The soft corners and perspective create a sense of movement: we’re an agile company that can adapt quickly.

Mudlark logo as seen on TV, end credit screen for recent Mudlark documentary.


Mudlark logo used as an avatar.


Mudlark document covers featuring the logo and change in colour scheme based on the service.