Buenas prácticaspara crear tupágina web#nominaliaEDIwww.EscueladeInternet.com10/05/2013 Juanmi Barea
Sobre el webinarEstamos a punto de abordar los siguientes temas:• La base: de la idea a la web• Conceptos y consejos UX pa...
DOMAINS & ADVERTISINGLa idea de webCómo empezar a hacerla realidad
 Problemas de definición de la idea Problemas de conocimiento del medio Problemas para entender conceptos básicosLo dif...
 Inseguridad en el procedimiento Dificultad para entender queherramienta es la mejor Cómo usar las herramientas elegida...
 La solución para empezar con buen pie un proyecto no está en la tecnología, ni en unsoftware, ni en un libro. La solució...
DOMAINS & ADVERTISINGConceptos UXPrincipios fundamentales para realizar una buena página web
 Facilidad¿Es fácil para tus usuarios entender lainterfaz de tu web? EficienciaUna vez entendido el diseño, ¿cuánto tard...
 RecordabilidadCuando un usuario vuelve a tu web despuésde un tiempo ¿Es complicado para ellos“conectar” con tu diseño? ...
 Satisfacción¿Se sienten cómodos tus usuarios usando tuweb? Si no genera frustraciones es un buendiseño web. UtilidadFun...
DOMAINS & ADVERTISINGConsejos útilesPrácticas que ayudan a enriquecer y potenciar nuestra web
 Las personas se dan cuenta instintiva e instantáneamente de la existencia de rostrosen su panorama visual. En los sitio...
