• 0
  • 10 RepliesReplies
  • 16735 ReadTimes Read
  • 8 PointsPoints

Topic: 5 Principios básicos para el Diseño Web

Usuario: Sofía
Rango: Excelente User
Mensajes: 176
Points: 174
Mi web: http://www.chatrsr.com.ar
Perfil: View Profile
Pais:
ar
5 Principios básicos para el Diseño Web
September 04, 2012 - 06:09 18:09
Hola a todos!

Quiero compartir con ustedes este excelente post sobre el diseño de un Sitio Web

Para todo proyecto web deben haber ciertas reglas de “estética” por así decirlo, como son los siguientes principios. Además si se empieza analizar como se debe diseñar un Sitio Web, se debería ver antes revistas, libros, ya que no inventamos de la nada una nueva forma de leer y comprender lecturas, sino que lo que debemos hacer es adaptar estas nuevas tecnologías a nuestra información. Creo que es la forma más sencilla de explicarlo.

Espacios en blanco

Parece tan pero tan sencillo, pero lograr que una página web se vea bien con tan sólo tener espacios en blanco bien elegidos hace una grandísima diferencia y es que necesito ejemplificarlo con ejemplos reales para que puedan notar que tan importante es esto.



¿Y porqué debemos hacer esto?  Sencillamente porque si algo está muy unido se pierde el enfoque de lo que se quiere decir y de lo que realmente es importante, también se ve desordenado, al haber buenos espacios en blanco(como los mostrados en rojo en la imagen de arriba) crean un ambiente mucho mejor para el ojo, dan una sensación de más espacio inclusive.

Y al decir espacios en blanco, no me refiero a literalmente poner color blanco, sino que cuando ya estemos creando el sitio web, esos espacios se respeten con paddings o margins

Tipografía

Sí señores, cual es la mejor? Debo usar Serif o San-Serif?  Esto no es lo que vamos a hablar, de cual tipografía, sino de los tamaños de la tipografía, ya que si empezamos hablar sobre que tipografía usar esto se puede llegar a convertir en un gran debate y la idea es ayudarnos y mejorar. Así que volviendo al punto, dentro de un Sitio Web, la tipografía es una de las claves más importantes para poder llamar la atención al usuario, para crear armonía en el sitio, etc.



Contrastes

Creo que no hay que decir mucho, es muy dificil leer un texto cuando su fondo es prácticamente del mismo color que el texto.



Como se muestra, el mejor contraste que se puede lograr es blanco/negro o negro/blanco, los otros son buenos contrastes pero no tan claro como el que se muestra con blanco/negro.

Wireframes

Wireframes son muy útiles antes de crear un sitio web, es como una lluvia de ideas, donde puede bocetear lo que va a ser el sitio web. Quizás algo muy trivial de decir, pero es algo que sencillamente mejorará la creación de sitios webs, y por varias razones.

*Genera una idea globlal de lo que se va a crear.
*No se ha gastado tiempo en programas como Photoshop, Notepad o Dreamweaver.
*Como es papel, puede hacer hasta cuantos wireframes quiera.



Luego de aceptar un wireframe se puede pasar a Photoshop o Ilustrador (Gimp o Inkscape). Para que el jefe o el cliente pueda ver la idea del sitio web.


Grids

Y de último pero no el menos importante, los grids. Los grids son como “tablillas” por así decirlo de cierta manera, a la hora de empezar a diseñar un sitio web en Photoshop o algún otro programa debemos tener en cuenta esos espacios en blanco que hablaba arriba, y una ayuda muy grande para poder crear esos espacios en blanco es usando los grids.

Los grids ayudan para acomodar el contenido, a darle forma y además a que todo se vea mucho más ordenado, hay varios sistemas o páginas que nos facilitan los grids a nosotros, pero mi recomendación es 960.gs . Y la recomiendo porque es como la más fácil de usar.



Resumiendo, 5 principios sumamente sencillos que se deben tener en cuenta antes de diseñar un Sitio Web son:

*Espacios en Blanco
*Tipografía
*Contrastes
*Wireframes
*Grids

Cada uno de estos nos ayuda a tener un diseño mucho más.

