Buenas prácticas
para crear tu
página web
#nominaliaEDI
www.EscueladeInternet.com
10/05/2013 Juanmi Barea
Sobre el webinar Estamos 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 relacionada
2
Sobre el webinar
DOMAINS & ADVERTISING
La idea de web Cómo empezar a hacerla realidad
Problemas de definición de la idea
Problemas de conocimiento del medio
Problemas para entender conceptos básicos
Lo difícil es empezar Como mis ideas se desvanecen ante esa montaña de dudas
4
Lo difícil es empezar
Inseguridad en el procedimiento
Dificultad para entender que
herramienta es la mejor
Cómo usar las herramientas elegidas
Lo difícil es empezar Como mis ideas se desvanecen ante esa montaña de dudas
5
Lo difícil es empezar
La solución para empezar con buen pie un proyecto no está en la tecnología, ni en un
software, 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 quieres
hacer.
Lo difícil es empezar Como mis ideas se desvanecen ante esa montaña de dudas
6
Lo difícil es empezar
DOMAINS & ADVERTISING
Conceptos UX Principios fundamentales para realizar una buena página web
Facilidad
¿Es fácil para tus usuarios entender la
interfaz de tu web?
Eficiencia
Una vez entendido el diseño, ¿cuánto tardan
en cumplir las tareas básicas y objetivos que
pretendes?
Conceptos UX Algunos principios genéricos a tener siempre en cuenta
8
Conceptos UX
Recordabilidad
Cuando un usuario vuelve a tu web después
de un tiempo ¿Es complicado para ellos
“conectar” con tu diseño?
Efecto WOW
¿Cómo impresionas a los usuarios de tu web
para que permanezcan en tu página o
vuelvan a ella?
Conceptos UX Algunos principios genéricos a tener siempre en cuenta
9
Conceptos UX
Satisfacción
¿Se sienten cómodos tus usuarios usando tu
web? Si no genera frustraciones es un buen
diseño web.
Utilidad
Funcionalidad del diseño ¿el usuario logra
cumplir sus objetivos dentro de tu interfaz?
Conceptos UX Algunos principios genéricos a tener siempre en cuenta
10
Conceptos UX
DOMAINS & ADVERTISING
Consejos útiles Prácticas que ayudan a enriquecer y potenciar nuestra web
Las personas se dan cuenta instintiva e instantáneamente de la existencia de rostros
en su panorama visual.
En los sitios Web las personas tienden a enfocarse en rostro y ojos, lo cual da pie a
que muchos expertos en marketing aprovechen este hecho para llamar la atención de
sus usuarios.
La atracción hacia los rostros de personas es sólo el principio. Tenemos que trabajar
para redirigir las miradas hacia nuestros objetivos. Focalizar.
La importancia del rostro Consejo útil #1
12
Consejos útiles
La importancia del rostro
13
Consejos útiles
Tener un texto optimizado para la lectura es
fundamental, no sólo por la presencia en
pantalla sino por la eficiencia para el lector.
Un texto legible se lee rápido y se comprende
mejor.
Un texto debe ser directo y enriquecido,
pensado para la “lectura vertical”.
Legibilidad “obviamente” Consejo útil #2
14
Consejos útiles
Inicio de escritura:
Empezar a escribir a una distancia
suficientemente grande desde el margen
izquierdo.http://www.nngroup.com/articles/horizontal-
attention-leans-left/
Ancho del párrafo:
procurar que no haya más de 20 palabras por
linea. Esto se consigue poniendo un ancho de
unos 500px en ese párrafo.
Legibilidad: párrafo Consejo útil #2
15
Consejos útiles
Tipografía:
Los tipos de fuente más recomendados son
aquellas especialmente diseñadas para ser
mostradas en pantalla (y no en papel). Estas
son las Arial, Helvetica, Georgia, Times,
Verdana o Courier entre otras.
Uso de fuentes externas moderado.
Legibilidad: Type Consejo útil #2
16
Consejos útiles
Nunca justificar los textos en una web
Aunque entremos en discusión con los diseñadores
gráficos, está demostrado que dificulta la legibilidad.
Una web no es un periódico ni es un diseño gráfico.
Tamaño de fuente
Recomendable utilizar un tamaño de fuente igual o
superior a los 12px.
Legibilidad: formato Consejo útil #2
17
Consejos útiles
Interlineado: El interlineado es un parámetro fundamental para lograr un texto legible. No interesan líneas muy juntas que hagan saltar de una a la otra por error. Tampoco lí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: interlineado Consejo útil #2
18
Consejos útiles
Interlineado:
El interlineado es un parámetro fundamental para lograr un texto legible. No
interesan líneas muy juntas que hagan saltar de una a la otra por error. Tampoco
líneas muy distanciadas que visualmente parezcan formar parte de párrafos distintos.
Es interesante utilizar un interlineado superior al tamaño de fuente.
Legibilidad: interlineado Consejo útil #2
19
Consejos útiles
El color que los navegadores muestran por
defecto es azul, así que el usuario tiene
adquirida esta cultura.
Los enlaces tienen que contrastar con el
fondo y deben ser bastante diferentes del
resto de texto del sitio.
En lo que se refiere a usabilidad, hacer lo
que lo que la mayoría hace, es lo mejor.
Links: Los vínculos son azules Consejo útil #3
20
Consejos útiles
Discusión actual sobre el uso de scroll. Las
tendencias y la cultura está cambiando.
Cerca del 75% de la gente no usa el scroll
en su primera visita a nuestro sitio web.
Esto nos advierte de la imporancia que
tiene colocar nuestro contenido “clave”
dentro de ese primer pantallazo
Scroll, un problema dudoso Consejo útil #4
21
Consejos útiles
1. Nombre del sitio Web
2. Valor o propuesta de la web (qué
beneficio ofrece a los usuarios, que
pueden encontrar)
3. Menú de navegación por secciones
relevantes al usuario.
Acción ( CTA)
Priorización de elementos ( 600px) Consejo útil #5
22
Consejos útiles
El espacio en blanco ayuda a la comprensión.
Necesitamos espacio en blanco para ordenar los
elementos.
Con el espacio en blanco se generan jerarquías
visuales, podemos jugar con esto.
Aislar los CTA es una forma inteligente de
focalizar al usuario hacia tus objetivos.
El espacio en blanco Consejo útil #6
23
Consejos útiles
El espacio en blanco
24
Consejos útiles
DOMAINS & ADVERTISING
Proceso de creación web Exportando el mundo profesional al ámbito del “small site”
Creación web: una realidad peliaguda Cómo es el proceso real de una web profesional
26
Proceso de creación web
En un inicio fue un complemento informativo
de la empresa.
Explosión de internet: Todos pueden tener una
web, las empresas empiezan a invertir.
Tendencia hacia un mundo basado en internet.
Cloud es el futuro.
Una web profesional implica a mucha gente en
su realización.
Creación web: una realidad peliaguda Cómo es el proceso real de una web profesional
27
Proceso de creación web
Estadísticas de tendencia relacionadas con la
actividad de vuestra web.
http://www.google.es/trends/
Revisar los directorios públicos: Dmoz
http://www.dmoz.es/
Benchmark: comparativa con las webs similares
a tu actividad / propósito.
Creación web: Análisis A tener en cuenta antes de empezar con el diseño web
28
Proceso de creación web
Brainstorming visual
La importancia del boceto rápido
Definición de los elementos que participan
Tener en cuenta el diseño de interacción
Creación web: Proyectación Empezando a plasmar la idea
29
Proceso de creación web
Encabezado
Info principal ( H1, H2…)
Intro
Logo
Cuerpo
Columnas/ barras auxiliares
Contenido principal
Desarrollo de las acciones principales
Pie de página
Creación web: Partes importantes A tener en cuenta antes de empezar con el diseño web
30
Proceso de creación web
Estructura eficiente, que facilite el
mantenimiento ( archivos fácilmente localizables)
Recomendado: organización semántica y
explicativa
URL descriptivas e inteligentes:
http://www.sitioweb.com/eaf_files/fap.html
http://www.sitioweb.com/astrofisica/fuerzas/atraccion-
planetaria.html
Creación web: Estructura de archivos A tener en cuenta antes de empezar con el diseño web
31
Proceso de creación web
Html como base.
CSS para usar los estilos. El CSS nos va a definir
infinidad de características de la página web. Hay
varias versiones de css y html.
Actualmente vamos por la versión html5 y CSS3.
Creación web: Codificación Apuntes breves sobre el html y el css
32
Proceso de creación web
Vamos a coger el ejemplo del wireframe y ver como está estructurado el código.
http://webinarsjm.newcloudsite.com/?mode=edit
Creación web: Codificación Apuntes breves sobre el html y el css
33
Proceso de creación web
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 y
evolutivahttp://www.escueladeinternet.com
Creación web: Diseño evolutivo Apuntes breves sobre el html y el css
34
Proceso de creación web
DOMAINS & ADVERTISING
Estándares Usos y hábitos que deberían seguirse siempre al cerar una web
Exinten estándares web, están establecidos y se
recomienda 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 los
navegadores.
Respeto por los estándares Aunque resulte pesado es muy aconsejable ser estricto
36
Respeto por los estándares
Respeto por los estándares Sin estándares tu web se ve diferente en navegadores distintos
37
Respeto por los estándares
Problemas en la maquetación: el CSS no se rige
por la normativa.
Diferencias en espacios, paddings, sombras y
otros elementos.
Problemas de carga de algunos elementos según
su propiedad.
Respeto por los estándares ¿Qué errores se generan fruto de no seguir estándares?
38
Respeto por los estándares
Seamos conscientes que esto no es una ciencia
exacta, si no hacemos codificaciones extrañas
no tiene que pasar nada.
Navegadores como Internet Explorer no soportan
muchas propiedades y clases, lo cual genera
errores.
Respeto por los estándares No todo va a ir mal, a veces los navegadores son el problema
39
Respeto por los estándares
Respeto por los estándares Si todo va mal… ¡Siempre nos quedará el comodín del público!
40
Respeto por los estándares
DOMAINS & ADVERTISING
¡Muchas gracias! Encuentra todo el contenido de este seminario web en:
www.escueladeinternet.com