Tips para comenzar en diseño web.

1. Diseño web – primeros pasos
Diseñadores  Web

2. Aspectos a tomar en
cuenta:
• Diferentes navegadores
• Diferentes tamaños de monitores.
• Estándares, ah… y el SEO

3. Además de los tiempos de
entrega, los CMS, las
versiones de IE, el
jQuery, JavaScript, PHP,
ASP, CSS
(pánico!)

4. EL proceso de diseño web (en general) es el siguiente:
PSD --> HTML/CSS

5. Tips de diseño web para el Photoshop

6. PSD
Tip 1: Comenzar con un Canvas o lienzo
de tamaño apropiado

7. PSD
La idea es hacer que nuestra página muestre el contenido
importante en la primera pantalla

8. PSD
Barra de scroll horizontal … diack XP
Minimizar la cantidad de scrolls verticales, y evitar las barras de
scroll horizontal

9. PSD
Para ello podemos tomar como referencia el siguiente gráfico:

10. PSD
Cantidad de píxeles estimada de ancho x largo
que pueden ver los usuarios.
Resolución visible Al menos X% de usuarios
760x420px 100%
960x600px 92%
1210x630px 50%
1370x730 11%

11. PSD
960px de ancho es una medida de lienzo segura y
cómoda para comenzar a diseñar para la web en
photoshop

12. PSD
Tip 2: Capas/layer organizados

13. PSD
Las Capas o layers
organizados
Por lo general, los sitios
web tienen una
estructura común:

14. PSD
Es por esto, que es buena
idea comenzar con un
documento en PSD que
ya tenga todas estas
capas organizadas en
carpetas, así será más
sencillo ubicar y
modificar ciertas capas
ahorrando tiempo y
esfuerzo

15. PSD
Tip 3: Lorem ipsum - El texto de ejemplo

16. Textos de ejemplo:
Por lo general nunca comenzamos con el texto final y debemos
rellenar

17. PSD
Mala idea número 1: texto de ejemplo
Texto de ejemplo Texto de ejemplo Texto de ejemplo Texto
de ejemplo Texto de ejemplo Texto de ejemplo Texto de
ejemplo Texto de ejemplo Texto de ejemplo Texto de
ejemplo Texto de ejemplo Texto de ejemplo Texto de
ejemplo Texto de ejemplo Texto de ejemplo Texto de
ejemplo Texto de ejemplo Texto de ejemplo
No sigue una distribución regular

18. PSD

19. PSD
Mala idea numero 2: texto random
Hola mi nombre es juan y esta es la página más bonita que
he cosechado Hola mi nombre es juan y esta es la página
más bonita que he cosechado Hola mi nombre es juan y esta
es la página más bonita que he cosechado Hola mi nombre es
juan y esta es la página más bonita que he cosechado Hola
mi nombre es juan y esta es la página más bonita que
El lector se distrae con el texto

20. PSD

21. PSD
La solución: lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
fringilla orci ac mauris egestas tempor. Aliquam hendrerit
tincidunt ante, eget adipiscing elit consequat vitae. Nulla
vehicula neque adipiscing tortor posuere eu interdum nisi
pretium. Nulla tincidunt rutrum felis eu dapibus. Nullam eros
urna, condimentum ac scelerisque ac, iaculis sed dolor. Nulla
non ultrices nisl. Curabitur eleifend nisl a sem volutpat
rhoncus. Curabitur sed nisi ipsum. Suspendisse sed metus
ipsum. Proin ornare pellentesque luctus. Nunc hend

22. PSD
El punto de usar Lorem Ipsum es que tiene una
distribución más o menos normal de las letras, al
contrario de usar textos como por ejemplo "Contenido
aquí, contenido aquí"."

23. PSD
ejemplo

24. PSD
ejemplo

25. PSD
Recapitulando la sección sobre el PSD:
• 960px de ancho es una medida segura para trabajar en diseño
web.
• Trabajar con un lienzo con las capas organizadas es un
excelente punto de partida
• Usar el "loremp ipsum" como texto de relleno mantendrá al
lector/cliente enfocado en el diseño haciendo más fácil obtener
feedback.

26. Vamos con el CSS

27. CSS
CSS es el lenguaje en el que esta basada la presentación
de un documento web.

28. CSS
Esta es una página web con el CSS habilitado

29. CSS
Esta es la misma página web pero con el CSS deshabilitado
...apesta right?

30. CSS
Consideraciones:
• Escribir un CSS desde 0 toma tiempo y si estas
empezando más.
• Internet Explorer ( must die!)

31. CSS
Qué podemos hacer?

32. CSS
Tip 1: Usar un framework de CSS

33. CSS
Usar un framework de CSS
Ej.: El 960.gs
Consiste en una hoja en CSS que incluye una
serie de estilos predeterminados para
diagramar tu sitio en base a 12, 26 y 24
columnas a un ancho web fijo y seguro
( adivinen…960px)

34. CSS Esta página está hecha con el 960.gs a 12
columnas

35. CSS
Tip 2: Usar los resets de CSS

36. CSS
Usar los resets de CSS:
Así sortearás las inconsistencias de estilo entre navegadores

37. CSS
Algunos resets:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

38. CSS
Recapitulando:
• Usar un framework para programar tus hojas de estilo te da
una buena y aventajada posición para empezar en el diseño
web
• El 960 grid system es un framework que trabaja 960px de
ancho y sirve para diagramar por css el sitio web siendo
consistente entre navegadores
• Dado que los valores por efecto varían de navegador a
navegador usar los reset de CSS resuelve las inconsistencias y
te da un punto de partida con menos preocupaciones.

39. Y ahora el HTML

40. HTML
Tip 1: comienza con un sitio organizado

41. HTML
Comienza con un
sitio organizado
Nota: No es
exactamente un tip
de html pero si te
ayudará a tener un
código organizado.

42. HTML
Tip 2: utiliza los comentarios para
enmarcar los segmentos de código

43. HTML
Utiliza los comentarios de HTML para organizar
tu código:

44. HTML
Ejemplo:
<!-- BEGIN OF HEADER -->
<div id="header">...</div>
<!-- END OF HEADER -->

45. HTML
Tip 3: Valida tu código

46. HTML
Prueba tu código en todos los navegadores que puedas y usa el
validador de la w3c: http://validator.w3.org

47. HTML
Herramientas para validar y probar tu código:
• Validador de la W3C: http://validator.w3.org/
• Firebug (addon para firefox): http://getfirebug.com
• Web developer bar (addon para firefox)
https://addons.mozilla.org/en-US/firefox/addon/60

48. HTML
Tener un código válido es fundamental para:
• Minimizar las inconsistencias entre
navegadores
• Por un error en el código es posible que los
spiders de google no lean el contenido y tu
pagina no sea indexada apropiadamente
• Evitarás futuros dolores de cabeza cuando
implementes código dinámico a tu sitio

49. HTML
Recapitulando:
• Usar los comentarios HTML para organizar tu código es
buena idea
• Un código válido permitirá que tu página sea indexada
correctamente por los buscadores
• Para validarla puedes usar la webdeveloper bar o bien
el W3C validator.

50. Algunos recursos consultados:
• Webcanvas seguro: http://ow.ly/1zVIa
• Framework de CSS: http://960.gs
• Speed Up Your Design Processes While
Reducing Errors: http://ow.ly/1zVHo

51. Gracias!
Preguntas / planteamientos / sugerencias / decir hola:
• Twitter: @juanrules
• Facebook: facebook.com/juanrules
• Mail: juanrules@gmail.com
• Blog: juanrules.me
• Trabajo: vmr.com.ve