Allgemeine Web-UI-Stile

Ich muss einem meiner Kunden in den folgenden Tagen einen Prototyp einer Web-App präsentieren. Ich bin nicht so gut in CSS und am schlimmsten bin ich fast nie zufrieden mit den Ergebnissen, die ich erhalte.

Das Codieren der Geschäftslogik stellt für mich keine Herausforderung dar. Das UI-Design nimmt jedoch mehr als 80% meiner Zeit in Anspruch. Ich brauche nichts Atemberaubendes, nur eine saubere, schöne und präsentable Umgebung, ein Beispiel:

Dies ist ein wiederkehrendes Problem, das ich hatte. Ich wünschte, die Entwicklung der Web-Benutzeroberfläche könnte einen weniger nackten Standardstil haben. Ein Ansatz ähnlich dem von Visual Studio oder iPhone SDK wäre für mich sehr nützlich.

Das obige Modell, das mit Balsamiq Mockups erstellt wurde, ist ein großartiges Beispiel. Alle gängigen "Komponenten" stehen zur Verfügung, und das Beste ist: Es gibt nur einen gut aussehenden Stil zur Auswahl.

Gibt es so etwas für das Web? Ein neutrales, aber nettes CSS- oder Javascript-UI-Framework?

Bisherige Optionen:

• Bootstrap
• Qooxdoo
• jQuery-Benutzeroberfläche
• jQuery Tools
• MochaUI
• Ext JS
• Yahoo! Benutzeroberfläche Bibliothek
• BlueTrip
• Entwurf
• Uki ( Demo )
• Napkee
• YAML
• Basislinie
• iPlotz
• Sproutcore
• ForeUI

Ich bin daran interessiert zu wissen, ob es nur CSS-UI-Frameworks gibt.

Ich fand diese Seite mit einer sehr schönen Liste von Web-UI-Bibliotheken , aber die meisten (zumindest die guten) scheinen spezifisch für Java zu sein. Gibt es in reinem CSS oder JS gleich gute Alternativen?

PS: Ich interessiere mich nicht für AJAX, Effekte, Verhaltensweisen und so weiter ... mein Hauptanliegen (nur) ist der Stil.

Vielen Dank für alle Vorschläge an alle!

Nach einer sehr sorgfältigen Prüfung aller vorgeschlagenen UI-Bibliotheken bin ich zu dem Schluss gekommen, dass ExtJS und Qooxdoo diejenigen sind, die meinen Anforderungen am besten entsprechen. Die jQuery-Benutzeroberfläche scheint vielversprechend, bietet jedoch nur eine reduzierte Anzahl von Elementen.

In Bezug auf reine CSS-Bibliotheken habe ich BlueTrip / BluePrint und die von Tambler vorgeschlagenen Themen als die besten befunden. Abgesehen davon scheinen Flex und Napkee auch eine Erkundung wert zu sein.

Zeit, ExtJS jetzt zu lernen! =)

Ich kann nicht glauben, dass niemand erwähnt hat:

http://www.extjs.com/

Es ist ein kommerzielles js-Framework, aber ziemlich erschwinglich und macht das Zusammenstellen einer schönen Benutzeroberfläche zum Kinderspiel. Es gibt einen viel vollständigeren Satz von Elementen als jqueryui, und es wurde entwickelt, um eine ganze App zu erstellen. Ich habe nur ein bisschen damit gespielt, aber ich liebe es bis jetzt wirklich. Kostenlos für private Nutzung.

Wenn Sie wirklich ein Gefühl für eine vollständige Benutzeroberfläche bekommen möchten, die mit EXT entwickelt wurde, versuchen Sie diese URL:

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html

Eine Kombination aus 960 g für das Layout und jQuery-UI für das Styling ist wahrscheinlich das, wonach Sie suchen .

Sie können auch das Blueprint- CSS-Framework anstelle von 960 g in Betracht ziehen.

Was ist mit Dojo und Dijit ?

Dijit ist eine schnelle Möglichkeit, Widgets und Elemente zu erstellen. Es enthält außerdem 3 Standardthemen, die leicht zu ändern sind.

Eine gute Liste verschiedener Widgets hier

