10 tutoriales cuidadosamente seleccionados para diseñadores web principiantes

Entonces, ¿estás empezando a mostrar interés en el diseño web, pero tienes problemas para saber por dónde empezar? ¿Desea crear sitios web increíbles, aprender a codificar HTML / CSS y aprender sobre los estándares web y la experiencia del usuario? Si es así, tenemos una lista de tutoriales de Envato seleccionados a mano 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, recuerde una cosa: nada es imposible y, si pueden hacerlo, usted también puede hacerlo, tal como lo hice hace algunos años. Comencé a recorrer foros relacionados con el diseño (Envato no estaba presente en ese momento), exploré todas las publicaciones relacionadas con el diseño web que pude encontrar, probé cosas por mi cuenta, experimenté el proceso de prueba y error hasta que finalmente creé mi primer sitio web (que fue bastante malo) . No sea tímido para pedir ayuda, somos una gran comunidad llena de amor para compartir nuestros conocimientos de forma gratuita. Dicho esto, aquí hay una lista de, en mi opinión, excelentes tutoriales para principiantes, que te ayudarán a entender los términos "web" y "diseño", te enseñarán cómo funcionan los códigos HTML y CSS, y cómo puedes hacerlo todo. tú mismo. Vamos a empezar.

Tenga en cuenta: algunos tutoriales que se enumeran aquí forman parte del programa de Membresía Plus. Más información sobre Plus Tuts se puede encontrar aquí.

Empecemos 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 diseño web

A diario 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 en marcha pero que 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 de 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 70 minutos más asumirá que no tienes ningún conocimiento de CSS. A lo largo del curso, aprenderá acerca de la sintaxis básica, una gran cantidad de propiedades diferentes y cómo crear los comienzos de su primer sitio web..

Diseñe y codifique su primer sitio web en pasos fáciles de entender

En este tutorial, vamos a diseñar y codificar nuestro primer sitio web en pasos simples y sencillos. ¡Este tutorial fue escrito para el principiante con la esperanza de que le brinde las herramientas para escribir sus propios sitios web que cumplan con los estándares! Es una semana completamente nueva; tal vez es hora de aprender una nueva habilidad!

30 Mejores Prácticas de HTML para Principiantes - Basix

El aspecto más difícil de ejecutar Nettuts + es tener en cuenta tantos niveles de habilidad diferentes. Si publicamos demasiados tutoriales avanzados, nuestra audiencia de principiantes no se beneficiará. Lo mismo es válido para lo contrario. Hacemos nuestro mejor esfuerzo, pero siempre siéntase libre de intervenir si siente que está siendo descuidado. Este sitio es para ti, ¡así que habla! Dicho esto, el tutorial de hoy es específicamente para aquellos que simplemente se sumergen en el desarrollo web. Si tiene un año de experiencia o menos, esperamos que algunos de los consejos que se enumeran aquí le ayuden a ser mejor y más rápido.!

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

Continuando ...

Ahora que tenemos una comprensión básica de la teoría, y hemos aprendido cómo 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ñarle más sobre el proceso de diseño web y las mejores prácticas de codificación..

Elementos de gran diseño web: el polaco

Cuando armo los 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, el polaco, repaso el diseño y ajuste los colores, tipeo los tratamientos, las sombras, las capas y, en general, lo limpio todo. En este primero de una serie de tutoriales sobre diseño web, veremos el polaco.

Diseñar 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, construyendo un conjunto de diseños de sitios web paso a paso

Hoy voy a llevarlo a través de todo el proceso de obtención de Photoshop para completar HTML. Vamos a construir 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 lo copies

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

Un Freebie para que comience ...

30 elementos web de Photoshop, fondos y conjuntos de iconos (a través de GraphicRiver)

Cuando diseñes o construyas un sitio web, es probable que necesites varios elementos pequeños diseñados. Personalmente tiendo a reutilizar muchos de los mismos botones, menús, íconos, etc. Desde el lanzamiento de GraphicRiver a principios de este año, aunque hemos visto un montón de pequeños gráficos web en forma de elementos web, fondos e íconos. Así que he recopilado 30 de los mejores para darle una idea de lo que está disponible allí. Por supuesto, no olvide que si necesita una plantilla de diseño PSD completa para construir, puede obtenerlas en ThemeForest!

Aún no hemos terminado ...

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

  • Elliot Jay Stocks
  • Chris Coyier
  • Jeffrey Zeldman
  • Eric Meyer
  • Jeff Croft
  • Marko Dugonjić

… y más. Lea todas las entrevistas aquí.

Pensamientos finales…

Cada nuevo comienzo es duro; Lo mismo ocurre con el diseño web. Me recuerdo cuando aprendí por primera vez: horas de depuración de HTML / CSS, todo mientras la solución estaba justo delante de mí; Pero oye, aprendemos de nuestros errores y repeticiones. Desearía tener acceso a la red Tuts + cuando estaba empezando. Podría haberme ahorrado mucho tiempo y frustración. Considere este artículo como el punto de partida, si se encuentra dando los primeros pasos en esta industria. Alguna pregunta?

Escribe un Tutorial Plus

¿Sabía que puede ganar hasta $ 600 por escribir un tutorial PLUS y / o un screencast para nosotros?? Estamos buscando tutoriales detallados y bien escritos sobre HTML, CSS, PHP y JavaScript. Si tiene la habilidad, contacte a Jeffrey en [email protected].

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

  • Síganos en Twitter o suscríbase a Nettuts + RSS Feed para obtener los mejores tutoriales de desarrollo web en la web..