Show HN: Enterface, a UI design app concept I'm designing | Hacker News Reader

Show HN: Enterface, a UI design app concept I'm designing

bendansby.com

234 pointswebwielder78 comments

Haha, I love the use of the North Korean flag for "Isolation Mode".

For anyone interested in a real, shipping app that offers many of the niceties of Enterface, check out Antetype: http://www.antetype.com

I decided to use it for doing the high fidelity mockups of Enterface, and it turned out to have a lot of the stuff I was looking for. I still want my app, though :-)

That looks even better. Thanks.

A call to action like an e-mail update form would've been a good move, don't you think?

Second that. Enterface looks great, amd I'm sure many are disappointed to get to the bottom and find no download or sign up for updates link.

Third that.

An upvote would do :-)

No, it wouldn't. Since upvotes aren't public it's useless to upvote something to show support of a subthread that is already on top in its thread.

That's true, but if more people did this, threads would be unbearable to read so I think it's better that we agree not to. Highly voted posts will appear closer to the top, so upvotes are not entirely wasted.

I second that.

† Some people just don't have any sense of humor whatsoever.

This is awesome.

If I can suggest something - it'd be amazing to export some kind of layer-based file format (PSD, really, though that tends to be hard). Your concept looks great for wireframing at a very refined level, but inevitably UI designers will want to go deeper with all the fanciness Photoshop provides.

It'd be incredibly powerful for them to pull in a PSD where all the layers are already in place and ready to be chopped.

I agree, this is really sweet. Is there some sort of CSS2 option that is heavier on the images for things like shadows and gradients, and a CSS3 mode which exports as much in the stylesheet as possible?

Also, an "export sprites" option would be amazing. It would spit out the image file and corresponding stylesheet?

IMHO all it really needs is the ability to link a PSD file as a static alpha transparent image and update whenever the file is updated.

Photoshop should only really be used for masking images and illustrating.

Hey guys, thanks for all the feedback. Right now Enterface is just a concept, hence no call to action. I would love to have it developed, if only for my own use! I'll need my own icon, too...

Please make this obvious from the page itself. Don't call it an app if it's a concept, maybe use "could" instead of "can", etc.

I get that you may not have anticipated the amount of interest when making this, of course. It looks really cool, great idea!

Come on man. It's 2012. Get this onto Kickstarter, make the call to action the same as if it were already built. Then go build it.

The Enterface interface is good. I would definitely pay to use this. Go forth and make this puppy real.

well, give http://Salon.io a spin .. here´s an invite for you http://salon.io/users/sign_up?token=H7DqXNBcUFAnXtRQYExr

I may or may have not hijacked that invite, sorry/thanks!

"Lightbulb image by Svengraph. No affiliation with me or this project."

Surprising at least, why are you using branding that doesn't belong to you?

Is this a concept? A series of interesting mockups of a mockup app, or are these shots of a working prototype?

I get out of this presentation with more questions than answers about this app, and no way to find out more, or be notified.

I guess the title of this HN post does mention that it's a concept, so that part is in fact clear here. Not on the site.

Ah! What a bummer!

I was going to come in with a compliment -- that's got to be the most lovingly rendered light bulb I've ever seen.

As a UX Designer, I'd say I've needed something like this: a true UI design app that only had the features I needed. None of Photoshop or Illustrator's extraneous features (with respect to a UI Designer's needs, anyway).

One thing that would definitely make me try it is a bundled/stock icon set that is well-integrated into the app. Finding open-license icons for my mockups (or drawing my own) is actually the most laborious part of my design process. If that was somehow shortened, or if I at least had inspiration built into my design tool, I'd be a happy camper.

Then until this app is ready, I would like to reccommend to you: http://thenounproject.com/

The things that I have been missing greatly in my UI mockup workflow are:

• Pixel perfect using Photoshop (usually after I have walkthrough concepts using Balsamiq) • Creating reusable assets with various style states (such as menu items selected/not selected) • Taking a design element, such as a table of data, and adapting it effortlessly to other data types (such as different columns) • I'm using Photoshop CS2 and it's layer management can get out of control with some complex designs • A closer relationship to CSS styling (borders, rounded corners, gradients, shadows, etc - in particular doing it on just some edges) - I tried the demo of CS6 to see if there were changes in this area (layer effects) - and nope, nothing. Very disappointing.

I think there is a lot of innovation to be had in this area of UI design. However there may be a lot of basics that needs to be covered first before getting to the UI specific feature set.

First impressions with the site...

1. The carousel animation is confusion on the screenshots. I keep pressing right but it toggles from left and right animations.

2. You need a CTA to register interest. You have attention now but no way for capture those who are interested. A wasted opportunity.

3. The screenshot could show a more complex design to make viewers know it can do what they are used to working with.

4. The name Enterface makes me think of entering people's faces.

Would love to see this concept developed further.

I would pay (prepay) for this. OmniGraffle has been painfully slow to improve, and just doesn't seem to cater to web or app ui design. Unfortunately it's the best thing out there so far. Need something better.

Build this as a native app and charge $monthly. That way people can get started with it for cheap and if you keep making a good product, they'll keep paying you for it.

I really feel like the 1 time app charge model is severely broken for consumers. Omnigraffle gets my $200 bucks and all of a sudden there's nothing I can do to influence them anymore as a customer. The product stays pretty much the same for 4 years, as they move on to find the next pot of gold app to build.

Heh, Isolation Mode, indicated by a North Korean flag

This looks very promising. What a shame to get on hacker news and not have a way to capture users. Just embed an email capture right now on that page. Maybe add a discount promotion for early adopters or beta users. Overall looks great, just hope it's not some vaporwear at the end of the day

Agreed, definitely need to capture emails.

Sorry to break the party, but apparently it's just a concept. As in "no lines of code written yet, and no immediate plan to do so": http://news.ycombinator.com/item?id=4467432

The Flyout Tool is pretty novel. It's one UI quirk that bugs me in a lot of apps that support layering.

I was thinking the same thing re the coolness of it, but I don't have enough experience to say anything about novelty. If it is novel, OP's one-year patent clock starts today for the U.S., and the opportunity to patent in the rest of the world is now lost. It wouldn't surprise me if selling that feature to Adobe, Microsoft, or others could pay off more than the proposed (quite cool) app.

I suspect that this feature's "pre-announcement" will probably result in "copies" of this feature showing up in other apps, possibly before Enterface itself even reaches general release (assuming it's even in dev).

Yes I would expect this too. OP should file a provisional U.S. patent application listing every clever derivation they can think of, tomorrow.

Why?

I find it amusing that you think Adobe would ever implement a feature that useful in their software.

For me, this is the best feature. I've been using Photoshop, Fireworks, Illustrator and Omnigraffle for ages and none of them have an easy way of finding that one element hidden under 10 other layers. This looks like a great solution.

As someone who uses Fireworks everyday, I can say that a tool like this is much needed. In fact, I have been cooking up a similar concept. Would love to connect to pursue a potential collaboration.

By the way, put a form on your page ASAP to let people opt-in for updates.

Personally, I find it frustrating that this is nearly the topmost link on HN. It's been established that there's an interest in applications of this nature. The web is littered with concept art, mockups, and promises of 'silver bullet' applications of every conceivable type. Daydreaming about merging the best features from a menagerie of rockstar apps is a pastime older than many of us here. So, what separates this mockup from other similar vagaries & pipe dreams? Has crowdsourced curation reached a tipping point towards the worse on HN? My opinion on the matter would seem to be that of the minority...

This looks cool and very well put together. It's obvious you've paid lots of attention to detail. At our company, and I suspect many others, there is lots of collaboration between the design side and the implementation of the design (these roles are exclusive). For our purposes, we don't really need pixel-perfect designs, as we just like to get a rough idea implemented, then iterate on it. How do you use this tool in your workflow? Also, how do you use the CSS feature? I would never copy/paste generated CSS into code, but I guess it gives you something to start with?

> Enterface is an app for creating polished, production ready, pixel-perfect, multi-page, multi-state mockups of user interfaces.

I like what you've done.

But I wonder if mockups really need to be polished, production ready, pixel-perfect etc.

I would worry about this too. It seems like you could get bogged down using a tool like this, spending days creating pixel perfect mockups, just to throw out your work later. That might be why Balsamiq is such a popular tool; the mockups look like ass, but they let you iterate quickly without caring about the tiny details.

At some stages you may feel the need to create pixel-perfect mockups. Especially when you are working with remote teams you don't have other way to specify how your product look like to developers that don't pay that much attention to details.

Besides from pixel perfect I've been missing a product that allow me to be "screen-transition perfect" since being sketching on omnigraffle / sketch and having to use another product to mockup transitions is a really painful process.

It seems that the primary purpose of this tool is to add interactivity to designs. I don't think it replaces the need for mocking before you design for purposes of rapid evolution — I think paper still wins in this area.

If it creates pixel-perfect designs that can be used for implementation, then don't call them mockups, that part was confusing to me.

I know a guy who is working on a similar type of project, but his goal is to take the resultant, vector-based output and be able to feed it into devices with differing sizes and resolutions. This looks like it could be a great matchup. If you are interested in hearing more, my contact is in my profile.

Small semi-relevant tip:

The slideshow after "Here's what it looks like" shouldn't alternate directions for the transition animation. You should make the screenshot come in from one direction if you press next and the other direction if you press back. This improves visual feedback for the user.

I'm really interested in this... just a shame you don't have a way for me to subscribe to an email list so I can see when you release it. Now I'll probably forget about it unless I happen to be online at the right time to see your actual launch post on HN.

The one thing I really want to see is HD demos of the product in use to create truly amazing websites.

I think if you dial down the marketing drivel, and dial up the actual functionality, if it is impressive, people will start to notice and share it all by themselves.

Excellent. I've been thinking of building something like this ever since I have been a bit disappointed by http://www.bohemiancoding.com/sketch/. Shame this is just a concept!

It'd be great if this could work with libraries of UI elements, so we could load in Twitter Bootstrap elements if our site uses that, or have the ability to create UI libraries of our own.

