Hola a toda la comunidad, abro este tema con la finalidad de compartir un poco desde mi punto de vista, los conocimientos y habilidades que debe tener un desarrollador Front End
El desarrollador front end no solo debe saber usar JS, CSS3 y HTML5, esas son las habilidades que debe tener como programador pero eso no lo es todo, también debe adquirir las bases del diseño.
Un error muy común que se comete cuando uno empieza en este medio es el creer que sentarnos en frente del pc y codear, saldrá toda la magia ahí y el sitio nos quedará muy padre.
La verdad es que no, al hacer esto se esta cometiendo un grabe error, este error sera el inicio de una serie de errores que sucederán uno a uno, como el efecto domino. Algunas de las consecuencias de los errores que se pueden cometer, repercutirá mucho en la perdida de tiempo, trabajo en vano, frustración, estrés, etc.
para evitar este tipo de circunstancias (o al menos, disminuirlos) es necesario implementar una metodología de trabajo y que sea apropiada, en este caso. Lo primero que se debe hacer es
Tener una comunicación con el cliente, con ello, se analizan sus necesidades y limitantes, posiblemente él no tenga mucha idea de lo que quiere , tenemos que orientarlo para poder ser muy precisos y así ofrecerles las soluciones que permitan que el cliente quede satisfecho, una vez concluida esa comunicación, el cliente debe proporcionar el Material y/o contenido que tendrá el sitio web.
De preferencia, el material que te proporcione, debe ser accesible, si es texto, que este en un documento de Word o PDF donde se te permita tener una interacción apropiada, si son imágenes, estas no deben necesitar de ningún retoque extra (en el archivo) con extensiones "jpg, png o gif" dependiendo del uso que se le necesite dar (ahora también en SVG).
Una vez que hacemos un análisis de las necesidades del cliente y del material, lo primero que debemos usar como herramienta es el lápiz y papel (olvídense de la computadora por el momento), empezamos a hacer algunos bosquejos ( Sketch ), para plasmar las primeras ideas de como estará la estructura del sitio web (OJO, pura estructura, no nos metemos aun con los colores ni con las fuentes tipográficas), en este bosquejo se identificarán los elementos y se distribuirán con respecto a su importancia, no deben ir las imágenes como tal, solo una representación, eso aplica también para todo el contenido audiovisual (video, audio, texto, etc.).
Alguien podría decir ¿por que hacer un Sketch a mano cuando tenemos infinidad de Templates y maquetas prefabricadas que visualmente se ven bien y son accesibles? Mi respuesta es la siguiente:
La diferencia entre diseñar un Sitio y usar una maqueta, está en el propósito del diseño en base al material (contenido), podrías hacer o usar 20 maquetas diferentes y posiblemente ninguna se adapte a la necesidad del cliente, El contenido no se debe adaptar a la estructura de la página web, es la página web la que se tiene que moldear al contenido para poder alcanzar los objetivos que se buscan COMUNICAR
Ejemplo de un Sketch
Al concluir el Sketch , tenemos que hacerle llegar a nuestro cliente, la propuesta, explicando y fundamentando la razón del por que los elementos están distribuidos de esa manera, se pueden llevar algunas propuestas, recibir la retroalimentación correspondiente y aplicar los cambios que sean necesarios, una vez que el Sketch quedo listo, procedemos a usar el equipo de computo.(no se emocionen, aun no estamos en la etapa para codear, no coman ansias
)
Con un software de diseño, pasamos los bosquejos que realizamos a mano y lo digitalizamos, revisamos que visualmente se vea bien, que los elementos estés distribuidos apropiadamente (composición) aquí podemos usar las fuentes tipográficas, se recomienda que máximo se usen 3 por página, para no cargar mucho el aspecto visual, aun que lo ideal es usar de una a 2 fuentes, se pueden generar muchas variantes con una sola fuente tipográfica haciendo parecer que sea mas de una. Si el cliente tiene una imagen corporativa, tendrás que trabajar con sus fuentes tipográficas.
Las fuentes tipográficas, aun que no lo parezca, juegan un papel muy importante en el diseño y en la comunicación, dependiendo del tipo de fuente, puede transmitir elegancia, modernidad, seguridad, etc. hay que saber elegir apropiadamente de acuerdo al "mercado objetivo" (usuarios) de a cuerdo al tipo de tipografía que elijas, sera la imagen que estarás transmitiendo.
hasta este punto, aun no tocamos los colores, hay una regla muy importante:
Te preguntaras ¿por qué quedo lista? por qué el Mensaje se está transmitiendo de manera apropiada.
Con esto, tenemos terminado la parte del Wireframe (así se llama a este “bosquejo” digitalizado)
Ejemplo de un WireFrame
una vez terminado los wireframes, nos reunimos con el cliente para mostrarle las propuestas, si el cliente esta de acuerdo, seguimos al siguiente paso, de lo contrario, recurrimos a la retroalimentacion y se aplican los ajustes correspondientes .
ahora vamos con E L C O L O R
aquí pueden pasar 2 cosas:
1) Si el cliente tiene una imagen corporativa, tendrás que acatarte a los colores que vienen indicados, ya que eso es parte de la identidad de el, por ejemplo, imagina si quisieras diseñar una pagina web para Coca Cola y no usaras el color Rojo, no, ¿verdad?
2) supongamos que el cliente no tiene una imagen corporativa, entonces, tendrás que apoyarte con el poco material visual (logotipo) y la información que tengas del cliente para determinar los colores de la página web, ¿qué información nos es útil?
simple, hay un tema llamado Psicología del Color, donde nos habla de los colores cálidos y fríos, así mismo, de las cosas que están relacionadas al color, por ejemplo, el Rojo es un color visualmente muy agresivo, llama la atención con mucha facilidad, está ligado al Amor, la Pasión, el Fuego, etc.
En base a la Psicología del Color, a los valores del cliente o (en caso de que no tenga definido la Misión, Visión y Valores) a la imagen que el quiere que se intente transmitir en la web, nos podemos apoyar inicialmente con ello.
ahora, tal vez ya tengamos uno u otro color pero ¿Cómo saber si los colores son funcionales y tienen una “armonía en conjunto”? simple, hay una herramienta que Adobe nos proporciona con un navegador web y es totalmente Gratuita, en este momento se llama Adobe Color CC, está en el siguiente enlace https://color.adobe.com/create/color-wheel
¿Cómo usamos la paleta de colores?
simple, en base a los colores que consideramos apropiados, los introducimos en la paleta de colores, ya sea en formato RGB o el hexadecimal, a mano izquierda tenemos un recuadro que tienes diferentes Reglas cromáticas que podemos utilizar para definir la paleta de colores.
Tenemos los colores análogos, monocromáticos, en Triada (muy recomendable), complementarios, compuestos, tonos y Personalizado.
en lo particular, me eh sentido muy cómodo trabajando con los colores monocromáticos, en triada y compuestos, si te apoyas con la Adobe CC Color, no sufrirás mucho con los colores.
para tener una idea mas visual, pueden entrar a la siguiente pagina, adobe muestra como juega con la rueda cromatica, ejemplo:
una vez que ya seleccionamos una o algunas paletas de colores, empezamos a implementarlo en el wireframe, nos daremos cuenta que la idea del sitio empieza a tomar vida, puedes hacer algunas propuestas con una o varias paletas de colores, al final, el que se vea que alcanza mejor los objetivos, es la paleta de colores que se queda.
Los colores no son algo que se definan por los gustos, se definen en base a si son funcionales y cumplen con los objetivos que se buscan alcanzar en la comunicación.
A este archivo colorido, se le llama Mockup, inclusive, en el mockup podemos sustituir los recuadros de imágenes y líneas representativas de texto por el material que nos proporcionó el cliente, de esa forma podemos darnos una idea más completa y real de cómo quedaría el sitio web.
Una vez finalizado el Mockup, se presenta al cliente para que le de el visto bueno, de ser asi, ya se puede empezar a codear, de lo contrario, hacemos los cambios apropiados de la retroalimentacion (lo ideal es hacer 3 propuestas)
Hasta aquí, podemos decir que puede quedar la parte metodológica para definir como será visualmente el diseño, tanto los sketchs, como wireframes y mockups son entregables que se le hacen al cliente, cada uno en diferentes etapas del proceso, para verificar que la idea es clara y que se busca alcanzar esos objetivos, si haces los mockups pero no le mostraste los wireframes o sketchs al cliente, podrías llevarte la sorpresa de que no esté satisfecho, lo cual, tendrías que hacer cambios, y esto repercute en trabajo y tiempo desperdiciado. Eso sí, si el cliente ya autorizo un wifreframe y a última hora quiere hacer cambios, tu puedes cobrar algo extra por esos cambios que salieron de último momento, ya que fue responsabilidad del cliente al no hacer la observación en el momento apropiado.
Hay quienes hacen prototipos del sitio, para ver de una manera más visual como es la interacción, hay 2 tipos de prototipos, los desarrollados en html5, css3 y JS, y los que son creados con herramientas como inDesing, flash, Adobe Xd, puede llegar a ser útil para valorar los efectos, transiciones, etc. (cosas plus, que hacen el sitio visualmente mas dinámico) esta parte ya es opcional, los que lo hacen en html5, css3 y JS, lo desarrollan así para aventajar el en tiempo de producción, una vez que terminan, el sitio queda concluido.
Ahora si, ya estamos listos para codear y aplicar todo el conocimiento que tenemos relacionado a la programación
Finalmente, lo que para un pintor, su herramienta para dibujar y transmitir su arte es mediante pinceles y tintas, para los front end, sus pinceles y tintas son sus entornos de desarrollo integrado (IDE) y el código que ira en sus respectivos archivos.
por ultimo, les comparto lo siguiente que refleja una de mis maneras de pensar.
Con esto, finalizo el tema, espero que sea de su gusto y les pueda resultar útil. Pueden dejar sus dudas, sugerencias y comentarios, cualquier cosa, estamos en contacto, Saludos
El desarrollador front end no solo debe saber usar JS, CSS3 y HTML5, esas son las habilidades que debe tener como programador pero eso no lo es todo, también debe adquirir las bases del diseño.
Un error muy común que se comete cuando uno empieza en este medio es el creer que sentarnos en frente del pc y codear, saldrá toda la magia ahí y el sitio nos quedará muy padre.
La verdad es que no, al hacer esto se esta cometiendo un grabe error, este error sera el inicio de una serie de errores que sucederán uno a uno, como el efecto domino. Algunas de las consecuencias de los errores que se pueden cometer, repercutirá mucho en la perdida de tiempo, trabajo en vano, frustración, estrés, etc.
para evitar este tipo de circunstancias (o al menos, disminuirlos) es necesario implementar una metodología de trabajo y que sea apropiada, en este caso. Lo primero que se debe hacer es
Tener una comunicación con el cliente, con ello, se analizan sus necesidades y limitantes, posiblemente él no tenga mucha idea de lo que quiere , tenemos que orientarlo para poder ser muy precisos y así ofrecerles las soluciones que permitan que el cliente quede satisfecho, una vez concluida esa comunicación, el cliente debe proporcionar el Material y/o contenido que tendrá el sitio web.
De preferencia, el material que te proporcione, debe ser accesible, si es texto, que este en un documento de Word o PDF donde se te permita tener una interacción apropiada, si son imágenes, estas no deben necesitar de ningún retoque extra (en el archivo) con extensiones "jpg, png o gif" dependiendo del uso que se le necesite dar (ahora también en SVG).
Una vez que hacemos un análisis de las necesidades del cliente y del material, lo primero que debemos usar como herramienta es el lápiz y papel (olvídense de la computadora por el momento), empezamos a hacer algunos bosquejos ( Sketch ), para plasmar las primeras ideas de como estará la estructura del sitio web (OJO, pura estructura, no nos metemos aun con los colores ni con las fuentes tipográficas), en este bosquejo se identificarán los elementos y se distribuirán con respecto a su importancia, no deben ir las imágenes como tal, solo una representación, eso aplica también para todo el contenido audiovisual (video, audio, texto, etc.).
Alguien podría decir ¿por que hacer un Sketch a mano cuando tenemos infinidad de Templates y maquetas prefabricadas que visualmente se ven bien y son accesibles? Mi respuesta es la siguiente:
La diferencia entre diseñar un Sitio y usar una maqueta, está en el propósito del diseño en base al material (contenido), podrías hacer o usar 20 maquetas diferentes y posiblemente ninguna se adapte a la necesidad del cliente, El contenido no se debe adaptar a la estructura de la página web, es la página web la que se tiene que moldear al contenido para poder alcanzar los objetivos que se buscan COMUNICAR
Ejemplo de un Sketch
Al concluir el Sketch , tenemos que hacerle llegar a nuestro cliente, la propuesta, explicando y fundamentando la razón del por que los elementos están distribuidos de esa manera, se pueden llevar algunas propuestas, recibir la retroalimentación correspondiente y aplicar los cambios que sean necesarios, una vez que el Sketch quedo listo, procedemos a usar el equipo de computo.(no se emocionen, aun no estamos en la etapa para codear, no coman ansias
)
Con un software de diseño, pasamos los bosquejos que realizamos a mano y lo digitalizamos, revisamos que visualmente se vea bien, que los elementos estés distribuidos apropiadamente (composición) aquí podemos usar las fuentes tipográficas, se recomienda que máximo se usen 3 por página, para no cargar mucho el aspecto visual, aun que lo ideal es usar de una a 2 fuentes, se pueden generar muchas variantes con una sola fuente tipográfica haciendo parecer que sea mas de una. Si el cliente tiene una imagen corporativa, tendrás que trabajar con sus fuentes tipográficas.
Las fuentes tipográficas, aun que no lo parezca, juegan un papel muy importante en el diseño y en la comunicación, dependiendo del tipo de fuente, puede transmitir elegancia, modernidad, seguridad, etc. hay que saber elegir apropiadamente de acuerdo al "mercado objetivo" (usuarios) de a cuerdo al tipo de tipografía que elijas, sera la imagen que estarás transmitiendo.
hasta este punto, aun no tocamos los colores, hay una regla muy importante:
Si se ve bien en blanco y negro y es funcional, la primera etapa del diseño quedo lista.
Te preguntaras ¿por qué quedo lista? por qué el Mensaje se está transmitiendo de manera apropiada.
Con esto, tenemos terminado la parte del Wireframe (así se llama a este “bosquejo” digitalizado)
Ejemplo de un WireFrame
una vez terminado los wireframes, nos reunimos con el cliente para mostrarle las propuestas, si el cliente esta de acuerdo, seguimos al siguiente paso, de lo contrario, recurrimos a la retroalimentacion y se aplican los ajustes correspondientes .
ahora vamos con E L C O L O R
aquí pueden pasar 2 cosas:
1) Si el cliente tiene una imagen corporativa, tendrás que acatarte a los colores que vienen indicados, ya que eso es parte de la identidad de el, por ejemplo, imagina si quisieras diseñar una pagina web para Coca Cola y no usaras el color Rojo, no, ¿verdad?
2) supongamos que el cliente no tiene una imagen corporativa, entonces, tendrás que apoyarte con el poco material visual (logotipo) y la información que tengas del cliente para determinar los colores de la página web, ¿qué información nos es útil?
simple, hay un tema llamado Psicología del Color, donde nos habla de los colores cálidos y fríos, así mismo, de las cosas que están relacionadas al color, por ejemplo, el Rojo es un color visualmente muy agresivo, llama la atención con mucha facilidad, está ligado al Amor, la Pasión, el Fuego, etc.
En base a la Psicología del Color, a los valores del cliente o (en caso de que no tenga definido la Misión, Visión y Valores) a la imagen que el quiere que se intente transmitir en la web, nos podemos apoyar inicialmente con ello.
ahora, tal vez ya tengamos uno u otro color pero ¿Cómo saber si los colores son funcionales y tienen una “armonía en conjunto”? simple, hay una herramienta que Adobe nos proporciona con un navegador web y es totalmente Gratuita, en este momento se llama Adobe Color CC, está en el siguiente enlace https://color.adobe.com/create/color-wheel
¿Cómo usamos la paleta de colores?
simple, en base a los colores que consideramos apropiados, los introducimos en la paleta de colores, ya sea en formato RGB o el hexadecimal, a mano izquierda tenemos un recuadro que tienes diferentes Reglas cromáticas que podemos utilizar para definir la paleta de colores.
Tenemos los colores análogos, monocromáticos, en Triada (muy recomendable), complementarios, compuestos, tonos y Personalizado.
en lo particular, me eh sentido muy cómodo trabajando con los colores monocromáticos, en triada y compuestos, si te apoyas con la Adobe CC Color, no sufrirás mucho con los colores.
para tener una idea mas visual, pueden entrar a la siguiente pagina, adobe muestra como juega con la rueda cromatica, ejemplo:
una vez que ya seleccionamos una o algunas paletas de colores, empezamos a implementarlo en el wireframe, nos daremos cuenta que la idea del sitio empieza a tomar vida, puedes hacer algunas propuestas con una o varias paletas de colores, al final, el que se vea que alcanza mejor los objetivos, es la paleta de colores que se queda.
Los colores no son algo que se definan por los gustos, se definen en base a si son funcionales y cumplen con los objetivos que se buscan alcanzar en la comunicación.
A este archivo colorido, se le llama Mockup, inclusive, en el mockup podemos sustituir los recuadros de imágenes y líneas representativas de texto por el material que nos proporcionó el cliente, de esa forma podemos darnos una idea más completa y real de cómo quedaría el sitio web.
Una vez finalizado el Mockup, se presenta al cliente para que le de el visto bueno, de ser asi, ya se puede empezar a codear, de lo contrario, hacemos los cambios apropiados de la retroalimentacion (lo ideal es hacer 3 propuestas)
Hasta aquí, podemos decir que puede quedar la parte metodológica para definir como será visualmente el diseño, tanto los sketchs, como wireframes y mockups son entregables que se le hacen al cliente, cada uno en diferentes etapas del proceso, para verificar que la idea es clara y que se busca alcanzar esos objetivos, si haces los mockups pero no le mostraste los wireframes o sketchs al cliente, podrías llevarte la sorpresa de que no esté satisfecho, lo cual, tendrías que hacer cambios, y esto repercute en trabajo y tiempo desperdiciado. Eso sí, si el cliente ya autorizo un wifreframe y a última hora quiere hacer cambios, tu puedes cobrar algo extra por esos cambios que salieron de último momento, ya que fue responsabilidad del cliente al no hacer la observación en el momento apropiado.
Hay quienes hacen prototipos del sitio, para ver de una manera más visual como es la interacción, hay 2 tipos de prototipos, los desarrollados en html5, css3 y JS, y los que son creados con herramientas como inDesing, flash, Adobe Xd, puede llegar a ser útil para valorar los efectos, transiciones, etc. (cosas plus, que hacen el sitio visualmente mas dinámico) esta parte ya es opcional, los que lo hacen en html5, css3 y JS, lo desarrollan así para aventajar el en tiempo de producción, una vez que terminan, el sitio queda concluido.
Ahora si, ya estamos listos para codear y aplicar todo el conocimiento que tenemos relacionado a la programación
Finalmente, lo que para un pintor, su herramienta para dibujar y transmitir su arte es mediante pinceles y tintas, para los front end, sus pinceles y tintas son sus entornos de desarrollo integrado (IDE) y el código que ira en sus respectivos archivos.
por ultimo, les comparto lo siguiente que refleja una de mis maneras de pensar.
Con esto, finalizo el tema, espero que sea de su gusto y les pueda resultar útil. Pueden dejar sus dudas, sugerencias y comentarios, cualquier cosa, estamos en contacto, Saludos