Question

We have developed a mildly sophisticated web application using JQueryUI and themes. We chose this approach because we could do it ourselves, using Themeroller to build a theme and JQueryUI classes or JQUI-aware plugins in Javascript, and have had very limited need to iterate over color schemes, fonts and other styling elements.

I’ve just started to receive input from our design staff, and want to create a workflow to allow for fluid changes in styling. What works for you?

Answer 1

Sadly good graphical/Ui designer, that is able to design/code in flash are rare jewels… For JavaScript: they are non-existent (at least for me in my country);

So the workflow that I work with (for designers) take this into account, and stays the same for my flash/JavaScript projects;

Roles

Firstly, from the designer point of view: there are 3 roles, as of followed.

• 1) the designer : in charge of artistic direction and graphical production.

• 2) the interface-r : works with the rest in implementing the graphics and animation.

• 3) the logic coder : Codes classes and functionality: logic isolated from interface.

Logic coder can have further sub roles, but is beyond the designer point of view. And roles should not be 100% enforced: it’s good to learn and help from one another; The designer is not required to know coding, the coder does not need to know design. The interfacer however needs to know coding, and a bit of design: Not good: but know (especially animation)

work flow

1) Base functionality is worked out by everyone; while it is actually a coder role: getting everyone involved helps the idea generation progress (programers: the designers can sometime come up with really good wild ideas, your job is to logically see how it can be implemented and If it is worth doing so)

2) Mock up UI and Class interface This may be the worst UI you may ever seen, but it gives a general direction to work towards: This is done by everyone. With coder working out the isolated logic (no graphic at all; eg: sever logic) and the interfacer and designer does the mockup.

3.1) Graphic and animation the graphic designer works on their wonderful design / graphics. while the interfacer translate the designs to an actual interface (from photoshop to flash/HTML). If you are lucky, the designers would know how to do this even (slicing etc) and the interfacer focuses on implementation and animation. Any additional graphical animation (dynamic stuff, like something following or reacting to the mouse). Is to be discuss and developed by these 2. This process rarely involves the coder to step in.

3.2) The coder works on the logic while ensuring it correspond to a coding interface as agreeded with the interfacer. Focusing on getting the mockup fully functional (not the best looking). This is usually done by usually classes interface and/or global declaration (avoided if possible)

4) Interface merge The interfacer, then merges the 2 together: to form the final app. XD

Ending note

While in reality, after stage 2. The workflow goes in a contineous cycle of 3 and 4. The main advantage of having an interfacer, is to ensure the designer nor the coder slow the other down. Hence, limited slowdowns 🙂 the interfacer however has a tough role, needing to be extremely flexible, and more often then not double as project lead in small teams. For only he will understand both sides and their limitations. Though he may not be alone nor the best at either.

Note this is used extensively in RAI when both sides are important roles. However if you have projects that has emphasis of 1 over the other. You will need to balance the manpower likewise (eg, a photographer interactive blog may mainly require the designer and interfacer to WOW instead, where most of the photo database code may be reused from already done or open source project (this is one of the most common job I encounter)