Cómo aprendí a robar como un artista en un mes y diseñé y construí el sitio web de mi nueva empresa

# 4 - Cuarto mes de mi desafío: 12 temas para aprender en 12 meses

Una foto que tomé en Málaga (España), la ciudad de Picasso, es una pintura muy bonita para la inspiración de colores.

Tal vez te estés preguntando por qué llamé a este artículo "Cómo aprendí a robar como un artista", en realidad no aprendí a robar porque ya lo sé ... es broma jeje . De hecho, este título proviene del libro Steal como un artista: Austin Kleon que mi mentor me recomendó que leyera.

"El arte es robo". - Pablo Picasso

Lo que inicialmente quería aprender este mes eran teorías de diseño y después de discutir con mi mentor, me dijo que aprendiera sobre el significado de los colores o la tipografía. Como quería que comenzara algo más genérico, me contó sobre este libro que le enseña de manera divertida cómo encontrar inspiración, cómo mantener la motivación, cuál es el buen flujo de trabajo de diseño y cómo seguir siendo creativo y productivo. ¡Como pueden imaginar, mantendré teorías de colores y tipografía para otro mes de aprendizaje!

Nunca he estudiado el diseño en sí, me considero diseñador y desarrollador porque aprendí practicando y esa es la razón principal por la que quiero saber más sobre las teorías. ¡Tal vez tengo el síndrome del impostor y este mes de aprendizaje está aquí para detenerlo!

Comencé el desafío el 6 de julio, si lees la publicación anterior del Learning Lab Challenge donde construí mi primera aplicación web progresiva, puedes ver que la terminé el 13 de julio. Sí, estaba haciendo un poco de ambas cosas entre esas fechas, y es malo. Principalmente porque me comprometí a entregar el sitio web de nuestra nueva empresa .

Preparación

  1. Encontrar un mentor
    Elegí a Vera como mi mentor. Ella era mi colega en mi compañía anterior y tiene mucho talento.
  2. Definiendo el alcance del tema
    Como se describe a continuación, limitaré el alcance de este tema al flujo de trabajo de diseño y cómo encontrar inspiración.
  3. Elegir un recurso de aprendizaje
    Mi principal recurso de aprendizaje será este libro: Steal Like An Artist - Austin Kleon.
  4. Definiendo un proyecto
    Como acabo de comenzar una nueva compañía, que va a funcionar como una agencia web, primero voy a diseñar y luego construir su sitio web. Además, me gustaría crear una lista de verificación de diseño web que podría usar en todos mis proyectos.

El curso / lectura

Steal Like An Artist de Austin Kleon es un libro muy corto y fácil de leer. Es muy gracioso. El libro está lleno de ilustraciones y dibujos que hacen que la lectura sea muy interesante. Cada capítulo describe un consejo o un concepto para aplicar en su vida o en su trabajo.

Cada uno de estos consejos era sobre el flujo de trabajo de diseño, sobre hacks de diseño o sobre la vida. Tomé nota y traté de aplicar los más valiosos para mí y fue genial ver que ya estaba aplicando algunos otros.

Flujo de trabajo de diseño

Austin Kleon no describió un flujo de trabajo de diseño en sí, sino solo un conjunto de consejos que recopilé como "consejos para incluir en mi flujo de trabajo de diseño"

El primer y mejor consejo que ofrece este libro es crear un archivo deslizable.
Básicamente es una colección de artes, sitios web, música, fotos, arte callejero, cualquier cosa que te haga sentir algo, cualquier cosa que te guste o cualquier cosa que puedas usar como inspiración más adelante. La colección puede ser física, en un cuaderno o digital, por ejemplo en Pinterest, Google Keep, Google Drive, Evernote ...
Cada vez que necesite comenzar un proyecto, puede ir a este archivo deslizante y seleccionar los recursos que lo inspirarán, por eso lo llama archivo deslizante. Un poco como yesca .

Mantendría este en mi archivo de deslizamiento, la mejor pintura de todas

El segundo consejo más importante es copiar y aprender copiando. Debo enfatizar que se supone que no debes hacer una copia aburrida sin pensar, lo que se llama plagio, sino "hacer ingeniería inversa" del diseño, buscar el significado detrás de él y reconstruirlo bajo tu propia comprensión. Además, dicen que copiar de uno es plagio, copiar de muchas fuentes es investigación. Lo cual es una forma muy positiva de ver las cosas. Esto es algo que suena obvio, pero interesante saberlo y hacerlo conscientemente.

Una imagen encontrada en

El último consejo más importante sobre el flujo de trabajo de diseño es mantenerse alejado de la pantalla y mantener las tecnologías para la versión final de su diseño. Es mejor usar herramientas reales, como papel, y usar su cuerpo para la parte creativa del trabajo. Te hace sentir que realmente estás creando y creando. También es algo que siempre hago en mi proceso de diseño.

Hacks de diseño

Lo que seleccioné como hacks de diseño son consejos que lo ayudarán a hacer un mejor trabajo de diseño, pero no son parte de su flujo de trabajo de diseño, no tiene que hacerlo cada vez que tenga un nuevo proyecto de diseño.

Cada artista está siguiendo movimientos y algunos influenciadores, cada artista tiene un mentor o incluso aprendices. De alguna manera intentan imitar, copiar y ser tan buenos como el otro artista que los influencia. Es algo que siempre ha estado allí, y es aplicable a cualquier artista. ¿Por qué no a ti? Es por eso que el libro sugiere encontrar 3 artistas que amas y buscar todo sobre ellos. ¡Pueden ser pintores, diseñadores, emprendedores, músicos, incluso creadores de aplicaciones! Y si es posible, también puede encontrar cuáles son sus influencers y construir un enorme "árbol genealógico" de influencers. Al hacerlo, no solo sabrás todo sobre tus influenciadores, sino también sobre los suyos y realmente desarrollarás tus habilidades. Por ejemplo, en mi caso tengo mis aplicaciones favoritas que reviso a menudo para ver cómo funcionan: Airbnb, Trainline, Google, ...

Los poetas inmaduros imitan; los poetas maduros roban; los poetas malos desfiguran lo que toman, y los buenos poetas lo convierten en algo mejor, o al menos en algo diferente. El buen poeta fusiona su robo en un sentimiento único, completamente diferente del que lo arrancó; el mal poeta lo arroja a algo que no tiene cohesión. Un buen poeta generalmente tomará prestado de autores remotos en el tiempo, extraños en el lenguaje o diversos en interés. - T.S. Eliot

Otro consejo que sugiere el libro es comenzar a producir cosas que le gusten, crear y, si es posible, diariamente. Además, para aprovechar el hecho de que eres desconocido, eres un principiante, nadie te juzgará, puedes fallar. Mejorate y siempre comparta lo que produce. Es algo que intento pero no es fácil hacerlo a diario. Es por eso que el autor sugiere mantener un calendario con 365 casillas de verificación que marca todos los días si produce algo, ¡eso es un buen truco!

Finalmente, ofrece un truco muy inteligente: crea un archivo que contenga todos los buenos comentarios que recibiste. Si algún día necesitas motivación solo léela, ¡te dará un impulso !

Diseño de la vida

¡Este libro también contiene un montón de rediseño de la vida, cómo mejorar usted mismo y su vida para mantenerse saludable y continuar con el buen trabajo! Algunos de ellos suenan muy básicos y obvios, pero noté 2 que son bastante interesantes.

Manténgase rodeado de talento, porque según Jim Rohn: "Siempre eres el promedio de las 5 personas con las que pasas más tiempo". Entonces, su salario, su nivel, su productividad, es el promedio de estos 5. Es una declaración muy poderosa, así que dependiendo de lo que quiera, encuentre a las personas adecuadas para trabajar y no solo piense en la proximidad física, puede trabajar de forma remota también.

Inicie sesión todos los días en un cuaderno (o uno virtual) y responda a esta pregunta: ¿Qué es lo mejor que sucedió hoy? te ayudará a recordar lo que hiciste todos los días y también te ayudará a concentrarte en las mejores cosas para mantener la positividad y la motivación.

Cómo creé mi archivo deslizable

De todos los consejos dados en este libro, encontré el "flujo de trabajo de copia" al crear el archivo deslizable y usarlo cada vez que necesita lo más interesante para mí (y también tomar diferentes partes de diferentes proyectos y entender por qué).

Es por eso que describiré cómo creé mi archivo deslizable:

  1. Creé un cuaderno en Evernote llamado Inspiration
  2. Desde que comencé el proyecto del sitio web de mi agencia web, entré en diferentes fuentes para llenar este archivo deslizante (Dribbble, Awwwards, búsqueda de Google)
  3. Allí busqué las palabras clave "agencia", "cartera", "agencia minimalista" (minimalista porque me encantan los sitios web minimalistas)
  4. Cada vez que encontraba un diseño que me gustaba, lo agregaba a Evernote copiando o pegando o usando la extensión Evernote Clipper. Luego agregué las etiquetas para saber por qué agregué esto en un archivo deslizante, por ejemplo: Agencia, Web, Móvil, Colores, Gradiente, Animaciones, Tipografía
  5. Continué agregando también mis grandes sitios web favoritos con un buen diseño como Airbnb, Spotify, Apple Music.
  6. Para terminar, solo tengo en cuenta que cada vez que encuentre algo hermoso en lugar de olvidarlo, lo pondré en Evernote, o tomaré una foto y lo pondré allí.
  7. Ahora mi archivo Swipe se abre cada vez que inicio un nuevo proyecto y puedo usarlo o repetir esos pasos anteriores para completarlo antes de usarlo. Además, tengo algunas fotos de museos en fotos de Google que tomé antes de tener este archivo deslizante, también puedo usar la búsqueda para encontrarlas como inspiración.

Si no tiene ningún archivo deslizable, definitivamente le recomiendo que cree uno tan pronto como comience un nuevo proyecto.

Ahora veamos cómo mejorar mi flujo de trabajo de diseño web usando este archivo deslizante.

La lista de verificación de diseño

Hice esta lista de verificación de diseño web en base a lo que suelo hacer, algunas investigaciones más, lo que aprendí de este libro y también el proyecto del sitio web de mi empresa. Traté de hacerlo lo más genérico posible.

  • Defina la arquitectura de la información de su aplicación / sitio web (contenido puro)
  • Recopila inspiración (Dribbble, Awwwards y sitios favoritos)
  • Deslice su archivo para hacer una lista de los 7 mejores
  • Wireframes de diseño (en papel)
  • Recoge comentarios
  • Diseñe el sitio web en escala de grises (puede usar su herramienta de diseño favorita)
  • Recoge comentarios
  • Seleccione 2 fuentes
  • Diseña el logo
  • Defina la paleta de colores (debe ajustarse al logotipo)
  • Mejore su diseño implementando las fuentes, colores y logotipo
  • Recoge comentarios
  • Defina animaciones para implementar (puede diseñarlas si son complejas utilizando un software; de ​​lo contrario, solo tenga en cuenta o dibuje en papel)

También puede encontrarlo en su última versión en mi repositorio de GitHub: https://github.com/sandoche/Webdesign-checklist

La razón por la que decidí diseñar primero en escala de grises es centrarme más en el espaciado y en el diseño en sí mismo en lugar de probar colores, lea más sobre esto aquí: https://medium.springboard.com/a-designers-guide- para-seleccionar-colores-para-su-producto-9944756838d4

Rediseñemos mi cartera

Mi nueva compañía estará compuesta por dos marcas: la agencia, una llamada Snitco, y la organización del evento, llamada Sconférenciers. Y decidimos comenzar con la marca Snitco. Ahí es donde me enfocaré aquí.

Nuestra marca Snitco proporcionará diferentes servicios de 3 categorías: talleres de creatividad, comunicación, desarrollo y diseño.

¡No tenemos nada construido, así que comenzamos desde 0!

Definiendo el contenido

Primero comenzamos a definir el contenido de manera jerárquica. Siempre hago eso ahora cuando creo una nueva aplicación o sitio web.

Así es como se veía: https://github.com/sandoche/Snitco-information-architecture-example (lo siento, hice mi arquitectura en francés )

Al final, la arquitectura evoluciona y la cambias para que encaje perfectamente con el diseño.

Pero básicamente tenía 5 secciones: encabezado con una propuesta de valor única, los proyectos, los servicios, el equipo y finalmente el pie de página.

Rellenar el archivo deslizante y Seleccionar inspiración

El siguiente paso es completar mi archivo deslizante de Evernote, usando las palabras clave Agencia, Web, Móvil, Colores, Gradiente, Animaciones, Tipografía, principalmente usando Dribbble y Awwwards.

Así es como se ve mi archivo deslizante en Evernote

Una vez que sentí que había recopilado suficientes datos, hice la siguiente lista corta:

  • https://dribbble.com/shots/3272390-HBK-Creative-Agency
  • https://dribbble.com/shots/3638273-Creative-Design-Agency-Website/attachments/812598
  • https://appico.com/ (animaciones, minimalismo)
  • https://bitesizeinc.com/home (animaciones, formas)
  • https://www.spotify.com/fr/ (colores, tipografía)
  • http://wearecocoon.co.uk/ (minimalista)
  • http://www.size.agency/ (contenido simple)
  • http://www.revstudio.pl/ (minimalista, simple)
  • https://www.packwire.com/ (animaciones, colores)
  • https://revolut.com/ (simple, tipografía)

