As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
As one of those people that never got around to properly learning design (or having no talent for it), the design seems to be the step always holding me back. It's not a problem for rich-clients, as the standard GUI toolkits provide some acceptable ways to design a good-looking interface, but the web is another story.
Question: Does anyone know of a high-quality framework for designing the interface of web applications? I'm thinking of standard snippets of html for an adequate set of controls (the standard html controls plus maybe navigations, lists, forms) and style sheets to give it an acceptable, modern look. If such a thing existed, it could even support themes in the way wordpress, drupal etc. allow it.
I know of the yahoo yui, but that's mostly javascript, though their grid css is a step in the right direction.
Try the samples on ExtJs.
I find them immensely useful in working out the UI. (trees, panels, modals, etc etc)
I realise this is an old thread but it still comes high up in Google searches so it's worth mentioning that Twitter have recently put out Twitter Bootstrap, a "toolkit for kickstarting CSS for websites, apps, and more" which looks fantastic! » https://github.com/twitter/bootstrap
I'm not sure that what you're looking for exists in the way you're looking for it. However, I've had some luck with places like Open Source Web Design and Open Designs, which have some really slick templates that can be adapted to a web application so they at least don't look like crap.
There are also some commercial offerings, such as Gooey Templates.
Once you're getting closer to launch, you can contact a pro to fix the details for you, or simply build on what you've got.
Edited to add: You might also want to consider learning Blueprint CSS. I've found it helps guide my layouts and helps them look "right", without constraining me to the layout constructed for another purpose.
I'll suggest Google Web Toolkit if you're a Java developer. Examples
I'll also second the suggestion for Ext JS. It's got a vast array of really slick looking UI elements, incredibly well documented code, and a strong community.
You'd probably also find the myriad of Wordpress templates reasonably useful to build on, as Wordpress is at least reasonable at separating content from layout. The also tend to have a modern bloggy feel. Of course teaming up with a talented designer is the ideal way to go in my experience! :)
This will be more than a framework OP originally wanted but I'll suggest having a look at Morfik.
You'll be able to build pretty slick user interfaces with the conventional drag&drop way and with theming support (The homepage itself is built in Morfik). There're numerous other advantages Morfik provides, though let me not drift to off-topic for the subject. You may download the trial and see...
ps. Disclaimer: I'd worked for them.
you can check out this young site, http://guitemplates.com/. The templates are quite clear and modern, and at 20 bucks each they won't break your budget.
We had the same problem so we made our own. CSS UI (http://css-ui.com/), open-source UI framework. The concept is to use pre-defined CSS classes to style any element.
Check out http://jacanasoftware.com. Their templates feature multi level tabs, clean css, it validates, and the CSS won't mess with your controls. I highly recommend them.
Related
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
We are about to embark on the development of several complex business/intranet applications (lots of data, many functions, admin panels, doesn't need to be simplified for public use). With the advent of people doing real work on their phone browsers and tablets.. responsive design and 508/ARIA accessibility also creep into the mix of requirements.
We like a lot of what we find in the out-of-the-box Twitter Bootstrap (TB) (x-browser, jQuery, HTML/CSS template, lots of helper functions so we don't need HTML experts to make good looking pages, others). But, its layouts seem to drive us toward minimalistic (few controls/ less data on one screen), narrow (960-width) designs.
Does it make sense for us to even use TB if we're going to bloat and stretch the designs? Or are their better CSS/HTML/JS templates/kits out there for .Net "business applications"? Or any others that are still in favor that we should consider?
You have to choose the framework that you fell must comfortable with.
I like both Bootstrap, jQuery UI and YUI Library and use them a lot. I recently changed work and my first project was to change the entire internal admin application, and for this I have chosen Bootstrap.
Bootstrap with Knockout in ASP.NET MVC to be more detailed...
just as a tease on using Bootstrap... this is view of one of the segments:
and the main navigation menu:
to help others, the Main Menu is available on JsBin
it's a normal 3 columns .span2 with a wrapper called .super-menu and that style has only the width as:
.super-menu { width: 480px; }
witch means: 3 x .span2 + 3 x margin-left = (3 x 140) + (3 x 20) = 480px
Ironically, I think Bootstrap is even more useful for intranet/business apps than public-facing ones.
Some reasons I love using Bootstrap for internal apps:
Consistent interface (can be a con of public sites seeking a "unique" look)
Handles all the cross-browser, cross platform (mobile) issues you would have to deal with yourself
Proven to be efficient and flexible
Exponentially growing ecosystem ensures stability, support resources
Can easily be customised to your business' look and feel and then shared across developers or teams for re-usability
Built-in fluid application layout (addresses your narrow/minimalistic design concern)
Spend less time on interface concerns and more time on making sure your SQL queries over 3 years of sales history don't take 30 minutes to run
Components built on jQuery. Who doesn't love jQuery??
It's awesome :)
Edit:
If you're worried about more fancy plugins and features, the Github repo has almost 30,000 watchers and over 5,000 forks. Anything you can think of is probably being done or already completed - like a datepicker.
I've worked with jQuery mobile and enjoy it. Here's a project: http://2012barleadershandbook.philadelphiabar.org/
It seems like more of stripped down template that is easy to extend.
http://jquerymobile.com/
If you're adding video, remember to use something like fitvids: http://fitvidsjs.com/
Net Magazine's been name dropped quite a few in the last couple of days.
Ethan Marcotte name-dropped foundation and Fluid Baseline Grid in an interview there. Several more (too many to list individually, imo) were listed in this round-up of tools for responsive web design.
I would have to say no, the twitter bootstrap is still much too young to take on more complex applications. Though it is growing everyday, it is still missing a lot of UI elements that allows for easier content/data placement and organization - such as a proper datepicker, a content slider with better control over the content (pulling content from ajax, videos, auto resize, etc...), a more proper accordion that allows for better control over the content through javascript (auto height/width, on hover toggling) and it is still lacking on other things such as dialogs, animations/effects and widgets.
I would stick to the more mature frameworks we still have today such as jQuery UI or the YUI library and wait for the bootstrap to mature into what those frameworks are today.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
I'm a developer, and I find that I have a hard time dealing with graphic and visual design. It's as though the part of my brain devoted to abstract reasoning swallowed up the visual part.
There are a pile of awesome introductions to various programming languages that assume a certain level of sophistication with programming. Are there any such tutorials for HTML and CSS? As in tutorials that approach HTML and CSS in a similar way?
Failing that, what good web design tutorials might you guys recommend?
HTML and CSS are just means to an end. 20 years from now we may have something different, but design fundamentals stay the same. From your question, I think you want to develop a sense of what is visually pleasing and usable and have the understanding to implement such designs.
Along those lines, look at magazine layouts; look at professional advertising; look at logo design and try to pick out the things which make them distinctive. Look at websites which are popular, easy to browse, easy to read.
Take the things you see and like and try to incorporate a little of that into each design you build. Some of the tools (like Photoshop) can be daunting at first, so don't try to conquer the world. Just make each design better than the last.
Here's a real, doable example that starts with only minimal knowledge:
Read some tabular data from a database; as a programmer, I'm sure you know how to do that.
Read a tutorial anywhere on HTML tables. Their structure involves only 3 major tags and a handful of supporting ones. [See footnote #1]
Put the data in the table with no styling. Looks terrible, right? Now identify why it looks terrible. What is not pleasing to the eye? Compare it to a clean layout on another site that you like.
Examine small details like padding and margins and learn the basic CSS rules to implement those things. In doing so, you will begin to develop a sense of fundamental usability and aesthetic guidelines (such as the importance of well-placed whitespace).
Now take one of those "daunting" tools like Photoshop and accomplish a really simple task. Maybe it will be something as simple as cropping an icon or creating a simple gradient for your table heading. Pick a task, and find a tutorial if you need to.
This all sounds extremely simple, but you would be surprised how many developers never bother to even try.
Another Example
Fonts make a huge difference in the aesthetics and usability of a visual design. Start by perusing a few major sites and looking at commonly used fonts. Do a little reading on what fonts are commonly used in print, and why.
Now take a technical approach. What fonts can we safely use on the web? What tools are available to us as developers to embed custom fonts?
Armed with this knowledge, create a plain page and try styling a small news article (cut and paste the raw text from somewhere; it doesn't matter).
Choosing a good font will improve the design. But what about headings? Special styles like drop-caps? It's all there in HTML and CSS; start reading best practices on semantically structuring documents and how to implement different styles.
At the end of this exercise, will you be an expert? Of course not. But you will have discovered a whole set of new technical avenues that you should pursue further like semantic structures, the HTML document model, and CSS text-styling directives.
You may even come across multi-device/accessibility topics, such as how to accommodate screen readers.
As a designer, you will begin to understand the level of effort which goes into something as "simple" as styling text and you will start to develop that intangible sense of what "feels" right. The better you get, the more your audience will share that feeling.
My Opinion
It's a common misconception that developers can't/shouldn't be visual designers. I disagree; engineers should understand end user experience, heuristics, and aesthetics. Not everyone can be a great visual designer, but I have taught many people the basics and their designs are always a cut above the rest (even if they aren't perfect). I have also built my career upon being comfortable with the most technical and the most user-facing aspects and frankly, it's a lot of fun. Nothing is off-limits.
Links
A List Apart - Code Articles - Great articles on specific technologies, but make sure to not miss out on other general design articles.
Color Theory
Color Palettes
Printed Text Guidelines - Extremely applicable for certain types of websites.
CSS Basics - straight from the W3.
[Footnote #1] - to any HTML/CSS developers: I am not suggesting that the OP build table-based layouts; just suggesting that they take a familiar data structure and get a sense for the tasks involved in styling it.
Graphic design and HTML/CSS are almost completely different domains. What is it that you're looking to get better at? Graphic design using programs such as Photoshop or Gimp? Are you looking to get a better technical understanding of how CSS and HTML work? Or are you looking to understand good UX (User eXperience) design and how to incorporate that into HTML/CSS layouts?
I think you need a better understanding of what it is that you're looking for first. Maybe take a look at W3C specs as a starting point. Having a technical background, reading these specs should be relatively trivial (for the most part) and will help you understand what it is that you want to understand.
I think the best way to become a good web designer and developer at the same time is to learn web development tutorials at thenewboston.com, they make learning easy and fun at the same time.
After learning CSS, HTML, Javascript, etc, you can download source code of various website templates and learn how from them.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I need a JavaScript library that supports Ajax as well as help me in making simple and neat animation effects in a website I am working on.
Which library do you recommend?
I would definitely recommend JQuery as the easiest to use and the one which requires you to write the least code. http://jquery.com/
http://script.aculo.us/
I think it fits your 'neat animation effects' requirement.
That's a pretty broad question, some of the top open source stacks are
- YUI (Yahoo)
- Prototype with Scriptaculuous
- ExtJs
- Dojo
It's a pretty personal choice based on code style, look and feel, and which one you prefer.
Take a look at Dojo/Dijit/Dojox (http://dojotoolkit.org). They have a lot of cool special effects, and a lot more that will come in handy to anyone working with Javascript.
They also keep docs and related articles at http://dojocampus.org/
I like ExtJS a lot. It's a great library for developing complex interfaces with javascript.
I've been playing with Scriptaculous and jQuery. Both are good although I'm leaning more toward jQuery.
I am a fan of YUI. It supports Animation and Ajax.
In addition, there is just a plethora of controls: menus, movable windows, tree controls, sliders, tabview, the list goes on and on. I have used their code and I've had a good cross-browser experience with it. Doesn't surprise me. They do extensive testing on the toolkit.
Stack Overflow uses jQuery if that matters. Scriptaculous tries pretty hard to do everything that you can do in Flash. Dojo has an SVG abstraction that lets you do things that are not directly supported in JavaScript.
Personally, I'm a fan of MooTools' animation classes (Fx.Tween, Fx.Morph, Fx.Transitions). Very straight-forward and easy to use. For more advance animation Fx.Slide, Fx.Scroll and Fx.Elements are also available...
It also has a neat Ajax class (Request) that will take care of all your ajax needs.
Obviously though this is my personal opinion... Any of the big ones (Yahoo UI, jQuery, MooTools, Prototype etc...) will all be able to do both Ajax and Animation so I'd suggest looking at sample code from all those libraries and chose the one you like the most!
Spry has a lot of effects that seem to be relatively easy to use.
The downside (upside?) with Spry is its packaging. It's split into many separate pieces and parts.
So if you want to use a lot of Spry, you'll either be making several calls to external javascript files, or you'll be gluing them together on your own. Spry won't do it for you neatly (like YUI does).
However if you want to just use a single component or effect, Spry is very lightweight!
If you want to implement some basic animation jQuery is ok.
Also personally I like the prototype.js
For more difficult thing we using some features of Microsoft AJAX client library
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Can anyone out there recommend a good online resource for CSS 'design patterns'?
I know design patterns in a software context usually refer to OO based design patterns, but I mean design patterns in the broader sense of the term: i.e. common, clean solutions to common problems / tasks.
An example of such a resource would be this list of table designs, this gives you all you really need to know about how to make tables look nice using a set of CSS techniques.
Other examples of common problems which could have nice set solutions would be things like rounded corners on divs, highly usable form layouts etc.
Some websites that address web design patterns are listed below. They do not specifically provide the HTML and/or CSS in order to achieve the desired results, but they do provide examples of live sites that you can view source on (or, even better, use Firebug).
UI-patterns
This is probably the best of the bunch. It breaks things down into categories that cover the breadth of web page design tasks. You'll find categories such as tag-clouds, live preview and user registration among many others. This is a really comprehensive resource that is well organized. It explains each pattern and provides plenty of examples.
Pattern Tap
Similar to UI-Patterns although currently not as comprehensive. It takes a more social approach to collating design patterns by allowing users to create their own categories ("user sets") and populate them with their own selection of sites.
Yahoo Design Pattern Library
Unlike the other two, this one doesn't provide many examples of real sites. It is well organized and quite comprehensive.
Elements of Design
This is a blog showcasing various elements of web design. It doesn't discuss the patterns, but is good as a quick source of inspiration, or as a means to start your own analysis.
I refer to A List Apart articles all the time for those sorts of
things.
They do a lot of trial-and-error research to come up with really creative ways to handle those common CSS problems in the cleanest most portable way possible.
The Floatutorial is a great starting point for learning the important CSS attribute "float" and how to use it to layout content using some common patterns including two-column and three-column liquid layouts.
Floatutorial takes you through the
basics of floating elements such as
images, drop caps, next and back
buttons, image galleries, inline lists
and multi-column layouts.
The already mentioned A List Apart is really good. Another site I've used since I started web development is SitePoint.com. Here is their CSS Reference. If you want a good CSS book their's is one of my favorites.
The nearest thing to a "design pattern" in CSS are common layouts. The best tool for taking advantage of common layouts, column widths, etc. is 960 grid system, at 960.gs
Watch this screencast for a brief intro. It saves a ton of time, and helps you apply all the common layout patterns with minimal code:
http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/
All you have to do is to apply the proper classes and do a little arithmetic to make sure all the column widths add up.
The one book that I recommend the most for CSS is CSS Mastery by Andy Budd (cssmastery.com). It is somewhat small, but it has helped me more than any other CSS book.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am looking for a text editor to be used in a web page. Where users can format the text and get a WYSIWYG experience. Doesn't need to be too fancy. But has to be easy to use and integrate into the page. Has to generate HTML as output. Support AJAX (one I checked works only with standard form submit) and has to be small in terms of download to the user's browser.
Well it depends what platform you are on if you are looking for server-side functionality as well, but the defacto badass WYSIWYg in my opinion is FCKeditor. I have worked with this personally in numerous environments (both professional and hobby level) and have always been impressed.
It's certainly worth a look. I believe it is employed by open source projects such as SubText as well. Perhaps, Jon Galloway can add to this if he reads this question. Or Phil if he is currently a user.
TinyMCE is the simplest I've found to use. I've never used it in an AJAX-enabled application, but there are instructions on how to do so on the project's wiki.
Try FCKeditor. It supports integration with most popular platforms, and it's fairly lightweight.
You might also want to look at YUI's Rich Text Editor.
If you're starting your site from scratch or haven't invested a lot of effort into another JavaScript platform, Yahoo User Interface (YUI) is a very complete JavaScript library that could help you add other AJAX elements beyond a text editor.
I just did a full day of evaluation of all the ones mentioned so far (and then some), and the one I liked the best is Obout Editor. I think it might be for ASP.NET only, so it might not work for you, but if you are using .NET, it's great. The HTML output is clean and nicely styled, and the rendered output looks the same in the editor as it does when you output it to the page (something I had trouble with when using the others due to doctype settings in the editor). It costs a few bucks, but it was worth it for us.
I found TinyMCE pretty easy to implement. And it's light on bandwidth usage too.
Using fck for some tine now, after "free text box", or something like that. Had problems only once, when I put fck inside asp.net ajax updatepanel, but found fix on forums. Problem was solved in next release.
I would like to see some nice photo browser in it, because fck comes only with simple browser that displays filename, no thumbs. The other one, that has thumbs costs bunch of money.
Didn't try it with asp.net mvc, don't know how will uploading work. It uses one ascx for wrapping js functionality.
i started out using free text box when i was doing a lot of asp.net programming, but now that most of what i do is php i've moved to the FCK editor.
while the change wasn't necessarily prompted by the language, i feel that the fck editor is a better choice because of it's versatility.
For something minimalist, take a look at Widg Editor, it's truly tiny and very simple. It's only haphazardly supported as a hobby project though.
I'm currently using the RTE component of DynarchLib, which is highly customisable - definitely does AJAX - but a bit complicated and not very pretty. It is actively supported, and you can get answers on their forum very quickly.
I previously tried Dojo's editor, and found it broken and badly undocumented. YMMV.
Edit: In response to other people's answers, I've now tried TinyMCE and found it to be excellent. More easily configurable and far fewer problems than anything else I've tried. Use TinyMCE!