Image Image Image Image Image
Scroll to Top

To Top

problem

28

Jan
2013

News Articles

Permalink

By admin404

The Creative Process

January 28, 2013 - News Articles

Oftentimes when approached by clients and agencies, we’re asked about our creative process at ERA404. While people can easily see a step-by-step diagram of our development process, broken down by time, cost and client interaction, we have never really outlined how the creative process works here. This is partially because development, which is creative in its own right, is considerably more objective, pragmatic, and analytical. The process is linear, relying on previous checkpoints to proceed to latter ones.

Design, on the other hand, grows organically and chaotically. It pushes forward and outward in untraceable trajectories. If one thinks of development as a relay race with the baton being passed at regular relay points, design is more like a quixotic multi-player game of capture the flag. It’s undoubtedly the most challenging, gratifying (and possibly frustrating) part of our job here, riddled with stops, starts, reorientation, redirection, hidden doors, trap floors, exploration, and trial and error, relying purely on experience and gut instinct to reach the goal. And while the description above sounds daunting, it’s the primary reason we love our jobs so much.

So, depicting our creative process in a linear diagram like our development process is impossible. But each design roughly follows the same objectives along the uncharted path, which, coupled with client feedback and critiques, act as polestars in guiding us to their completion. Below are those objectives, distilled and organized as they would be in a perfect world, free of the organic and beautiful growth of real-world scenarios:

 

Defining the Problem

  1. Defining the Problem
    To maximize success we first define the problem we are trying to solve—we articulate it and give it boundaries (what’s part of the problem? what’s outside our control?). We call upon our designers to help cull, visualize, express that problem in human terms—looking at it from many different views.
  2. Envisioning the Desired End State (Knowing what victory looks like)
    (If you’ve ever been part of a team that seemed lost, it’s likely this step was skipped.) Knowing how to both characterize and recognize a victory will be vital when embarking on the journey of solving the problem. As designers, we can help prototype the end state (through scenarios, models, journey maps, etc.).
  3. Defining the Approach by Which Victory can be Achieved
    Once we know where we want to go, we need to create a map to get there. That map must be imprinted in the minds of every participant along the way, including clients and team members. We find it helps to draw an actual map with our clients, to assist them in visualizing the distance and milestones to the destination.
  4. Inciting Support—And Then Action
    In some cases, not everyone will want to make the journey. They’ll need to be inspired. Convinced. Reinforced. Educated. As designers, we call on our skills as communicators to help them see why they should come along.

Innovating

  1. Seeking Insight to Inform the Prototyping of the Solution
    After the team is assembled, in which the client plays an integral—if not central—role, the next task is to look at the work ahead and be smart about it. Often it pays to take pause and seek insight that will enable the team to prototype a solution. That means research. Our designers help structure that research, especially in reporting its findings.
  2. Prototyping Potential Solutions
    The prototype might might literally mean physically prototyping the solution: building it in miniature, or as a one-off, to see if it will work. Or, it might mean prototyping a new customer experience—a collection of moments that make up an experience. In either case, we play a critical role in communicating the vision to clients.
  3. Delineating the Tough Choices
    A good prototype (or prototypes) unearths all sorts of unexpected data and insight. And from that, tough choices emerge. Should we include this feature, or that? What if the solution costs more than clients have budgeted? Can the prototype be broken down into stages to make the objective more affordable and digestible? What if there are downsides? Together, with regular and consistent communication  we try to make the choices evident.
  4. Enabling the Team to Work as a Team
    And, when crucial to the project, we help the team work as a team: helping make choices, envisioning different outcomes, seeing the “whitespace” that connects divergent views and approaches.

Generating Value

  1. Choosing the Best Solution, Then Activating It
    This is the culmination of many steps of hard work. If we do our jobs right, we can often be the pivotal voice in this step, helping argue for the best overall solution—we can visualize the case, see different sides of the problem and lay out a path for making a commitment to the chosen solution.
  2. Making Sure People Know about our Solution
    Once a solution is chosen, the task becomes to ensure that people—customers, constituents, employees—know about it. In a traditional sense, this is about marketing the idea. In a deeper sense, it’s about empowering people to support/own/celebrate the solution.
  3. Selling the Solution
    In most cases, an exchange of money or time will be involved—between seller and buyer, creator and participant, sponsor and beneficiary. That process is generally helped by design, so that people know what they’re buying and what it’s worth.
  4. Rapidly Learning and Reorienting Based on your Successes and Failures
    The most effective projects are those in which we constantly learn, strive, and improve. Our job is to help take the team back through the journey, recounting the steps where good decisions were made and where the team could act differently next time.

