Enlaces de interés Diseño Web  TwitterFacebookGoogleLinkedIn

Para tener éxito en el Diseño Web se necesitan meses para aprender y años para mejorar. Para esto no hay mejor sitio que Internet, donde “vive” la totalidad de la comunidad de diseñadores web del planeta.

En esta profesión tenemos que estar constantemente atentos las nuevas tendencias, a los cambios de los algoritmos de SEO por parte de Google, en la forma de adaptar nuestro contenido a diferentes dispositivos, etc…

No, no hay un método más rápido si quieres tener éxito, lo siento. Sin embargo, el no dejar de aprender y desarrollar tus habilidades es una de las mejores cualidades de este trabajo, pues nunca podrás cansarte de estar mucho tiempo haciendo lo mismo.

Soy Héctor de Prada, tengo 21 años, acabo de completar mi grado en Web Design & Internet Development en la Universidad de Kirtland, USA, y no, no soy un experto en el Diseño Web. No todavía, pero es algo que me apasiona, y no podría tener más ganas de seguir aprendiendo.

Escritorio Diseño Web

Por eso mismo, he querido hacer una recopilación de links que me he ido encontrando durante mi etapa de estudiante y que me parecen muy interesantes y aprovechables para cualquiera que se dedique al Diseño Web. Consejos sobre código, posicionamiento SEO, diseño de páginas, e incluso guías para adentrarte en el mundo freelance. Son solo unos pocos de los miles que se pueden encontrar en la red, pero en mi caso, descubrirlos me ha servido para mejorar mis habilidades enormemente.

Para empezar, me gustaría hacer una mención especial a este artículo de Ezequiel Bruni para WebDesignerDepot.com The ultimate guide to getting started in Web Design. Si quieres empezar a dejar tu firma en el mundo del Diseño Web, o si quieres llevar tus habilidades al siguiente nivel, esta extensa y trabajada guía es perfecta para ti.

Como es sabido, las personas que se dedican a este oficio pueden especializarse en apartados concretos; diseño, codificación, bases de datos, posicionamiento SEO… Por eso he querido separar esta lista de enlaces en diferentes apartados agrupados por temáticas dentro del Diseño Web.

Recursos

  • Web Field Manual Recopilación de links similar a esta lista con un montón de información de interés.
  • Stackoverflow. La plataforma de diseñadores y desarrolladores más importante del mundo. En ella podrás preguntar cualquier duda que tengas, aunque probablemente otros ya lo hayan hecho y la respuesta esté esperando a que la encuentres.
  • Templatemonster Página Web con miles de plantillas web (HTML5, Joomla, WordPress, etc…) donde buscar inspiración. Además, tienen un blog donde aparecen artículos muy interesantes sobre nuevas tendencias en el Diseño Web.
  • The Ultimate Web Design Checklist Gran lista con 128 pasos que realizar en el proceso de creación de una Página Web. Por David Attard.
  • Responsive or Bust: Google’s Focus on Mobile & How to Design for It Artículo sobre la importancia que ha empezado a dar Google a los sitios adaptados para móviles y como aprovecharte de ello.
  • Webdesignerdepot Excelente blog sobre el mundo del Diseño Web para mantenerse al día con las últimas tendencias y noticias.

Diseño

  • Dribbble La red social por excelencia del Diseño Web y el lugar perfecto para enseñar tus habilidades. Como no, también es el sitio donde acudir si necesitas inspiración.
  • Web Design Trends 2016: The Definitive Guide Extenso artículo sobre las tendencias dominantes del Diseño Web en 2016. Si no quieres quedarte atrás, échale un vistazo.

Color

    • 50 Beautiful Color Palettes for Your Next Web Project 50 paletas de colores para el diseño de tu próxima Página Web.
    • Rueda de color  Aplicación fácil de usar que te ayuda a obtener una paleta de colores que combinen bien para tu Sitio Web.
    • Gradient Generator Para crear diferentes degradaciones de color que usar en tus próximos proyectos. Con esta herramienta podrás conseguir el código CSS necesario facilmente.
    • Colorfavs Si tu diseño se va a basar en una fotografía dominante esta aplicación para sacar paletas de color de una imagen es lo que necesitas.
    • 0to255 Herramienta para yudarte a encontrar variaciones de cualquier color.
    • Adobe Color CC Probablemente la herramienta más potente de la lista. De la popular empresa de software Adobe, con ella podrás combinar facilmente colores hasta dar con la paleta más adecuada para tu diseño.

Imágenes

    • Responsive Images Done Right: A Guide To <picture> And srcset Excelente guía para aprender a usar las imágenes de manera Responsive.
    • Kraken.io Optimiza tus imágenes para subirlas a tu web y reducir los tiempos de carga de la misma sin necesidad de controlar Photoshop o cualquier otro programa de edición.
    • Favicon Generator Crea iconos favicon de manera rápida y sencilla sin necesidad de instalar ningún programa o aplicación.
    • Pexels Unsplash MyStockPhotos Estos tres son bancos de imágenes sin derechos y gratuitas para cualquier proyecto personal o comercial sin encesidad de atribución. ¿Una maravilla verdad?

Texto

  • 26 Digital Typography Rules for Beginners Interesante articulo en Medium para principiantes y no tan principiantes sobre como elegir y usar tus fuentes de texto adecuadamente.
  • Typography in ten minutes Corto artículo pero muy recomendado con los consejos básicos a la hora de elegir que tipografías usar en tu Sitio Web.
  • Dafont.com y FontSpace.com Portales donde descargar miles de fuentes diferentes para usar en tu Página Web.
  • The Web Font Combinator Web donde probar diferentes combinaciones de fuentes al instante de manera muy sencilla.
  • 10 More Awesome Google WebFont Combinations to Try Today Top 10 de combinaciones de fuentes de Google.
  • Responsive Typography: A Quick Tutorial Hoy en día todo tiene que ser responsive en una página web para que el diseño así lo sea, no solo la estructura. Imágenes, fuentes, etc también tienen que adaptarse a los diferentes dispositivos. En esta guía aprenderás como usar texto adaptable y fluido.
  • Código

  • Como Perder Peso en el navegador Excelente guía con las mejores prácticas para hacer que tu web pese menos y por tanto, cargue mucho más rápido. Y si, ¡en español!
  • Markup Validation Service y CSS Validation Service El lugar perfecto para validar el código html y css de tu página y comprobar que está libre de errores.
  • CSSLint Una excelente herramienta para ayudarte a mejorar tu código CSS en caso de que tengas cualquier tipo de error.
  • CSS Minifier HTML Minifier Online Javascript Compression Tool Herramientas para comprimir y reducir el tamaño de tus archivos CSS, HTML y JS. Con ello disminuirás el tamaño de tu sitio web y por tanto mejorarás la velocidad de carga, clave para el SEO.
  • CSS Beautifier JSbeautifier Justo lo contrario. Si tienes archivos comprimidos de CSS o JS y necesitas devolverlos a su estado original para poder modificarlos estas herramientas de ahorrarán horas de trabajo.
  • How To Create a Custom 404 Page Es importante tener páginas preparadas en caso de que haya un error cuando un visitante intente acceder a tu Web. Aquí está explicado de manera sencilla como crear una página de error 404.

Pagina Web para tu negocio

Posicionamiento SEO

WordPress

  • Killer WordPress Checklist La más completa lista sobre todos los pasos a seguir, desde el comienzo hasta el mantenimiento, para crear una web con WordPress de la manera correcta.
  • The Ultimate Mega Guide to Speeding Up WordPress Probablemente la guía más completa que se puede encontrar online sobre mejorar la velocidad de carga de tu Web si usas WordPress.
  • The Ultimate Guide to Boost WordPress Speed & Performance Una guía muy similar a la anterior. No sabría con cual quedarme. Para estar seguros de que tenemos nuestra web en WordPress optimizada al máximo, mejor aplicar todo lo que nos dicen en ambas.
  • Wpmudev El blog más completo y mejor trabajado sobre WordPress en el mundo. Miles de artículos, guías super extensas e incluso sus propios plugins premium. Si quieres iniciarte como WordPress Developer o quieres mejorar tus habilidades, este debería ser tu sitio de cabecera.
  • Cómo configurar los mejores plugins de SEO para WordPress Por fin otro artículo en español. En este caso, desde blogger 3.0 nos enseñan a configurar los principales plugins SEO de WordPress.

E-commerce

  • The ultimate beginner’s guide to e-commerce Si estás prensando en crear una tienda online no deberías hacerlo sin antes leer este artículo sobre las principales plataformas y sus puntos fuertes/debiles y con un gran número de consejos para manejar tu negocio.

Tu compañía de Diseño Web

Consejos para empezar como Freelance

Conclusión

Como podéis ver, aquí os dejo una gran lista de enlaces sobre diferentes cosas relacionadas con el Diseño Web que estoy muy seguro que os serán de gran ayuda para mejorar vuestras habilidades, como me han sido a mí.

Si visitáis todos los enlaces, os daréis cuenta de que la mayoría son artículos o guías en inglés, pero no deberíais tener ningún problema con eso, puesto que el inglés es básico para estar al tanto de las novedades en el mundo de Internet y del Diseño Web en particular.

Mi intención es ir añadiendo más y más enlaces según me los vaya encontrando o me los vayan recomendando. Si conocéis un artículo, guía, lista, o historia sobre Diseño Web interesante que pueda ayudarnos a todos a aprender nuevas cosas, no dudéis en contármela mediante un comentario o contactando conmigo.

Por último y como recomendación, por mucho que os guste esto y muchas ganas que tengáis por aprender, no intentéis leer todo lo que os dejo aquí del tirón, podríais volveros locos con tanta información.

Y como siempre, si os ha gustado este enorme trabajo de recopilación, por favor compartirlo con los botones que os dejo aquí abajo ⇓⇓ 😉 😉

 
Leave a reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *