Kritik: Wie verfeinere ich das Erscheinungsbild von Karteikarten in meiner Web-App?

Ich erstelle eine Web-App und habe mehrere Fragen zu ihrem Aussehen. Zuerst ist hier ein "Screenshot" (nur ein Test mit Pixelmator) :

Der Screenshot

Das Element in der Mitte ist eine Karteikarte, die Pfeile rechts und links lassen den Benutzer durch die Karten blättern.

  • Glaubst du, dass die Lernkarte wie eine Karte aussieht ? Wie kann ich das „Kartenfeeling“ verbessern und dabei die Optik so einfach wie möglich halten?

  • Halten Sie es für eine gute Idee, die Pfeile weiß zu lassen ? Oder sollte ich das gleiche Schwarz wie die anderen Elemente oben verwenden? (Ich habe eine weiße Farbe gewählt, weil ich denke, dass diese Pfeile mehr mit der Karte verbunden sind als die anderen Elemente, ist es richtig, das zu tun?)

  • Was halten Sie davon, dass ich nicht dieselbe Schriftart für die Karte und für die Benutzeroberfläche verwende? Ich mache das, weil ich denke, dass eine Serifenschrift besser geeignet ist und dass sie hilft, den Text vom Inhalt zu unterscheiden. Und auch, weil ich denke, dass es dem Benutzer helfen könnte, sich leichter an das Wort zu erinnern.

UPDATE (hier ist eine neue Version, ich bin dem Rat von Jenna gefolgt und jetzt werden die Karten als Stapel angezeigt, und den Wörtern auf den Karten wurde auch ein Buchdruckeffekt hinzugefügt):

Geben Sie hier die Bildbeschreibung ein

Antworten (1)

Ich denke, eine einfache Möglichkeit, es ein wenig kartenartiger aussehen zu lassen, wäre, eine sehr subtile Papierstruktur wie unten zu geben und die Farbe ein wenig gebrochenes Weiß zu haben; #ffffff ist zu weiß für Papier. Ich habe auch einen kleinen Schlagschatten gegeben, was meiner Meinung nach dazu beiträgt, es sowohl einfach als auch ein bisschen kartenartiger zu halten.

Ich stimme zu, dass die Pfeile weiß sind, es ist logisch, da sie nach der Karte selbst der zweitwichtigste Inhalt auf der Seite sind. Es macht Sinn, dass es eher zum Körper als zum Menü passt.

Die unterschiedliche Schriftart würde ich sagen macht Sinn. Es ist gut, den Inhalt ein wenig vom Menü zu trennen. Ich stimme auch zu, dass es für eine Person einfacher ist, sich zu erinnern, wenn sie anders ist. Aus dem gleichen Grund habe ich das Wort „Montagne“ etwas größer gemacht, und obwohl es nicht ganz schwarz ist (#000000), ist es nah dran. Der Kontrast hilft auch.

Ich würde auch vorschlagen, dass Sie bei Wörtern mit unterschiedlichen Themen das Hintergrundbild ändern könnten, die Farbe wird dann mit dem Wort verknüpft, um ein leichteres Erinnern zu ermöglichen. (dh jetzt verbinde ich Montagne mit Grün und Berg)

Hier ist das Original auf der linken Seite und ein kurzes Beispiel für eine kleine Textur, cremefarbene Farbe und etwas Schlagschatten und erhöhten Text, um es einfach und klar zu halten.

Geben Sie hier die Bildbeschreibung ein

Aktualisieren

Das Stapeln sieht toll aus, besonders mit der Konsistenz der Lichtquelle und der schönen Schattenbildung. Hier ist ein weiteres Beispiel mit etwas zusätzlichem monochromatischem Rauschen (wie von Aaron vorgeschlagen), das die Papierstruktur hervorhebt. Ich habe dem Rauschen eine kleine Bewegungsunschärfe hinzugefügt, da das Papier bei genauerem Hinsehen ein etwas raues Pinsel-Finish zu haben scheint und das Rauschen die kleinen Inkonsistenzen der Papierdichte hervorhebt.

Alles in allem sieht deins aber sehr gut aus und das ist nur ein weiterer Vorschlag, den du in Betracht ziehen solltest :)

zusätzliches Rauschen

Enger Vergleich zwischen Papier vorher und nachher;

Nahaufnahme

Es ist ein etwas grobes Beispiel, und ich habe mich wieder daran gehalten, es subtil zu halten, dramatisches Rauschen würde natürlich das klare Design beeinträchtigen.

Etwas Rauschen könnte zusätzlich zu dem, was hier vorgeschlagen wird, hilfreich sein.
Hallo Jenna! Vielen Dank für Ihre Antwort! Ich habe alle Ihre Ratschläge befolgt und hatte auch eine neue Idee: Karten in einem Stapel zu präsentieren! Ich habe meinen Beitrag aktualisiert, um Ihnen zu zeigen, was ich getan habe! Danke noch einmal ! Es hat mir sehr geholfen! Übrigens, tut mir leid, ich konnte Ihre Antwort nicht positiv bewerten, da meine Punktzahl auf dieser Stack-Exchange-Website zu niedrig ist ... :(
@AaronBenjamin netter Vorschlag, ich werde eine Version hinzufügen - es wird definitiv den Inhalt hervorheben. Trevor Anne Denise, ich helfe gerne! Es sieht gut aus :) - Dominic Ich weiß, es war so herrlich, solange es dauerte!
@AaronBenjamin @ Jenna Ich werde einige Tests für das Geräusch machen, danke !!!! :)
Kritik: Wie verfeinere ich das Erscheinungsbild von Karteikarten in meiner Web-App?
AntwortenHierDatenschutz-Bestimmungen1y, 0v