miércoles, 13 de enero de 2016

GUIA DE DISEÑO DE PAGINAS

Guía esencial para aprender diseño web


Por ocasión especial me encuentro publicando material el día de hoy, ya que ayer tuve una charla especial en el Designcamp sobre tips y recomendaciones para aprender a diseñar web. Como lo prometí, les comparto una serie de páginas que han sido de gran importancia en mi formación como diseñador y desarrollador web. Hay mucho que leer y aprender, pero no se preocupen, es un viaje que vale totalmente la pena.

Artículos y tutoriales

Les comparto varios blogs muy centrados en diseño web que pueden ayudarlos maravillas y mantenerlos al tanto de cómo evoluciona el desarrollo web.

Nettuts


A primera instancia es una página de tutoriales, tips y artículos para desarrolladores web avanzados, hay mucho material sobre nuevos lenguajes, sistemas y frameworks, pero también es posible encontrar artículos de gran valor para principiantes en diseño web, o quienes quieren aprender poco a poco lenguajes como Javascript, CSS y HTML.







Este blog en especial, ha sido uno de los que leo con más frecuencia. Es un sitio realmente completo: aquí encontrarás artículos de actualidad sobre nuevas tecnologías, análisis sobre diseño y desarrollo web, tutoriales y muchos recursos gratuitos. Además, su sitio es una referencia genial sobre diseño responsivo (el sitio se ajusta automáticamente al tamaño de la ventana del navegador).








Otro blog de diseño web que ofrece tutoriales, muchos recursos gratuitos para descargar y varios artículos interesantes sobre el panorama web.
Es muy importante para un diseñador web utilizar retículas para dar forma y orden a una propuesta. Afortunadamente hay muchas opciones gratuitas que ofrecen estructuras armónicas para manipular.

Herramientas de diseño y estructuración web




Team Tree House;


Este es un sitio genial donde enseñan sobre diseño y desarrollo web, así como desarrollo de iOS para apps a través de videos organizados por niveles.









Esta página ofrece artículos, herramientas y guías para estructurar tu sitio web con retículas de todo tipo. Les recomiendo seguir cada enlace, ya que es una red de información con otros sitios muy útil.





Este sistema me parece una opción muy atractiva para quienes quieran desarrollar sitios web planeados para diferentes dimensiones de pantallas y dispositivos móviles. Está configurado de tal manera que el sistema reticular fluye dependiendo de las dimensiones. Una gran alternativa, aunque requiere un poco más de conocimientos sobre CSS para mantener estas propiedades.
Aprender desde lo más básico de este lenguaje web servirá mucho para llenarte de herramientas muy útiles para armar páginas web de la mejor manera posible.

Aprender HTML









Este sistema retícular de 960px de ancho se hizo muy popular por ofrecer una estructura armónica organizada en columnas de 12, 16 y 24 con lo que ofrecen mucha libertad para manipular el contenido. Pueden descargar cualquier opción, desde el template para Photoshop e Illustrator hasta el HTML y CSS configurado.





Este sitio ofrece muchos tutoriales para familiarizarse con el lenguaje HTML y CSS. Principalmente recomiendo aprender las etiquetas básicas del HTML y el manejo de ID’s y clases.

Aprender y practicar CSS

Francamente creo que aprender CSS es muy fácil, la estructura y nomenclatura de sus etiquetas es bastante lógica. Estos sitios sevirán de gran ayuda para dominar las artes del CSS.



Siempre que me encuentro con alguna duda sobre CSS recurro a esta página, es una mina de oro en tips y tutoriales para manipular CSS y conseguir efectos de todo tipo. Siempre que tengan una duda, búsquenla aquí.

Este es un recurso que muchos amarán. Por default en las fuentes tipográficas para web se limitan a Helvetica (Mac), Arial(PC), Trebuchet, Lucida Sans, Times New Roman y Georgia principalmente. Sin embargo, hace unos años, se desarrolló una tecnología para que las fuentes tipográficas pudieran implementarse de una manera cómoda y ligera, en vez de tener que usar imágenes. Es importante notar que hay muchas fuentes cuyo uso para web requiere de un costo adicional, pero no se preocupen, aún así hay muchas opciones tipográficas gratuitas que pueden implementarse en la web!




Google también ofrece un servicio bastante cómodo para implementar Webfonts, y este es totalmente gratuito. Constantente el catálogo crece con fuentes de muy buena calidad.

Galerías de inspiración


manera de mantenerse actualizados sobre tendencias y novedades del diseño web, es a través de galerías de inspiración. Existen muchísimas en la red, pero para mí las más respetables son estas dos página: