SlideShare una empresa de Scribd logo
1 de 8
 ESTRUCTURA:    Todo lo que hagas debe seguir
 una maquetación coherente. La simetría, el
 orden y la compensación de los espacios le da
 coherencia al diseño y ayuda al lector a situar
 rápidamente las distintas partes del
 contenido. Si pones las cosas donde te
 parece, sin ninguna planificación previa, el
 resultado final tendrá mal aspecto y hará que
 el lector se pierda con facilidad en un caos de
 gráficos y texto. Esto se puede solucionar de
 una forma sencilla.
L FONDO:




 No uses imágenes de fondo, sólo colores planos.
 Estás haciendo una actividad didáctica en la que
 lo importante es el contenido. Los fondos de
 imágenes repetidas o grandes imágenes
 dificultan la visualización del texto además de
 que añaden un peso considerable.
COLORES:



 Unconsejo sencillo, no pongas en una pantalla
 una combinación de colores que no llevarías
 puesta. Cuando vayas a elegir los colores piensa
 que estás delante del armario eligiendo la ropa
 que te vas a poner. Según el tipo de ropa y el
 contexto elegirás unos colores u otros. (Un
 verde manzana quizá no quede muy bien en una
 americana pero si en una camiseta para ir a la
 playa, cada situación tiene sus colores).
 Latipografía es un elemento muy importante del
 diseño. Aunque te pueda parecer que cualquiera
 vale esto no es así.

 Loprimero que debes tener en cuenta es que si
 tu actividad se va a ver en un navegador tienes
 que usar una serie de fuentes determinadas. Si
 usas un tipo de fuente que el usuario no tiene
 instalada la sustituirá por la fuente por defecto
 del navegador y tu diseño ya no aparecerá tal
 como lo hiciste.
 GIF ANIMADOS:
 Tus alumnos juegan en la consola a juegos en 3D
  desde que nacieron. Han visto explosiones y
  efectos especiales de todo tipo en cine y
  televisión. No los vas a impresionar con un gif
  animado de un perro bailando. Además, no tiene
  ninguna finalidad didáctica. Totalmente
  prohibidos los gifs animados.
MÁGENES CON TRASPARENCIA:
 Si vas a usar este tipo de imágenes utiliza
  imágenes PNG en lugar de GIF. Los gifs dejan un
  borde blanco alrededor de la imagen que queda
  fatal. Si tu fondo no es blanco utiliza imágenes
  png y esos molestos píxeles no aparecerán.
 La   musiquilla de fondo: Esto es una
 carga innecesaria para una página y además
 de distraer molesta. Hay que eliminar todo
 aquello que no sea necesario para la
 actividad. No hay que adornar

Más contenido relacionado

La actualidad más candente

Fabian vargas
Fabian vargasFabian vargas
Fabian vargas192345
 
Paso a paso de mypaint
Paso a paso de mypaintPaso a paso de mypaint
Paso a paso de mypaintjonafeli18
 
Paso a paso de mypaint
Paso a paso de mypaintPaso a paso de mypaint
Paso a paso de mypaintjonafeli18
 
Paso a paso de mypaint
Paso a paso de mypaintPaso a paso de mypaint
Paso a paso de mypaintjonafeli18
 
Trabajo informática daniel fernández
Trabajo informática daniel fernándezTrabajo informática daniel fernández
Trabajo informática daniel fernándezRotias
 

La actualidad más candente (8)

Actividad 6 berenice sanchez ramirez
Actividad 6 berenice sanchez ramirezActividad 6 berenice sanchez ramirez
Actividad 6 berenice sanchez ramirez
 
Fabian vargas
Fabian vargasFabian vargas
Fabian vargas
 
R
RR
R
 
Paso a paso de mypaint
Paso a paso de mypaintPaso a paso de mypaint
Paso a paso de mypaint
 
Paso a paso de mypaint
Paso a paso de mypaintPaso a paso de mypaint
Paso a paso de mypaint
 
Paso a paso de mypaint
Paso a paso de mypaintPaso a paso de mypaint
Paso a paso de mypaint
 
Trabajo informática daniel fernández
Trabajo informática daniel fernándezTrabajo informática daniel fernández
Trabajo informática daniel fernández
 
4º eso sketch up 2
4º eso sketch up 24º eso sketch up 2
4º eso sketch up 2
 

Destacado

Natale coi fiocchi 2011
Natale coi fiocchi 2011 Natale coi fiocchi 2011
Natale coi fiocchi 2011 Davide Ferrari
 
Web Marketing | Cosa puoi fare per aumentare le visite del tuo sito?
Web Marketing | Cosa puoi fare per aumentare le visite del tuo sito?Web Marketing | Cosa puoi fare per aumentare le visite del tuo sito?
Web Marketing | Cosa puoi fare per aumentare le visite del tuo sito?Meetweb
 
