Common Web UI Styles

Question

I have to present a prototype of an web app in the following days to one of my clients, the thing is I'm not so good at CSS and worst of all I'm almost never happy with the results I get.

Coding the business logic poses no challenge to me, the UI design however takes more than 80% of my time. I don't need nothing breathtaking, just a clean, nice and presentable environment, an example:

This is a recurring problem I've been having, I wish web UI development could have a less naked default style, an approach similar to Visual Studio or iPhone SDK would be very useful to me.

The above mockup created with Balsamiq Mockups is a great example, all the most common "components" are available to use, and best of all: there is only one good-looking style to choose from.

Is there something like this for the web? A neutral yet nice CSS or Javascript UI framework?

---

Options so far:

• Qooxdoo
• jQuery UI
• jQuery Tools
• MochaUI
• Ext JS
• Yahoo! User Interface Library
• BlueTrip
• BluePrint
• Uki (Demo)
• Napkee
• YAML
• Baseline
• iPlotz
• Sproutcore
• ForeUI

I'm interested in knowing if there are any CSS-only UI frameworks.

I found this page with a very nice list of Web UI Libraries, but most of them (at least the good ones) seem to be specific to Java, are there any equally good alternatives in pure CSS or JS?

PS: I'm not interested in AJAX, effects, behaviors and so on... my main (only) concern is style.

---

Thanks for all the suggestions everyone!

After a very careful consideration of all the UI libraries suggested, I've come to the conclusion that ExtJS and Qooxdoo are the ones that most closely fit my needs. jQuery UI seems promising but only offers a reduced amount of elements.

As far as CSS-only libraries go I've found BlueTrip / BluePrint and the themes suggested by tambler to be the best. Aside from that, Flex and Napkee also seem to be worth exploring.

Time to learn ExtJS now! =)

Answer 1

There are a few frameworks aimed at (G)UI Design; Qooxdoo, JQuery UI and MochaUI being a few of them (although the last is more a proof-of-concept than a usable framework). These frameworks usually offer a variety of JS-powered elements (form elements, such as input fields and submit buttons, but other elements like tabs as well). However, it will still be up to you to position these elements, and perhaps style them, to your liking.

Perhaps familiarizing yourself with a CSS framework (such as 960GS) might complement the above JS UI Frameworks.

(As a personal disclaimer; I have very little experience with any of the frameworks mentioned above. But I'm sure either Google or SO can provide answers I can't.)

Answer 2

Have you tried Axure? It's a tool for rapidly creating wireframes, prototypes and specifications for applications and web sites.

It works in a similar way to Balsamiq, but it allows you to export your wireframes/prototype as HTML, CSS and Javascript.

You can then upload this to a server or run it on your computer as a working example.

You can create forms, links, tabs, rollovers, Javascript effects.

Answer 3

What about using dojo and dijit?

Dijit is a fast way to create widgets and elements. It also comes with 3 default themes which are easy to modify.

A good list of different widgets here

Answer 4

A combination of 960gs for layout and jQuery-UI for styling is probably what you are after.

You could also consider the blueprint CSS framework instead of 960gs.

Answer 5

This won't help you out for your current project, but it's worth considering for future projects. After spending many years creating GUI applications in HTML 4 and constantly wrestling against the limitations of CSS and HTML, I thought I'd try out Adobe Flex. What an improvement!

Rather than faking a tabbed page control or data grid, with Flex or Silverlight, your markup can simply specify a tabbed page control or data grid. And the frameworks come with default styles that are boring but not at all bad. I'm not saying these completely replace HTML, but if you need widgets and GUI layout, I believe they're a much better alternative.

Answer 6

A combination of 960gs for layout and jQuery-UI or Jquery tools is great i use them almost in every project but i'd like to add to http://easyframework.com/ although its not a business friendly so make sure to check out its license but i like it

Answer 7

If you are already using Balsamic Mockups for your prototypes then you should consider Napkee. To quote the website "Napkee lets you to export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3 at a click of a button."

Answer 8

I ran into this awhile ago, and couldn't find anything, so I took it as an opportunity to learn css. But since then it seems great strides have been made towards this subject.

• Summarizing your problem, there is a wikipedia page.
• There is yaml-css, which takes yaml and turns it into css
• There is baseline, but it assumes some css knowledge.
• I'd also suggest looking at Adobe's Dreamweaver. They have a lot of css and style generation tools which produce very readable and w3c compatible code.

I hope that helps.

Answer 9

I recently discovered a nice website called iplotz.com where you can create a mockup of your application/website/project online without installing anything. It also has most of the common controls, along with much more features for managing thw whole project and sharing it with others online.

I must admit, i didn't try it yet myself, but i looked at it a bit and it seems pretty cool. I'll probably be using it soon enough.

Answer 10

You might consider browsing the following site:

http://themeforest.net/category/site-templates/admin-skins

There are several "Administrative" themes available for purchase here that may suit your needs.

Answer 11

Check out Google Web Toolkit. It has a pretty clean default look. They have examples . In particular, their Showcase example demonstrates all of the available widgets and the css styling used to achieve the look.

Answer 12

I can't believe nobody has mentioned:

http://www.extjs.com/

Its a commercial js frameworks, but pretty affordable, and makes putting together a nice UI a breeze. There's a much more complete set of elements then jqueryui, and its designed to make an entire app. I've only played with it a little, but I really love it so far. Free for personal use.

If you really want to get a feel for a complete UI developed with EXT, try this url:

http://www.extjs.com/deploy/dev/examples/feed-viewer/view.html

Answer 13

wireframe mockups like that are a brilliant way to start.

Having used most of the UI framewroks discussed here, I'd liek to steer you towards jQueryUi for the following reasons:

1. jQueryUI CSS framework takes care of the consistent and cool looking CSS for you (it's really easy - just make some markup and apply the classes)

2. jQueryUI has tabcontrol, and heaps on neat quick easy ways to style forms.

Answer 14

My best advice to you is to pair up with someone who DOES excel at UI design.

Assuming the 20% of the time you're coding the business logic of a web app is worth something (meaning you are objectively good at it)... Your time will be better off spent sticking with the business logic and mastering it, while you learn to interface with someone else who excels at presentation.

Business logic and presentation are very different as I see them. Designing a system that not only looks good, but is intuitive and easy to use is quite difficult. Equally as difficult as establishing the frameworks and inter workings of a complex application.

A good interface is not as simple as including a css framework.

For example, I consider myself to be a more 'creative' programmer who does excel in presentation. I happened to be lucky enough to cross path's with someone who was, first of all... very motivated, and second of all very good at 'business logic'. He had a lot more experience planning and implementing complex systems, while I mainly have been focusing on interface design.

If you are more productive doing system architecture, planning, developing, whatever... you should push yourself in that direction.

The challenge is finding someone who you work well with.

Answer 15

If you are targeting modern, non IE, browsers, then you should check out Sproutcore. For mockups I use mockingbird.