Interactive design method

I’ve decided to change this blog entry into something more useful for EMU students, and explain the process we followed to create this site. If you’re creating a site by yourself, you might sketch out a design, create mockups, and code everything without having to illustrate many ideas. But, when you work with other designers and developers, more organization is often needed to streamline the process.

For Playlegions.com, and subsequent sites thereafter, we always start with wireframes. Wikipedia defines a wireframe as:

A website wireframe (also “web wire frame”, “web wireframe”, “web wireframing”) is a basic visual guide used in web design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface.

Here is an example of a wireframe for playlegions.com:

These wireframes were already created when I started to work on the site as a visual designer, and it’s often the case that this wire-framing is done by User Interface designers, who focus more on the organization of information with logical interaction. Visual design is often a separate process, but both the visual and UI design influence each other to create the final work. In our case we’ve simply divided the work with the four of us, two focusing on development (web coding) and wireframes, and the other two focusing on visual design and logo creation.

We spent a good week or two on designing buttons, and here’s an example of a page of logo treatments we didn’t end up using:

I also have an entire page of button designs and alternate mock-up pages like this:

Since this iteration of the site is so simple, at least in terms of the basic structure of the site, not much changed between the wireframe to the design to the final product. But, more complicated sites require excellent communication between the developers, UI and design people. I guess what I’m trying to convey here is that even though you may not know a great deal about coding websites, a good design education is all you need to start working in the web design world. Web designers simply need to know enough about the technology to know what is possible and what is not. It might require a great deal of studying, but it won’t always require you to be a fluent HTML or PHP programmer.

Here’s an example of a the final page we designed to match the above wireframe:

The logo in that mock-up is a different iteration, before we were charged with the task of including .com in the final version. Branding for this site was especially difficult given the fact that the game has its own temporary logo that needs to be redesigned. We are creating a visual identity for the site as a medium to deliver the game, rather than the game itself, or the InstantAction parent site.

I’ll post more some other time, thanks for reading!