Tags | checklist, creative process, creativity, design, development, diagram, flow chart, innovation, milestones, problem, prototyping, stepping stones

19

Jun
2006

Information Resources

Permalink

By admin404

Activating an ActiveX Control’s Interface through Javascript

June 19, 2006 - Information Resources

Removing the Marching Ants around SWF Files

As a result of the jury decision in Microsoft’s Eolas patent lawsuit, Microsoft created an Internet Explorer update that would force users to activate media items coded with “embed”, “applet” or “object” tags. The result of this decision is that while movies may play and function correctly in Firefox, Safari and other browsers, users must click Flash media to “activate” it and accept ActiveX alerts on pages containing Quicktime media.

A solution to this obstacle has been dutifully created and promoted by Geoff Stearns. His “SWFObject” (grab it here) is a simple Javascript which enables developers to embed Flash files into sites without using “embed”, “applet” or “object”.

For instance, we used to have our home page navigation coded like this:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="796" height="72" id="nav_home" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="nav_home.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="nav_home.swf" quality="high" bgcolor="#ffffff" width="796" height="72" name="nav_home" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

With Mr. Stearns’ SWFObject, the syntax is shorter and effective. In the head, we include his Javascript file:
<script type="text/javascript" src=js/swfobject.js"></script>

And in the body, we replace the object and embed tags with this:
<div id="navcontent"></div>
<script type="text/javascript">
// <![CDATA[
var a = new SWFObject(swf/nav_home.swf", "fo_nav", "796", "72", "7,0,0,0", "#FFFFFF", true);
a.addParam("allowScriptAccess", "sameDomain");
a.addParam("quality", "high");
a.addParam("scale", "noscale");
a.write("navcontent");
// ]]>
</script>

The SWFObject allows for you to add all the parameters of Adobe’s default export using the addParam function.

To make things better, you can still pass variables to and from the Flash from PHP by adding the FLASHVARS variable with Stearns’ addParam function.

For instance, our interior navigation, with the PHP/Smarty variables, looks like this:

<div id="navcontent"></div>
<script type="text/javascript">
// <![CDATA[
var a = new SWFObject(swf/nav_home.swf", "fo_nav", "796", "72", "7,0,0,0", "#FFFFFF", true);
a.addParam("allowScriptAccess", "sameDomain");
a.addParam("quality", "high");
a.addParam("scale", "noscale");
a.addParam("FLASHVARS", "section=‹$section›")
a.write("navcontent");
// ]]>
</script>

The resourceful Stearns’ provides the identical solution for embedding Quicktime movies to eradicate Microsoft’s ActiveX alert window.

Include his QTObject Javascript file in the head of your page:

<script type="text/javascript" src="js/qtobject.js"></script>

And modify the code for your Quicktime video to use his format:
<div id="video">
<script type="text/javascript">
// <![CDATA[
var myQTObject = new QTObject("reels/web.mov", "qo_web", "480", "376");
myQTObject.write();
// ]]>
</script>
</div>

Incorporating the add.Param function for Quicktime parameters, you can easily add poster movies and controller options the same way you would in Flash:
<div id="video">
<script type="text/javascript">
// <![CDATA[
var myQTObject = new QTObject("reels/reel_web_posterMovie.mov", "qo_web", "480", "376");
myQTObject.addParam("qtsrc", "reels/reel_web_posterMovie.mov");
myQTObject.addParam("href", "reels/web.mov");
myQTObject.addParam("target", "myself");
myQTObject.addParam("controller", "false");
myQTObject.write();
// ]]>
</script>
</div>

Recommended Links

SWFObject Download (zip)
QTObject Download (zip)
SWFObject Documentation
QTObject Documentation

Tags | activate flash, adobe, citarella, fix, fla, flash object, html, issue, macromedia, microsoft activex, patch, php, problem, quicktime embed, swf, swf object