UberData: Designing with Real Data in Photoshop | Hacker News Reader

UberData: Designing with Real Data in Photoshop

medium.com

26 pointsnvkzNemo19 comments

I'm not sure how popular my opinion would be here but I think if you design your web-facing product in photoshop you already lost.

Every single time in the last 10 years I worked with a designer that designed in photoshop it turned the hurt on the team members and anchoring unrealistic expectations in the client mind.

A couple of years ago I watched a screencast of the Basecamp designer, he said he does it all in the technologies that the final product will work with. He designs by writing code and implementing the CSS and HTML.

I loved that approach and every time I have seen it implemented the product ended up being implemented faster and smoother than with photoshop.

I get what you're saying, and I kinda half agree. I think it's less about the choice of tool, and more about designers who know what's possible in HTML/CSS/JS. I think that HTML mockups are valuable (especially for reusing components and experimenting with interactivity and responsiveness), but Photoshop and Illustrator provide speed of experimentation that HTML/CSS is miles away from. Blocking out layouts and text in illustrator is mechanically trivial, and requires little planning - with HTML I need to actually plan out how my flexboxes and HTML structures are going to work out, and that just slows down experimentation and iteration.

Personally, I start in Illustrator, then move into HTML as the designs solidify. My Illustrator mockups are nearly identical to my HTML because I understand the limitations I'm working with (or psuedo limitations, since you can do most anything with SVG - but it might be a pain in the ass).

> I think it's less about the choice of tool, and more about designers who know what's possible in HTML/CSS/JS

This!

Most designers who don't code (that I met) have no idea about this. I worked with dozens of companies as a consultant and this kept being a problem. Especially where there is a client in the middle that receives the designs before the implementation.

Macaw bridged this gap nicely in my opinion: http://macaw.co/

The downside of using it instead of PS or Illustrator is that you don't have the actual drawing tools at hand.

Well, there's one additional (and huge) downside: Macaw was officially end of life as of January 2016 (acquired by invision), and won't be updated anymore.

I disagree, visual stuff should be created with a visual tool. Code is not visual, therefore it's too indirect to rapidly iterate a visual design. You should not use painting tools that have no code equivalence though, that will lead to impedance.

But websites aren't just visual. Websites have interactive components, and very real technical limitations. Beautiful websites can be ruined by crap interactions. Beautiful websites can be impractical to build due to implementation or operating cost.

I think both AI/PS and HTML mockups both have their place, and neglecting one or the other can hurt a design.

I agree so much. I think there should be a tool for building interactions as well. I think code is not the right job for this either, but we have no other option ATM.

Would be better if this plugin was also available for Illustrator.

I'm working on it

What is the equivalent for GIMP?

For Slack try Craft by InVision

I'm confused what Slack has to do with Craft?

probably meant Sketch

Just.. why would you call it Uber?!

I started calling my extensions Uber* before Uber came in my country.

Oh, I incorrectly assumed this was a project which was coming from Uber's engineering team. If i wouldn't have read this thread, I would have kept thinking that.

Not saying you should change its name or put a warning on the page, but I wanted to bring my confusion to the surface so you're aware.

Uber is a very common German word.

Taking it back for the people.

Reply on news.ycombinator.com