Arbeiten Sie mit jemandem zusammen, der sich auf UI-Design spezialisiert hat.

Wenn Sie besser mit Geschäftslogik umgehen können, ist es besser, Ihre Zeit ausschließlich damit zu verbringen, Geschäftslogik zu codieren, damit Sie sie beherrschen können. Dazu müssen Sie lernen, wie Sie mit anderen Personen kommunizieren, die sich bei der Präsentation auszeichnen. ( XML und JSON sind übliche Mittel)

Geschäftslogik und Präsentation sind sehr unterschiedlich. Es ist ziemlich schwierig, ein System zu entwerfen, das nicht nur gut aussieht, sondern auch intuitiv und einfach zu bedienen ist. Ebenso schwierig und zeitaufwändig wie die Einrichtung des Innenlebens einer komplexen Anwendung.

Eine gute Schnittstelle ist nicht so einfach wie das Einfügen eines CSS-Frameworks.

Ich betrachte mich als einen "kreativeren" Programmierer, der sich durch hervorragende Präsentation auszeichnet. Ich hatte das Glück, den Weg mit jemandem zu kreuzen, der erstens ... sehr motiviert und zweitens sehr gut in "Geschäftslogik" war. Er hatte viel mehr Erfahrung in der Planung und Implementierung komplexer Systeme, während ich mich hauptsächlich auf das Interface-Design konzentrierte.

Wenn Sie produktiver mit Systemarchitektur, Planung, Entwicklung usw. arbeiten, sollten Sie sich in diese Richtung bewegen. Während Solo-Entwicklungsprojekte ziemlich erfüllend sein können, halte ich es für ineffizient. Es ist sehr selten, dass jemand über Fähigkeiten verfügt, um Anwendungen auf höchstem Niveau allein zu entwickeln.

Die Herausforderung besteht darin, jemanden zu finden, mit dem Sie gut zusammenarbeiten.

Schauen Sie sich das Google Web Toolkit an . Es hat ein ziemlich sauberes Standard-Aussehen. Sie haben Beispiele . Das Showcase- Beispiel zeigt insbesondere alle verfügbaren Widgets und das CSS-Design, mit dem das Erscheinungsbild erzielt wurde.

Es gibt einige Frameworks, die auf (G) UI-Design abzielen. Qooxdoo , JQuery UI und MochaUI sind nur einige davon (obwohl das letzte eher ein Proof-of-Concept als ein verwendbares Framework ist). Diese Frameworks bieten normalerweise eine Vielzahl von JS-basierten Elementen (Formularelemente wie Eingabefelder und Senden-Schaltflächen, aber auch andere Elemente wie Registerkarten). Es liegt jedoch weiterhin an Ihnen, diese Elemente zu positionieren und möglicherweise nach Ihren Wünschen zu gestalten.

Vielleicht kann das Kennenlernen eines CSS-Frameworks (wie 960GS ) die oben genannten JS UI-Frameworks ergänzen.

(Als persönlicher Haftungsausschluss; ich habe sehr wenig Erfahrung mit einem der oben genannten Frameworks. Aber ich bin sicher, dass entweder Google oder SO Antworten liefern können, die ich nicht kann.)

Dies hilft Ihnen bei Ihrem aktuellen Projekt nicht weiter, aber es lohnt sich, es für zukünftige Projekte in Betracht zu ziehen. Nachdem ich viele Jahre damit verbracht hatte, GUI-Anwendungen in HTML 4 zu erstellen und ständig gegen die Einschränkungen von CSS und HTML zu kämpfen, dachte ich, ich würde Adobe Flex ausprobieren. Was für eine Verbesserung!

Anstatt ein Seitensteuerelement oder ein Datenraster mit Registerkarten zu fälschen, kann Ihr Markup mit Flex oder Silverlight einfach ein Steuerelement oder ein Datenraster mit Registerkarten angeben. Und die Frameworks werden mit Standardstilen geliefert, die langweilig, aber überhaupt nicht schlecht sind. Ich sage nicht, dass diese HTML vollständig ersetzen, aber wenn Sie Widgets und GUI-Layout benötigen, sind sie meiner Meinung nach eine viel bessere Alternative.

