Welche Ressourcen können mir bei einigen grundlegenden Designfähigkeiten für eine interne Webanwendung helfen?

Welche Ressourcen könnte ich (ein Programmierer) finden, um mir mit einigen grundlegenden Designfähigkeiten für eine interne Webanwendung zu helfen? Ich möchte es nicht so aussehen lassen, als wäre es von der Stange, aber ich möchte Informationen in einem schönen Format zusammenfassen, tabellarische Daten schön anzeigen lassen, einige Symbole für "Hilfe" erhalten, sortieren, löschen, hinzufügen, Speichern usw. Ich möchte mit einigen Best Practices für das Entwerfen von Berichten beginnen, damit sie relativ sauber gedruckt werden können usw.

Antworten (2)

Die erforderlichen Fähigkeiten können Grafikdesign, UI-Design, Informationsarchitektur, Benutzererfahrung und Front-End-Entwicklung (CSS, HTML, JS) umfassen.

Da Sie nicht wissen, welche dieser Fähigkeiten Sie haben oder nicht, einige allgemeine Vorschläge:

  • stehlen. Schauen Sie sich viele gute Schnittstellen an. Von ihnen ausleihen.
  • halte es einfach. Verwenden Sie weniger Farben, nicht mehr. Verwenden Sie weniger Bildschirmlayouts, nicht mehr.
  • einen Rahmen nutzen. Heutzutage gibt es viele UI-Frameworks ... jQuery UI ist eines von vielen.
  • konzentrieren sich auf Aufgaben.
  • Benutzertest.
  • Denken Sie wie ein Benutzer
Tut mir leid – ich bin ein .Net-Entwickler, aber ich habe meine Zähne in HTML, JS und CSS in Notepad geschnitten, also bin ich sehr webzentriert. Ich versuche, wenige Farben zu verwenden – bis zu dem Punkt, an dem ich am Ende immer ein sehr helles Grau für den Hintergrund, ein sehr dunkles Grau für Text und Rot für Fehlermeldungen habe. Deshalb bin ich hier. :) Danke für den Hinweis. Ich drucke es aus und klebe es an meine Wand.
Es ist lange her, seit ich .net gemacht habe, aber ich habe gehört, dass es jetzt ziemlich einfach ist, jQuery zu integrieren ... also könnte es vielleicht eine gute Idee sein, sich die jQuery-Benutzeroberfläche anzusehen. Viel Glück!
Ja - jQuery UI ist für mich selbstverständlich, wenn auch nur für die Datumsauswahl.

Frameworks sind auf jeden Fall eine gute Idee. Bootstrap ist eines der bekanntesten, aber MailChimp hat auch eine Sammlung atomarer Elemente, die verwendet werden können, um schnell neue UIs zusammenzustellen. Es heißt Musterbibliothek .

Einige andere interessante Referenzen (eher ein Link-Wahnsinn, aber Sie könnten einige davon interessant finden!):

  • Compose to a Vertical Rhythm ist eine Anleitung zur Berechnung des optimalen vertikalen Rhythmus (der Abstand und die Anordnung von Text, wenn der Leser die Seite hinuntergeht) unter Verwendung von Schriftgröße, Zeilenhöhe und Rand oder Abstand.

  • Ein ähnlicher Ansatz, jedoch für Grundlinienraster (Eine Grundlinie gewährleistet einen angemessenen Zeilenabstand (Zeilenhöhe) und ist in jedem Layout, das Spalten verwendet, von unschätzbarem Wert).

  • Ein Leitfaden und eine Bibliothek zu Responsive Tables , falls Ihre Website auf unterschiedliche Auflösungen oder Geräte reagieren soll.

  • Der Artikel des Smashing Magazine über die Benutzerfreundlichkeit von Webformularen und ihr System zum Bewerten und Vergleichen von Websites :) Ich empfehle definitiv, ihre Artikel zu lesen, die meisten sind wirklich gut!