Hacker News new | past | comments | ask | show | jobs | submit login
A Real Web Design Application (jasonsantamaria.com)
89 points by duck on July 26, 2010 | hide | past | favorite | 25 comments



Neat ideas.

He mentions "true to browser type rendering" multiple times, which basically means "shitty type rendering." Browsers, at worst IE and followed closely by Firefox, are horribly bad at performing proper antialiasing for some reason. (The only exception to this rule is Safari, which does a decent job.)

I don't think we should bring the ridiculous shortcomings of browsers backwards into our design/mockup apps. I think we should continue designing stuff in a way that doesn't force us to conform to the lowest common denominator. Sure the depictions we might see in design apps are not strictly "accurate", but I don't have problems watching the graceful degradation of my designs through the various browsers.

It's the browsers that need improved type/graphics rendering, the not mockup/design applications that need to bow down to them.

----

Finally, I don't know if it's actually a good idea to create a web-focused design app yet. We're still in the very early days of the web, and I don't think the long term conventions and standards are in place yet. We're in the flux. The blank, non-assuming canvases in Photoshop and Illustrator are good for fostering new ideas and pushing forward the state of art on the web.

That those apps weren't designed strictly for the web might end up being a net positive, especially as we go into the future and define what the web will look like in the long term.


Agree that emulating browser type rendering isn't necessarily good in the long term, but why not build in support for a variety of different type rendering engines? Adobe is halfway there with Smooth, Strong, Crisp, etc... they could simply add options for WebKit, Firefox, IE...

Also, a web-focused app may not be necessary, but I think a digital-focused app is (well, I guess that would be Fireworks). Photoshop and Illustrator really are terrible tools for designing digital applications, for the simple fact that working with pixel-level detail is a pain in the ass (e.g. try making a 92px by 147px rectangle with no sub-pixel edges in one of those applications). Fireworks actually comes pretty darn close to what Jason is asking for, but Adobe seems to neglect its core functionality in favor of expanding on useless export options and plugins.


I would love to see additional type rendering options, but this would have to account for the OS as well and Adobe tools would have to accept WOFF and EOT files, which counters FontFont's point of offering web fonts DRM-free.

And I still don't think there will be a tool that makes code better than a hand, not that such a tool couldn't assist in a great way. TextMate snippets and CSS preprocessors maybe, but that's not exactly WYSIWYG to HTML.


I'm currently building a web app that, long term, I want to do a lot of the things the author is looking for. The minimum viable product, which I hope to launch in a few weeks, will be a high fidelity mockup tool which creates pixel-perfect designs that are indistinguishable from actual websites. Long term, I want to implement an export feature that generates quality HTML/CSS from the design.

If you're interested in helping test it or have any feature requests, shoot me an email (see profile) or leave a comment below.


I'm an UX guy. I have some research in this area, and I was planning to make a desktop version, but I luck the desktop development skill. So i headed towards a webapp, bespin powered. You can't however beat a desktop app in this space.

If you would like some help, the email is in my profile.


You can't however beat a desktop app in this space.

I took down your email. With your help, we can.


I don't see your email in your profile, but mine is is my profile, and I'd love to test you app; it sounds potentially superb.


Email is in there now -- thanks. I also took down yours, so you'll get an email when its ready. Appreciate it.


> mine is is my profile, and I'd love to test you app

Mine too, and me too.


Got it -- thanks.


I don't know, I spend 5+ hours a day in Photoshop and I just don't see enough shortcomings to justify trying to build a new app. Photoshop is incredibly powerful and I don't know if I would give up the flexibility just to make things I can already do easier.

Of course Photoshop is incredibly expensive so I can see a market for a <$100 app.


Photoshop is incredibly powerful, but not for interactive design.

- type rendering looks nothing like any browser or OS (as described in the article)

- subpixel rendering makes drawing shapes and lines with clean edges a chore.

- direct selection tool is difficult to use and therefore makes the layer palette the primary means of selecting layers, which becomes tedious with large files

- no support for multi-page documents

- positioning and resizing objects at a pixel-level is difficult

- slicing and image export system is kludgy

- no support for symbols

- objects with rounded corners are a pain

Do you use Photoshop for 5+ hours a day designing web layouts? I'd imagine you'd have a hard time going back to Photoshop after using an application that is better suited for interactive design. I actually started using Fireworks a couple years ago, and while I pretty much hate it, I will never again use Photoshop to design a website.


Maybe I'm just ignorant, but why were you designing web layouts in Photoshop? It never has been the right tool for that job. My goto tool for mock ups and layouts is Illustrator, which fits the bill far better, and has been around just as long as Photoshop.


why were you designing web layouts in Photoshop?

It was a company practice at my first job — didn't have much choice.

I've always found Illustrator to be equally bad for web, though. It's a vector tool, but the web is still a pixel medium.

For me: Photoshop for manipulating photos, Illustrator for illustration, Fireworks for web/application layouts (although it can handle some basic photo editing and illustrating, which makes it even better for layouts).


The web really isn't a pixel based medium though. CSS has more in common with vectors than rasters. Creating flowing layouts that work with the user's DPI, browser's renderer and all that is much easier than trying to force pixel precision layouts.


As long as we are using primarily PNGs, GIFs and JPEGs for graphical design elements then the web is a pixel-based medium.


That's exactly my point though, most sites really aren't. I haven't used a raster image for a design element in a website in about a decade. The exception of course being a site's logo if it has one, but the logo rarely needs pixel precise layout.


I don't know where you're getting your data, but most sites use at least several dozen images for basic design purposes. You are definitely the exception to the rule.


Illustrator over Photoshop? I agree that Photoshop isn't great for web layouts, but it destroys Illustrator. Making color gradients, masking, crisp borders - all way more difficult in Illustrator.


I have to disagree. But then I have learned Illustrator very well over the years.


The author suggests a design app based on web kit and then clarigies in the comments that he meant any layout engine:

"Why Webkit? Do we really want a design application that is specific to a single rendering engine?

WebKit is just one option. Gecko could work too. I guess with the advent of Safari for Windows and Chrome, WebKit just seemed like the go-to. I don’t actually know that it’s important which browser gets used, just so long as it’s on a healthy development track and is consistent enough to be predictable. Whatever the option, it wouldn’t replace testing in the browser, just merely provide a consistent window to it."

Well http://en.wikipedia.org/wiki/KompoZer is exactly that. A web design app that uses a real web layout engine.


Here's a startup idea right here - I just tried to post this myself.

You've got a spec from Jason Santa Maria - is anyone going to go create? :)


I've started and stopped on this idea (mine has always been something along the lines of "Fireworks on the web... but better") several times over the past couple of years.

But I've always left it on the burner because, as technology stands today, it'd have to be an installed application. Importing a bitmap and deleting its background pixels, complicated vector drawings, etc. etc. would be impossible (or so damned difficult/manpower intensive as to make them near impossible) to build in today's browsers. And for me to be interested in sinking several years of my life into it, it'd have to be a webapp.

So, I just end up waiting for someone smarter/ballsier than I to do it. And waiting...


Me too, pretty much. Although I've not even dared to think about uploading/editing images.

My vision is something where you can create and use templates for stuff like header, menu, columns, footer, implement styles for fonts, edit styles such as gradients, shadows, corners.

Interface should be something like hovering to see which elements are affected by the current rule, and then picking attributes and changing them.

Basically a WYSIWYM for CSS3.

I am certain something like this will appear this year.


Great idea - after fighting photoshop all weekend I'd love to have a tool like this.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: