Advertisement
  1. Code
  2. Roundups

10 tutoriales seleccionados a mano para diseñadores web principiantes

by
Read Time:7 minsLanguages:

Spanish (Español) translation by steven (you can also view the original English article)

¿Estás empezando a mostrar interés en el diseño web, pero tienes problemas para saber por dónde empezar? ¿Quieres crear sitios web increíbles, aprender a codificar en HTML/CSS y conocer los estándares web y la experiencia del usuario? Si es así, ¡tenemos una lista de tutoriales de Envato cuidadosamente seleccionados que deberían ayudarte a comenzar tu viaje!

Lo primero es lo primero

Antes de profundizar en todos estos excelentes tutoriales escritos por diseñadores y desarrolladores muy talentosos, recuerda una cosa: nada es imposible y si ellos pueden hacerlo... tú también puedes hacerlo, como lo hice yo hace unos años. Comencé a recorrer foros relacionados con el diseño (Envato no estaba presente en ese momento), busqué en todas las publicaciones relacionadas con el diseño web que pude encontrar, intenté cosas por mí mismo, experimenté mediante prueba y error hasta que finalmente creé mi primer sitio web (que era bastante malo). ¡No dudes en pedir ayuda, somos una gran comunidad llena de amor para compartir nuestro conocimiento de forma gratuita! Dicho esto, aquí hay una lista de, en mi opinión, excelentes tutoriales para principiantes, que te ayudarán a comprender los términos "web" y "diseño", te enseñarán cómo funcionan HTML y CSS, y cómo puedes hacerlo todo tú mismo. Vamos a empezar.

Ten en cuenta: Algunos de los tutoriales enumerados aquí son parte del programa Plus Membership. Puedes encontrar más información sobre Tuts+ aquí.

Comencemos con la teoría del color...

"La importancia del color en el diseño web"

Con demasiada frecuencia, veo un gran concepto de diseño con una mala elección de colores. Parte de lo que hace que un gran diseño web sea "genial" es el diseño, la tipografía y el color. Cuando cada uno de estos aspectos trabaja para complementarse, nace un gran diseño.

Jerarquía visual en el diseño web

Diariamente veo todo tipo de sitios web y todo tipo de diseños. Una cosa en común con las plantillas exitosas en ThemeForest o con sitios web en la web es una fuerte jerarquía visual. Muchas veces veo plantillas que tienen un gran concepto pero tienen una jerarquía visual deficiente. Cubriré qué es la jerarquía visual y algunos ejemplos excelentes en este artículo.

Errores comunes en el diseño web

Muchas plantillas rechazadas aquí en Themeforest sufren los mismos errores comunes: tipografía (fuente, altura de línea, espaciado entre letras, color), alineación (cuadrícula) y espaciado (relleno). En este tutorial, veremos más de cerca cómo evitar estos errores comunes.

CSS: Los primeros pasos

Este es para aquellos que esperan dar sus primeros pasos en el diseño web. Este video tutorial de más de 70 minutos asumirá que no tienes ningún conocimiento de CSS. En el transcurso del screencast, aprenderás sobre la sintaxis básica, una plétora de propiedades diferentes y cómo crear los inicios de tu primer sitio web.

Diseña y codifica tu primer sitio web en pasos fáciles de entender

En este tutorial, diseñaremos y codificaremos nuestro primer sitio web en pasos simples y sencillos. Este tutorial fue escrito para principiantes con la esperanza de que te brinde las herramientas para escribir tus propios sitios web que cumplan con los estándares. Es una semana nueva; ¡tal vez sea hora de aprender una nueva habilidad!

30 mejores prácticas de HTML para principiantes - Lo básico

El aspecto más difícil de ejecutar Tuts+ es tener en cuenta tantos niveles de habilidad diferentes. Si publicamos demasiados tutoriales avanzados, nuestra audiencia principiante no se beneficiará. Lo mismo ocurre con lo contrario. Hacemos nuestro mejor esfuerzo, pero siempre siéntete libre de intervenir si sientes que estás siendo descuidado. Este sitio es para ti, ¡así que habla! Dicho esto, el tutorial de hoy es específicamente para aquellos que recién se están sumergiendo en el desarrollo web. Si tienes un año de experiencia o menos, con suerte, algunos de los consejos que se enumeran aquí te ayudarán a mejorar, ¡más rápido!

