Designverbesserung?
Hallo, ich muss für die Schule eine Website machen, auf der man ToDo Lists erstellen kann. Wie ihr sehen könnt, ist mein Design schön gesagt, verbesserungswürdig. Habt ihr Ideen oder bessere Farbkombinationen?
4 Antworten
1) Vom Inhalt her scheint der Text links oben eigentlich die Überschrift der kompletten Webseite zu sein. Visuell erscheint es jedoch gleichrangig zur Überschrift auf der rechten Seite.
Entweder sollte der Inhalt angepasst oder eine farbliche Hervorhebung erfolgen.
2) Mit dem Blubberblasen-Design teilst du dein Layout in mehr visuelle Bestandteile auf, als sinnvoll. So grenzt du beispielsweise die rechte Überschrift zu sehr von der darunterliegenden Liste ab, obwohl sie inhaltlich doch zusammengehören.
Ich würde:
- (überall) die abgerundeten Ecken entfernen bzw. extrem reduzieren. Wenn man einen weichen Effekt haben möchte, reicht ein border-radius von ungefähr 2px vollkommen aus. Es genügt zudem, ihn nur für einige, bestimmte Elemente (z.B. Interaktionselemente) einzusetzen.
- den Hintergrund für die Überschriften entfernen. Für eine Abgrenzung zwischen Inhalt und Überschrift würde ich maximal eine Trennlinie (border-bottom) einsetzen. In dem Fall sollte dann auch die Breite der Liste an die Breite der Überschrift angepasst werden.
3) Bezogen auf die Schaltflächen / Interaktionselemente hast du keinen einheitlichen Stil. Die Buttons sollten deutlicher hervorstechen.
Ich würde vorschlagen, eine warme Farbe anzuwenden. Zumindest die Buttons in der Liste könnten zudem Icons weichen. Wenn du dir nicht eigene basteln möchtest, schau auf Seiten wie CoreUI, FontAwesome, HeroIcons, IcoMoon, o.ä.. Ein horizontaler Abstand von ungefähr 5px dürfte genügen.
4) Ein dunkles Design muss sich nicht zwangsläufig aus Schwarz- und Grautönen zusammensetzen, zumal Interaktionselemente, wie schon geschrieben, stärker als interagierbare Elemente hervorstechen sollten.
Passende Farbpaletten kannst du dir mit Generatoren wie Adobe Color oder Paletton zusammenstellen.
5) Das Formular könnte auch direkt in die Liste verbaut werden. Beispielsweise in einem ersten oder letzten Listenelement (mit demselben Style, wie die anderen To-Do-Einträge).
Für die Eingabe des Titels einer neuen Aufgabe sollte ein einfaches Textfeld genügen. Indem du die Felder etwas anders anordnest, gewinnst du mehr Platz.
Beispiel:
Title Datum +
Beschreibung
Initial kannst du das Beschreibungsfeld auf eine geringere Zeilenanzahl setzen. Erlaube dem Nutzer, das Feld zu vergrößern, dann ist es flexibel.
Anschließend könnte man noch mit der Darstellung der Eingabefelder etwas herumspielen. Rahmen und eine sichtbare Hintergrundfarbe sind womöglich gar nicht notwendig.
Das Datumsfeld sieht ziemlich verloren aus, sowohl vom Design her als auch der Position
Auf den ersten Blick habe ich nicht erkennen können wo man neue Tasks eingibt, dafür muss man erst die Beschreibung lesen. Vielleicht findest du eine Lösung wie sich das mehr abhebt voneinander mit Farben oder Schatten oder icons. Oder wenn es technisch geht, dass neue to dos in einem pop up fenster erstellt werden und dann erst auf den hauptbildschirm springen (ich denke da an google keep)
Auch wäre icons auf den buttons statt details, favorite usw. schöner
Die Farben finde ich schrecklich ehrlich gesagt, bin persönlich ein fan von blautönen aber wenn du im dark mode bleiben möchtest dann lieber dunkelgrau als hintergrund der boxen statt schwarz und vielleicht eine bunte farbe für besondere felder
Sonst schon mal gute Arbeit!
ach so, ja dann mach dich nicht verrückt damit. ist auf jeden fall schon vom aufbau her gut
Farben kannst du dir auf coolors.co zusammenstellen.
Findest du aber, dass es vom generellen Layout passt? Also von der Position der Komponenten
Könntest den border-radius einheitlicher machen, etwas dezenter. Bei den Textboxen border-style solid.
Unter den Textboxen könntest du das Datum und den Add Button nebeneinander machen.
Sieht nach Bestattungsinstitut aus
Warum nimmst du nicht freundliche Grüne oder Blaue Farbpalette
Unser Lehrer ist Darkmode süchtig. Ich glaube der würde sogar seine Nachttischlampe auf Darkmode stellen ;)
Danke, sind gute Ideen. Vor allem an den Farben muss ich was ändern. Auch am Datumsfeld. Ansonsten denke ich nicht, dass der Lehrer extrem viel erwartet. Er hat uns einen ungefähren Zeitrahmen von 2 Stunden gegeben.