¿Nuevo en diseño web? Empieza aqui.

Bienvenido a Webdesigntuts +, un recurso en línea dedicado a enseñar y alentar a los diseñadores web de todos los niveles y experiencia. Ya sea que sea la primera vez que vienes aquí, te has sumergido en nuestro contenido en el pasado o eres un visitante habitual, esta publicación te ayudará a encontrar lo mejor de nuestro contenido..


Contenido

Aquí hay un rápido desglose de lo que encontrará en esta página ...

  • Diseñando tu primer sitio web
  • Codificando tu primer sitio web
  • Herramientas del comercio
  • Diseño web adaptable
  • Temáticos CMSs
  • Entendiendo nuestra industria
  • Y el resto…

Diseñando tu primer sitio web

Para familiarizarse con el diseño de un sitio web se trata de comprender lo que se pretende lograr y cómo puede resolver los problemas a través del diseño. En las primeras etapas del proceso, vale la pena pensar en creatividad y tenemos una sesión completa de tutoriales para ayudarte con eso:


  • Hablemos de creatividad
  • Bloque creativo 101

Más allá de la creatividad viene lo real diseño. ¿Cómo alguien toma ideas y las comunica en términos de diseño? ¿Cómo se debe diseñar una página web? ¿Cómo influye el color en un diseño? ¿Y cómo deberíamos tener en cuenta a nuestros usuarios??


  • Una introducción a la teoría del color para diseñadores web
  • Dirección visual en diseño web
  • Asegúrate de que los usuarios te recuerden, cuenta una historia
  • El Principio Gestalt: Teoría del diseño para diseñadores web
  • Entendiendo el Z-Layout en diseño web

¿Y si eres un desarrollador, vienes al diseño web desde un fondo de codificación? Tenemos toda una serie de artículos de teoría del diseño (cada uno con una tarea al final) para ayudarte, además de algunos tutoriales de flujo de trabajo muy útiles:


  • Escuela de diseño para desarrolladores
  • Una guía para principiantes de Wireframing

Codificando tu primer sitio web

La planificación, el boceto, el cableado y los visuales simulados son aspectos importantes del diseño web, pero ¿qué hay de realizar esos diseños para el navegador? Controlar los estándares web (HTML, CSS y JavaScript) es vital si está interesado en el mundo del desarrollo frontal. Vamos a empezar con lo básico ...


  • La mejor manera de aprender HTML
  • La mejor manera de aprender CSS

Con una comprensión fundamental de HTML y CSS, ahora puede comenzar a traducir sus imágenes estáticas en páginas web que viven y respiran. Sigue a Adi Purdila a medida que pasa de Photoshop al editor de código, construyendo su tema adaptativo de blog en esta serie ampliada de screencast.


  • Tema de blog adaptable: de Photoshop a WordPress

Herramientas del comercio

¡Todo artesano necesita buenas herramientas y el diseño web no es diferente! De hecho, con un simple editor de texto y un navegador web tiene suficiente para comenzar, pero hay muchas otras aplicaciones y herramientas para ayudarlo con otras tareas..

Photoshop

El caballo de batalla de muchos un estudio de diseño web durante años. Su papel puede estar cambiando en estos días, pero no se puede negar su presencia en el campo del diseño..


  • Photoshop CS6 para diseñadores web
  • Diseñando una página "Próximamente" en Photoshop
  • Consejo rápido: acelere su flujo de trabajo con acciones de Photoshop

Fuegos artificiales

Se está suspendiendo el desarrollo de Adobe Fireworks, en lugar de dar paso a algunos niños nuevos en el bloque, pero todavía tiene seguidores apasionados y es una herramienta de diseño web muy capaz.


  • Fuegos artificiales en el mundo real

Hormiga

Emmet es una de esas herramientas mágicas que, una vez que empieces a usarla, siempre te preguntarás cómo te las arreglaste sin ella. Echar un vistazo!


  • Construye Bootstrap en minutos usando Emmet

Reflujo

