Continuing the discussion from the last post, let’s look at the growing horde of online software tools or “accelerators” that are being used in web design.
While no GUI web editors produce complete web design (meaning that they effectively support things like “Mobile First,” “Progressive Enhancement,” usability and accessibility) exists, there are plenty of smaller apps which remove the need to type in code.
From a sustainable web design perspective, this is a plus, since it potentially makes web design available to a larger audience. While basic HTML markup is pretty easy to understand, the details of other programming languages can be daunting. And many of the new features available to designers on the web involve advanced visual manipulation. This seems to point
First, the gallery:
CSS Generators (general)
- CSS Portal – LOTS of CSS Generators
- More CSS3 Tools
- Create CSS3 (LOTS of style generators)
- CSS Style generators
CSS Images, Patterns, Backgrounds
- CSS Generate Color Palette from uploaded image
- CSS noise texture generator tool
- CSS Background Patterns from Gradients tool
- CSS Patterns set
CSS Transitions and Animation
- CSS 3D Transforms
- CSS Animation Tool
- Texillate – CSS Text Animation
- CSS3 Animation Cheatsheet
- Stylie – graphical CSS animation tool (I particularly like this one)
CSS Buttons and Shapes
- CSS button maker
- CSS Button Generator
- CSS Button Generator (featuring “almost flat” designs)
- CSS 3D Shapes Generator
- CSS3 Navigation Tab Generator
Some additional tools
- STCSS (automatically create CSS for HTML, by a former student)
- CSS Media Query Generator
In the world of CSS, there isn’t much difference anymore between what a web page can render and a Creative Suite style tool can generate. The tools above often replicate a typical CS panel, so much so that some might be raising hackles over at Adobe. This leads to some interesting trends. On one hand, existing GUI tools could mimic these online tools and generate CSS. On the other hand, the online tools are free, instead of costing hundreds or thousands of dollars to license.
There are gui tools that create markup, or the equivalent information design, collectively referred to as wireframe generators. I’ve listed a few of these below:
- Gliffy (you’ll see why CS suite’s days are numbered
- Lumzy (sophisticated!)
- iMockups for iPad
- Flair builder
A naive visual designer might wonder why these tools don’t include CSS accelerators. After all, it is easy to create a visual interface for CSS3 features. Why not add them to a wireframe tool, and get a complete GUI design editor? The answer is information design. Long experience in the design process has shown that creating the basic layout and organization of content on a web page is hindered, rather than helped by, “drawing” with full color palettes, typefaces, and the like. So, the wireframe tools create a visual metaphor – but one that is as sparse as possible to minimize the belief that you are actually drawing the web page the way you would draw an Illustrator graphic.
Like information design, web interactivity can’t really be reduced to a visual metaphor. One could, I suppose, create a bunch of panels with lots of fields and buttons for creating the kind of “hero’s journey” favored in interaction design, but in practice it is better to start with paper prototypes, and jump to prototyping in code. It just doesn’t help to drag around interaction symbols with your mouse onscreen.
- Information design/User Experience – HTML or wireframe
- Presentation (layout) – Direct CSS coding
- Presentation (styles, typefaces, effects) – CSS accelerators (online is free, and therefore more inclusive)
What will the long-term hold? It seems likely that there will be some consolidation of online tools into packages that inter-operate. It seems less likely that they will be replaced by a commercial GUI visual design tool. After all, one is free and one is not.
A bigger issue is the efficiency of lots of little online editors, vs monolithic systems like Creative Suite. Wil the Internet’s decentralized model prove efficient in the long run? Or will “virtual economy of scale” drive these micro-visual editors into a larger suite?