CssConsole - easily make terminal-styled forms | Hacker News Reader

CssConsole - easily make terminal-styled forms

github.com

50 pointsreion18 comments

This is really cool and useful and I'd be disappointed to see many more comments condemning this for allegedly being skeuomorphic or some such.

Even with all the great new ways we have to style forms they're all still not too different from the default inputs that come with browsers in the end. This puts together a number of really neat ideas that I plan to totally pick apart and use individually.

It's all the little details that makes a form either dull and predictable or a total joy to use. You may not even notice it but the design and interactivity of a form really makes a big difference when it comes to your use of it. I truly believe the right form design makes a big impact on conversions and a person's impression of a site, especially one that makes heavy use of text input.

A lot of people neglect the typography of form inputs. The cursor is also something I've really been interested in changing. The shape and/or the color of it is something that can really delight a user.

Think of the text editors and word processors we use. Many are fairly consistent but you see much more variation of the editable area in desktop software than on the web. Apps like iA Writer, Mou, and others make the act of typing text so inviting that just having them open, at least for me and I assume many others, compels you to fill that space with text.

I love writing and I'm fascinated by the design of text input fields whether they be normal one line inputs or text areas so this project is something I'm excited to explore.

The code for this thing needs a work:

https://github.com/michalkow/cssConsole/blob/master/cssConso...

Better examples would make this better eg: if you applied the terminal style to the rest of the login page for example so it looked like logging into linux looks.

It's cool that this exists and hopefully someone will have a use for it.

Have you disabled the ability to select text on purpose? Because that is really annoying.

I guess you are talking about quasi-console example? You cannot select text, because I set auto-focus on input field.

none of the examples allow you to select text within the input field. (Chrome 22.0.1229.94 on OS X 10.6.8)

very cool. wish this had come out 2 weeks ago. we hacked together something from github borrowed code for www.cereal-and-code.com admittedly not pretty, functional enough for our audience.

I'm not sure what the point of this is, it's more skeuomorphism that is becoming more and more misplaced in a digital age.

Console interfaces to console systems aren't "skeuomorphic".

Yes it is...

No, when the system you're interfacing to is itself a console, it is not "skeuomorphism" to present the user with a console interface.

Skeuomorphism is an aesthetic strategy for making software appear familiar or comfortable (or "retro" and stylish) by evoking parallel hardware/real-world solutions to the same problem. A console, on the other hand, is a way of interacting with software using typed commands.

An overlay for HN that presented it as a Renegade BBS instead of a series of web pages and web forms might be skeuomorphic, because that Renegade BBS interface would exist for aesthetic reasons only. But aesthetics aren't the reason you make a web SSH prompt look like a console.

Wikipedia: skeuomorphism is when a product imitates design elements functionally necessary in the original product design, but that becomes ornamental in the new product design.

So CSS that emulates terminals / phosphor displays is still skeuomorphism - the definition mandates only that the design evoke older designs, not necessarily "real-world" designs.

Is your Terminal.app window "skeuomorphic"? Is xterm, or Putty.exe? No? Then I don't understand your argument here.

>No, when the system you're interfacing to is itself a calendar/moleskin-notebook/radioknob, it is not "skeuomorphism" to present the user with a calendar/moleskin-notebook/radioknob interface.

That's the precise definition of skeuomorphism.

It's skeuomorphism not because it's a command line interface but because it's green and black, which is a nostalgia based design decision not a ux based one.

I can't remember exactly but there was some CRT based decision for earlier consoles to be green and black, that this console is aping it just screams skeuomorphism.

The example I looked at wasn't green-and-black; it was a monospace font, cool light grey on warm dark grey, with a colored directory listing. In other words, an xterm.

The point is to give some flair to the plain old forms. There's nothing wrong or annoying or misplaced about it. Furthermore I don't think a 1 to 1 match of one digital interface to another is skeuomorphism. Skeuomorphism is mimicking a physical object or interface in a digital form. If this were to look like a piece of paper it'd be skeuomorphic but it looks like a terminal window. If this design is skeuomorphic then by your logic then terminal windows themselves are skeuomorphic in that they mimick any physical printing of text.

Besides disliking skeuomorphism I'm not sure why you're so down on this. Why is that?

Maybe you don't use this but some people will use it because they find this useful. Why so many startups doing the same thing? Why reinvent the wheel? Why another Facebook? Why spotify or Pandora? Why not iTune and Youtube?

Which of the real-world objects in your life have neon-green consoles with monospaced character cells? Presumably naught but all the the neon-green consoles you have stashed somewhere.

This just in: OS X's window chrome is a skeuomorphic replica of OS X's window chrome.

This does not replicate the form or function of some random non-digital thing in the name of usability or user comfort.

Reply on news.ycombinator.com