Contenido principal
Curso: Programación de computadoras > Unidad 2
Lección 9: Más aprendizajeDiseño de páginas web
Te enseñamos cómo hacer páginas web, pero no necesariamente te enseñamos cómo hacer páginas web que se vean bien. Por supuesto, la belleza está en el ojo del espectador, así que en última instancia depende de ti (y de tus usuarios) decidir si tu página web se ve bien. ¡Pero te podemos dar algunos consejos y trucos!
Además de verse bien, probablemente quieras que tu página web se vea diferente de otras páginas web de modo que destaque para tus usuarios.
A menudo esa es la parte difícil: hacer que tu página web se vea bien al mismo tiempo que se vea diferente. Puedes hacerla terriblemente distinta cubriéndola toda con rayas de cebra y usando una fuente de 64 pixeles, pero ¿deberías? Probablemente no.
Escoger buenas fuentes
Por defecto, los navegadores sirven las páginas web con una familia de fuente serif genérica, que tiende a transmitirle una vista más formal a una página. Podrías decidir cambiar eso a la familia de fuente sans-serif genérica, o podrías especificar una familia de fuente específica que se encuentre en la mayoría de las computadoras de los usuarios, como Garamond o Helvetica.
Para darle a tu página web un aspecto más distintivo, también puedes usar una fuente web personalizada. Por ejemplo, Khan Academy usa Lato en todas nuestras páginas, una fuente sans-serif agradable:
Cuando usas una fuente web, en realidad estás haciendo que el navegador del usuario descargue un archivo de fuente a la computadora del usuario de modo que puedes referirte a ese archivo de fuente desde el CSS. Es una descarga adicional para el navegador, así que no deberías usar demasiadas, y no deberías incluir ninguna que no tengas intenciones de usar. Un buen lugar para encontrar fuentes web gratuitas es Google Web Fonts. Revisa esta página web de ejemplo en Khan Academy que usa dos fuentes web de Google.
De donde sea que obtengas tus fuentes, debes estar alerta para no sobrecargar la fuente. En general, no debes usar más de dos o tres familias de fuentes en una página, y tus fuentes deben ir bien juntas. Aquí está un sitio web útil que da ejemplos de fuentes web de Google que van bien juntas.
Escoger buenos colores
Cuando diseñas una página web, a menudo quieres usar una paleta de colores: un rango de colores que funcionan bien juntos y que se pueden usar para las distintas partes de tu página web. Estos colores pueden estar basados en el logotipo de tu compañía, pueden estar relacionados con el tema de la página o simplemente pueden verse bien en conjunto.
¿Necesitas ayuda para escoger una paleta? Si ya sabes algunos de los colores en los cuales quieres basar la paleta, puedes dirigirte a Paletton, una herramienta que te permite visualizar diferentes tipos de paletas: monocromáticas, triadas, colores adyacentes y tétradas.
Si estás empezando desde cero, puedes navegar las paletas en COLOURLovers, una comunidad de gente que ama los colores y contribuye con colores, paletas e ideas de patrones. Aquí esá una paleta llamada Giant Goldfish:
Una vez que hayas escogido una paleta, ahora viene la parte difícil: averiguar qué colores aplicar a qué partes de tu página web. ¿Qué color deben tener los encabezados? ¿Los vínculos? ¿El texto? ¿El fondo? Lo genial de Paletton es que te dan un ejemplo de una página web que usa la paleta:
A medida que decides cómo se va a traducir tu paleta en CSS, considera unas cuantas cosas:
- Si cambias demasiado el estilo predeterminado de los vínculos, los usuarios podrían ya no darse cuenta de que son vínculos.
- Los colores del texto del primer plano y del fondo deben contrastar los suficiente para que tus usuarios no tengan que entrecerrar los ojos. Revisa tus colores en este comprobador de contraste.
- Muchos humanos son daltónicos. Algunas combinaciones de color no tendrán suficiente contraste para ellos. Revisa tus colores en este simulador de daltonismo.
Si no estás seguro acerca de la forma en que estás usando la paleta de color, envíala a algunos amigos y pídeles su opinión honesta. ¿Pueden leer todo? ¿Saben en dónde pueden hacer clic? ¿Hay colores que les hacen arrugar la nariz? ¿Qué colores les gustan?
Usar bien los espacios en blanco
Una vez le pregunté a mi colega, quién ahora es un diseñador en Google, cuál era su secreto para un gran diseño. ¿Su respuesta? ¡Espacios en blanco!
Los espacios en blanco se refieren a cualquier espacio en blanco entre dos elementos, y en la tierra de CSS, usualmente viene de las propiedades como padding, margin y line-height.
Mi amigo está en lo correcto: los espacios en blanco pueden tener un gran efecto en qué tan bien se ve tu página web y qué tan fácil es leerla. Mis amigos diseñadores algunas veces pasan horas afinando los espacios en blanco para tenerlos bien, porque saben qué tan importantes son.
Para un ejemplo extremo, aquí está una comparación de la barra lateral de nuestra página de cursos con y sin espacios en blanco:
¿Qué significa eso para ti? Es difícil dar reglas duras y rápidas sobre los espacios en blanco. Solo hay que estar consciente de ello. Siempre que tengas un elemento que está junto a otro, considera cuánto margen hay entre ellos. Si tienes un elemento con un fondo o un borde, considera cuánto relleno tiene. Cuando crees tus párrafos y listas, considera si una altura de línea adicional les daría algo de espacio de lectura.
Empezar desde plantillas y frameworks
Puedes estar intimidado después de leer todas estas guías, especialmente si no consideras que tienes un ojo para el diseño. No te preocupes, no tienes que ser un experto en diseño para tener una página web que se vea genial. En lugar de eso, puedes empezar desde una plantilla o un framework y tomar ventaja del esfuerzo que otros diseñadores han puesto en ellos.
Una plantilla es HTML y CSS que ya se ve como una página web completa, a menudo rellenada con contenido falso. Puedes encontrar plantillas de W3Schools o buscar en la web "free webpage templates" (o plantillas web gratuitas) ¡y esperar que las que encuentres sean en verdad gratuitas! Una vez que descargues una plantilla, puedes sustituir tu contenido y seguir modificando el CSS para satisfacer tus necesidades.
Un framework de CSS es una colección de reglas de CSS que te dan un buen punto de partida para un sitio web hábil. Hay muchos frameworks de CSS populares que te facilitarán crear un sitio bellamente estilado: Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat y más. Puedes revisar ejemplos de Twitter Bootstrap y ZURB Foundation aquí en Khan Academy.
Una vez que hayas descargado un framework de CSS, puedes navegar por la documentación para encontrar ejemplos (¡a menudo también tienen plantillas!) y averiguar qué nombres de clases de CSS lograrán la apariencia que quieres.
Cuando usas plantillas o frameworks, arriesgas a que tu sitio web se vea exactamente igual que otro sitio web y que no destaque mucho en la mente de tu usuario. Para evitar eso, agrega tu propio logotipo y cambia algunos elementos clave como la familia de fuente o el color de fondo.
¿Quieres unirte a la conversación?
excelente curso ahora tengo buenas bases(33 votos)
y en eso tienes razón yo pase de introducción a js: dibujo y animacion a html/css(2 votos)
Excelente página y cursos, ojalá puedan incorporar cursos más avanzados para realizar páginas web responsive utilizando alguno de los frameworks que recomendaron :)(9 votos)- Excelente el curso de "Introducción a HTML/CSS: hacer páginas web" claro y muy sencillo de entender, todo se trata de concentrarse y ser disciplinado con los cursos. Muchas gracias Khan Academy!(5 votos)
- Es una página genial <3(4 votos)
- Excelentes consejos, los enlaces que dan son de gran ayuda.(3 votos)
- Excelente Khan Academy, mis 5 estrellas, excelente curso con un gran contenido muy valioso, está muy bien diseñado de modo que se pueda aprender facilmente, se pueda entender y lo mejor de todo que sea super agradable y simpático el aprendizaje. También excelente poder practicar cada lección, muy bien explicado todo y diseñado pensando en nuestro crecimiento.(3 votos)
tienen buenas ideas y son buenos cursos(3 votos)
woo me encanto el curso , lo recomiendo 100%(2 votos)- Muy buena me sirvió demasiado(2 votos)
Excelente el curso, bastante entretenido(1 voto)