Crítica: Cómo refinar la apariencia de las tarjetas didácticas en mi aplicación web

Estoy creando una aplicación web y tengo varias preguntas sobre su apariencia, primero aquí hay una "captura de pantalla" (solo una prueba con Pixelmator) :

la captura de pantalla

El elemento en el centro es una tarjeta flash, las flechas a la derecha ya la izquierda le permiten al usuario navegar por las tarjetas.

  • ¿Crees que la flashcard se parece a una tarjeta ? ¿Cómo puedo mejorar la "sensación de la tarjeta" manteniendo la apariencia lo más simple posible?

  • ¿Crees que es una buena idea mantener las flechas blancas ? ¿O debería usar el mismo negro que los otros elementos en la parte superior? (He elegido un color blanco porque creo que estas flechas están más vinculadas a la tarjeta que los otros elementos, ¿es correcto hacer eso?)

  • ¿Qué piensas sobre el hecho de que no estoy usando la misma fuente para la tarjeta y para la interfaz de usuario? Lo hago porque creo que una fuente serif es más apropiada y ayuda a distinguir el texto del contenido. Y también porque creo que podría ayudar al usuario a recordar la palabra más fácilmente.

ACTUALIZAR (aquí hay una nueva versión, seguí el consejo de Jenna y ahora las tarjetas se muestran como una pila, y también agregué un efecto tipográfico a las palabras en las tarjetas):

ingrese la descripción de la imagen aquí

Respuestas (1)

Creo que una manera simple de hacer que parezca un poco más como una tarjeta sería darle una textura de papel muy sutil como la de abajo y tener el color un poco blanquecino; #ffffff es demasiado blanco para el papel. También le di una pequeña sombra paralela que creo que ayuda a mantenerlo simple y un poco más cardado.

Estoy de acuerdo con que las flechas sean blancas, es lógico, ya que son el segundo contenido más importante de la página, después de la tarjeta en sí. Tiene sentido que encaje con el cuerpo y no con el menú.

La fuente diferente diría que tiene sentido. Es bueno separar un poco el contenido del menú. También estoy de acuerdo en que ser diferente hace que sea más fácil de recordar para una persona. Por este mismo razonamiento he hecho la palabra 'montagne' un poco más grande y aunque no es completamente negra (#000000) está cerca. El contraste también ayuda.

También sugeriría que con diferentes palabras temáticas podría cambiar la imagen de fondo, el color se asociará con la palabra para permitir una memoria más fácil. (es decir, ahora asocio montagne con verde y montaña)

Aquí está el original a la izquierda y un ejemplo rápido de un poco de textura, color blanquecino y algo de sombra paralela y texto aumentado para mantenerlo simple y claro.

ingrese la descripción de la imagen aquí

Actualizar

El apilamiento se ve muy bien, especialmente con la consistencia de la fuente de luz y el buen sombreado. Aquí hay otro ejemplo con un poco de ruido monocromático agregado (como lo sugirió Aaron) que resalta la textura del papel. Agregué un poco de desenfoque de movimiento al ruido, ya que el papel parece tener un acabado de pincel un poco áspero si miras muy de cerca y el ruido resalta las pequeñas inconsistencias de la densidad del papel.

Sin embargo, en general, el tuyo se ve muy bien y esta es solo otra sugerencia a considerar :)

ruido añadido

Estrecha comparación entre papel antes y después;

de cerca

Es un ejemplo un poco aproximado y nuevamente me limité a mantenerlo sutil, el ruido dramático, por supuesto, quitaría el diseño limpio.

Un poco de ruido podría ayudar además de lo que se sugiere aquí.
¡Hola Jenna! Muchas gracias por tu respuesta ! He seguido todos vuestros consejos y también se me ha ocurrido una nueva idea: ¡presentar las cartas en una pila! ¡Actualicé mi publicación para mostrarles lo que hice! Gracias de nuevo ! ¡Me ha ayudado mucho! Por cierto, lo siento, no he podido votar tu respuesta porque mi puntuación es demasiado baja en este sitio web de intercambio de pilas... :(
Buena sugerencia de @AaronBenjamin, incluiré una versión; definitivamente resaltará el contenido. ¡Trevor Anne Denise, encantada de ayudar! Se ve bien :) - Dominic lo sé, ¡fue tan glorioso mientras duró!
@AaronBenjamin @ Jenna Haré algunas pruebas para el ruido, ¡gracias! :)