Innanzitutto cittadini. Una nuova pagina dell'immigrazione
Innanzitutto cittadini. Una nuova pagina dell'immigrazioneInnanzitutto cittadini. Una nuova pagina dell'immigrazione
Innanzitutto cittadini. Una nuova pagina dell'immigrazioneForum Politiche Sociali Milano
 
Lettera all-inquilino
Lettera all-inquilinoLettera all-inquilino
Lettera all-inquilinonicorsm
 
Apoyo de Clases n°12
Apoyo de Clases n°12Apoyo de Clases n°12
Apoyo de Clases n°12Miguel Neira
 
Pavimentos ce.010 ds 2010 001
Pavimentos ce.010 ds 2010 001Pavimentos ce.010 ds 2010 001
Pavimentos ce.010 ds 2010 001Percy Alosilla
 
Monete Bulgari Event - September,23 2011
Monete Bulgari Event - September,23 2011Monete Bulgari Event - September,23 2011
Monete Bulgari Event - September,23 2011SocialMediaNews
 
Kaiser m&a and transaction cost tax treatment
Kaiser   m&a and transaction cost tax treatmentKaiser   m&a and transaction cost tax treatment
Kaiser m&a and transaction cost tax treatmentkrk811
 
Poradnik pt. jak wybudować swój dom
Poradnik pt. jak wybudować swój domPoradnik pt. jak wybudować swój dom
Poradnik pt. jak wybudować swój domtur-biuro
 
Pagine di Moda: Mauro Tosti Croce, DGA Mibac
Pagine di Moda: Mauro Tosti Croce, DGA MibacPagine di Moda: Mauro Tosti Croce, DGA Mibac
Pagine di Moda: Mauro Tosti Croce, DGA MibacSergio Primo Del Bello
 
Uomo Di Colore
Uomo Di ColoreUomo Di Colore
Uomo Di Coloremailofday
 

Destacado (20)

Contenidos digitales
Contenidos digitalesContenidos digitales
Contenidos digitales
 
Natale coi fiocchi 2011
Natale coi fiocchi 2011 Natale coi fiocchi 2011
Natale coi fiocchi 2011
 
FOSS - PoitouJUG
FOSS - PoitouJUGFOSS - PoitouJUG
FOSS - PoitouJUG
 
Nel
NelNel
Nel
 
Friuli
FriuliFriuli
Friuli
 
7 dì 16 gennaio 2013
7 dì   16 gennaio 20137 dì   16 gennaio 2013
7 dì 16 gennaio 2013
 
Lettera di Franco Bomprezzi
Lettera di Franco Bomprezzi Lettera di Franco Bomprezzi
Lettera di Franco Bomprezzi
 
Web Marketing | Cosa puoi fare per aumentare le visite del tuo sito?
Web Marketing | Cosa puoi fare per aumentare le visite del tuo sito?Web Marketing | Cosa puoi fare per aumentare le visite del tuo sito?
Web Marketing | Cosa puoi fare per aumentare le visite del tuo sito?
 
Innanzitutto cittadini. Una nuova pagina dell'immigrazione
Innanzitutto cittadini. Una nuova pagina dell'immigrazioneInnanzitutto cittadini. Una nuova pagina dell'immigrazione
Innanzitutto cittadini. Una nuova pagina dell'immigrazione
 
Investing in Our Future
Investing in Our FutureInvesting in Our Future
Investing in Our Future
 
Lettera all-inquilino
Lettera all-inquilinoLettera all-inquilino
Lettera all-inquilino
 
Apoyo de Clases n°12
Apoyo de Clases n°12Apoyo de Clases n°12
Apoyo de Clases n°12
 
Pavimentos ce.010 ds 2010 001
Pavimentos ce.010 ds 2010 001Pavimentos ce.010 ds 2010 001
Pavimentos ce.010 ds 2010 001
 
Monete Bulgari Event - September,23 2011
Monete Bulgari Event - September,23 2011Monete Bulgari Event - September,23 2011
Monete Bulgari Event - September,23 2011
 
Kaiser m&a and transaction cost tax treatment
Kaiser   m&a and transaction cost tax treatmentKaiser   m&a and transaction cost tax treatment
Kaiser m&a and transaction cost tax treatment
 
Poradnik pt. jak wybudować swój dom
Poradnik pt. jak wybudować swój domPoradnik pt. jak wybudować swój dom
Poradnik pt. jak wybudować swój dom
 
Looking for Grandma
Looking for GrandmaLooking for Grandma
Looking for Grandma
 
Pagine di Moda: Mauro Tosti Croce, DGA Mibac
Pagine di Moda: Mauro Tosti Croce, DGA MibacPagine di Moda: Mauro Tosti Croce, DGA Mibac
Pagine di Moda: Mauro Tosti Croce, DGA Mibac
 
Uomo Di Colore
Uomo Di ColoreUomo Di Colore
Uomo Di Colore
 
Menções à Estratégia
Menções à EstratégiaMenções à Estratégia
Menções à Estratégia
 

Similar a Diseño web didáctico: consejos para una estructura, colores y tipografía optimizados

Como crear contenidos digitales
Como crear contenidos digitales Como crear contenidos digitales
Como crear contenidos digitales Angie Galindo
 
Consejos para crear contenidos digitales
Consejos para crear contenidos digitalesConsejos para crear contenidos digitales
Consejos para crear contenidos digitalesVanessa Cabrera
 
Recomendaciones para evaluar los contenidos digitales
Recomendaciones para evaluar los contenidos digitalesRecomendaciones para evaluar los contenidos digitales
Recomendaciones para evaluar los contenidos digitalesyakylorena
 
Diseño de contenidos digitales
Diseño de contenidos digitalesDiseño de contenidos digitales
Diseño de contenidos digitalesNatalia Hernandez
 
Contenidos digitales
Contenidos digitalesContenidos digitales
Contenidos digitaleslifecoca
 
Recomendaciones para elaborar un contenido digital
Recomendaciones para elaborar un contenido digitalRecomendaciones para elaborar un contenido digital
Recomendaciones para elaborar un contenido digitalMario Fierro P
 
Daniela ortiz 1101
Daniela ortiz 1101Daniela ortiz 1101
Daniela ortiz 1101DanieO96
 
Daniela ortiz 1101
Daniela ortiz 1101Daniela ortiz 1101
Daniela ortiz 1101DanieO96
 
Contenidos digitales
Contenidos digitalesContenidos digitales
Contenidos digitalesLoraine8
 
INFORMACIÓN SOBRE CONTENIDOS DIGITALES
INFORMACIÓN SOBRE CONTENIDOS DIGITALESINFORMACIÓN SOBRE CONTENIDOS DIGITALES
INFORMACIÓN SOBRE CONTENIDOS DIGITALESdaniela charry
 
Pre lorena
Pre lorenaPre lorena
Pre lorena192345
 
TIPS PARA ELABORAR UN CONTENIDO DIGITAL
TIPS PARA ELABORAR UN CONTENIDO DIGITALTIPS PARA ELABORAR UN CONTENIDO DIGITAL
TIPS PARA ELABORAR UN CONTENIDO DIGITALKarito Muñoz
 
TIPS PARA ELABORAR UN CONTENIDO DIGITAL
TIPS PARA ELABORAR UN CONTENIDO DIGITALTIPS PARA ELABORAR UN CONTENIDO DIGITAL
TIPS PARA ELABORAR UN CONTENIDO DIGITALKarito Muñoz
 
contenido digitales
contenido digitalescontenido digitales
contenido digitales8758882
 
Fercidez cuellar
Fercidez cuellarFercidez cuellar
Fercidez cuellar192345
 
CONTENIDOS DIGITALES
CONTENIDOS DIGITALESCONTENIDOS DIGITALES
CONTENIDOS DIGITALESDanny Tamayo
 
CONTENIDO DIGITAL INCLUSIVO
CONTENIDO DIGITAL INCLUSIVOCONTENIDO DIGITAL INCLUSIVO
CONTENIDO DIGITAL INCLUSIVODanny Tamayo
 
Robaestapresentation jessedee-101201090543-phpapp02
Robaestapresentation jessedee-101201090543-phpapp02Robaestapresentation jessedee-101201090543-phpapp02
Robaestapresentation jessedee-101201090543-phpapp02llocprova
 

Similar a Diseño web didáctico: consejos para una estructura, colores y tipografía optimizados (20)

Como crear contenidos digitales
Como crear contenidos digitales Como crear contenidos digitales
Como crear contenidos digitales
 
Consejos para crear contenidos digitales
Consejos para crear contenidos digitalesConsejos para crear contenidos digitales
Consejos para crear contenidos digitales
 
Recomendaciones para evaluar los contenidos digitales
Recomendaciones para evaluar los contenidos digitalesRecomendaciones para evaluar los contenidos digitales
Recomendaciones para evaluar los contenidos digitales
 
Diseño de contenidos digitales
Diseño de contenidos digitalesDiseño de contenidos digitales
Diseño de contenidos digitales
 
Contenidos digitales
Contenidos digitalesContenidos digitales
Contenidos digitales
 
Recomendaciones para elaborar un contenido digital
Recomendaciones para elaborar un contenido digitalRecomendaciones para elaborar un contenido digital
Recomendaciones para elaborar un contenido digital
 
Daniela ortiz 1101
Daniela ortiz 1101Daniela ortiz 1101
Daniela ortiz 1101
 
Daniela ortiz 1101
Daniela ortiz 1101Daniela ortiz 1101
Daniela ortiz 1101
 
Contenidos digitales
Contenidos digitalesContenidos digitales
Contenidos digitales
 
CONTENIDOS DIGITALES
CONTENIDOS DIGITALESCONTENIDOS DIGITALES
CONTENIDOS DIGITALES
 
INFORMACIÓN SOBRE CONTENIDOS DIGITALES
INFORMACIÓN SOBRE CONTENIDOS DIGITALESINFORMACIÓN SOBRE CONTENIDOS DIGITALES
INFORMACIÓN SOBRE CONTENIDOS DIGITALES
 
Pre lorena
Pre lorenaPre lorena
Pre lorena
 
CONTENIDOS DIGITALES
CONTENIDOS DIGITALES CONTENIDOS DIGITALES
CONTENIDOS DIGITALES
 
TIPS PARA ELABORAR UN CONTENIDO DIGITAL
TIPS PARA ELABORAR UN CONTENIDO DIGITALTIPS PARA ELABORAR UN CONTENIDO DIGITAL
TIPS PARA ELABORAR UN CONTENIDO DIGITAL
 
TIPS PARA ELABORAR UN CONTENIDO DIGITAL
TIPS PARA ELABORAR UN CONTENIDO DIGITALTIPS PARA ELABORAR UN CONTENIDO DIGITAL
TIPS PARA ELABORAR UN CONTENIDO DIGITAL
 
contenido digitales
contenido digitalescontenido digitales
contenido digitales
 
Fercidez cuellar
Fercidez cuellarFercidez cuellar
Fercidez cuellar
 
CONTENIDOS DIGITALES
CONTENIDOS DIGITALESCONTENIDOS DIGITALES
CONTENIDOS DIGITALES
 
CONTENIDO DIGITAL INCLUSIVO
CONTENIDO DIGITAL INCLUSIVOCONTENIDO DIGITAL INCLUSIVO
CONTENIDO DIGITAL INCLUSIVO
 
Robaestapresentation jessedee-101201090543-phpapp02
Robaestapresentation jessedee-101201090543-phpapp02Robaestapresentation jessedee-101201090543-phpapp02
Robaestapresentation jessedee-101201090543-phpapp02
 

Diseño web didáctico: consejos para una estructura, colores y tipografía optimizados

  • 1.
  • 2.  ESTRUCTURA: Todo lo que hagas debe seguir una maquetación coherente. La simetría, el orden y la compensación de los espacios le da coherencia al diseño y ayuda al lector a situar rápidamente las distintas partes del contenido. Si pones las cosas donde te parece, sin ninguna planificación previa, el resultado final tendrá mal aspecto y hará que el lector se pierda con facilidad en un caos de gráficos y texto. Esto se puede solucionar de una forma sencilla.
  • 3. L FONDO:  No uses imágenes de fondo, sólo colores planos. Estás haciendo una actividad didáctica en la que lo importante es el contenido. Los fondos de imágenes repetidas o grandes imágenes dificultan la visualización del texto además de que añaden un peso considerable.
  • 4. COLORES:  Unconsejo sencillo, no pongas en una pantalla una combinación de colores que no llevarías puesta. Cuando vayas a elegir los colores piensa que estás delante del armario eligiendo la ropa que te vas a poner. Según el tipo de ropa y el contexto elegirás unos colores u otros. (Un verde manzana quizá no quede muy bien en una americana pero si en una camiseta para ir a la playa, cada situación tiene sus colores).
  • 5.  Latipografía es un elemento muy importante del diseño. Aunque te pueda parecer que cualquiera vale esto no es así.  Loprimero que debes tener en cuenta es que si tu actividad se va a ver en un navegador tienes que usar una serie de fuentes determinadas. Si usas un tipo de fuente que el usuario no tiene instalada la sustituirá por la fuente por defecto del navegador y tu diseño ya no aparecerá tal como lo hiciste.
  • 6.  GIF ANIMADOS:  Tus alumnos juegan en la consola a juegos en 3D desde que nacieron. Han visto explosiones y efectos especiales de todo tipo en cine y televisión. No los vas a impresionar con un gif animado de un perro bailando. Además, no tiene ninguna finalidad didáctica. Totalmente prohibidos los gifs animados.
  • 7. MÁGENES CON TRASPARENCIA:  Si vas a usar este tipo de imágenes utiliza imágenes PNG en lugar de GIF. Los gifs dejan un borde blanco alrededor de la imagen que queda fatal. Si tu fondo no es blanco utiliza imágenes png y esos molestos píxeles no aparecerán.
  • 8.  La musiquilla de fondo: Esto es una carga innecesaria para una página y además de distraer molesta. Hay que eliminar todo aquello que no sea necesario para la actividad. No hay que adornar