Isn't the idea of Bootstrap that you can just get a basic site up without actually a design step.

This looks great, very well done. I build these kinds of tools for my own company, and while we take a different approach, this is really impressive. I will check it out!

Hell of a let down to find out it's just a concept. A good concept, yes. But the wording on the page like "...what can Enterface do for you?" you mean could

Gimme gimme! So tired of flipping between programs during my process because none of them do it well. Omnigraffle just hasn't evolved enough.

Wow.. this has just about everything.

Why not take just the most important layout and design features and create a tool that can output actual web pages?

I'll tell you why. Because web developers code in CSS and HTML. If you can just export a web page, then it takes away their "programming" work.

If we took 1/100th of the effort used to create mockup tools, we could have 10 really great graphical interactive web page and even web application editors.

That stuff about "semantic" markup for SEO is bullshit.

Have you ever built a webpage? There are many optimizations that simple software just isn't going to come through on.

Have you ever SEO'd a site? That is something that certainly takes semantics into account and does so in a way that affects every page and their relationships.

Interface design is a separate process entirely, and its focus should not always be constrained by the engineering it would take to actually code the interface.

If it would take so little effort to make such a software, it would certainly exist. The mockup tools out there are pretty primitive and also fairly limited in number. What you describe is certainly in the future, but to be truly good it will require some very sophisticated technology.

I've been building web pages and web applications for many years.

What optimizations do you think that software can't do that justifies hand coding CSS and HTML? Probably the first one is related to autosizing layouts.. but guess what, graphical editors CAN do that. Regardless, the majority of web pages today STILL are fixed width.

There are plenty of tools and platforms that demonstrate the concept of graphical UI and application editors. Less so in the web space but there are still several out there. Most are not very popular and are missing some important features like open extensibility.

I have studied SEO and done some of that. Let's get specific. What exactly do you think needs to be in the markup or relations between pages in order for Google to give you a fair representation?

Are you really trying to say that if the div class isn't "whysuperspam.com" or something that it won't get a good Google ranking?

Not saying that it goes back to semantic classes or anything like that, but if aligning alt tags, creating hierarchy with headings, being smart about the order of the code vs the order it appears- all those things are going to require 'coding'in a UI that is just as work intensive as coding them in the traditional sense.

You really think the hierarchy of the headings matters to Google?

I doubt that the order of the text matters either, but if it did you could create a tool that would order the output.

I know from years of optimization and measurement. Everything matters. Google/ Matt Cutts like to state otherwise, but SERPs prove otherwise.

It's made for a different purpose but scrollkit has the most critical layout/design features and the output is vanilla html/css:

http://www.scrollkit.com

Yeah I really like your application and you guys have inspired me to keep working on my system.. I think that it should be as easy as you make it to put text, images etc. on the page. I have been working on something similar but open source and more comprehensive which it has a bunch of other stuff like custom plugins, widgets and forms/blogs. Its taking a long time for me to finish because its so involved.

WYSIWYG is dead

You really should have put a mailing list on this page. I'm sure a lot of people are interested in keeping updated.

This looks really good! So now I'm wundering what this service might cost and when Enterface might be online?

From the image, I'm guessing it won't be an online service, but a native app.

This is freakin awesome. How much will it cost? When will it be available?

Will help a lot for UX designers..is it cloud based or a desktop app???

How do I sign-up for updates? Can I beta test it? When Can I buy it?

Two big things I would love from a tool that intends to solve this problem well:

  - Do it on the web, making it free of platform ties.
  - Make collaboration (versioning, sharing, maybe discussion) much easier.

There's too much focus on web-based software. This type of product is ideal native, even with all the collaboration features.

Why do you consider it "ideal native?"

What was a good case for a desktop app even two years ago works fine on the web today (e.g., WebGL stuff, canvas-based apps.) Chances are this will be even more true 1-2 years from now (when a product like this would have become quite polished.)

A web app can offer cheap distribution, a more iterative development cycle, split testing, more monetization flexibility, piracy protection, a larger market, immunity from platform trends, and virality (share interactive designs even with stakeholders who haven't downloaded or bought a large creative application).

For me, the first half of that list is just as easy natively. Larger market from day one, platform, virulence - I can see that. But what of robustness? Access to lower level features in order to create something huge, fast and efficient. without being held back by the browser. Not to mention do I hate not being able to work without an internet connection.

Thinking on it more, you can leverage so much of both worlds and make the best thing ever.

Doesn't Fluid JS do this already?

This looks awesome. I've been a Fireworks user for UI design for a few years now (switched from Photoshop). I'm utterly shocked anyone gets anything done in PS, it's so fiddly and doesn't serve even the most basic of requirements for a UI design app (align to canvas? pages? hello?).

Seen as Adobe is looking to kill Fireworks, it's not getting a retina update I was thinking of jumping ship to Sketch.

Weird that you didn't build the logo using it though, like Sketch did.

I think the UI component details look a lot like Photoshop's... Watch for any patent suits from Adobe!

Reply on news.ycombinator.com