Sin más preámbulos, revisemos treinta mejores prácticas para observar al crear tu marcado.

Continuando...

Ahora que tenemos una comprensión básica de la teoría y hemos aprendido a diseñar y codificar una página web muy básica, estamos listos para avanzar un poco más. Los siguientes artículos y tutoriales están aquí para enseñarte más sobre el proceso de diseño web y las mejores prácticas de codificación.

Elementos de un gran diseño web: El pulido

Cuando preparo diseños, generalmente lo hago en dos fases: diseño y pulido. Durante la fase de diseño, coloco los objetos principales en la página, generalmente terminando con algo que parece relativamente completo. En la segunda etapa, la del pulido, repaso el diseño y ajusto los colores, los tratamientos tipográficos, las sombras, las capas y, en general, lo limpio todo. En este primer tutorial de una serie de tutoriales sobre diseño web, veremos el pulido.

Diseñando una familia de sitios web

El tutorial que agregué hoy se llama "Cómo diseñar una familia de diseños de sitios web" y es un seguimiento paso a paso de un conjunto de diseños de blogs de WordPress que hice recientemente. Debido a que las habilidades de Photoshop involucradas no son tan avanzadas, he pasado más tiempo hablando sobre por qué se hacen ciertas cosas.

De PSD a HTML, construcción de un conjunto de diseños de sitios web paso a paso

Hoy voy a llevarlos a través de todo el proceso de pasar de Photoshop a HTML por completo. Vamos a crear un conjunto de 4 maquetas PSD de un sitio web que eventualmente se convertirá en un tema de WordPress. Es un tutorial masivo, así que si vas a seguir hasta el final, ¡asegúrate de tener algunas horas de sobra!

Por último, pero igualmente importante...

Inspírate, pero no copies

Existe una delgada línea entre la inspiración y la copia. Estamos rodeados de objetos y arte en nuestra vida diaria. Encontrar inspiración para un diseño es una tarea fácil en estos días. En este artículo, te guiaré a través del proceso de diseño de un sitio web que terminé recientemente. Proporcionaré imágenes de sitios web que me inspiraron a crear un diseño web nuevo y único.

Un obsequio para empezar...

30 elementos web, fondos y conjuntos de iconos de Photoshop (por GraphicRiver)

Cuando estés diseñando o construyendo un sitio web, es probable que necesites diseñar varios elementos pequeños. Personalmente, tiendo a reutilizar muchos de los mismos botones, menús, iconos, etc. Desde que lanzamos GraphicRiver a principios de este año, hemos visto muchos pequeños gráficos web interesantes en forma de elementos web, fondos e íconos. Por lo tanto, he recopilado 30 de los mejores para darte una idea de lo que está disponible allí. Por supuesto, no olvides que si solo necesitas una plantilla de diseño PSD completa para construir, ¡puedes obtenerlas en ThemeForest!

Aún no hemos terminado...

Tómate unos minutos y lee estas excelentes entrevistas de algunos de los principales nombres de la industria web. ¡Te sorprenderá lo mucho que puedes aprender de estos chicos!

...y más. Lee todas las entrevistas aquí.

Pensamientos finales...

Cada nuevo comienzo es difícil; lo mismo ocurre con el diseño web. Me recuerdo a mí mismo cuando estaba aprendiendo por primera vez: horas de depuración de HTML/CSS, todo mientras la solución estaba ahí delante de mí; pero bueno, aprendemos de nuestros errores y repetición. Ojalá hubiera tenido acceso a la red Tuts+ cuando comencé. Podría haberme ahorrado mucho tiempo y frustración. Considera este artículo como el punto de partida, si te encuentras dando los primeros pasos en esta industria. ¿Alguna pregunta?

Escribe un tutorial en Tuts+

¿Sabías que puedes ganar hasta $600 por escribir un tutorial en Tuts+ y/o un screencast para nosotros? Buscamos tutoriales detallados y bien escritos sobre HTML, CSS, PHP y JavaScript. Si tienes la capacidad, comunícate con Jeffrey en nettuts@tutsplus.com.

Ten en cuenta que la compensación real dependerá de la calidad del tutorial final y del screencast.

Write a PLUS tutorial
  • Síguenos en Twitter o suscríbete al Feed RSS de Tuts+ para obtener los mejores tutoriales de desarrollo web en la web.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.