De esa lista, le pedí a mi equipo que votara por su favorito (los que están en negrita) y me dijera por qué. Utilicé esta información para usar lo que funciona bien en los diferentes diseños y construir la maqueta en escala de grises.

La maqueta en escala de grises

Utilizo Adobe Xd (beta), que es gratis, para construir mi maqueta. Realmente intenté mantenerlo minimalista, pero también intenté definir algunas animaciones para tener un "efecto sorpresa" como el resto del equipo quería.

Entonces, los diferentes elementos que tomé de la lista de diseño anterior:

  • el encabezado grande con la propuesta de valor única en negrita
  • el fondo plano
  • los espacios en blanco en la segunda parte con las tarjetas para describir cada proyecto
  • la lista de servicios se muestra de manera muy simple, muy clara
  • alguna animación que aparece
  • un corazón que sopla

Traté de combinar todos esos elementos diferentes de una manera muy armoniosa, además construí otros elementos que nos acompañan y nos ayudan a crear nuestra propia identidad. También quería usar solo 2 fuentes y algunos tamaños de fuente para hacerlo más simple.

La primera maqueta en escala de grises en Adobe Xd

También utilicé esta maqueta para probar diferentes combinaciones de fuentes y finalmente terminé con dos Heebo y Noto mono.

Probando colores

Para encontrar colores probé diferentes recursos para la paleta de colores:

  • www.colorlisa.com - Paleta de colores extraída de obras maestras
  • https://color.adobe.com/ - Adobe color CC, con mucha paleta, puede usar la búsqueda y escribir una palabra clave
  • http://colorhunt.co - Búsqueda de color, similar a la anterior, pero con paletas más modernas
  • http://www.rehabcenter.marketing/tintui/index.html: la paleta más famosa, diseño de materiales, Pantone, Twitter, colores de interfaz de usuario plana

Jugué con ellos terminé con lo siguiente.

Seis combinaciones de colores diferentes.

Después de hablar con mi mentor Vera y mi equipo, decidimos optar por el violeta para Snitco y quizás por uno más rojo para la otra marca Sconférenciers.

A partir de eso, hice una paleta y una breve guía de diseño.

Creando un logo

Para crear el logotipo, primero tomé un papel e intenté jugar con las letras de Snitco. También decidí poner un punto al final de "Snitco" como parte de la marca para que se vea nítido, preciso y elegante. Por eso también jugué con el "."

Sí ... es un desastre

Luego hice algunos con la computadora.

Algunas alternativas de logotipos, terminamos eligiendo la última

Terminamos con este después de discutir con el equipo. El cual está hecho de las dos piezas del espacio negativo que encuentras en "S" girado y movido para hacerlo como dos alas.

Tada  el logo final

Diseño final

Ahora tengo los colores y el logotipo, lo puse todo junto y reajusté los espacios y los tamaños, esto es lo que finalmente terminé.

También creé las ilustraciones basadas en el contenido de nuestros proyectos para cada pequeña tarjeta.

Implementación

Una vez que el diseño fue validado por el equipo y mi mentor, busqué la mejor solución técnica para implementarlo. Decidí elegir Jekyll con un complemento de internalización para tenerlo en francés e inglés.

Separé las preocupaciones: contenido, html, estilo, javascript para hacerlo lo más independiente posible.

El resultado final

Aquí está el resultado final : http://snit.co

Siéntase libre de echar un vistazo, ¡y todos los comentarios son bienvenidos!

Una captura de pantalla de la versión final en línea.

Comentarios de este mes de aprendizaje

Qué salió bien

  • La lectura
  • Aplicación de la lectura.
  • El proceso de diseño
  • Cooperación con mi equipo para crear una identidad que nos quede a todos
  • Comunicación con el mentor.
  • Calendario: finalizó el 25 de julio
  • Uso de Adobe Xd
  • El archivo deslizable es asombroso
  • Estoy muy orgulloso de este resultado final.

Que mejorar

  • Empecé este tema mientras terminaba el anterior.
  • Esperaba un poco más de aprendizaje sobre el diseño en sí mismo en lugar del proceso o cómo obtener inspiración
  • Tal vez también podría haber aprendido sobre la teoría del color este mes, pero el libro sobre el color tardó en llegar

Si te gustó esta publicación, haz clic en el botón de aplaudir below a continuación para mostrar tu apoyo. Además, siéntase libre de comentar y dar cualquier tipo de comentario. ¡No te olvides de seguirme!

¿Quieres ver más artículos como este? Apóyame en Patreon