Cómo desarrollar un ojo de diseño como desarrollador web

El diseño y la programación no solían mezclarse debido a que cada uno requería una mentalidad diferente, pero hoy en día la superposición aumenta a una velocidad tremenda y nosotros mismos, nos vemos obligados a saber más de cada uno, y creo que eso no es algo malo.

La respuesta fácil para alguien que viene de la codificación y está tratando de entrar en el diseño: lleva TIEMPO . Estoy seguro de que la mayoría de la gente ha oído hablar de la teoría de las “10,000 horas para convertirse en un experto en un campo” y, aunque se considera que es “solo un viejo dicho”, hay mucha verdad en el diseño. Yo mismo miro las cosas que diseñé hace un año y medio y no puedo creer lo lejos que he llegado y pensé que lo que estaba haciendo en ese momento era bueno, y ahora veo que … no tan bueno, y eso es bueno. Nadie te dice que no serás bueno al principio, pero lo que importa es aceptarlo y esforzarte por ser mejor. Pero el TIEMPO no tiene valor para usted a menos que tenga una base y un catalizador para mejorar su habilidad durante ese tiempo y ahí es donde entran las buenas bases: la INVESTIGACIÓN y la PRÁCTICA .

Comenzaría por aprender algunos conceptos básicos de diseño que, por supuesto, pueden variar en función de lo que va a diseñar, en su caso, eso es diseño web. Comenzaría investigando la teoría del color, la tipografía y cualquier otro problema que termine presentándose y desafiándote. Quora solo es un gran recurso que puede generar más recursos sobre estos temas. Si desea seguir un cirrocúmulo más directo y / o una inmersión profunda estructurada en estos temas, sugiero sitios como Treehouse (enlace de referencia con descuento) o Lynda, pero cuestan dinero. Los uso y encuentro mucho valor en ellos, especialmente con Treehouse debido a su comprensión de la mentalidad del codificador.

Una vez que sienta que tiene una comprensión fundamental del diseño, puede comenzar a notar más opciones de diseño a su alrededor, especialmente el desorden. “Solo prestar atención al desorden en general, hace que las cosas sean mucho mejores”. – Tracy Osborn. Solo tomando la energía y el tiempo para enfocarse en el diseño a su alrededor, desde su taza de café hasta una aplicación en su teléfono, lo ayudará a convertirse en un mejor diseñador. Además, gracias a Internet, hay tantos recursos para que pueda crecer a diario y mis favoritos incluyen Podcasts, cursos en línea, Keynotes (especialmente Diseño de materiales de Google y cualquier cosa de Apple), sitios web, dribbble e incluso respuestas de diseño en Quora. Ahí es donde vuelve el tiempo. Es un ciclo constante de aprendizaje, exponerse y practicar lo que ha aprendido, no siempre en ese orden.

Simplemente rodearse de un diseño bueno (y malo) a diario y hacer que sea una prioridad practicar le ayudará a desarrollar su ojo para el diseño. He adjuntado algunos recursos a continuación.

Un gran episodio de Software Engineering Daily que describe los pasos para que un programador tome conciencia del diseño: Diseño para no diseñadores con Tracy Osborn – Software Engineering Daily

Teoría básica del color

Diseñando para usuarios borrachos con Austin Knight – Software Engineering Daily

Introducción – Diseño de materiales – Pautas de diseño de Google

50% de descuento en Treehouse

Lynda.com: video tutoriales y capacitación en línea

¿Cuáles son algunos ejemplos de mal diseño?

¿Cuáles son los mejores ejemplos de un diseño realmente bueno?