La importancia del rostro13Consejos útiles
 Tener un texto optimizado para la lectura esfundamental, no sólo por la presencia enpantalla sino por la eficiencia para...
 Inicio de escritura:Empezar a escribir a una distanciasuficientemente grande desde el margenizquierdo.http://www.nngroup...
 Tipografía:Los tipos de fuente más recomendados sonaquellas especialmente diseñadas para sermostradas en pantalla (y no ...
 Nunca justificar los textos en una webAunque entremos en discusión con los diseñadoresgráficos, está demostrado que difi...
 Interlineado:El interlineado es un parámetro fundamental para lograr un texto legible. Nointeresan líneas muy juntas que...
 Interlineado:El interlineado es un parámetro fundamental para lograr un texto legible. Nointeresan líneas muy juntas que...
 El color que los navegadores muestran pordefecto es azul, así que el usuario tieneadquirida esta cultura. Los enlaces t...
 Discusión actual sobre el uso de scroll. Lastendencias y la cultura está cambiando. Cerca del 75% de la gente no usa el...
 1. Nombre del sitio Web 2. Valor o propuesta de la web (québeneficio ofrece a los usuarios, quepueden encontrar) 3. Me...
 El espacio en blanco ayuda a la comprensión. Necesitamos espacio en blanco para ordenar loselementos. Con el espacio e...
El espacio en blanco24Consejos útiles
DOMAINS & ADVERTISINGProceso de creación webExportando el mundo profesional al ámbito del “small site”
Creación web: una realidad peliagudaCómo es el proceso real de una web profesional26Proceso de creación web
 En un inicio fue un complemento informativode la empresa. Explosión de internet: Todos pueden tener unaweb, las empresa...
 Estadísticas de tendencia relacionadas con laactividad de vuestra web.http://www.google.es/trends/ Revisar los director...
 Brainstorming visual La importancia del boceto rápido Definición de los elementos que participan Tener en cuenta el d...
 Encabezado Info principal ( H1, H2…) Intro Logo Cuerpo Columnas/ barras auxiliares Contenido principal Desarrollo...
 Estructura eficiente, que facilite elmantenimiento ( archivos fácilmente localizables) Recomendado: organización semánt...
 Html como base. CSS para usar los estilos. El CSS nos va a definirinfinidad de características de la página web. Hayvar...
 Vamos a coger el ejemplo del wireframe y ver como está estructurado el código. http://webinarsjm.newcloudsite.com/?mode...
 Organización según las necesidades. Haz crecer tu web como a un niño Escuela de internet es un buen ejemplo de ello: ...
DOMAINS & ADVERTISINGEstándaresUsos y hábitos que deberían seguirse siempre al cerar una web
 Exinten estándares web, están establecidos y serecomienda encarecidamente respetarlos.http://www.w3c.es/estandares/ Dan...
Respeto por los estándaresSin estándares tu web se ve diferente en navegadores distintos37Respeto por los estándares
 Problemas en la maquetación: el CSS no se rigepor la normativa. Diferencias en espacios, paddings, sombras yotros eleme...
 Seamos conscientes que esto no es una cienciaexacta, si no hacemos codificaciones extrañasno tiene que pasar nada. Nave...
Respeto por los estándaresSi todo va mal… ¡Siempre nos quedará el comodín del público!40Respeto por los estándares
DOMAINS & ADVERTISING¡Muchas gracias!Encuentra todo el contenido de este seminario web en:www.escueladeinternet.com
Upcoming SlideShare
Loading in …5
×

Buenas prácticas para crear tu página web - Nominalia

8,025 views

Published on

Presentación del webinar "Buenas prácticas para crear tu página web", impartido por Juanmi Barea, especialista UX de Nominalia el 9/5/2013. Te enseñamos algunas técnicas y procedimientos que te ayudarán a crear una página web de calidad, siguiendo los estándares. Resolvemos en directo varios problemas habituales, enseñamos herramientas útiles y mostramos ejemplos de buenas prácticas

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,025
On SlideShare
0
From Embeds
0
Number of Embeds
5,977
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Buenas prácticas para crear tu página web - Nominalia

  1. 1. Buenas prácticaspara crear tupágina web#nominaliaEDIwww.EscueladeInternet.com10/05/2013 Juanmi Barea
  2. 2. Sobre el webinarEstamos a punto de abordar los siguientes temas:• La base: de la idea a la web• Conceptos y consejos UX para mejorar / crear una web de calidad• El proceso de creación: Exportando el mundo profesional al ámbito del “small site”• Conociendo los estándares• Crossbrowsing y problemática relacionada2Sobre el webinar
  3. 3. DOMAINS & ADVERTISINGLa idea de webCómo empezar a hacerla realidad
  4. 4.  Problemas de definición de la idea Problemas de conocimiento del medio Problemas para entender conceptos básicosLo difícil es empezarComo mis ideas se desvanecen ante esa montaña de dudas4Lo difícil es empezar
  5. 5.  Inseguridad en el procedimiento Dificultad para entender queherramienta es la mejor Cómo usar las herramientas elegidasLo difícil es empezarComo mis ideas se desvanecen ante esa montaña de dudas5Lo difícil es empezar
  6. 6.  La solución para empezar con buen pie un proyecto no está en la tecnología, ni en unsoftware, ni en un libro. La solución está en tu cabeza. Coge un papel y haz un brainstorming, tanto textual como gráfico Redacta en 3 lineas que pretendes con esa web y escribe en una linea que quiereshacer.Lo difícil es empezarComo mis ideas se desvanecen ante esa montaña de dudas6Lo difícil es empezar
  7. 7. DOMAINS & ADVERTISINGConceptos UXPrincipios fundamentales para realizar una buena página web
  8. 8.  Facilidad¿Es fácil para tus usuarios entender lainterfaz de tu web? EficienciaUna vez entendido el diseño, ¿cuánto tardanen cumplir las tareas básicas y objetivos quepretendes?Conceptos UXAlgunos principios genéricos a tener siempre en cuenta8Conceptos UX
  9. 9.  RecordabilidadCuando un usuario vuelve a tu web despuésde un tiempo ¿Es complicado para ellos“conectar” con tu diseño? Efecto WOW¿Cómo impresionas a los usuarios de tu webpara que permanezcan en tu página ovuelvan a ella?Conceptos UXAlgunos principios genéricos a tener siempre en cuenta9Conceptos UX
  10. 10.  Satisfacción¿Se sienten cómodos tus usuarios usando tuweb? Si no genera frustraciones es un buendiseño web. UtilidadFuncionalidad del diseño ¿el usuario logracumplir sus objetivos dentro de tu interfaz?Conceptos UXAlgunos principios genéricos a tener siempre en cuenta10Conceptos UX
  11. 11. DOMAINS & ADVERTISINGConsejos útilesPrácticas que ayudan a enriquecer y potenciar nuestra web
  12. 12.  Las personas se dan cuenta instintiva e instantáneamente de la existencia de rostrosen su panorama visual. En los sitios Web las personas tienden a enfocarse en rostro y ojos, lo cual da pie aque muchos expertos en marketing aprovechen este hecho para llamar la atención desus usuarios. La atracción hacia los rostros de personas es sólo el principio. Tenemos que trabajarpara redirigir las miradas hacia nuestros objetivos. Focalizar.La importancia del rostroConsejo útil #112Consejos útiles
  13. 13. La importancia del rostro13Consejos útiles
  14. 14.  Tener un texto optimizado para la lectura esfundamental, no sólo por la presencia enpantalla sino por la eficiencia para el lector. Un texto legible se lee rápido y se comprendemejor. Un texto debe ser directo y enriquecido,pensado para la “lectura vertical”.Legibilidad “obviamente”Consejo útil #214Consejos útiles
  15. 15.  Inicio de escritura:Empezar a escribir a una distanciasuficientemente grande desde el margenizquierdo.http://www.nngroup.com/articles/horizontal-attention-leans-left/ Ancho del párrafo:procurar que no haya más de 20 palabras porlinea. Esto se consigue poniendo un ancho deunos 500px en ese párrafo.Legibilidad: párrafoConsejo útil #215Consejos útiles
  16. 16.  Tipografía:Los tipos de fuente más recomendados sonaquellas especialmente diseñadas para sermostradas en pantalla (y no en papel). Estasson las Arial, Helvetica, Georgia, Times,Verdana o Courier entre otras. Uso de fuentes externas moderado.Legibilidad: TypeConsejo útil #216Consejos útiles
  17. 17.  Nunca justificar los textos en una webAunque entremos en discusión con los diseñadoresgráficos, está demostrado que dificulta la legibilidad.Una web no es un periódico ni es un diseño gráfico. Tamaño de fuenteRecomendable utilizar un tamaño de fuente igual osuperior a los 12px.Legibilidad: formatoConsejo útil #217Consejos útiles
  18. 18.  Interlineado:El interlineado es un parámetro fundamental para lograr un texto legible. Nointeresan líneas muy juntas que hagan saltar de una a la otra por error. Tampocolíneas muy distanciadas que visualmente parezcan formar parte de párrafos distintos.Idealmente, es interesante utilizar un interlineado superior al tamaño de fuente.Legibilidad: interlineadoConsejo útil #218Consejos útiles
  19. 19.  Interlineado:El interlineado es un parámetro fundamental para lograr un texto legible. Nointeresan líneas muy juntas que hagan saltar de una a la otra por error. Tampocolíneas muy distanciadas que visualmente parezcan formar parte de párrafos distintos.Es interesante utilizar un interlineado superior al tamaño de fuente.Legibilidad: interlineadoConsejo útil #219Consejos útiles
  20. 20.  El color que los navegadores muestran pordefecto es azul, así que el usuario tieneadquirida esta cultura. Los enlaces tienen que contrastar con elfondo y deben ser bastante diferentes delresto de texto del sitio. En lo que se refiere a usabilidad, hacer loque lo que la mayoría hace, es lo mejor.Links: Los vínculos son azulesConsejo útil #320Consejos útiles
  21. 21.  Discusión actual sobre el uso de scroll. Lastendencias y la cultura está cambiando. Cerca del 75% de la gente no usa el scrollen su primera visita a nuestro sitio web.Esto nos advierte de la imporancia quetiene colocar nuestro contenido “clave”dentro de ese primer pantallazoScroll, un problema dudosoConsejo útil #421Consejos útiles
  22. 22.  1. Nombre del sitio Web 2. Valor o propuesta de la web (québeneficio ofrece a los usuarios, quepueden encontrar) 3. Menú de navegación por seccionesrelevantes al usuario. Acción ( CTA)Priorización de elementos ( 600px)Consejo útil #522Consejos útiles
  23. 23.  El espacio en blanco ayuda a la comprensión. Necesitamos espacio en blanco para ordenar loselementos. Con el espacio en blanco se generan jerarquíasvisuales, podemos jugar con esto. Aislar los CTA es una forma inteligente defocalizar al usuario hacia tus objetivos.El espacio en blancoConsejo útil #623Consejos útiles
  24. 24. El espacio en blanco24Consejos útiles
  25. 25. DOMAINS & ADVERTISINGProceso de creación webExportando el mundo profesional al ámbito del “small site”
  26. 26. Creación web: una realidad peliagudaCómo es el proceso real de una web profesional26Proceso de creación web
  27. 27.  En un inicio fue un complemento informativode la empresa. Explosión de internet: Todos pueden tener unaweb, las empresas empiezan a invertir. Tendencia hacia un mundo basado en internet.Cloud es el futuro. Una web profesional implica a mucha gente ensu realización.Creación web: una realidad peliagudaCómo es el proceso real de una web profesional27Proceso de creación web
  28. 28.  Estadísticas de tendencia relacionadas con laactividad de vuestra web.http://www.google.es/trends/ Revisar los directorios públicos: Dmozhttp://www.dmoz.es/ Benchmark: comparativa con las webs similaresa tu actividad / propósito.Creación web: AnálisisA tener en cuenta antes de empezar con el diseño web28Proceso de creación web
  29. 29.  Brainstorming visual La importancia del boceto rápido Definición de los elementos que participan Tener en cuenta el diseño de interacciónCreación web: ProyectaciónEmpezando a plasmar la idea29Proceso de creación web
  30. 30.  Encabezado Info principal ( H1, H2…) Intro Logo Cuerpo Columnas/ barras auxiliares Contenido principal Desarrollo de las acciones principales Pie de páginaCreación web: Partes importantesA tener en cuenta antes de empezar con el diseño web30Proceso de creación web
  31. 31.  Estructura eficiente, que facilite elmantenimiento ( archivos fácilmente localizables) Recomendado: organización semántica yexplicativa URL descriptivas e inteligentes:http://www.sitioweb.com/eaf_files/fap.htmlhttp://www.sitioweb.com/astrofisica/fuerzas/atraccion-planetaria.htmlCreación web: Estructura de archivosA tener en cuenta antes de empezar con el diseño web31Proceso de creación web
  32. 32.  Html como base. CSS para usar los estilos. El CSS nos va a definirinfinidad de características de la página web. Hayvarias versiones de css y html. Actualmente vamos por la versión html5 y CSS3.Creación web: CodificaciónApuntes breves sobre el html y el css32Proceso de creación web
  33. 33.  Vamos a coger el ejemplo del wireframe y ver como está estructurado el código. http://webinarsjm.newcloudsite.com/?mode=editCreación web: CodificaciónApuntes breves sobre el html y el css33Proceso de creación web
  34. 34.  Organización según las necesidades. Haz crecer tu web como a un niño Escuela de internet es un buen ejemplo de ello: Plan de desarrollo inicial Crecimiento en elementos principales Creación de elementos auxiliares Mejora continua yevolutivahttp://www.escueladeinternet.comCreación web: Diseño evolutivoApuntes breves sobre el html y el css34Proceso de creación web
  35. 35. DOMAINS & ADVERTISINGEstándaresUsos y hábitos que deberían seguirse siempre al cerar una web
  36. 36.  Exinten estándares web, están establecidos y serecomienda encarecidamente respetarlos.http://www.w3c.es/estandares/ Dan confianza a la hora de hacer una web. Garantiza un cierto éxito. Facilitan la carga de la página en todos losnavegadores.Respeto por los estándaresAunque resulte pesado es muy aconsejable ser estricto36Respeto por los estándares
  37. 37. Respeto por los estándaresSin estándares tu web se ve diferente en navegadores distintos37Respeto por los estándares
  38. 38.  Problemas en la maquetación: el CSS no se rigepor la normativa. Diferencias en espacios, paddings, sombras yotros elementos. Problemas de carga de algunos elementos segúnsu propiedad.Respeto por los estándares¿Qué errores se generan fruto de no seguir estándares?38Respeto por los estándares
  39. 39.  Seamos conscientes que esto no es una cienciaexacta, si no hacemos codificaciones extrañasno tiene que pasar nada. Navegadores como Internet Explorer no soportanmuchas propiedades y clases, lo cual generaerrores.Respeto por los estándaresNo todo va a ir mal, a veces los navegadores son el problema39Respeto por los estándares
  40. 40. Respeto por los estándaresSi todo va mal… ¡Siempre nos quedará el comodín del público!40Respeto por los estándares
  41. 41. DOMAINS & ADVERTISING¡Muchas gracias!Encuentra todo el contenido de este seminario web en:www.escueladeinternet.com

×