¿Esos nuevos niños de la cuadra de los que acabamos de hablar sobre la desaparición de Fireworks? Eso sería Reflow y la otra suite de herramientas Adobe Edge. El futuro está aquí, damas y caballeros..


  • Presentamos el editor Responsive Layout de Adobe: Edge Reflow
  • Su flujo de trabajo, con Adobe Edge Reflow

Herramientas de alambre

Hay muchas herramientas de armado de alambre para elegir, pero Omnigraffle es sin duda una de las más populares. Echa un vistazo a nuestra guía de principiantes..

  • Una guía para principiantes a Wireframing en Omnigraffle

Diseño web adaptable

Podría decirse que el diseño web sensible ha sido el movimiento más dramático para golpear la web, ya que alguien sugirió que dejemos de usar tablas HTML para fines de diseño. Para entender más de lo que es, eche un vistazo a esta entrevista rápida con su fundador, Ethan Marcotte.


  • Un chat de diez minutos con Ethan Marcotte

Al involucrarse más, encontrará una serie de tutoriales y artículos que exploran los muchos aspectos de RWD..


  • Diseñando para una Web Responsiva
  • Una cuadrícula receptiva básica (Plus Handy CSS3 Media Query Reporter)
  • Life Beyond 960px: Diseño para pantallas grandes
  • Una primera navegación simple, receptiva y móvil

Temáticos CMSs

Los diseñadores web han estado utilizando los Sistemas de gestión de contenido como una solución web del mundo real desde hace años. ¿Por qué reinventar la rueda cuando los CMS como WordPress hacen tan bien la estructura y la administración del sitio web??

En una continuación de la sesión mostrada anteriormente, Adi Purdila toma su sitio web estático y lo convierte en un tema de WordPress. Síguelo durante estos screencasts muy completos y pronto podrás hacer lo mismo. Alternativamente, sígueme mientras camino por otra compilación de WordPress, esta vez basada en el popular framework Skeleton..


  • Tema de blog adaptable: de Photoshop a WordPress
  • Construyendo un diseño responsivo con esqueleto

WordPress no es el único CMS por ahí, sin embargo. Siempre estamos agregando a nuestros tutoriales de CMS, así que aquí hay un ejemplo de lo que hay ahí fuera:


  • Creando un tema para el ancla CMS
  • Construyendo un tema fantasma desde cero
  • Tumblr Theming 101

Entendiendo nuestra industria

Ser capaz de diseñar y construir un sitio web es una pequeña parte del negocio. Si va a tener éxito en ganar dinero como diseñador web, es importante que entienda la industria..

Poder trabajar con un equipo y sus clientes es crucial, así que eche un vistazo a estos artículos que le ayudarán en su camino:

  • El proceso de diseño responsive de Sparkbox
  • Escribiendo el contrato de diseño web perfecto

Aprender de sus compañeros es una de las mejores maneras de avanzar en el diseño web. En Webdesigntuts + disfrutamos criticando tanto el trabajo de nuestros lectores como el trabajo de los jugadores más grandes de la industria. Eche un vistazo a nuestra serie Cómo lo hicieron, además de nuestra colección de publicaciones del taller. Únete a la discusión!


  • Cómo lo hicieron: Reconstruyendo 8 caras
  • Talleres de diseño web

Y el resto…

Hay mucho más para sumergirse en Webdesigntuts +, tal vez esté interesado en la accesibilidad, Frameworks como Bootstrap, Foundation, Pure y Jeet, SEO, tipografía, correo electrónico HTML o UX, además de más..

Y, al igual que con todas las demás facetas de Tuts +, nuestro contenido crece continuamente, así que manténgase al día con nosotros en nuestros diversos canales sociales para asegurarse de que nunca se pierda un truco:

  • Webdesigntutsplus en Facebook
  • @wdtuts en Twitter
  • Webdesigntuts + en Google+
  • webdesigntutsplus en Youtube
  • Envato en Dribbble

Gracias por visitar Webdesigntuts+!