Guía esencial para aprender diseño web

Publicado el 29 / 04 / 2012
Buen domingo a todos! 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.

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!


Escrito por

Te puede interesar

  • http://designcenter.com.mx Ing. Luis Rojas

    Una perfecta guia para empezar, excelente post, muchas gracias!

  • Rubén Rojas

    Buenísimo post.

    La liga de Smashing Magazine es incorrecta.
    Saludos!

  • César Rebolloso

    CSS Tricks es un muy buen sitio, siempre lo checo cada vez que puedo.

  • Melissa Gzz.

    ¡Se ve muy interesante el de CSS Zen Garden!

    Lo checo ahora mismo 🙂

    P.D. Excelente plática la del Sábado.

  • azur

    Saludos! excelente lista de recursos, una muy buena que te recomiendo también es http://www.sitepoint.com/

  • http://publicidadypaginasweb.com Diseño Web

    Excelente Guía sobre Diseño Web recondamendable para iniciar.

  • Milo

    tsss muy buena toda la información

  • Milo

    tsss muy buena toda la información

  • Alebrije

    Yo he tomado cursos en línea con unos hackers colombianos buenísimos, en http://www.mejorando.la , aunque son muy dedicados a que se tenga conocimiento real de la codificación y el marcado dejando a un lado las herramientas como CSS Tricks y similares 😐 supongo que porque ellos antes de diseñadores web son programadores jajajajajajjaja son muy clavados sólo te permiten usar un editor de código :S un editor de código, no un generador de código… Pero aprendes muchísimo 😀

  • Alebrije

    …siguiendo con el tema de estos cuates de http://www.mejorando.la , buenísimos —ellos comentaban que un diseñador web es quien domina html, css y js y debe de saber escribirlo , pero que un diseñador web -con estos conocimientos- NO es un programador o desarrollador :s — así que cada vez que conozco a un desarrollador de software jamás digo que yo hago desarrollo web jajajaja no me vaya a llover xD

  • www.proyectowebmalaga.com

    Excelente guía sobre diseño web. Es muy útil para los que se inicien en tareas de diseño web y quieran aprender crear páginas web.

  • www.proyectowebmalaga.com

    Excelente guía sobre diseño web. Es muy útil para los que se inicien en tareas de diseño web y quieran aprender crear páginas web.

  • Diego Urbina

    Muy útil, gracias! Mi favorita es MyFonts siempre suelo descargar fuentes de allí.
    Si necesitan más ideas o algunas plantillas, estilos o diseños web en Geek Bears puedes encontrar soluciones según la categoría de tu negocio http://www.geekbears.com/portafolio/