Skip to main content

HTML, CSS, Javascript, and Balsamiq as Entry points to design and programming

Many of the contributors at the Center for Games & Impact Innovation Lab don’t have deep experience with design or programming when they first begin working with us. To support their learning of tools in pursuit of enhanced capabilities to design and develop innovative ideas we needed to find some jumping-in points.

My personal approach has been to encourage this growth by using HTML and CSS to first create the confidence in their individual ability to design. For those of us that code and design regularly, think back to that first time that you created a simple, ugly page and how incredible it was to realize that you had control of this “web-page stuff.” Then recall that moment when you first published it, and had a friend or family go visit your work in their own browser on another machine!

While the technical accomplishment may pale in scope to what rapidly follows, even that first taste is such a rush it hooks many of us for years, setting us on a path of productive exploration and struggle as we manifest ourselves through our works. Importantly,as access to technology has improved and we are now well into the second decade of ubiquitous web access in the US, our tools have greatly improved.

Among those tools is the collaborative mockup tool, Balsamiq Sketchups. This is an even better way to start design for many because it supports design iteration and critique in a structured way that allows a new designer to begin to grapple with the grammar of the experiences they want to craft, before getting buried in the details of missing semi-colons and curly-brace mismatches. The reason I love Balsamiq isn’t because it is the most complete tool, or the most flexible, or even any of a number of other criteria we might assert: I love it because it is constrained, and engenders the ethos of designing for experience, not flash.

That was possibly the most important lesson I learned from my time on the Connected Learning project. When Kareem Ettouney, the MediaMolecule Art Director, made the point that the perception of a requirement of polish prevents creative work from being shared, it really struck home. To side-step this, LittleBigPlanet makes polish hard to achieve in the look, keeping a kind of hand-crafted aesthetic, but not the feel of the experience. This is the same balance struck in Balsamiq: the point is to get the quick and dirty design to feel right, then, if it makes sense to proceed, focus on producing the design with polish in a different tool set that affords it.

With this orienting frame several participants in the Innovation Lab have already started to bring new products and visions to life, including the News21 VA game. As this part of the Innovation Lab produces more products we will share technology tutorials and tools. Let us know if there is something you’d like to co-design!