Guía esencial para aprender diseño web

Sobre mi charla en el Designcamp

De nuevo debo agradecer a Barcamp MTY por la oportunidad de compartir un poco de mi pasión, y debo agradecer más a todos los que asistieron a la charla, no saben el gusto que me dió ver a tanta gente interesada en el tema!

Para los que no pudieron asistir a esta charla (y a los que quieran recordarla) les comparto la presentación en PDF, donde se habló de las inquietudes principales que pueden tener los diseñadores que se interesan en adentrarse en este mundo web. Y una serie de mandamientos muy importantes que deben seguir a toda costa.

Descargar presentación “¿Con que quieres ser diseñador web?”

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.

Smashing Magazine

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).

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.

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.

Web Designer Depot

Otro blog de diseño web que ofrece tutoriales, muchos recursos gratuitos para descargar y varios artículos interesantes sobre el panorama web.

Herramientas de diseño y estructuración 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.

the Grid System

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.

960 Grid Sistem

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.

The 1140px CSS Grid

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 HTML

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.

About Web Design

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.

CSS Zen Garden

Este fue un gran proyecto para compartir y mostrar la versatilidad del código CSS en la estructuración de interfaces gráficas. Aquí no verás nada de lenguajes complicados, sólo HTML y CSS. El ejercicio es bastante simple, tienes un texto base, al cual uno puede darle la forma que uno quiera, en base a eso se formó una galería que muestra un sinnúmero de ejemplos. Les servirá también entrar a la documentación sobre CSS y cómo se armó el proyecto del CSS Zen Garden.

CSS Tricks

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í.

Webfonts

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!

MyFonts

En MyFonts pueden adquirir familias completas o una fuente de forma gratuita y con un paquete de scripts preparados para usarse como webfonts. Sólo deben de seguir el proceso de compra, pero no teman, no gastarçan ni un centavo.

Typekit

Typekit es el servicio más popular de webfonts que hay actualmente, de manera sencilla puedes implementar webfonts de un vasto catálogo de tipografías de calidad. El servicio gratuito sólo te permite integrar una webfont por sitio web.

Google Webfonts

Así es, 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

Otra 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:

Best Web Gallery

Este sitio web resulta particularmente especial para mí. Creo que es de las galerías web con mayor antigüedad en estos días, así que les recomiendo que vean los primeros sitios web que se publicaron para que puedan contemplar la evolución de la manera de desarrollar y diseñar web a través de los años.

Awwwards

Atención damas y caballeros, porque este sitio web premia y analiza a lo mejor de lo mejor que encontrarán en diseño y desarrollo web en estos días. De verdad que se encontrarán con la galería más fantástica y hermosa que puedan imaginarse con una navegación, efectos y experiencia de usuario que hace un par de años parecía imposible de lograr. Esta galería sirve para pensar “Yo quiero hacer sitios web así algún día…”

Espero que estos recursos les sirvan tanto como a mí, éstos son sólo unos de los infinitos recursos que encontrarán en la web para aprender sobre esta rama del diseño!

Te puede interesar