proyectos Jenni
Behance Instagram Linkedin Facebook Youtube Tiktok

Etiqueta: diseño

¿Qué es diseño? y ¿Qué no lo es?

que es diseño y que no lo es

Abordar este punto puede ser básico para muchos diseñadores, pero para empresarios y emprendedores quizás este artículos les dé luz de la razón por la que posiblemente sus solicitudes de diseño no están rindiendo los frutos esperados, haciendo que inviertan cada vez más en publicidad mientras que el ROI (Retorno Sobre la Inversión) se vea afectado. 📉 Desde el punto de vista del diseñador, muchas veces nos enfrentamos al hecho de que un diseño «a la idea del cliente» es sólo convertir un mensaje en algo bonito para que el público lo vea e invierta en la empresa. Si a esto le agregamos la filosofía de «El cliente siempre tiene la razón» podemos estar enfrentando el hecho de estar metiendo la pata y obtener un resultado en el cual no estemos conformes y dicho diseño no cumpla con el objetivo para el cual fue solicitado, después ¿de quién es la culpa? del diseñador que hizo algo que no está generando resultados para la empresa. Por lo que es importante entender ¿Qué es el diseño?, ¿qué hace el diseñador? y ¿qué queremos solicitarle?, no solo desde el punto de vista del empresario o emprendedor, sino desde el punto de vista del cliente al que la empresa quiere llegar. Definiciones de Diseño Hay muchísima información por internet al respecto, pero te comparto un par de conceptos del diseño que son concretos para este artículo, igual te dejo el link si quieres profundizar, en dado caso el objetivo de este artículo es comparar para saber que estoy solicitando y cómo hacerlo para obtener los resultados esperados. El diseño según Wikipedia: Vamos a continuar con algunas comparaciones claves. Comparaciones Clave 1. Intención y propósito: 2. Proceso creativo: 3. Estética y funcionalidad: 4. Contexto cultural y social: 5. Valor agregado: Ejemplos de Diseño y No diseño Diseño: Un logotipo bien diseñado comunica la identidad de una marca y genera reconocimiento. No diseño: Una mancha en una pared puede ser percibida como una obra de arte abstracto por alguien, pero no fue diseñada con ese propósito. Diseño: Un edificio diseñado para ser sostenible reduce el impacto ambiental y mejora la calidad de vida de sus habitantes. No diseño: Una cueva natural ofrece refugio, pero no fue diseñada con ese fin. Como ves, ambos coinciden en que el diseño trabaja lo estético, lo emocional pero hay que sumarle lo funcional, por lo que el trabajo del diseñador es solventar de forma creativa el problema que le plantea la empresa a través de la solicitud de un diseño, con la intención de que tenga un propósito que se deba cumplir. Por esta razón plantea bien los objetivos de tu solicitud, es decir, ¿qué quieres lograr con este diseño?, compártelos con tu diseñador junto con el estilo gráfico o la identidad corporativa de la empresa (en caso de tenerlo), y entre ambos evalúen tanto al público al que va dirigido como el mercado al cual enfrentan con el fin de que el diseñador tenga suficientes herramientas para ofrecer soluciones creativas eficientes para la empresa. Espero este post sea de ayuda tanto a empresarios, emprendedores e incluso a personas que les gustaría tomar la carrera de diseño, para que puedan comprender un poco de que se trata. ¿Te gustaría que profundice en alguno de estos puntos o explore otros aspectos relacionados con el diseño? Déjalo en los comentarios. 👇😊

Animación del Color del Texto – Efecto Scroll Vertical con CSS en Elementor Pro

Cada vez son más frecuentes las animaciones en los sitios web que visitamos, es que no solo basta con tener una web que sea funcional, también necesitamos que sea atractiva y dinámica para nuestros visitantes, por tal razón estaré dejando una seria de efectos interesantes y fáciles de aplicar para aquellos tengan una web diseñada con el constructor visual de Elementor Pro. El primer Efecto de Scroll de esta seria tiene que ver con el cambio de color en las letras a medida que el usuario va navegando en nuestra web. Vamos ver una guía práctica donde aprenderá a aplicar este efecto de animación de texto y si no sabes nada de código, no te preocupes, solo debes copiar y pegar el código que aquí te dejo. ¡Comenzamos! Tutorial va dirigido a quienes tienen su web diseñada con elementor, sin embargo, los códigos sirven para otros constructores visuales, estos códigos no fueron escritos por mí, pero haré lo posible por explicar como usarlos y nos quedé un buen resultado. 1. Elije donde colocaremos el efecto. Abre la página web como administrador y elije la sección donde deseas colocar el efecto. 2. Crea una nueva sección Crea una sección dentro de la página escogida y dentro de ella incorpora el wigget de ENCABEZADO. 3. Escribe la palabra o frase a animar. Dentro del wigget de ENCABEZADO procedemos a escribir la palabra o frase a animar y procedemos a personalizarla en la sección de estilos donde podemos elegir el tipo de letra, grosor y altura de línea procurando de la palabra quede totalmente dentro del marco del encabezado para que no se corte el color del efecto (si llegas a 100% en altura de línea y aún no cubre la palabra completamente, coloca el porcentaje en un número mayor tipeando directamente en el campo de porcentaje. De preferencia estos efectos se ven excelentes en tipos de letras muy grandes y en bold. Te sugiero personalizar aplicando el responsive en el constructor visual ya que si tu texto tiene más de una línea el siguiente paso será mucho más sencillo. 4. Duplica cuantas veces sea necesario Si tu texto va a requerir más de una línea, duplica el primer encabezado ya personalizado las veces que lo necesites y reemplaza el texto. ¿Por qué no dejar un solo encabezado con todo el texto que necesitas? porque queremos que el efecto de scroll sea tipo cascada y que a medida vas bajando vaya apareciendo el resto, de lo contrario aparecerá todo el color de golpe y no se verá reflejado por línea. 5. Agrega el código que contiene el efecto Haz clic en el contenedor que tiene todos los encabezados (el contenedor global) y en la sección de configuración dirígete a la sección AVANZADO hasta el final donde aparece CUSTOM CSS y procede a pegar el siguiente código: ⚠️ Nota: Puede ocurrir que el color gris tenue cuando el texto se encuentra inactivo no se muestre, en caso de que este error ocurra aparecerá un símbolo de advertencia en la línea de código, esto se debe a que algunos constructores visuales hacen referencia al código RGB y otros lo tienen como RGBA. Para elementor ya está en RBGA. 6. Cambia los colores Cuando el texto aparece en OFF (sin el color) puedes cambiar la opacidad en la línea 2 del código donde cada valor representa lo siguiente: rgb(color, color, color, opacidad), siendo la opacidad mientras más cerca del valor 1 más oscuro el color y más cerca del valor 0 es más tenue. Lo ideal es dejarlo como está. Cuando el texto aparece en ON (con el color) puedes cambiar los códigos de cada color perteneciente al degradado (este efecto es un degradado de 3 u dos colores) haciendo clic en cada valor que comience con # en la línea 3 del código y reemplazando el número por el código perteneciente a tu color. TIP: Para tomar el código de color de una imagen o logo a. Consulta la paleta de colores de tu logo en RGB. Por lo general el diseñador del logo suele entregar una hoja de estilos como la de este ejemplo: b. usa el gotero de cualquier programa de edición y mira el código del color. Ya estamos terminando, vamos darle unos ajustes más y lo tendremos. 7. Agrega un wigget de HTML Debajo de los encabezados agrega un wigget de HTML con el siguiente código de javascript: No cambies ningún valor del código, excepto por las líneas 12 y 13 donde se indica en que punto de la pantalla inicia y termina la animación.Start: mientras más cerca de 100% más rápida aparece la animación.End: en 50% es el punto central de la pantalla donde termina la animación, mientras más cerca a 0% más demora en culminar el efecto. 8. Comprueba y guarda los cambios Te sugiero guardar los cambios y abrir la visualización de la página en una nueva pestaña para que compruebes como va quedando el resultado y hagas los ajustes que consideres necesarios hasta que quedé 100% a tu gusto. De igual forma no olvides mirar las letras en modo RESPONSIVE para adaptarlas a un tamaño legible en móvil y tablet sin que pierda el efecto. Espero este tutorial haya sido de gran ayuda para tí, si te ha gustado guardalo para consultarlo cuando gustes, cada vez que desees aplicar este efecto de animación de texto en scroll vertical.

20 fuentes de letras más usadas en diseño gráfico

La idea de este artículo es compartir contigo la importancia de conocer tu estilo de marca incluyendo la fuente caligráfica, para que recuerdes solicitarla a tu diseñador cuando comiencen a crear el branding.

close menu icon

Contacto

Cuéntame como Puedo apoyarte