¿Cómo debe un programador web aprender a diseñar sitios web? [duplicar]

Trabajé en una agencia de codificación de sitios web durante algún tiempo. Me volví muy bueno, hasta donde pude codificar sitios web completos desde cero en menos de un día.

La agencia tenía un departamento separado para el diseño gráfico, esos diseñadores me darían pruebas del sitio web final, exactamente cómo se vería y qué diría. Así es como pude codificarlos tan rápido, tuve pruebas visuales completas del producto final exactamente como debería verse.

Ahora he vuelto a programar por mi cuenta durante un par de años, y el mayor obstáculo que todavía tengo es crear un proceso de algún tipo para diseñar el sitio. Si puedo tener un diseño final, puedo codificar el sitio rápidamente.

Lo que me impide terminar cualquier sitio últimamente es que también tengo que diseñarlos. Y me puede llevar semanas diseñar un sitio. Eventualmente puedo hacer que se vean bien, pero es solo prueba y error durante 2 semanas seguidas hasta que finalmente se me ocurre algo que se ve medio decente.

Mi pregunta, como codificador, ¿cómo puedo aprender a diseñar los sitios también? He intentado trabajar con otros diseñadores, pero no ha funcionado tan bien. Necesito llenar los zapatos de un diseñador también. Y necesito un proceso de algún tipo para que el diseño de sitios pueda ser una tarea que pueda programar, en lugar de tener que ser una especie de retiro creativo que lleve semanas y semanas y espero bajar de la montaña con algo que se vea bien.

Necesito una guía paso a paso, por así decirlo, o algún tipo de capacitación para poder diseñar sitios tan rápido como los codifico.

Mi tío se ofreció a pagar cualquier curso que pudiera tomar para entrenarme como diseñador de sitios web profesional. ¿Alguien tiene buenos enlaces a cursos en línea que puedan convertirme en un buen diseñador para poder diseñar los sitios web antes de codificarlos?

gracias, david

EDITAR: Los mejores diseñadores web en la agencia para la que trabajé pasaron a ser artistas profesionales de diseño de impresión antes de aprender a hacer los gráficos para sitios web.

Edición 2: aquí hay otra buena respuesta: si tengo experiencia en programación, ¿dónde debería comenzar a aprender diseño web? , las respuestas allí y aquí son geniales. Esta publicación sigue siendo válida porque uno es del Este, el otro es del Oeste. Combinados, los dos deberían cubrir todos los aspectos y nadie necesita volver a hacer esta pregunta;) (¡por supuesto, a menos que alguien de la Antártida haga la pregunta por tercera vez!)

Respuestas (4)

El diseño lleva tiempo, ese es el truco. Tienes que pensar en todo. Y, de hecho, si el diseñador es bueno, entonces ha pensado en todo lo relevante y la implementación debería ser muy sencilla. Porque el diseñador debería haber pensado en eso, tipo de trabajo. Pero el mundo está lleno de diseñadores que no pueden hacer esto.

Entonces, ¿alguna vez le preguntó a sus diseñadores para quién estaba implementando soluciones (en un día) cuánto tiempo tardaron en hacer los diseños? Si la respuesta es que usaron 1 o 2 semanas para hacerlo, entonces lo que estás experimentando es correcto.

El diseño también es bastante prueba y error, que es lo que haces. Solo necesita comenzar a hacer esa prueba y error más rápido. Entonces, ¿dibujas cosas en papel? Dibujar miniaturas puede ayudarlo a probar muchas cosas más rápido, ya que puede tener una estimación aproximada en minutos en lugar de horas.

Impreso o web independientemente, la mayoría de las veces el truco es controlar dos cosas esenciales, que por sí solas pueden crear grandes diseños incluso sin fotos/iconos/etc:

  1. espacio en blanco
  2. tipografía

Si observa algunos sitios web muy modernos (Apple, Revolut, etc.), en su mayoría se construyen utilizando el 1 y 2, además de contenido sexy de fotos y videos. Todo lo demás es básicamente una rutina:

  • experiencia: cuanto más trabajo haga, más fácil manejará el 1 y el 2 y comprenderá cómo se conectan con todo (alineación, cuadrícula, flujo de contenido, etc.)
  • inspiración: solo ser consciente de lo que están haciendo otros diseñadores
  • tratar con la retroalimentación y proporcionar revisiones
@OB7DEV, me gustaría reforzar el primer y segundo punto. Vaya a Dribble, Behance, Awwards, Templatemonster, Themeforest... o donde sea que encuentre un diseño moderno y reproduzca algunos de ellos. Después de un tiempo de hacer esto, interiorizará de forma muy natural qué es lo que hace a un sitio web típico. Si no está familiarizado con las aplicaciones de diseño web, también es muy fácil aprender las herramientas de esta manera. Simplemente progresa de manera muy lineal, un bloque o elemento a la vez y busca en Google lo que no sabe. Eso te da un conjunto muy particular de habilidades que te ayudarán a hacer tu propio diseño.

Para empezar, investiga un poco, busca otras empresas que vendan el mismo producto o tengan el mismo nombre. Busque temas que tengan una conexión con la empresa. Esto ya debería darle algunas ideas de la dirección en la que debe ir para el diseño. Una vez que haya hecho eso, comience el proceso de diseño.

  1. Primero haces una lluvia de ideas y haces un mapa mental. Así que escribes el nombre de la empresa para la que estás diseñando una web en un papel en blanco. A su alrededor anotas todo lo que se te ocurra asociado con el nombre y los servicios o producto que vende la empresa. Siempre que puedas, haz dibujitos al lado de lo que anotaste.

Mapa mental

Esto le ayudará con ideas para la interactividad en el sitio y para cualquier diseño que desee utilizar.

  1. El siguiente paso es un moodboard. Haces un tablero en photoshop con fotos asociadas a la empresa. El tablero es para darle ideas sobre el color y el diseño. Buscas imágenes con colores que crees que podrías usar. Estos pueden ser cualquier cosa, desde objetos hasta fotos de la naturaleza y fotos de personas. En tu moodboard también pones una paleta de colores.

Es posible que desee ver estos ejemplos:

Una vez que haya creado un mapa mental y un panel de ideas, ya debería tener una idea general de hacia dónde quiere ir con el sitio.

  1. Tome una hoja de papel en blanco y comience a dibujar maquetas de cada página del sitio que desea diseñar. Indique detalles como qué será interactivo, de qué color será, etc.

  2. Ahora abres Photoshop y haces una maqueta completamente detallada de tu página de inicio web. Ponga todo lo que va en el sitio web real.

Ahora que ha realizado una lluvia de ideas, ha creado un mapa mental, un panel de ideas, una maqueta de cada página en papel y una maqueta completamente detallada en Photoshop, debería tener una idea bastante clara sobre cómo diseñar el sitio web.

En lugar de crear y recrear códigos, ha realizado la mayor parte de la preparación en papel. Esto debería hacer que el proceso sea algo más sencillo para usted. Sin embargo, tenga en cuenta que el diseño lleva tiempo. Es normal tomar una semana o más para crear un sitio (al menos para mí).

Un último consejo. Si ha hecho toda la preparación y comienza a codificar, y luego decide que el diseño realmente no funciona para usted, no tenga miedo de comenzar de nuevo. A veces es necesario.

Buena suerte.

Esto puede parecer un cliché, pero se puede aprender a través de la experiencia. Investigue algunos diseños listos para usar o software de arranque que puedan darle una idea o, de hecho, una preferencia de diseño.

PD. Hice esto y lo sigo haciendo.