The ‘as of lately very good’ Adobe Edge Magazine’s most recent issue has a couple articles especially worth noting. One on creating a click-through mock-up in Fireworks and one that reviews a number open source CMS choices. I thought both had some really salient points and I’d like to offer my take on them.

Oftentimes I don’t really read the magazine, I’ll be honest. But this time I skimmed the headlines and a couple in particular caught my eye. Partly because they are something we deal with a lot, and partly because they are kind of related.

---

The mock-up article is something that has very much been on mind as we are currently concepting a potential process change here at Iona. We currently go through steps somewhat like this to produce a brochure-ware or simple content managed site (design phase only):

1. Produce wireframe based on discoveries from the definition phase of a project
2. Produce color palettes and type choices, choose some potential imagery or create mood boards
3. Get approval from client on these direction seeking steps
4. Marry wireframes with palettes, type and images for use as a mockup phase. Very much in a “page” metaphor.
5. Try and find way to display these designs in an accurate, but not too time consuming fashion for the client’s final approval prior to beginning HTML.

Now, what I like about this article is that it is yet another way to approach step 5. We have built click-able prototypes in HTML, Flash (I recently built a little clickable prototype using this – back and next page listeners and invisible buttons) and PDF (I hate using PDF for viewing webpages)… all of them lacking in their own unique way. What I would really like to do, which is a bit more like how we produce designs for a more RIA-like design or large scale taxonomy driven site is something like this.

1. Produce wireframe based on discoveries from the definition phase of a project
2. Produce color palettes and type choices, choose some potential imagery or create mood boards
3. Get approval from client on these direction seeking steps
4. Marry wireframes with palettes, type and images using HTML and CSS prototype, skipping Photoshop and Fireworks altogether as often as possible. More of a component based approach to design than a “page” metaphor.
5. Get Approval on the prototype and migrate to the CMS or connect the UI to the back end.

Of course, when you are building something that is primarily a marketing tool and needs very precise branding standards, etc applied to it, it’s not quite that simple. Client concerns, lack of familiarity with the technology by the designers, overall difficulty level required to create framework style CSS that is flexible and reusable in an agile manner all get in the way. Now, if the Fireworks CS3 and Dreamweaver methodology introduced in that article were a little less tool specific and more focused on producing click-able mock-ups that transition easily to a CMS template, I’d be thrilled. When it comes down to it though, I’d really love it if I could get a design process setup that allows step 4 listed above work like this (I apologize for the animated GIF, really I do, I found this image a couple years ago and kept it to show my students):

---

On the Open-source CMS article… It’s good that the content in this digital periodical can move past being a commercial for Adobe software. It’s also good to see such an informed article that doesn’t over simplify just to pander to an audience not familiar with the subject matter. The author mentions topics like templating, taxonomy and modules, noting Drupal’s robust ability to create a nearly limitless number of views from it’s database for content display flexibility. I used to be a Mambo (now Joomla) user and I don’t miss it, even though it’s admin area is a bit easier to use than Drupal’s.

At Iona, we use Drupal for the sites we build on LAMP stacks almost exclusively… partly because one of our developers, Brian is a like a 8th degree Drupal ninja or however those guys exhibit their expertise (Belts? Medals?). Pretty soon, I’m sure he’ll have a fine neckbeard. Inside joke on that one… sorry. Anyway, we like Drupal and find it indispensable as a tool. By using a true platform/app dev framework like Drupal, things I would have never thought possible with a staff our size are commonplace for us now. We have a great deal of experience tying Drupal in with Flash/Flex using SWFAddress and AMFPHP and i have to say, it thoroughly rocks.

On the lighter end of things… I of course use WordPress for this site, and have on an occasion or two used it as a backend for a mini-site or small brochure-ware site. Not really in the same league as the other tools listed, but certainly coming on strong after the 2.5 release.

What do you think? Are you using an open-source CMS? If so, which one and why? Do you frequently need to integrate with intricate designs? With Flash front ends? How does this affect your design process.

Posted on April 11, 2008

Name (required)

Mail (will not be published) (required)

Website