*Limpio
*Eficiente
*Ordenado
*Entendible

Sus opiniones también son importantes para el foro, así que esperamos los comentarios para ayudar a miles de usuarios

Fuente: 5 Principios que debe saber antes de diseñar un Sitio Web
Chat Argentina y Contenido Original en Foros
Usuario: Lean
Rango: Fundador
Mensajes: 6782
Points: 236
Perfil: View Profile
Pais:
ar
Re:5 Principios básicos para el Diseño Web
Reply #1 September 04, 2012 - 07:00 19:00
Muy buen articulo!
Usuario: Papá distante
Rango: Moderador Global
Mensajes: 3504
Points: 168
Perfil: View Profile
Pais:
de
Re:5 Principios básicos para el Diseño Web
Reply #2 September 04, 2012 - 07:50 19:50
Excelente información! va para el face!
Usuario: manix
Rango: User Extremo
Mensajes: 437
Points: 214
Perfil: View Profile
Pais:
cr
Re:5 Principios básicos para el Diseño Web
Reply #3 September 14, 2012 - 11:38 23:38
Los wireframes tambien son llamados Mockups, son demasiado utiles. Existen herramientas online como "lumzy" o "mockflow".
Usuario: Lean
Rango: Fundador
Mensajes: 6782
Points: 236
Perfil: View Profile
Pais:
ar
Re:5 Principios básicos para el Diseño Web
Reply #4 September 14, 2012 - 11:42 23:42
Los wireframes tambien son llamados Mockups, soy demasiado utiles. Existen herramientas online como "lumzy" o "mockflow".
wow! No tenia idea de eso! Gracias por el aporte!
Usuario: Losox
Rango: Excelente User
Mensajes: 874
Points: 109
Perfil: View Profile
Pais:
mx
Re:5 Principios básicos para el Diseño Web
Reply #5 September 15, 2012 - 12:23 00:23
Informacion util y de calidad :3
Usuario: Papá distante
Rango: Moderador Global
Mensajes: 3504
Points: 168
Perfil: View Profile
Pais:
de
Re:5 Principios básicos para el Diseño Web
Reply #6 September 15, 2012 - 07:27 07:27
Manito arriba para manix
Usuario: Lean
Rango: Fundador
Mensajes: 6782
Points: 236
Perfil: View Profile
Pais:
ar
Re:5 Principios básicos para el Diseño Web
Reply #7 September 15, 2012 - 08:11 08:11
Pido manita arriba tambien para manix!
Usuario: falconmaster
Rango: Excelente User
Mensajes: 22
Points: 53
Mi web: http://www.zonadaxion.com
Perfil: View Profile
Pais:
mx
Re:5 Principios básicos para el Diseño Web
Reply #8 January 07, 2013 - 12:27 00:27
Excelente articulo, yo ya hacia uso de lo que mencionas a excepción del wireframe, actualmente siempre hago el diseño en photoshop antes de hacer bocetos a papel.
no avatar
Usuario: antgonzz
Rango: Recién Llegada
Mensajes: 1
Points: 0
Mi web: http://www.smfsimple.com
Perfil: View Profile
Pais:
es
Re:5 Principios básicos para el Diseño Web
Reply #9 November 29, 2013 - 09:16 21:16
Excelente informacion, ahora mismo va para Facebook, muchas gracias.
Saludos.
Anita.



________________________________________________________________
Lo último sobre Diseño de páginas web
no avatar
Usuario: nodensdorian
Rango: Nuevo Usuario
Mensajes: 207
Points: 27
Mi web: http://www.ardiforos.com.ar/
Perfil: View Profile
Re:5 Principios básicos para el Diseño Web
Reply #10 November 30, 2013 - 01:49 01:49
Muy Buena Info! Gracias por la data!
 

TAGS



top

Smfsimple.com es un sitio destinado a brindar un servicio de soporte y herramientas para foros realizados con el sistema de foros gratuito simplemachines.org. Contamos con un selecto equipo de desarrolladores y conocedores del sistema, sus foros estaran en buenas manos.
This site is not affiliated with or endorsed by Simple Machines