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