Psicología en el diseño web: haz que la sección destacada de la página de inicio genere ventas

1. Introducción: Hola a todos, bienvenidos y gracias por revisar el curso. Mi nombre es Rinaldo y número corriendo tu sitio web diseño y optimización de tasa de conversión, AUC, desde hace más de cuatro años, a través de mi agencia, trabajé con empresas empresariales y grabas start-ups como Airbnb, Samsung, SoftBank, 3M, SAP, EA, y muchos más. Todas estas grandes empresas tienen un gran presupuesto se gasta para tratar optimizar sus sitios web para que puedan generar más leads y clientes, y lo hacen todo el tiempo. Pero qué pasa con alguien que es una empresa unipersonal o tal vez una pequeña empresa o una creativa, solo estamos tratando de conseguir sus servicios y productos. No están teniendo un presupuesto de marketing o experiencia previa el campo no es una buena excusa para ignorar los fundamentos de la optimización de la tasa de conversión. Una sólida carrera de una sola vez por tu sección de héroes puede ser una inversión digna para un negocio de cualquier tamaño. Y por eso creé esta clase. Esta clase está diseñada para ayudarte a optimizar rápidamente tu sección de héroes aplicando las mejores prácticas desde el campo de optimización de la tasa de conversión o cualquier presupuesto de marketing o conocimiento previo de su campo. Aquí o sección es la porción de un sitio web que es visible sin desplazarse. Si te preguntas por qué esta clase solo se trata de una sección de héroes cuando un sitio web o página de aterrizaje habitual tiene más secciones en ella. Bueno, como resulta, un estudio muestra que tarda 50 milisegundos o 0.05 segundos para que un visitante forme una impresión sobre un sitio web. Entonces la gente juzga los sitios web por su portada, y eso es un hecho. Y la primera impresión de un sitio web sobre sus visitantes depende en gran medida de la sección de héroes o de lo que está en la industria llamada por encima del pliegue. Se llama lo anterior el redil porque en los días del periódico, un anuncio o historia que se corrió en la primera página por encima del redil obtuvo la máxima visibilidad. Y si esa historia no llamó la atención, los periódicos no se vendían. Entonces, naturalmente, muchos diseñadores de sitios web, Margaret está en redactores, pasan mucho tiempo pensando en qué poner en la sección de héroes porque esto es lo primero que ven tus visitantes cuando llegan a tu sitio web. Y es muy importante porque un 100% de tus visitantes verán esta acción de tu sitio web. Y es mi trabajo en su clase ayudarte a que se queden en esta clase, vamos a cubrir todos los elementos de una sección de héroes y cada elemento del heterosexual recuperarse. Lo haremos en tres partes. En primer lugar, nos centraremos en el principio psicológico que estamos tratando de utilizar. En segundo lugar, vamos a crear un ejemplo utilizando las mejores prácticas a partir del campo de optimización de la tasa de conversión. Y por último, vamos a Estilo elemento utilizando la interfaz de usuario moderna y prácticas de experiencia de usuario. En esta clase, estoy poniendo este fuerte énfasis en por qué estamos haciendo algo que estamos, lo estamos haciendo. Vamos a estar usando la investigación en psicología cognitiva y conductual para tratar entender y predecir cómo se comportará un usuario en un contexto determinado en nuestra página web. Y una vez que entendemos ese comportamiento, podemos alterar fácilmente están diseñados para impulsar nuestras conversiones y, en última instancia, generar más leads y clientes. Cada lección de esta clase se divide en pasos concretos fáciles de seguir que se basan en marcos científicamente probados. Y si pasas por todos estos pasos, al final de esta clase, tendrás una nueva sección de héroes que podrás utilizar en tu negocio o en tu propio proyecto. Te garantizo esta nueva sección de héroes te hará volar tus viejas tasas de conversión. Yo estoy emocionado, espero que estés emocionado y empecemos. 2. Dibujo de la psicología: Hola, bienvenidos a la primera lección de la clase. En esta lección vamos a hablar de encabezamientos, psicología, y escribir copia para su rubro. Escribir copia para tu página web es difícil. Escribir copia persuasiva es aún más difícil cuando necesitas persuadir a alguien a través de la escritura, puedes sentirte perdido. ¿ Qué palabras debes usar? ¿ Cómo debe enmarcar su oferta? ¿ Cómo se vende pero fuera apareciendo sórdido? Si bien esas preocupaciones son comprensibles. Por suerte, la redacción de textos es un arte y una ciencia. En este video, aprenderás siete consejos de escritura de algodón basados en investigaciones académicas que maximizarán la persuasión del encabezado de tu sitio web. La frustración no es el único objetivo de los derechos de autor. También aprenderás a transmitir tu mensaje de la manera más clara y efectiva posible. Al final de cada táctica que esbozo, proporcionaré mi ejemplo el cual hará referencia una sección de héroes hipotéticos e imaginarios para una aplicación de productividad que estoy creando en esta clase. Porque los ejemplos distantes te ayudarán a aplicar estas técnicas a tu propio proyecto, ya sea una app o algo más. Para propósitos por aquí, un encabezamiento de sección es simple. Ahí consigue que los visitantes de tu sitio web entiendan que puedes resolver su problema. Si puedes obtener un guiño de cabeza inmediato a virtual cuando aterricen en tu página de inicio, tendrás una probabilidad mucho mayor de conseguir que tus visitantes den el siguiente paso cuando estés leyendo es innecesariamente complejo. Los lectores te perciben como menos inteligente. Tenemos director psicológico llamado fluidez de procesamiento, para agradecer por eso. Si tienes problemas para procesar contenido escrito, tus experiencias cerebrales y emoción negativa, entonces echa de menos atributos esa emoción negativa al contenido que estás leyendo. Para aumentar la fluidez de tu copia y evitar esas evaluaciones dañinas, necesitas simplificar tu mensaje. Entonces, en primer lugar, aprenderás tres técnicas de investigación para impulsar la claridad y persuasión o estás escribiendo una táctica. Utilizar fotogramas positivos. Los cuadros negativos describen una ausencia, ¿qué no está pasando? Los marcos positivos, por otro lado, describen algo más tangible. Por lo que el marco negativo sería no llegar tarde mientras que un marco positivo sería llegar a tiempo. Otro ejemplo es no beber excesivamente. En comparación con un marco positivo, beba de manera responsable. Marco negativo sería no usar fotogramas negativos y un fotograma positivo se usaría fotogramas positivos. Ya que necesitamos más recursos mentales para procesar marcos negativos, reducen la comprensión y degradan el impacto de tu mensaje. Puedes usar fotogramas negativos ocasionalmente eso es completamente normal, pero debes usar fotogramas positivos para la mayoría de tu copia en el sitio web. Aquí hay otro ejemplo para mi aplicación de productividad imaginaria. Marco negativo sería nuestra aplicación no interrumpirá tu rutina diaria. Si bien un marco positivo sería nuestra aplicación si encaja perfectamente en tu rutina diaria. Táctica para transmitir conceptos intangibles utilizando metáforas. Dada la importancia de las características concretas, notarás un problema a la hora de marketing. intentó visualizar las siguientes características. Calidad, potente, confiable. ¿ Estás teniendo problemas? Bueno probablemente no puedas visualizar conceptos intangibles y tus lectores compartieron una misma dificultad. Esas son nuestras metáforas que pueden ayudar. Por ejemplo, las compañías de seguros de vida utilizan ideas asociadas a diversos símbolos como paraguas, viajeros, rocas, Prudential Insurance Company, y por ende todo estado para transmitir cualidades de protección, robustez, y apoyo. Metáforas, tangibles y lo intangible que proporcionan a sus lectores tendrían una imagen mental concreta. Mejorar el impacto y persuasión de su mensaje. Aquí tienes un ejemplo potencial para mi aplicación de productividad. Nuestra app es muy potente. Paso de una descripción intangible del poder a nuestra app, tiene Zeus como el poder, que es una metáfora que describe vívidamente la idea de que nuestra app sea poderosa. Táctica tres, transformar las afirmaciones genéricas en términos concretos. Las afirmaciones genéticas son para jugar su en todas partes. Cada otro sitio web que veas, encontrarás declaraciones como nuestro equipo de soporte es muy rápido, nuestros clientes nos aman, o los softwares son confiables. No me malinterpreten. Los mensajes subyacentes son geniales, pero suena como si estuvieras vendiendo en lugar de contar. Mira lo que sucede cuando transformas esas afirmaciones genéricas en términos concretos. Te conseguiremos una respuesta en un plazo de 24 horas. A 568 empresas les encanta nuestro software. Tendrás 100% de tiempo de actividad garantizado. De repente tu mensaje se vuelve más creíble y persuasivo. En este caso, estás diciendo en lugar de vender, nuestra app puede ayudarte a ser más productivo, o la app puede duplicar tu productividad. Pasé de un reclamo genérico, tomé y término Creta de duplicar tu productividad. Acabamos de gastar dos o tres técnicas para potenciar la claridad de tu escritura. Con una mayor facilidad de procesamiento, tus lectores experimentaron indirectamente una emoción positiva que se perderá atribuida a ti y a tu contenido o a la siguiente técnica, aprenderás un consejo de redacción para desencadenar directamente un positivo emoción en tu lector. Si alguna vez has intentado aprender la redacción de textos, probablemente hayas escuchado el consejo, ¿verdad? Copia que sea clara y directa. Entonces proteja el caso. ¿ Por qué rara vez ves reclamos directos en línea? Si revisas una revista, nunca verás un anuncio diciendo, marea te limpiará muy bien la ropa. Seguro podrías argumentar que esas palabras no llaman la atención, y eso es cierto. Pero los reclamos directos también son menos persuasivos. ¿ Por qué? Bueno, la respuesta implica inferencias autogeneradas investigadas por mi consulta y Philips en 2005. Los reclamos directos son explícitos, no hay otra interpretación. Los reclamos indirectos, sin embargo, como las metáforas, requieren interpretación. Nosotros inferimos significado, y esa es la clave. Al hacer una inferencia, generamos un significado. Compare estos titulares. Directa uno, título, limpia tu ropa realmente bien. Indirecto, la frescura del aire libre. Ahora en forma líquida con titulares directos, no hay otros significados. Por lo que hay que confiar en la fuente de información, que en este caso es el anunciante sesgado puja a titular indirecto, se construye el significado. Se podría imaginar el aire libre asociando una emoción enérgica y refrescante con la marea. Independientemente de tu conclusión, generas el significado, te convertirás en la fuente. Por lo que tu cerebro pone más confianza en la información. No es necesario usar metáforas ni lenguaje figurativo. Solo necesitas ajustar tu sintaxis. Por ejemplo, si quisiera lanzar mi newsletter donde envío contenido como este, ejemplo directo sería mi newsletter está atascado, sería contenido accionable. Ejemplo indirecto sería este curso está lleno de contenido accionable y boletín no es diferente. En el primer ejemplo que dije en mi boletín es jam-packed sería contenido accionable. Es un reclamo directo. No faltan vacíos. En segundo lugar, utilizo reclamo indirecto para que puedas extraer conclusiones o auto. Utilizo el razonamiento lógico para extraer una conclusión autogenerada. Esencialmente digo que a es igual a B, que en este caso es clase igual a accionable. Y C es igual a, que es boletín igual a clase. Para implicar finalmente, el C es igual a B o el boletín es accionable utilizando un reclamo indirecto para generar significado. Tu solución siempre debe aliviar algún tipo de dolor que está experimentando el lector. Si quieres que los lectores aprecien tu solución, debes recordarles el dolor. Por lo que pinchó una herida, demostró que duele antes de revelar tu solución, agitar el problema subyacente. ¿ Por qué es importante? ¿Por qué es problemático? ¿ Cómo está afectando negativamente a tus visitantes? Entonces revela tu solución. Estamos biológicamente estructurados para evitar el dolor. Entonces, si puedes desencadenar esa sensación de dolor, tus lectores tendrán más probabilidades de buscar tu solución. Voy a delinear tres técnicas y consejos para agitar el problema. La táctica cinco enfatizó su desdén por el problema. Las actitudes opuestas pueden ser más fuertes como actitudes de apoyo. Por ejemplo, extraño un mezquino encontrado en nosotros mostramos un apoyo más fuerte los candidatos políticos cuando nuestra actitud se enmarca como candidato getter opositor, más bien a apoyar al candidato original. En lugar de reventar a los lectores sobre los beneficios de su solución enfatizó su desdén por el problema subyacente. Si estamos ejecutando copy para promocionar tu producto o servicio, no empieces con los beneficios, empieza con emociones negativas que experimentan sus lectores cuando encuentran un problema que estás resolviendo. Por ejemplo, si estuviera escribiendo copia para promover una aplicación hipotética de productividad sobre la construcción, en lugar de comenzar con beneficios, comenzaría con las emociones negativas que experimentan los lectores por falta de productividad, te sientes estresado y abrumado. Si te gusta, no hay suficientes horas en el día, te perdiste plazos importantes. Tu jefe piensa que eres incompetente, te pasa menos tiempo con tu familia. Los lectores comienzan a empatizar con esas descripciones. Se imaginan a sí mismos experimentando esas emociones negativas. Se frustran con esos problemas. Una vez que desarrollen esa oposición, entonces presente su solución. Si eres una copia arranca, que son solución, matarás ese proceso de empatía. Simplemente nos volveríamos de mente cerrada, resistiéndonos a cualquier beneficio que ofrezcas. Por lo que siempre empieza enfatizando a tus lectores el desdén por el problema subyacente. Ejemplo, ser productivo es importante. Ser improductivo es estresante. Táctica seis, demuestran un impacto en los demás. Se puede lograr un efecto poderoso demostrando un impacto en otras personas, sobre todo cuando el impacto es negativo. Considerado a los mensajes que se presentaron en el hospital. Marco. Una fue la higiene de las manos evita que cojas enfermedades. Marco dos fue la higiene de las manos evita que los pacientes capten enfermedades. El segundo cuadro influyó en más personal del hospital para lavarse las manos en un experimento corrió de vuelta a grant y Hoffman en 2011. Entonces cuando sea imposible, explique cómo otras personas se verán afectadas negativamente si los visitantes no completan o llaman a la acción. Aquí está mi ejemplo. Nuestra aplicación le ahorra tiempo frente a pasar más tiempo con su familia y sus seres queridos. ¿Cuál suena mejor? Tácticas siete, etiqueta a tus visitantes, pero un sustantivo. Nombramientos enero a preferencias más fuertes y más estables. Por ejemplo, Walton y Banaji en 2004, dieron a los participantes diversas declaraciones como, Jennifer bebidas, café, mucho, Jennifer pasa mucho tiempo en interiores. Jennifer mira mucho el béisbol. Esas declaraciones enfatizan los verbos. Respondieron a la pregunta, ¿qué hace Jennifer? Y los investigadores dieron diferentes declaraciones a otros participantes. Por ejemplo, Jennifer es bebedora de café, Jennifer y refrendar persona. Jennifer es fanática del béisbol. Esas declaraciones enfatizadas ahora responden a la pregunta, ¿quién es Jennifer? Ambos conjuntos de declaraciones transmiten el mismo significado. No obstante, el segundo set generó un impacto más fuerte. Con sustantivos. Esos rasgos parecían centrales para la identidad de Jennifer. ¿ Cómo puedes usar ese truco? Por una parte, puedes etiquetar a tu público con un sustantivo funky. Probablemente el ejemplo más conocido son los creyentes, pero no necesitas ir tan lejos. Es una idea más simple para ti. Si eres un creador de contenido, en lugar de agradecer a los lectores por hacer algo como leer tu contenido. Agradécelos por ser algo, por ejemplo, ser fan de tu contenido. El segundo cuadro generará un impacto más fuerte en su actitud hacia tu contenido. Y ejemplo, si disfrutas de ser productivo, te encantará nuestra app. Si eres un feed de productividad, te encantará nuestra app. En segundo ejemplo, estoy etiquetando a mis visitantes pero sin dueño. Acabamos de gastar más de siete marcos. No tendrías que usarlos todos para tu rumbo. Se puede combinar un par de ellos son simplemente utilizar uno. Además, si crees que tu mensaje será más claro, puedes agregar un subtítulo a tu encabezado principal y tener un mensaje secundario de esa manera. Así es como pueden verse dos de esas combinadas esto, el ejemplo que voy a estar usando mi sección de héroes más adelante, combino dos de las tácticas y ejemplos que creé anteriormente. Mi rubro dice, el doble del tiempo que pasas con tus seres queridos. Y mi subtítulo dice, AP encaja perfectamente en tu rutina diaria. El primero es demostrar e impactar en los demás. Y la segunda es usar un marco positivo especie de visitante no lo piensa como sólo otra aplicación inútil que interrumpe su vida diaria. Ahora es tu turno. Abre cualquier editor de texto sencillo y usando los framers que esbozo, escribe tus ideas con los pasos y ejemplos concretos que proporcionaron. Solo necesitas ajustarlos para que se ajusten al contexto o a lo que estás vendiendo. Escríbalo antes de pasar a un elemento diferente de la sección de héroes en la siguiente lección. Pero unos pequeños cambios puedes hacer un gran impacto en la persuasión de tu mensaje. Nos vemos en la siguiente lección. 3. Psicología de los botones de llamada a la acción: Ahora es el momento de hablar de la copia para un botón de llamada a la acción. botones de llamada a la acción o CTE son los botones que usas en tu sitio web y en tus páginas de destino para guiar a los usuarios hacia tu objetivo es la parte de la sección de héroes que el usuario necesita hacer clic para poder llevar a cabo la acción que quieres que realicen. Algunos ejemplos comunes de botones de llamada a la acción son los botones de agregar tarjeta, los botones de registro de prueba gratuita y los botones de descarga. Algunos vendedores se obsesionan con sus botones, pesar de que parte de esa obsesión es innecesaria, hay mucho mérito para enfocarse en tu botón CTA porque la mayoría de las conversiones en tu embudo se originarán a partir de un solo clic. Y si aumentas la tasa de conversión al inicio de tu embudo, aumentarás las conversiones en cada etapa de tu embudo. La primera táctica en enfocarse por escrito una copia del botón es usar la redacción en primera persona. Hay un montón de publicaciones de blog y estudios de casos de optimización de conversiones en línea que afirman haber aumentado las conversiones mediante el uso de enraizamiento en primera persona para el texto de llamada a la acción. Por ejemplo, inicia tu prueba gratuita frente a comenzar mi prueba gratuita. El segundo parece funcionar mejor, y ese efecto parece consistente también en mi experiencia. Entonces, ¿qué está causando el levantamiento consistente? Dos factores, la estimulación mental y la fluidez perceptual. investigaciones muestran que las personas desarrollan actitudes más favorables hacia el estímulo si interactúan mentalmente con él. Para la fluidez perceptual, la investigación muestra que es más probable que completes una tarea si puedes imaginarte realizando esa acción usando en primera persona y redacción, aplicas ambos Insights. En primer lugar, sus visitantes evaluaron mentalmente el llamado a la acción en cuanto a su uso personal. Y con el enrutamiento en tercera persona, consideran tu llamado a la acción desde una perspectiva en tercera persona, que no es tan fuerte. En segundo lugar, porque se imaginan realizando ese llamado a la acción, experimentan un mayor nivel de fluidez conceptual. Pueden verse realizando esa acción, por lo que se vuelven más propensos a hacerlo. No obstante, las etiquetas de botón no deben seguir y encenderse y encenderse. Es bueno usar texto de botón específico orientado a la acción. Puede que te sientas tentado a estirar tus mazos de botones, pero eso sería un mal movimiento. Idealmente, querrás mantener ese texto de botón en dos o cinco palabras. Por ejemplo, veamos qué campamento base solía usar. Botones dijo Dar reintento de campamento base. Es gratis por 60 días. Este botón de llamada a la acción probablemente esté bien, pero se acerca a la zona roja. Podrías poner cualquier información extra que tengas debajo de un botón. Lo sentimos, si quieres dar a tus visitantes información adicional sobre el envío gratis, no se requiere tarjeta de crédito inscribirte, o decirle cuántos suscriptores ya están en tu lista de correo electrónico. Puedes añadirlo a una etiqueta de texto debajo de tu botón. Y eso es exactamente lo que hizo el campamento base después de las pruebas AB. Es mejor mantener corta la copia del botón y tomar información adicional y agregarla debajo del botón. Aquí te dejamos un bonus tip para tu botón a tu llamada a la acción es un botón y lo necesitas para que se vea como uno. Por lo que agregar un estrecho a tu llamado a la acción que te ayudará a distinguirlo claramente como un botón que está ahí para ser pulsado para pasar al siguiente paso o página, indicando de esta manera que se puede hacer clic en una llamada a la acción lo hará mucho más fácil para las personas ver automáticamente qué partes de la página son interactivas y pueden llevarlas a comprometerse sin ninguna frustración. uso de una flecha también transmite una sensación de avanzar y avanzar en el proceso, lo que también dará a las personas un sentido de satisfacción así como alentarlas a comprometerse con la tarea. El principio que yace detrás de este comportamiento, Se llama cola visual y ha sido ampliamente investigado por muchos científicos. Nuestros cerebros, de la mayoría de las imágenes que vemos y nos gusta que nos den dirección sobre en qué enfocarnos. Por lo que el uso de señales visuales como flechas, ayudó a llamar la atención hacia ciertos elementos tus cerebros de visitantes serán inmediatamente atraídos hacia elementos visuales familiares, en este caso, flechas, tal como notaron y entienden estos visuales más rápidamente que cualquier otra información de la página. Y utilizar este tipo de estímulo visual es, por tanto una forma eficaz de llamar la atención inmediata sobre tu llamado a la acción, lo que aumentará las posibilidades y girará para que tus visitantes completen la acción deseada. Por ejemplo, hacer clic en un botón, botones de llamada a la acción se hacen bien, pueden aumentar drásticamente las conversiones en su sitio web. En esta lección, cubrimos la redacción en primera persona, agregando información adicional en la etiqueta y el botón y usando flechas y el botón. Aquí está la copia de mi botón para mi aplicación de productividad imaginaria. Terminamos con la parte de redacción de la clase. Por lo que antes de seguir adelante, debes tener tu copia de encabezado y la copia de botón de llamada a la acción o una copia de subtítulo y tu botón etiquetado copia son opcionales si aún no lo has hecho, abre cualquier sencillo editor de texto o toma de notas y anota tus ideas usando los marcos que nos proporcionan hasta ahora. Nos vemos en la siguiente lección. 4. Psicología de imagen de la imagen héroe: Una imagen de héroe es la primera foto o gráfica principal que se ve en una parte superior de un sitio web. El objetivo de la imagen del héroe es atraer inmediatamente a los visitantes y mostrarles de qué se trata tu sitio y tu contenido. Vamos a cubrir dos tácticas psicológicas que te ayudarán a elegir una fotografía o gráfica para motivar al visitante en tu sitio web a tomar medidas. Didáctico Uno es fomentar la interacción mental. Si solo recuerdas una cosa de esta lección, recuerda ésta. Esta táctica es muy potente, fácil de implementar un prácticamente no utilizado por la mayoría de los negocios. Cuando las empresas crean imágenes de producto, las a menudo representan un producto sin mucho pensamiento. A partir de ahora, siempre los productos de imagen para que logres una meta subyacente para fomentar la interacción mental. Aquí tienes un ejemplo. Elder y Krishna en 2012, les mostré a los participantes un anuncio para una taza de café. Y resulta que los participantes eran más propensos a comprar la taza cuando el mango, pero espaciando a la derecha hacia la mano dominante de la mayoría de la gente. El investigador atribuyó a 5'10 para aumentar simulación cuando las manijas se enfrentaban a la derecha, los participantes interactuaron mentalmente con un producto en mayor grado. En otros experimentos, ese efecto desapareció cuando los participantes estaban arrastrando algo. Cuando los participantes tienen su mano dominante disponible, esa representación visual correspondiente del producto conduce a mayores intenciones de compra. En resumen, el regidor Krishna fundó La interacción mental chispa más compras. Es decir, cuando los participantes se imaginan interactuar con un producto, se vuelven más propensos a comprarlo. Ahora podrías estar pensando, Eso es genial Rinaldo, pero mi producto no tiene mango. No se preocupe. Los investigadores realizaron otros experimentos y encontraron apoyo para otros tipos de simulaciones. Aquí te dejamos algunas ideas. En la investigación también se ha encontrado apoyo para los siguientes ejemplos. Orientar S productos simétricos hacia la derecha, hacia la Mano dominante de la mayoría de las personas. Colocar instrumentos o tiende a los de la derecha. Orientadas aperturas de producto hacia el espectador. Quitar productos de su empaque. Publicar un video o gráfico de la persona realmente usando el producto descrito. Publica una captura de pantalla de tu app. Si estás vendiendo software, publica una captura y no te puedo decir cuántas veces he mirado el sitio web del software y no uso una sola captura de pantalla de su app o características. Por ejemplo, ya que estoy creando una sección de héroes para una app de productividad, no solo voy a usar una captura de pantalla de una app, voy a crear una lista de tareas pendientes en la app o los artículos que la gente tiene de forma regular. Y de esta manera, enfatizo a los visitantes la interacción mental con la app. Se imaginan a sí mismos usando esta herramienta y creando esos artículos y cruzándolos para enumerar todos los ejemplos dados ayudan a crear una estimulación mental del uso del producto. La investigación sugiere que la representación visual o los productos fomenta la interacción mental y da como resultado intencionadas de compra. Los visitantes pueden visualizarse usando ese producto. Se sentirán más inclinados a comprarlo porque es fácil para ellos imaginar el producto como parte de su vida. Táctica a, es orientar miradas hacia tu llamado a la acción. Poseemos un rasgo evolutivo para seguir las miradas de las personas, para dirigir la atención hacia tu llamado a la acción. O nos int imágenes de personas para que estén mirando tu botón. Como humanos, experimentamos una tendencia innata a seguir las miradas de las personas. Ese comercio ayudó a nuestros antepasados a descubrir amenazas más fácilmente. Y gracias a la evolución, ese rasgo sigue grabado en nuestra amígdala. Vas a aplicar la tendencia en tu sección de héroes. Si estás aquí, una sección contiene imágenes de personas que las orientaron hacia tu llamado a la acción. Atraerás más atención hacia esa zona. Por lo general, debes evitar orientar a las personas en las imágenes hacia el espectador porque esas imágenes frontales atraerán la atención hacia la persona en lugar de las partes importantes de tu sección o página de héroe. A pesar de que el aumento de la intención se debe al seguimiento de la mirada, el aumento del deseo se debe a la fluidez del procesamiento. Generalmente, cuanto más rápido y más fácil seamos capaces de procesar la información, más positivamente v evaluar la formación de dendrita y dice que es un patrimonio evolutivo seguir las miradas de las personas. Procesamos esa información de manera fácil e innata colocando a las personas en las fotos hacia tu llamado a la acción, los visitantes de tu sitio web se sentirán naturalmente atraídos hacia esas áreas y tendrán un deseo más fuerte de convertir. En esta lección, cubrimos dos tácticas para ocurrir. Es interacción mental. Orienta la mirada si estás usando modelos en tus imágenes. A la derecha está el ejemplo que voy a usar dice que estoy creando una sección de héroes para una aplicación de productividad imaginaria. Elegí una captura de pantalla de ejemplo que se le debía para hacer un paso falló, pero tareas reales. Antes de seguir adelante, chooser crea una imagen o un gráfico que usarás tu sección de héroes basada en dos tácticas que cubrimos en esta lección. También puedes usar estos principios en todas partes de tu sitio web, como por ejemplo, páginas de productos. No sólo la sección de héroes, sino que también se aplica a cada lección de esta clase de todos modos. Nos vemos en la siguiente lección. 5. Psicología de la composición de la composición: Hasta el momento hemos creado todos los elementos que necesitamos para nuestra sección de héroes. Tenemos nuestro rumbo, llamada a la acción botón copia y nuestra imagen. Algunos de ustedes también podrían tener un subtítulo y una etiqueta para un botón de llamada a la acción dos. Ahora queremos posicionarlos juntos de alguna manera, pero esta lección aún no se trata de diseño, pero llegaremos a eso más adelante. Hay algunos principios de la investigación de psicología que podemos aplicar a nuestro layout T2. Y tenemos que mantener estos principios delante de nuestra mente antes de empezar a diseñar nuestra sección de héroes. El primer principio es el efecto Usabilidad Estética. El estudio del Efecto de Usabilidad Estética de Don Norman en 2002 afirma que cuanto más estéticamente agradable es un producto a más utilizable se percibe como, y más probable es que por lo tanto se utilice independientemente de la funcionalidad. El motivo de este Efecto de Usabilidad Estética es que cuando un producto o servicio es estéticamente agradable para un consumidor, construyen una relación emocional con él. Esta relación engendra un sentido de lealtad y consumidor se pegará por su elección aunque encuentren problemas. Pero esto en parte puede atribuirse a la fluidez de procesamiento que mencionamos antes. De acuerdo con bloque, la apariencia visual es lo primero que un comprador potencial nota sobre un producto. Y son más simpáticos con las fallas son fallas si un diseño es estéticamente agradable, llevándolos a creer que la precaución con mejor aspecto es la mejor opción en general. Por ejemplo, numerosos estudios han encontrado que técnicamente, los productos Apple no son tan utilizables como otros en el mercado, lo que significa que la gente se tropieza con más frecuencia y tiene más dificultades para entender cómo usar el producto entonces con otros dispositivos similares. No obstante, los usuarios de Apple o no se dan cuenta o no les importa porque los productos Apple son tan estéticamente agradables. El mismo concepto se ha encontrado cierto de los autos Mini Cooper los cuales tienen muchas peculiaridades, como el velocímetro que se encuentra o su radio debería ser y el reloj que se encuentra en el techo. Pero la gente perdona estas anomalías menores simplemente porque les gustaban las miradas de peso. Este principio tiene numerosas aplicaciones tienen hasta diseño cuando un cliente visita tu sitio web que es probable que prefieran sitios web que disfrutan mirando y se sienten bien al usar, aunque no realicen las tareas con tanta eficacia como lo hicieron en una página web, perciben ser más feos. Ahora eso es poderoso. Por eso, es muy importante fomentar una actitud positiva hacia tu sitio web mediante el uso de un diseño web estático. Y en las próximas lecciones de diseño trabajaremos para lograr ese efecto. Pero por ahora es importante que entendamos las razones por las que. También quiero compartir otro principio, imágenes de posición y gráficos de la izquierda. Cuando percibes estímulos hacia una soldadura, tu campo de visión, ¿el hemisferio opuesto de tu cerebro procesa esa información? procesa un estímulo presentado en el campo visual izquierdo Inicialmente se recibe yprocesa un estímulo presentado en el campo visual izquierdopor el hemisferio derecho. Y el estímulo presentado en el campo visual derecho, inicialmente proyectado para terminar proceso por el hemisferio izquierdo. Debido a esa estructura neuroanatómica, tu hemisferio derecho procesa la información presentada para abordar una sección de héroes sobrantes. Y esos hemisferios opuestos son la clave porque el hemisferio derecho es más adecuado para procesar imágenes. Y el de izquierda es más lógico y verbal. Colocar imagen en el lado izquierdo del texto mejora su procesamiento de todo el mensaje. Que esto es muy interesante porque probablemente notaste que la mayoría de los sitios web y alinean posicionan contenido gráfico di en el lado derecho de su sección de héroes. ¿ Por qué es eso? Bueno, no lo sé. Es difícil de decir. A lo mejor se siente más natural para los creadores de estos sitios web. A lo mejor es algo que estamos acostumbrados a ver. Pero ahora sabemos que la investigación reclama lo contrario. Entonces aquí está nuestra oportunidad de diferenciarse. Este fenómeno se llama lateralización cerebral, y se atribuye a la asimetría hemisférica humana, que fue investigada por Helga en 1990. Y diversos estudios han mostrado una influencia significativa del mecanismo de lateralización y varios casos, los participantes en la investigación describieron la aparición de un elemento importante como más bella si fuera en el campo visual correcto que fue investigado por b o más en 1985. Los participantes de la investigación también calificaron mejor los productos y logotipos dependiendo de su posicionamiento. Esto fue investigado al conseguir esquí ECF en 1990. Participantes recuerdan DLM es mejor si se posicionaron siguiendo las sugerencias de reglas de asimetría cerebral hemisférica. Esto fue investigado por Betty y Brewer enter 1000. También quiero señalar que algunos investigadores han obtenido resultados que no están de acuerdo con hipótesis o lateralización cerebral. Pero parece que los resultados pueden depender de las dimensiones de las imágenes y el texto e incluso de algunos factores culturales, por ejemplo, encontraron y algunos de los países asiáticos, estas reglas no eran aplicables. Entonces en estos dos principios en mente, en la siguiente lección, es momento de sumergirse en FISMA y empezar a crear nuestro layout. Si ya no tienes el recuento de esteras gruesas, ve a pick my.com y regístrate gratis. Es completamente gratuito y fácil de usar. Además, no te preocupes si nunca lo has usado antes. Si ya estás usando alguna otra herramienta como Sketch, Adobe XD, puedes seguir usando datos totalmente. Todas estas herramientas pueden hacer lo que necesitamos en las próximas lecciones. Por lo que no estaremos utilizando ninguna de las características y funcionalidades complejas. Entonces te veré en la siguiente lección. 6. Diseño de diseño de diseño: Ahora empezamos a diseñar nuestra sección de héroes. Recuerda cómo en la última lección entendimos la importancia del principio de Usabilidad Estética. Bueno, hay una manera importante heurística de diseño que podemos utilizar para lograr que nuestro sitio web luzca más estéticamente agradable. Y es por eso que el espacio, o para ser más precisos, empezando por demasiados espacios en blanco, permítanme explicarles. Es así como lo hacen la mayoría de los comercializadores, diseñadores, codificadores. Los demás elementos. Y luego empiezan a añadir un poco de margen y un poco de relleno a los elementos, cinco píxeles y luego diez píxeles. Y terminan con algo que se ve realmente apretado a la hora de diseñar para la web, espacios en blanco casi siempre se agregan a un diseño. Y si algo que se ve un poco demasiado apretado, agregas un poco de relleno marginal y luego lo vuelves a agregar hasta que las cosas se vean mejor. Marrón con este enfoque es que a los elementos sólo se les da la cantidad mínima de sala de lectura necesaria para ahora verse activamente mal. Para hacer algo en realidad de bajo grado, normalmente necesitas más espacios en blanco y piensas, así que aquí tienes una gran sugerencia para ti. Una de las formas más fáciles de limpiar un diseño es simplemente darle a cada elemento un poco más de espacio para respirar. Se debe quitar el espacio en blanco, no agregar. Un mejor enfoque es comenzar regalando algo demasiado espacio en blanco, luego eliminarlo y decirte contento con los resultados. Podrías pensar que terminarías con demasiado espacio en blanco de esta manera. Pero en la práctica, lo que podría parecer un poco demasiado cuando se enfoca en un elemento individual termina por estar más cerca lo justo en el contexto de una interfaz de usuario completa. Entonces entrémonos en sigma para ajustar nuestro diseño y empezar a trabajar en nuestra sección de héroes. Abrí FISMA y he empezado un nuevo proyecto. Yo sólo tengo la copia de mis elementos aquí que escribí en esta clase hasta el momento. Y si ya no tienes la tuya, ahora sería un buen momento para las radios. Antes de seguir adelante, en la última lección, esbozé por qué es importante posicionar elementos gráficos a la izquierda y por qué es importante posicionar el subíndice del texto. Entonces lo haré primero. Antes de que podamos hacer algo. Necesito un marco. En un sigma. Puedo crear un marco ya sea presionando lo suficiente en mi teclado o simplemente yendo aquí y haciendo clic en marco. Y una vez que hago eso, tengo muchas opciones aquí y dice que estoy diseñando para la web. Simplemente voy a dar clic en el escritorio. Y ahora tengo mi marco y puedo empezar. Ya que nos estamos centrando únicamente en la sección de héroes en no necesariamente la navegación y el logotipo. Esto va a ser un poco a tal vez un poco demasiado alto para que podamos disminuir su altura, pero lo podemos hacer más tarde también. Por lo que dijimos elemento gráfico a la izquierda. Entonces sólo voy a traer mis elementos aquí. Y los elementos textuales del texto están a la derecha. Entonces eso es cardiología. Y vamos a estar aquí. Yo sólo voy a disminuir. Tenía un poco. Está bien. Ahora, obviamente vamos a estar cambiando el tamaño de estos en las lecciones posteriores. Ahora solo estamos posicionando nuestro contenido y preparándonos para salir. A pesar de que vamos a estar cambiando el tamaño de estos elementos más adelante, ya coloqué demasiado espacio en blanco en el medio, para que después no caigamos en una trampa donde tenemos dos poco espacio en blanco entre elementos. Una última cosa cuando estoy diseñando para escritorio es que voy a ir en un marco y voy a ir en la cuadrícula de diseño. Y lo vamos a cambiar a una cuadrícula de columnas. Y suelo trabajar con 12 columnas. Yo lo estiro. También dejo eso con auto y uso un margen 128 y canalón de 16. Esto sirve para un propósito que tu contenido no salga del borde de estas columnas. Porque generalmente cuando estás diseñando para la web, quieres que todos los elementos de las secciones más antiguas de tu sitio web sigan cierta alineación. Estas columnas Propósito del servidor para que pueda aliar mi contenido dentro estas columnas y pueda apagarlas y encenderlas haciendo click en este pequeño i aquí. Ahora los puedo ver y ahora los puedo ver cuando los necesite. Entonces ahora es tu turno y solo el diseño de tu propia sección de héroes de sigma. Y no olvides agregar mucho espacio en blanco y luego empezar a eliminarlo cuando estés creando tu diseño. Ahora ahí tenemos nuestra disposición para poder pasar a nuestros siguientes elementos en la siguiente lección. 7. Diseño de encabezado de encabezado: Si bien esta lección se titula diseño de encabezamientos, básicamente vamos a estar peinando todos nuestros elementos de texto. En esta lección, vamos a elegir una fuente y crear una escala de fuentes con miles de tipos diferentes por ahí para elegir. Separar lo bueno de lo malo puede ser una tarea intimidante y sin duda es un esfuerzo subjetivo. Si ya tienes algunas de tus caras tipográficas favoritas, ve con ellas. Pero desarrollar un Nia para todos los detalles que hacen una buena tipografía puede llevar años y probablemente no tengas años. Por lo que voy a compartir algunos trucos que puedes usar para empezar a escoger tipos de letra de alta calidad de inmediato. Antes de entrar en sugerencias concretas, les voy a dar un par de pautas generales a la hora de elegir fuentes. El primero es ignorar las tipografías con menos de pesos fi. Esto no siempre es cierto, pero como regla general, tipografías que vienen en muchos pesos diferentes tienden a elaborarse con más cuidado y atención al detalle que las tipografías con menos pesos. Muchos directorios aficionados como Google Fonts te permitirán filtrarlo por número de estilos, que es una combinación de los pesos disponibles así como las variaciones metálicas, todos esos pesos pactados manera de limitar el número de opciones que tienes para elegir es manivela que hasta diez más para dar cuenta de cursiva en Google Fonts específicamente, que recorta el 85% de las opciones disponibles dejándote con menos de $0.50 serifs para elegir, y que evitará que te sientas abrumado. La segunda sugerencia es confiar en la sabiduría de la multitud. Si una fuente es popular, probablemente sea una buena fuente. La mayoría de los directorios aficionados te permitirán ordenar por popularidad. Por lo que esta puede ser una gran manera de limitar sus elecciones. Y esto es especialmente útil cuando estás tratando de escoger algo que no sea un tipo de letra neutro, escoger un buen serif sería algo de personalidad, por ejemplo, puede ser difícil. Por lo que aprovechar el poder colectivo de toma de decisiones de miles de otras personas puede hacerlo mucho más fácil. Todo diseño o fuente tiene algún tipo de personalidad. Un sitio bancario podría tratar de comunicarse, seguro, y profesional, mientras que la tendencia en tu startup podría tener un diseñador se siente divertido y juguetón En la superficie, dando un diseño en particular, personalidad podría sonar abstracto, pero mucho de ello está determinado por unos pocos factores concretos sólidos. Y la topografía juega un papel enorme en la determinación de cómo campos un diseño. Si queremos un look elegante o clásico, quizá quieras incorporar una tipografía Serif en tu diseño. Donde miro juguetón, te vendría bien un Sans Serif redondeado. Y si vas por un bucle plano o siempre que confíes en otros elementos para proporcionar una tasa de trabajo sensorial de personalidad y neutral. Y ya que estoy creando una sección de héroes para una aplicación de productividad ficticia, y quiero retratar sentimientos de ineficiencia comunistas. No me voy a desviar demasiado y voy a estar usando una nueva herramienta, sans serif más tarde cuando me meto en FISMA, elegir tamaños de fuente sin sistema es una mala idea por dos razones. Lleva a inconsistencias molestas en tus diseños y ralentiza tu flujo de trabajo. Entonces, ¿cómo se define un sistema tipo? Para el diseño de interfaces, un enfoque práctico es simplemente elegir valores a mano. La mayoría de los diseñadores utilizan una escalas lineales o modulares. Ni siquiera me meteré en esos. Pero de esta manera al hornear valores a mano, no tendrías que preocuparte por los errores de redondeo de subpíxeles. Y tienes control total sobre qué tamaños existen en lugar de externalizar trabajo de deuda a alguna fórmula matemática. Aquí tienes un ejemplo de una escala que funciona bien para la mayoría de los proyectos, siempre tengo estos tamaños listos para ir. Entonces aquí estamos en gimiendo de higo, aquí está mi habilidad extranjera. Normalmente uso 1214161820243036486072 pixel tamaño de fuente. Esto debería ser suficiente para cubrir todas sus necesidades para el diseño completo del sitio web, mucho menos el diseño heterosexual. Por lo que está limitado lo suficiente para acelerar o tomar decisiones, pero no es tan limitado como para hacerte sentir que te falta un tamaño útil. Y ahora que elegimos una fuente y creamos una escala, vamos a aplicarla a nuestra sección de héroes. Dije que voy a usar un san serif neutral y vamos a estar usando rubato ya que mi no son elección porque es un san-serif neutral. Entonces vamos a aplicarlo. Por mi rumbo. Ahora puedo mirar mi fina habilidad. Y creo que voy a ir por 36 pixeles de mi rubro, aplicado 36 pixeles. Ahí vamos. Ahora puedes ver por qué me encendí a la cuadrícula de diseño en la lección anterior. Simplemente lo enciendo ahora. Y ahora sé que mi contenido necesita estar dentro de estos diseños. Y se puede ver que esto es, esto es un poco demasiado para la primera línea. Sí, esto debería ser lo suficientemente bueno. Apagemos nuestra capa agrupada. De acuerdo, para mi subtítulo, me voy a quedar con él. Pero por el tamaño, creo que voy a ir con el texto de 16 botones redondos. Voy a ir con robot O2. Y va a ir y elegir un tamaño de fuente 16, sin embargo, todavía no se ve como un botón y lo resolveremos en una futura lección. Y por la etiqueta para mi botón, voy a ir por un doce. Y ya puedes ver, yo, estas tallas están aquí, así que así es como elegí estas. Al mirar estos, puedo ver que puedo lograr una cierta jerarquía visual en cuanto a tamaño eligiendo 36 de un encabezamiento y luego 16 de un subtítulo, y 12 para mi texto de etiqueta. También quiero establecer una jerarquía visual entre el encabezamiento principal y el subtítulo. Por lo que para el subtítulo, elegí un tamaño más pequeño que de un error de encabezamiento. Por favor, tenga en cuenta que confiar demasiado y el tamaño de fuente, la jerarquía del controlador es un error. A menudo conduce a contenido primario que es demasiado grande y contenido secundario que es demasiado pequeño. Se podría argumentar que estos dos, éste es mucho más grande que éste. Entonces tal vez podamos tener este uno al 18 que estoy tratando de hacer es, en lugar de dejar solo todo el pesado lifting a font-size, intenta usar font-weight o color para hacer el mismo trabajo. Por ejemplo, hacer un elemento primario Balder te permite usar un tamaño de fuente más legible lo suficiente y hace un mejor trabajo en la comunicación. De todos modos es importante. Entonces voy a poner el encabezado font-weight en 700 o negrita. Y también lo voy a hacer todo gorras. Entonces vayamos aquí y hagámoslo todo gorras. Ahora está en tres líneas. No lo quiero. A ver si se desangra. Esos bien. Genial. Entonces, para que podamos usar la fuente, el peso, o el color para hacer el mismo trabajo para retratar la jerarquía visual. Entonces por ejemplo, voy a hacer regular mi subpartida, pero voy a cambiar su color y lo vamos a cambiar a un cuarto o 3D 4D, y debe ser gris. Eso es genial. Ahora puedes ver una jerarquía obvia dentro de este elemento y éste, no tienes que usar lo que él pixeles y arriba para el tamaño de encabezado que hacen la mayoría de los sitios web, porque así es como la mayoría de la gente piensa que necesitas lograr la jerarquía visual donde hacer algo mucho más grande que el elemento en sigue ese gran elemento. Pero ese no es el caso que se puede ver. Este sólo tiene 36 años. La mayoría de los sitios web usan de 42 en adelante. Entonces son 36 y este es 18. Y se puede ver claramente cuál es más importante, cuál es primario, en el que uno es secundario. Entonces voy a estar usando negrita o 700 para mi índice trasero debido. Y luego al final para mi, para mi etiqueta de botón. Y vamos a revisar también realmente libido, no hemos cambiado eso y voy a estar usando cursiva. Escogeré el mismo color o cuatro f, cuatro d 4D, mismo color que mi subtítulo, usando un color más suave, un color más suave para textos de apoyo, como el subtítulo en etiqueta adeudada en lugar de un pequeño tamaño de fuente, deja en claro que un texto es secundario mientras sacrifica menos en legibilidad. Ahora se podría argumentar que este texto es diminuto, Eso es cierto. Pero entonces ten en cuenta que este dx estará bajo el botón y no queremos distraer ni a los usuarios y a nuestros visitantes demasiado de este botón ya que esa va a ser nuestra principal llamada acciones. Por lo que solo estamos apoyando este botón con este texto y aún es legible cuando, cuando el usuario abre el laboratorio del sitio web así. Por lo que para recapitular, intenta pegarse a dos o tres colores son de color oscuro para contenido primario, como el encabezado principal. Acordar contenido secundario como el subtítulo. Y de igual manera, dos pesos de fuente suelen ser suficientes para el trabajo de la interfaz de usuario. Un peso de fuente normal, 400 o 500, dependiendo de la fuente para la mayoría del texto y un peso de fuente más pesado, 600 o 700 para ataques. ¿Quieres enfatizar? Manténgase alejado de pesos de fuente por debajo de 400 para la interfaz de usuario porque trabajan para encabezados grandes, pero son demasiado difíciles de leer en tamaños más pequeños. Entonces si estás considerando usar un peso más ligero a un texto desenfatizado, usa un color más claro o un tamaño de fuente más pequeño en su lugar. Ahora es tu turno. Ajustar la opción de fuente, el tamaño, el peso, y el color son buenos elementos de texto y FISMA y nos vemos en la siguiente lección. 8. Diseño de botones de llamada a la acción: Aplicamos un tamaño, escala y una fuente historias a nuestro botón en la última lección. Entonces vamos a elegir un color para ello. Ahora. Hay muchas señales ahí fuera sobre la psicología de los colores. Pero en la práctica, realmente solo necesitas prestar atención a cómo te alimentan los diferentes colores. El azul, por ejemplo, es seguro y familiar. Nadie se queja nunca del azul. El oro podría decir caro y sofisticado. El rosa es un poco más divertido pero no tan serio. Si bien podría diseñar una psicología Orvieto completa o colores y tal, simplemente no es súper práctico incluso cuando dividimos la prueba de collares de botones detrás de bambalinas, puede ocurrir aún más aleatoriedad. Por lo que mucho se trata sólo de lo que se ve bien y se siente bien para ti. Pero una cosa que sí necesitas recordar, y eso es asegurarte de que eliges un color de botón de contratación. Mackey hoy, nuestros antepasados adquirieron un rasgo importante y esa es la capacidad de detectar el contraste en el entorno circundante. Necesitaban ese rasgo para detectar a los depredadores son estímulos que amenazan la vida. Sin comercio de deuda, la gente moriría. Por lo que gracias a la selección natural, aún posees esa habilidad. Tu atención se llama naturalmente hacia los estímulos que son visualmente más perceptibles. Por lo que usa esa perspicacia, aumentó la importancia visual de tu botón de llamada a la acción. Elige Colores de botones que contrasten con el resto de tu página. Y ese contraste llamará naturalmente la atención, pero es bastante obvio, ¿verdad? Obviamente los contrastes atraerán más atención mientras que aquí también hay más en juego. Y de nuevo, se reduce a la fluidez del procesamiento. Mencionamos en las lecciones anteriores, fluidez de procesamiento, la facilidad y velocidad con la que procesamos la investigación de información por parte de Alter y Oppenheimer en 2009 afirma que cada vez que un concepto entra a nuestra mente de forma rápida y sencilla, un produce un agradable sensación en nuestro cerebro. Y entonces atribuimos falsamente esa placentera con nuestra evaluación del estímulo y ser evaluados como estímulo más favorablemente simplemente porque pudimos procesarlo con más facilidad. Entonces, ¿cómo se relaciona eso con los colores de los botones? Los colores de botones contrastantes aumentan la fluidez del procesamiento. Debido al contraste. El acto de hacer clic en tu botón ingresará más fácilmente a las mentes de los visitantes. Ese iis generará entonces una agradable sensación en su cerebro. El acto de hacer clic en tu botón, veremos más atractivo, por lo que será más probable que lo hagan. Por lo tanto, elige un color de botón contrastante. Para mi color de botón, acabo de leer, ya que mi captura de pantalla de la app ya tiene mucho de ese color en ella. Entonces quería igualar, pero tengo cuidado de que logre el efecto contrastante, claro. Entonces vamos a cambiar mi color de fuente a blanco después de crear mi botón. Por lo que puedo presionar son en mi teclado o simplemente ir aquí y seleccionar Rectángulo. Y solo voy a crear una maraña de rango que puedo arrastrar y soltar aquí abajo para poder posicionar mi texto dentro. Veamos si su texto, su interior central. Sí, parece que sí. Necesito tener cuidado que lograra el efecto contrastante entre el color del botón y el fondo. Pero al mismo tiempo, necesito tener cuidado de que elijo el efecto contrastante, ingenio con mi texto dentro del botón y el fondo del botón. Entonces quiero decir, solo alineado para dividir mis encabezamientos. Entonces, así que para mi color de botón, voy a elegir un dB de cuatro, C, tres, F. Es del mismo color. Al igual que el color de la carretera y una captura de pantalla. Y de mi color de fuente, cambiaré eso a blanco. Eso es que se ve bien. Tan pequeño de un detalle como suena. Si y cuánto eres. Las esquinas redondeadas en tu diseño pueden tener un gran impacto en la sensación general de pequeño borde radio es bastante neutral y realmente no comunica mucho de nuestra personalidad y es propia. Un radio fronterizo grande comienza a sentirse más juguetón. Si bien el radio fronterizo bajo en absoluto se siente mucho más serio o formal, sea lo que elijas, es importante mantenerse consistente. Mezclar esquinas cuadradas con esquinas redondeadas en la misma interfaz casi siempre se ve peor que pegarse con una u otra. Por lo que ahora vamos a ajustar nuestros bordes de botones sobre, por ejemplo, suponiendo que esta herramienta es para equipos de marketing y creativos dentro de acompañar. Entonces como no estoy vendiendo a particulares sino negocios, voy a añadir un poco de frontera, pero no demasiado. No me encuentro tan juguetón. Creo que el radio de borde de cinco píxeles debería hacer el truco. Aquí está la opción de radio de frontera. Yo sólo voy a sumar cinco píxeles. Sí, eso parece justo en mi opinión. Si quieres ir por un look más lúdico, puedes ir por 25 fronteras-radio y dash debe hacer el truco. Pero voy a pegar divide. Está bien. Ahora agreguemos un botón de tour de sombras. Queremos crear un efecto como el botón se levanta fuera de la página. Por lo que será más fácil para el visitante notarlo y dar click sobre él. Crear este efecto podría parecer complicado al principio, pero en realidad sólo requiere que entiendas una regla fundamental. La luz viene de arriba. Entonces cambiemos a FISMA y añadamos algo de sombra. Debido a que los bordes superior e inferior de este botón son ambos planos, sería imposible verlos a ambos al mismo tiempo. Y la gente generalmente mira ligeramente hacia abajo hacia su pantalla. Por lo que un elemento elevado bloqueará parte de la luz para que llegue al área debajo del elemento. Podemos lograr este efecto seleccionando nuestro rectángulo. Después agregando una pequeña sombra de cuadro oscuro con un ligero desplazamiento vertical, porque solo queremos que la sombra aparezca debajo del elemento. Entonces puede ir aquí para afectarte o ¿cómo tienes seleccionada una sombra de gota por defecto? Y ahora podemos ajustar sus ajustes. Solo queremos un ligero desplazamiento vertical, creo que lo hacen los píxeles deberían hacer para engañar. No te dejes llevar con el radio de desenfoque. Un par de píxeles es suficiente. Y este tipo de sombras deberían tener bordes bastante afilados. En la parte inferior del botón está afilado en sí mismo. Y luego por el spread, puedo ir al 20%. Eso es todo. Veamos dos diferentes, definitivamente puedes ver alguna sombra sutil debajo del botón. Y ese es exactamente el efecto que queríamos hacer. Si bien estábamos escribiendo copia para un botón de llamada a la acción, usamos una flecha para transmitir movimiento. Y hablamos de la importancia de crear un sentido de avanzar y avanzar en el proceso, lo que da a los visitantes un sentido de satisfacción y los alienta a comprometerse con la tarea. Por lo que ahora podemos darle estilo a nuestro elemento de error dos y añadirlo a alguna importancia visual adicional. Y al final, agréguelo a nuestro botón. Aquí tengo un elemento de error que he descargado en línea. Ahora puedo cambiar su color a blanco ya que vamos a estar poniéndolo en este botón con el mismo color de fondo. Yo soy yo. Voy a seleccionar elemento proporciones constreñidas, lo que significa que cada vez que una disminución de altura o anchura de este elemento aguda como relación de aspecto intacta, que es básicamente lo que necesito ya que quería escalarlo hacia abajo para que quepa en nuestro botón. Acerquemos aquí. Nos permite seleccionar y ampliar un poco nuestro botón. Eso debería ser suficiente. Esto sigue siendo demasiado grande. Debería haber suficiente. Excelente. Ahora, vamos a presionar también en o en nuestro teclado, o ir aquí y presionar elipse. Y le das click. Vamos a volver a constreñir proporciones y disminuir su altura para que le consiga un círculo parejo. Voy a ponerlo aquí, tal vez un poco más, más. Y lo vamos a poner en segundo plano detrás de mi vector. C. Muévete aquí. Eso se ve bien. Para el color de este elemento elipse general. Voy a seleccionar esos mismos colores que hice para mi fondo de botón, pero voy a arrastrarlo ligeramente hacia abajo hacia la izquierda, por lo que se pone un poco más oscuro, por lo que es un poco más prominente. Y esto se ve bien. A lo mejor podemos simplemente agrupar estos dos elementos juntos, arrastrarlos un poco más cerca, y luego disminuir con apagado todo el elemento. Se ve bien. Yo sólo creo que ese botón es un poco. Yo sólo voy a aumentar un poquito el hoyo Haida. Y vamos a enviar a, enviados a los elementos. Y voy a hacer centrales estos dos elementos. Ahí vamos. Ahora se ve un poco mejor. Y voy a posicionar el central de este elemento al botón y luego un poco más cerca los usuarios puedan identificar que este mensaje en una etiqueta de texto está conectado a este botón y llamar a la acción. Ahora es tu turno. Ya casi terminamos con la clase, así que asegúrate de que tu botón de llamada a la acción esté estilizado y listo para ir a verte en la siguiente lección. 9. Diseño de imagen de héroe: Ya elegimos nuestro elemento gráfico para escuchar por encima de esta ecología de imagen de héroe, pero ahora podemos escalarla un poco más. Y una forma de pedir algo de emoción a todo el fondo de la sección de héroes es simplemente cambiar su color. Esto funciona muy bien para enfatizar un panel individual como una sección de héroes, así como para agregar alguna distinción entre todas las secciones de página. Para una apariencia más enérgica, incluso podrías usar este gradiente tardío. Entonces vamos a entrar en sigma. Entonces tratemos de lograr ese efecto. Seleccionemos mi marco y voy a copiar pegar. Y ahora voy a dar click en este pequeño plus en la primera sección. Ya está seleccionado. El gradiente lineal va profundo, por favor. Voy a arrastrarlo hacia un lado porque quiero que el gradiente vaya de izquierda a derecha. Ok. Y para mi color, el primer gradiente voy a seleccionar cinco sesenta y ocho cincuenta cinco. Y para el segundo, puedo seleccionar 98075. Y luego un 100. Obviamente puedo mantener los mismos colores de la otra fuente en este fondo. Entonces voy a cambiar esto a esperar. Voy a cambiar mi subpartida dos amplia dos. Simplemente voy a darle un poco de un pase lo menos capacidad, así que está más abajo de la jerarquía visual. Entonces voy a hacer lo mismo por mi sello. Y ahora este contraste dijimos siempre hay que tener en cuenta y usar un color contrastante para el botón. Y esto no lo es, esto no es suficiente. Por lo que quizá podamos elegir un color negro para el botón. Entonces hagámoslo. Vamos a crear, hagamos éste. Parecía un poco más así. Genial. Eso se ve bien. Y ahora solo podemos experimentar y probar diferentes iteraciones. A lo mejor preferirías que el gradiente fuera más prominente en el contraste fuera mejor al otro lado. Entonces podemos simplemente cambiarlos aquí y aquí. A lo mejor esto se ve mejor para, ya sabes, agregar una forma o ilustración simple. Y esta técnica es una de las favoritas mías que uso muy a menudo en mis diseños, es aunque decorar todo tu fondo. También puedes intentar incluir un gráfico individual o dos en posiciones específicas. Y puedes usar formas geométricas simples para esto. Por ejemplo. Estas son las tres formas geométricas que puedes ya sea Creativo, tienen Mara, solo encuentra todo hierro muy fácilmente y puedes usar otras similares o cualquiera que enrolle, puedes usar gráficos de flora si eso es lo tuyo, lo que quieras. Por lo que aquí es donde simplemente puedes crear agregando estos elementos a tu sección de héroes. También cambié el subtítulo de todos los terneros para enviar este caso aumentó el margen entre el botón y la etiqueta de texto. Por lo que un agregado de elementos E3, simplemente refrescan un poco el diseño y esto es suficiente. Pero si te gusta el fondo de color, puedes combinar esto con un, con un gradiente allí que definimos antes, pero entonces por supuesto necesitas cambiar. Necesitas cambiar el color de tus fuentes para que coincida en contraste, el fondo es otra idea para el diseño final. Y por supuesto al final, el amarillo siempre proporciona un buen contraste con el negro y el rojo. Entonces esto es todo, este caso de uso es para una aplicación de productividad. El tuyo puede ser diferente y podrías usar tácticas diferentes. Hay muchas tácticas. Estos son los tres diseños finales para aplicación de productividad D. Personalmente me gusta este uno de los más siempre me encuentran en los diseños limpios que no distraen tanto y llaman la atención donde debe estar la atención. Entonces esto es, este es tu paso final. Dale estilo a tu sección de héroes, imagen y fondo a tu gusto y ya estás listo para partir. 10. Reflexiones finales: Gran trabajo al completar el curso. Gracias por seguir adelante y espero que hayas aprendido mucho. Toda táctica que comparto con ustedes en esta clase ya está fundamentada en la investigación psicológica concreta. Trabajarán cada vez? Bueno, no necesariamente, pero por favor recuerda que estas no son algunas ideas aleatorias y pruebas divididas que sacamos del aire fino con más frecuencia que no, deberían proporcionarte un impulso positivo. Y con este enfoque analítico en mente y las tácticas de conversión que acabamos de aprender, deberías poder escalar el valor de tu sitio web de manera más eficiente. Ahora es el momento de usar un consejo comunitario en esta clase para hacer preguntas, iniciar conversaciones y compartir tu proyecto. rendición de cuentas es el pegamento que enlaza los compromisos con los resultados. Si seguiste todos los pasos en este curso, ahora tienes tu nueva sección de héroes y listo para empezar. Por lo que por favor subirlo a la galería de proyectos. Sería un placer para mí darse retroalimentación. También me puede decir qué piensas de esta clase. Al dejar tu opinión, puedes mantenerte al día. Y mis clases y recursos más nuevos siguiéndome aquí en cuota escolar. Mi intención era hacer este curso lleno de contenido procesable y mis boletines informativos, sin diferencia. Para que puedas suscribirte a Arnaldo dot email si te interesa. Muchas gracias por tomar este curso. No puedo esperar a ver u escuchar a unas secciones cobran vida hasta la próxima vez.