Oye, me enseñé a diseñar durante el año pasado para hacer todo tipo de cosas: mi sitio web, mis cursos de video, mi marketing de contenidos, como por ejemplo esta lista de verificación. Aprendí a trabajar con muchos recursos diferentes que puedo recomendarle totalmente. Muchos de ellos son gratuitos, así que es una buena manera de comenzar:

  • Me encanta el proyecto sustantivo. Es un sitio web donde puede encontrar toneladas de íconos y descargarlos de forma gratuita dando crédito al autor. Los uso mucho en todos mis materiales. Y realmente tienen una gran base de datos de iconos sobre absolutamente cualquier tema.
  • Luego uso Adobe Photoshop para editar fotos, redimensionarlas, juntarlas o adaptar los iconos a mi código de color. Photoshop puede hacer millones de cosas, pero también puedes usarlo para lo básico, es una gran herramienta.
  • También me encantan las fotos gratuitas y no fornidas que recibo de Pexels, Stocksnap o Sitebuilderreport. La gratisografía también es realmente genial si quieres más fotos locas. Los prefiero a Shutterstock y compañía porque la calidad de las imágenes es increíble. Al mismo tiempo, debes tener cuidado, algunas fotos se usan en exceso en línea porque es gratis.
  • Otra gran herramienta que me ayudó mucho es Google Material Design. Es un sitio web increíble para inspirarse en los diseños y para aprender sobre los diferentes aspectos como el color, la tipografía, etc.

La forma en que suelo diseñar cosas es que primero dibujo varias versiones en una hoja de papel. Luego pruebo cada versión en PowerPoint. Puedo terminar teniendo decenas de diapositivas con diferentes diseños de la misma cosa. También busco inspiración en línea para refinar mis diseños. Elijo el que realmente me parece más atractivo y que a otras personas de mi equipo les gusta más y luego diseño la versión final en Adobe.

¡Espero que esto ayude!

En pocas palabras: práctica. Como con la mayoría de las cosas en la vida a las que uno aspira, comienza con la práctica, la práctica, la práctica y el tiempo necesario para ser competente.

Llevo más de 10 años ganándome la vida haciendo diseño y desarrollo front-end. Llegué a esta carrera desde mi formación artística: no tenía ningún conocimiento de codificación y, para empezar, nunca fui un artista increíble. Tuve que hacer un trabajo serio, tarde en la noche, desarrollando mi ojo para un buen diseño además de aprender a codificar también.

Trate de no dejarse envolver demasiado en recrear sitios galardonados cuando empiece … Puede ser desalentador: he estado allí.

Diseñe y construya todo lo que pueda por su cuenta, incluso si es solo para practicar.

Si un diseño suyo no es compatible con diseños “mejores”, cámbielo, modifíquelo, mueva las cosas, elija una nueva paleta de colores. Vuelva a hacerlo de nuevo, y de nuevo, y de nuevo si es necesario. La práctica del diseño desarrollará su ojo de diseño.

Sal de la computadora y dibuja. Diseños de croquis, logotipos de croquis. Las habilidades de diseño manual pueden ser increíblemente beneficiosas para sus habilidades digitalmente.

No voy a enumerar sitios o recursos en línea ya que la web tiene una cantidad aparentemente interminable. Solo navegar en los confines de la web y navegar en una multitud de sitios diferentes puede ayudarlo a ajustar su criterio sobre el diseño bueno y / o malo.

Además: tomar descansos. Sentarse demasiado tiempo y atascarse en un diseño o dirección que puede no funcionar puede matar el tiempo. Levántese y camine o cambie del diseño asistido por computadora a un diseño manual por un tiempo. Regresar de los descansos es generalmente cuando las cosas comienzan a hacer clic … eso o la 1:30 am si eres un ave nocturna como yo 😉

¡Todo lo mejor en tus futuros proyectos de diseño!

Recuerde algunas cosas durante el diseño:

  1. Haga una búsqueda en Google sobre ese tema y verifique las posibilidades.
  2. Visita pinterest y behance. Busque su tema y obtenga una idea de estos diseños. Combínalos y dales una nueva forma.
  3. Piense en el tipo de diseño, combinación de colores, fuentes, etc. en función del propósito del diseño. Por ejemplo, si está diseñando para un restaurante, elija amarillo o rojo.
  4. No hagas todo desde cero, google lo tiene todo. Solo necesita comprender cómo usar todo eso en su diseño (que aprenderá con el tiempo).
  5. La combinación de colores y la fuente juegan un papel importante. Tómese su tiempo para comprender y luego continúe.