Sie können die folgende Website durchsuchen:

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

Hier können Sie verschiedene "administrative" Themen erwerben, die Ihren Anforderungen entsprechen.

Drahtmodellmodelle wie dieses sind ein hervorragender Einstieg.

Nachdem ich die meisten der hier diskutierten UI-Framewroks verwendet habe, möchte ich Sie aus folgenden Gründen in Richtung jQueryUi lenken:

1. Das jQueryUI CSS-Framework kümmert sich für Sie um das konsistente und cool aussehende CSS (es ist wirklich einfach - machen Sie einfach ein Markup und wenden Sie die Klassen an).

2. jQueryUI verfügt über Tabcontrol und bietet zahlreiche schnelle und einfache Möglichkeiten zum Formen von Formularen.

Wenn Sie auf moderne Browser ohne IE abzielen, sollten Sie sich Sproutcore ansehen . Für Modelle verwende ich Spottdrossel .

Ein relativ neues PHP-Framework, das speziell für die Entwicklung von UI-fokussierter Software entwickelt wurde. Elemente, die Sie hier haben, einschließlich Registerkarten, Filter und Raster, sind enthalten und benötigen ungefähr 20 Codezeilen, um sie zu implementieren.

http://agiletoolkit.org/

Haben Sie Axure ausprobiert ? Es ist ein Tool zum schnellen Erstellen von Drahtmodellen, Prototypen und Spezifikationen für Anwendungen und Websites.

Es funktioniert ähnlich wie Balsamiq, aber Sie können Ihre Wireframes / Prototypen als HTML, CSS und Javascript exportieren.

Sie können dies dann auf einen Server hochladen oder als Arbeitsbeispiel auf Ihrem Computer ausführen.

Sie können Formulare, Links, Registerkarten, Rollover und Javascript-Effekte erstellen.

Wenn Sie bereits Balsamico-Modelle für Ihre Prototypen verwenden, sollten Sie Napkee in Betracht ziehen . Um die Website zu zitieren: "Mit Napkee können Sie Balsamiq-Modelle auf Knopfdruck in HTML / CSS / JS und Adobe Flex 3 exportieren."

Ich bin vor einiger Zeit darauf gestoßen und konnte nichts finden, also habe ich es zum Anlass genommen, CSS zu lernen. Aber seitdem scheinen große Fortschritte in Richtung dieses Themas gemacht worden zu sein.

• Zusammenfassend gibt es eine Wikipedia-Seite .
• Es gibt yaml-css , das yaml nimmt und es in css verwandelt
• Es gibt eine Grundlinie , die jedoch einige CSS-Kenntnisse voraussetzt.
• Ich würde auch vorschlagen, sich Adobe Dreamweaver anzusehen . Sie haben viele Tools zur CSS- und Stilgenerierung, die sehr lesbaren und w3c-kompatiblen Code erzeugen.

Ich hoffe das hilft.

Eine Kombination von 960gs für Layout- und jQuery-UI- oder Jquery-Tools ist großartig. Ich verwende sie fast in jedem Projekt, aber ich möchte sie zu http://easyframework.com/ hinzufügen, obwohl sie nicht geschäftsfreundlich ist seine Lizenz, aber ich mag es

Ich habe kürzlich eine schöne Website namens iplotz.com entdeckt, auf der Sie online ein Modell Ihrer Anwendung / Website / Ihres Projekts erstellen können, ohne etwas zu installieren. Es verfügt außerdem über die meisten gängigen Steuerelemente sowie über viel mehr Funktionen zum Verwalten des gesamten Projekts und zum Online-Teilen mit anderen.

Ich muss zugeben, ich habe es noch nicht selbst ausprobiert, aber ich habe es mir ein bisschen angesehen und es scheint ziemlich cool zu sein. Ich werde es wahrscheinlich früh genug benutzen.

Sass scheint das Potenzial zu haben, einige CSS-Kopfschmerzen zu lindern.

Ich möchte Bootstrap hinzufügen , das intuitive und leistungsstarke Front-End-Framework für eine schnellere und einfachere Webentwicklung.

Ich mag RocketCSS . Schönes, sauberes Design, probieren Sie es aus.