Sí, es perfectamente posible enseñar a ti mismo diseño de la web. Pregunté por ahí esta semana para ver cómo la gente logró adquirir las habilidades y traté de recordar lo que funcionó para mí.
Hay tres formas principales en las que puedes enseñarte a ti mismo el diseño web.
- haciendo. La gente aprende creando sitios web.
- Mediante el uso de recursos en línea. Todo el mundo en algún momento encuentra respuestas en línea sobre cómo diseñar sitios web.
- Por lectura. Este me sorprendió. La mayoría de los diseñadores dicen que aprenden diseño web, en parte, leyendo libros.
Entonces, repasemos cada una de estas categorías para descubrir cómo enseñarte a ti mismo el diseño web.
Aprender diseño web haciendo
La mejor manera de empezar a entender las páginas web es ver cómo se ensamblan los sitios web existentes y construirlos usted mismo.
Observe cómo funcionan otros sitios web
Para empezar, la mayoría de las páginas web en Internet están escritas, al menos en parte, en HTML. Para ver el HTML que crea esta página, necesita «Ver código fuente» en el navegador que está utilizando. Intente ir Cmd / Ctrl-U (para Firefox), ir Cmd/Ctrl-Alt/Opt-U (para Chrome), y si está utilizando Internet Explorer, realmente necesita preguntarse si el diseño web es la carrera profesional adecuada para usted.
Intente buscar en el HTML para ver cómo están marcados los diferentes elementos de una página web. Es posible que pueda identificar ciertas etiquetas de inmediato. Por ejemplo, <p> es para párrafo, <h1,2,3> son encabezados, <img> es para una imagen, etc. Notará que la mayoría de estas etiquetas funcionan en pares para denotar el principio y el final del marcado, por ejemplo <p>Text here</p> muestra la apertura y el cierre de la etiqueta de párrafo con la barra diagonal (/) que precede a la etiqueta de cierre. Otras etiquetas no funcionan en pares, por ejemplo, la etiqueta de imagen se cierra automáticamente <img src = "https://robcubbon.com/images/rob.jpg" /> esto indica al navegador que muestre una imagen con una dirección web en particular como fuente (src).
Otra cosa que puede notar de la fuente HTML es que todas las páginas HTML tienen una estructura similar. Todos comienzan con una declaración <!DOCTYPE> que dice en qué versión de HTML está, seguida de una declaración <HTML>, seguida de la <head> del documento, que es un contenedor de varios elementos, incluidos enlaces a scripts, hojas de estilo, la meta información, etc. Después del <head> viene el <body> donde se marcan los elementos de la página web.
Ejercicio: Seleccione todo el código fuente de esta página en un bloc de notas (PC) o documento TextEdit (Mac) y guárdelo en su computadora como «prueba».html» o algo así. Abra este archivo en un navegador y debería tener el mismo aspecto que la versión en línea. Ahora apague su conexión a Internet y vea cómo se ve la página de prueba. Bastante diferente, ¿no? Trata de averiguar por qué.
Herramientas del oficio
Mientras haces esto, habrá ciertas herramientas que necesitarás.
- Múltiples navegadores y teléfonos inteligentes. Pruebe a probar sus propios sitios en diferentes navegadores y teléfonos (aquí es donde comenzará un asunto de odio de larga data con Internet Explorer).
- Editor de texto. Puede usar el bloc de notas básico (PC) o TextEdit (Mac), o tal vez Coda (Mac) o Dreamweaver: no use Dreamweaver en el modo visual, solo trabaje en el código, necesita entender cómo funciona esto bajo el capó.
- Validador. Valide sus páginas web con el Validador HTML y el Validador CSS (use un complemento de navegador como Web Developer for Chrome para llamarlas rápidamente).
- Herramientas de desarrollo de Chrome y Firebug para Firefox. Estas herramientas le ayudan a comprender CSS y JavaScript, que, si pensó que HTML era difícil, necesita un poco de comprensión.
- Editores de gráficos e imágenes. Los editores de imágenes como Photoshop o Fireworks son fundamentales para el diseño web. Estos son bastante caros, pero hay GIMP además de una gran cantidad de editores de imágenes en línea si recién estás comenzando.
Crear sus propios sitios web HTML estáticos
Mientras aumenta su comprensión de HTML, CSS y JavaScript, debería crear sitios HTML estáticos, ya sea localmente o en un servidor web. Juega continuamente con el código para intentar hacer cosas geniales. Intente recrear ciertos elementos en otros sitios web copiando bits del código.
Aunque no es probable que los sitios web que finalmente cree estén hechos de archivos HTML, es vital que comprenda cómo crear sitios HTML estáticos primero antes de comenzar a usar PHP y/o Sistemas de Administración de Contenido (CMSs) para crear HTML.
Crear sus propios sitios web con CMSs
La mayoría de los sitios web son creados por CMSs, un software que puede crear páginas HTML dentro de plantillas especificadas. Los mejores son WordPress, Joomla y Drupal, pero hay una gran cantidad de CMSS de código abierto más ligeros con los que puede experimentar, estos le enseñarán cómo PHP y otros CMSs, ASP, se utilizan para armar sitios web.
Use MAMP (Mac) o WAMP (Windows) en su computadora para ejecutar estos sistemas localmente para que pueda comprender bien cómo funcionan.
Usar editores de imágenes
Necesitará saber cómo usar Photoshop o algo similar. Necesitará esto para crear gráficos para el sitio, así como para proporcionar imágenes completas de cómo se verá el sitio cuando termine para ayudar en el proceso de diseño.
Get designing
Por supuesto, no he mencionado que los sitios web resultantes no solo tendrán que validarse, funcionar, ser encontrados por los motores de búsqueda, servir a un propósito y ser comercializados, sino también also tienen que verse bien.
Con el fin de mejorar su ojo artístico, produzca regularmente trabajo y luego intente mejorarlo. Bosqueja diseños en papel y luego trabaja en ellos en Photoshop o en cualquier programa gráfico que tengas. La práctica te ayudará a convertirte en un mejor diseñador. Recomendaré más recursos más adelante que le ayudarán con los principios de diseño.
Recursos en línea
Cuando las personas quieren respuestas, van a Internet y lo buscan en Google o en YouTube. El diseño web no es diferente. Hay muchos recursos que le ayudarán en línea. En primer lugar están las escuelas W3, a las que los diseñadores web se refieren como el mejor recurso de autoaprendizaje en línea, también está Tizag. Algunas personas recomiendan Lynda.com aunque no lo he usado personalmente.
Blogs
Hay una serie de blogs de gran diseño por ahí. Hay grandes que pueden ayudarte, como SmashingMagazine, WebDesignerDepot, 1stWebDesigner y Envato network.
Personalmente, obtengo más de los diseñadores web y gráficos independientes que bloguean. Sin embargo, hay muchas cosas de las que he aprendido a lo largo de los años, así que aquí hay algunas y me disculpo con cualquier blogger excelente que haya dejado fuera de la lista.
- Los trucos CSS de Chris Colyer son un sitio web con gran capacidad de respuesta, pero también tiene información y trucos de diseño web excelentes
- Veerle Pieters tiene excelentes tutoriales de Photoshop e Illustrator en el blog de Veerle
- David Airey es alguien a quien he seguido durante un tiempo en su propio blog homónimo, LogoDesignLove e IdentityDesigned. David está interesado en la identidad general de las organizaciones, entre otras cosas.
- Chris Spooner me ha enseñado mucho con tutoriales en su blog en SpoonGraphics e información e inspiración en Line25
- Abduzeedo, el sitio maravillosamente diseñado de Fabio Sasso, ofrece una gran inspiración y rareza.
- N. Design Studio y WebDesignerWall de Nick La tienen información fantástica y una gran inspiración.
No dude en agregar sus blogs de diseño favoritos en los comentarios a continuación.
Foros
Cuando te golpeas la cabeza contra una pared de ladrillo, los foros son excelentes lugares para obtener respuestas. Publique una descripción de su problema y la dirección web y muy a menudo alguien se pondrá en contacto con usted con una solución. Estos son algunos de mis foros favoritos.
Me gusta el Foro de Diseño Estetica, DesignForums.co.uk y el Diseñador Habla. Hay un Punto Digital y un Punto de sitio para consultas de mayor alcance, el foro de WordPress es excelente y hay un Foro de Guerreros para el marketing en Internet.
Libros
Muchos diseñadores web sostienen que los buenos libros físicos a la antigua les han ayudado a enseñar diseño web. Aquí están algunos de mis favoritos y algunos otros que me han recomendado. Los enlaces son Amazon.com enlaces de afiliados.
- Construye Tu Propio Sitio Web De la Manera Correcta Usando HTML & CSS 3th (third) edition de Ian Lloyd es un libro de Sitepoint que leí hace años. Realmente me ayudó en ese momento, ya que se centra en las mejores prácticas de diseño web. Asegúrese de comprar una edición actualizada (en este momento la tercera edición que incluye mucho en HTML5).
- CSS: El Manual Faltante de David Sawyer McFarland incluye explicaciones, ejemplos y tutoriales paso a paso. Este libro es especialmente recomendable, ya que le da los antecedentes de CSS e incluye mucho sobre CSS3.
- The Principles of Beautiful Web Design, 2a Edición de Jason Beaird, sostiene que el diseño es una habilidad que se puede aprender y te enseña los principios fundamentales del diseño.
- Libro de trabajo de Diseño de color: Una Guía del Mundo Real para Usar el Color en el Diseño Gráfico de AdamsMorioka (editor) proporciona la información vital necesaria para aplicar el color de manera creativa y efectiva al trabajo de diseño.
- No Me Hagas Pensar: Un enfoque de Sentido Común para la Usabilidad Web, 2a Edición de Steve Krug un clásico instantáneo sobre la usabilidad web, cargado de ideas y consejos prácticos.
- Haciéndose real: La forma más inteligente, rápida y fácil de construir una aplicación web exitosa con 37 Señales puede ser crear aplicaciones web no sitios, pero tiene una forma tan maravillosa de simplificar los procesos web que me pareció una lectura tan útil.
- Excavar en WordPress por Chris Coyier & Jeff Starr viene muy recomendado como el gran libro de WordPress. Disponible tanto en versión PDF (útil para copiar código) como en versión física.
Hay muchos más libros que podría haber incluido, especialmente sobre teoría del diseño. Si tiene alguna sugerencia de libros que le hayan ayudado con el diseño web, háganoslo saber en los comentarios.
Lo que puedes hacer
Muchos diseñadores sostienen que el fracaso es en realidad el mejor maestro. ¡Así que sal y diseña sitios web! Cuando, como sin duda sucederá, te encuentres con una pared de ladrillos, puedes usar algunos de los recursos en línea aquí para ayudarte. Y, cuando ya no puedes mirar la pantalla de la computadora, ¡puedes leer un libro al respecto!