Best web design app ever

This is my feature request list for an honest-to-goodness visual design tool for the web. Adobe Fireworks debuted thirteen years ago, so maybe someone’s working on it right now. The web’s magic like that!

In no particular order and with absolutely no feasibility research…

  • Browser type previews (“Safari on OS X,” “IE8 on Windows 7,” etc.)
  • Straightforward effects palette but with support for re-ordering and repeated effects
  • CSS code snippets for effects (shadows, gradients, etc.)
  • Vector objects with pixel snapping
  • Smart objects but with optional file linking (with automatic updates)
  • Integrated grid builder
  • Object styles, library assets and interaction states (hover, active, focus, target, custom)
  • Project files with support for multiple pages with multiple layouts
  • Browser-viewable design previews with Recurse-style background image stretching
  • Google Web Font previewing (maybe even Typekit with a paid account?)

What do you think? Are these pipe dreams?

Thanks Calvin, Erik and David for ideas and inspiration!

Responses

Erik Jung says

Fluid canvas that mimics document flow when elements exceed the boundaries? Or is that moving into “just design in the browser” territory? I don’t know. It would be nice to have an object automatically snap to below the content box of what precedes it. The horror of dealing with many type layers in Photoshop comes to mind.

Responded

Peter Wooley says

I’d love text boxes with runaround the designer can control. Laying out body text is one of those things I’m tempted to do in the browser.

Responded

Tyler Sticka says

Duh, flowing text boxes! Why didn’t I think of that? Thanks, Peter!

Erik, I originally had a point in here about being able to base layouts of objects on parent objects, but I came to a similar conclusion as you… that it might get a little too complex to manage from an interface. That said, your articulation gave me two more ideas…

  • Canvas that optionally extends automatically. Instead of having to resize your canvas every time your page design gets taller, it can just detect that there are objects off the edge and expand to fit. Maybe there’s a way of defining a “background” layer and a “stage” where objects should always be accommodated by the canvas?

  • For layout, it would be super helpful to at least have implied gutter snapping, similar to what Keynote and Omnigraffle do when aligning elements.

Responded

Matt says

It’s a pain interpolating between what photoshop thinks are point sizes and what a browser thinks are ems – it’d be awesome if the type was rendered through a web view so there wouldn’t be any guess-and-check involved in font-sizing.

Responded

Calvin Ross Carl says

Oh, most importantly! A baseline grid!

I second the vote for text boxes with proper word wrapping around objects. Em support would be great as well. Especially if it meant you could adjust all text in the design simply by adjusting paragraph or character styles.

How about a button you click and it automatically creates good, web-friendly copy for you? :)

Responded

Tyler Sticka says

Or a button that just takes you to the product page for Erin Kissane’s book? :B

That just made me think of another feature that would be useful… placeholder copy and placeholder image generators with plugin support. In the case of images, these could be special objects with the dimensions printed inside of them, a la placehold.it. Plugin support would enable endless possibilities… even kittens! You could then “place” an image in the container, InDesign-style, at a later date?

Responded

Leave a response

Your email address won’t be published. You can use some HTML or Markdown.