Dominio del diseño web en Adobe XD

1. Introducción: Bienvenido al increíble mundo del diseño web. Yo soy Chris estéril. Acidifica al instructor de Adobe, e iremos a los principios de diseño web más importantes que te ayudarán a crear sitios web increíbles. Tipografía, teoría del color, simetría, contraste, alineación, pero también cosas como diseño sensible, tasas de conversión, tasas de rebote, etc. Este curso está repleto de la información más reciente sobre diseño web y está organizado en dos partes. En los primeros cinco, yo estaba, va a diseñar un sitio web impresionante de principio a fin. Exploraremos lo breve, entenderemos las necesidades del cliente y trabajaremos en la versión de escritorio. Y cuando eso esté hecho, cubriremos el diseño responsive. Te enseñaré todo lo que necesitas saber con ello. Por último, en la primera mitad de este curso se preparará el diseño para la codificación. No vamos a codificar el diseño de uno mismo porque eso no es necesario. Pero te voy a mostrar cómo puedes hacer felices a los desarrolladores. Y esto te ayudará mucho al cerrar la brecha entre el lado UX UI será sitio web completamente funcional. Si entiendes cómo hablar con los codificadores, tu valor como diseño que sube mucho. Y en la segunda mitad de este curso, aprenderemos sobre los principios de diseño web. Te mostraré muchos casos prácticos y ejemplos. Por lo que realmente se puede obtener su sentido de cómo dimensionar los artículos en función de su importancia. Todo lo que necesitas saber sobre tipografía, cómo trabajar con la decisión de lograr la simetría, cómo trabajar con colores y lograr contraste gris más mucho más. Y al entender estos principios, se puede diseñar cualquier sitio web, sin matemáticas del estilo o del cliente. Al finalizar este curso, tendrás una fantástica pieza de portafolio, un diseño completo de sitio web con una versión móvil y el simple prototipo interactivo, pero también una profunda comprensión de lo que hace que diseñe un sitio web. Hola. Este es un curso que te enseña diseño web para proyectos del mundo real. Te enseñaré cómo puedes tomar negocios en dificultades, rediseñar ese sitio web y ayudarles a vender cinco veces más. Hay mucho más que decir, pero por favor, estoy emocionado de ponerme en marcha. Entonces, empecemos. Te veré en la próxima conferencia. 2. Respuestas rápidas a las preguntas populares: Bienvenido al increíble mundo del diseño web. Yo soy Chris Baron. Soy instructor certificado de Adobe. Y juntos pasaremos por algunos de los principios de diseño web más importantes que te ayudarán a crear sitios web increíbles. Hablo de teoría del color, simetría, contraste, alineación, tipografía, pero también cosas como diseño sensible, tasas de conversión, tasas de rebote, etc. Antes de empezar, déjame contestar rápidamente algunas preguntas populares. El más importante, ¿tenemos que codificar nuestros proyectos? No, no, nosotros no. Permítanme explicar con un ejemplo simple pero el verdadero. Por lo que soy dueño de un negocio escuchando Rumania y tengo un sitio web de comercio electrónico. Se trata de vender alberca saludable. Ahora, yo estaba haciendo cerca de 5 mil dólares en ventas al mes y estaba atascado. No podía hacer crecer el negocio por mucho que estuviera invirtiendo en publicidad, simplemente no podía crecer. Lo que hice fue rediseñar el sitio web y Adobe XD, contraté al codificador. Y con el nuevo diseño, el negocio salta a 40000 dólares mensuales. ¿ Escuchaste eso, verdad? De cinco a 40 mil dólares mensuales, mes a mes. Así que creé un enorme valor con solo usar Adobe XD, sin codificación. Este es uno de muchos ejemplos, no se trata de cuánto dinero está haciendo mi negocio. Se trata de cómo no necesitas codificar para crear valor. Podrás crear mucho valor para cualquier empresa de todo el mundo a aunque tus diseños hechos en Adobe XD. A continuación, ¿necesitas conocer Adobe XD antes de tomar este curso? No, tú no. Pero sería una buena idea ver mi misa de Adobe XD a la clase, que te enseña todo lo que necesitas saber al respecto. Todas las técnicas avanzadas, todas las cosas divertidas. Dicho eso, no te preocupes porque te llevaré paso a paso por todo el proceso en este curso. No entraremos en técnicas muy avanzadas de Adobe XD. Por lo que podrás seguir con facilidad, no será nada complicado. Eso se debe a que verás que un gran diseño de sitio web, se trata más de seguir ciertos principios de diseño que no son tan difíciles de ejecutar un Adobe XD. A continuación, hay dos partes principales a este curso. El primero se trata de estar activo, primero va a diseñar un sitio web, la versión de escritorio, y luego la móvil. Se trata de trabajar en Adobe XD. Y esta parte va a ser divertida y voy a explicar mis opciones de diseño. Como si estuvieras parado justo a mi lado en cada paso del camino voy a explicar por qué hago lo que hago. En la segunda parte, profundizaremos en los principios y toda la teoría. La segunda parte es la más valiosa. Por lo tanto, por favor, asegúrate de hacer todo lo posible para llegar allí. Si quieres saltar a esa parte, eso también está bien. Pero déjame volver a decir esto. Si quieres los principios de diseño que puedes aplicar en cada uno de tus proyectos ahí en la segunda parte del curso, si quieres diseñar algo desde cero desde 0, una página web o versión responsive y preparada para codificación. Esa es la primera parte. De acuerdo, ahora, por último, ¿qué computadora necesitas? Cualquier computadora está bien, pero si estás en Windows, necesitarás Windows 10 o superior. Adobe XD no se ejecuta en Windows siete o Windows ocho. No se puede usar una tableta o un iPad, ni el audio ni el teléfono móvil. Aparte de eso, por favor que los pacientes trabajen conmigo y diseñaremos algunos sitios web increíbles en poco tiempo en absoluto. 3. Diseño web: lo que necesitas saber: Hey ahi, Este es Chris. Probablemente tengas tu propia idea sobre lo que se supone que debe hacer un diseñador web. Así veo las cosas. Por lo que estamos en la misma página adelante. En términos simples, un sitio web es como un edificio en que tiene dos componentes principales. Entonces dos componentes, Ahí está la base, el esqueleto, si se quiere, eso está hecho de concreto, instalación de barras de armamento, plomería, eléctrica, y todas esas otras cosas y todas esas otras cosas que hacen hasta el núcleo del edificio. Al final de la primera fase de la construcción, se puede esperar tener un edificio que se vea algo así. Entonces eso no es exactamente impresionante, pero ese es el objetivo del paso inicial. ¿ El objetivo, el segundo componente mayor, nuevamente, en términos muy simples, se centra en las miradas, en la estética. Esto incluye pisos de madera dura, papel tapiz, accesorios de luz, muebles y demás. Esta parte hace que el edificio sea habitable y utilizable. Después de todo ese trabajo se hace, ambas partes sólo entonces se considera concluido el proyecto. Ambos componentes son necesarios, pero necesitan estar claramente separados. Ellos un poco dan un paso atrás. Esta parte de un edificio lo realiza un cierto tipo de trabajador con habilidades específicas en maquinaria. En nuestro mundo del diseño web, estos chicos que construyen la base, se les llama codones o ingenieros de software, desarrolladores, programadores, como quieras llamarlos, son lo mismo. Ahora, manejaron su parte del sitio web mediante el uso de código como HTML, CSS, JavaScript, MySQL, PHP, etcétera. Este curso no te enseñará papá lado el diseño web. En cambio, nos vamos a centrar en la estética. En el lado del diseño que hace que el sitio web se vea y se sienta increíble. Permítanme explicar por qué creo que esta es la mejor manera de hacerlo. En primer lugar, financieramente, mi experiencia personal es un claro ejemplo de que crear sitios web y Adobe XD, muy lucrativo. Como probablemente sabrás, hice más de $50 mil diseñando sitios web en 99 designs.com. Apenas diseñando, puedes leer más sobre mi carrera como freelancer en las plataformas Blog Oficial. En resumen, puedes ganar buen dinero solo trabajando de este lado del proyecto. Entonces esto me lleva a la segunda cosa. Convertirse en codificador de profesión. Un buen codificador es sustancialmente más difícil, pero la recompensa, no creo que justifique ahí por ahora. Esa es mi propia opinión, por supuesto, porque para algunas personas, aprender a codificar puede venir de forma natural. Pero cuando tenía 20 años, tuve la decisión de tomar qué puedo hacer para dejar mi trabajo como agente de ventas puerta a puerta y ganar dinero suficiente para poder mudarme de la casa de mis padres. tiempo era de la esencia, y traté de codificar y me pareció abrumador. Me pareció sumamente intimidante. Sabía que me llevaría mucho tiempo hacer cualquier dinero con codificación. Pero cuando me enteré de que puedo diseñar sitios web en Adobe XD o Photoshop o lo que sea. Y eso me puede traer casi la misma cantidad de dinero que codificar, pero con una fracción del estrés y dificultad. Pensé, hombre, esta es la mejor manera de adelantarme. Pensé que esta era la mejor manera de ir. Por lo que para resumir este punto, un diseñador puede comenzar a ganar dinero mucho más rápido y con menos estrés y esfuerzo frente a un código ahí. El tercero y último que quiero ver es esto considerado un codificador experto absoluto creó la fundación de un sitio web. Código brillante, bien escrito, una gran base. Se carga rápido sin ningún error, pero se ve así. ¿ Tendrá éxito? ¿ Este es un gran sitio web? No, claro que no. El diseño es crítico para su éxito. No importa lo bien que esté construido. Si se ve terrible, lo diré otra vez. No importa lo bien que esté codificado. Si el diseño no es atractivo. Empresas quieren hermosas webs porque estas celular más, Es tan simple como eso. Sitios web de gran aspecto convierten a los visitantes en clientes pagadores. Ellos son los que mantienen su uso de sitios web activos, atractivos, hacen o rompen un negocio, sobre todo en este mundo digital en el que vivimos. Son muy pocas las excepciones. Por supuesto, hay algunas excepciones donde el diseño no importa, pero esa es una pequeña fracción, así que no hablaremos de eso. Bueno, estoy tratando de decir es que la base del sitio web, es decir, el código, el backend, la base de datos, la funcionalidad. Si bien es súper importante, obviamente, no es lo que hace que el negocio tenga éxito. El look es mucho más importante y términos más apropiados. El UI y UX son las claves de un gran sitio web y de un gran negocio. Y eso es lo que vamos a aprender en este curso. En eso nos enfocaremos. Ahora bien, se puede pensar en hacer ambos lados del proyecto, los muros de concreto y la parte declarativa, ¿no? Diseño y código. Pero para mí, de nuevo, una cosa totalmente subjetiva, no creo que sea una opción viable porque solo tienen 24 horas en ella. Simplemente no puedes ser genial en ambas cosas al mismo tiempo a menos que trabajes hasta la muerte. En lugar de ser mediocre en dos cosas, preferiría enfocarme en convertirme en grande en una cosa, ¿verdad? Así es como realmente llegas a convertirte en un mejor diseñador haciendo esa cosa. Ellos entran, día fuera todos los días. Y eso es lo que hacen los codificadores también. Ponen el tiempo, día tras día, día fuera, todos los días. Así es como te vuelves genial. Creo que esto centrándose en una sola rama te hará más feliz, pero también te pondrá más dinero en el bolsillo. Por último, debes saber que la mayoría de las empresas saben que se trata de dos trabajos separados para dos personas separadas. Ya no en 2005 donde se espera que hagas absolutamente todo? No. Alguien vierte el concreto, alguien más elige el fondo de pantalla, alguien diseña, alguien codigos. Si encuentras una empresa que quiere tanto el diseño como codificación hecha por la misma persona, simplemente sigue adelante. Las empresas obviamente preferirían que un hombre hiciera el trabajo de la gente. Eso lo pillo totalmente, pero no es justo. Entonces, no trabajes con esas empresas que quieren aprovecharte de ti, no caigas ante esa presión. Es una trampa. Confía en mí. De acuerdo, sigamos con el curso. 4. Cómo seleccionar capas como un diseñador profesional: Es esencial que sepamos seleccionar capas en Adobe XD, porque es una de esas habilidades fundamentales que debes conocer en el libro de cualquiera, hay algunas formas de trabajar. Presentaré dos opciones que no son todas tan grandes, pero son fáciles de recordar. Pero si no te importan, solo salta adelante a la tercera técnica, que es lo que te recomiendo. Vamos a llegar a ella. Por favor, abra este proyecto que tiene adscrito al curso. Da clic aquí para abrir tu panel de capas por si acaso no tienes dopante. De acuerdo, La primera forma de seleccionar capas no es la que recomiendo. Y eso es usar el nivel de span en capas. Si no tenemos seleccionada la Mesa de Trabajo, obtendrá aquí su nombre. Web 1920, uno, haga doble clic en ella, y eso revelará sus capas y carpetas. Sencillamente, digamos que queremos seleccionar Polo Norte en cambios de color, ¿verdad? Podemos abrir cada carpeta y buscarla. Esto hace más o menos tiempo. Suerte por esto. Este es un pequeño proyecto con sólo un puñado de capas y carpetas. Entonces en general no es tan difícil. Todavía en el primer método de selección de capas, también podríamos usar la función de búsqueda. Si sabemos que estamos buscando el Get Started, podríamos teclear eso. Pero claro, eso es asumiendo que el nombre de las capas es el mismo. Esto en general no es de una manera rápida el trabajo, ni lo hace si usted confiable. Justo como ejemplo, digamos buscamos el hogar, el primer elemento del menú en la navegación, ¿verdad? Xd no encuentra nada. ¿ Y por qué es eso? Porque la capa en realidad se llama menú. Entonces, para resumir esta primera técnica, por favor no confíes en usar el panel de capas para seleccionar capas rápidamente, pero debes saberlo por si alguna vez te atascas. La segunda forma de seleccionar una capa es hacer doble clic en el lienzo. Esto es de nuevo, no tan recomendado, pero debes saberlo también. Queremos seleccionar la capa de texto Get Started, ¿verdad? Asumiendo todas las carpetas de cerradas en el panel de capas, aquí está el procedimiento. Vamos con el texto y hacemos doble clic en él. Esto abrirá la carpeta principal y tendremos btn resaltado. Dicho de lo contrario, hemos bajado un nivel, no hubiéramos seleccionado la capa de texto. Vuelve a hacer doble clic, y ahora tenemos un buen comienzo. El seleccionado, como se puede ver aquí. Básicamente, cada doble clic te lleva más abajo. El número de veces que tienes para realizar esta acción depende de cuán profunda sea tu capa. En este caso, empezar se agrupa en una carpeta, BGN, y eso se incluye en un grupo más grande llamado main. De ahí por qué tenemos que hacer doble clic aquí otra vez, las situaciones más fáciles. Por ejemplo, si hacemos doble clic, el menú principal, lo seleccionará inmediatamente. Y eso es porque solo hay una carpeta, así que no necesitamos bajar otro nivel. Entonces, recapitulemos el segundo método. Tienes que hacer doble clic para expandir la carpeta. Si hay carpetas dentro de carpetas, que hacer doble clic varias veces. Por eso no soy un gran fan de este método. Sí funciona de vez en cuando, pero en general, Aquí está la mejor manera de hacerlo. Déjame mostrarte la tercera vía. El que recomiendo controlar click, asumiendo cada carpeta revelada en el panel de capas. Y quiero seleccionar la puesta en marcha. Yo haré esto. Sostendré la tecla Control y seleccionaré eso. igual manera lo tenemos sin importar lo profundo que sea. Esto es lo que tenemos que hacer en este ejemplo específico. Centró el icono y las capas de texto juntas sobre este rectángulo. Para ello, tenemos que acercarlos. Algo así, ¿verdad? A continuación, mantenga presionada la tecla Control y haga clic en el grupo de maletas. Tenemos a ambos seleccionados. Entonces vamos a darle al Control G. G del Grupo. Ahí vas. Tenemos una carpeta nueva. El paso final es seleccionar el rectángulo naranja junto con este nuevo grupo. Al igual que así. Nuevamente, mantenga el control para multi-selección y ahora use este icono. Esto los centrará horizontalmente. Por favor, eche otro vistazo al panel de capas. Ahora tenemos tres niveles. Este grupo está dentro de btn, eso está dentro de la carpeta principal. Si hago clic en cualquier lugar fuera de nuestro tablero y probaré el método número 2, mira cuántos clics se necesitan. Así que haga doble clic en unos dos veces, tres veces. Y eso es mucho trabajo. Pero con el método3, control clicando, bueno, basta con mantener el control, agárralo. Y eso es todo. Como puedes decir, esto es muy superior a lo que recomiendo día a día, sobre todo porque no estaremos usando el panel de capas con tanta frecuencia. Te explicaré por qué ese es el caso más adelante en los tribunales. Eso es una captura aunque sobre control click, digamos que acercas y quieres controlar haz clic en la breve mirada para tal vez cambia de color o lo que sea. Observe lo que sucede. En realidad has seleccionado una pequeña parte de ella. Y eso se debe a que la técnica de clic de control taladra a todos los grupos. Este icono no está hecho de una sola capa. En realidad tiene tres elementos. Entonces si tratamos de movernos , sólo reposicionará esa pequeña pieza. Lo mismo con cualquier cambio de color o cambio de tamaño. Entonces ese es el lado negativo del clic de control, pero aquí está la solución, la tecla Escape. Esto te eleva un nivel, y ahí tienes. Ahora tienes seleccionado todo el breve K. ¿ Y si en su lugar quieres la carpeta? golpear Escape. Y ahí tienes. Esto requiere algo de práctica. No es algo que les resulte familiar a los usuarios de Photoshop. Pero solo recuerda, Control, click escape, control click escape. Este es tu nuevo mantra. Este es tu nuevo hábito. Escape controlado de pierna. Mantén siempre un ojo en el panel de capas cuando hagas eso. Para que sepas cuántos diamantes tienes que golpear Escape. Eso serán momentos en los que necesites golpearlo dos veces o incluso tres veces. En la próxima conferencia que practicaremos un poco más. Entonces, no te preocupes si aún no tienes el colgado de los bordes. Pruébalo un poco, luego pasa al ejercicio. Feliz selección, control, click escape, control, click escape. 5. Práctica de ejercicios de selección de tu selección: Hola, hola. Necesitamos desarrollar memoria muscular a la hora de seleccionar capas en Adobe XD no es tan difícil una vez que te acostumbras, pero sí necesitas practicar, sobre todo si estás familiarizado con otros programas de diseño, photoshop, guiño, guiño. Ahora aquí está el ejercicio. Tienes estos artículos dispuestos en el lienzo y quiero que cambies ese color, pero como componentes individuales, es como va esto. Empieza con la bolsa de compras. Control. Haga clic en él y eche un vistazo a su panel de capas. Si no tienes dopante, usa Control Y o haz click aquí. Ahora, tenemos el camino uno seleccionado, y en base a este rectángulo, podemos decir que lo tenemos seleccionado. Pasando al lado derecho de la pantalla, vemos que tenemos un relleno habilitado. Da clic aquí para abrir el selector de color. Ahora puedes elegir cualquier color aleatorio o puedes usar mis sugerencias desde el lado derecho del lienzo. Para hacer eso. Tienes que usar esto me caigo con dual. Ahora mueve tu cursor sobre el rectángulo naranja y haz clic. Ahí vas. A continuación, controle glyc, el mango. Esta vez no abriré el recolector de color. En cambio, usaré este ícono directamente. Y así, he cambiado el color de las asas. Ahora puedes preguntarle a Chris ¿Cómo es que no cambiamos el mango de la bolsa más grande? Bueno, echemos un vistazo en el panel de capas. Esta bolsa más pequeña está hecha de dos componentes, dos elementos, camino tres, el asa que actualmente se selecciona, y camino a la base de la bolsa. Y mientras estamos en ello, cambiemos su color para hacer click en la herramienta cuentagotas. Y básicamente eso es todo. Volviendo a la bolsa más grande, esto solo tiene un camino. Por eso, podemos separar el mango del resto del mismo. Es así como el creador de este ícono optó por trabajar. Yo no los hice yo mismo en realidad los conseguí de flat icon.com. Ahora bien, no hay una forma particular de trabajar que se considere correcta. Es cierto que si tienes más caminos, sí tienes más flexibilidad. Pero también es un poco más difícil seleccionar realmente la forma. Por lo que hay que aceptar el hecho de que te encontraras con montones de diferentes escenarios basados en la preferencia de todos. Pasando a la siguiente forma, controla, haz clic en el borde exterior y hazlo naranja así. Ahora para el símbolo dentro de eso, mira lo que pasa. En realidad está hecho de tres caminos. Mantenga presionada la tecla de control y haga clic en ellos en el panel de capas. No agarres baño cinco aunque. ¿ La parte exterior naranja usa el cuentagotas? Y eso es todo. Si quieres impresionarme, puedes seleccionar estos dos círculos y hacerlos de otro color. Al igual que así. Juega con ellos. Sé que parece bastante simple, pero este es nuestro Jim, estos permitieron terrenos de entrenamiento donde las tarjetas de la vacuna y los fluidos, pero todo tiene un punto. Es así como ganas velocidad y destreza. Aunque seas el no creyente. Confía en mí, esto ayuda para las capas de texto. Esto es lo que quiero hacer. seleccionaremos multiples. Sabemos que si control-click en esta línea, la agarraremos. Si usamos la misma técnica en la segunda, deseleccionaremos la primera y agarraremos ésta en su lugar. Básicamente estamos saltando arriba y abajo en el panel de capas. El multi-selecto del Lienzo. Es bastante simple. Después de agarrar la primera capa, mantenga pulsado Control y Mayús, observe el panel de capas. Estamos bien para irnos. Voy a anular la selección y lo volveré a hacer. Control haga clic en este, y ahora Control turno a este otro. Y el tercero y el cuarto. Ahora podemos hacerlos todos rojos o lo que sea. Pasar a las líneas de texto más grandes. Control de pierna y control de turno click. Hacer estos amarillos por ejemplo. Pero hay que tener algo en mente. Déjenme mostrarles cómo pueden tener algunos problemas. Podrías hacer esto. Control-clic en una capa como de costumbre, pero ahora mantienes pulsada la tecla Mayús mientras haces clic en esta otra. El error es que debiste haber sostenido tanto el control como el turno. Pero al parecer funcionó. Se seleccionó. Aquí hay un símbolo extraño al lado para rellenar, pero si haces clic en él, aparece el seleccionador de color y parece que funciona bien. El panel de capas realmente nos dice la verdad. Seleccionamos una capa de texto y un grupo entero. Y con el cambio de color, en realidad estamos editando la etiqueta superior así como el contador de caracteres desde el lado inferior izquierdo, pulsa Control Z y copia de seguridad. La forma correcta de multiselección de la capa es Control Shift. Haga clic. Está bien, seguro que lo tienes, pero si no, vuelve a jugar, déjame mostrarte una última cosa. Esta línea. Seleccionas eso y notas algo extraño. No hay relleno. Es por ello que no se estaba afectando por nuestra acción previa. El relleno está realmente deshabilitado porque esta capa se controla a través del tablero esa sección. Es así como se puede ajustar eso. Puedes hacerlo más grueso mediante el uso de este campo. Pero el verdadero kicker son los controladores de dash y gap. Para hacer lo que realmente se puede hacer algo fresco. En la mayoría de los casos, en realidad no usarás estas características, pero es bueno conocerlas. Puedes jugar con ellos a tu tiempo, pero recuerda usar Control Z cuando termines con él. Te dejaré para terminar este particular cambio de color, incluido el teclado. No estoy buscando algo en particular, pero sí quiero ver su trabajo. Por favor tómate tu tiempo con él y muéstrame tu diseño. Recuerda divertirte con él y por favor no saltes adelante sin hacerlo. Muchísimas gracias. 6. Aquí es lo que hacer con nuestros diseños: Hola, hola y bienvenidos a esta conferencia donde quiero contestar una pregunta importante. ¿ Por qué los codels necesitan diseños hechos en Adobe XD? ¿ Cómo los usan? En primer lugar, no abren el archivo fuente. Y lo has oído, ¿verdad? Eso es totalmente correcto. No es necesario que los codons instalen Adobe XD y pasen por tu diseño. No tocan tu proyecto. Este es el camino. Ahora esto es lo que confundió a algunas personas. Si los codas no exportan a los gráficos, ¿por qué se necesita el diseño de todos modos, todos estos botones y capas de texto se hacen a través código CSS y todas las imágenes de venir de un servidor. Entonces, ¿por qué desperdiciamos nuestro tiempo diseñando cosas en Adobe XD? La respuesta es simple. El diseño actúa como una guía. Es un plano. En cierto modo te gustaría un arquitecto. Cuando estás diseñando un edificio, vas a niveles extremos de detalle. Esto se debe a que todos los involucrados tienen que aprobar el diseño. El cliente a la ciudad con respecto a los permisos, pero también a los constructores, la constructora, ¿no? Seguro. Saben que tienen que verter concreto e instalar plomería, pero tienen que saber dónde exactamente. Necesitan saber todo con increíble detalle. Y estoy hablando milímetros aquí. Es por ello que se necesita nuestro diseño. El cliente puede comprobar el diseño y ver si satisface sus necesidades y si representa su marca. Los codones también comprueban si pueden construir eso. Este es un plano o plan muy necesario que tiene que ser revisado y discutido a fondo antes de cualquier código que llegue a funcionar. En base a este detallado plan, el gerente del proyecto puede decirle a los codones qué hacer, en qué orden y con qué propósito. Sin diseño, Es como llamar a un sastre y pedirle un traje. De acuerdo, asumiendo que se trata de un Taylor fantástico, ¿puede empezar con ese nivel de información que solo quieres un traje? ¿ Saber? Obviamente, claro que no. No tiene suficiente información. ¿ Y si dices que quieres un traje casual donde un traje casual negro, sabes qué? Vamos a ramparlo. Quieres un traje casual negro con factura slim fit. Y tal vez mencionaste que tu 510 ¿Podría que les encantaba hacer un gran trabajo? No, en realidad no. Eso se debe a que no tiene suficiente información para seguir adelante. Necesitas reunirte con él. Necesita hacer mediciones precisas de tu cuerpo, mostrarte telas, mostrarte diversas opciones y opciones y así sucesivamente, es todo ese proceso. Mundo de diseño web remanso. Aquí te dejamos sólo dos ejemplos. El cliente dice que quiere un titular grande, ¿verdad? Bueno, ¿qué significa grande? ¿ Esto es grande o es grande? Bueno, ¿qué tal este valor? Cuando lo comparas con este otro bit de texto, esto es de hecho más grande. Técnicamente esto es correcto. Segundo ejemplo, seis productos en la página de inicio, ¿verdad? Digamos que eso es lo que quiere. Pero, ¿quieres que las imágenes sean redondeadas así? ¿ O quieres que se cuadren como lo tenemos aquí? Los detalles son sumamente importantes. Un gran diseño de sitio web cubre absolutamente todo lo que un codificado necesita. El tamaño de la fuente, el peso, el código de color, la línea se alza. Entonces en el hub de los efectos que diferentes estados de cargas y elementos de menú, el proceso de checkout, ventanas emergentes y así sucesivamente. Sin estas cosas, los codones, tendremos que aproximarnos todo. Y en la mayoría de los casos, eso te dará un diseño mediocre en el mejor de los casos. En algunas situaciones, conseguirás un sitio web horrible que no es nada como te imaginas eso. El cierto es que los codels toman toda esta información del diseño durante el proceso de entrega, que discutiremos. Entonces, en resumen, este no es un titular grande. Esto en realidad es nuevo Nieto negro, 40 píxeles que se muestran en el código de color a uno 27, 49, que está posicionado en el centro horizontal del proyecto, 40 píxeles del encabezado. Esto es lo que el codificador va a tomar de tus diseños. Cada elemento aquí tiene montones de propiedades y el proceso de codificación se basa en recrear estos valores En código de trabajo. Nuevamente, más adelante en el curso, te voy a mostrar todo. Te voy a mostrar cómo preparas todo para el código. Pero aquí están los puntos esenciales una vez más, los codones no necesitan archivo de proyecto de audio Adobe XD. Les darás un enlace que contiene todo lo que necesitan. Nuestro diseño en Adobe XD es increíblemente importante porque muestra todos los detalles del proyecto. Después de que el cliente apruebe el diseño, los codones finalmente pueden ponerse a trabajar, pero no antes de eso. 7. Ejercicio: prueba tus habilidades y atención a los detalles: Hola y bienvenidos a este ejercicio donde espero que lo pasen bien. Tienes dos tareas. El primero es organizar estas capas en un sitio web guapo. Bueno, una parte de un sitio web. Ahora cómo haces eso depende totalmente de ti. Lo importante es que utilices la técnica Control click que te mostré en la conferencia anterior. Y quieres asegurarte de que se vea bien. Cuando termines con él, por favor, exporta el diseño como PNG y subirlo a la plataforma para que te pueda dar mis comentarios. Esto se puede hacer de varias maneras. La forma más fácil de exportar es hacer clic en el nombre de las tablas de arte justo aquí donde dice lienzo. Y luego usa Control E. Ahora si no quieres usar Control E, por favor ve al menú principal. A partir de aquí, vaya a exportar y luego use export selected desde esta nueva ventana, elija PNG y un lugar para guardarlo. Te sugiero que uses tu escritorio. Arreglar este proyecto me hablará un poco de tu diseño I. Pero la tarea número 2 hablará volúmenes sobre dónde estás y tu carrera. Esto es lo que quiero que hagas. Intencionalmente cometí tres errores. Bueno, creando estos elementos. Después de subir el PNG, por favor dime en un comentario los tres errores que incluí intencionalmente. Ahora, me doy cuenta de que para algunos de ustedes, esto puede ser increíblemente fácil. Para los otros no eran hacer cuestiones podría ser obvio, pero el tercero, que podría ser difícil de encontrar, lo creas o no, poder detectar pequeños errores es una de las partes más importantes en cualquier diseñador web el conjunto de habilidades. Nuevamente, el mejor número 2, es encontrar tres errores, pero por favor obviamente no saltes el número uno porque eso podría ayudarte a encontrar las ediciones. Por favor paren el curso y sin embargo el trabajo, no continúen con él porque en la próxima conferencia, les voy a mostrar la versión terminada. Y te voy a mostrar que nos equivocamos, pero no es divertido de esa manera. Entonces por favor, por favor, detente ahora mismo. Pruébalo. ¿ Y si no puedes hacerlo por la razón que sea, por favor sólo quédate con la solución para que no veas los errores. ¿ De acuerdo? Cuando haya terminado, por favor continúe. 8. Cómo resolver el ejercicio anterior: Hey ahi, Este es Chris. Bienvenido de nuevo. ¿ Tuvo oportunidad de crear ese mini sitio web y avistar esos errores V que incluí. De no ser así, por favor haga una pausa en este momento tenía la tecla Barra espaciadora. De lo contrario, en los próximos segundos, voy a mostrar el resultado y les diré las respuestas. Por favor. Advertencia final. De acuerdo, déjame mostrarles las dos tareas completadas. El primero es bastante recto para la web. Así es como se supone que su diseño debe verse, dar o tomar, por supuesto. Y aquí están los puntos esenciales. Número uno, todos estos elementos están alineados a la izquierda. Eso es realmente importante. Entonces izquierda alineando todo, el logotipo, el titular, el texto del cuerpo, y el botón. Eso es súper importante. Siguiente número dos, el logotipo y el menú principal están centrados verticalmente dentro de este rectángulo. De acuerdo, por fin, número 3. El hueco de la izquierda coincide con el hueco del lado derecho. Por lo que la misma cantidad de espacio a cada lado. Estoy usando el logotipo para medir la distancia de este lado manteniendo presionada la tecla de control, aparecerán estas líneas rosadas y estas se denominan guías inteligentes. Me dicen esa distancia y Pexels aquí, eso es 130. Por lo que 130 pixeles. Estoy en la herramienta de movimiento, por cierto, del otro lado, usaré el menú principal como punto de referencia. Y de nuevo, estoy recibiendo 130. El valor en sí no es importante. En cambio, es esencial que tengas el mismo número a ambos lados. Entonces en general, este es el diseño, pero ¿qué pasa con los errores? La segunda tarea, los tres errores, ¿verdad? De acuerdo, El primero es el hecho de que averiguar más no es el centrado verticalmente dentro del botón. Si haces zoom usando la tecla Control y el desplazamiento del ratón y realmente te enfocas en ella. Creo que serías capaz de detectar el error. Es un poco más notable. De acuerdo, ahora voy a alejarme con Control 1 para poder revelar el segundo error. Esa es la cantidad de espacio en este párrafo, aunque no es tan obvio como el primer error. Se puede ver que esto no es muy agradable de mirar. En realidad es difícil de leer porque el texto está demasiado condensado, es demasiado compacto, demasiado unido. Y este es en realidad un tema muy común entre los principiantes, tanto diseñadores como codones, que dejar este ajuste específico en su nivel predeterminado. Y eso dificulta la lectura del texto. No utilices el nivel predeterminado. Vamos a hablar de eso en el curso. De nuevo, no es un gran error. Pero es como poner ketchup en un caro trozo de bistec. En general, no haces eso. Ahora para el último error, número 3, esto es un poco más difícil de identificar. Mi conjetura es que la mayoría de las personas lo pasarán por alto. El tema es con el menú principal, la distancia entre los dos últimos ítems no es igual. No es lo mismo. En realidad. Es exactamente dos enlaces espaciales por debajo de todos los demás. Aquí te explicamos cómo puedes probarlo. Permítanme centrarme en ello. Habilitaré el mundo mecanografiado pegando a D. Ahora voy a dar click aquí. Mientras mantiene pulsada la tecla Mayús, tocaré varias veces la tecla de flecha derecha para poder contar el número de espacios vacíos entre estos dos. Y eso es 1, 2, 3, 4, 5, 6, 7. Por lo que hay un hueco de siete espacios vacíos. No te aburriré revisando todas las demás. En cambio, voy a hacer esto que es mucho más rápido. Voy a copiarlo con Control C, este espacio vacío aquí. No tienes que seguir, por cierto, sólo mirar y escuchar. A continuación, voy a seleccionar la siguiente brecha así. Ahora cuando pego, si hay alguna deferencia, esa capa de texto debería cambiar. Pero si los pego, no pasa nada, entonces la distancia es idéntica. Entonces vamos a darle al Control V y probarlo. Y sí, no hay cambio. Hagamos el siguiente. Selecciona este espacio vacío y basado con Control V. De nuevo, no hay cambios. Entonces eso significa que es lo mismo. Ahora para el último. Sí, se movió. ¿ Notaste, si no menos, contado manualmente? Entonces este es 12345. Por lo que cinco espacios frente a siete en estos otros casos. Y con eso, estos son los tres errores que he incluido intencionalmente. No tienes los correctos por sí mismo por cierto, así que por favor no te preocupes por eso. Sólo déjalo por ahora. Sólo para que no te deje colgado. Aquí está la versión correcta. El corregido da da el antes y el después para que puedas compararlos fácilmente. ¿ Te das cuenta de los cambios? Ahora, de nuevo, su reacción ante estas pequeñas cosas, estas pequeñas imperfecciones es realmente importante. Si no crees que estos pequeños detalles son importantes en el diseño web, entonces tal vez estas no sean las cotizaciones adecuadas para ti, y tal vez el diseño web no sea para ti. Y eso se debe a que cualquier diseñador decente tiene que prestar mucha atención a su trabajo y ejecutado correctamente con pixel perfecta precisión. Más sobre eso un poco más tarde. Pero por ahora, me encantaría escuchar lo que piensas de estos errores. ¿ Crees que deben ser manchadas y corregidas? Cuál era el diseño lo suficientemente bueno como lo era antes. Por favor avísame en la sección de comentarios, en la sección de preguntas y respuestas, o en el servidor de Discord, si me puedes encontrar con mayor frecuencia que no. Gracias. 9. Las tres claves para convertirse en un gran diseñador web: Bienvenidos a esta conferencia donde revelaré la base del curso, los tres pilares de un gran diseñador web. Estos son los siguientes en este orden. Número uno, pixel número de ejecución perfecto para entender las necesidades del cliente. Y número 3, atención al detalle. Estas son las cosas que tienes que dominar si realmente quieres ganarte la vida como diseñador web. En realidad cualquier tipo de trabajo de la interfaz de usuario se basa en estos tres componentes. En primer lugar, permítanme definirlos. Entonces recuerda la ejecución perfecta de un píxel. Esto es lo que acabamos de experimentar en el ejercicio anterior. Se compensó el texto y la carga. Tenía 29 píxeles en la parte superior y sólo 24 en la parte inferior. En la versión correcta, el espacio es igual en ambos ejes, 27 píxeles verticalmente y 69 píxeles horizontalmente. El hueco a ambos lados del diseño vuelve a igualar la distancia auditiva aquí, nuevo igualar la alineación izquierda de estas cuatro capas. Perfecto. Así es como funciona un diseñador web. La precisión es clave, si bien no sugiero que se obsesionen con cada píxel, esto es lo primero en lo que hay que trabajar y posteriormente dominar. Un gran diseñador web siempre escanea con imperfecciones en cuanto a ejecución, tu mente se ajustará a esta nueva forma de pensar. Si lo practicas, describiré mi proceso y te daré montones de consejos y técnicas en un capítulo separado. Pero sepan que inmediatamente creo líneas imaginarias en mi mente cuando veo un diseño. En primer lugar, busco dos grandes líneas verticales que decían el límite del diseño. A esto se le llama el área activa y se necesita ajustar con precisión. Cualquier sitio web decente tendrá unos bien establecidos. Vea cómo todo está alineado a ambos lados correctamente. Esto es lo que se quiere comprobar, pero esto es sólo un paso y el espaciado no lo es todo. Paul contraste es otra cosa. Estos son algunos ejemplos. En mi libro. Este es otro error de ejecución. El diseño de falló al seleccionar los colores apropiados. Bueno, aquí hay otra que está relacionada con el contraste. La foto está demasiado ocupada para que tengan otros textos encima. Estos también se pueden llamar errores de principiante, pero me gusta usar mejor mi terminología porque es más descriptiva. Entonces, para resumir, el primero, el primer pilar de un gran diseñador web, la misma base es la capacidad de ejecutar un diseño sin ningún error de ejecución. Esto implica una buena comprensión de Photoshop, lo que su programa de diseño de elección. Si no sabes cómo usarlo correctamente, utiliza Guías, Guías inteligentes, Grids, las herramientas de alineación, agrupar cosas, etcétera. Entonces no puedes proceder es como tratar de convertirte en constructor. De lo que no sabes sostener un martillo o tratar de convertirse en un luchador, pero no sabes cómo lanzar un puñetazo. No debes pedirme consejo ni a nadie más para ese asunto con respecto a tus diseños, a menos que tengas esto resuelto. Cuando no tienes ningún error de ejecución, literalmente 0 errores. Sólo entonces podrás enfocarte en los otros dos pilares. Sé que suena aterrador, pero si sigues mis cursos te mostré que no cometerás ningún error notable. Número para entender las necesidades del cliente. Voy a mantener esto corto mostrándote un caso claro. Imagina un cliente una vez un sitio web para su centro de salud, ¿verdad? Entonces este negocio cuenta con entrenadores personales, equipo de gimnasio, el estudio de yoga o crossbite ahí aún así funciona bien? ¿ Cuál de los siguientes diseños es mejor? ¿ Es éste? Échale un vistazo rápido. La primera impresión es lo que más importa. ¿ Qué tal este? ¿ Esta es mejor? Incluiré los enlaces justo en el caso 1. Yo los exploré. De acuerdo, finalmente este último. Entonces te preguntaré de nuevo qué diseño es el mejor? El problema en sí mismo es el problema. No se supone que los juzgues en base a tu gusto. Estas son vibraciones radicalmente diferentes. Por ejemplo, este es núcleo totalmente duro. Esto es para culturistas, para cabezas de carne que aman pegar pesas. Es oscuro, serio y sin duda atraerá a cierto grupo de personas, 95 por ciento de ellas siendo hombres, probablemente con experiencia previa de Jim. Pero este otro es todo lo contrario. Es como si fuera acogedor, es divertido, es amable y atraerá gente, gente normal, tanto hombres como mujeres, que probablemente nunca antes habían estado en el gimnasio. Podrían estar asustados o intimidados por exactamente este tipo de personas en el otro diseño. Por lo que probablemente quieran evitar ese tipo de gimnasios. Otro, éste está especializado en yoga. Es elegante y atractivo debería, pero en su mayoría atraerá a mujeres que están buscando el estudio de yoga de gama alta. Seguramente se convertirá bien con ese público objetivo. Pero los culturistas y las personas irregulares probablemente lo evitarían. Entonces ya ves que no se trata de qué diseño es mejor. Ahora, en realidad es asegurarte de que entiendas las necesidades del cliente. Él es el que se supone que te dirá su público objetivo. Se supone que tengo lo que proporciono la página web y así sucesivamente. Cuando se tiene toda esa información, sólo entonces se puede empezar a juzgar diversos diseños que se construyen de acuerdo a las necesidades específicas del cliente. De nuevo, tenemos todo un capítulo sobre este tema, pero esa es la idea en pocas palabras. Por último, el tercer y último pilar es la atención al detalle. Cuando se manejan esas otras dos cosas, Es hora de elevar el diseño mostrándole mucho amor. Este camino es menos sencillo, pero permítanme mostrarles algunos ejemplos. La diferencia entre este tipo de diseño y éste es la cantidad de atención al detalle que se da a cada componente. Podrás pensar, Oh , son los hermosos gráficos, las ilustraciones, fuentes e iconos. Y sí, tienes razón. Estos llevan tiempo, energía y mucho esfuerzo. Incluso si no creas todo desde cero. Esta es la marca de un diseñador que quiere crear algo especial, algo más. Estar la atención al detalle es clave porque todo tiene que trabajar en conjunto. Todo está en sintonía y canta la misma canción. Cada elemento, cada color, cada fuente es cuidadosamente elegido para sobrecargar todas las demás. Se trata de sitios de sinergia que no han dado suficiente atención al detalle. Nos veremos sosos, aburridos, o mejor puesto, olvidadizos. Entonces cuando estás presentando un sitio web que le gusta la vida, pero está perfectamente ejecutado y se ajusta a las necesidades del cliente. Podría ser un seis de los siete de cada 10. Bien, no genial. Si quieres elevar tu juego, este es el tipo de cosas que tienes que hacer, trabajar más en cada cosa. Ese es el tercer pilar del éxito en cuanto al diseño web. Y ese es en realidad todo el curso. Eso es lo que planeo enseñarte y varios capítulos en trozos pequeños uno a la vez. Estoy realmente emocionada porque me encantó este campo y ojalá pueda compartir mi pasión contigo de una manera productiva. Sé que tienen preguntas, pero por favor sigan viendo el curso ya que todo se desarrollará poco a poco a su debido tiempo. 10. La pregunta más importante al empezar un nuevo proyecto: Hola y bienvenidos a nuestro primer proyecto de diseño web de principio a fin. Aquí está la tarea que necesitamos para rediseñar este sitio web. Este es asunto mío. El sitio web encierra bocadillos saludables en mi propio país, Rumania, aquí está la pregunta más importante al iniciar cualquier proyecto, sobre todo un rediseño. ¿ Cuál es el objetivo del negocio? Nuevamente, ¿cuál es el objetivo del negocio? Si recuerdas, esta es la segunda clave para convertirse en un gran diseñador web. Entonces, ¿qué hace este negocio uno de los, cuáles son sus objetivos en este caso, estoy feliz de ser tanto el cliente como el diseñador para poder explicar todo a detalle. Es por ello que elegí este proyecto. Pero hay que empezar con esa pregunta sin respuesta. No puedes conseguir el trabajo. Podrías mejorarlo en base a tu propio gusto e ideas. Pero recuerda el sitio web del gimnasio, múltiples versiones, todo bello clima. Si no sabes lo que quiere el cliente, cuáles son sus objetivos, entonces todo es para nada. Es por ello que no debes diseñar nada hasta que obtengas una respuesta. ¿ Cuál es el objetivo del negocio? ¿ Qué quiere lograr? Y aquí está el proceso. Este sitio web quiere vendernos productos. Eso es obvio, ¿verdad? Pero vamos a ir más profundo. ¿ Quién es el público objetivo? Gente en Rumania? Porque no hace envíos a nivel internacional. Está bien, Genial. Pero toda la gente en Rumania es que alguien en particular? ¿ Es para niños? ¿ Es para personas que quieren bajar de peso? ¿ Es para hombres que funcionaron? Todas estas son preguntas que deberías estar haciendo. El cliente puede no tener respuestas a todas estas preguntas, pero puede encontrarlas a través de Google Analytics, por ejemplo, solo le pidió acceso y conseguirás un mejor sentido de las cosas en este video, solo voy a enfocarse en un par de cosas. Si vamos a audiencias, demográficas, y luego género, podemos ver que cerca del 80 por ciento de los visitantes son las mujeres. Eso es extremadamente importante para un rediseño. Si comprobamos la edad, vamos a ver que no estamos tratando con un público más joven. Entonces no necesitamos algo que vaya a ser muy moderno o audaz, emocionante, de vanguardia. Por último, una última cosa. Cuando miramos los dispositivos del visitante, podemos ver que el móvil es el 90% de los visitantes. Por lo que la mayoría de la gente está en sus teléfonos. Pero una cosa pequeña, no salten a conclusiones porque escritorio, si bien es sólo el 10 por ciento del tráfico, genera lo que el 5% de los ingresos, mientras que así el 10 por ciento constituye el 45% del negocio. Eso es enorme. Hagamos una recapitulación rápida. Estamos lidiando con una página web que vende alimentos saludables a mujeres de 25 años en adelante, la mayoría en sus teléfonos. Pero los que están usando la computadora mucho más que los que están usando sus teléfonos. De acuerdo, así que esa es la imagen. Ahora echemos un vistazo a la página web existente. Esta es la página de inicio. ¿ Es algo que atraiga a las mujeres? Recuerda, 80 por ciento mujeres, ¿verdad? Bueno, analicemos las cosas y veamos qué podemos encontrar y qué podemos mejorar. En base a eso, vamos a planear nuestro rediseño. Los bordes cuadrados, en primer lugar son un poco masculinos, ¿verdad? Esta línea gruesa oscura del menú de categorías también es afilada y masculina. El titular principal, bueno, este título es juguetón, pero es un poco demasiado grueso, un poco demasiado redondeado. Y creo que es más hacia los niños que hacia las mujeres. En cuanto al fondo, Es un tono bastante frío de gris. El formulario para la descripción. Bueno, es una fuente serif. No se ve mal, pero no veo que tampoco pueda considerarse atractivo para las mujeres. Entonces así como así, tenemos algunos puntos que seguir. Este diseño no parece estar hecho para las mujeres. En realidad es más hacia los hombres. Entonces hagamos una pausa por un momento. Puedes preguntar, Hey Chris, sabes qué, no tengo ni idea de cuál estás viendo un diseño femenino. Un diseño masculino. ¿ Cómo se lo puede decir? Está bien, Claro que sí. Déjenme aclarar eso. Abramos Google Images y busquemos desodorante para hombres. Y en otra pestaña, por favor abra desodorante para mujeres. La diferencia es de noche y de día. diseños que están hechos para hombre son duros, son fríos, tienen colores intensos, fuertes. Contraste máximo. Se cincelan las fuentes. Están bien definidos, Bolden, poderosos. Pero por otro lado, los diseños hechos para las mujeres son mucho más ligeros. A ver cuánto blanco hay. Los colores también son más suaves. Podemos ver colores pastel con colores muy lavados, nada que sea demasiado intenso. Tenemos formas fluidas, curvas. No vemos muchas líneas ni ángulos agudos. Vemos un gradiente de desvanecerse aquí. Y podríamos seguir y seguir sobre las diferencias. Es así como separas estos dos estilos de diseño, masculinos y femeninos. Volver a este sitio web específico. En el mejor de los casos, se podría decir que esto es neutral. No es para los hombres nada para las mujeres. De cualquier manera, este es un problema y es algo que tenemos que arreglar. Por último, los productos son bastante caros. Por eso, necesitamos incluir un poco de estilo y lujo al diseño. Tenemos que hacer que se sienta de lujo, bajo costo. No me malinterpreten. No es de gama alta, pero tampoco hay barato. Con eso en mente, podemos concluir lo siguiente. Se necesita un rediseño porque el sitio web no atrae al público objetivo, y eso son las mujeres en sus treinta años con poder de compra, tenemos que asegurarnos de que diseñamos algo que sea femenino y de lujo. Pero tenga en cuenta que no queremos excluir a los hombres. Entonces no haremos un sitio web que sea demasiado femenino. Eso también sería un error porque de nuevo, el tráfico es del 80 por ciento de mujeres. Seguro. Pero queremos que sea alrededor de 60 por ciento femenino, tal vez 70 por ciento a lo sumo. Entonces no exageraremos con banco y flores y demás porque el negocio quiere venderle también a los hombres. No quiere excluirlos. Pero lo mejor en general, la pregunta más importante respondida, ahora entendemos el objetivo de este negocio y cómo podemos abordarlo, cómo podemos ayudar al negocio. Al ser corto, no más bordes afilados, líneas gruesas o elementos fríos. Tenemos que hacerlo más amigable y más hacia las mujeres. Con eso entendido, podemos continuar. 11. Cómo investigar/encontrar inspiración para tu proyecto: Hola, hola y bienvenidos de nuevo. Sabemos que tenemos que rediseñar este sitio web para que se sienta más femenino y lujoso. El siguiente paso es encontrar inspiración. Para ver diseños que se ajusten a esa descripción. Encontrar inspiración consume mucho tiempo. Necesitas mirar 2050, 100 sitios web hasta que encuentres dos o tres que tengan sentido para tu proyecto. Ya seleccioné tres sitios web que nos pueden ayudar con nuestro rediseño. El primero es net up lo que adoptan com, no estoy seguro de que así sea como lo pronuncias, pero de todos modos, esta es una famosa tienda online que vende ropa muy cara. Si lo miras, no encontrarás nada DO demasiado femenino, ni nada que destaque en cuanto al diseño. En realidad es bastante simple y eso es intencional. Mata una pregunta. ¿ Quién compra un vestido de 2 mil dólares o los cien, diez cientos ricos localizados? Eso es bastante obvio. Pero entonces aquí está la siguiente pregunta. ¿ A qué acostumbran los ricos? ¿ Cómo se ven sus casas? ¿ Están oscuros y abarrotados? Conoce, hay mucha y mucha luz solar y espacio abierto. Están acostumbrados a electrodomésticos de acero inoxidable de mármol y granito y así sucesivamente. Es por ello que los sitios web de lujo tienen cierta apariencia. Estos son los pocos otros sitios web con ropa muy cara también. Todos se ven casi igual. Negro, gris y montones y montones de blanco. Fuentes simples, sin color del que hablar, excepto los propios productos. Puede que no te gusten estos sitios web. Y entiendo ese punto, pero así es como luce el lujo. Ahora pasemos a otro sitio web. Esta vez es algo de mi propio país y está relacionado con la alimentación. Estos tíos venden fantástico Eclair. Estas suites francesas son obviamente hermoso paseo. Pero mira el diseño. Mucho negro, mucho blanco en algún melocotón, rosa aquí y allá. Sólo un poquito de dolor. Se trata de un diseño sencillo sin demasiadas decoraciones. Los productos de las estrellas del espectáculo, sobresalen y lucen increíbles. Observe que tampoco hay mucho texto. Esa es una fuente de lujo aquí. No mucho de ella por cierto, pero se puede leer sin ningún problema. Y se ve muy bien en este fondo blanco puro. El último sitio web que me inspiró es Zyban.com. Me encanta lo limpio que es esto. En caso de que la ilustración sea genial, pero echa un vistazo al menú principal a las líneas horizontales con una opacidad baja. Un icono fresco para el área Logan que ayuda a que destaque como 4. Lo principal que tienes que hacer, es bastante obvio. Haga clic y, o tal vez éste obviamente, el color hace que destaque tanto porque todo lo demás es tan fácil a la vista. Bajando un poco, podemos ver lo mismo que con Revolución Francesa. Esto hace que el rectángulo blanco luzca fantástico. Absolutamente me encanta. Y la sombra suave aquí es excelente también. Destaca esta zona. Seguro que ilustraciones, también voy bien, pero no es algo que planeo usar. Por último, al final del diseño, el pie de página es blanco puro. Las fuentes son bonitas y pequeñas. Los títulos de se muestran en este precioso color. Es elegante, es de lujo, es femenino en general. Es hermoso. Ahora este cinco minutos para presentar. Pero pasé al menos una hora buscando estos sitios web. Por favor, no se apresure. Necesitas encontrar ese menos dos sitios web para inspiración, pero no más de cuatro o cinco. Así fue la conclusión aquí. Bueno, sé que voy a usar mucho blanco, un bonito color rosa para el fondo, algo muy suave, una fuente de lujo, pero en una dosis mínima, no demasiado. Hermosas fotos de producto como en Revolución Francesa. Y el color fuerte para los botones. Probablemente negro puro para el menú principal o cabecera. Un blanco simple o tal vez un negro simple más allá, todas las gorras con los menús principales o los botones. Estas son todas ideas. Puede que los haga todos, o tal vez sólo un puñado de ellos. Pero tengo un buen punto de partida. Esto es lo que te da la inspiración. Te da una dirección. No queremos copiar un diseño aunque encontráramos un sitio web que vendiera exactamente el mismo producto, no, no queremos robar un diseño. Pero usar negro puro, eso está totalmente bien. Usando un color rosa claro para el fondo. De nuevo, eso está totalmente bien. Eso no es robar. Tienes que asegurarte de hacer una clara separación entre la inspiración en robar algo. Pero otra vez, por favor no se apresure. Encuentra inspiración antes de llegar a trabajar. 12. Configura la parte más importante de la composición de la composición: Hola, hola. Empecemos en Adobe XD creando un nuevo proyecto web, 1920 por 1080. Por favor, ten en cuenta que habrá cambios muy a menudo. Se actualiza cada par de semanas. Entonces si tu interfaz es un poco diferente, por favor no te preocupes, aún puedes seguir adelante. Ahora, lo que quiero que hagas es hacer clic en este icono en la parte inferior izquierda que abre el panel de capas. Si no lo encuentras, también puedes usar el control de teclas rápidas Y. Entonces eso es Control Y, eso lo abre o cierra. De acuerdo, a continuación tenemos que configurar o área activa, la parte más importante de la disposición. El área activa es el lugar donde tenemos que sumar todo nuestro contenido. Siempre te recomiendo usar 1200 píxeles para eso. Bien. El rectángulo herramienta, el segundo de la lista, teclas de acceso rápido son o como en rectángulo, haga clic y arrastre cualquier forma del lado derecho. Este panel de propiedades nos dirá todo lo que necesitamos sobre cualquier capa que esté seleccionada. Entonces debido a que actualmente el rectángulo está seleccionado, tenemos todo tipo de información sobre su ancho, altura, color, etcétera. Todo en esta parte de la pantalla, lo queremos 1200 píxeles de ancho. Por lo que por favor haga clic aquí w para el ancho y escriba en ese número. la altura realmente no le importa tanto porque la cambiaremos más tarde. Siguiente cambia de color haciendo clic aquí al lado para llenar. Ahora mismo es blanco, así que es un poco difícil de ver. Mi consejo es que elijas cualquier tono de gris y cuando estés feliz, solo presiona la tecla Escape para cerrar este panel. De acuerdo, una cosa más con este rectángulo. Por favor, centralo horizontalmente. Esto se hace mediante el uso de este icono aquí. Y creo que el ícono en sí cuenta realmente bien la historia. Entonces si quieres mover la forma en la parte superior de la pantalla, usaríamos ésta. Cosas grises. Si queremos alinearlo a la izquierda, Es éste de aquí. Mi consejo, siéntete libre de jugar con ellos. Son fáciles de entender una vez que los pruebes. De acuerdo, lo volveré a centrar para que podamos configurar nuestra zona activa. Ahora por favor haga clic aquí y obtenga la herramienta Seleccionar o la herramienta Mover si vienes de Photoshop es la primera de la lista, la tecla de acceso rápido VI. Ok. Ahora por favor muévete al borde del lienzo y deberías ver este símbolo. Por favor, eche un vistazo al cursor, vea cambios pesados. Ahora haga clic y arrastre. A esto se le llama la guía, esta línea vertical. Esta es una guía y nos ayudará a posicionar todo correctamente. Arrástrelo para que toque el borde izquierdo de esta forma y luego arrastre otro desde un lado para el borde derecho. Ahora bien, puede haber una situación en la que no puedas hacerlo. Déjame mostrarte esa situación. Desactivaré mis guías para poder mostrarte cómo puedes arreglarlo. Entonces ahora mismo, no pasa nada cuando me muevo por esta parte, ¿verdad? Si este es el caso en su entonces por favor vaya al menú superior para ver. Desde aquí, ve a Guías y luego elige Mostrar todas las guías. Ahora cuando te mueves al borde, eres la curva para que el disparo cambie y puedes seguir adelante. Está bien, volvamos a ello. Esta es nuestra zona activa y es lo más importante en este diseño. Y aquí está el porqué. Todos los sitios web tienen cierta área activa donde se coloca todo el contenido. Por ejemplo, aquí está el New York Times. Se puede ver una línea muy bien definida a ambos lados. Y echemos un vistazo a otro, cnn.com, sólo un ejemplo aleatorio. De nuevo, encontrarás lo mismo. Hay una línea vertical clara a ambos lados. Para ser justos, en ambos casos, el área activa es más ancha de 1200 píxeles. Y eso se debe principalmente a que estos sitios web contienen mucha información. Pero mi consejo, te recomiendo encarecidamente que solo uses 1200 pixels. Y eso se debe a que la segunda resolución de pantalla más utilizada es de 1366 por 768. Y eso sólo significa que las personas en laptops que usan esa menor resolución pueden ver todo el contenido sin ningún problema. Si utilizas 1200 en la web, encontrarás sitios que son muy anchos, incluso 1600 píxeles de ancho, tal vez incluso más, o los muy estrechos, como 960. Pero de nuevo, mi consejo es que siempre usas 12.8 pixels. Lo que el área activa y 1924, el ancho total del lienzo. Y con eso, sigamos. 13. Crea la barra superior: Hola y bienvenidos de nuevo. El bar superior es la parte superior del diseño que se asienta justo encima del menú principal y el logotipo. No se encuentra en todos los sitios web, pero es una gran manera de mostrar un número de teléfono, algunos iconos de redes sociales, una dirección o el horario de ubicación. Antes de que tengamos trabajo, por favor haga esto. En primer lugar, mira el video sin trabajar. Basta con ver y ver qué está pasando. Cuando llegues al final del video, rebobina desde el principio, abre Adobe XD y trabaja conmigo haciendo una pausa con la frecuencia que necesites. Esta es la mejor manera de disfrutar del curso y sacarle el máximo provecho. Nuevamente, por favor vea el video 2 veces y trabaje conmigo en su segunda visualización. Muchísimas gracias. Entonces, empecemos por aumentar el ancho de este rectángulo a 1920 y centrarlo. Recuerda, necesitamos quedarnos dentro de estas dos guías, estas dos líneas verticales. Pero esto se aplica al contenido real con no ir a colocar nada importante fuera de estas guías. Entonces está bien tener un rectángulo tan amplio. A continuación, voy a hacer un poco de copiar pegado, dando algo de contenido de la antigua página web. Se puede utilizar la traducción automática de Google para comprender mejor el contenido. Simplemente haz una búsqueda rápida en Google o usa el texto que quieras. Mi consejo es que uses tres capas de textos diferentes. Entonces esto es bastante importante, tres diferentes. Ahora, sabemos que queremos usar un menú negro puro similar a esos sitios web de moda de gama alta. Pero la pregunta es, ¿usamos ese negro con la barra superior o el menú principal que se va a colocar debajo de este elemento. Para ayudar a decidir eso, tenemos que configurar nuestro dimensionamiento. Las barras superiores suelen ser muy pequeñas, en cualquier lugar desde 20 píxeles hasta unos 50. Entonces hagámoslo. Por favor seleccione el rectángulo y cambie su altura a 40. El siguiente paso es hacerlo negro puro y deshabilitar su borde gris. Esto se hace desmarcando esta casilla. De acuerdo, gran cosa para la capa de texto. Por lo menos hazlos blancos puros. El buen momento con él. No tienes que apresurarte. Cuando eso esté hecho. Por favor, selecciona los cuatro elementos arrastrando hacia fuera la caja grande como ésta. Asegúrate de tener la primera herramienta seleccionada en el panel de capas te dirá si las conseguiste todas. De acuerdo, finalmente los centraron verticalmente mediante el uso de este botón, alinear medio ag verticalmente. Me encantó el hotkey, es cambiarlos, pero por ahora, voy a usar este ícono. De acuerdo, hemos hecho un progreso decente, pero quiero que añadas algunos iconos para cada ítem. Encontrar grandes iconos en la web es en realidad un poco complicado por dos razones. Número 1, el mejor tipo de iconos no es gratis. Y eso es plano icon.com y eso requiere una suscripción. No es todo tan caro, pero no es que ella esté ahí. Siento decir que no hay sitio web similar que sea totalmente gratuito. Entonces esa es una parte del problema. El segundo tema es que hay que ser muy paciente a la hora de seleccionar iconos. En primer lugar, nunca debes mezclar iconos de diferentes conjuntos con diferentes estilos. Mi consejo es que te enfoques aquí en el lado izquierdo y elijas paquetes de este desplegable. Ahora busca redes sociales y verás montones de packs en todo tipo de estilos. Pero por favor ten en cuenta que algunos sólo tienen tal vez 16 iconos son esos pueden tener 48. Y ese es el problema porque si empiezas a combinar un icono de esta espalda con otro de esta bolsa, se va a quedar realmente mal, va a ser horrible. Entonces otra vez, por favor, por favor, no mezcles iconos de diferentes conjuntos cuando te guste un pack, pero no tiene todos los iconos que necesitas. Bueno, solo tienes que seguir buscando el otro pack que tenga todos tus iconos. En este caso, no quiero los de color porque el blanco se verá más elegante y refinado. Usaré este filtro desde el lado izquierdo para buscar el relleno negro como ons. Y aquí está la parte trasera que seleccioné. Después de buscar bastante tiempo, voy a descargar tres iconos como SVG mientras trabajo en segundo plano. Permítanme explicar lo que esto significa. Relleno en negro. Por lo que el negro se refiere al hecho de que no hay color en el ícono y que puedes cambiarlo tú mismo en Adobe XD a cualquier color. Por lo que no tiene que quedarse negro. Simplemente significa que no tiene ningún color aplicado a la misma. Lleno significa que es completamente sólido. Y eso es porque hay otro estilo llamado contorno, donde los iconos están hechos de un trazo o el borde con lo que quieres llamarlo. Estos tienden a verse un poco mejor, pero al tamaño muy pequeño, se ven borrosas. Entonces mi consejo es que nunca uses iconos de esquema para los tamaños muy pequeños, eso significa debajo de los Pexels. De acuerdo, ahora tengo todos los iconos descargados y luego este formato especial llamado SVG. Svg significa Formato Vectorial Escalable. que VJ es mucho mejor que PNG porque los iconos se verán geniales sin importar cómo los redimensiones. Puedes hacerlos tan grandes como quieras y seguirán siendo un gran. Otra ventaja como VJ permite cambiar el color así, ver lo fácil que es. Por eso siempre debes usar iconos SVG en Adobe XD. Encoders también lo amaba, así que todo está bien. De acuerdo, al cambiar el tamaño de los iconos, por favor haga lo siguiente. Número 1, selecciona las tres porque las queremos del mismo tamaño. Número dos, deshabilite esta función que se llama resize responsive. Entonces sólo apágalo. Por último tres, por favor haga clic aquí en este icono de candado, porque la barra superior es tan pequeña, solo 40 píxeles. Voy a hacer 26 estos iconos para el 2006. Eso es pequeño. Sí, pero estos iconos son muy conocidos por lo que la gente seguramente entenderá lo que son. Por favor, hazlos blancos y muévalos por encima de la barra superior. Mi consejo es que muevas los tres a la vez porque es más fácil trabajar de esa manera. De acuerdo, Por último, necesitamos trabajar con precisión. Mantenga presionada la tecla de control, utilice el desplazamiento del ratón y amplíelo. Haga clic en el icono de WhatsApp para seleccionarlo y arrástrelo cerca de la guía izquierda. ¿ Es así como lo pronuncias? Whatsapp. Whatsapp. De todos modos, asegúrate de que lo toque. Te sentirás como si un imán te estuviera dibujando. Eso es totalmente normal. Lo sentirás, cómo te empuja ahí. De acuerdo, a continuación, haga clic en la capa de texto y muévala 10 píxeles lejos del icono. Voy a acercarme de cerca para que veas aparecer la medición. Es este gran número de aquí. Queremos diez píxeles. De acuerdo, finalmente, arrastre una caja y seleccione los tres elementos. El rectángulo, el icono, y la capa de texto. Ahora los centraba verticalmente. Esto es lo que necesitamos hacer dos veces más. Voy a mantener el control y alejar un poco a través del desplazamiento de mi ratón. Asegúrate de que Instagram toque el lado derecho. Siempre puedes usar tus teclas de flecha en tu teclado para empujar cualquier capa por un píxel obviamente se asegurará de que esté seleccionada. Entonces píxeles aquí también. De acuerdo, una última vez con Facebook. Y luego tenemos una cosa más a un lado, el espacio entre Facebook e Instagram. Ahora bien, creo que la mejor manera de hacerlo son 40 píxeles. Pero aquí está la parte importante. Haga clic en la capa de texto para seleccionarla. Suficientemente simple, ¿verdad? Para seleccionar también el icono. Por favor mantenga pulsado Shift, haga clic en él, y ahí vamos. Tienes a ambos seleccionados al mismo tiempo. Deja 40 píxeles entre ellos. Y antes de que terminemos, por favor asegúrate de seleccionarlos todos, absolutamente cada uno, y centrarlos verticalmente. De acuerdo, este es un paso realmente importante, así que por favor no se lo salten. Cuando hayas terminado, por favor usa Control 1 o simplemente alejar manualmente y echa un vistazo a la barra superior. Buen trabajo. Estoy muy contenta con ello. Tomemos un breve descanso y luego seguiremos en tan solo un segundo. 14. Cómo elegir las fuentes para tu proyecto: Hola y bienvenidos de nuevo. La pregunta es, ¿cómo podemos elegir fuentes increíbles para nuestros diseños? Básicamente tenemos dos opciones principales, y eso es Google Fonts o Adobe fonts. La mayoría de la gente prefiere Google Fonts porque es muy fácil ponerse en marcha con él. Te mostraré rápidamente cómo puedes instalar una familia de fuentes. Haga clic en él, y luego tendrá este botón de descarga aquí mismo que le obtendrá un archivo zip que tiene que ser extraído. Encontrarás la carpeta que tiene uno o más archivos dependiendo del número de estilos que tenga la tipográfica. Por cierto, en caso de que solo tengas un estilo, probablemente deberías evitarlo. Mi consejo es que descargues fuentes que tengan al menos tres estilos diferentes. Y por estilos me refiero a luz, regular, audaz, cursiva y así sucesivamente. De acuerdo, una vez que se extraiga el archivo, simplemente copia pega estos archivos en fuentes C Windows con la segunda, y luego podrás usarlos en Adobe XD. En un Mac, puede hacer doble clic en los archivos y cabecera de la fuente de instalación. Una vez hecho eso, solo recuerda su nombre para que puedas buscarlo en Adobe XD. Entonces un corto, eso son fuentes de Google, pero también hay fuentes de Adobe. Elige Browse Fonts, y obtendrás un diseño muy similar a lo que acabamos de ver en Google. Tienes todo tipo de filtros. Puedes cambiar las etiquetas de muestra, pero también su tamaño, su matriz agraciada aquí, solo asegúrate de que realmente te tomas el tiempo para explorarlo. Ahora, la mayor diferencia es que Adobe Fonts requiere una suscripción de Adobe válida. Tengo una membresía de Creative Cloud, así que obtengo acceso a todas estas fuentes. Cuando quiero usar uno, simplemente hago clic en él y dentro de su página, voy a darnos cuáles fuentes activadas. Podrías desplazarte hacia abajo y activar ciertos estilos. Pero la mayoría de las veces los quiero a todos. Pero Google Fonts y fuentes de Adobe. Esa no es realmente la parte importante, niños, que debes considerar a la hora de elegir un tipo de letra para tu próximo proyecto. Volvamos a Google por un segundo. lo que su lista está ordenada por las más populares, las tipografías más populares en este momento, roboto siempre está en la parte superior, pero ¿es una buena opción para tu proyecto? Y voy a decir que no. Pero, ¿qué pasa con Open Sans? De nuevo, no creo que sea tan tarde. Oh, no. Entonces, ¿por qué es eso? Y la respuesta es porque tienen la culpa de los dos simples. Estas tipografías son muy populares porque son versátiles. Se pueden utilizar en cualquier proyecto, sin importar el tema. Son como una camiseta blanca, sencilla, básica, nada especial. A mí me gusta mirarlo así. Estas opciones son muy similares a Arial. Entonces cucharón, Roboto, Open Sans, son muy similares a Platón. Como probablemente sabrás. Ariel es, de nuevo, simple, estándar, y aburrido. La mayoría de los no diseñadores no podrán distinguir la diferencia entre aérea y Leto o Open Sans. De nuevo, no estoy hablando de diseñadores, claro, estoy hablando del cliente o de los visitantes del sitio web. Entonces mi consejo es que te mantengas alejado de este tipo de fuentes que son aburridas y no tienen personalidad alguna. Por otro lado, tampoco busques fuentes extremas. Por ejemplo, este es un caso claro. Tiene demasiada personalidad. Django, no quieres ese derecho. Leto es una camiseta llana, entonces Django es camiseta de neón, ¿verdad? Todo el mundo sabrá esto, pero no mucha gente realmente aprecia las camisetas de neón, ¿verdad? Por lo que tu trabajo como diseñador es encontrar el medio feliz, una tipográfica que atrapa genial, que tenga al menos tres estilos. Eso es equilibrado. Significa que no es aburrido, pero tampoco es demasiado extremo. Y obviamente, esto de nuevo, lleva tiempo. Encontrar la tipografía correcta lleva tiempo. No se apresure. Date tiempo suficiente para jugar con diversas opciones. Ahora, a mi lado, personalmente, Montserrat fue uno de mis rojos de paga. Pero también es un vínculo muy amplio. Ocupa mucho espacio. Entonces no es por cada proyecto. Oswald es demasiado masculino, pero también está un poco condensado. Se juntan las letras, entonces, así que es mejor que se use en títulos, pero nada más. De nuevo, mi consejo es que empieces con un tipo de letra, cualquier cosa que quieras, y luego después de terminar la página de inicio, puedes probar las palabras. Pero con todo, no te pongas mucha presión. No tienes que hacer la elección perfecta desde el principio. Siempre puedes cambiar de opinión. Además, te contaré mi secreto como diseñador web. Me encantan ciertas fuentes y las uso una y otra vez para un montón de proyectos. Solía usar bastante Montserrat, pero después del tiempo cambié a otra llamada arenas movedizas. Hace poco me he enamorado de Poppins, y eso es lo que uso para casi todos los proyectos. Ahora, solo para que quede claro, obviamente deberías elegir tu tipo de letra dependiendo de las necesidades de los proyectos, pero no creas que necesitas idear algo especial para cada trabajo. Asegúrate de que el tipo de cara tenga sentido. Nuevamente, si es un sitio web amigable que está hecho para niños, necesitas sin embargo, por ejemplo, podría ser una gran opción, pero un Roboto Condensed no lo será. Y eso es porque es demasiado grave. Si se trata de un sitio web de noticias, no se puede usar Django porque es demasiado divertido y los sitios web de noticias deben ser sobrios y profesionales. Por lo que la comida para llevar es que necesitas probar diferentes tipos de letra después de las páginas de inicio hechas y elegir la que mejor se vea. Por ahora para este proyecto, confío en que voy a ir con Poppins para la mayoría de las capas de texto. De nuevo, ¿por qué Poppins? Porque es muy similar a lo que están usando esos sitios web de pasión. Y creo que encaja con la descripción. Es un poco masculino, sobre todo en todas las gorras, pero podemos equilibrarlo con algunos colores suaves y algunas formas redondeadas. Y porque son la página web de Eclair tenía una fuente de lujo para el título. Decidí buscar el de Adobe Fonts. Y después de bastante tiempo, este es el que elegí se llama guión principal del mercado EDS. Un poco extraño. Y es encantador porque es elegante, pero aún lo puedes leer. Está rebajado, pero no es pretencioso. Entonces en general, creo que esta es una gran apuesta. Tomemos un descanso rápido. Pero recuerda, cuando hagas tu propia versión, prueba tus propias tipografías. Por ahora, solo usa los que elegí para la réplica perfecta. 15. Cómo elegir colores hermosos: Hey allá, hablaremos de color y cómo debes trabajar con él un poco más tarde en el curso, en la parte de principios. Pero quiero darte algunos consejos desde el principio utilizando nuestro proyecto como guía. Sabemos que queremos un poco de negro en nuestro diseño, por lo que se verá elegante que de lujo, como esos sitios web de moda, ¿verdad? Pero, ¿qué más hay? Bueno, tenemos que considerar los colores de las marcas en primer lugar, eso es absolutamente esencial. Podemos ver que en todas las etiquetas y en la página web existente, podemos encontrar naranja, azul oscuro, y un poco de amarillo en dosis muy pequeñas. Por eso, seguramente usaremos algunos de ellos, ¿verdad? No podemos usar morado o verde porque no encajaría con el logo, las etiquetas y todos los demás diseños. Piénsalo. Es probable que la empresa tenga pancartas, volantes, tarjetas de visita, folletos y demás. Tienes que tener eso en cuenta. Volviendo a presentar esos botones rojos, luce tan bien con todo ese blanco. Entonces mi idea es usar lo mismo, pero con naranja. Y para que el diseño se sienta un poco más femenino, digo que deberíamos usar un rosa muy claro. Podemos copiar esa cosa de zip it. Y creo que eso está totalmente bien siempre y cuando no copiemos nada más, sobre todo un elemento mayor. Ahora para obtener un código de color, Hay dos formas de hacerlo. Puedes tomar una pantalla de impresión y arrastrarla a Adobe XD. Una vez que tengas el archivo ahí, puedes usar la herramienta cuentagotas solo ella. Por lo que el cuentagotas de ojos es muy estándar. Esa es una forma de trabajar, pero prefiero la otra, que es un poco más complicada, pero creo que tiene un gran alcista. Para hacer el elemento inspeccionar. Podemos obtener el código de color exacto. Entonces déjame ir a mi navegador y haré clic derecho sobre el fondo rosa. Esta parte va a aparecer y deberíamos ver el color de fondo aquí. Y efectivamente aquí eso es su Fc, F8, F7. No hay necesidad de recordarlo porque podemos simplemente copiar pegar eso. Ahora, esto es lo que quiero que hagas. Por favor, aleje de nuevo, mantenga presionada la tecla Control y utilice el desplazamiento del ratón. O como alternativa, puedes usar la herramienta de zoom aquí mismo. Por defecto, está configurado para acercar y puedes decir los osos el caso mirando este símbolo más. Pero si mantienes pulsada la tecla Alt u Opción en el Mac, ahora te alejarás. Escucha, lo que más importa es que vuelvas a la herramienta Seleccionar. Esa es una de las cosas más importantes en Adobe XD. Siempre que utilices, entonces vuelve a la herramienta Seleccionar, ¿verdad? Así que haga clic en el nombre de los cuadros de mando, que probablemente se llama algo así como web 1920 dash one. Y desde aquí verás que tienes una opción de relleno en el lado derecho. Haga clic en él y luego podrá pegar el código de color. De nuevo, eso es FC, F8, F7. Pero esto sólo funcionará si tienes seleccionado el tablero de arte. Si anulo la selección, nota que no hay opción para agregar ningún color. De acuerdo, así que hagamos una recapitulación rápida. Usaremos montones de blanco porque a eso se ha acostumbrado la gente rica, y hará que el sitio web se vea más bonito. Usaremos un poco de negro para esa sensación de lujo, para esa sensación de lujo. naranja será el color de acción, y lo usaremos en pequeños elementos como botones e iconos. Un rosa muy claro para el fondo principal, por lo que se verá femenino. Y si es necesario, tal vez un tono oscuro de azul. De acuerdo, Ahora antes de que terminemos, quiero mostrarles una gran manera de trabajar en Adobe XD. Hasta el momento hemos utilizado el panel de capas del lado izquierdo, pero la mayoría de las veces realmente usaremos el panel de activos. Esto está disponible aquí en la parte inferior izquierda de la pantalla, justo encima del panel de capas. Al hacer clic en él, no sólo es azul, sino que verás que dice Activos de documentos en la parte superior. Entonces así es como lo sabes. Esto está activo. Activos sólo significa recursos. Esto es lo que quiero que hagas. Haga clic en cualquier capa de texto. Quiero que cambiemos este color a ese naranja de la página web existente. El código de color es FF Tres ver 0000. Y en realidad lo sé de memoria porque es mi empresa y diseñé muchas cosas con este código de color. Golpea Enter o Escape para cerrarlo. A continuación viene la magia. Ya tenemos tres colores aquí, negro, naranja, y rosa, ¿verdad? Vamos a guardarlos haciendo clic aquí en este símbolo más junto a los colores. Podríamos hacer esto de uno a la vez, seleccionar la capa de texto, hacer clic en el símbolo más, y ahí tienes. Pero quiero hacer todos los colores en un solo clic. Por eso usaré deshacer control Z. Ok, entonces a continuación seleccionaré la mesa de trabajo dando click aquí. Ahora usa el símbolo más y obtenemos cuatro colores. Blanco puro, ese naranja fuerte, negro puro, y ese banco de melocotón. Hermosa. Ahora bien, ¿por qué es útil esto? Porque podemos seleccionar la capa de texto, hacer click en blanco, y eso va a cambiar rápidamente. No más ir a la opción de relleno en la parte inferior derecha. Por lo que esto es básicamente mucho más rápido y funciona con múltiples capas. Entonces esto va a hacer que nuestras vidas sean mucho más fáciles. Pruébalo y ve cómo te va. Pero recuerda, también puedes agregar colores uno a uno o todos a la vez solo seleccionando el tablero de arte. Y si quieres eliminar alguno de ellos, solo tienes que hacer clic derecho y tendrás esa opción. De acuerdo, pruébalo entonces. Te veré en un segundo. 16. Organizar la barra superior: Hey ahi, bienvenido de nuevo, un resumen rápido. Entonces decidimos por nuestro esquema de color, lo correcto para el fondo, montones de blanco, un poco de orina negra ahí, y naranja para nuestros botones también. El tipo de letra, Poppins será la elección principal más un guión de fantasía para el título principal. Para envolver el elemento anterior, seleccione todas las capas de texto. Esto se hace mediante la celebración del turno. Usa el campo en el panel Propiedades y empieza a escribir Poppins. No tienes que escribir todo porque XD te dará sugerencias a medida que escribas. Mantenlo regular 12 pixeles, que es un poco pequeño, lo sé. Y si ese modelo eres tú, 13 también funcionará. A continuación, seleccionaré todo y los voy a centrar una vez más. Y haré cualquier unión de puntos potenciales si acaso hay algo que necesito hacer aquí. Nada importante, solo asegurarme de que todo esté a punto. ¿ De acuerdo? Cuando todo esté hecho, por favor seleccione todas las capas y utilice Control G para agruparlas. Entonces eso es Control G. Vuelve al panel de capas para ver esa carpeta. Por si acaso no te gustan las teclas rápidas. Déjame hacer clic derecho y desagrupar. Entonces así es como debería verse tu panel de capas. Para organizar estas capas en una carpeta. Seleccione todos ellos, luego haga clic con el botón derecho en esta lista, elija grupo. Y eso es todo. Tenga en cuenta que debido a que crea un grupo, el método de selección ahora es diferente. Por lo que si quieres seleccionar una de estas capas de textos, simplemente puedes hacer click sobre ellas. No, eso no va a funcionar porque vas a seleccionar la carpeta. Entonces lo que tienes que hacer es lo que te mostré al inicio del curso. Tienes que controlar click. Y ahora tienes esa capa seleccionada. Entonces otra vez, cuando algo se agrupa y quieres seleccionar eso, mi consejo es que controlas click. Y si controlas haz click en icono por ejemplo, y eliges solo una pequeña parte del mismo. Por ejemplo, en el ícono de Instagram, se puede ver que seleccioné solo la parte central de misma o pequeña parte de ella, solo golpeé Escape. Y ahora puedes mover a todo el Dang. Mientras recuerdes tres cosas, estarás genial. Así que el número 1, arrastre de control para seleccionar. Número 2, se había escapado para subir un nivel. Y usamos Control Z cuando cometes un error. Y ahora la barra superior está todo configurada y podemos continuar con la cabeza ahí, que es el área que sostiene el logo, el menú principal y así sucesivamente. Te veré en un segundo. 17. Crea la estructura para el encabezado: Pongamos a trabajar en el encabezado. Empieza con cualquier rectángulo aleatorio y no te preocupes por el tamaño porque usaremos el panel de propiedades. Ahora por el ancho. Sabemos que debería ser 1920 porque los lienzos con ahora, ¿ podrías probar 1200? Seguro. Pero el 99 por ciento de las veces eso no se verá tan bien. Más amplio suele ser mejor en diseño web. Para la altura, sabemos que la barra superior tiene 40 píxeles de altura. Los encabezados suelen tener entre 50 y 150 píxeles de altura, dependiendo de la cantidad de información que desee incluir. Aquí, no tenemos mucho, por lo que podemos apegarnos a un valor más bajo. Sugiero AD duplicar el tamaño de la barra superior. Al duplicarlo, se verá un poco más bonito. De acuerdo, Por favor, tráelo junto al encabezado y céntrelo horizontalmente. Si aún no lo has hecho, desactiva el trazo y empecemos a sumar los elementos. Tienes el logotipo adjunto, por cierto, está en formato PNG para que puedas arrastrarlo. Y cuando eso suceda, por favor no lo dejes caer por encima del rectángulo blanco. Si haces eso, esto es lo que va a pasar y eso obviamente no está bien. Así que arrástrelo en cualquier otro lugar del lienzo. Como alternativa, también tienes el vector, el archivo que tienes que abrir con Control O. Eso se verá un poco mejor. Sería más bonito, más crujiente, menos difuso. Pero obviamente requerirá un poco más de trabajo. Entonces si eso es demasiado complicado, solo usa el PNG al redimensionar inactivo para mantener presionada la tecla Mayús o mejor aún, tenía el icono de candado desde el panel Propiedades. En cuanto a tamaño, más pequeño suele ser mejor. La mayoría de los principiantes usan tamaños enormes porque piensan que eso mejorará el diseño, que hará que se vea mejor, pero eso en realidad hace lo contrario. Nuevamente, más pequeño es mejor que el diseño web porque se ve más elegante que refinado. Aquí, un ancho de unos 150 píxeles debería estar bien. Y ahora las guías comenzarán a mostrar ese valor. Tenemos que dejar la línea esto por supuesto. Y tenemos que centrarnos verticalmente en, con ángulo directo. Vamos a hacer esto todo el tiempo. Por lo tanto, por favor, haga lo posible para acostumbrarse a estas herramientas. Son absolutamente esenciales. De acuerdo, Siguiente tendremos que hacer algún trabajo manual. Voy a copiar pegar el menú principal, pero por favor ten en cuenta que cuando los agregues en XD, podrías obtenerlos en una lista vertical de tipos. Eso no es un problema. Simplemente usa el retroceso, borra las teclas para alinearlas rápidamente. Mi consejo es que te pegues a una sola capa de texto 0. Y si utilizas Google Translate, por favor soluciona cualquier problema. Por ejemplo, en lugar de casa como elemento de menú principal, Google Translate me dio el hogar. Así que por favor asegúrate de tener cuidado con este tipo de errores, aunque el inglés no sea tu primer idioma, consulta otros sitios web y estarás bien porque de nuevo, el hogar no tiene sentido. Ahora lo grande aquí es intentar trabajar lo más rápido que puedas. Por supuesto, a medida que pasa el tiempo, cuanto más trabajes, más rápido te volverás. Está bien, bien. Deberías terminar con una capa de texto como esta, pero la distancia entre los elementos no está bien. Entonces esto es lo que te sugiero que hagas. Amplíe si es necesario y haga doble clic para editar la capa de texto. Entre los dos primeros ítems golpearon la tecla Barra espaciadora un montón de veces. No tienes que contar porque esto es lo que va a pasar a continuación. Selecciona el espacio vacío que acabas de poner y cópielo con Control C. Ahora pasa al siguiente hueco y pegarlo con Control V. Repita el proceso hasta que termines. Es así como me gusta configurar mis menús principales en Adobe XD, que nunca sabes realmente cuántos espacios vacíos dejar hasta que veas tu primer intento aquí. Bueno, en realidad no estoy contento con ello, así que creo que sumaré dos espacios más por cada brecha. Esta vez voy a contar porque no quiero volver a copiar pegar, solo dos pestañas por cada par, y estaremos bien para ir. Ahora antes de tomarnos un descanso, Aquí hay un último truco. Digamos que se quiere contar el número de espacios vacíos, ¿no? Tan solo para volver a comprobar, empieza por entrar en modo de edición. Ver el cursor. De acuerdo, Está justo aquí junto a la E. Ahora mantén pulsado Shift y pulsa la tecla de flecha derecha y cuenta cada DAP. Es 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Entonces eso son 10 espacios vacíos. Eso es lo que creo que se ve bien en este caso. Golpea Escape si aún no lo has hecho o haz clic en cualquier otro lugar para salir del modo edición. De acuerdo, dos artículos más aquí, inicia sesión y regístrate. Estos deben colocarse en el lado derecho en dos capas de texto separadas. Eso se debe a que debemos tratarlos de manera diferente. Más sobre eso en un segundo. De acuerdo, Esto termina esta conferencia. Tenemos algunas cosas más que manejar, pero al menos tenemos nuestros elementos en su lugar. Mantente atentos. 18. Conde un estilo para el encabezado: Hola, hola. Empecemos a darle estilo a nuestro diseño, pero déjame mostrarte una cosa rápida. Digamos que el menú no está por encima del rectángulo blanco como lo tenemos aquí. Diga que está mucho más abajo, ¿verdad? Ya sabes, quieres usar el comando Alineación para centrar todo. Pero esto es lo que va a pasar. El rectángulo también se moverá. Esto es a lo que tienes que acostumbrarte. El rectángulo se moverá y no hay manera de evitar eso. Lo que tienes que hacer es ahora moverlo de nuevo a su lugar. Y si quieres asegurarte de que no lo muevas hacia los lados por error, solo tienes que mantener presionada la tecla Mayús. Déjame mostrarte eso otra vez. Guardar. Queremos mover el ítem registrado más hacia la derecha. Está bien. Si no tenemos cuidado, podríamos moverlo hacia arriba o hacia abajo y eso obviamente no está bien. Podríamos acercarnos potencialmente y prestarle mucha atención. Pero esto es lo que propongo. Presiona la tecla Mayús. Observe cómo sólo se está moviendo horizontalmente. Y así se puede trabajar rápido, pero con precisión. Está bien, volvamos a ello. En cuanto a estilo, la mayoría de los sitios web de moda usan todas las gorras para el menú principal. Sugiero que hagamos lo mismo. Así que selecciona las tres capas de textos y usa esta opción aquí. Y ahí tienes. A continuación, queremos un poco de peso demasiado húmedo por lo que nos llamará la atención. Regular no está realmente bien, así que aquí está mi consejo. Hagámoslo audaz. Ahora, esto se ve mucho mejor, pero es un poco demasiado pequeño para mis días. Ahora esto es objetivo, pero esto es lo que propongo. Aumentemos el tamaño a 13 píxeles. Cuando hagas tu propia versión, asegúrate de cambiar el tamaño según el aspecto de la fuente. Debe elegir una tipografía diferente. Y eso se debe a que en algunos casos, 13 píxeles, puede ser realmente pequeño. En otros casos, son decano puede ser súper grande, sobre todo cuando habilitas todas las gorras. Por lo que realmente tienes que asegurarte de que el tamaño sea apropiado para esa fuente específica. A continuación, agarra la herramienta de rectángulo y dibuja una forma aleatoria por encima de la capa de registro. Pueden mirar el panel de capas y verás que es probable que el rectángulo esté en la parte superior del panel. Ahora, esto significa que va a cubrir el texto. Podríamos arrastrarlo hacia abajo así. Pero déjame deshacer el control Z para mostrarte cómo trabajo realmente. Me gusta mantener presionada la tecla Control y usar las teclas de corchete de mi teclado. El izquierdo mueve la capa hacia abajo. Al igual que eso. Como puedes ver, sigue bajando. Y la llave de corchete derecha de control lo mueve hacia arriba. Ahora, sé que puede que no te encanten las teclas rápidas, pero la mayoría de las veces tendremos el panel de activos a la izquierda. Y en este punto en el tiempo, Adobe XD no permite tener ambos a la vez. Sé que no es genial, pero tal vez en el futuro conseguiremos ambos paneles al mismo tiempo. Está bien. Volver a la pestaña de activos. Haré clic en el color naranja y me aseguraré de que la forma esté debajo del texto. De acuerdo, Necesitamos desactivar el borde y una vez hecho eso, por favor haga amplia esa capa de texto. Por eso me gusta el hábito en mi panel de activos. En realidad es bastante útil con no ir a tener unos bordes cuadrados. Queremos el diseño femenino. Entonces hagámoslo por el ancho y la altura vayan con un AD por 40, 180. Por lo que tenemos un poco de espacio vacío a ambos lados. Y eso es exactamente lo que debes hacer en cada caso. Y 40, porque la carga agarra tu atención tal como es. No necesitamos hacerlo demasiado grande. Ahora de nuevo, a continuación, redondea sus esquinas mediante el uso de este campo en el panel de propiedades, derecha, 20. Y eso lo hará bonito y redondeado. De acuerdo, por favor seleccione el texto junto con la oveja y los EU, los comandos de alineación. Cuando estés listo, por favor muévelo hacia el lado derecho. Nuevamente, los comandos de alineación son increíblemente útiles, así que por favor haz un hábito al usarlos. De acuerdo, Cuando lo muevas hacia el lado derecho, debes sentirlo chasquido a la guía. Por favor, no dejes uno o dos píxeles vacíos. Eso sería una verdadera vergüenza. Por último, seleccione todos los elementos del encabezado y utilice el comando align middle. De acuerdo, gran palabra. En lo que va de momento. A medida que pasa el tiempo, empezarás a conseguir más y más para usar estas técnicas. Por ejemplo, cambie la posición de la capa de texto de inicio de sesión manteniendo presionado el lugar de la tecla Mayús a 30 píxeles desde el botón de registro. Entonces eso son 30 píxeles. En este lugar, Zyban tenía el precioso icono que mostraba la importancia del elemento. Ahora, detengo la grabación y encontré una en plano icon.com. Aquí está. Como siempre, haz las cosas cuando cambies el tamaño, deshabilitas este interruptor y luego haz clic en el candado. En cuanto al tamaño, los iconos de arriba, somos 26 píxeles. Entonces usemos el mismo valor aquí. Ahora bien, la altura no es perfecta, pero eso está totalmente bien. Si tenemos 30 píxeles entre estos dos se necesitarán, entonces píxeles entre el icono y la capa de texto. ¿ Por qué diez píxeles? Porque tenemos que demostrar que van juntos. Esto es algo bastante sutil, pero es importante. ¿ De acuerdo? Ahora para la distancia entre el menú principal y el inicio de sesión, 30 veces 2 es 60. Entonces vamos con eso. No tengas miedo de tocar las teclas de flecha de tu teclado una vez que veas el valor actual, sobre todo cuando quieras fusionar, unirlas por 12 píxeles. Y con eso, tomemos un descanso rápido. 19. Atención a los detalles en el encabezado: Bienvenido de nuevo a nuestro diseño. Se podría pensar que todo esto está ordenado, pero quiero abordar dos cosas que son bastante sutiles pero importantes. En primer lugar, el tono de fondo de rosa, es bonito, ¿verdad? Pero, ¿proporciona suficiente contraste? Dicho de lo contrario, ¿destacan lo suficiente estos rectángulos blancos? Creo que ese no es el caso. Entonces tenemos que hacer algo. En la carrera de cualquier diseñador, estás obligado a tener este tema. Y básicamente tienes tres opciones. Número uno, puedes elegir un tono más oscuro de rosa. El problema con eso es que ya no es un color de fondo suave. Empieza a llamar tu atención y eso no está bien. Se llama fondo por una razón. Si miras el diseño existente, verás un tono de gris que es un poco demasiado fuerte y por eso el diseño campos fríos. Entonces esa es la opción número 1, aumentar el contraste cambiando el color. La segunda opción es agregar la sombra de gota. Esto se habilita desde este lugar en el panel de propiedades. Cuando añadas la sombra, asegúrate de que sea realmente suave. Puedes ajustar la opacidad haciendo clic aquí. Prueba un valor bajo, como 10 por ciento, pero desselecciona para que realmente puedas ver cómo se ve. Ahora la pregunta es, ¿es agradable? El caso es que si usamos una sombra aquí, habrá que usarla en todas partes en cada rectángulo blanco. Es por eso que estamos gastando tanto tiempo en ello. No es una sola decisión para el único punto. En realidad, establecerá el estilo para todo el diseño. Entonces piénsalo de verdad. Por último, aquí está la tercera y última opción. Abortar el. En este caso, me gusta probar el color de fondo y luego buscar el tono ligeramente más oscuro. Considerando que queremos el diseño agradable, elegante. La primera opción, un fondo más oscuro. Básicamente es por la ventana. No podemos hacer eso. Entonces es entre el número 2, una sombra, que es lo que zip está usando, y el número tres, un trazo. Voy a ir con la última opción. Y después de la, mucha afinación fina, terminé con el siguiente código de color. Tiene que ser realmente suave. Es F5, aunque fácil, dB. Es sutil, pero todavía se puede ver que está ahí. Por favor, agréguelo al panel Activos utilizando este símbolo más. Ahora, podríamos haber usado la sombra de gris. Pero por qué no permanecer en esta región rosada está más en sintonía con los colores que ya estamos usando. De acuerdo, este fue el primer elemento de mi lista en cuanto a atención al detalle. Fue un tema importante porque nos dará una dirección, un estilo que podemos seguir para el resto del proyecto. El segundo tema que quiero discutir es sobre lo mismo. Tenemos que hablar del menú principal. Y establece, como probablemente sabrás, mayoría de los menús te muestran dónde estás. En este caso, estamos en la página de inicio, pero como el menú es todo negro, no es obvio. Algunos sitios web usan un color lavado, como un gris claro para mostrar que estás ahí. Y si bien soy un gran fan de eso en este caso, creo que me voy a ir con naranja. Esto tiene implicaciones importantes porque la siguiente pregunta es, cuando se pasa el cursor sobre el elemento del menú, ¿de qué color será? Naranja otra vez, tal vez otro color. Entonces eso es algo que tenemos que decidir. No tenemos que hacer eso ahora mismo, pero es algo a tener en cuenta en este momento. Permítanme agregar un rectángulo debajo del elemento de inicio que además dice que aquí es donde estamos. Creo que 90 píxeles es lo suficientemente ancho, así que no entra en el siguiente elemento del menú. Altura, tres píxeles, creo que eso está totalmente bien. Por favor, ten en cuenta que para las líneas, no utilizamos el campo de altura. En cambio usamos este aquí un poco más abajo. Y eso es porque está alineado por lo que no tiene relleno. Entonces si haces clic en naranja en el panel Activos, no va a pasar nada. Eso es intencional. Eso es correcto. En cambio, lo que tienes que hacer es hacer clic derecho y luego elegir Aplicar color de borde. Ahora, ahí está la pregunta, ¿cómo enviamos el rojo con casa? Teniendo en cuenta que se trata de una sola capa de texto Eso es realmente amplio. Bueno, aquí está el trabajo más fácil. el acercamiento real y añade el rectángulo que es tan ancho como esta palabra. Esto obviamente está centrado. Ahora agarra la herramienta de línea y usa el comando Alineación. Hay una buena probabilidad de que ambos se muevan, pero hay otro problema, solo reposicionarlo, y eso es todo. Está bien, cosas geniales. Cuando termines, solo borra el rectángulo y estoy feliz antes de terminar esta lección, quiero mostrarte un bug. Podría arreglarse en la próxima actualización de Adobe XD, pero creo que deberías saberlo y que no es tu culpa, no estás haciendo nada malo. Por ejemplo, vamos a seleccionar la última palabra de este blog de capas. Digamos que queremos hacerlo naranja, vale, no es un problema, vamos a dar click aquí y así ese derecho. Ahora mira lo que pasa. No importa si haces clic en cualquier otro lugar o si pulsas la tecla Escape, no pasa nada. Ni siquiera se puede acercar o alejar. Es como si el programa se congela. El único modo de arreglarlo es seleccionar otro mundo haciendo clic aquí. Ahora todo vuelve a la normalidad. Es un bicho extraño, pero quería que supieras que no es tu culpa en caso de que esto te pase. Y con eso, tomemos un breve descanso. 20. Construir un gran área de héroes: Hola y bienvenidos de nuevo. El área de héroes es esa parte del diseño que se supone que llamará tu atención y te mantendrá en la página web. Debe ser simple pero llamativo y memorable. Cómo manejas el escondite. Sí, nos gusta hacer brillar el proyecto o caerá plano. Déjame empezar a copiar y pegar el contenido de la antigua página web. El titular se traduce vagamente en algo como si no fuera un desierto. Es el desayuno perfecto aunque cambiamos constantemente. Por lo que debes tener eso en cuenta. La descripción debe colocarse en tres líneas. Ahora bien, mientras centré todo y hago algunas ediciones aquí y allá, he aquí por qué el texto es tan importante. El título principal se va a mostrar en ese tipo de letra de guión, mercado principal de EDS, ese era su nombre. Por favor sea generoso con el tamaño. Estoy pensando 50 píxeles más o menos. Si no encuentras esa tipográfica exacta, busca una alternativa. Ahora, la idea detrás de este título es que el producto parece un desierto, pero esto en realidad es un reemplazo de comida. Se supone que debes comer un frasco de 300 gramos y eso es todo, nada más. Entonces esto es clave porque como desierto, esto es caro y es demasiado producto, 300 gramos, ¿verdad? Pero como comida principal, esto tiene sentido tanto en cuanto a empaquetar su peso, pero también en cuanto a precio. En cuanto a la descripción, esto te dice un poco más sobre el negocio. Sin azúcar, sin productos de plástico hechos a mano, entrega rápida y así sucesivamente. Estos se llaman USP, puntos de venta únicos. Usb. Es lo que nos diferencia de otras empresas. No uses textos como este. El diseño no se va a quedar tan bonito. Ahora lo que hacen la mayoría de los principiantes es usar Lorem Ipsum, que también se conoce como texto ficticio con texto falso o textos latinos. Ahora, si haces eso, el cliente, obviamente no estará tan emocionado cuando le muestres tu trabajo. Es cierto que llegar a este tipo de texto es en realidad bastante difícil. Es por ello que las empresas contratan redactores. Copiar simplemente significa escritores de texto. Esos escriben el texto. Entonces copiadores, por favor no confundan a los redactores con los derechos de autor, que es algo totalmente diferente. Pero volviendo al grano, siempre es mejor tener texto real en tu área de héroes, copia real. Si el cliente no tiene nada que puedas usar, por favor toma algo de uno de sus principales competidores, solo tráelo. Por supuesto, tendrás que decirle al cliente que tomaste ese texto de otro sitio web y que tiene que llegar a algo original. Pero es muy importante que no uses Lorem Ipsum, cuatro partes clave de tu diseño. Imagina el sitio web de Nike, pero en lugar de solo hacerlo, dice Lorem ipsum dolor obviamente simplemente no tiene el mismo impacto, ¿verdad? Está bien. Ahora para las distancias, deja 25 píxeles entre el título y la cabeza ahí. Y luego pixeles entre estas dos capas de textos. Oh, casi lo olvido. Por favor seleccione todas las capas del encabezado y agruparlas con control G. Puede habilitar el panel de capas para comprobar que todo está bien. A partir de ahora, deberías tener dos carpetas y dos capas de texto del área de héroes. Por cierto, déjame decirte otra cosa. Me gustaría dejar más espacio vacío aquí, no sólo 25, pero siempre hay que pensar en el objetivo de la página fue el objetivo. Aquí, el sitio web quiere vender sus productos. Es por ello que es importante que mostráramos los productos tanto como sea posible en lo más alto posible. Entonces esto significa que no podemos estirar esta parte con otras cosas como un video o más textos de ilustraciones. La mayoría de los visitantes querrán ver los productos sin desplazarse. Eso también quiere el negocio. Esperemos que uno de estos productos te llame la atención y hagas click en él. Una foto del producto real es mucho mejor que cualquier capa de texto, no importa cómo lo peines. Entonces por eso tenemos que mantener todo lo más compacto posible. Y con eso, podemos pasar a las categorías. Mantente atentos. 21. Rediseña el menú de las categorías: Bienvenido de nuevo a nuestro proyecto. El viejo menú de categorías no era nada especial. Fue varonil con esa línea gruesa y no tan emocionante desde el punto de vista visual. Te lo podrías perder si no fueras todo ese cuidado de todos. Por lo que necesitamos hacer algo un poco más interesante y más llamativo. Empecemos copiando y pegando los artículos y quitando el número al lado de cada categoría. Porque yo soy tanto el cliente como el diseñador. Yo estoy bien para hacer eso. En general, no debes quitar estas cosas sin tener el permiso del cliente u otra forma de mirarlo. Puedes quitarlos, pero si recibes malos comentarios al respecto, por favor no te molestes. Está bien. Tómate tu tiempo con él y asegúrate de poner suficiente espacio vacío entre cada uno. Al estar haciendo eso, tenemos que asegurarnos de entender cómo darle estilo. Ahora bien, ¿debemos usar el tratamiento all caps como bourbon, el menú principal? ¿ Lo hacemos del mismo tamaño, más pequeño, o más grande? Para obtener una respuesta, primero tenemos que preguntar algo más, que es más importante. El menú principal o este menú de categorías. Podrías estar inclinado a decir el menú principal, el metanol. Por eso se llama Main, ¿verdad? Pero en realidad las categorías atraen a más colegas por la sencilla razón de que controlan los productos mostrados. Piénsalo. ¿ Qué quiere el negocio? La misma pregunta una y otra vez, ¿verdad? ¿ Desea enviar a los visitantes a ver el blog o la página de contacto? ¿ Qué tal la lista de tiendas asociadas o la prensa que ha recibido la empresa? No, claro que no. Esos pueden ser interesantes, pero el negocio realmente quiere ventas directas al consumidor. Este es el modelo de negocio. Entonces, ¿cómo puedes conseguir que un visitante compre algo? Bueno, primero hay que mostrarle un producto. Ahí es donde entran en juego las categorías. Otra cosa a considerar es que el menú de categorías no necesita una actualización. Entonces cuando cambias de categorías, en realidad está realmente pasado. Si utilizas el menú de productos desde arriba, esto lleva más tiempo porque es un menú desplegable y su general más lento. Entonces, en resumen, ¿qué significa esto? El menú principal está en todos los gorros. Son Dean, negrita mostrará las categorías en todos los gorras, 16, negrita. Ahora, sé que podría haber ahorrado dos minutos y solo te dije el valor 16. Pero por qué lo hacemos es increíblemente importante. No hacemos elecciones sólo en base a cómo se ve, ¿verdad? Lo que sea que se vea mejor, necesitamos pensarlo y realmente asegurarnos de que ayudemos al negocio a alcanzar sus objetivos. A continuación, quiero resaltarlo aún más mediante el uso de un rectángulo. Estos agregan uno al lienzo cualquier tamaño y asegúrate de colocarlo debajo de la capa de texto. Recuerda, Tecla de Control Cuadrado para mover una capa hacia arriba o hacia abajo en el panel de capas. De acuerdo, para el tamaño, considerando el ancho de la capa de texto, Vamos con 550 por 50. Estos son solo los puntos de partida, así que no lo pienses demasiado a través del panel de activos. Por favor aplica el borde rosa y luego redondearlo poniendo ahí un alto valor. Por cierto, el valor máximo es de 25, y eso se debe a que la altura es de 50, 25 en la parte superior, 25 en la parte inferior. Por lo que 50 en total. Pero en caso de que pongas lo que 100 aquí va a ser lo mismo. Entonces no se preocupe por ello. No hace falta decir que se debe enviar que ambos elementos en el lienzo, pero también centraron el texto dentro de la forma. Si me preguntaste qué es lo más importante como principiante en pensar que es velocidad. Mientras seas rápido, vas por buen camino. Esto significa que tienes que estar cómodo en Adobe XD. Pero debido a que solo hay unas pocas técnicas que dominar, estoy seguro de que te volverás más rápido y rápido a medida que practiques. De acuerdo, ahora, siguiente en mi lista, Vamos a mostrar qué categoría está actualmente activa y eso es avena. Destacarlo y utilizar el panel de activos para ello. Sólo asegúrate de recordar ese bicho del que te hablé. Está bien. Cuando eso esté hecho, agreguemos la línea en la parte inferior de la palabra. Realmente depende de lo que hiciste arriba. Creo que hicimos la línea que tenía 90 píxeles de ancho. Creo que eso es un poco mucho para ser honesto. Hagamos AD, pero mantendremos la altura de tres píxeles. Lo que haré es encogerme el de arriba también, solo para que dentro de lo claro, de nuevo, la consistencia me importa. Aceleraré esto ya que no hay nada especial en ello. Usaré un rectángulo para centrarlo. Y eso va a ser que podríamos haber utilizado potencialmente la misma cantidad de espacios vacíos antes en el menú principal. Pero creo que este es uno de esos lugares donde estoy de acuerdo con sólo aproximarlo. Lo que me gusta hacer es asegurarme de que el texto esté centrado y ajustar la cantidad de espacio vacío. Debido a que el texto está centrado, esto significa que la alineación no será desechada. Ahora, ¿de acuerdo? En realidad olvidé una cosa pequeña. En lugar de jugos menos ponen limonada porque creo que eso es más apropiado. Las, creo que debería ser avena en vez de viejo, pero déjame volver a comprobar y ya veremos qué podemos hacer en el siguiente video. Estos pequeños detalles o los mayormente para los dueños de negocios como diseñador web, realmente no deberías hacer estos cambios a menos que se te instruya para hacerlo. Sí, esto va a ser un proyecto real, ahí se va a implementar. Entonces prefiero que utilicemos el término real. Hay un último detalle. Me gustaría agregar un divisor vertical entre cada elemento del menú. Usa la herramienta de línea una vez más y manténgala por debajo de 20 píxeles. Hazlo igual, colorea, y usa un rectángulo para centrarlo correctamente. Se puede preguntar, ¿por qué lo estamos haciendo? No es obligatorio. No me malinterpreten. Pero ayuda a traer más estructura al menú. O el público no es tan joven. Por lo que necesitamos asegurarnos de que todo esté lo más claro posible. De acuerdo, con este pequeño detalle, el elemento categorías se parecerá más a un menú. De acuerdo, vamos a echar un vistazo extra y cuando estés feliz, selecciona todo y cama de grupo. No agrupé las dos capas de textos desde arriba porque realmente no nos ayuda de ninguna manera. Estoy muy contento con nuestro progreso y estoy muy emocionado de ver tu propia versión de este menú. Piensa realmente en lo que hace algo diferente. Busca inspiración y muéstrame lo que tienes 0 antes de que terminemos, creo que nos olvidamos de darle estilo al enlace desde la descripción. Sí, lo estropeamos totalmente. Por favor hazlo naranja para demostrar que es un enlace y hazlo audaz para que destaque. Nunca juegues con el tamaño sin embargo, eso sería un gran error de ejecución en mi libro. Sólo se puede jugar con el color y el peso, nada más. Y así, tenemos un diseño que es moderno pero femenino y destaca. Cosas grises. 22. Cómo mostrar todos los detalles de los productos en una cuadrícula cuadrícula: Hola y bienvenidos de nuevo. Vamos a diseñar la cuadrícula de productos a continuación. Pero antes que nada, permítanme corregir este error ortográfico. Creo que ODS es una descripción mucho mejor. Y hablando de descripciones son pensar que deberíamos aumentar ligeramente el tamaño de éste aquí mismo de 13 píxeles a 14 píxeles. Sólo una cosa pequeña, pero creo que tiene sentido. Cuando lo haga entonces, aumentemos la distancia a 25 píxeles una vez más. Entonces es lo mismo en la parte superior y en la inferior. Ahora, avanzando, esta es la parte más difícil de este rediseño, el egresado del producto. Es decir, esta es la parte esencial porque aquí es donde se hacen las ventas. Si no logramos arreglar todo de una manera clara, esto va a lastimar el negocio. Ten en cuenta que las ventas fueron de 40 mil euros a 1.40 mil euros mensuales. Eso son alrededor de 50 mil dólares. Con un gran rediseño, podemos aumentar bastante ese número, pero también podemos bajar las ventas. Por lo que la presión es inmensa. Empecemos con algunas matemáticas. Mantendremos la lectura existente con tres columnas a esas. Nada Oro tan especial, nada demasiado exótico, ¿verdad? No queremos el rediseño loco. Si tenemos tres columnas, eso significa que tendremos dos vacíos, ¿verdad? ¿ Qué tan grandes deben estas brechas? B, 20 o 30 pixels es lo que recomiendo. Eso es lo que uso en la mayoría de mis proyectos. En este caso, vamos con 30. Ahora. Ahí d veces 2 es 60. Esto significa que tenemos 1200 píxeles, el área activa menos 60, y eso es 1140 dividido por tres las columnas, eso es 380 por columna. Entonces básicamente ese es el ancho de un producto. De acuerdo, agrega un rectángulo y usemos el panel Propiedades para ajustarlo. Por lo que el ancho, otra vez, 380. Y para la altura, vamos con una relación uno a uno. Por lo que 380. Podríamos ajustar la altura más adelante en base a cómo se va a ver el diseño. Pero por ahora, esto debería estar bien. Por favor aplica la pizarra que a la rosa. Ahora la pregunta es, ¿nos quedamos con los bordes cuadrados? Y eso es porque vimos que es bastante popular en los sitios web de pasión. Pero en este caso, sugiero que los redondeemos. Ahora, cinco píxeles no son suficientes para la noche que ellos de este tamaño entonces podrían funcionar, pero sigue siendo demasiado sutil para mi gusto. Apenas se puede ver todavía. Por lo que 15 parece el camino que va. El problema con un valor más alto es, creo que va a parecer extraño. Y más que eso se va a comer lejos en el contenido real. Ahora de nuevo, coloca estos 25 píxeles lejos de las categorías y lista copia estrella pegando todo el contenido real. Voy a utilizar los textos de la antigua página web. Entonces por favor quédate conmigo mientras lo pego todo. Como dije al principio, 40 mil euros mensuales, eso son unos 50 mil dólares. Ahora, en el gran esquema de las cosas, esto no es mucho dinero. Este no es un negocio enorme, lo creas o no. Conozco montones de empresas que hacen mucho más que eso. Pero se puede preguntar ¿por qué es esto relevante? Porque tienes que entender el valor de tu rediseño. Diga que vamos a cobrar los 2 mil dólares por todo el proyecto, ¿no? Parar y versiones móviles, bien, además de preparar todo para la codificación, tal vez incluso un prototipo interactivo. El código para este rediseño va a ser realmente barato porque en su mayoría funciona CSS hasta ahora. Entonces la codificación no va a ser nada especial. Pero digamos que es otro 2000, ¿verdad? A pesar de que sé que el precio probablemente será de alrededor de 200 dólares a 250 tal vez. Pero vamos a mantenerlo simple. Con todo, 4 mil dólares en total para el rediseño. Esto puede parecer caro para algunas personas, pero piensa en lo siguiente. Digamos que aumentamos las ventas mensuales en 10 por ciento, ¿verdad? De $50 mil a $55 mil. Entonces eso es un extra de 5 mil dólares mensuales. Por lo que en un solo mes, la empresa recupera su dinero más una ganancia. En un año, eso es un extra de 60 mil dólares en ingresos. Entonces por 1000 dólares el rediseño básicamente no es nada. Es un precio muy pequeño a pagar. Y de nuevo, conozco algunas empresas que hacen 200 mil al mes. Pero aquí está la cosa. Incluso si no aumentas las ventas en un 10 por ciento, tal vez hagas 5%, ¿verdad? En el caso de este negocio, eso sigue siendo un extra de 30 mil dólares mensuales. Pero de nuevo, tal vez tu diseño solo sea un poco mejor que el anterior. De acuerdo, 2.5% de mejora en ventas. Eso sigue siendo $15,000.1, 515 k Este es el poder que tienes como diseñador. Y en realidad tienen un amigo que está rediseñando un sitio para la empresa que tiene ventas anuales de más de los 100 millones de años sin embargo. Entonces eso es más de 8 millones de euros al mes, unos 10 millones de dólares al mes. Si bien es cierto que la mayor parte de esos ingresos provienen de las tiendas físicas reales y no es exclusivo. Las ventas en línea siguen siendo una oportunidad increíble. Entonces esto es lo que tienes que considerar al precio de tu trabajo. ¿ Cuánto valor puedes aportar en función de los ingresos corrientes? De acuerdo, por ahora, movamos algunos de estos hacia abajo y agreguemos un segundo rectángulo que sostendrá nuestra foto. Esto es lo que quiero. Seleccione el rectángulo principal y utilice el control de la D como en duplicado. Parece que no ha pasado nada, pero cambia de color a cualquier gris aleatorio. Cuando hayas hecho eso, deshabilitó el borde y ajustemos su altura. Este es un punto en el que hay que considerar las fotos de la empresa. ¿ Son altos y luego son cortos y anchos? En base a eso, hay que ajustar esta forma. En este caso, soy a la vez el dueño y el diseñador, así que puedo hacer lo que quieran. 250 debe estar bien para la altura. Ahora, el radio 15 de esquina es totalmente tu top Cabo, pero no en la parte inferior. Esto sería un gran error. Por lo que por favor haga clic aquí para editar la mitad inferior. Al hacer clic en los dos últimos campos, sabrás si estás en el lugar correcto porque esta parte se ilumina. Entonces esta es la coordenada que se estaban ajustando recurrentemente abajo derecha y esta inferior izquierda. Está bien, cosas geniales. Ahora tenemos el esqueleto y ahora comienza el viaje. Tomémonos un momento y seguiremos en tan solo un segundo. 23. Aquí encontrarás el mejor diseño para la cuadrícula de productos: Hola y bienvenidos de nuevo. Antes de que lleguemos a trabajar en la cuadrícula de los productos, espero que entiendas lo esencial que es. Estamos hablando de miles y decenas de miles de dólares. Con esa presión sobre nosotros, tenemos que asegurarnos de que creamos la mejor rejilla absoluta de productos que podamos. Pero, ¿cómo podemos estar seguros de que hemos hecho lo mejor posible? Bueno, aquí está mi consejo. Esta es la mejor manera de crear una impresionante cuadrícula de productos, creará montones de opciones, las llamó como sea que quieras llamarlas Variance iteraciones, opciones, cualquiera que sea el concepto, lo que es importante. Aquí está la cosa. ¿ Mostramos ese título debajo de la foto o encima de ella? ¿ Enviamos una lectura o dejamos la línea que los bancos? ¿ Utilizamos dos botones para Añadir al carrito o ver detalles o solo texto? Hay montones de preguntas como estas y no puedes tener respuesta a menos que diseñes todas tus ideas. Es así como logras obtener el mejor diseño posible. Creas todas las versiones que puedas. Cuando tras otro, entonces decides duplicar la mesa de trabajo e intentas otra idea y otra, y otra. Y eso es porque una cosa es imaginarlo. Y es otro del diseño CDA lado a lado con otra opción. Entonces así es como puedes estar seguro de que hiciste lo mejor posible. En mi mente, me encantaría agregar iconos para el peso calorías en precio, pero esta base se ve un poco apretada. De acuerdo, podríamos aumentar la tarjeta, pero eso empujará la segunda fila hacia abajo. ¿ Eso va a estar bien? Entonces ni idea a menos que lo veamos. Podríamos hacer más pequeña la parte de la foto. Pero de nuevo, ¿se verán bien los productos si hacemos eso? Por lo que es realmente importante no ser perezoso al respecto, aunque estés contento con la primera versión, recuerda es solo una opción. Y si el cliente quiere verte otra idea, lo mejor es decirle, Oye, ya sabes qué, ya intenté que aquí está el diseño. No creo que funcione. Pero si no le pones suficiente esfuerzo y creas una versión y eso es todo. No le estás dando lo mejor de ti. Entonces mi consejo es que siempre haces un gran trabajo, aunque el dinero sea bastante bajo. Sólo hay una forma de mejorar y es llegar a ser más rápido y aprender de tus errores. Al convertirte en pastor, diseñarás diez rejillas en lugar de dos o tres. Al diseñar 10, ver qué funciona y qué no. Por lo que la próxima vez tendrás una situación similar. No sólo tendrás esa experiencia, sino que también tienes cierta velocidad. Y con eso dicho, empecemos a hacer algunas opciones. Sólo te voy a mostrar probablemente dos o tres, pero por favor haz lo que puedas para llegar a algo propio. Usa la Inspiración. No uses tu imaginación. Mire a su alrededor y vea qué están haciendo otros grandes sitios web y aplíquelo aquí. Pero por favor intente y no quite demasiados artículos cuando sólo tenga una empresa de título. Claro, es bastante fácil. Pero cuando hay tanta información, es donde las cosas se ponen difíciles. De acuerdo, pongámonos a trabajar. 24. Crea la primera versión de la tarjeta de producto: Hola y bienvenidos de nuevo. Para la primera versión de la tarjeta de producto, Hagamos esto. El paso inicial es seleccionar todos estos ítems y agruparlos, controlar G. Eso no es obligatorio, pero prefiero hacerlo. Ahora, enfoquémonos aquí arriba a la derecha del panel de propiedades y haga clic en Repetir cuadrícula. Notarás son línea verde punteada más estas dos asas. Agarra el de la derecha y expandido. Queremos a los artículos en total, pero notarás que el último no toca el lado derecho. Ahora el problema que se espera, mueve el ratón entre la brecha y obtendrás esta línea rosa. Haga clic, arrastre y muévelo hacia la derecha para aumentar el espacio 230. Amplía si fuera necesario, solo para asegurarte de que obtienes 30, porque eso es exactamente lo que calculamos. Recuerda dijimos 30 veces 2 es 60, 1200 menos 60 es 1140 dividido por 3, eso es IVA. ¿ De acuerdo? Haz lo mismo verticalmente y tendrás que aumentar el tamaño del lienzo. Pero eso se hace fácilmente seleccionando el tablero de arte y arrastrando hacia abajo el mango medio inferior. Está bien, una cuadrícula de repetición tan útil porque podemos arrastrar y soltar nuestro contenido y se poblará las seis cartas. Tengo los archivos preparados y ustedes los tienen adjuntas también. Agarra los 64 esos y arrástrelos sobre la tarjeta gris. Es importante que vayas por encima de la tarjeta y que veas este resaltado azul. Repita el mismo procedimiento para los títulos, el precio, etcétera. Esta es una de las mayores ventajas frente a Photoshop al mostrar diferentes productos con diferentes títulos, ese diseño se siente real y hay una buena posibilidad de que al cliente le guste más en comparación con un diseño donde se pone el mismo producto mostrado seis veces. No hay discusión, esto es mucho mejor. Ah, por cierto, los archivos de texto, no tienen nada especial dentro de ellos. Sólo un título por fila, nada más. De acuerdo, así que ese es el poder de la grilla de repetición. Oh lo siento, olvidé agregar el peso por cada producto. Ahora el problema sin embargo, arrastra hacia fuera una copia del precio manteniendo presionada la tecla Alt. No es necesario cambiar el contenido porque arrastraremos y soltaremos otro archivo de texto, pero puedes cambiarlo manualmente para que no te confundas. Pero aquí hay otra cosa. Bajemos un poco el título. Y como puedes ver, todos ellos hacen lo mismo. Es por ello que lo mejor es diseñar con una rejilla de repetición activada. Una cosa es ver un producto, Es otra ver seis diferentes. De acuerdo, para la primera versión, probemos esto, algo bastante básico. Centrado el título y mostrarlo en Poppins negrita 18 píxeles. Asegúrese de seleccionar el título junto con el rectángulo blanco y, a continuación, utilice el comando Alineación. Leer. Aquí las cosas están bastante ocupadas, pero lo solucionaremos. Creo que colocamos el precio a la izquierda y las dos acciones a su lado. Entonces algo en estas líneas. Básicamente el título queda solo en una línea. Después las calorías de ponderación a ambos lados en la segunda línea. Y finalmente la última dividida en tres detalles de precio. Y finalmente carrito. Ahora, en términos de importancia, ese título es rey, junto con Agregar al carrito y ver detalles. El peso y el Calvi no tan mínima importancia. Entonces vamos a mostrarlos en Poppins 13, regular, que básicamente es texto corporal. Es solo un poco más pequeño de lo que usamos en la idea de halo para la descripción. Ahí, aumentamos eso a 14. De acuerdo, buenas cosas. Los movió 20 píxeles desde el borde de la tarjeta. Obviamente ambas partes. Este espacio vacío aquí mismo se llama relleno. Y es increíblemente importante porque si no dejas suficiente espacio para respirar, todo el diseño se va a sentir apagado. Se va a sentir ocupado y abarrotado. Ahora manejemos los dos llamados a la acción. Te sugiero que agreguemos una carga que toca la parte inferior de la tarjeta para el tamaño. Estoy pensando en 40 pixeles para la altura. Y en cuanto al ancho, creo que 1 tercio, también deberías estar bien con el color. Tenemos que pensar qué es más importante. Ver detalles o añadir al carrito. Creo que la segunda, porque queremos asegurarnos de que el usuario pueda hacer una compra lo más rápido posible. Entonces hagámoslo naranja y obviamente desactivemos la frontera. Y otra cosa que no podemos dejar AT cuadrado, así que por favor haga clic aquí y cambie el radio de esquina inferior derecha el 15. De esta manera será interesante, pero también se ajustará a la tarjeta para la capa de texto. Ve con Poppins, 13, semi negrita, blanco puro. De acuerdo, por favor centrate tanto en horizontal como verticalmente. Podrían tiempo con ello. No te apresures de nuevo, deberías estar trabajando a lo largo de tu segunda visualización. Ahora, el tema es con el segundo botón. ¿ Lo hacemos negro eran otro color. Sin embargo, la falta puede ser un poco demasiado masculina. Está justo al lado de naranja. Por lo que puede parecer interesante. Bueno, sólo hay una forma de averiguarlo, así que hagámoslo. Si bien manejo eso, quiero decirte por qué dudo en introducir otro color en este diseño. Asumamos que vamos a buscar el bonito tono del azul. Bueno, eso necesita aparecer en todo el diseño. Y no estoy realmente seguro de que esa sea la decisión correcta. Preferiría tener el naranja como los únicos colores de acción para que realmente destaque. De acuerdo, cambia el precio a Poppins 18 negrita y asegúrate de que esté centrado con las capas de texto dentro de las cargas. También debes recordar dejar 20 píxeles en el lado izquierdo de la misma con hacer buenos progresos. Pero para decirte la verdad, realidad no estoy tan emocionada por esta primera versión, pero sin preocupaciones. Es solo R la primera vez. Lo importante es que tenemos todos los elementos dispuestos y podemos cambiar fácilmente las cosas. Ah, revisa el título. Debes dejar diez píxeles de la foto. Estamos a punto de terminar, pero por favor no te olvides de la calificación. Ese es un elemento importante para el visitante. En base a la calificación, puede hacer una compra con más competencia. Esto es lo que sugiero, un rectángulo blanco que es realmente redondeado. Diga 130 píxeles, sin trazo, porque todas las fotos son bastante coloridas. Asegúrate de que el orden en el panel de capas sea correcto, lo contrario no lo verás bien. El texto dentro tiene que ser realmente pequeño. Por lo que Poppins 12 semi negrita es mi elección. audaz también podría funcionar, pero esto totalmente depende de ti. Y no nos olvidemos de la estrella. Usaré icono plano para eso, pero pausaré la grabación porque no pasa nada especial. Basta con buscar la bonita estrella. Y aquí está el mío. Lo arrastraré y lo redimensionaré. Gracias 16 píxeles deben estar bien. La idea es que esto sea sólo un pequeño detalle. Si quisiéramos que destaque, probablemente usaríamos cinco estrellas. Pero creo que eso cubriría gran parte de la foto y eso no es ideal. Está bien. Para el código de color. Vamos con la IED, DD 07. Es otro código de color de mi marca, así que lo sé de memoria. Ahora, aquí está lo último a lo que hay que prestar mucha atención. Por supuesto, centrado la estrella y la línea medular del texto. Cosas fáciles. A continuación, deje cinco píxeles entre los dos. De nuevo, fácil. Pero aquí está la cosa. Ahora queremos, esto centrado dentro del rectángulo. Seleccione ambos elementos con la tecla Mayús y agruparlos. Vea cómo cambió el resaltado. Déjame deshacer al Control Z. Así que ambos están seleccionados y ahora los agruparé. Está bien, genial. Siguiente También seleccionaré el rectángulo blanco usando la tecla Mayús para que tenga dos cosas seleccionadas. Se puede habilitar el panel de capas para ver qué está pasando. Entonces el grupo con la estrella y la capa de texto, Eso es una cosa. Y aquí está el rectángulo. Genial. Ahora utiliza las herramientas de alineación. Y eso es entonces, felicitaciones. Mi consejo es que agrupe a estos dos también porque queremos colocar este elemento a 20 píxeles de la parte superior y 20 píxeles del borde. Y con eso, terminamos con la primera versión, renombrar el grupo, y podemos empezar a pensar en la siguiente. Te veré en un minuto. 25. La segunda versión de la tarjeta de productos: Hey ahi, hemos hecho nuestra primera versión, ¿verdad? Pero no estoy muy contento con ello. Y creo que te sientes de la misma manera. Las mujeres negras no lucen raza. Por lo que antes de bajar con el resto del diseño, seleccionemos esta mesa de trabajo y golpeemos Control D para hacer una copia. Control D como en duplicado. Creo que podemos hacerlo mejor. De acuerdo, Una de las cosas que me gustaría probar es alinear a la izquierda el título, Controlar, hacer click en él y cambiemos su orientación a alinear a la izquierda. Por favor, asegúrate de tener 20 píxeles desde el borde. Puedes mantener presionada la tecla Alt y mover el ratón por ahí y obtendrás la medición. Otra sugerencia es que estrechemos esa capa de texto porque estoy pensando que movemos el peso del producto por encima de las calorías. Básicamente la idea es tener el título en dos líneas y en el lado derecho, el peso y las calorías. Haz lo posible para acercar y alinear estos. Por favor tómese su tiempo con él. Tienes que tener paciencia con ellos. Y cuando termines, creo que podemos mover un poco todas las capas de textos porque aquí tenemos un poco más de espacio para respirar. Creo que esto va a quedar mejor. Ahora, podría preguntarse, ¿y si los títulos son extra largos? ¿ Qué pasa entonces? Bueno, lo más fácil es cortar el título. Esto es bastante fácil de hacer desde punto de vista de la codificación y no cambia el aspecto del producto. Entonces solo usa punto, punto, punto al final. Ahora. Claro, podríamos pedirle al codificador que ajuste el tamaño de la fuente para que quede todo el título. Pero encontré que eso no se ve tan bonito. Entonces en general, punto, punto, punto es una gran manera de hacerlo. ¿ De acuerdo? Esto ya es un poco mejor, pero necesitamos manejar la carga específicamente ver detalles porque ese es el que no me gusta. Aquí está la situación. Esta no es la acción principal. Por lo que sugiero que quitemos su rectángulo y hagamos el texto naranja. De esta manera la gente estará más inclinada a dar click en Agregar al carrito. La pregunta es, ¿deberíamos centrar esta capa de texto con la tarjeta? Entonces así ¿qué distribuimos eso con el precio y el rectángulo? Bueno, en este caso, creo que la segunda opción tiene más sentido. Pero hay otra cosa que considerar. A mí me gusta decir consistente en mis diseños. Es una de las formas de asegurarse de que se vea mejor. Entra y crea una cuenta son todos en todos los mayúsculas. Ahora las categorías igual. Entonces estoy pensando que aquí hacemos lo mismo. Pero como de costumbre, pruébalo y mira cómo se ve. El único problema importante es el hecho de que el precio es algo parecido al fondo de la tarjeta y no podemos elevarlo sin causar una desalineación. Con estas tres capas. Tienes la línea horizontal recta imaginal pasando por el medio de estas capas. Si mueves a alguno de ellos, ya sea arriba o abajo, eso es un gran error. El que hace más fin de semana es quizás aumentar ligeramente el tamaño del botón Añadir al carrito. Son 40 ahora mismo, tal vez 44, pero eso es todo. No podemos extender demasiado eso porque sólo va a parecer raro. Pero aquí hay una idea que está obligada a funcionar. Vamos a redondear hacia abajo hasta la esquina superior izquierda. Seleccione el primer campo en el panel Propiedades y coloque 15 píxeles. Bueno, este no es un estilo muy común. Creo que se ve interesante y no es difícil codificar. Siempre pienso en esa parte también. Al mantener los costos bajos, estás haciendo que el cliente sea más feliz y cómodo. De acuerdo, esta es la segunda versión de la página principal. El grillete es mucho mejor. Estoy mucho más feliz con ello versus el inicial. No hay duda, pero creo que podemos darle otra oportunidad, otra versión, otra iteración. Esta vez, me gustaría ver un icono en lugar de agregar al carrito. Eso debería darnos un aspecto más limpio. Pero sólo hay una forma de averiguarlo haciéndolo. Entonces vamos a hacer una pausa y nos vemos en tan solo un momento. 26. La tercera versión de la tarjeta de productos: Hola, hola. Veamos qué podemos hacer esta vez. Estoy pensando que podemos probar un icono en lugar de una capa de texto que diga Añadir al carrito. Esta es una variación sobre la versión antigua del sitio web donde hubo un enfoque similar. Y eso es porque a veces no necesitas un diseño completamente nuevo, totalmente diferente. Sólo un ligero ajuste. Está bien, probémoslo. Selecciona la mesa de trabajo y obviamente haz una copia. Ahora, el líder Agregar al Carrito textos en fire up flat icon.com para buscar un bonito icono. En la versión antigua, ese era un carrito de compras. Creo que esta vez usamos una canasta alrededor de una de mano. No te haré esperar, así que editaré la grabación. Hills ¿yo elegiría? Lo haré más pequeño, 26 por 26 para ser preciso y blanco. Nuevamente, recuerda esas dos cosas. Deshabilitó la función responsive y tenía el icono de candado, el plus dentro que realmente envía el mensaje correcto agregar al carrito. Esto debería ser bastante intuitivo para la mayoría de las personas, incluida la audiencia de este sitio. Cuanto más joven sea la multitud, más se puede estar seguro de este tipo de cosas. El tema con este diseño es que la carga es demasiado amplia. Seguro podríamos tratar de mantener el texto también sin cosa que es demasiado en mi libro, esta área no debería competir por la atención con la foto. Pero debido a que es tan ancha y tiene un icono, bueno, te llama la atención de inmediato. Entonces esto es lo que sugiero. Selecciona la forma y la embestida, hazla un círculo, 50 por 50 píxeles. Este es un elemento de diseño muy común si tienes alguna experiencia con aplicaciones móviles. Por lo que aplicaciones Android o iOS, Es un look clásico, fácil de entender. Pero de nuevo, eso está dentro de la aplicación móvil. Le gustará a este público? Podemos enterarnos de hacer Google Analytics, pero eso se trata de eso. De todos modos, sigamos con nuestro trabajo. Tenemos este botón, pero no podemos dejarlo aquí, sobre todo porque el radio de esquina no coincide. Yo digo que lo coloquemos aquí justo en el borde. Como de costumbre, 20 píxeles del lado derecho. Con es bastante grande tamaño 50 por 50. Y el hecho de que sea naranja, creo que debería atraer suficiente atención. De acuerdo, la calificación estelar desde arriba hace que el auto sea demasiado pesado. Del lado derecho, aquí está pasando demasiado. Por lo que para equilibrarlo, muévelo por el lado izquierdo, espejando ese botón de la tarjeta. Por cierto, a veces es realmente difícil ver la medición que aparece en rosa cuando tiene dudas. Claro, realmente se puede acercar, pero también se puede hacer esto. Hacer que el elemento toque el borde. A continuación, mantenga pulsado shift y toque la tecla de flecha derecha para dimes. Eso te va a dar 20 píxeles. Entonces recuerda que un toque es de un píxel, pero si mantienes pulsado shift también, un toque es de 10 píxeles. De vuelta a él, el blanco sobre blanco no funciona bien, así que habilitemos un borde. Hay algo que decir sobre arriesgarse a get que dejarlo como estaba. Pero prefiero quedarme en el lado seguro. Está bien. Estamos haciendo buenos progresos, pero la parte inferior, es un desastre, da lo que estoy pensando. Los detalles de la vista de acción secundaria deben estar en el borde derecho. El precio debe permanecer a la izquierda porque eso parece natural. Leemos de izquierda a derecha, junto al precio, debemos mostrar el peso del producto. Porque pienso de nuevo, eso parece justo. Tienes que saber lo que estás comprando. Y junto a eso, el número de calorías. Ahora, esto requiere bastante edición, pero me iré rápidamente a la mojada para que no tengas que esperarme despierto. Tenga en cuenta que en una cuadrícula de repetición, al agregar la posición, tamaño, o color de un objeto, todas las tarjetas se actualizan. Pero cuando cambias el contenido dentro de él, el texto real que solo afecta a esa tarjeta en particular. Entonces eso es algo para recordar. De todos modos, ya casi estamos ahí. Todo lo que queda es un poco de ajustar el espaciado 0. Y para el look más equilibrado, creo que podemos centrar el título en ambos sentidos en la tarjeta, pero también como capa de texto. Siéntase libre de moverlo un poco hacia abajo también. Ahora, Aquí está la cosa. Esta es sólo otra versión de la cuadrícula. Siempre podemos ajustarnos más o llegar a nuevas ideas. Lo que importa es que trabajes con cerca del 80 al 90 por ciento de atención al detalle. ¿ Quieres velocidad? Sí. Pero también quieres comprobar si esto es viable o no. Por lo que eso significa que sí necesitas configurar los bordes correctamente. Sí necesitas medir las cosas en la línea, todo, pero no al 100% precisamente ¿verdad? Por otro lado, si eres descuidado y no haces nada de eso, miras el diseño y pensarás, Hmm, algo se siente apagado. Esa puede ser tu falta de atención al detalle. Nuevamente, la idea es, cuando diseñes la variación, dale una toma justa ejecutándola de manera bastante correcta. De acuerdo, digamos que ya terminamos. Golpearé el símbolo de juego desde la parte superior derecha de la pantalla para que podamos recorrer rápidamente los diseños. Voy a usar mi teclado, eso va las teclas para eso. De acuerdo, El primero está bien. Pero obviamente el botón negro es un poco feo, de ninguna otra manera. El siguiente diseño con esta carga de fantasía, Es interesante, fácil de usar, y no parece abarrotado de ninguna manera. El último es más moderno, más vanguardista. Pero creo que es arriesgado. Es posible que algunas personas no entiendan este botón Agregar al carrito. ¿ Tú y yo? Es obvio, seguro. ¿ Cómo pudiste no verlo, verdad? Pero recuerda al público objetivo. No asuma que la gente se las arreglará. Tienes que hacerlo lo más sencillo posible. Por lo que hasta mi abuela puede arreglárselas sin dolores de cabeza. Con eso en mente, una cosa, el segundo diseño parece la mejor opción como diseñador, prefiero el tercero, tal vez 60 por ciento sobre el 40 por ciento. El segundo renglón está cerca. Pero sin embargo avanzando, seguiremos con el segundo diseño. Y con eso, es hora de seguir adelante. Espero con interés su propia versión. Esta es la parte más importante, así que tengo mucha curiosidad. 27. Cómo diseñar una sección de FAQ limpia y moderna: Hola y bienvenidos de nuevo. El siguiente apartado debe ser bastante recto para la palabra. Estamos buscando una sección de preguntas frecuentes que sea limpia y moderna. Preguntas frecuentes. Empecemos con un título, pero recuerda trabajar en la segunda mesa de trabajo. Puedes moverlo a un lado por si quieres organizar mejor el proyecto. De acuerdo, El título, debe estar centrado y no queremos esa fuente de guión de fantasía. No hay necesidad de ello. Sería demasiado. Por lo que Poppins bot será 26, debería ser bueno. Ahora, hay mucha pasta de copias, pero empecemos con la primera. Para el formateo. Vamos con Poppins, semi negrita, 16 pixeles. Esto es lo suficientemente pequeño, por lo que no compite con el título por la atención. Pero lo suficientemente grande como para que se destaque. Lo mantendremos en negro, pero por favor a la izquierda alinearlo. Ahora bien, bien, para el texto de cuerpo quiero usar regular. Ese es un estándar muy dado como cuál debe ser el tamaño 14 píxeles. ¿ De acuerdo? Por favor, asegúrese de que la capa de texto sea lo suficientemente ancha. Yo diría que unos 500 píxeles más o menos. Y eso es porque queremos el enfoque de dos columnas con una brecha decente en el medio. Considerando que estamos tratando con un área activa de 1200. De ahí vienen los 500 píxeles. La mayoría de las secciones de FAQ tienen un controlador. Esa es una carga que se utiliza para expandir o colapsar la respuesta. En nuestro caso, ya se debe abrir la primera pregunta, por lo que necesitaremos el símbolo menos. Puedes usar icon.com plano y buscar el símbolo menos que está dentro del círculo. O por supuesto podrías hacerlo tú mismo ya que es un trabajo tan fácil. la razón que sea, me encantó este dial en iconos de redes sociales, pero también en otros iconos también. Los círculos están en estilo ahora mismo. De acuerdo, la forma debe ser 26 por 26. Tan bastante pequeño. Si no puedes encontrar un ícono lo suficientemente rápido, podrías hacer lo tuyo exactamente como acabo de mencionar. Por ejemplo, el menos puede ser una línea simple, dos píxeles de espesor, luego de 12 píxeles más o menos. En cuanto a web, lo que importa mucho es cómo agrupa todo. En primer lugar, las dos formas para un elemento, así que ese es un grupo. A continuación, el icono necesita estar alineado con el título, y ese es otro grupo. Por último, la descripción debe colocarse a unos 10 píxeles del título. Ah, hablando del título, creo que nos olvidamos de este espacio. Queremos en cualquier lugar de 30 a 50 píxeles. Y aproximadamente lo mismo entre la primera pregunta y el título. Siempre y cuando no exageres con estos valores, debes tener un bonito diseño. Aceleraré las cosas. Basta con prestar atención a la distancia entre las preguntas. Esta es una de esas razones por las que un grupo, el título con el ícono. No hace falta decir que necesitamos el símbolo más en lugar de un menos para todos los demás. Ya que estoy trabajando en segundo plano, Consideremos otros enfoques, variaciones en este momento. Podríamos hacer naranja todas las preguntas no abiertas, ya sea el título o el ícono o tal vez ambas. Bueno, sí, eso podría funcionar potencialmente, pero eso sería un montón de naranja, ¿verdad? Exploremos otra idea. ¿ Podríamos usar una tarjeta para cada pregunta, para cada título? Bueno, sí, pero de nuevo, necesitaría una para cada pregunta, no para la columna misma. Y en esa situación necesitaríamos más espacio entre cada elemento. No estoy excluyendo get no estoy diciendo que no, pero no creo que traiga mucho a la mesa. Además es mucho más trabajo. Y la mirada no será nada de qué gritar más que eso. Hay algo que decir sobre la importancia de esta área. Baja prioridad, ¿verdad? Por eso, lo mejor es mostrarlo sin antecedentes. Por cierto, en caso de que quiera aumentar el tablero de arte vaya a por lo menos 2000 píxeles, que todavía está en realidad en el lado pequeño. actualidad, prefiero páginas más cortas simplemente porque la velocidad es un factor tan importante, tanto en términos de ventas como también para el SEO, optimización de motores de búsqueda. Es por eso que no me gusta agregar un montón de ilustraciones e iconos y mis diseños. Claro, mis diseños no serán tan bonitos como los que encuentres en Dribble. Pero por otro lado, muy pocos diseños que ves en ese tipo de sitios web alguna vez se codifican. Y si alguna vez se codifica, el presupuesto es de al menos 20 mil dólares. De acuerdo, aquí está nuestro diseño y estoy muy contento con él. Podríamos haber agregado algunas preguntas más en la segunda columna, pero no creo que ese fuera el enfoque correcto. Sé que se quiere equilibrarlo, pero que si cierras la primera, la primera pregunta de lo que tendríamos para las preguntas de la izquierda y seis a la derecha. No cool. Entonces otra vez, estoy muy contenta con ello ya que es agradable, limpio y moderno. 28. Crea un formulario de suscripción de newsletter: Hola y bienvenidos de nuevo a esta conferencia donde crearemos un formulario de registro de newsletter. Esto generalmente se coloca justo encima del pie de página, o a veces está dentro del pie de página. Queremos esos diseños limpios, femeninos. Entonces empecemos con un rectángulo redondeado. Probé diferentes configuraciones durante nuestro descanso y encontré que los siguientes valores funcionan mejor. 780 por 80. De acuerdo, por favor centralo en el lienzo y aumenta el radio de esquina a su valor máximo. Cuando eso esté hecho, aplicaremos el borde rosa. Básicamente esto está en línea con el menú de categorías desde arriba. Esto es lo que quise decir cuando dije que deberíamos mantenernos consistentes en nuestro diseño. Si decidimos que el radio máximo de esquina es el camino a seguir, entonces manténgalo absolutamente en todas partes. Ahora, ¿de acuerdo? Ahora es cierto que, que el botón del auto no sigue el ejemplo, pero ahí es donde entra en juego la experiencia. En ocasiones hay que doblar las reglas para un mejor diseño. Sé que es un poco complicado, pero a medida que ganas más y más experiencia, aprendes sobre estas excepciones, respecto al espaciado, lo que los píxeles o así deberían estar bien. Me encanta el hecho de que Adobe XD te ayude a igualar tus espaciados, cosas grises para el texto, Vamos a escribir algo como descubrir nuestra historia. Poppins Negrita 16 píxeles en todas las mayúsculas. Nuevamente, siempre que sea posible, por favor no uses Lorem Ipsum no es un gran look. Colóquelo en cualquier lugar del lado izquierdo, justo debajo de él. Vamos con un pequeño negocio con grandes sueños. Es poco probable que este sea el texto final, pero es un comienzo decente. Mostró esto y Poppins para Dean regular. También sugiero que agrupe estas dos capas porque será útil cuando usaremos las herramientas de alineación. De acuerdo, ahora mismo, quiero centrarlos para luchar cubierto este espacio. Idealmente, me gustaría tener aquí las etiquetas finales para que pudiera trabajar con más precisión. Pero como diseñador web, debes saber que estas cosas llevan tiempo encontrando una gran copia. Por lo tanto, no esperes que tu cliente los tenga en esta etapa del diseño. De acuerdo, de vuelta a mojado. Por favor, asegúrate de tener la misma cantidad de espacio en la parte superior y en la parte inferior para el campo donde escribes tu dirección de correo electrónico. Vayamos con dos AD por 40. Ahora, personalmente he probado muchos estilos diferentes a lo largo de los años, que es lo que propongo. Redondee las esquinas en primer lugar porque necesitamos que el campo coincida con el fondo, deshabilite el trazo y abra el recolector de color. Conozco un código hexadecimal de memoria porque he usado ese montón de veces sobre fondos blancos. Y eso es F3, F3, F3. Este es un gris claro que funciona bien en nuestro caso. En efecto, estoy contento con ello. Ten en cuenta que no hay trazo, ninguna otra decoración. De acuerdo, dentro de ella se sumará nuestra mano. De ahí son los que suelen mostrarse en un gris muy lavado. Pero no creo que eso sea posible aquí, así que lo mantendremos negro. Escriba su dirección de correo electrónico. Poppins, regular 12 pixels. Tenemos que arreglar todo. Pero primero necesitamos el botón de llamada a la acción. Por favor, copia el botón de registro del encabezado. Es por ello que quería que el campo fuera de 40 píxeles de altura. El fondo es bastante más alto. Pero para mejor suerte, la carga siempre debe coincidir con el campo, sobre todo en este diseño horizontal. Por lo tanto, ten eso en cuenta. Se puede utilizar esta pieza de información en cualquier proyecto. Ahora porque la carga es la mitad de la altura, esto significa que tendremos 20 píxeles en tres lados, la parte inferior y en el lado derecho. Está bien, cosas geniales. Nuevamente, la izquierda donde tenemos nuestro texto no es tan precisa, pero está bien por el momento. Ahora mientras me ocupo de todo, déjame contarte un poco más sobre esta forma. Podríamos hacer algo más femenino? Sí, tal vez. Pero la mayoría de las galerías de diseño que muestran formas hermosas suelen ser más grandes y necesitan bastante codificación. Lo que hemos diseñado aquí, esto son literalmente minutos. Dicho eso, recuerda que soy a la vez diseñadora y dueña del negocio en este caso, me importa cuánto dinero me va a costar esto. Pero si quieres impresionarme con un boletín más elegante para ellos, por favor adelante y ponte creativo. De acuerdo, cuando todo está abotonado, aquí está el diseño. Por favor recuerda agrupar todo junto. Esta forma, pero también la FAQ anterior. Creo que se me olvidó mencionar eso en la conferencia anterior. Y con eso, tomemos un breve descanso. 29. Cómo diseñar un hermoso pie de piel: Hola y bienvenidos de nuevo. Diseñemos un hermoso pie de página. Esto va a llevar tiempo y paciencia. Entonces, por favor, no se apresure. Comienza con el rectángulo de 1920. Eso es sobre, oh, digamos 4000 píxeles de altura. Por favor, céntrela en el lienzo y como de costumbre, deshabilita su borde. Aquí hay una gran decisión. ¿ Deberíamos hacerlo blanco, que será más fácil a la vista y más femenino? O vamos por el negro, que parece un poco más frío pero más lujoso, más lujoso. ¿ La decisión, al igual que con una cuadrícula de productos, ejecutará todas las ideas. Y veremos qué es qué cuando realmente los veamos en el Lienzo. De acuerdo, empieza con los títulos para cada sección. Por ahora, vamos a ir con la versión blanca. Poppins 16, semi negrita en todas las tapas. Sé que usamos este tratamiento para el menú principal, pero la idea aquí es separar el título de los elementos reales del menú. Por favor, alinea a la izquierda el primero con la guía de la izquierda y deja unos 50 píxeles desde la parte superior, da o toma. Por supuesto, el medio debe estar centrado en el Lienzo. Y el último, bueno, ya veremos de eso. Por ahora. Vamos a copiar pegar las capas de texto ahora. De acuerdo, ahora, estos deberían mostrarse en Poppins 13, semi negrita y naranja. Y eso se debe a que todos estos son enlaces. Para mí, usar todas las tapas en grandes cantidades está por la ventana. Por lo que a pesar de que el menú principal se está mostrando en todas las mayúsculas, no usaré todas las mayúsculas aquí en el pie de página. Sería simplemente demasiado. Ahora portón, deja unos 20 píxeles vacíos entre ellos y el título. Pero lo más importante aquí en el pie de página es la altura de la línea. Por favor, súbelo hasta 30 píxeles, tal vez incluso más. Y aquí está lo que la mayoría de los diseñadores parecía no saber. Como propietario de un negocio, tienes que publicar ciertos enlaces, como términos y condiciones de la política de privacidad, y montones de otras cosas que la ley requiere. Cada país es su amigo Y quizá no conozcas todas las leyes. Pero lo importante es que le das al cliente un lugar para el, toda esta información con algunos diseñadores hacen es crear un mini pie de página. El sorteo, agregan el aviso de copyright, y eso es que desde un punto de vista funcional, eso no es genial. Menos de lo que conozco la mayoría de las agencias de SEO querían estas longitudes. Ahora bien, no importa lo que sientas al respecto, pienso en la comida que deben tener al menos tres columnas y debe tener al menos 250 píxeles de altura. De acuerdo, para la columna media, veamos qué es qué. Yo quiero agregar, una presentación para los influencers y otra para los dueños de negocios, una presentación en PDF. Ahora, estos deberían ser botones. Entonces, empecemos con un simple rectángulo. 300 por 50 debe ser de buen tamaño, un poco más grande que nuestras llamadas regulares a la acción. Pero eso es porque quiero una gran etiqueta. En primer lugar, deshabilitar la frontera y redondear las esquinas y obviamente hacerla naranja. Tiene el destello. Espero que te hayas acostumbrado al panel de Activos. Si vienes de Photoshop, sé que es un poco difícil no tener visible el panel de capas en todo momento. Pero después de un tiempo sí te acostumbras. De acuerdo, aquí está la etiqueta para los influencers promocionan overs. Eso es un pronunciado por cierto. Esto necesita estar centrado y alineado superior con las columnas del lado izquierdo. De acuerdo, y aquí hay un pequeño detalle. Hay un enlace de Dropbox detrás de este botón. Y como es un PDF alojado en Dropbox, esto significa que puedo ajustarme fácilmente sin tener que cambiar el enlace. Sé que suena como una cosa pequeña, pero considerando la plataforma en la que se construye este sitio web, este trabajo alrededor tiene mucho sentido. Está bien, duplicar la carga. Y pensemos en el estilo. Una situación complicada aquí, un botón negro no es una gran idea. Vimos eso en el listado de productos. El de la marca que sí tiene un tono de azul, pero no es una bonita. Por ahora, me arriesgaré a conseguir por venir con un nuevo color por mi cuenta. Teniendo en cuenta llega más lejos, esto debería estar bien con la mayoría de los clientes. Ah, por cierto, deja 20 píxeles entre las dos cargas. Tenemos un montón de espacio aquí, así que no hay necesidad de juntarlos. De acuerdo, sigamos adelante para la información de contacto tengo preparado mi bloc de notas. Esta columna necesita mostrarse en Poppins, su decano regular. Se trata de textos sencillos, por lo que no hay necesidad de que sea más grande o audaz o de cualquier otro color. Creo que este es uno de los mayores errores que a menudo cometen los principiantes. El superdimensionar sus capas de textos. Todo es enorme, sí necesita ser elegante y refinado. El x que tiene más de 16 píxeles no suele verse bien. Y aquí hay otra cosa. Si bien trabajo en segundo plano. Descubre lo bonito y equilibrado que se ve esto. Podríamos haber colocado, trabajemos juntos en el lado derecho. Pero entonces habríamos perdido algo de ese equilibrio. Recuerda, estamos en total control. Entonces actuemos así. Para el texto de la derecha, Poppins 13, semi negrita y en naranja. Esto necesita ser la línea correcta para que coincida con nuestro guía. Por cierto, ¿te has dado cuenta de lo mucho que nos han ayudado estos guías? Sin ellos, nuestras vidas habrían sido mucho más difíciles. El pie de página es un buen lugar para agregar algo de creatividad. Tan solo asegúrate de que sea algo que no va a tardar mucho tiempo en términos de costos de desarrollo. Las cosas van muy bien. Pero quiero agregar algo que dividí que atraviesa el área activa. Esto es algo que he estado haciendo durante los últimos años y creo que funciona muy bien en casi cualquier situación. Entonces la línea debe ser de un píxel. Y en este caso, creo que vamos a usar el ping que hemos usado absolutamente en todas partes. Ahora, bien, Para la distancia, asegúrate de usar la misma cantidad que la anterior. Entonces si fuiste por los 50 píxeles de ahí, 50 va a funcionar aquí también. Está bien, Genial. Ahora por fin, a cualquiera de los lados voy a añadir un poco de texto. El aviso de copyright, quien hizo el diseño y demás. Esto no es obligatorio, pero es otro lugar para longitudes. Y les mostraremos estos y Poppins 12 pixeles regulares. Para que estos no capten tu atención. Y después de la muerte entonces se completa la página de inicio. Por supuesto, necesitamos agrupar todo y recortar el exceso de espacio desde abajo. Estos son todos los detalles que suman, así que por favor no se apresure. Sé que tienes prisa por terminar y pasar a la versión móvil, pero tomémonos nuestro tiempo con ello. Antes de que terminemos, sí noté que algunas personas se han quejado de la calidad de los PNG que salen de Adobe XD de lo que manejan los diseños de stand exportados como los PDF se ven más nítidos, mucho mejor que los PNG. De nuevo, hay muy buenas posibilidades de que no tengas ese problema. Pero lo mejor que sabes de eso, Adobe XD se actualiza muy a menudo y eso viene con tanto positivos como negativos. De acuerdo, terminemos en la próxima conferencia. 30. Variación y pensamientos finales sobre la página de la página de inicio: Hola y bienvenidos a la última lección sobre la página de inicio. Crearé una copia del mismo y cambiaré rápidamente el esquema de color para el más lejos del blanco al negro. Ahora, bueno, yo manejé eso. Déjame contarte mi impresión del diseño general. Creo que es más femenino que el viejo diseño. No hay duda al respecto. Ese botones tocar parece una mejor opción en comparación con un ícono. El viejo cuentan con la Nikon para, sin embargo, para ser justos, conozco muy bien mis analíticas. Mi tasa de conversión fue de cuatro a 5% en los últimos tres meses. Ahora, tal vez encuentres eso extraño. Si la tasa de conversión es tan alta, el promedio de la industria es del 2%. Por cierto. ¿ Por qué arriesgarlo con un rediseño? Bueno, quiero probarlo. Quiero ver si puedo ir más alto, pero también exhibir mis productos de una mejor manera. Y si se tiene en cuenta el costo, esto muy probablemente me va a causar probablemente 200 dólares en términos de codificación. Y esa es una cantidad muy pequeña porque no introduje cambios mayores. Todo lo que hemos diseñado se puede hacer a través de código CSS puro. Entonces por eso el costo es tan bajo, y por eso básicamente esto es gratis. Si funciona mejor que fantástico, si no lo hace, puedo revertir fácilmente. Además no usaré una gran empresa de desarrollo. En cambio, usaré un freelancer para mantener el costo bajo. Ya tenemos una gran relación, así que es un ganar-ganar. De acuerdo, después de todo está dicho y hecho, aquí está el pie de página negro. Ahora jugó el diseño, usa la opción Jugar desde arriba a la derecha y ve de ida y vuelta. Eso es realmente complicado. No estoy realmente seguro cuál es el mejor. Pero soy John solo un poco más a la versión ligera. A lo mejor es 55 contra 45. Entonces está realmente, muy cerca entre ellos. Estoy bastante inseguro. En fin, cuando alejas el zoom y ves todo el diseño, podemos ver que el pie de página negro se vincula con la barra superior negra. La mayoría de las empresas de moda también usan este estilo, barra superior negra y pie de página negro. Pero puede ser un poco demasiado duro para la mayoría de las mujeres y por lo que estoy tratando de hacer aquí. Considerando que AT creo que me quedaré con una versión blanca. Sí. Está bien. Vamos con la versión blanca. En realidad tengo mucha curiosidad por lo que vas a crear, pero quiero tomarme un momento y recordarte, por favor no confíes en tu imaginación. No has pasado por los principios del diseño. Entonces, por favor, no trates de crear algo fuera de este mundo. Busca grandes ideas e impleméntalas. Pero por favor no uses tu imaginación. De acuerdo, te veré después del descanso. Tenemos la página del producto, el mango, y luego la versión móvil para ambas páginas. Gracias. 31. Analizar cómo podemos mejorar la página de productos: Hey ahi, Este es Chris, bienvenido de nuevo a nuestro proyecto. En este rediseño, nuestro principal propósito es hacer que todo sea más femenino y de alto nivel. Y estoy muy contenta de decir eso. Gracias logramos hacer justamente eso con este diseño de homepage. Ahora la pregunta es, ¿cómo podemos mejorar la página del producto? Bueno, para la versión de escritorio, creo que no vamos a hacer mucho. Y eso se debe a que el cambio de fuente probablemente va a ser la edición más grande. La estructura está bien. Pero dicho lo contrario, no veo ninguna manera de mejorarlo. Acabo de leerlo hace un par de meses. Dicho esto, creo que podemos hacer un poco de trabajo en la parte superior donde estos iconos de las redes sociales no ayudan tanto. Más que eso, creo que la mayor diferencia se va a hacer en la versión móvil de esta página. Y eso se debe a que el 90% del tráfico de la página web proviene de teléfonos móviles. Ahí hay mucho por hacer, pero primero tenemos que cuidar la versión de escritorio. Sin ella, podemos crear la versión responsive. En cuanto al resto del proyecto. Contáctanos página, la página de pago. Esos son geniales como son. No me arriesgaría a cambiar nada porque funcionan bien como son. Bendito sea honesto, he hecho varios cambios en el proceso de caja bastante recientemente, así que hay poco que pueda hacer para que sea aún mejor. Todavía estoy reuniendo nueva información de Google Analytics con el fin de rastrear software. Pero de nuevo, el punto es que no diseñaremos esas páginas. Mejor dicho no los vamos a rediseñar. Con eso. Entendido. Hagamos una copia de la página principal, la que tiene el pie de página blanco, y por favor elimine todo el contenido en el medio. Entonces básicamente nos vamos a quedar con una parte superior e inferior de este diseño. También debemos cambiar el menú principal. Ya no estamos en la página principal. En cambio estamos pasando a los productos. Haz que ese elemento del menú sea naranja, y vuelve a colocar la línea debajo de eso. De acuerdo, la página del producto es importante en el sentido de que contiene montones de información, cómo la estructuramos es clave. Aquí es donde se hacen o pierden las ventas. Tenemos que ser claros sobre lo que necesitamos presentar, qué manera y en qué orden. Aquí hay mucho que desempacar, pero por favor tenga paciencia y espere la versión móvil donde nos meteremos en un montón de detalles. Por ahora, vamos paso a paso. Nos tomaremos un descanso y luego seguiremos con la versión de escritorio, que debe hacerse en cuestión de minutos, probablemente cuatro o cinco videos como máximo. Vamos a meternos en ello. 32. Preparación de la disposición para la parte principal de la página de la página de productos: Hola y bienvenidos de nuevo. Las listas están configurando todo agregando un rectángulo de 1200 píxeles de ancho. En cuanto a la altura, vamos con 300 por ahora. Los siguientes pasos son los clásicos. Deberían estar al 100% en tu memoria. Centrarlo primero y ante todo entonces habilitó el color del borde que piensan para el radio de esquina, es decir 15 píxeles. Por último, para esta posición, pensé en usar 10 píxeles para mantenerlo lo más compacto posible, pero creo que eso va a parecer abarrotado. Por lo que 20 días. La galería que actualmente está del lado izquierdo, creo que son las posiciones clásicas, así que no la cambiaré. Voy a mantenerlo como está. Lo que quiero cambiar es el espacio vacío alrededor de eso. Realmente no creo que eso sea necesario. Entonces hagámoslo. Duplicemos este rectángulo y redimensionarlo. Cambia de color, por supuesto, a cualquier gris aleatorio. Y pensemos en el tamaño. Termina con tu experiencia necesita entrar en juego. Piensa en lo que hicimos en la página principal y si es posible, apégate a esa relación de aspecto. Y eso es porque no quieres la foto corta y ancha en una sola página. Y luego cuadrarás uno en la segunda página, justo en la página de detalles del producto. Eso no tendría mucho sentido. Ahora si echamos un vistazo a nuestra cuadrícula, voy a la foto tenía 380 píxeles de ancho y 250 de alto. Empecemos con eso. Y dependiendo de cómo quepa nuestro contenido, lo agrandará, o tal vez lo haga 300 o lo que sea necesario. De acuerdo, Así que esto es 250. Ahora, no nos olvidemos de las coordenadas redondeadas. Obviamente el lado derecho debe estar cuadrado. Entonces tómate un momento y maneja eso. He visto bastantes diseños donde esta parte se acaba de omitir y eso es claro el error de ejecución. Por favor, no hagas eso. Entonces esto debería ser 15, 0, 0. Por cierto, estoy constantemente experimentando con mi diseño etiquetado. Por lo que no se sorprenda si el sitio web en vivo tiene un diseño de etiqueta totalmente diferente. De acuerdo, cosas grises. Pasemos al título. Copia pega eso y pensemos en el tamaño. El FAQ en la página de inicio se mostró en Poppins 26 bot haría. Te sugiero que utilicemos lo mismo aquí? Ese es nuestro H1. cierto, por favor ten en cuenta que potencialmente podríamos agregar ese estilo aquí en el panel de activos y luego aplicarlo de la misma manera que aplicamos los colores desde arriba. Para proyectos más grandes, probablemente usaría componentes lo que mis botones, el encabezado, y así sucesivamente. Eso es porque si quiero actualizar algo, los componentes me permitirían editar todo de una sola vez. Dicho esto, aunque esas características me ayudaron a trabajar más rápido que cortar esquinas, preferiría tomarlo más despacio y mostrarte todo paso a paso, el método anticuado. Solo quiero que sepas que XD tiene montones de trucos de fiesta, montones de formas de hacer tu trabajo más rápido. Por favor consulta mi masa XD de clase si te interesa eso. Volver a hojas mojadas, hojas, 50 píxeles entre el título y la foto, y probablemente 50 de las dos primeras. Ahora, eso es bastante, pero vamos a añadir las migas de pan a continuación. migas de pan son útiles tanto en términos de SEO, pero también ayudan a guiar al usuario. Esto muestra dónde se encuentra en la página web. Es algo bastante viejo, pero todavía se está usando hoy en día. Poppins regular 11 pixels. Pero los dos primeros ítems deberían ser enlaces. Eso significa que deben ser semi atrevidos y anaranjados. Por cierto, en la página de inicio para la descripción principal, ¿utilizamos negrita o semi bowl para el enlace? No estoy seguro, pero considerando con usar semi negrita aquí y eso es lo que hicimos para el mayor preámbulos. Creo que deberíamos actualizarlo porque de nuevo, la consistencia es bastante importante. Está bien, todo bien. Sigamos ajustando los espaciados aquí, 20 en la parte superior y entre ellos. Bueno, no estoy realmente seguro. Vamos con sólo unos pocos píxeles porque tenemos montones de cosas que añadir. Vamos a agarrar la calificación del Producto Rojo y traerlo aquí. Por favor recuerda que agrupamos todo por lo que necesitamos controlar el negro. Y entonces podríamos tener que darle a la tecla Escape algunos niveles porque obviamente tenemos un grupo dentro del grupo. Entonces de nuevo, tómate tu tiempo con él y si es posible, usa el panel de capas. De acuerdo, cuando termines de posicionar, tendrá que aplicar la pizarra rosa que. Ahora la pregunta es, debemos dejarlo ya que es una estrella? ¿ Qué extendemos eso? Y digo que lo agrandamos porque esto no rompe la consistencia. Es el mismo diseño en una forma ligeramente diferente que se basa en su entorno. Ahora, esto tomará un poco de ida y vuelta, pero no hay nada especial. Sólo recuerda mantener la misma distancia entre las estrellas y por supuesto, centrándolas verticalmente. ¿ Y sabes qué? Cuando termines, por favor agrega este color amarillo al panel Activos si aún no lo has hecho, podría ser útil más adelante. La pregunta es: ¿Podríamos colocar este elemento en otro lugar? Bueno, me encantaría verte probarlo. Déjame decirte que no debes colocarlo a la derecha del título porque algunos títulos obviamente más largos y algunos son más cortos. Lo que podrías hacer es intentar colocarlo a la derecha de las migas de pan. Pero no estoy seguro de que eso funcionara demasiado bien. Encima de la foto AT creo que eso es un duro no. Entonces, para resumirlo, no tengo una mejor idea ahora mismo, así que la voy a dejar como está. De acuerdo, Tomemos un breve descanso y seguiremos en un momento. 33. Cómo organizar mucha información en la página del producto: Bienvenido de nuevo a nuestro proyecto. Aquí tenemos algunos elementos, pero hay mucho más que añadir. Aquí está la cosa en el sitio web existente. Aquí hay un fragmento que siempre dice lo mismo. Sin azúcar añadido, sin empaques de plástico. El funciona bien? Porque yo soy el cliente. Sé cuál es la razón detrás de ello. La idea es que la gente en el chat en vivo siguiera haciendo las mismas preguntas una y otra vez. ¿ Entregamos en CDA? De acuerdo, ¿qué pasa con el NCBI? Y la respuesta ahí siempre fue la misma. Estamos entregando a todo el país. Siguiente. ¿ Contiene leche de capullo? No, todo es monumental porque seguimos recibiendo esas preguntas. Yo los agregué aquí. Pero creo que hay una mejor manera de presumir este tipo de información. Usemos una marca de verificación. Ya tengo uno de plano icon.com. Todo lo que tenemos que hacer es redimensionarlo a 16 píxeles o pensar y hacerlo negro. Izquierda, alinearlo con todos los demás artículos, y lo desglosaré. En primer lugar, por favor note lo importante que es que alineemos todo correctamente. Es como si tuviéramos líneas verticales recorriendo todo el diseño. Esto en realidad es un banco real y se llama la grilla. Realmente no uso una grilla y ya no puedo decir que lo recomiendo porque, ya sabes, para principiantes, te quita el enfoque del diseño real para los usuarios avanzados. Bueno, ya tienes esas líneas, esas líneas verticales en tu mente mientras estás trabajando. De acuerdo, volvamos a ello para el texto, Vamos a usar tanto el regular. Y sugiero que agrupe a estos dos para que podamos distribuirlos fácilmente. Cuando haces grupos, es mucho más fácil distribuirlos. Inicialmente quería sólo tres artículos, pero debido a que esta zona es tan amplia, iré con sexo. De acuerdo, de vuelta al color de las marcas de verificación. Podríamos usar el verde porque así los ven típicamente escribir una marca de verificación verde. Verde implica que todo está bien, ¿está bien? Y podrías estar tentado a usar verde y decir algo como, hey Chris, ya sabes, el verde está fresco. Todo se trata de la naturaleza, está en este alimento saludable, todo sobre que una alimentación sana igual a verde? Sí, estarías en lo correcto. Pero los principios detrás de nuestro diseño, nuestro esencial, ¿tenemos verde en cualquier otro lugar? No. ¿Se ajusta al esquema de colores actual? No. ¿ Deberíamos modificar el esquema de colores para que encajara? ¿ Y bien? No, en realidad no. Es decir, realmente no podemos cambiar esta naranja ya que es las marcas significan coloreadas, ni podemos cambiar todo el negro que hemos usado. De acuerdo, entonces se podría decir, hagámoslo naranja. El descanso se va a quedar más bonito de esa manera. Bueno, sí, a lo mejor se va a quedar más bonito. Pero, ¿hay acción aquí? No, no puedes recogerlos. Pero más que eso, lo más grande es que esto tendrá aquí un botón Agregar al carrito, ¿verdad? Adivina de qué color va a ser? Naranja, por supuesto, con sobre el controlador de cantidad. Yap, probablemente naranja también. Por eso, no queremos ninguna competencia. Tenemos una foto a la izquierda que se desplazará automáticamente y aquí va a haber mucho color. Las, tenemos pan rallado y las estrellas. Entonces esa es la razón por la que queremos mantenerlo simple. Volver al diseño. Está bastante claro que esta altura no va a funcionar. Aumentémoslo a 280. Selecciona ambas formas y pon ese nuevo valor. Estamos creciendo poco a poco para que no cambiemos demasiado la relación de aspecto de la foto. De acuerdo, Ahora vamos a copiar la carga de la cabecera y colocarla cerca del borde inferior derecho para mantenernos consistentes. Mantendré exactamente el mismo tamaño, sin embargo, para ser justos. No sería gran cosa si usamos el botón de diferente tamaño. Quiero decir, incluso SSID ahí, ese botón más pequeño para el encabezado y el mucho más grande para el llamado a la acción desde el área de héroes. De acuerdo, aquí hay un truco limpio. Digamos que quieres ajustar estas seis marcas de verificación, pero seleccionarlas es difícil. A pesar de que los tenemos en grupos. Se puede hacer clic en el rectángulo blanco en el rectángulo base y utilizar Control L. Con la L soportes para la cerradura. Ahora puedes seleccionarlos y moverlos. Cosas fáciles. Esto es pesado, puede mover montones de cosas sin destruir tu diseño. Cuando hayas terminado, usa Control L una vez más, o haz clic en este icono para desbloquearlo. muerte de Gray. Tiempo para un descanso rápido y luego terminaremos con esto. 34. Cómo añadir pequeños detalles que maren una diferencia: Hola, hola. Yo quiero asegurarme de que nos tomemos nuestro tiempo con este rediseño y que hagamos un gran trabajo. Busqué un icono para la galería para mostrar al usuario que puede ampliarlo, hacerlo blanco puro, y redimensionarlo a 16 por 16 píxeles. No estoy seguro si esto va a ser lo suficientemente visible para todas las fotos, pero voy a arriesgarme. No soy un gran fan de agregar bordes o incluso soltar sombras en este tipo de elementos. Porque tengo el control directo de todas las fotos. Me aseguraré de que siempre tendré un fondo oscuro para la posición a 20 píxeles de distancia del borde está totalmente bien. Entonces eso es lo que el lado derecho, un pequeño detalle, pero ayudará tanto al usuario como al desarrollador cuando llegue a trabajar. Para el otro lado, quiero los datos de fila que muestren cuántas fotos hay disponibles. Usar la herramienta Elipse para que ocho por ocho píxeles debería ser lo suficientemente bueno. El primero debe hacerse naranja para indicar que esta es la posición actual. En tanto que los otros, tal vez tres o cuatro, pueden ser blancos. De acuerdo, buenas cosas. Cuando hayas terminado con eso, por favor agruparlos y coloca este grupo a 20 píxeles de los bordes izquierdo e inferior. Cosas clásicas. Aquí está la cosa. No podríamos haber agregado, el estado activo para el menú principal. Todos estos pequeños detalles se suman, y les animo a que hagan la milla extra. Esto vale un 5% más de esfuerzo para el 20 por ciento mejor diseño. tus clientes les gustaría más el diseño. El desarrollador te apreciará más. Y sabes qué, aunque eso no suceda, esto sigue siendo una entrada para tu portafolio. Entonces realmente hay que poner las cosas en perspectiva. De acuerdo, terminamos con esta parte. Manejemos la cantidad. Usaremos los mismos símbolos más y menos de la página de inicio de la sección de preguntas frecuentes. Copiarlos y veamos qué podemos hacer con ellos. Usaré control shift click porque el segundo elemento está en un grupo, así que enviado solo no haría la pista. Está bien. Tómate tu tiempo con él, seleccionándolos. Y por eso dije al inicio del curso que deberías verlo dos veces. Una vez para entender lo que está pasando, y una segunda vez para trabajar porque la base es bastante alta. De acuerdo, por favor hazlos ambos naranja y vamos a redimensionarlos a 32 por 32 pixeles. Ahora podrías preguntar por estos cambios. ¿ Por qué no mantenerse consistente, verdad? Con cambiar tanto el color como el tamaño? Bueno, aunque estos lucen igual, realizan una función muy diferente. A decir verdad, podríamos haber sustituido los símbolos de FAQ por flechas. Entonces eso no sería ninguna pregunta al respecto. Pero esa es la razón por la que estamos aplicando un estilo diferente. Estos tienen una función totalmente diferente en comparación con la sección FAQ. Entonces porque es algo diferente, por eso estamos aplicando un estilo diferente. si acaso el fondo te está causando algún problema. Por favor recuerda que puedes bloquearlo entre estos dos artículos. Te sugiero que dejes lo que los Pexels también para el texto entre ellos. Bueno, creo Poppins 26 regular. Yo usaría negrita porque puede ser un poco mejor, pero creo que eso es un poco demasiado grueso para ser honesto. Incluso el título parece un poco demasiado grueso. Estoy pensando en cambiarlo a semi audaz, pero podríamos experimentar con eso más adelante. Por favor, agrupe estos tres cuando haya terminado. Por el precio, sumémoslo en. En mi país, Rumania, Es algo común ver el peso del producto justo al lado del costo. Usamos bastante el euro, pero aún tenemos nuestra propia moneda. De acuerdo, Para el formateo 22 pixels, semi negrita para la primera parte. Después 14 píxeles regulares para el peso real. Aquí es donde las cosas se ponen interesantes. Tenemos mucho espacio vacío aquí. tenemos que asegurarnos de que todos estos artículos estén todos en la misma línea, por supuesto. Pero esto es lo que propongo y es un cambio bastante grande después de agregar el producto al carrito. Vamos a tener una carga aquí que te lleve a la página de pago. Déjame manejar eso haciendo una copia de este botón. Esta idea acaba de llegar a mí y con ejecutar bien porque así es como debes pensar. Eso debería funcionar. Si tienes una idea, solo mira cómo se ve. Ahora, creo que vamos a usar el mismo azul que en el pie ahí. Ahora, ¿por qué es esto un gran problema? ¿ Este botón? Bueno, en la virgen existente, el icono del carrito sólo se muestra en el encabezado. En realidad ni siquiera lo incluimos aquí porque creo que solo aparece en la antigua página web cuando añades el producto a tu carrito. Ahora seguramente se incluirá en la versión móvil aunque. De todos modos, volviendo a esta carga, en lugar de agregar otro rectángulo debajo del encabezado, creo que esta solución es un poco mejor. Este botón azul aquí. También lo he visto en varios sitios web. Entonces creo que es una idea decente. todo, esto es lo que propongo para la página de detalles del producto. Bueno, la parte superior de todos modos, aún queda más por hacer, pero esta fue la parte más esencial. El área debajo de nuestros caminos año y es solo cuestión de, de peinar algunas fuentes. ¿ Qué opinas? ¿ Estás contenta con ello? De nuevo, me muero por ver lo que se te ocurre. 35. Cómo manejar grandes cantidades de texto: Bienvenido de nuevo a nuestro proyecto. Se hace la parte superior y estoy bastante contento con ello. Bajemos y crearemos las dos columnas. Aquí están las matemáticas, 1200 píxeles con una brecha de 20 píxeles. Entonces eso es 1180. Estoy pensando 330 para la barra lateral y el resto para la columna principal. Y eso es 850. De acuerdo, consigue la herramienta de rectángulo y pongámonos a trabajar. Entonces 850 por, digamos mil, mil píxeles para la altura h debería ser suficiente. Por favor a la izquierda alinear eso con la guía y redondear las esquinas a 15 píxeles. Por cierto, la unidad de medida no se muestra aquí en Adobe XD porque todo está en píxeles. Adobe XD es sólo para productos digitales. En Photoshop, obviamente puedes imprimir tus diseños para que tengas más unidades de medida para elegir. De acuerdo, por favor aplica el trazo rosa y vamos a configurar el título sobre este trabajo de parto. De acuerdo, déjame hablar de la jerarquía, de la versión ultracorta. El título principal se muestra en el balón Poppins 26, ¿verdad? Es el título secundario como importante, obviamente no lo es. Entonces no podemos usar el mismo tamaño que necesitamos el más pequeño. Pero ¿cómo pequeña madera 24 y funcionan? No, porque sería demasiado similar para la persona promedio. Los títulos podrían verse iguales entre 2006 y 2004. Básicamente es lo mismo. Por eso iremos con 22, porque es claramente diferente, claramente es más pequeño. Y eso es jerarquía en pocas palabras. Colócala a 30 píxeles de los bordes superior e izquierdo mientras son DNR 20. De lo que utilizamos para la brecha, porque tenemos mucho espacio aquí y sería una lástima no hacer que el diseño se sienta aireado. Está bien para el texto corporal, esto obviamente es súper importante. Basado en el primer párrafo y menos comprobar el formato. Te sugiero 14 píxeles como antes usábamos, regulares y para la altura de línea, 23, dejan unos 10 píxeles entre el texto y el título. Eso debería ser suficiente. También tengo aquí un video que necesita ser mostrado. Por lo que preparé la captura de pantalla que puedes arrastrar. Ten en cuenta, no es una gran idea hacer videos lanzados mall. El diseño no parece funcionar tan bien cuando divides esta sección en un par de partes. Por ejemplo, el video de la izquierda y el texto de la derecha. Potencialmente podrías hacer que las formas de video sean más pequeñas, y eso puede funcionar mejor, pero prefiero este diseño de ancho completo. Creo que se ve mejor. De acuerdo, Aceleremos esto porque tenemos bastantes cosas más. El mango. Para el resto de los textos corporales, necesitamos asegurarnos de que incluimos el enlace y otro título. Si estás familiarizado con el HTML, el título principal desde arriba es considerado el H1. El título de 22 píxeles es H2, y necesitamos un H3 también. Te sugiero Poppins 18 semi negrita. La idea es que entiendas esa importancia con sólo mirarlos. No debe haber confusión respecto a lo que es más importante. De acuerdo, por cierto, debes aumentar la base, rectangularlos 1 mil píxeles a unos 1300 más o menos. Tan solo asegúrate de dejar un hueco de 20 píxeles desde el pie de página. Es posible que también necesites ajustar el nuestro tablero, pero tómate tu tiempo con él. No es nada complicado. Siempre y cuando estés cómodo con el control desplazamiento y golpeando la barra espaciadora para desplazarse, deberías estar bien. No hace falta decir, por favor use ambas manos en todo momento. Eso es obviamente crítico. Está bien. Y con eso, tomemos un descanso rápido y seguiremos en solo un momento. Gracias. 36. Crear el plano de la barra lateral: Hey ahi, Bienvenido de nuevo. Consigamos la herramienta de rectángulo y pongámonos a trabajar para la barra lateral. Anteriormente dijimos que el ancho de este elemento tiene que ser de 330. El alto, bueno, alrededor de 500 píxeles para empezar, debe ser bueno, redondeado y aplicar el borde. Como siempre, quería una conferencia especial sobre la barra lateral porque puede confundir a algunas personas. Comience con un título que diga ingredientes. Esto se debe establecer en Poppins, 13, semi negrita todas las tapas. Esto será en H4. Dijeron 20 pixeles desde el borde. Y ahí es donde las cosas empiezan a cambiar frente a la columna de la izquierda. Avanzando hacia abajo los ingredientes reales, Poppins 13, regular con la altura de línea de 21. Pero a la izquierda, utilizamos 14 píxeles con una altura de línea de 23. Entonces, ¿por qué estamos estilizando conseguir de manera diferente? ¿ No estamos rompiendo consistencia? ¿ Deberíamos mantener nuestro estilo? Tienes razón. Deberíamos mantener nuestro estilo, por ejemplo, en cuanto a cómo un vínculo como se muestra. O si aplicamos un tratamiento all caps a un botón, deberíamos aplicarlo en todas partes. Pero aquí está pasando algo más. Nuevamente, todo se trata de jerarquía o importancia. Esto es lo que pasa. La mayoría de la gente se decidirá si el comprador asiente de este elemento en la parte superior. Algunos podrían mirar aquí a la izquierda y sólo un puñado de personas mirarán la barra lateral. Sé que puede que no esté de acuerdo con esa afirmación, pero está totalmente bien. Puede que seas una de esas personas que mira la mesa nutricional en primer lugar. Seguro. Entiendo. Eso no son excepciones. Pero la mayoría de la gente escanea la página y es muy probable que Dale se comporte como describí. Debido a que esto es de baja prioridad, necesitamos demostrarlo a las opciones de diseño web. Es por ello que el texto es más pequeño. Es por eso que no hay un relleno más grande como en el otro lado. Pero el ancho en sí, solo 330 píxeles, debería decirte que tu espacio es limitado y que no debes exagerar con tu relleno. Seguiré trabajando. Pero aquí hay una cosa de la que realmente deberías estar al tanto. En la tabla real. Necesitas aumentar mucho la altura de la línea. Si el texto es de 13 píxeles regular, vaya con al menos 30 para la altura de la línea. Por otro lado, si estás pensando en usar 40 o incluso más que eso, es posible que necesites la división ahí para cada fila. Si quieres el diseño moderno, debes mantener las líneas al mínimo. Entonces no hay separadores. A mí me gusta agregar dos líneas para el jefe de la mesa, pero eso es por eso. Cuando comienzas a incluir líneas para la cada fila B en la sólida o la línea punteada, el diseño comienza a desordenarse. Menos decoración es el camino a seguir en los sitios web de hoy. En el pasado, en algún lugar de 2010 viejo. Por lo que nos encantó agregar todo tipo de detalles. Las cargas en particular tenían tantos efectos brillantes, efectos 3D, sombras y biseles y todo tipo de cosas. Eso no te convierte en un diseñador sin embargo. No debes tener miedo de mantenerlo simple. Algunas cosas somos mejores en esa forma más simple. Piensa en esta mesa como una camiseta blanca. Mantenlo bonito y limpio. El uno, una chaqueta encantadora, unos bolígrafos que te quedan bien, y luego tendrás un gran atuendo. Pero lo que los principiantes tienden a hacer es que quieren que cada elemento quede borrado. Pero si cada elemento tiene muchos detalles, tu atuendo se va a ver desordenado, va a ser a gritar. Por esa razón, por favor no exageres con los otros paquetes. De acuerdo, Esta es una mesa nutricional impar. Una idea para la variación del préstamo es mostrar el número de calorías de alguna manera una fuente más grande, tal vez junto con los carbohidratos, proteínas y grasas. Esa es una forma de hacerlo. También podría tener un botón que cambie la tabla por 100 gramos o el para todo el frasco. Eso puede ser interesante también, pero te lo dejo porque quiero mover qué palabra con un diseño responsive. Gracias por quedarse conmigo hasta este punto. Te veré en un momento. 37. La primera clave para convertirse en un gran diseñador web: Bienvenido a la primera parte de lo que hace genial a un diseñador web. Y esa es la ejecución perfecta de píxel. A modo de recordatorio rápido, esta es la base de cualquier diseñador de UI y no debes seguir adelante a menos que seas hábil que este departamento. Déjame mostrarte rápidamente qué es lo para que sepas lo que puedes esperar de este curso. Esto es lo que llamo errores de ejecución. Contraste adecuado con un formato de texto siendo componentes sobredimensionados, elementos que no coinciden con el espaciado inapropiado para las opciones de fuente, falta de consistencia, errores ortográficos o errores tipográficos, esquemas de color subpar, fotos incorrectas, diseños no estándar falta de simetría y equilibrio, más algunas otras. Ahora, sé que estos son los lotes que vuelven a tener, pero tendremos montones de ejemplos que despejarán todo bien. Ahora mismo, Es sumamente importante que entiendas que estos son esenciales. Hay que ignorar esos otros dos pilares. No hablaremos de crear hermosos diseños y Phil podrá ejecutarlos correctamente. La precisión es clave y todos estos errores se pueden evitar con sólo poder reconocerlos. También tendrá algunos ejercicios aquí y allá. Pero la clave para llevar aquí es que tomes notas mentales y te des cuenta de que estos son los graves errores. Simplemente poder localizarlos mejorarás dramáticamente tus proyectos. El objetivo de esta sección es meterte en esa mentalidad donde puedas notar errores menores con facilidad, su glutamina de entrenamiento para buscar cosas específicas. Entonces, pongámonos a trabajar. 38. Los mejores ajustes para un proyecto de diseño web: Hola y bienvenidos a esta conferencia donde hablaremos de lo que considero que es la mejor configuración para el proyecto de diseño web. Ahora ten en cuenta que nada está escrito en piedra. Esta es una guía basada en mi experiencia. Entonces, por favor, ten eso en cuenta. Y nunca pidió las medidas como, Chris era el mejor tamaño para el menú principal. ¿ Y el titular? Esos no existen. Pero esto es lo que sí necesitas saber. Para la altura mínima, 1200 píxeles es una buena regla de oro. El máximo de altura, diría no más de 8 mil pixeles porque rara vez se quiere que la gente se desplace tanto. Para el ancho total, te sugiero que uses 1920, nada más. En cuanto al área activa, considero 1200 píxeles la mejor opción por mucho para la gran mayoría de los proyectos. Ahora, eso es amor y números, pero déjame explicarte. Entonces aquí hay otra pizarra que es 1920 por 1080. Este tamaño es lo que se llama full HD y es la resolución de escritorio más popular en el mundo. Esto significa que si trabajas en esto con y miras el diseño a nivel de zoom al 100%, llegarás a ver el proyecto para hacer tus ojos de los visitantes. Esto es increíblemente importante. Tienes que analizar tu diseño como el usuario final. No quieres verlo en su mejor lado. Es por eso que no soy fan de acercar y diseñar así durante horas y horas. Creo que ya has visto que cuando trabajo uso constantemente Control 1 para volver al nivel de zoom del 100%. ¿ Por qué estoy haciendo eso tan seguido? Porque así es como los visitantes van a ver tu proyecto al 100%. Nadie se acerca y echa un vistazo a todos los detalles minuciosos que has incluido. Si no son visibles al 100%, entonces es un error. El hecho del asunto es que no tienes diseñando sitios web para sus francotiradores principales. Por lo tanto, ten eso en cuenta. De acuerdo, Ahora puede que veas la inalámbrica Full HD. El más popular, está lejos de ser la mayoría. Aquí hay otros tamaños de pantalla, especialmente debido al uso del portátil. Por lo que los ingresos que derm área activa, esta zona entre estas dos líneas verticales se llama el área activa. Este es el lugar donde ponemos todo nuestro contenido. Permítanme explicar por qué el caso para una captura de pantalla de pague pals sitio web. Como puedes ver, nada Eso es importante repasa estas guías. Todo el contenido está aquí en este espacio en particular. Y de nuevo, eso es por estos otros tamaños de pantalla. Por ejemplo, 1366 por 768, una resolución muy popular para portátiles. Debido a que el ancho es mucho menor, los lados se cortan, pero eso no es un problema ya que la parte crítica de este año, esta parte de la imagen se puede ocultar sin perder nada importante. No es contenido lo que es obligatorio no es algo realmente importante. Está muerto con fines decorativos, y eso es todo. Es por ello que colocar contenido en 1200 píxeles es una buena opción. Pantalla con 1366 te mostrará todo el contenido mientras aún te da un poco de espacio a ambos lados. Ahora, probablemente conozcas todas estas cosas desde la primera parte del curso. Pero déjame contestar algunas otras preguntas. ¿ Se pueden utilizar otros valores superiores a 1200 píxeles para el activo en sí, No, en realidad no. No lo recomiendo. Ahora. Seguro. Se pueden encontrar algunos sitios web que usan 1400, 1600 lo harían aún más, pero esas son las excepciones, pocas y muy distantes. Ahora bien, ¿podrías ir por debajo de los 1200? Seguro. Por supuesto, once cientos, cien, diez cientos. Todas estas son elecciones decentes. 960 era un sistema de red muy popular en 2010 más o menos, pero ahora está realmente anticuado. El principal problema es por tener un diseño de nanohilos, no se ve tan impresionante, no es tan guapo. El caso es que, aunque fuera de estas guías, no tenemos nada importante, Nada esencial. El aspecto general más amplio es más agradable a la vista. Y los clientes típicamente son los más que impresionados por un más amplio el adelanto. Pero de nuevo, no más de 1920. Ahora vamos a explorar el lado diferente respecto a un proyecto de diseño web. Pensó que los componentes más comunes de una página web. Número uno, el encabezado, esta es la parte superior del sitio web que generalmente contiene el logotipo, el menú principal, y los pocos botones para el registro del usuario, tal vez un carrito de compras o acciones similares. En la cabecera. Es posible que también encuentres un número de teléfono o una dirección o iconos de redes sociales, pero esos se suelen colocar arriba en la barra superior. El segundo componente es la barra superior aquí que podría encontrar el número de teléfono y direcciones iconos de redes sociales y cosas como esta. Esto suele ser muy corto y realmente no se destaca tanto. El siguiente componente, número 3, es el área de héroes. Esto se considera típicamente la parte más importante de un sitio web, ahí el nombre Hello Ed. Sí, es el Superman, si se quiere. Puedes esperar aquí encontrar el titular, subtitular o la descripción. Una o más cargas de forma. A veces un video tal vez como fondo, pero generalmente una foto grande que ocupa todo el ancho. Ahora, el objetivo del área de héroes es captar la atención del usuario y hacerlo. Pero para la acción humana, ya sea por algo, registre el relleno el formulario o cualquier cosa de esa naturaleza. A continuación, inmediatamente debajo, tenemos un sub-encabezado con la ginebra. Este término no es tan popular como los otros, pero describe la posición del elemento dentro de la página web SOB él aunque. Por lo que debajo del área del héroe, típicamente este componente continúa la idea desde el área del héroe y la expande, da más detalle al respecto. Ahora, el siguiente gran componente es el contenido real, donde se puede esperar encontrar un montón de cosas como testimonios, Preguntas frecuentes, galerías, formularios, extractos de registro, diversas cosas de todo tipo. Entonces básicamente solo llamamos a esta parte del área de contenido. Entonces básicamente todo lo que acabo de describir, puedes colocarlo bajo este paraguas, el contenido. Y finalmente en la parte inferior de la página web, se puede esperar encontrar el pie ahí. Eso lo puedes encontrar en formato de minuto, como lo ves aquí, cual no soy un gran fan. No recomiendo este tipo de formatos. Es limpio, decoración mínima y bastante corto. Pero la mayoría de la gente prefiere las medianas a las grandes. Esto se debe a que la mayoría de las empresas necesitan un lugar para las diversas longitudes como la política de privacidad, información legal, la información de la empresa, y así sucesivamente. Por lo que en conclusión, los componentes de un sitio web son el jefe de la barra superior, el área de héroes, el área de subito, aunque de nuevo, esto es un poco opcional, un área de contenido que puede ocupar muchos foros, y finalmente, un pie de página. Y con eso, hemos concluido esta conferencia. Te veré en un momento. 39. Estudio de caso: diseños no estándar: Bienvenidos a esta conferencia donde vamos a hablar algunos diseños que he recibido en esta cancha de mi comunidad de estudiantes. Todos los siguientes ejemplos tienen una ejecución equivocada común. Los diseñadores no usaron un diseño estándar. Veamos qué es qué. Este sitio web de robots de juguete nos muestra un diseño muy incómodo que se supone que es creativo. No hay cabecera, es decir, la sección superior que contiene el logotipo y el Menú Principal. Bueno, en realidad no hay menú principal del que hablar. Podemos ver que esto es una tienda, pero no hay componente de tarjeta de compra, ni vemos un botón de inicio de sesión o registro moviéndose hacia abajo. No hay fotón y para ser más exactos, no hay enlaces sobre la empresa, el proceso de envío, términos legales, etcétera. Este es un diseño que no sigue el diseño estándar porque la creativa pensaba que estaba siendo creativa. De hecho, se trata de un error de ejecución claro debido a que no se utilizó la estructura estándar de un sitio web. Pasemos al poker de cuarto. Aquí en realidad no se alejan. No, aquí el diseñador usó el tamaño de lienzo equivocado. Abriré eso hasta Alt Control C. Y podemos ver el ancho total del proyecto es de 800 pixels. Esto es incorrecto. En la conferencia anterior, decidimos dos opciones para el ancho total. Yo hice 1600. ¿ Qué, 1920? Eso es por todo el pensamiento. Eso es lo que el área activa, nos asentamos, 1200 píxeles. Aquí, el valor es mucho, mucho menor. El diseñador no se dio cuenta de que tenía este enorme problema. Probablemente porque dijo que su nivel de zoom a algo así como 200 por ciento mostró en este nivel, las cosas parecen mucho más razonables. Crees que esto es bastante decente, pero tu diseño tiene que verse genial, ese nivel de zoom 100%, porque así lo van a ver tus usuarios. Aquí hay otro diseño con el área de contenido no tiene ningún sentido. Esto es totalmente no estándar. Y si te rascas la cabeza al respecto y no puedes decir por qué hace el caso Aquí hay una pregunta muy sencilla que aclarará todo cuando tengas dudas, solo pregúntate lo siguiente. ¿ He visto este diseño en un gran sitio web mainstream? Ahora, ten en cuenta, arreglar el contenido de esta manera, izquierda, derecha, izquierda es bastante popular. Verás eso en montones de lugares, pero no cuando creas estas cajas y dejas todo este espacio vacío al lado de ellas, ¿eso tiene sentido? Entonces de nuevo, solo te preguntas si has visto algo muy similar en un sitio web grande, conocido, bailarín, siempre deberían serlo, sí. Eso no significa que estés robando o copiando. Eso es ser inteligente. Pasemos a otro sobre el encabezado. Bueno, esto no se ve tan genial. ¿ Has visto algo parecido en una web popular? Sí, mucho así. Pero eso no es un problema aquí. Podrías saltar el arma y apuntar hacia el ancho. En efecto, este es otro sitio web, pero 1200 ancho total sigue siendo algo razonable. En cuanto al área activa, eso es alrededor de cien, diez cientos píxeles, esos valores son entonces lo que recomiendo, pero aún estaremos en un rango decente. El problema real es con el tamaño. Mira el tamaño de este tipo. Es un monstruo. Si haces una comprobación rápida, verás que estamos tratando con casi 85, 100 píxeles. Eso es demasiado para mi gusto. Muchas páginas de ventas gimmicky recurren a este enfoque. Una sola página de una milla de largo que está lleno de contenido. Algunos clientes incluso los prefieren vender su dieta, construye suplementos o donde sea que sea producto tonto que quieran promover. Pero la mayoría de la gente odia los sitios web muy largos. De ahí que esto sea un error de ejecución. Solo echemos un vistazo aquí en el sub-encabezado con región. Esta zona es lo que, 600 píxeles de altura. Y para qué, no está espaciado tan bien utilizado para tres iconos y un poco de textos, 600 píxeles. Nuevamente, esto es manos abajo y error de ejecución. Pasando a otro aquí que quizá no te guste. Es de aspecto oscuro y todas estas fotos. Pero el verdadero culpable es el diseño no estándar. Aunque todo lo demás se ejecutara perfectamente al usar este diseño extraño, el diseño se ve comprometido. La gente espera ciertas cosas en ciertos lugares. En este caso, el menú principal debe estar en la parte superior derecha de la pantalla. Entonces ese es el tema más grande con este diseño en particular. Por último, tengo una más para ti que es un poco más controvertida. Aquí el diseño y tiene los componentes que antes presenté como estándar. El jefe de la curandera Wadia desaparecen aunque zona y contenido el pie de página ellos lo que no. Pero la forma en que todo está configurado es confusa y difícil de seguir. Si bien esto puede ser impresionante para cierto tipo de persona, ese diseño es excesivamente complicado debido a todas estas formas en las fotos que crean el look fangoso y ocupado. Nunca compartirás realmente con algo gana y si empieza otra parte. Nuevamente por el bien de ser creativo, no se siguió el diseño estándar en mi libro. Esto es un error de ejecución y como tal, este sitio web sacaría la comida de 10 en lo que a mí respecta. En general, estos son los pocos ejemplos de qué evitar con apenas empezar. Entonces, por favor, mantente atentos. 40. Ejercicio: crea un diseño de sitio web estándar: Bienvenidos a este ejercicio donde quiero plasmar el reto para ustedes. Aquí está la tarea. Quiero que crees un diseño de sitio web estándar mediante el uso de dos cosas, rectángulos y capas de textos. Si estás familiarizado con el término, me gustaría que crearas una alambrada. No quiero que se haga algo al azar. En cambio, quiero que uses PayPal, su sitio web como punto de referencia. También tienes una captura de pantalla adjunta al curso por si acaso actualizaron la versión en vivo. Esto es lo que busco. Arrancadores completos, quiero que creéis un nuevo proyecto que sea apropiado en tamaño, tanto en cuanto a altura como a anchura. A continuación, quiero que definan el área activa. Por último, la parte más importante, me gustaría ver cómo te las arreglas con dimensionar tus elementos. Por ejemplo, debe el rectángulo que define la cabeza de la carne de res 100 píxeles o los 150 píxeles de altura. ¿ Qué tal el logo? ¿ Eso va a ser que los píxeles en 130 píxeles? Por eso quiero que hagas este ejercicio. Planteará muchas preguntas que seguramente te ayudarán en tu viaje de diseño web, ¿verdad? Por favor, ponte a trabajar y sube tu diseño como PNG o JPEG en la sección de comentarios. Muéstrame que estás comprometido con las canchas y que realmente quieres aprender. Aunque no creas que esto es duro o muy útil, por favor sólo hazlo por mí. Gracias y lo espero con ansias. 41. Cómo dimensionar tus elementos web correctamente: Bienvenido a esta conferencia donde quiero hablar de dimensionar correctamente los elementos de tu sitio web. Digamos que estás trabajando en un titular para el área de halo. Entonces un poco de textos que se supone que son bastante grandes. Algunos de mis alumnos me han preguntado qué talla deberían usar. Parece una pregunta decente ¿verdad? Después de eso, esperarías que sea algún tipo de guía con respecto a cómo dimensionar las cosas correctamente. Ya sea titular, una carga por delante del yen Helliwell, así sucesivamente. Para ilustrar por qué esa pregunta no tiene sentido. Aquí te presentamos nuestras dos capas de texto con el mismo contenido que tienen el mismo tamaño de fuente exacto para los píxeles. Sí, estas son del mismo tamaño, pero diferentes fuentes ocupan un espacio diferente por diversas razones, esto es normal. Como tal, la vaga pregunta, Chris, ¿qué tamaño de fuente debo usar para su titular? No tiene ningún sentido. Si estás usando este tipo de letra, diría que alrededor de 100 píxeles. Si estás usando este otro, el que yo recomendaría quizá 40 píxeles. Todo depende de una carga de factores. Esta fue mi larga manera de decir que no hay una guía definitiva de tallas. Pero después de más de 10 años de estar en este campo, he logrado reunir algunos trucos para ayudarte. En primer lugar, en cuanto a topografía, Google Fonts es genial porque permite ver un gran número de fuentes de un solo vistazo. Debido a que el controlador de tamaño es tan obvio, llega a ver cómo diferentes tipos de letra ocuparon sus respectivas cajas. Por ejemplo, Montserrat está claramente estirada. Por lo que si vas a espacio es limitado, esta puede que no sea una buena opción. Por otro lado, el Waldo condensado es claramente caer más compacto a medida que iba. Su nombre lo implica. Si bien en el tema de las fuentes, esa es otra fuente fantástica que está disponible para el suscriptor de Creative Cloud. Fuentes de Adobe. Nuevamente, esto es gratuito de usar solo si pagas una cuota mensual por el Photoshop, por ejemplo, el paquete de fotografía. Aquí de este lado de la pantalla, encontrarás un desglose interesante. Esto también puede ser útil si estás un poco inseguro sobre tu talla. Pero saquemos las armas grandes, la forma infalible de dimensionar y los elementos correctamente sin importar cuáles sean. Eso es comparar tu diseño con los sitios web de la corriente principal. Nada de fantasía, pero por eso esta es una técnica tan confiable. Aquí te explicamos cómo debes hacerlo. El primer paso es instalar algún tipo de extensión de navegador que permita crear rápidamente la captura de pantalla. Firefox tiene uno incorporado. Entonces todo lo que tengo que hacer es hacer clic en este ícono y elegir, tomar una captura de pantalla. Fue genial, es que se me da la opción entre capturar la parte visible. Entonces sin desplazarse hacia abajo justo lo que se ve aquí ni conseguir toda la página, hay una extensión similar para Chrome. Seguro que administrarás lo instalado. Es bastante simple. Está bien. Por lo tanto, visita cualquier sitio web decente que sea bastante conocido y toma una captura de pantalla. Usaré el lado de PayPal una vez más. Se va a guardar la captura de pantalla en mi escritorio, que es mi ubicación preferida, porque una vez que termine con el proyecto, puedo eliminar rápidamente todo, ¿verdad? Esto es algo presentado en esta cotización por uno de mis alumnos. Este botón escenas, grandes, bulbosas, lo comparan para pagar página web de compañeros. Arrastre la captura de pantalla en el interior. Y ahí es cuando se coloca una correctamente mediante el uso de las herramientas de alineación Lisa, solo su opacidad. Queremos ver ambos diseños al mismo tiempo que corrieron 50%. Deberías poder ver ambos proyectos. Observe la enorme diferencia. En caso de que esto no esté claro. El overdub grabación, los archivos se adjuntan a los acordes, para que puedas hacerlo tú mismo. Juega con varios niveles de capacidad. Y te sugiero encarecidamente que muevas uno de los diseños hasta que los botones se superpongan. Eso lo dejará claro como día, si estás tallando está apagado o no, aproximadamente es de 630 por 120, dar o tomar. Nuevamente, la idea es conseguir una estimación aproximada. Realmente no necesitas ser preciso con él porque estás buscando el número del estadio después de tener esos números en mente, 630 por 120 mide la abundancia. Sorprendentemente, eso es 330 por 50. Por lo que este botón rojo es aproximadamente el doble del tamaño. Eso tiene que traer algunas alarmas en la cabeza, entonces 20 por ciento más grande está bien. Está bien. Digamos un 30 por ciento más grande, pero el doble de tamaño. Eso es ridículo. Y esta técnica se puede aplicar absolutamente en todas partes para ellos por delante a fotones, desde botones hasta iconos, hasta capas de texto de cualquier tipo. Por favor pruébalo por ti mismo y mira cómo te las arreglas. Pero recordar es esencial. Tienes una forma rápida de guardar una captura de pantalla desde tu navegador. Avísame cómo te va en la sección de comentarios sobre este acorde. Diviértete con él. 42. Mi fórmula para el texto perfecto: Bienvenidos a esta conferencia donde quiero compartir mi fórmula para las capas de textos perfectos, específicamente para los párrafos o lo que me gusta llamar texto corporal. Aquí mismo tenemos la parte superior de un sitio web. Podemos ver este muro de texto es desagradable de mirar. Es literalmente un bloque de texto que parece, pero también inalcanzable. No querrías leer tal cosa aunque contenga información muy importante. Tacones mi punzón 12 que hará que cualquier capa de texto de menor grado. Número uno, la altura de línea hace el espacio vertical entre cada línea de texto. Esto es absolutamente crítico, pero es uno de los errores más comunes en el diseño web. Podemos verlo aquí. Esto se llama oficialmente préstamo, pero prefiero la altura de línea porque ahí está el teorema del CSS y es más descriptivo. De acuerdo, ahora mismo está configurado en automático, lo que significa que se ve horrible. Lo que quieres hacer es poner un valor específico, y ese es el tamaño de la fuente, por 1.5. Eso es todo. Esa es la primera parte de la fórmula para el texto corporal perfecto. La altura de línea es igual al tamaño de fuente por 1.5. En nuestro caso, eso es 20 veces 1.5. Por lo que 30. Pongámoslo. Observe la diferencia que hace. Al darle a cada rol más espacio para respirar, el texto se vuelve mucho más agradable. Bueno, pasemos a la segunda parte de la fórmula, formateándola. Ahora puede que el teorema no te diga mucho, pero esto es lo que significa. A, dividirlo en párrafos. Sé comprobar su longitud, c, comprobar su alineación. La primera parte es muy sencilla. Nunca debes tener más de tres a cuatro líneas de texto para cada párrafo. Encuentra el punto de ruptura natural. Por ejemplo, aquí mismo, y pulsa Enter hasta que obtienes un hueco. Esto es lo que estás buscando. De repente esto se ve así de mucho mejor. Tenga en cuenta que pasar a una nueva línea no es suficiente. Entonces esto de aquí es un error en mi libro. No, lo que realmente quieres es una línea vacía como esta, ¿verdad? En cuanto a los puntos B y C, la longitud y la alineación. Esto es lo que debes tener en cuenta. El largo significa que debe establecer un punto de ruptura si la línea es al menos el 40 por ciento del ancho de toda la capa de texto. Ahora, eso suena complicado, pero déjame mostrarte lo fácil que es. Eliminaré esa brecha y haré esto. Consulta aquí esta parada completa. Pondré mi punto de ruptura ahí mismo. Ahora esto es un error de ejecución. Esta palabra única no justifica toda una fila. No se ve bien, y no es un uso óptimo del espacio. Lo que tienes que hacer es asegurarte de que el punto de ruptura esté en cualquier parte de este lugar hacia adelante hacia la derecha. Desafortunadamente, no tengo ninguna explicación lógica. Simplemente se ve mejor de esa manera. Todavía en el punto B, comprueba su longitud. Nunca debes hacer nuestros párrafos extremadamente amplios. En nuestro caso, esta es la plantilla de 1200 píxeles. Tu cuerpo toma nunca debe gastar todo el ancho. Esto es feo y difícil de leer. Parece con mucho más inclinado a leer textos que es un ancho específico, decir alrededor de este tamaño. Por lo que la conclusión es tener siempre un punto C de capa PECS moderadamente ancho, la alineación. En la mayoría de las situaciones, dejó el texto de línea es la mejor manera de ir. Algunos diseñadores principiantes tienden a usar texto de centro de la línea porque sienten que se ve mejor. Pero confía en mí, hay muy pocos casos en los que eso tenga sentido. Se podría decir que esta es una de ellas. Pero en los proyectos del mundo real, el lado derecho del diseño se los deja fácilmente. Aunque ese fuera el caso, si comienzas a usar el texto de centro de la línea, tienes que decir consistente y usarlo a lo largo de tu proyecto. Y eso es un dolor y no es para nada ideal. Entonces deja que el texto de línea sea. Hagamos una recapitulación rápida. Para hacer que las capas de textos de párrafo se vean mejor. Es necesario numerar 1, establecer la altura de línea multiplicando el tamaño de fuente por 1.5. Por lo que 16 pixeles, eso requiere 24. Los píxeles para la altura de la línea, 18 serían 27, pero prefiero el remanente fuera a 28, 20 píxeles que la altura de la línea y así sucesivamente. Y luego número para dividirlo en múltiples párrafos. Consulta la última línea es decentemente larga. Asegúrese de que la capa de texto general allí no sea demasiado ancha y dejó la alineación. Antes de irnos, al menos conocer la importancia de la altura de la línea no se puede subestimar. La mayoría de los clientes utilizan el término abarrotado ocupado cuando ven capas de textos que se dejan en automático. Por otro lado, ir por algo como T2x tampoco es agradable de mirar. La motivación es clave aquí. Se quiere justo a la derecha, no demasiado apretado, no demasiado suelto. Si hay algo que regala tu falta de experiencia, lo va a hacer, cualquiera de estos extremos. Los textos corporales tienen que ser simples y elegantes. Deja que respire y te ayudará tremendamente. Al igual que una nota lateral rápida, utilizo esta plantilla como ejemplo. Pero en general, el texto corporal se encuentra debajo de la legión subito. Esto era más un bronceado, así que por eso lo usé. Nunca pondría dos párrafos de texto en la región media, y nunca recomendaría tal cosa. Pero de nuevo, esto fue más conveniente. De acuerdo, eso es todo por ahora. Sigamos. 43. Estudio de caso: capas de texto: Oye, ahí, Vamos a repasar algunos ejemplos de textos, capas de diferentes tipos para que puedas entender mejor qué es el trabajo. Empecemos con este diseño sombrío y oscuro. A pesar de que hay mucho que decir sobre diversas decisiones con las que no estoy de acuerdo. Deseo enfocarme en la sección Acerca de Nosotros. Aquí. Esto es casi perfectamente ejecutado. El título es grande e imponente sin ser abrumador. El texto del cuerpo es apropiado en tamaño con, pero también está cortado en varios párrafos. Seguro que podemos ver que hay algunas palabras extraviadas aquí y allá. Esos debieron haber sido corregidos. Pero por eso dije que esto es casi perfecto. Todavía en general, se trata de un cuerpo de textos que ha sido bien ejecutado. Pero pasemos a otro. Aquí. El tamaño es el tema. No sólo es demasiado estrecho, sino que también es demasiado alto. El caso es que si cortaras esto aquí mismo, entonces no tendría ningún problema con ello. Esas líneas de textos serían consideradas una breve descripción para cada servicio. Pero en su forma actual agregando un segundo párrafo, se desecha todo el saldo. Es desagradable mirar en vivo solo leer. Entonces esto es un error en mi libro. Ahora el grande. Pero si estás apuntando al diez, este tipo de cosas deducirá el 0.5. Veamos otro ejemplo a través de este diseño. Espero que puedan ver por qué fui tan inflexible en dejar una línea vacía por cada párrafo. Toda esta parte se siente bloqueada y sin refinar. Se puede ver el punto de acceso de tamaño de fuente y altura de línea en el título también es genial. A mí me gusta el llamado a la acción, que se establece en otro color y en negrita. Pero este texto necesita dividirse en varios párrafos, al menos tres en lo que a mí respecta. Pasemos a otro ejemplo. Por cierto, todos estos se toman del chat de discordia con alumnos de diversos niveles de experiencia. De acuerdo, aquí quiero enfocarme en la sección de blog. Si bien mayúsculas está bien para los títulos cortos como este titular por ejemplo, lo que ves debajo es un claro error. Tanto el título del artículo como la descripción tienen aplicada esta transformación en mayúsculas. Esto hace que sea difícil de leer y tu primer instinto es evitarlo. Es por eso que tantos clientes dicen algo así como, no sé, el diseño simplemente no se siente bien. No pueden articular estos pequeños temas. Pero créanme, son este tipo de cosas las que se suman y componen ese sentimiento. Entonces para el debate, está bien usar todos los gorras para títulos cortos. Por ejemplo, un sitio web muy popular, diseñador web depot.com utiliza este tratamiento de texto para algunos artículos. Observe aquí la palabra clave. Algunos artículos. Como se puede ver, esto es bastante corto. Solo hay unas pocas palabras, para que puedas entenderla fácilmente. Incluso aquí, donde tenemos tres líneas de textos similares al blog, las cosas son aceptables porque esta es una fecha. Entonces lo real que vas a leer noticias populares de diseño de la semana, cortas y dulces. Observe estos otros, ambos tienen un formato irregular. Entonces mi consejo, manténgalo sencillo. No intentes ser demasiado creativo con tus capas de textos porque en la mayoría de los casos, probablemente complicen las cosas sin resultado positivo. Por el contrario, puede hacer más daño que bien. Tan simple siempre es lo mejor. Pasando al diseño de sitio web de un bufete de abogados. Aquí podemos ver este texto corporal es decentemente amplio y se descompone en párrafos. El alto de la línea, mientras que no parece ser exactamente 1.5 veces el tamaño de la fuente. Sigue siendo bastante decente. Por cierto, el 1.5 es un punto de referencia. Podrías usar tan poco como 1.3 dependiendo de tus características de fuentes. Pero volviendo a este diseño, el problema aquí es con su tamaño. Esto es demasiado grande para el sub encabezado con la ginebra. Esto se basa que no se usa bien. Los textos corporales generalmente deben estar alrededor de 16 a 22 píxeles. Aquí. Estoy bastante seguro de que esto está cerca de 30, probablemente 26 o 28, nuevo, dependiendo de la fuente que se esté utilizando. Pero el hecho es que es demasiado grande. Te mostré cómo dimensionar los elementos correctamente en una conferencia anterior. Visita el sitio web mainstream, toma una captura de pantalla y la superpone con tu diseño. Si eres el elemento es 50 por ciento más grande o algo así, lo estropeaste. Si alguna vez has estado en esta cita, entonces me viste hablar con alguien. Probablemente me has escuchado criticar su altura de línea por eso, algunos diseñadores tienden a sobrecompensar. Por ejemplo, este diseño aquí, lo que hacemos está totalmente volado. El texto campos sueltos, estirados. Y porque aquí tenemos este otro camino, cual tiene una buena cantidad de linea-altura. Esto sólo lo empeora. Sí, ¿lo has oído bien? Debido a que un elemento está bien ordenado y otro no, todo el diseño se ve peor. Yo hubiera preferido que esta parte se alargara, aunque obviamente la situación ideal sería un multijugador de un punto cinco que se hubiera utilizado. Pero manteniendo los ojos aquí, esta área activa tiene 1200 píxeles de ancho porque el texto abarca todo el ancho. Esto es un error de ejecución. Este bloque sí parece equilibrado porque sólo tiene que ser líneas y la última fila es casi tan amplia como las otras dos. Pero aún así, esto no es ideal para la mayoría de los proyectos, para la mayoría de los clientes. Si tienes demasiado texto, el cliente necesita repensarlo y recortarlo. Con estos ejemplos en mente, espero que tengas mejor que mis anteriores lineamientos. Hay mucho más que decir, así que por favor no dejes de mirar. Todo el curso es un estudio masivo que poco a poco se desarrolla. Si te paras antes del final de la misma, no obtendrás el panorama completo. O peor aún, puede que se torzca. Entonces sigamos. 44. Contraste de colores: Bienvenidos a esta conferencia donde quiero hablar de color, específicamente contraste de color, idea de tacones. Tenemos esta plantilla familiar que se adjunta a esta conferencia. El fondo actualmente es negro. Y por eso, podemos ver todo perfectamente, el texto blanco, pero también el botón verde. Este es el contraste máximo. Esto es lo que quieres en todos los casos. Pero eso no significa que tengas que usar el blanco sobre el negro o el negro sobre el blanco. Eso sería demasiado limitado, obviamente. En cambio, hay que entender qué es el contraste. La definición es cristalina. contraste es el estado de ser notablemente diferente. Algo más. Tan notablemente diferente, si lo hacemos blanco, el contraste baja a 0. Para estas capas de textos, el botón sigue siendo de primera categoría. Podemos verlo claramente, pero ¿qué tal el encabezado? ¿ Eso es apropiado? La respuesta es un no resonante, esto no está bien. En mi libro, y de esto es de lo que quiero hablar. Cuando se trata de elegir colores, siempre hay que esforzarse por el máximo contraste. Esta parte, si bien la puedes leer bastante bien, no es estéticamente agradable de mirar porque no está cerca, cerca del máximo contraste. ¿ Qué tal si hago de este fondo el gris muy claro? ¿ Está bien esto? Ves, la mayoría de los diseñadores son los raros. Esto no es adecuado, pero no se dan cuenta de que el contraste debe tener uno o dos ajustes, máximo o muy cercano al máximo. Porque no piensan en estos términos. He visto innumerables diseños con este tipo de contraste de color. Esto es un muy claro el error de ejecución porque no se está aplicando el principio de contraste, tan notablemente diferente. Sí, se puede leer el texto. Sí. Algunas partes sí tienen el máximo contraste, pero no todo el asunto. Como tal, esto es un fracaso. Esto sucede sobre todo con los botones. Observe este precioso tono de verde que estoy usando. Los clientes suelen querer cargas brillantes que sobresalen. Debido a eso, los diseñadores inexpertos tienden a hacer lo siguiente. Van todo el camino aquí en el territorio neón donde la carga se ve horrible. El texto blanco se pierde en esta base de botones brillante. Y entonces el problema se convierte en el político al agregar trazos o la bola hueca cae sombras. Déjame mostrarte lo que quiero decir con eso. Esto es bastante común, lo creas o no, el diseñador, el sentido algo estaba apagado que tiene elementos son lo suficientemente inteligibles. Y luego recurrió a todo tipo de soluciones complicadas en lugar de simplificar las cosas. Estos trazos y sombras están grabando pegamento. ¿ Tendrías a MacGyver? Pero el diseño web moderno requiere un toque fino. Tu objetivo es crear un sitio web hermoso, no embellecer un diseño con toneladas de efectos. En cierto sentido, es como una camisa. La mayoría de los clientes quieren la simple camisa blanca, crujiente y hecha a medida nada gritando al respecto, pero se ve muy bien. Cuando estás abofeteando estos colores y efectos, lo estás convirtiendo en una camisa hawaiana falsificada cursi y te alejas de ella. Esto no es lo que la gente quiere. ¿ De acuerdo? Seguro que has entendido el problema. ¿ Cuál es la solución? Bueno, en realidad es más fácil de lo que crees US. Colores saturados de esta parte del recolector de color. Simplemente mira el diseño. ¿ Se dirige esto hacia el máximo contraste? Entonces estás bien para ir. Fue genial ya que una vez que has identificado tu lugar en el recolector de color, puedes moverte arriba y abajo por esta zona y aún así obtendrás resultados fantásticos. Entonces da esto sólo cambia el matiz. El brillo y la saturación siguen siendo los mismos. Por lo que esto significa que puedes experimentar con diferentes esquemas de color sin estropear tu nivel de contraste. Entonces esto es lo que buscas. Esto es lo que recomiendo respecto al contraste de color. Apégate a esta zona en particular y estarás bien para ir. Sigamos. 45. Estudio de caso: colores: Hola, hola. Hablemos de esquemas de color en el diseño web moderno analizando algunos ejemplos. Comencemos las cosas con un diseño de neón que te derretirá la cara. Esto está totalmente exagerado y no necesitas ninguna explicación para ello. Todavía deja abrir el recolector de color y ver con este código de color nos coloca. Como se esperaba. Estamos todo el camino en la parte superior derecha. Extremadamente saturado, seguro, pero también increíblemente brillante. Se puede ver que estamos al 99 por ciento. El caso es que soy un gran fan de este tipo de colores. Estos son un elemento básico del diseño web, pero sólo si se usan en pequeñas dosis y obviamente no tan brillantes. Por ejemplo, un botón de llamada a la acción podría balancear este código hexadecimal en particular o algo alrededor de esta área. Pero de nuevo, no un enorme rectángulo sólido. En cuanto a las capas de textos, bueno, eso obviamente está fuera de cuestión. Por lo general, la mayoría de las capas de textos deben ser de color blanco puro si se sientan sobre un fondo de color con un tono muy oscuro de gris. Nunca usaría tampoco 00, que es 100% negro. En cambio, prefiero cualquier cosa de esta región en particular. Tiendo a usar 33, 3 en la mayoría de los casos porque golpea ese equilibrio de ser legible mientras no ser duro o lo afilado. ¿ El problema con el negro puro, por cierto, se ve totalmente sin refinar, sobre todo en grandes cantidades, capas de texto IE. En general, se trata de una advertencia. Debe usar colores saturados brillantes, pero no para elementos grandes. Y si vas por esta ruta, baja por este lado del recolector de color, eso será mucho mejor. Ahora, pasemos a la otra cara de la moneda. El primero, azul como camino, éste es aburrido como el infierno. Me encanta el recolector de color porque nos cuenta la historia. Mira si estamos totalmente fuera de base. Pero déjame ponerlo de otra manera. Si vas a usar este tipo de colores, te estás saboteando con este color soso, lavado, deprimente como fondo, aunque el resto del diseño esté en punto, no obtendrías más de un seis fuera de 10 en mi libro. Cada color tiene un estado de ánimo asociado a él, cierta vibra con atmósfera. No me imagino qué tipo de empresa o el cliente estaría contento con algo como esto. Esto por sí solo destruye tu trabajo. Aquí te explicamos por qué cualquier otro color no funcionará bien. Ver esta naranja. Personalmente soy un gran fan de él y lo uso en muchos proyectos. Pero aunado a estos otros colores realmente no tiene ningún sentido. Hablemos de contraste para echar un vistazo al menú principal con el elemento Acerca o este titular. Por qué nosotros, de nuevo, si bien podemos leerlos, esto está muy lejos del contraste máximo. Podría preguntarse si está bien usar blanco puro. Y la respuesta no es cierto código de color. Simplemente caja ONU. Mira, si trato de usar el blanco, se pierde. Esta no es una buena cantidad de contraste. Pero el problema es que si vamos por el código de color muy oscuro, incluso eso no haga el truco. Te quiero dar otro ejemplo de cómo el color puede impactar drásticamente tu trabajo. El amarillo es muy limitante. Es raro ver texto blanco encima de un rectángulo amarillo sólido. Y eso es porque sólo hay un puñado de tonos que realmente funcionan. Por eso, la mayoría de las empresas prefieren usar texto negro. Entonces un contraste invertido, que generalmente no recomiendo. Y esas pocas empresas que usan el amarillo en el branding tienen códigos de color muy distintivos, que son fáciles de descubrir. Entonces, o bien directamente arriba, robas un código de color a DHL o al Hertz. De qué intentas y lo ojala y seguramente terminarás con una cantidad cuestionable de contraste. El regalo para llevar es que ciertos códigos de color son casi imposibles de trabajar. Si no sigues mis consejos y te pegas a esta parte del recolector de color. No importa si ejecutas todo va correctamente. Tu diseño todavía va a chupar. Me gustaría terminar la primera parte con algo que ha plagado a diseñador desde el principio de los tiempos. Bueno, al menos el inicio del diseño web. Por favor, no lo hagas. Repito, no bases tu esquema de color en el logotipo del cliente. Este es un ejemplo muy claro de un logotipo feo y anticuado que no debe utilizarse como punto de referencia. Si tu cliente tiene colores en su branding de la década de 1980, por favor hazte un favor y crea un esquema de color que sea fresco y moderno. Los logotipos se pueden ocultar, se pueden modernizar esas opciones. Pero si creas un diseño horrible sólo porque coincide con el logotipo, entonces has ido por el camino equivocado. Entonces volveré a decir esto. No bases tu esquema de colores en el logotipo del cliente. Si me envías un diseño con este error y trataste de justificarlo, creo que probablemente voy a mis zapatos o algo así. Está bien. Ese es el final de la primera parte. Dame un segundo y luego seguiremos. 46. Estudio de caso: colorores: parte 2: Bienvenido de nuevo. Empezaremos fuerte con este precioso ejemplo. Este es el tipo de contraste que estoy deseando en un diseño de sitio web moderno. Esta es una foto que tiene un efecto de superposición de color sobre ella. Probablemente se asentó alrededor del 70 al 80 por ciento porque la opacidad es tan alta, el texto brilla a través. Es fácil de leer, pero también es estéticamente agradable, que es totalmente lo que vamos a buscar. El texto corporal también es encantador. Tiene el tamaño de fuente y altura de línea adecuados. Me gustaría verlo en tres líneas, lo que significa que la capa de texto debe ser más ancha, pero sigue siendo un buen ejemplo. Bajando, de nuevo, esto es lo que significa para mí el máximo contraste. Debido a que los colores son tan intensos, el texto blanco se ve fabuloso. Me encanta totalmente. Ahora, hay algunos errores de ejecución aquí y allá. Los iconos de las redes sociales deben colocarse con el mismo estilo. Los títulos aquí deben ser un gris muy claro y así sucesivamente. Pero en general, este es un diseño fuerte que se puede mejorar fácilmente en menos de diez minutos. Pero ahora cambiemos de lado. Aquí te dejamos un diseño que no sigue mis pautas para esto. Nunca debes los textos subyacentes en un diseño de sitio web moderno. Esto se ve muy anticuado. A lo mejor sin embargo una palabra fuerte. Podría pensar en algunos casos en los que eso sería apropiado. Pero cuando estoy dando consejos, ip photo talk al 90 por ciento de mi público. Entonces, en resumen, no hay subrayado de ningún tipo. A continuación, nunca se agrega la sombra de gota a una capa de texto que está dentro de la carga. Se ve horrible. Aquí se puede ver el mismo tratamiento. Acabamos de hablar de amarillo y de cómo es muy difícil usarlo sin copiar literalmente un código hexadecimal de DHL o de alguna otra compañía de Jan. Aquí el diseñador, el propio bosque en una mala situación con este tono de amarillo. Nadie pidió este esquema de color. Probablemente vio el logotipo y se inspiró en él. Te apuesto un buen dinero. Nadie pidió este esquema de color en particular. Probablemente vio el logotipo y sacó Inspire de él, que es un pecado mortal. En lo que a mí respecta. Al bajar, podemos ver otro grave error de ejecución irá muy lejos del máximo contraste. Este gris claro es imposible de trabajar con. No se puede ir blanco puro. No puedes ir gris oscuro. Apenas cualquier cosa que hagas se verá torcido. En este caso, el diseñador no tuvo un toque fino. Entonces eso seguramente no ayudó. Estas sombras de gota y trazos son terribles. Es una situación en la que vas de mal en peor. Toda decisión de diseño que está mal se complica. Otra cosa que llamo a estos rectángulos base, actúan como una base para tu contenido. Ir por el color sólido nunca es una buena idea. Y aliviar o estamos usando la palabra nunca. Pero de nuevo, me siento muy fuerte por estas cosas. En el 90 por ciento de los casos, el rectángulo base debe ser blanco o un grado muy, muy ligero. Y cuando digo luz, estoy hablando de algo como esto. Ni siquiera yo podía hacer de este color en particular el trabajo. Es sólo una mala posición para empezar. El problema del contraste continúa con esta forma y estas capas de textos. Esta es la cinta adhesiva y el pegamento del que hablaba hace unas conferencias. En lugar de despejar todo este desorden, el diseño de optó por arreglarlo con palos y superpegamento. El resultado se siente barato y anticuado. Me gustaría pasar al siguiente diseño porque los errores no siempre son tan obvios. Por ejemplo, conseguir tus cupones es un problema en mi libro, un error de ejecución, sin duda al respecto. Todo el diseño debe ser femenino, ligero, antipático. Texto negro no tiene lugar lo hizo sobre el negro dice y luego línea punteada. Además si alguna vez quieres usar este tipo de efecto, haz que el rectángulo sea un poco más ancho para que no veas estos bits extra en el lateral. Mudándose hacia abajo. El precio tampoco tiene buen contraste. El negro sobre morado es terrible. Si quieres una regla, Es esto. Utilice siempre el blanco puro sobre fondos de colores. No amarillo, no verde neón, trato o cualquier otro color brillante. El blanco puro siempre es mejor para los botones, etiquetas, cintas, o cualquier otro elemento de diseño similar. Y mientras estamos aquí, nota el trazo azul alrededor de estos rectángulos. Eso se debe a que el fondo es lo suficientemente oscuro. Si el diseñador hubiera utilizado la superposición de color, no habría tenido este problema. Entonces, como puedes ver, un problema crea otros cinco. Pasemos a un error clásico que odio. Echa un vistazo a esta carga y titular en caso de que el contraste no esté cerca del máximo. Pero ¿se puede averiguar por qué el diseñador eligió estos tonos particulares de verde y rojo? ¿ Alguna idea? Ah, el logo de las canchas, escucha, este tono de verde es horrible. Es una mala elección. Putin es sencillo. Pueden mirar al recolector de color y verás un nivel de saturación que está por debajo del 70 por ciento u otro. El camino deportivo, está demasiado lejos hacia la izquierda. Mi consejo es que te inspires en lo que están haciendo las empresas más grandes del mundo. No digo que debas copiar los códigos de color, pero no verás que muchas empresas exitosas usen este feo verde en la identidad visual. Simplemente no funciona. A continuación, el contraste está sufriendo en todos los frentes, la cabeza debe ser blanca pura. Lo mismo para el rectángulo de menús principales, este botón debió haberse llenado. no hablar de que es demasiado pequeño para la acción principal en el área de héroes. Bajar por la sección de alambre, leer sobre negro es absolutamente terrible. Por eso dije que el blanco es el único camino a seguir. Aquí está de nuevo en este foro, horrible. Y luego vender al diseño web sólo por este principio que no se siguió. Ya no voy a detenerme en ello. Las curvas siento que me estoy molestando y quiero mantenerme positiva. Realmente me encanta el diseño web, hacerlo, enseñarlo. Y creo que la mayoría de estos problemas se evitan fácilmente. Claro, hay junto con lo fijo, pero esta sola cosa podría haber hecho la enorme diferencia. De acuerdo, finalmente, este último diseño es un caso donde la superposición coloreada simplemente no es lo suficientemente fuerte. Empezamos con ese diseño que tenía ese Dios apenas contrastaba blanco y morado. Fue llamativo, memorable, hermoso con aquí. Ese no es el caso. El área de héroes es estos aseguran que podrían haber sido mejores. Pero echa un vistazo aquí. En primer lugar, verde neón sobre rosa. No es exactamente ideal. Es por eso que dije que solo debes usar el blanco sobre cualquier fondo coloreado por estas situaciones. En cuanto a la superposición, Es simple, no es lo suficientemente fuerte. Esto podría haber sido un buen diseño, pero tristemente, algunas opciones en términos de color realmente lo derribaron. En general. Esa es mi opinión sobre los colores. Ya sabes, pueden hacer o romper tu diseño. Mi consejo es ser inteligente y no te encuentres. No utilices el logotipo como punto de referencia y asegúrate de ir siempre por el contraste máximo. Pero cuando diga max, por favor no vayas por la raíz de neón. Esto también es horrible. Y nunca use otros colores de texto excepto el blanco cuando se trata de colorear el fondo. Entonces ese es mi consejo. Buena suerte. 47. Cómo alinear elementos en el área de héroes: Bienvenidos a esta conferencia donde quiero hablar de alinear las cosas correctamente en Photoshop. Esto se reduce a un saber lo que se necesita hacer y estar sabiendo cómo hacerlo. Esta charla sobre la primera parte. En este diseño. Podemos ver que no se utilizaron las herramientas de alineación. ¿ Cómo puedo saberlo? Bueno, porque esto no es un proyecto de capa, la herramienta Monkey es mi mejor amigo. Ahora, en el área de héroes, podemos ver que hay una enorme diferencia entre esta parte de aquí y esta parte de aquí. Entonces ese es un sorteo muerto. Esto es una mala alineación y es un claro el error de ejecución. Al avanzar hacia arriba, hay falta de equilibrio y simetría debido a los iconos de las redes sociales. Pero aunque los ignoremos, el logotipo no está alineado con este rectángulo. En realidad se desplaza hacia abajo. Pasemos a otro caso. Aquí, estos pocos elementos deben considerarse como un solo elemento. Como tal, esto tiene que estar centrado verticalmente en la idea del halo, lo que significa este rectángulo. Porque eso no sucedió. Obtenemos esta enorme brecha que lo tira todo. Personalmente, puedo sentir que algo anda mal, aunque vea el diseño desde el otro lado de la habitación. Eso es lo que no alinear las cosas te hace. Crea una tripa sensación de que algo anda mal. Y como dije antes, los clientes realmente no saben articular estas cosas. No saben cómo decirte lo que está mal. Simplemente no tienen el entrenamiento para señalar estos errores, pero sí saben que algo no se ejecuta correctamente. De acuerdo, moviéndose hacia abajo, Aquí hay otro caso donde vemos una brecha bastante sustancial no se refleje en la parte superior de la galería. Eso es una pena porque esta parte pudo haber sido algo especial. Tal como está, estas imperfecciones menores hacen que parezca áspero alrededor de los bordes. Lo más grande es que esto tarda unos cinco segundos en corregirlo, es realmente así de fácil. Ah, y apenas unos píxeles hacia abajo, podemos ver otro caso en el que estos elementos se desplazan hacia la parte superior. No tienes que ser obsesivo compulsivo para poder detectar estas cosas. No es que tengas un problema para la única cosa, todo alineado correctamente. Es solo una de esas cosas fundamentales encima de las cuales se construye cualquier gran sitio web. Ahora, vamos a ensuciarnos las manos con B, sabiendo alinear las cosas. Y a medida que pasemos por las técnicas, te mostraré algunos otros casos. Aquí tienes una plantilla familiar. Lo primero que tenemos que hacer es lo esencial absoluto. Tenemos que utilizar la técnica Control Shift click para multi-seleccionar estas capas y establecer la línea vertical imaginaria izquierda. Esto es alinear las cosas cuando uno, y ya hemos hablado de configurar el área activa antes. A continuación, cualquier botón requiere que seleccione ambas capas y utilice una línea de centros horizontales y verticales. Nuevamente, esto es muy básico. Ahora aquí es donde se pone complicado. Hemos entendido que estos tres elementos forman un solo elemento y que tiene que estar centrado verticalmente en el área del halo. La proximidad es enorme. La cantidad de espacio que dejas entre artículos es increíblemente importante. Titular tiene una pequeña brecha aquí en la parte superior y una lógica aquí. Entonces esto significa que este titular es más parte de la cabecera que del área de héroes. Y eso no es correcto. No parece estar relacionado con estos son los dos sí, sí se sienta en este rectángulo que llamamos el área de héroes. Pero debido a que está tan lejos, o es un elemento independiente o es parte del encabezado. Ninguno de ellos es correcto. Ahora, lo mismo si movemos a estos dos de cerca juntos, pero presionamos el botón hacia abajo. Nuevamente, esta ya no es una sola unidad. En cambio tenemos a este elemento aquí hecho de dos capas de textos y esta de aquí, nuevo, eso es todo por la proximidad. Para que sea sencillo, los artículos que van juntos necesitan estar cerca uno del otro. Esto no significa que tengas que aglomerar cosas, pero hay que estar al tanto del espaciado y de su significado. Aquí te explicamos cómo haces eso en Adobe XD. Mantenga la tecla Alt y vea la distancia para el titular y la carga. Así de simple, nada importante. Pero para las capas de textos que tienen un cuadro limitador, debes asegurarte de que no haya exceso de espacio. Como puede ver, esto nos da la medición equivocada. Y tienes dos opciones para arreglarlo. O el encogimiento, el cuadro limitador así, que probablemente no va a ser perfecto, pero aún así es un intento decente. O desde el panel Propiedades, puedes cambiarlo hasta todo Ohio. Ese es este ícono de aquí. Ahora puedes asegurarte de que estas brechas sean idénticas. Esto realmente me va a ayudar, va a hacer un diseño que mucho mejor. Ahora el valor realmente no importa. Puedes usar 20, 40, 60 píxeles, lo que sea. Pero por favor asegúrate de que sea igual. Y decir que usas 14 entre, bueno, entonces la brecha aquí en la parte superior y en la inferior, eso tiene que ser mucho mayor que 40. Aquí te dejamos la mejor manera de hacerlo. Seleccionas estos tres elementos así. Compruebe el panel de capas para asegurarse. Después los agrupa con Control G. Ahora aquí está lo importante. Esta cabeza ahí es semitransparente. El rectángulo real va hasta arriba. Entonces si seleccionas este nuevo grupo y el fondo principal y los alinea, bueno, obviamente no es correcto. Eso se puede detectar fácilmente. Vea cuánto espacio vacío tenemos en la parte inferior versus en la parte superior. Está claro como el día que esto es ahora correcto. En cambio tienes que hacer esto. Seleccionas solo el pegamento que sostiene estos tres artículos. Y sostienes todo, y mides la distancia desde el grupo hasta la parte inferior del rectángulo. Y ahora del grupo al rectángulo, del encabezado. Y ahora puedes usar las teclas de flecha para empujar el grupo hacia arriba o hacia abajo según sea necesario. También puedes usar el turno aquí, por supuesto, el P, el proceso lo midió hasta que esté centrado verticalmente. Esta es la forma correcta de trabajar tu tiempo con él y asegúrate de entender lo importante que es esto. Y antes de que terminemos, quiero recalcar algo que es increíblemente importante. He visto este error cuando 1000 veces. Si tienes un avance ocupado en segundo plano, no debes mover este grupo en base a esa imagen. No me importa si es un skyline de la ciudad como Catherine Wilson siempre que no te muevas esto para que el usuario pueda ver la imagen. Si el contenido no funciona con esa imagen, cambias la imagen. No rompes la regla de alineación sólo porque te gusta esa foto. 48. 3 reglas para los iconos de diseño web: Bienvenido a esta conferencia donde hablaremos sobre el uso de iconos en diseño web. Lo primero que debes saber es que los iconos vienen en todas las formas y tamaños. Aquí tenemos dos iconos llenos de tono en la parte inferior del diseño. En el futuro, tenemos iconos de campo monocromáticos para las redes sociales. Justo por encima de esta parte en el boletín que vemos, este precioso icono multicolor. Y en algún lugar en medio del diseño, tenemos estos intrincados iconos que también serían considerados las ilustraciones. El hecho es que vienen en todas las formas, colores, y tamaños. Como probablemente ya sabrás, deja icon.com es el lugar cuando se trata de iconos. Tienen una calidad inigualable, pero también tienen una enorme biblioteca. El inconveniente es que sí tienes que pagarlos. Pero eso no es de lo que quiero hablar. En cambio, quiero que te tomes el tiempo y aprendas a usar estos filtros. Digamos que estás buscando el ícono de la estrella, escribe eso y ve qué obtienes. En un principio, obtendrás todo tipo de estilos, pero luego tendrás que usar este filtro de color y refinar aún más tus resultados. Es esencial que te tomes el tiempo para navegar y simplemente explora el icono plano. Por ejemplo, una vez que haces clic en un icono, tienes que desplazarte hacia abajo y ver todo el pack. Este de aquí. Por ejemplo, en este caso, tenemos 380 iconos en total. Esto es crítico porque la regla número uno con respecto a los iconos es que tienen que coincidir. Es un enorme error de ejecución mezclar y emparejar iconos para ellos diferentes conjuntos. Déjame mostrarte lo que quiero decir. Observe estos tres en este rubro. El primero es brillante y 3D. Bueno, estos son, los dos son simples y bidimensionales. Y solo un poco arriba, encontrarás una diferencia aún mayor. Este camión y caja están etiquetados como iconos llenos en Cloud icon.com. Bueno, estos otros son lineales, lo que significa que la base sobre trazos, diferentes lugares podrían tener etiquetas diferentes. Pero ya que el icono de bandera es un jugador tan corriente principal en el mundo del diseño web moderno, usará su sistema de nombres. Volviendo a la regla número uno, nunca mezcle y empareje iconos de diferentes conjuntos. El camión contra el breve caso es de noche y de día. Seguro. Pero nota los iconos de la artesanía y residencial versus todos los demás como piano o maquinaria pesada. A pesar de que ambos son iconos lineales que en un estilo diferente. Estos sí tienen un aspecto mucho más grueso. Como tal, aunque los llenos no fueran el estado de ánimo, todavía no sería un buen conjunto de iconos. Pero pasemos a un buen ejemplo. Estos iconos lineales de precioso en la parte superior de esta forma irregular naranja. Este es el tipo de cosas que debes apuntar. Y si nos desplazamos hasta el encabezado, veremos un conjunto de cuatro iconos de redes sociales que también son pequeños en el relleno que en el mismo estilo. Tienen un tamaño apropiado. Entonces esto es lo que buscas. A modo de nota al margen, Instagram es un poco diferente de los otros tres, pero eso es realmente inevitable. Volver a la regla número 1. Yo insisto en ello ya que es la más importante. En icono de solapa, puedes por supuesto, buscar un ícono packs. Esto hace que tu vida sea mucho más fácil. Por ejemplo, para mis cursos en línea, puedo buscar algo como aprender. Esto probablemente me dará un conjunto de iconos que se ajustarán a mi proyecto. Y debido a que puedo ver el número de iconos en cada espalda, esto hace que las cosas sean mucho más rápidas, menos. Observe cuántos estilos puede elegir. Nuevamente, esencialmente está lleno de paquetes de iconos complejos o lineales. Pero hay tantos matices para ellos. Por ejemplo, me encanta este es el derecho de espesor dy contras de intrincados y bien hechos. Está millas por delante de éste, por ejemplo. Ahora, puede preguntarle a Chris, Bueno, si los necesito iconos y encuentro el pack que sólo tiene ocho de ellos. Bueno, en realidad hace la situación más común. Simplemente tienes que hacer lo mejor posible y encontrar otros dos iconos que se hacen en un estilo similar. Para los iconos monocromáticos, esto es un poco más fácil, sobre todo si estamos hablando de ruinas llenas. Pero para mantener esto corto, no hay salida fácil. Pasarás una enfurecida cantidad de tiempo buscando la espalda perfecta con un ícono a juego para el pack existente. Esa es sólo la forma en que es. La segunda regla, por favor utilice siempre SVG en Adobe XD PNG. El motivo es sencillo. Svg significa Gráfico Vectorial Escalable. Escalable significa que puedes cambiar su tamaño y permanecerá nítida y nítida. Esta es la mejor situación, tanto para nosotros como diseñadores sino también para desarrolladores. Ahora cuando cambias el tamaño de cualquier tacón de icono SVG que necesitas hacer, primero, deshabilitas la función de redimensionamiento responsive. Esto está de este lado aquí mismo. Genial. En segundo lugar, haga clic en el icono del candado. Ahora puedes redimensionarlo poniendo cualquier valor en este campo o en éste. En caso de que no quieras hacer eso, solo mantén pulsado Shift mientras cambias el tamaño. Pero te sugiero encarecidamente que uses la primera opción. Por lo que de nuevo, desactivaste el redimensionamiento responsive y haces clic en el icono de candado. Por último, regla número 3, dimensionar cada icono apropiadamente. Esto no está relacionado con la propina que te acabo de dar. En cambio, piensa en los iconos que vienen en todas las formas y tamaños. Aquí tienes un ejemplo. El primero está casi al cuadrado. En realidad es a 56 por 2, 56 según el panel de propiedades, esto es ideal, pero del mismo pack. Como se puede ver, las cosas también están ahí. Pero centrándonos en este, esto significa que podemos encogerlo para decir 90 por 91, cualquiera que sea el valor sin ningún problema. El siguiente aunque es 190 por 2 56. ¿ Ahora qué? Esa es una regla 3. Si bien se tiene presionado el icono de la cadena, lo que significa que la relación de aspecto se mantendrá sólo cambió cuanto mayor sea el valor. En nuestro caso, esa es la altura. Pondré en 90 pixeles. Y una vez que me comprometo, el ancho cambiará automáticamente a, en este caso, eso son 67 píxeles, pero realmente no nos importa. Ignoramos cuanto menor sea el valor. Lo mismo con este último icono. Esto es bastante amplio y corto. Nuevamente, solo editaremos cuanto mayor sea el valor. Esta es la forma correcta de redimensionar los iconos. Tienes que imaginarte colocándolos dentro del cuadrado de 90 por 90 píxeles. Sólo un valor va a tocar sus bordes, ya sea el ancho o la altura. Cualquier otra forma de redimensionar no es ideal en mi libro. Y esas son mis tres reglas respecto a los iconos en el diseño web. No mezcle y empareje, use el formato correcto, use la técnica de contracción apropiada, y entonces obviamente han estado ahí está el cuarto. Gracias. 49. Estudio de caso: equilibrio visual: Bienvenidos a esta conferencia donde hablaremos de algo bastante extraño, equilibrio visual. Cualquier diseño tiene que ser justo cuando lo miras y debe inspirar una buena sensación. Escribí otra conferencia sobre este tema llamada simetría, espaciado adecuado y espacios en blanco. Eso sigue siendo muy válido, pero quiero mostrarles algunos ejemplos. Entonces aquí hay un encabezado que está equilibrado en mi libro. Tenemos iconos de redes sociales a la izquierda, un logotipo en el medio, y el número de teléfono a la derecha. Debajo, tenemos un menú principal que centro alineado. Ahora, bueno, no creo que esto sea un 10 de 10. Este es el tipo de equilibrio que busco. Por otro lado, echa un vistazo a esta parte superior aquí. Para mí, este diseño parece que se inclina hacia la derecha. Yo lo percibo como ser más pesado de este lado, tanto por estos artículos de aquí, pero también por esta chica. El izquierdo se siente vacío. Se siente como si realmente no pudiera basar mi experiencia en ciertos principios de diseño. Estoy bastante seguro de que esto está bien documentado. En cambio, te puedo decir mi tripa me está diciendo que esto se inclina hacia la derecha, como si fuera la Torre de Pisa. Y mi mayor grito es que este tema es tan fácil de corregir. Simplemente coloca otro artículo en el lado izquierdo. Vamos a romper esto en dos elementos. Es tan fácil como eso. Así es como logras el equilibrio. Echemos un vistazo al pie de página, donde nuevamente, el equilibrio visual es clave. Aquí tenemos este espacio vacío a la izquierda. Eso me está molestando de verdad. Tú como diseñador tienes todo el control. Podrías haber agregado más información en esta columna, o podrías haber dividido esta navegación en dos partes. Volvamos a otro diseño donde de nuevo, esto no es exactamente maravilloso, pero es equilibrado. Para columnas, bien distribuidas, misma cantidad de artículos en cada una. Esto es en general mejor que mi libro, o dicho de otra manera, menos malo que el otro diseño. Pasando, ya vimos este proyecto. Los iconos de las redes sociales crean una nueva fila. Eso es lo que 95 por ciento vacío. Estos diminutos iconos no merecían todo este espacio. En cambio, el cuadro de búsqueda podría haberse eliminado por completo, o si fuera obligatorio, podría haberse expandido cuando el usuario hizo clic en él. Con esa habitación extra, el diseñador podría haberlos colocado en la misma fila que el menú principal. Si me preguntas, probablemente usaría iconos monocromáticos, todos de la misma forma, probablemente círculos, y no los colocaría por aquí entre el logo y el Menú Principal. Y así lograría el equilibrio visual con una sola fila. Mover apenas un poco hacia abajo, obtenemos otro caso de una columna pesada en una muy ligera. Esto no es TOC, esto no soy yo volando las cosas fuera de proporción. Cuando el cliente te da contenido, tienes que trabajar tu magia y llegar a algo que sea a la vez funcional y estéticamente agradable. Es tan fácil esconderse detrás de excusas como pero cresta, Eso es todo el contenido que recibí. Seguro. Pero fue tu decisión darle estilo de esta manera. Hay montones de opciones. Es solo cuestión de llevar lo suficiente sobre tu trabajo y saber que el equilibrio es clave. Esto no quiere decir que todo tenga que ser perfectamente simétrico. Por ejemplo, estas cuatro columnas están bien en mi libro. Claro, la última palabra podría haberse levantado, pero con todo, a pesar de que hay una clara orientación, esto se ve decente y mi libro, leemos de izquierda a derecha y tenemos ciertas expectativas sobre cómo se suponen las cosas que se dispuso. Aquí de nuevo, este es un intento decente, no es tan malo. En realidad estoy más molesto por el hecho de que estas capas de textos no están alineadas en la parte superior. Bueno. Estos tres son obviamente idénticos. Bueno, este otro se rompe. Aún así, el efecto general es mucho más aceptable que lo que acabamos de ver en la parte superior del diseño. Está bien, seguir adelante. Aquí hay otro caso que me rompe totalmente el corazón porque me pongo totalmente con el diseñador estaba pensando que el cliente tiene este logotipo incómodo que es un dolor para trabajar. Es demasiado alto. Si lo encoges, no será legible. Temiendo que el cliente no esté contento por tener un diminuto logo. El diseñador optó por superdimensionar el encabezado. Una vez que se tomó esa decisión, errores de todo tipo comenzaron a inundarse. El caso es que, aunque agregaras varias cosas aquí, como un menú secundario o iconos de redes sociales, esto aún habría sido un error en mi libro, dejando a un lado el equilibrio. Eso se debe a que un diseñador inteligente tiene que tomar decisiones difíciles y tomar una posición. En este caso, habría caído el icono y me habría quedado con el título o viceversa. Pude haberme quedado con el símbolo. De cualquier manera, el encabezado ya no tendría que ser así de alto. Ahora entiendo que simplemente no puedes jugar con el branding de la gente para hacerte la vida más fácil. Puedes dividir el logo de Coca-Cola en dos líneas solo porque mejor se adapte a tu diseño. Pero la cosa es que no todos tus clientes son gigantes corporativos que tienen una guía de estilo o son una marca profundamente incrustada que tiene que mantenerse a toda costa. En realidad, la mayoría de los clientes aceptarán diversas ediciones siempre y cuando el resultado final sea sustancialmente mejor. Pero eso es un tema para otro día. Para resumir esta conferencia, equilibra tu diseño siempre que sea posible. Usa tus elementos sabiamente y crea una mirada equilibrada a través de la simetría. En favor de ver esa conferencia. Mencioné que el principio, Es con la voz de Mark. Mark siendo un actor de voz que he usado en el pasado. Entonces, no te conmoques cuando no oigas que mi acento rumano se filtra también. Gracias. 50. Reflexiones sobre la primera clave del diseño web: Oye, ahí, espero que hayas aprendido mucho a través de estas conferencias. Me parece que el diseño web es un método de pacientes y precisión. Los errores de combustible, mejor será el diseño. La gente tiene esta idea errónea de que hay ser creativo para poder hacer grandes webs. La verdad es que tienes que seguir una receta y cualquier pastel que vas a hornear va a ser al menos la mitad del synth. Si mides cuidadosamente las cosas y sigues todos los pasos, las cosas salen mal cuando crees que sabes mejor. Y a medida que cometas cada vez menos errores, tu calidad va a subir. Ciertas técnicas se convertirán en un hábito y serás más rápido y rápido. Con velocidad y experiencia, ganarás libertad y podrás empezar a experimentar. Siempre debes aprender a caminar antes de que intentaran correr algo. Este es el tema más común con los principiantes. Están tan preocupados por qué fuentes deben usar o la web de la que obtienen su inspiración, qué iconos deben usar y todo eso. Cuando de hecho, deben enfocarse en usar la altura de línea correcta para las capas de texto tendrán una buena cantidad de contraste, pero ser consistentes en los diseños, tener suficiente espacio de lectura, lograr simetría, desequilibrio , y así sucesivamente. Entonces espero que estos errores de ejecución sean ahora muy claros en tu cabeza y podrás localizarlos desde una milla de distancia para poder mejorarlo. Por favor hazlo, únete al chat de discordia y echa un vistazo al canal llamado la vista mi trabajo. Aquí, hay mucha gente que publica sus diseños con el fin de obtener retroalimentación. Por favor, haga sonar y hágales saber dónde salieron mal. No tienes que ser un experto para avisar la mayoría de los errores, incluso si este es tu primer curso de diseño web, por favor, participate. Al entrenar a tu ojo para que avise estos errores de ejecución, conseguirás mucho mejor. Se trata de proporcionar retroalimentación constructiva. Y cuanto más lo hagas, más se va a ajustar tu mente a esta nueva forma de pensar. Y con eso, espero no ver ningún error de ejecución en su trabajo. Muchas gracias y sigamos adelante. 51. La segunda clave para convertirse en un gran diseñador web: Hola y bienvenidos al segundo pilar del diseño web, entendiendo las necesidades del cliente. Antes de continuar, espero que hayan visto mis conferencias sobre pixel perfecta ejecución. ¿ Y cómo funciona la fundación de cualquier diseñador web serio? Si no has hecho tu tarea, por favor ve a ver esos videos antes de continuar. Aquí está la idea. Una vez que hayas eliminado los errores de ejecución, es hora de que mires el diseño a través de otra lente, específicamente a los ojos de tu cliente. Para mí, esto es algo que cambió por completo mis habilidades como diseñadora. Una vez me puse en los zapatos del cliente, es como si tuviera la revelación. Todo mi proceso de decisión fue cambiado para mejor simplemente porque entendí que cada elemento tiene que tener una razón para estar ahí. Vas o bien la ayuda al cliente o simplemente te estás divirtiendo en Photoshop. Es tan simple como eso. En las siguientes conferencias, compartiré todo lo que he aprendido a lo largo de los muchos, muchos años como diseñador, pero también como dueño de negocio. Al estar en ambos campamentos, siento que tengo ganas de ganar algún conocimiento valioso y quiero compartirlo contigo para que puedas ser mejor en tu oficio. Bueno, el primer pilar del diseño web es muy práctico y práctico. Lo que estás a punto de escuchar es mi propia experiencia. Esto será mayoritariamente estudios de caso en historias. Por favor, prepárese para menos trabajo práctico. En general, la siguiente parte es subjetiva y puede que no esté de acuerdo con algunos de mis puntos. Eso está totalmente bien. Sólo sé que todo lo que digo viene de un buen lugar y que estoy tratando de ayudarte a convertirte en un mejor diseñador web. Si tienes una opinión diferente sobre un tema determinado, eso está totalmente bien. Entonces con eso dicho, entrémonos en ello. 52. ¿Cuál es el punto de el sitio web?: Lo primero que tienes que preguntarte cuando estás iniciando un nuevo proyecto es, ¿cuál es el objetivo del negocio? Eso se debe a que un sitio web es una herramienta, es un medio para un fin. Para ilustrar mi punto, aquí tienes un diseño presentado en Discord. Si vamos rápidamente al ancho, podemos ver que esto está bastante bien. No es genial, pero tampoco es tan malo. Por otro lado, echa un vistazo a este otro. Dejando a un lado todos los elementos de diseño como fuentes, colores, espaciado, fotos, y demás. ¿ Por qué están separadas estas millas? Bueno, esto tiene un propósito. El sitio web está dirigido hacia una cosa específica, para vender este suplemento de cama. Hacia ese fin, tenemos un titular muy claro. Algunos USBs o los puntos de venta únicos, un botón encantador, pero también estos gráficos que proporcionan información adicional sobre este negocio. Nosotros, como visitantes, entendemos lo que tenemos que hacer. Podemos comprar este suplemento para todas las mascotas, y debemos hacerlo por estas razones. Volvamos al diseño inicial. Aquí. Asumamos con los dueños de negocios, en realidad tengo algunos propios. Ahora, ¿cuál es el punto de este sitio web? ¿ Qué debo hacer? Dice Empezar, pero ¿qué significa eso? Vamos a leer, llevamos tu negocio al siguiente nivel y luego algún genérico Lorem Ipsum. Estoy muy confundido. ¿ Qué servicios están vendiendo? Es esta mercadotecnia, recursos humanos, gestión de redes sociales. Esto es increíblemente vago en él podría ser literalmente cualquier cosa. Ese es el problema. Es por ello que este tipo de diseño, dejando de lado todas las opciones de diseño, no será bien recibido por el cliente. Este es un clásico error de principiante. El diseñador se enfoca tanto en la estética que pierde la pista del punto. Un sitio web tiene que tener precisión quirúrgica. Cualquier dueño de negocio requiere un rifle de francotirador, sí va a golpear a clientes muy específicos. No se daría cuenta la gente es que el enfoque de escopeta no es una buena idea. No quieres extenderte por todo tipo de grupos de personas. Sepa que desea atender a su público objetivo. Hay mucho que decir sobre este tema, pero quiero volver a decir esto. Las empresas requieren sitios web con un mensaje muy claro y el público objetivo bien definido. Esto es para las personas con mascotas. Este es para todos, es decir, nadie. Echemos un vistazo a otro ejemplo. Aquí. Asumimos que se trata de algún tipo de despacho de abogados, pero de nuevo, no tenemos idea de qué tipo de servicios prestan. Hay abogados de divorcio cotizan que abogados defensores en. Oh, tantos otros. Aunque esté ahí dentro necesitara ayuda legal, no sería capaz de elegirlos porque no tengo ni idea de qué se trata. Pero echemos un vistazo a este. La sábana de cama perfecta recién hecha para ti. Esto está claro como el día, sabemos lo que venden. El titular está en el punto. La foto consigue el punto a través de estos puntos de venta me ayudó a decidirme. Y la acción es doble. O cómpralo, qué saber más. Esto es perfecto. El diseño puede no ser impresionante, pero este diseñador entiende lo que quiere el negocio. Ventas. Echemos un vistazo a otro ejemplo. Brindamos Diseño y Desarrollo Web de calidad. Fantástico. Pero mira, esto es agradable de mirar y eso es lo que esos fuera principiantes. Podrían pensar que esta encantadora ilustración es la razón por este tipo de diseño obtiene cuatro o cinco arranques en 99 diseños. Pero ese no es el caso, es el hecho de que el diseñador entendiera el punto del negocio. Y así vender un servicio que prestan. ¿ Qué Servicio? Diseño y Desarrollo Web. Pero yendo a otra página web al planeta social, puedes averiguar cuál es el sentido de este diseño? Llevar a personas y organizaciones al óptimo estado de salud. Pero de nuevo, es esto un servicio médico, un spot, centrado en el yoga, un gimnasio de clase. Por eso esto está condenado desde el principio, dejando todo lo demás a un lado como fuentes, colores, esquema, espaciado en lo que sea. Eso no importa. Sin entender las necesidades del cliente, no tienes idea de qué construir. Tomemos un breve descanso y luego seguiremos. 53. El usuario y el propietario de la empresa: Hay dos lados para tener la historia. Ahí está el dueño del negocio que quiere dirigir un negocio y el visitante, lo que el usuario que está buscando hacer una compra de especie. Para entender plenamente este tema, vamos a explorar las dos partes. En primer lugar será un usuario regular. Entonces cliente, digamos que busco una agencia de diseño web para el nuevo emprendimiento empresarial. Pondré en ese término y abriré los mejores resultados de búsqueda, mayormente desde la primera página, claro. Entonces después de abrir 45, iré rápidamente a través de ellos para poder reducir las cosas. A lo mejor quiero una agencia de mi ciudad con alguien que también haga SEO o las campañas publicitarias de Facebook. A lo mejor alguien que se especialice en sitios web de comercio electrónico con un negocio que ofrezca chat en vivo para que pueda responder rápidamente a mis preguntas. También tengo un presupuesto limitado de alrededor de $1500. Me gustaría ver algunos precios si es posible, pero también algunos otros diseños que han hecho. Este es muy oscuro y lúgubre. No es una buena impresión, así que simplemente la cerraré. Este otro también es bastante oscuro, sombrío y demasiado sencillo para mi gusto. Eso está fuera. A éste le llama la atención la mirada. Yo me quedaré con éste. Este otro. Bueno, es demasiado naranja y no me gusta el naranja, así que no, este es un poco aburrido, pero quiero un sitio web hermoso. Destaca el. Si su sitio web es aburrido, entonces ¿cómo pueden crear algo impresionante para mí? Entonces está fuera. Este parece que se hizo en 2005, demasiado anticuado para mis días. Y hablando actualizado. Echa un vistazo a este. Absolutamente horrible. Dicen que llevan negocios desde 2008. Bueno, se muestra así así en el método de segundos arriba completamente comprobado algunos negocios de mi lista. Me han perdido como cliente. Han perdido mis 1500 dólares. Pero ¿y si tuviera un presupuesto de 50, $10 mil? ¿ Te imaginas el dolor? ¿ Y por qué excluí algunos de ellos? Por razones estúpidas, por supuesto, por ejemplo, no me gusta el naranja, sino también para los serios como el diseño parecía anticuado. Mis pacientes como cliente es inexistente. Mi hijo está gritando de fondo, llego tarde al trabajo. Algo se está quemando en la estufa, y tengo 0 tiempo para tomar esta importante decisión. Mi tripa es lo que me impulsa mi instinto. Tengo algunas ideas sobre lo que necesito y busco esas respuestas. Si no me muestras un número de teléfono, estoy fuera. Sin chat en vivo, sin lista de servicios fuera, y así sucesivamente. Podría suponer que estoy siendo increíblemente duro como cliente, pero esta es la persona de un cliente típico. Hay tantos sitios web por ahí que ofrecieron lo mismo que yo no tengo pacientes. Este es el mundo en el que vivimos. Y esto se aplica a todo. Ya sea que desee comprar una tostadora, una casa más alta, el bufete de abogados, un plomero, elegiría un dentista. El mundo del consumidor es increíblemente vasto. Tengo una cantidad interminable de opciones. Si no me gusta tu logo, tu esquema de color, o lo que sea, estás fuera en dos segundos. Los clientes pueden ser vistos como supermodelos Victoria Secret y dueños de negocios por igual chicos hicieron uno acercarse a ellos en la fiesta. supermodelos no tienen pacientes porque saben que hay una línea alrededor de la cuadra que se está muriendo por hablarles. Tu página web no me da lo que quiero en dos segundos plana, estoy fuera para siempre. Yo diría que es tal vez menos del 10 por ciento de probabilidad de que vuelva. Otra vez. Esto puede sonar ridículo. A lo mejor no te gusta mi metáfora, pero creo que así funciona. Cambiemos de lado sin embargo. Somos el dueño del negocio de uno de estos sitios web. Pagamos las cuentas, tratamos de hacer crecer el negocio. Hacemos todo lo posible para ofrecer servicios de alta calidad. No tenemos suficiente gente en nuestros equipos mientras que la página web no se ve tan genial, el personal existente está presionando duro para completar proyectos anteriores, por lo que no tienen tiempo para el rediseño con tratar de complacer a las glándulas que tenemos obtenidos hasta el momento. Y después de que eso haya hecho, tal vez podamos hacer una reforma. Probablemente queramos más negocios. Entonces usaremos anuncios, anuncios google, anuncios de Facebook, tú haces camas. Cada clic nos va a costar dinero, dinero serio porque hay tanta competencia para cada cliente potencial, podríamos pagar hasta $50. Sí. ¿ Escuchaste eso, verdad? Para el visitante que llega a nuestra página web y sale en 1.5 segundos, podríamos gastar un paquete. Por eso, tenemos que tener mucho cuidado con otro dinero, pero también con nuestro look. Queremos apuntar a aquellas personas que realmente están interesadas en los servicios de diseño web. Si atraemos a gente que está buscando otras cosas como SEO o anuncios de Facebook, y no las ofrecemos con tirar dinero por la ventana. Entonces eso es B es que tenemos que hacer que la gente se quede. Tasa de rebote es un término que se utiliza para describir cuántas personas salen inmediatamente de un sitio web en el revisitarlo. Si tenemos una alta tasa de rebote, digamos del 80 al 90 por ciento, esto significa con el desperdicio de dinero. Literalmente esto significa que de cada diez personas que vienen a nuestro sitio web, ocho o nueve se van sin siquiera desplazarse, haciendo clic una vez. Y esas 10 personas están pagadas, ya sea un dólar, lo que 200 dólares sigue siendo dinero por la puerta. Entonces, ¿qué podemos hacer como dueño de un negocio para asegurarnos de que la gente se quede por ahí? En primer lugar, tenemos que apuntar al público adecuado. Si nuestro add dot consigue a las personas que están buscando cortadoras de césped y los presentamos con otros servicios de diseño web. Obviamente se van, Eso está claro como el día. Pero lo segundo es que tenemos que hacer una gran primera impresión. Recuerda este sitio web como cliente, inmediato lo revisamos. No nos gustó. Entonces nosotros, como dueño de un negocio, necesitamos una silueta preciosa sin embargo que muestre con grande en lo que hacemos. Nuestros servicios de diseño web son de primera categoría. Tenemos precios fantásticos y un gran giro. Pero claro, si la otra agencia dice eso, entonces tenemos que encontrar nuestro propio giro y hacer memorable nuestra página web. Ahora, podría seguir, pero este es el tormento de un dueño de negocio. Por eso dije que necesitas el rifle de francotirador. Cuando utilizas anuncios para atraer visitantes a tu sitio web, necesitas precisión. No quieres grandes trozos de gente que esté buscando cortadoras de césped, manchas, resultados o plomadas, eso te va a costar cubos de dinero sin los nuevos resultados. Y luego para esos usuarios clave que están interesados en los servicios de diseño web, necesitamos hacer una fabulosa primera impresión. Y ese es el conflicto entre el usuario y el dueño del negocio. El visitante es algún tipo de pre Madonna, una supermodelo que tiene un número aparentemente infinito de opciones. Y por otro lado, el dueño del negocio tiene que hacer una increíble primera impresión en cuestión de segundos, lo contrario no hará ningún dinero. Con eso en mente, echa otro vistazo a este sitio web. ¿ Esto haría feliz al empresario? ¿ Le ayudará a lograr sus objetivos? No, claro que no. Y es por eso que tú, como diseñador, tienes que entender las necesidades del cliente. 54. Análisis en el diseño web: Estoy en un lugar de mi vida donde me sorprende cómo ser emprendedor me convierte en un mejor diseñador web. Aquí te explicamos por qué en los negocios, sobre todo en el comercio electrónico Analytics, lo es todo. No estoy hablando de Google Analytics aunque eso es una gran parte de ello. Se trata de medir cosas y tomar decisiones basadas en estadísticas. La llave, lo volveré a decir. Las decisiones de diseño tienen que tomarse con base en estadísticas. Esto es importante desde dos perspectivas. Número uno, te enseña a diseñar mejor para los sitios web formadores. En él te ayuda a entender las necesidades del cliente. Hablemos del segundo. Esto es lo que sucede más a menudo que no. Completas el proyecto, entregaste el diseño, se implementa. Pero luego una vez que está en vivo, el cliente pide los cambios. ¿ Por qué es eso? Pudo haber aprobado el diseño hace unos días con hace un par de semanas. ¿ Qué le hizo cambiar de opinión? Y analítica? Vio ciertas estadísticas que le dijeron que hay un problema con tu diseño no es que se despertó mal humor o que a su esposa no le gustó el esquema de color? Bueno, seguro. Se podría pensar que vela unos casos como ese, es cierto. Pero la mayoría de las veces el dueño del negocio vio métrica que indicaba el problema. El asunto está en Photoshop o Adobe XD, todo puede quedar bien. Puede que seas feliz. El cliente y su equipo pueden estar contentos. Pero el usuario final tendrá la última palabra. Un sitio web tiene que funcionar, no sobre miradas y hacer una impresión. Un sitio web es una herramienta que tiene que funcionar entre ciertos parámetros. Haces lo mejor que puedas, pero es solo una conjetura educada si tu diseño va a funcionar o no. Ya sea que se va a vender o convertir. Y lo diré otra vez. Cuando estás diseñando un sitio web, haces una conjetura educada, una apuesta, si quieres, sobre cómo va a funcionar. A veces te equivocas, o en la mayoría de los casos, hay margen para mejorar. De esta manera, la idea es simple. El cliente quiere cambios después de que se complete el proyecto porque ciertas estadísticas indican que se requiere una modificación, una edición. Pasemos a la primera parte, cómo la analítica te ayuda a diseñar un mejor sitio web. Esto aclarará las cosas de inmediato. Aquí tienes un ejemplo. Contraté a una agencia de anuncios para ejecutar algunos anuncios de Facebook para mi empresa. Ellos montaron una campaña donde el objetivo era conseguir que la gente agregara el producto a su carrito. Suficiente simple, ¿verdad? En base a eso, podríamos tomar diversas decisiones. Will en realidad se gastaron alrededor de 80 dólares. Los resultados fueron impactantes. 367 añade al carrito sólo una conversión. Esto es desastroso y muestra que el diseño actual de la tarjeta es sub-par. En realidad investigué el problema y el costo de envío no estaba claro por eso, la gente abandona su carrito. Entonces perdí ventas. En base a esa observación, hice un rediseño y las cosas mejoraron. Pasemos a otro ejemplo. Corrí una campaña publicitaria de tráfico a través la misma agencia y mi tasa de rebote fue increíblemente alta. Por momentos pico ese 85 por ciento. En resumen, esto significó que ocho de cada 10 personas salieron de su sitio web sin hacer nada. No tanto como un click. Más que eso, significa que traje a ocho personas a mi página web por nada, pero a un costo significativo. Yo pagué por ellos. De esta manera, alrededor del 70 al 80 por ciento de mi presupuesto fue tirado por la ventana. Literalmente desperdiciado. Todo porque la página de inicio no mostró de inmediato lo que vendía después del rediseño. Eso incluyó un mejor titular, subtitular y exprimir bueno más contenido que cambió para mejor. No estoy diciendo que el título te pueda llevar del 0 al 100, pero cualquier leve mejoría es muy apreciada en los negocios, ya sea el 50 por ciento o el 50 por ciento. Otra, seguí trabajando día tras día en la versión de escritorio de mi sitio web después de un chat con alguien con más experiencia en comercio electrónico, por fin miré la avería de tráfico. Más del 90 por ciento de mis visitantes venían de móvil. Eso significó que todo mi esfuerzo fue algo en vano. No estaba trabajando en la versión móvil, sólo en el escritorio. Fue un gran error. En general. No fue en vano porque los ingresos se dividieron 72 por ciento móvil y 27 por ciento de escritorio. Entonces eso me dice que los visitantes de escritorio generan ingresos superiores al promedio a pesar de que solo constituyen el 9% del tráfico. Esto es analítica. Y realmente no importa qué herramienta utilices ni el cliente. Se trata de anuncios de Facebook, los anuncios de google eran tarro duro, opt-in monstruo o lo que sea. La idea es que todo lo que diseñas tiene que ser probado. Producirá ciertos números y en base a ellos, haces ediciones. Es un proceso sin fin. Para nosotros como diseñadores web, tenemos que asegurarnos de que entendemos esto es lo que se necesita en la economía actual. Mi consejo es que cobras un precio fijo por el proyecto, luego configura una tarifa por hora para todos los pequeños cambios y ediciones que inevitablemente vendrán. Un sitio web no es algo estático. Al igual que un piso de madera dura que estás instalando que usas todos los días. Aunque sea uno caro. Se trata de una herramienta que se tiene que calibrar constantemente para poder desempeñarse en su mejor momento. Dueños de negocios por el dramáticamente, algunos son extremadamente educados, no tiene ni idea. Pero tú, como diseñador web serio, tienes que entender el poder de la analítica y que tus decisiones de diseño tienen que ser apoyadas por estadísticas. Si diseñas el sitio web con mejor aspecto, todo es para nada. Si la gente no hace compras. Y en esa nota, cada negocio tiene ciertos KPI, indicadores clave de desempeño. Por la suma, es el tiempo empleado en el sitio, el número de nuevas cuentas creadas, los números sobre los pedidos, el número de productos vendidos, la variedad de los productos vendidos, la cantidad total en dólares el número de páginas visitadas en así sucesivamente. Cada negocio diferente para ti, eso significa sólo una cosa. Más trabajo dentro de una buena manera de mejorar en este juego de analítica. Pregunte al cliente por insights. Pídele que comparta las estadísticas contigo. Y te sorprenderá ver cómo después de cambiar, por ejemplo, el tamaño de una carga en un erudito, cómo eso solo puede aumentar las ventas en un 20 por ciento. Piensa en eso. Eso es lo que hace un diseñador web moderno. Y después de un tiempo, obtienes toda esta experiencia. Y cuando se trata de tu próximo proyecto, ya sabes que vas a botón CTA debería decir Agregar al carrito en lugar de ahora. Y eso es mejor tenerlo 260 pixeles de ancho. Pero no más que eso. Esto es lo que debes llevar a la mesa. Experiencias pasadas basadas en análisis, basadas en insights. Pero recuerda, es sólo una conjetura educada es lo mejor que tienes. Analytics, amigo mío, esta es la clave del diseño web. 55. Plantillas y creadores de sitios web – ¿la muerte del diseñador web?: Bienvenidos a esta conferencia donde quiero hablar de la muerte potencial del diseñador web. Aquí está el escenario. Algunas personas están ociosas especulando o preocupándose de que tú y yo estamos obsoletos. Que los diseñadores web son la raza destinada a morir debido a plantillas y constructores de sitios web. No te mantendré colgado. Yo estoy muy en desacuerdo. Y no de la manera en que los fabricantes de automóviles de gasolina no creen en los autos eléctricos. O cómo algunas personas siguen viendo el cambio climático no es real. Sé que estoy jugando a ambos bandos en este. Así es como sé que nuestros servicios seguirán siendo necesarios por al menos diez años más como mínimo, WP Bakery page builder. ¿ Has oído hablar de este login? ¿ Qué tal el elemento o el deslizador, la evolución? Si esos no sonan una campana, estoy seguro de que has escuchado el bosque temático, que es el increíblemente popular almacenado para las plantillas de WordPress. En realidad soy un gran fan yo mismo y he comprado varios temas como los siete. El proposición de valor es inmenso por treinta y nueve dólares de así se obtiene un sobre Dios la cantidad de características. No podré presentarlos porque estaremos aquí todo el día. Pero nota, este es un precio increíble y no estoy afiliado a ellos, ni tengo nada que ganar con esta promoción. Ahora, esta cosa, como casi todos los bestsellers top, te da un constructor de páginas, que supuestamente es muy fácil de usar. No hay codificación involucrada. Simplemente coges un elemento de una lista, lo arrastras a su lugar, y luego añades tu contenido. Echa un vistazo a este sitio web. Esto es para mi curso de Photoshop rumano, y todo esto está construido sobre temas y plug-ins de WordPress. No estoy seguro de cómo te sientes al respecto, pero estoy bastante contento con ello. Se utiliza mis metas, se desempeña fácilmente bien. Y al final del día, eso es lo que los metales para mí como dueño de un negocio, este es el front-end lo vería el público. Ahora echemos un vistazo al backend. Consulta esta columna de entradas de una sola imagen. Esa es esta cosa de aquí. El contenido obviamente es éste de aquí. Después de que nos desplazamos un poco hacia abajo, obtenemos un bloque CTA, un bloque llamado a la acción, donde empujo al estudiante a comprar las canchas. Ese es este grupo de aquí. Un poco más bajo que eso. Tenemos una galería y sobre ella va, déjame ir todo el camino hacia abajo y dar click en este símbolo más. Esta es la parte realmente increíble. Aquí te explicamos cuántos elementos puedes incluir. Prácticamente casi cualquier cosa que se te ocurra. Desde deslizadores hasta reproductores de video, hasta Google Maps, pestañas , listas, etc. Podemos pasar siglos solos por esta parte. Y después de seleccionar uno, puedes configurar el título, personalizarlo de todas maneras, cambiar su diseño. Y luego cuando cambias a decir otro módulo, tienes otras configuraciones y características. Y todo lo que veas aquí se puede reposicionar con estos. Simplemente los movía por la forma que quieras. Y también puedes editar cómo se divide la fila. Consulta todas estas opciones. Estos te permiten diseñar virtualmente casi cualquier cosa que quieras. Todo esto por qué, $40. Menos apoyo, aunque limitado por parte de los desarrolladores, un acceso a un foro lleno de contestar las preguntas. Todo esto parece que no tiene sentido contratar a un diseñador, un desarrollador, y pagar lo que entonces 2100 veces más. Parece ilógico. Entonces, ¿por qué no tengo miedo de morir? Esto es claramente un oponente digno. No hay duda al respecto. Bueno, la respuesta es simple. Yo lo he usado. En realidad, he usado bastante este constructor de sitios web. Y también he comprado algunos de los temas más populares en los bosques de equipo. También he probado los sitios web preconstruidos, las plantillas de un solo clic, donde todo lo que tienes que hacer es intercambiar el contenido ficticio, que son UN hecho es, es un trabajo duro. Por eso sé que no nos quedaremos sin trabajo. Escucha, soy diseñadora, pero también soy emprendedora. Y he sido uno desde hace unos 78 años. En mi estudio de diseño de Android, tenía un equipo de más de 20 personas. Tenía que correr en el día a día. Ahora tengo una startup de alimentos saludables que quiere cambiar la forma en que la gente lidera esa oficina. En el pasado, he tenido un par de panaderías, pero también algunas tiendas de comercio electrónico, algunas webs similares a Groupon. A lo largo de mi carrera, ¿sabes lo que más me faltó? Era dinero. Ya era hora. El tiempo es lo que me mata. El tiempo es lo que no me permite producir más contenido, más cualidades para ti. El tiempo es lo que me mantiene humilde. Tengo fantásticas ideas de negocios escondidas, disruptivas que posiblemente pueden hacerme un paquete, pero no tengo tiempo para ejecutarlas correctamente. Como dueño de un negocio, constantemente hago malabares múltiples tareas. Y si no te sientes cómodo bajo presión es como si te estás ahogando, el estrés es una inmensa responsabilidad. No busco ahorrar dinero, busco crecer, expandirme , contratar gente nueva que pueda acelerar las cosas. No estoy buscando hacer todo yo mismo. En algunos casos me veo obligado a hacerlo, pero prefiero dejar de controlar, ser libre de hacer otras cosas. En pocas palabras es, si estoy construyendo un negocio totalmente nuevo o dirigiendo uno, no tengo tiempo para hacer todo este tedioso trabajo. Y mis amigos que también son los que son los mismos. No soy un caso aislado. Sé que usando el constructor de páginas, esto tedioso porque lo he hecho. Pasé una tonelada de tiempo usando este constructor y otros similares solo porque quería un, el resultado para ser perfecto exactamente como lo imaginaba. Y B, no quería aprender a codificar, ni tampoco quería contratar un codificador porque los usaba extensamente. Sé que la gran mayoría de los dueños de negocios no los tocará. Podrían comprarlos. Podrían averiguar cómo comprar un plan de hosting, configurar una base de datos instalada WordPress, el equipo y tal vez solo tal vez instalar una plantilla preconstruida. Pero no tendrán los pacientes ni las habilidades para juguetear con todas estas cosas. Absolutamente. Cada cosa que ves aquí ha sido reajustada , editada y ajustada al menos diez veces. La pura cantidad de ajustes está fuera de los gráficos. ¿ Los quiero rejilla de albañilería o una ruina estándar? Mostrar todas las imágenes. Usaría paginación con sobre carga perezosa. Pero, ¿qué es la carga perezosa, por cierto, cuántas rejillas por fila afectarán eso mi velocidad de carga? ¿Qué tal un hueco? Probemos cinco, luego diez, luego 25 fue mejor. Haré imágenes optimizadas. ¿ Y una galería de imágenes? ¿ Qué tal las imágenes de la galería de Tim, qué post temático de la galería fue la diferencia? Bueno, así es como perdí noche tras noche. Cómo mis ojos se pusieron rojos inyectados de sangre. ¿ Y sabes qué? Al final, aún más alto el desarrollador un codificador. Sí, todavía no tenía suficiente flexibilidad que los desarrolladores aún tenían que hacer todo tipo de ediciones, CSS, JavaScript, iniciar sesión en cada PHP y toneladas de otras cosas que no me meteré en ir al front end. Este reproductor de video está personalizado. Estos dos botones o personalizados, el menú CQI en la parte inferior lo hace él también. Y así sucesivamente. El cuadro comparativo fue diseñado por mí en Photo shop, entre otras cosas. Por lo que la conclusión largamente sacada es que estos edificios son geniales. Son poderosos, pero requieren una tonelada de tiempo y habilidades decentes. Y además de eso, hay una segunda razón por la que no moriremos como diseñadores web. Y eso es H&M. tengo la suerte de comprar camisas a medida que se hacen para mi tipo de cuerpo. Entro, me pongo ajustada y consigo mis camisas, chaquetas, y trajes. Lo creas o no, soy bastante elegante en la vida real, ahí por qué siempre me ves con una camisa en los videos introductorios. Ese es mi estilo. Ahora, pago de 50 a 100 veces más de lo que pago en H&M ¿Por qué es eso? Porque quiero calidad. Alguna vez algo a la medida de mis necesidades. Seguramente puedes pensar que soy un snob, pero así es como la mayoría de la gente está con sus negocios. Un negocio es tu bebé. Te encanta con todo tu corazón, lo construyes y quieres que se haga de cierta manera, a tu manera. Entonces el hecho de que H&M exista y que proporcionen ropa asequible que sea calidad bastante decente no me afecta y no te afecta. Hay un mercado para todos. ¿ Hicieron nuestros dueños de negocios que no tienen ningún problema pasando cientos de horas jugueteando con un constructor de páginas. Pero esas personas eran sin embargo público objetivo. No perdimos ningún negocio. Entonces por eso no moriremos. Los constructores de páginas requieren mucho tiempo y mayoría de los dueños de negocios no tienen ese lujo y corte, o no tienen las habilidades técnicas necesarias para lograrlo. En segundo lugar, siempre habrá opciones más baratas. Brindamos el servicio premium y como tal, no nos afectan las camisas de $10. Cuando vendemos 300 dólares, los que es mi punto de vista en ello. 56. Estudio de caso: 4 versiones de el mismo sitio web: Hey ahi, bienvenido a esta conferencia donde quiero que analicemos para las versiones del mismo sitio web. Estos son todos tomados de 99 diseños. La plataforma que conecta a dueños de negocios y diseñadores hacen concursos. Básicamente un cliente, tanto el breve que contiene sus requisitos como el premio en efectivo. Y luego diseñadores de todo el mundo se ponen a trabajar y crean entradas basadas en las necesidades del cliente. Sólo el ganador obtiene la cantidad total de dinero. A pesar de que los diseñadores se van y con la mano D, es un entorno hardcore donde hay que trabajar duro, pero hay que ser inteligente al respecto. A la esencia es que el mejor diseño no gana. En cambio los píxeles de la glándula favorito. Esa es una distinción enorme. Eso lo diré otra vez. El cliente no elige la mejor entrada desde el punto de vista del diseño. En cambio, elige el que se ajuste a su visión. Al no entender este punto, muchos diseñadores pierden su tiempo y energía en 99 diseños. He visto buenas entradas de SIG rechazadas simplemente porque el diseñador no leyó lo suficientemente bien. Bueno, la entrada fue bellamente ejecutada. No era lo que el cliente quería para su negocio a través de estos cuatro diseños. Espero poder dirigirte en la dirección correcta. No tengo el breve, pero como estás a punto de ver, no lo necesita. Creo que puedo revertir las necesidades de las glándulas analizando los diseños y la forma en que los anotó. Por cierto, gracias a Dean Conway, uno de mis alumnos en este acorde por darme estos diseños, ¿no? Esto fue elegido como el ganador. A éste le dieron cuatro estrellas. Este 13. Por último, dos de cada cinco estrellas. Entonces esto es lo peor. A primera vista, puedes estar de acuerdo en que éste sí se ve mejor, pero ¿es realmente esa la razón por la que el cliente lo eligió? Creo que es parte de ello, pero hay otros factores en juego. Lo primero que noto es que estas dos entradas que estaban mal valoradas y basaban alrededor de fotos de personas, esta en particular tiene montones de imágenes. Conté diez en total. Y la única parte de la página web que no confía en las personas es la sección Servicios. Dando un paso atrás de su calificación de dos estrellas, probablemente le daría siete u ocho de este diseñador. Después de todo, está bastante bien ejecutado. Me gusta el hecho de que las imágenes no sean fotos de stock genéricas que has visto cada diseño individual. Los iconos son bastante detallados y se ven bien. Claro, no fantástico, pero hay más que descenso. Esta persona está muy bien cortada de su sección y eso muestra atención al detalle. El negocio es una empresa contable para pequeñas empresas. Como tal, un toque humano suele ser un buen ajuste. Quieren parecer de abajo a la tierra. Quieren apelar a los empresarios que apenas están empezando. Y al mostrar muchas fotos, las hace más accesibles. Entonces como se puede ver cuando se sacan de contexto, este es un sitio web de buen aspecto que obtiene una buena crítica para mí, pero sólo consigue dos estrellas, decidió una consiguió tres estrellas. Algo el mismo enfoque, pero esta vez es un poco más refinado. Tiene más acampanada, más presencia para hacer esta sección aquí. Pero también a la sub-cabecera con región donde vemos el mismo trato con la persona que va fuera de los límites de este elemento. Todavía sólo dos reinicia. El previo se centró solo en ilustraciones, no hay gente de la que hablar. A modo de nota al margen, pesar de que esto obtuvo una puntuación alta para las cinco estrellas, este diseño y aún así terminó con $0. Entonces esto carece de valor básicamente. Por último, el ganador es una mezcla de gráficos personalizados y fotos. Tenemos este precioso gráfico isométrico y el área de héroes. Pero luego le damos un toque humano a esta foto. A continuación, algunos iconos sorprendentes que probablemente son tomados de punto com preempaquetado, igual que el área de héroes, por cierto. Pero entonces eso se contrapeso con esta foto. Por último, otra zona elegante a esta tableta y tabla de precios. Entonces en general, ¿cuál es la comida para llevar? El cliente tenía en mente la cierta visión donde la tecnología conoce a la gente. Si la empresa era una persona, No quería ser un contador de 55 años, enfocado en la vieja forma de hacer las cosas. Es así como percibió estos dos diseños como estándar. Lo hicieron, representaban la antigua forma de hacer las cosas, y eran muy similares a la deuda existente sitio web. Es probable que sus competidores estuvieran sacudiendo un look similar. Entonces, en cambio, el cliente, creo, quería ser más moderno, más de alta tecnología, no tanto así que quería ser un joven de 20 años con fase que le cobra y suena en la nariz. Pero los 30 años, la ODE con esas cuotas escondidas debajo de su camisa abotonada con el último Ultrabook a su lado y su cafetería favorita. Esto es lo que representa el ganador. Emite cierta vibra. Sí. Y contador para hacer estas dos fotos. Pero 2020 contador con potente software de vanguardia, con tableros e interfaces lisas, procesos optimizados, la nueva forma de hacer negocios. Pero de nuevo, nota que el subcampeón se enfoca demasiado en la alta tecnología. Esto se siente frío. Hacer todo este azul está sobre EU y los tonos son demasiado sombríos. No es suficiente ritmo, incluso cuando se une a esta naranja brillante, diseño se ve serio corporativo, pero de una manera en la que está entrenado para ser joven y cadera también. Hay un año de choque. Por un lado tienes estos serían líneas, círculos y gráficos personalizados. Del otro lado tienes paredes de texto, tonos desagradables de azul y gráficos personalizados de aspecto genérico. Es una batalla que provoca ruido, fricción. Es un diseño que no habla el mismo lenguaje al viento hacer está confundido. No sabe lo que quiere decir. Es como un blazer de negocios con chanclas en shorts. Desde el punto de vista del diseño, esta entrada de datos falsos es peor que estos otros dos. Pero el cliente vio vislumbramientos de lo que le gustaba. Vio el blazer, vio los pantalones cortos de tablero, vio el potencial. Por eso esto consiguió cuatro estrellas. Objetivamente, este muro de texto es un claro error de ejecución. El tamaño de la fuente es demasiado pequeño y la altura de la línea es abismal, al menos está dividida en párrafos, pero sigue siendo un error significativo. En cuanto al área de héroes, el titular es una absoluta tontería. Esta es la menor cantidad de trabajo que podrías realizar. No estoy seguro si pudo haber hecho peores. Esto es exactamente de lo que dice mi cotización hablar. Pero no nos desviemos. Esta parte no está bien ejecutada. El aprender más botones parecen haber sido robados de otro lugar. Parecen de baja calidad y pixelados. Por lo general, eso sucede cuando usas la Herramienta para marquesina en otra diseñada para robar algo? No estoy seguro si ese es el caso, pero en todo caso, se ve un poco raro. Esta parte aquí, esta demasiado femenina, y no tiene sentido. ¿ Qué se supone que hacen por mí estos elementos en forma de huevo? No hay llamado a la acción. Los espacios mal utilizados , no tiene ningún sentido. En cuanto a estas mesas, estas son igualmente horribles. Estos debieron haber sido rectángulos blancos. Todo este azul oscurece la vibra dramáticamente. Es demasiado serio incluso para un negocio contable. Todo esto en mucho más aún consiguió que las estrellas de Ford fueran al diseño ganador. Esta ilustración seguramente impactó. Pero nota el llamado a la acción cuando aquí y otro aquí. Puntuación perfecta para eso. Nota, la gran cantidad de espacio negativo. Esto ayuda a transmitir buena vibra, abierta. La primera impresión es fantástica. Está a la par de la última entrada, que por cierto, tiene el símbolo integrado en la cubierta de los portátiles. Ese es un bonito toque. También note que el área del héroe tiene un tamaño decentemente. Este es demasiado grande sin servir ningún propósito. Las palabras audaces no tienen mucho sentido, así que eso distrae un poco. Tampoco me gusta el uso de un guión aquí. Pero dejando eso a un lado, se podría argumentar que este cuarto diseño es tan impactante como el primero. Pero debido a que el cliente quería ser retratado como de vanguardia, éste hizo clic con él. Para la llamada secundaria a la capa de acción el video está muy bien integrado, pero ahí es donde se detiene la buena noticia. El copywriting es modesto. En línea. Servicios de promoción, contabilidad, contabilidad con un N gran dipolo, están escribiendo el área de héroes. A continuación, observe cómo hemos deletreado aquí. Ese es otro error. Estos rubros tampoco están alineados a la izquierda. Si arrastramos hacia fuera una guía verá que el diseñador no utilizó el comando de alineación izquierda. Esta zona de aquí tampoco tiene sentido. Tenemos dos subtítulos y no vital que se coloca en dos líneas. Eso es un error de ejecución activado por lo que a mí respecta, ni siquiera me hagas empezar en el muro de texto. Además el botón más About Us es extremadamente extraño ser colocado en tal posición, tal manera. Dudo que se vaya a implementar de esa manera. ¿ Qué va a pasar si el ancho de la pantalla va a ser significativamente mayor. Ahora, podría seguir, pero la comida para llevar es con lo que empecé esta conferencia sobre 99 diseños. El mejor diseño no siempre gana. En cambio, el cliente elige el que satisfaga sus necesidades. Y esta entrada va para mostrarte que puedes salirte con una tonelada de errores. Si eliges las cajas adecuadas. En este curso, estamos enfocados en hacer las cosas bien? Ningún cliente serio va a aceptar todos estos temas, sobre todo si estamos hablando de miles de dólares. Pero 99 diseños es otro tipo de animal donde se necesita tener un enfoque diferente. Es por ello que tengo que cursos de diseño web. Este se enfoca en crear sitios web hermosos y efectivos. Eso, ese se centra en ganar. Como acabas de ver, estos son dos objetivos diferentes. Por último, quiero que se centren en el diseñador que creó esta entrada de dos estrellas. ¿ Cómo crees que se siente después de ver este diseño ganador? Claramente, está molesto. Pero hay dos maneras de hacerlo. Se puede pensar que 99 diseños es una plataforma terrible, va a hacer un cliente idiota y cortar o que el concurso de diseño fuera un engaño. O puedes aprender de tus errores y tomar otro enfoque en el futuro. Por ejemplo, si esto tuviera dos estrellas, habría creado de inmediato una entrada basada en ilustración. Si papá se reiniciara, habría entendido que me estaba poniendo más caliente. Todo se trata de lo breve y obtener la retroalimentación de los clientes. Si no escribe nada, al menos se puede ver desde su núcleo en qué se mete. Este diseñador no pudo retomar lo que quería el cliente. Un sitio web moderno con elementos de alta tecnología. Y en esa nota, gracias a esta tableta, ayuda a este diseñador cuando este concurso, estoy bastante seguro de que esta tableta contiene una captura de pantalla aleatoria. Pueden desde Dribble o lo que sea. Y dudo mucho que esto fuera proporcionado por el cliente o que puedan desde su sitio web existente. Creo que ni siquiera tienen este software, pero creí firmemente que esto ayudó a sellar el trato. Y con eso, hemos concluido esta conferencia. Espero que esto te haya ayudado a entender por qué diseñar sitios web increíbles no es suficiente y por qué es esencial que entiendas lo que quiere el cliente. Buena suerte. 57. Diseño de sitios web de inicio de comercio electrónico: Bienvenido a este caso práctico donde hablaremos de las necesidades del cliente. Se trata de un sitio web de comercio electrónico que vende productos físicos, específicamente limonada, avena, llave, un pudín, y así sucesivamente. Como probablemente ya sabrán, este es mi propio negocio en Bucarest, Rumanía. Voy a descomponer todo para que puedas entender cuál es el razonamiento detrás de él. Ten en cuenta, hablaré tanto como diseñador web pero también como emprendedor. Entonces, empecemos. El número uno que quiero de este sitio web es generar ventas. Eso se debe a que se trata de un sitio web de comercio electrónico. Puedes comprar estos productos desde la página web y conseguir que se entreguen a tu puerta en menos de dos horas. Este no es un sitio de presentación que te muestre la ubicación de algunas tiendas físicas. Eso es algo importante que dicta cierto diseño. De acuerdo, ventas, para conseguirlas, necesitamos presumir de los productos. Ese es el primer paso. Eso es cercano a 30 en este punto. Por lo que se tiene que tomar una decisión. ¿ Cómo se deben diseñar estos? cual se ve aquí es un enfoque de tres columnas con pestañas. Pero, ¿por qué no cuatro o cinco columnas de ancho? No enumerarlos todos en la página de inicio. Bueno, los productos son llamativos, del llamativo. Tienen diferentes colores y simplemente mirándolos muestra una buena variedad. Porque los productos son lo visual. Necesitan una cantidad saludable de espacio. Las fotos tienen que ser grandes. Considerando que son los más menos seis productos por categoría, ese es el máximo. ideal una cuadrícula de tres columnas y dos filas. En realidad probé el diseño de cuatro columnas a la 1, pero no me gustó. Eso es para esos casos donde tendría ocho productos. Pero de nuevo, el máximo en este momento es de siete y ahora realmente se necesita. Las pestañas también son una buena idea porque toman el centro del escenario. Entonces inmediatamente después del subtitular, Es poco probable que alguien los vaya a extrañar. Por lo que en general, lo primero que se necesita ordenar en un sitio web de comercio electrónico es mostrar la variedad de productos de una manera efectiva. Los propios productos, estamos mucho hacia esta decisión y los números. Si estos fueran más feos, más sencillos, podríamos haber usado otro tipo de maquetación, tal vez una lista con un pequeño avatar para el, cada producto. Si la tienda tenía miles de productos, uno de los diseños más populares es éste. Vemos una lista de artículos acoplados a algunos iconos bastante bonitos. Observe que no se llena por cierto, sino lineal, que es una elección inteligente porque hace que el área de diseño. En fin, volviendo a la estructura, nadie dice que estos productos son feos o poco atrayentes. Pero debido a que hay tantos de ellos, se necesita una lista basada en texto. Volver a nuestro diseño. El titular y el subtitular son una necesidad. Se utilizan las pestañas para navegar rápidamente por el catálogo de productos. Hablemos del producto en este listado. Cuando la gente está mirando alrededor, nuestro objetivo como diseñadores web es darles suficiente información para que puedan realizar una compra. No muy poco, porque entonces el sitio web no parecerá creíble y fácil de usar. No demasiada información porque puede abrumar al usuario. De esta manera, el diseño va de la siguiente manera. ¿ Qué es absolutamente obligatorio? Esa es la pregunta que debería estar en tu mente. ¿ Qué elementos son esenciales en un listado? Obviamente la foto, ya que esto va a jugar en los apetitos de la gente, porque se trata de negocios relacionados con la alimentación. A continuación, el título del producto para que puedas averiguar de qué se trata. Moverse a lo largo. Necesitamos algún tipo de prueba social, alguna forma de establecer credibilidad. Esos son los puntos de vista. En este caso, vemos una votación basada en porcentajes y el número de votos. Está bien, eso está bien. A continuación, el precio y cantidad. Por último, dos llamados a la acción. En general, solo hay una cosa que es extra en este listado, la cantidad de calorías que se incluye porque es parte de los valores de la marca. Transparencia y decisiones informadas. El negocio no es todo sobre dietas y bajas calorías se trata de tomar decisiones inteligentes y comer, ¿verdad? Por lo que esta pequeña línea en realidad hace mucho en cuanto a empacar un mensaje en tan solo unos caracteres. Si el mensaje se entrega o no de manera efectiva. Eso depende del resto del contenido que el próximo año o las Preguntas frecuentes en la parte inferior. Pero en general, esto es necesario y es un bonito toque. Entonces la conclusión es que no hay grasa, hay nada extra en este listado. Podríamos haber agregado una breve descripción, pero eso habría hecho que el listado fuera más concurrido y más alto. Cada artículo ya es bastante alto, así que eso está fuera de cuestión. Podríamos mostrar los ingredientes para cada sabor, pero el título ya te dice los aspectos más destacados. En general, aquí es justo donde necesita estar. Ves el producto, lees al respecto, ves lo probable que es por otras personas, es precio, cuánta cantidad vas a obtener. Entonces esto es suficiente para seguir adelante. Hablemos de estos botones. ¿ Por qué dos? Bueno, el icono del carrito es un medio para agregar rápidamente productos a tu carrito sin moverse de ida y vuelta. Esto crearía fricción. Aquí está el flujo sin ella. Elija un producto, espere a que se cargue la página. Después agregado a tu tarjeta. Después vuelve a la página de inicio, pasa a una pestaña determinada, haz clic en un producto y luego agrega a tu carrito. Considerando que la orden mínima es para empleos, Eso es una molestia, eso es fricción. Por lo tanto, esta es una elección muy inteligente. Este botoncito en realidad tiene mucho sentido. Es cierto que el icono debería haber tenido un símbolo más la próxima semana. Pero hablaremos de lo que se puede mejorar en otro punto de las canchas. El botón naranja es una llamada a la acción que dice Ver Detalles. El botón es bastante grande y está coloreado Hammond cuando idea específica en tu mente. Si es naranja, puedes hacer clic en él. Hablando del diseño, podrías suponer que el botón azul Añadir al carrito debería ser más grande. Pero eso es demasiado agresivo. Queremos que la gente haga compras, pero no debemos asumir que la mayoría de los visitantes usarán este botón. Esto en realidad es para determinar los clientes que ya conocen los productos. El hecho es que la mayoría de la gente probablemente querrá ver más sobre los productos antes de hacer una compra. negocios, mientras les encantan los clientes que regresan, primero tienen que conseguirlo los nuevos usuarios. Como tal, este 80, 20 split view details slash agregar al carrito. Tiene sentido. Tomemos un breve descanso y seguiremos con nuestro análisis. 58. Detalles de productos de comercio electrónico: Bienvenido de nuevo. Demos click en un producto para que podamos ver qué es qué. Aquí, el usuario expresa interés por un producto, por lo que tuvimos que conseguirle información adicional. El número uno para mí es la galería de productos. Esto tiene que girar automáticamente para llamar la atención del usuario. Tiene que ser lo suficientemente grande para que tenga un impacto. Por lo que esto debería ser lo primero que configurar. A continuación, obviamente un título grande, la prueba social y el fragmento de información. El caso es que algunas personas no quieren leer la novela corta. Es comida, es postre. Claro, quizá quieras saber más al respecto, pero tres líneas de texto deberían ser suficientes para una parte significativa de la audiencia. Entonces el naranja entra en juego como el color de acción. En la página de inicio se demostró que si es naranja, se puede hacer clic en ella. Bueno, aquí tenemos el controlador de cantidad y botón de agregar al carrito. Estos están en la parte superior de la maquetación para que no te los pierdas. Si nos enfocamos en los rectángulos blancos que conforman la página, podemos ver que hay tres diferentes. Esto no es por accidente. Esta es la subliminalmente transmitir la idea de que hay diferentes áreas con diversos grados de importancia. Esto es de ancho completo y contiene naranja, super-importante. Esta otra bastante amplia con algunas pestañas, de mediana importancia. Por último, hay columna estrecha, mínima importancia. Algo basado en el patrón Z, que establece que el usuario escanea la página en busca de los puntos de interés, y en realidad no la toma de arriba hacia abajo. Aquí te dejamos un interesante artículo al respecto. La idea es que miras rápidamente las partes clave del diseño y la forma en que tus ojos se mueven compone la letra Z. Algunos dicen que el punto de acabado debe ser un botón de llamada a la acción. Bueno, si tomamos el encabezado en consideración seguro. El suministro, logotipo, login, información registrada sobre el producto a través de la galería y texto. Por último eso al botón Carrito. Pero si aplicas el patrón Z en estas tres columnas, el punto final sería este estrecho área de información, que no es para nada importante. Por eso dije que esto se basa vagamente en el patrón Z. Hablemos de estas pestañas a la primera contiene información adicional sobre un producto para aquellos que realmente quieren sumergirse en él. El segundo tabulador contiene toda la información nutricional, que es un componente importante que espeja la información de Kelvin desde la página de inicio. Por último, los puntos de vista para alguna prueba social, el diseño se rompe alrededor del 75, 25 por ciento debido al bloque de ancho completo sería incómodo. Podríamos haber agregado la información nutricional al costado debajo de las vistas debajo, es cierto, pero de nuevo, el sistema de tabuladores mide la página de inicio. No obstante, sigue siendo una buena alternativa a tener en cuenta por otra ocasión. Avanzando hacia arriba, las migas de pan, ¿están ahí los propósitos SEO completos? Y eso es lo que los iconos de las redes sociales, estos se utilizan para compartir este producto en Facebook, Twitter, o vía correo electrónico. Este tipo de área de acción está bastante anticuada. Se pensaría que no mucha gente lo usaría, pero los productos atraen a un público mayor, en su mayoría mujeres de 35 a 45 años. Por lo tanto, estos botones de compartir no parecen tan ridículos considerando al público objetivo. Además desde el punto de vista del diseño, equilibran esta área que de otro modo sería de 20. Nuevamente, esto es entender las necesidades del cliente. El público objetivo requiere estos botones. El público objetivo en realidad usaría estos botones. A continuación, cuando añades el producto a tu tarjeta, obtenemos una notificación en la parte inferior de la pantalla, cual es en su mayoría para los usuarios móviles. Y tomé una decisión bastante dura para incluir esta barra amarilla inmediatamente debajo del área de héroes. De esta manera mostrar la tarjeta actual. Aquí está la primicia. Si no lo agregara, entonces habríamos necesitado un pop-up que le hubiera pedido al usuario si quiere seguir comprando, vaya a la caja. Esto fragmentaría la experiencia del usuario. Lo rompería en pedazos más pequeños. Recuerda que son por lo menos de cuatro a cinco empleos. En realidad sé que la mayoría de las auditorías contienen al menos 10 productos. Por lo que este tipo de pop-up sería un poco frustrante. Mi enfoque es bastante seguro. El carrito sigue presente en la parte superior derecha, no junto al menú principal, pero aún en una zona donde el usuario espera encontrarlo. Por lo que lograr esto es un buen compromiso. De eso se trata respecto a esta página, pasemos a la caja. 59. Revisión de comercio electrónico: Bienvenidos de nuevo aquí. Hablemos del proceso de checkout. Si no te has conectado, aún deberías poder ver los productos que has añadido a tu carrito. Aquí está el resumen del pedido aquí mismo. En el lado izquierdo, tenemos unas palabras sobre el proceso de entrega y una gran slash de inicio de sesión registre el botón. Por cierto, este es un rediseño completo. La versión antigua no funcionaba bien de acuerdo a mi analítica. Entonces esta es la nueva y mejorada versión. Sigo esperando que llegue esta tarea, pero después de unos días, parece que esto está trayendo un poco más de ventas. Observe algo importante aquí. Se muestra el botón Hacer Pedido, pero no está activo. De ahí que este color gris. Quiero mostrar ese botón para que el usuario sepa dónde encontrarlo. También muestro un mensaje en su interior diciendo, Por favor llene toda su información. Otra cosa que no se muestra es el costo de envío. Obviamente no hay dirección de entrega, por lo que no se debe mostrar esa información. Vamos a registrar esa cuenta de Paik y ya veremos qué es palabra. En primer lugar, tomé la decisión de numerar. Estos son los pasos. Yo quiero que se muestren en todo momento. Orientar al usuario a través del proceso haciendo inactivas estas otras dos partes. Vemos que falta la información de contacto, es decir, el nombre y el número de teléfono. Tenemos un botón grande aquí que te ayuda a llenar esa información. El parte importante es la dirección porque los gastos de envío se calculan en función de tu ciudad. De nuevo, tenemos un botón que abre un diálogo que permite agregar una dirección no es ideal, que haya un paso intermediario. Pero otra vez, aún trabajarán por hacer en la página web. Rápidamente llenaré esta información con cosas aleatorias para que puedas ver qué es qué. Básicamente después de agregar tus datos, luego desbloqueas el paso 23. El método de entrega se basa en tu ciudad en el paso uno. Y si tu pulgar el libro mayúsculo arrestan, entonces tienes a los métodos de entrega, entrega súper rápida o el estándar. Estos tienen diferentes precios en función de tu selección, el ordenado algunos de los cambios es extremadamente importante. El resumen permanece visible porque se llega a ver el costo total aquí. Por lo que este diseño con dos columnas debe proporcionar al usuario una transparencia extra. Anteriormente, todos estos estaban apilados uno encima del otro, lo que significaba que el usuario tenía que desplazarse constantemente hacia arriba y hacia abajo. Eso es fricción extra que hace que la gente se rinda. Entonces eso es otra vez, entender las necesidades del cliente. En cuanto a la entrega muy rápida, la empresa le da al usuario una opción para programar que ordenó llegar a una hora determinada para que se necesitara ese calendario. Esto te muestra las fechas de entrega disponibles para hacer este círculo verde. Una vez que seleccionas el día, también obtienes un desplegable que te da la opción de seleccionar una hora. Este calendario también es un salvavidas cuando se reduce a vacaciones y diversos casos donde el clima no nos permite hacer ninguna entrega, ¿verdad? En caso de que el usuario cambie de ciudad, que entreguen, los métodos son diferentes. Solo obtienes una opción y el costo también es mucho mayor. Nuevamente, esto se muestra en el lado derecho. El precio sube hasta 30, que es un poco crítico de información. Este fue un punto de dolor en el pasado porque el costo más alto se mostraba por defecto. Incluso si calificó para entrega súper rápida, que es mucho más barato, el diseño antiguo mostró el costo más alto por defecto. Eso fue un error de codificación, pero aún así molestó a mucha gente. De ahí, por qué se tuvo que hacer este rediseño. Como se puede ver, todo el asunto se trata de hacer el uso de la felicidad. guiado llegó con un toque fino hacia la meta final. Cuando estos otros aquí en la Orden de Lugar se muestran constantemente con el fin de minimizar la situación. Si hace clic en el botón y luego aparece una flecha que garantiza algún tipo de retroalimentación negativa. En el ruidoso. Cuando realizas un pedido, esperas una página de confirmación, un mensaje de éxito de cualquier tipo. Cuando te encuentras con un añadido un ceño fruncido inevitablemente va a aparecer en tu cara. Considerando que tienes que cumplir con un pedido mínimo, elige un método de pago y así sucesivamente. Esto significaría que un usuario tendría que hacer clic hasta tres veces y obtener un error. Esa sería una experiencia frustrante. Por lo que al simplemente mostrar todas las ediciones de inmediato, esto puede mejorar su experiencia. Obviamente, la palabra clave aquí es tal vez sea una apuesta. Puede darse por vencido si ve todo este rojo. Pero es algo por lo que me gusta apostar. Creo que este es un mejor enfoque. Ahora mismo, vamos al caso donde se cumplan todas las condiciones. El botón se vuelve naranja, y ahora puedes hacer un pedido. Este cambio del botón de gran naranja es supremamente importante. Mi libro, un clic acaba de suceder en la mente del usuario. Ahora sabe que es libre de colocar la palabra de que cada vez que le apetezca. Es un poco importante de retroalimentación que ayuda al usuario a sentirse en control. Y es más probable que haga un pedido al obtener esta señal visual. Este es el proceso de pago en pocas palabras, todo se trata de hacer las cosas lo más directas posible. Claridad es la palabra clave aquí. No esperes que la gente haga nada para seguir un enfoque de arriba a abajo, para leer todo. Supongamos que el usuario prácticamente no tiene experiencia en comprar en línea. Así de fácil tienes que hacer todo este proceso. Incluso el campo de detalles del pedido ahora se muestra por defecto. Anteriormente tenías que hacer clic en un botón y eso impulsó la popup con este campo. El plan es reducir el número de clics innecesarios porque eso significará más ventas. Esto es a lo que me refiero entendiendo las necesidades del cliente. Esto es comercio electrónico. Este sitio se trata de hacer ventas. Tu trabajo no es agregar cargas encantadoras. Agícalo con ilustraciones, colores llamativos, esquemas, y demás. Ahora, ante todo, tienes que asegurarte de que la experiencia general de compra sea sin esfuerzo. Que incluso una abuelita de 80 años puede ir fácilmente al ancho. O las elecciones de diseño tienen que hacerse hacia ese fin, hacia la venta. Por ejemplo, mira este botón de radio. El activo es naranja, el inactivo es gris. Mira el botón de colocar pedido inactivo, o ¿cómo funciona una capa de texto más pequeña debajo de las opciones de entrega? Esto es importante porque ayuda al usuario a enfocarse en lo que es crítico y lo que es agradable saber. Observe los rectángulos individuales o cómo todos los titulares tienen aplicado el tratamiento all caps. Vea cómo el gris de este campo es diferente del color de fondo. Todas estas cosas son pequeños detalles que ayudan al usuario a realizar una compra. Empiezas con el objetivo de las ventas del sitio web y luego trabajas tu camino de regreso. Es por ello que hay poca o ninguna decoración, sobre todo en la página de inicio o en la página de detalles del producto. Las fotos son lo vivo, lo brillante y colorido. El resto del diseño tiene que ser sometido. Por lo que no se convertirá en una contienda de gritos entre estos elementos. El interfaz debe dejar brillar los productos. No debe competir por la atención. Como búsqueda, no hay ilustraciones locas ni todo tipo de detalles de diseño salpicados a lo largo. Me encantaría añadirlas, sí. Pero eso es sólo después de que me ocupe de los fundamentos. Esta es la mentalidad que tienes que asumir. Todo se trata de las necesidades del cliente, las necesidades de los negocios. Haciendo ventas. Usted como diseñador, es contratado para ayudarles a lograr eso. Utilizas la guía de estilo de marca. Expresas tu creatividad. Pero no se trata de hacer un sitio web impresionante, no se trata de agregar una pieza central para tener portafolio, se trata de lo bien que el sitio web les va a poner una vez que esté en vivo. Y si los análisis mostraron que hay margen para mejorar, tienes que tomarte el tiempo para hacer cambios. Gracias por sintonizar. 60. ¿Por qué no hay el pixel de sitios web: Oye, ahí, creo que algunos de mis alumnos podrían ver algunas imperfecciones en mis propios sitios web y pensar, hmm, si loco, tan buen diseñador web, ¿Por qué no son sus sitios web esos diez de cada diez? Esa es una pregunta legítima. Pero no aplica, sólo mis proyectos. Veamos qué hace que los sitios web se descompongan. Aquí está la página del carrito. Cuando no estás registrado. Observe cómo el fotón está flotando por ahí. Error de corte claro. Cuando visites el producto, verás las líneas verticales. No tenga sentido. El logo es offset fue el ditto izquierdo para el contenido desde la primera pestaña. No se alinea con el logo. Piensa en el logotipo. Esta estrecha columna muestra una gigantesca, que sí tiene sentido. A continuación tenemos una altura de línea diferente aquí versus aquí. El hueco entre el carro y el rectángulo base es demasiado grande y los problemas siguen apilándose. ¿ Por qué están ocurriendo estas cosas? ¿ Por qué se descomponen las cosas a izquierda y derecha? El diseño te puedo asegurar fue pixel-perfecto. ¿ Esperarías que compensara este logotipo en Photoshop o utilizara una altura de línea diferente para dos áreas diferentes de la misma página? Por supuesto que no. Agradezco que me des el beneficio de la duda por cierto. Entonces si mi PSD era pixel-perfecto, ¿por qué está la versión en vivo llena de todo tipo de temas, prioridades fáciles. En otras palabras, la empresa de codificación no hizo un gran trabajo. Y yo, como diseñador y dueño de negocios, opté por ignorar estos problemas. Y yo lo hice porque eso sería otro los asuntos más apremiantes prioridades. Por ejemplo, la gente seguía abandonando sus tarjetas por los costos de envío. Como dije antes, el sitio mostró el costo más alto por defecto sólo cuando el uso de agregado su dirección real fue el precio actualizado. Pero para entonces, el 90% de los usuarios ya se rindieron. Eso significó pérdidas de ventas. Eso significaba dinero por la ventana. Y comparación, estas líneas verticales pálidas en comparación. A nadie le importa si el espacio es demasiado grande y así sucesivamente. Estos no tienen mayor prioridad porque gente no está renunciando a esas órdenes por ellos. Esto es lo mismo en todo el mundo. Esto no es específico de mi página web ni de los codones que contraté. Empresas izquierda y derecha están optando por ignorar ciertos temas de pequeño nivel porque hay más o asuntos genéticos. Tenemos un dicho en Rumania que se traduce aproximadamente a que la casa está en llamas. La anciana se está peinando el pelo. Básicamente, si la empresa está perdiendo dinero porque el desplegable de la ciudad no está funcionando bien, y la gente puede hacer sus pedidos. A nadie le importa la altura de la línea. Ajustar. Parece ridículo cuando hacer un pedido es imposible debido a un error. Y esa es la clave aquí. Los bichos aparecen todo el tiempo. Por ejemplo, elegí cambiar la familia de fuentes por una fuente serif. Por eso, el tamaño de este fragmento ya no era viable. Era demasiado pequeño y tenía mala legibilidad. El codificador ajustó el tamaño, pero luego la altura de la línea no era correcta. Lo corrigió en base a mis instrucciones, pero no aplicó el mismo valor a todas las demás capas de textos. Entonces como puedes ver, un pequeño cambio trae consigo una cascada de ediciones. Y como dije antes, un sitio web es un ser vivo, una herramienta que constantemente necesita calibración para tener un buen desempeño. Las ediciones son inevitables. Pero con esas ediciones vienen errores y problemas de funcionalidad. Y yo chico que no cambies el color de un botón hacen romper el sitio web de Intel, el CSS puede que ya no se cargue correctamente. El diseño puede cambiar drásticamente. Carrito puede no funcionar. Todo esto por un cambio de color. Sí. Sé que suena ridículo. Pero los que están en el saber lo pueden confirmar. Múltiples sucursales, múltiples personas trabajando en el mismo proyecto, no usar el servidor de puesta en escena o modo sandbox, lo nombra. Hay montones de razones por las que esto sucede de vez en cuando. Es vergonzoso que sí, pero sí sucede. Las empresas de codificación hacen todo lo posible, pero siempre priorizan su trabajo. Ver, al principio, todo el mundo está de acuerdo en que la funcionalidad tiene que ser resuelta. Si no puedes hacer click físicamente en una carga para hacer un pedido, todo es para nada. No hay discusión sobre eso que hay que arreglar primero. Pero luego llegamos a hablar del pie de página flotante o del logotipo de gran tamaño. Las empresas de codificación odian este tipo de trabajo porque no hay dinero en él y ganan a sus codones prefieren proyectos complejos que requieren un enfoque A12Z. Lo que enumeraron hasta ahora en cuanto a temas en mi página web, ocupa unas horas de su tiempo, tan poco o nada de dinero para ellos. Encodifica odiar este tipo de trabajo porque sienten que está por debajo de ellos. Estoy especulando, claro, hay otras razones, pero eso es además del punto. Por estas razones, contraté al freelancer para que me ayudara a encontrarte en el diseñador simplemente porque esta gran compañía de codificación hizo todo el backend la base de datos, toda la funcionalidad con cobrarme alrededor de 40 a $50 por hora. El freelancer sólo pide la fracción de esa suma. Pero esto también trae problemas porque tienen que trabajar juntos la mitad para mantener el código fuente en GitHub. Necesitan etiquetar sus ediciones y tienen que asegurarse cuando cometen los cambios que no rompen el sitio web por el motivo que sea. Es un acto de equilibrio apretado. La lección no es ciencia cohete, pero la mala comunicación, diferentes estilos, diferentes estilos de codificación, diferentes zonas horarias, y un montón de otras razones resultan en problemas. Es un tema sensible porque a la compañía de codificación no le gusta el freelancer. Y el Freelancer quiere hacer más trabajo en el sitio web de acuerdo a su propia experiencia, visión, sin mencionar su cuenta bancaria. Podría seguir, pero déjame resumirlo. En pocas palabras. Los sitios web están llenos de varios errores de diseño porque a las empresas de codificación no les importan los diseños perfectos de píxel, entonces a los codificadores no les gusta este tipo de trabajo no les resulta lucrativo desde el punto de vista financiero. Y cuando encuentres la extraña compañía de codificación que los niños sobre estos temas de diseño, les costarán un brazo y una pierna. Y el cliente no estará contento por ello. Y aunque todo sea perfecto a la 1, digamos, después de que la empresa de codificación termine los proyectos y entregue las claves proverbiales al cliente, los cambios son inevitables. Ya hablamos de que hace unas conferencias, no es que el cliente cambie de opinión al azar se debe a la analítica. Y como dije, las ediciones traen bichos. Los bugs tienen que ser priorizados en base a la importancia. pequeños detalles de diseño siempre se dejan a un lado y el ciclo continúa y sigue. Y es por eso que la mayoría de los sitios web no son pixel perfecto, ni siquiera mío. 61. Página de aterrizaje vs un sitio web: Hola allá y bienvenidos. Empecemos un nuevo capítulo analizando las necesidades del cliente. Para hacer diferentes lentes. Entendemos que la mayoría de las empresas quieren que sus sitios web funcionen, y por eso tenemos que hablar de las páginas de aterrizaje. Como estás a punto de ver, estos son un animal completamente diferente. Y hay que entender que si vas a hacer felices a tus clientes, las páginas de aterrizaje tienen un objetivo específico que puede asumir varias formas, pero las dos más populares están capturando la información del usuario, en la mayoría de los casos, su correo electrónico dirección. Esto a menudo se llama generación de leads, o la otra rama se centra en conseguir que el cliente realice una compra. Ahora, para entender mejor las diferencias entre un sitio web estándar y la página de destino, Echemos un vistazo a Uber, la compañía de transporte que ha evolucionado dramáticamente a lo largo de los años. Cuando navegamos por ahí, el sitio web principal, vemos muchas cosas. Ganar dinero como chofer, escribir un nuevo tablero, como cliente, regalar comida entregada a tu puerta, además de un montón de otras cosas. Podemos explorar la presencia mundial o su compromiso con la seguridad. Tenemos varias cosas que explorar respecto a saber más sobre ellas, leer sus últimas noticias y demás. Este es un sitio web clásico. En función de tus intereses como usuario, puedes elegir una avenida y explorarla. La empresa tiene que exhibir toda esta información porque no sabe lo que nosotros como visitantes estamos buscando. De esta manera, el enfoque estándar tiene un diseño general con múltiples puntos de interés. Seguro. Podemos ver que se está impulsando el apuntarse a conducir frente a todas las demás cosas. Pero no lo llamarías el único objetivo de esta página, ¿verdad? Renta la página de aterrizaje. Observe la diferencia. Convertirse en conductor es ahora la estrella de la página. Cada elemento, cada capa de texto, cada botón trata de que te conviertas en un controlador. Nada más, ni ruido, nada que te pueda distraer del único objetivo de la página. Normalmente, las páginas de destino se utilizan en combinación con una campaña publicitaria. Es posible que veas pancartas en la web sobre conducir para Uber. Y cuando les hagas click, te traerán aquí. La idea es que al hacer clic en un anuncio que promueve que estás conduciendo para ellos, expreses tu interés hacia ese objetivo. Que ahora esas cosas bajan drásticamente. El sitio ahora sabe con qué tipo de usuario se trata. Llevar a una persona así a un sitio web general no es ideal porque puede estar confundido o distraído por todas estas otras cosas. De esta manera, una página de aterrizaje está en orden. Recuerde, al tratar con un usuario, la empresa y el diseñador web en cuestión tienen que crear una experiencia. Al igual que como abuela extranjera de 80 años, no debes asumir nada. No debes pensar, oh, bueno, incluso en la página web general, sigue siendo bastante fácil encontrar el registro como conductor de carga. Esa no es una forma productiva de acercarse al diseño web moderno. Como dije antes, hay que asumir que el usuario es una supermodelo y el sitio web es un tipo golpeando con ella. Tienes que hacer una impresión fabulosa en dos segundos plana. Si la primera impresión no es correcta, eso es todo. Perdiste esa oportunidad. Perdiste a ese cliente. ¿ De verdad es que blanco o negro? Un sitio web inactivo convierte, o no lo hace, por supuesto, los lat grados de rendimiento. Pero tu mentalidad debería basarse en este enfoque de garganta cortada. Volviendo a la página de aterrizaje, el objetivo principal para que los usuarios se inscriban como conductor se rompe en bits más pequeños. Posteriormente, cada área tiene el objetivo de empujar al usuario hacia la toma de una decisión, específicamente llenando eso para ellos. Hacia ese fin, hay muchas cosas que podemos observar. En primer lugar, nota que aquí no hay mucho texto. Tenemos un diseño de tres columnas y cada sección quiere abordar concisamente ciertos puntos. Estos se llaman USP, puntos de venta únicos. Básicamente, los usuarios quieren el resumen muy breve, establecer tu propio horario, ganar dinero en tus plazos, y así sucesivamente. Las empresas confían en estos puntos para obtener resultados porque la verdad es realidad nadie lee todo en la página. En cambio, nosotros, como diseñadores, tenemos que crear varias secciones que abordaran varios temas potenciales o puntos dolorosos. En esta parte, el mensaje es tentador, gana dinero cuando quieras. Ese es un gran gancho. Estos tres titulares manejan en casa. Estas son todas las cosas que quiero. Se forma el deseo. Resono con estas cosas que quería, pero no sé qué sigue como usuario, estoy enchufando ahora mismo. Bueno, aquí está la siguiente sección, Empezar, que es perfecta para una persona ampeada, alguien que está encendido por un impulso temporal. Esto me dice exactamente lo que tengo que hacer. Y no lo sabrías, son sólo tres sencillos pasos. Pasando adelante. Aquí hay otro allá. Sí, específicamente para mi Región, Rumania. Esto me hace sentir seguro en el zapato de esta comida, tener apoyo constante. Me tranquiliza estoy en buenas manos, bellamente hecho. Después tenemos una sección sobre la aplicación dedicada que está construida para el conductor. Esto consolida aún más la idea de que las cosas son muy fáciles de usar. Por último, una muy necesaria sección de FAQ y el gran llamado a la acción. Por cierto, en general, hablamos del CTA o llamado a la acción y no una carga porque esa acción puede tomar por varias formas. Puede ser un campo de número telefónico, una forma que toma capa como este, un icono o por supuesto una carga. Por lo que los diseñadores web prefieren usar el término CTA por esa razón. En general, podemos resumir la diferencia entre una página de aterrizaje y la página web estándar por los objetivos. Una página de aterrizaje tiene un solo objetivo, y debido a eso, todo el contenido se construye alrededor de cumplirla. Un sitio web estándar suele tener un enfoque más amplio con múltiples secciones que apuntan en diferentes direcciones. Por ejemplo, en mi página web de avena, quizá quiera vender avena, seguro. Pero también quiero promocionar mi blog, mi newsletter, yo redes sociales, mi cadena de tiendas físicas, la sección de contratación de la página web y así sucesivamente. Todas estas cosas, en realidad puedo hacer más ventas. Entonces es un poco de bola curva, un enfoque de venta indirecta. En general, un sitio web estándar es imprescindible porque cumple con muchas necesidades. Pero cuando quieres enfocarte 100% en algo específico, entonces usas una página de aterrizaje. A lo largo de esta sección, te mostraré muchos ejemplos. Pasaremos por varios casos prácticos y verás qué vale. Por ahora. Tomemos un breve descanso. 62. Estudios de casos casos: las necesidades del cliente: Bienvenido de nuevo. Quiero explicar más a qué me refiero con las necesidades del cliente. Otra forma de mirarlo es pensar en la vibra de los diseños, qué mensaje envía en su conjunto. Empezaremos con Mr. Porter, una de las tiendas de lujo más conocidas del mundo. Típico para las marcas de gama alta, vemos una abundancia de decoración blanca y mínima. Dosis fuertes de negro aquí y son todo caps tratamiento también es bastante popular y generalmente está acoplado con una fuente serif interesante. El diseño parece atemporal y este tipo de sitios no hacen mucho renovado con los años. Cuando pasamos a cualquier categoría, digamos ropa, obtenemos lo mismo, decoración mínima. Todo esto no es por casualidad. Las marcas de lujo se diseñan de tal manera donde pagas entonces 20 veces más por la misma calidad. Hacen eso asociando ciertos sentimientos con su marca. Entonces aquí está la primicia. las personas que compran chaquetas de cuero de 8 mil dólares están acostumbradas a ciertas cosas. Sus departamentos suelen ser modernos, llenos de mármol blanco, techos altos y amplios espacios abiertos. Soy un gran fan del show llamado Million Dollar Listing Nueva York. Y he visto cada uno de sus 98 episodios desde 2012. El lujo no significa desorden, mucho blanco, mucha luz. Cuando hay una pieza decorativa, digamos una pintura, es una que realmente destaca. Me apasiona los relojes a la mayoría de las piezas alrededor de diez a $20 mil son realmente lo simple. El lujo se puede resumir en un bordillo. Los relojes baratos, de gama demasiado baja suelen ser complicados y desordenados. Cuanto más subas, más refinado será el look y que la complejidad de 70 a 100 K vuelva a entrar. Ahora, te estoy contando todas estas cosas. Para que puedas pensar para quién es este sitio web. No es para el 99 por ciento del público, es para aquellas personas que gastan de cuatro a cinco dígitos cada vez que compran. Como tal, cuando diseñas un sitio web para este público, necesitas saber lo que aprecian, qué están rodeados todos los días. Para que puedas imitar esas cosas e integrarlas en tu trabajo. Es por eso que obtenemos tanto blanco y mucho espacio negativo, lo que significa espacio que no se usa. Así se ven los departamentos. Observe el pequeño titular y subtitular. Eso se debe a que la mayoría de las marcas de lujo tienen etiquetas muy pequeñas. Rara vez gritan diciendo Lauren. Y cuando sí ves una pieza que cuenta con el logotipo en un tamaño generoso, suele ser un artículo más barato. Ahora, al hacer toda esta investigación, así es como se llega a cobrar $10 mil y más por el único sitio web. Incluso si no cobras una cuarta parte de eso, aún necesitas poner en el esfuerzo para hacer feliz al cliente. Entonces cambiémoslo. Echa un vistazo rápido a este sitio web. Para quién es esto? ¿ Es para el mismo público que el señor Porter? Obviamente no. Esto claramente está dirigido a niños y personas muy jóvenes. ¿ Qué aprecian? Colores brillantes, grandes titulares atrevidos de decoraciones, botones grandes que están un poco deslumbrados con todo tipo de efectos. Cada componente aquí está dirigido a niños y está muy bien ejecutado. Pero, um, tengo que recalcar esto. Esta no es mejor la página web que el señor Porter. Esto es lo que los principiantes no se dan cuenta de que estás comparando manzanas con sofás. Estos no están en el mismo estadio de baile. No hay comparación que hacer porque las necesidades de los clientes son muy diferentes. En caso de que pueda quedar impresionado por el nivel de detalle en la página web de este niño. Pero de nuevo, eso no significa que esto sea mejor. En la analítica te dirá qué mejor funciona el diseño para ese cliente específico. Pasando al siguiente diseño. Claro, Esto es del mismo nicho, que consigue el mismo público más o menos. Como tal, se puede comparar estos dos. Se puede descomponer y analizar cada botón, cada ilustración y así sucesivamente. Esta es una nota importante, así que lo volveré a decir. Si bien obviamente nos atraen todos estos preciosos detalles en ilustraciones, lo peor que podemos hacer es traer este enfoque al, uh, proyecto Mr. Portal. Esto seguramente te meterá en muchos problemas. Es por eso que me escucharás decir muchas veces que hasta diseños fantásticos son rechazados por los clientes. Por lo general, eso sucede cuando no te enfocas en sus necesidades. En cambio, piensas en tu portafolio. Te concentras en experimentar nuevas técnicas, nuevos looks. Este es el problema. Echemos un vistazo a otro sitio web. Esta vez es algo en ruso, pero de una manera que es mejor porque podemos enfocarnos en esta vibra. El verde es una opción muy sólida porque esto es relacionado con los alimentos. Se ve fresco. Más que eso. Es comida saludable. Los clientes esperan esta vibra y resuenan con ella. Se sentirán atraídos más que eso. Observe que el resto del diseño gira en torno al blanco y al gris. Esto envía un mensaje de que esto es un poco de gama alta. De nuevo, en realidad soy cliente de glándulas alimentarias saludables, y estas son bastante caras. Como tal, el sitio web necesita mostrar que estos iconos lineales, este minúsculo menú principal, estas bellas imágenes acompañadas de unas pocas líneas de texto. Todos estos se construyen alrededor del público objetivo. El propietario de este sitio web obviamente quiere atraer a cierto grupo de personas. Tú como diseñador tienes que conocer lo que les gusta a los veganos, vegetarianos, radianes de basquetbol, y construir esas cosas en tu diseño. De nuevo, no se trata de ti, se trata de las necesidades de tu cliente. El último ejemplo es una aplicación, pero en realidad es un diseño de tablero. Observe lo elegante y limpio que es. Eso está todo bien y bien. Pero la clave aquí es diseñar algo para un uso intenso. Usted como diseñador, tiene que darse cuenta de que el indicador clave de rendimiento KPI más probable es el tiempo que pasa dentro de la aplicación. Dicho de lo contrario, el cliente de esta app va a ganar más dinero si los usuarios pasan más tiempo utilizándola. ¿ Cómo puedes hacer eso? Bueno, vamos a un montón de cosas. Estamos hablando desde el punto de vista del diseño puro. Tiene que ser fácil a los ojos. Necesitas reducir la tensión ocular eligiendo encantadores colores suaves. Las salpicaduras de color tienen que ser insertadas con cuidado y con moderación. Para eso, se trata de una brecha de aprendizaje, lo que significa que para la situación va a ser inevitable horneando en un sentido de calma a través del esquema de color, espacio negativo, y un montón de otras cosas. Ayudarías al negocio a tener éxito. Una cosa es visitar rebelde y darse cuenta de que el diseño necesita ser elegante y limpio. Es otra cosa saber por qué ese es el caso. Esto es lo que te va a hacer destacar como diseñador. Esto es lo que te hará ganar la apreciación de tus clientes al ir la milla extra y enfocarte en las necesidades del cliente. Buena suerte con ello. 63. Generación de principal en las páginas de aterrizar: Bienvenido de nuevo. Quería mostrarte una encantadora página de aterrizaje para que puedas entender mejor qué es lo que Zyban.com hace una hermosa primera impresión. Es limpio, profesional, pero precioso en su sencillez. Tenemos mucho que aprender de ella, tanto desde el punto de vista del diseño sino también como página de aterrizaje. En primer lugar, concéntrate en el titular. Este es el principal USP, el único punto de venta. Es lo que hace especial al sitio web o servicio. Es lo que los distingue. Una mejor manera de hacer crecer tu negocio creativo. Para mí como creador de contenidos, esto me pone en marcha, capta mi atención. Esto es primordial de paso fundamental que es imprescindible en cualquier página de aterrizaje. Al elegir una magnífica fuente serif que se muestra en un tono marrón interesante, los gestores del diseñador para hacer que la copia destaque. Y si esto se mostrara en zonas, obviamente el impacto habría sido mínimo. Entonces ahí está la primera comida para llevar. Gran estilo de texto bellamente iguala a una USP efectiva. Ese fantástico titular. Si esta palabra decir somos diferentes a mejor, eso hubiera sido horrible. O si esto fuera a decir Zyban para tu negocio o incluso negocio creativo, nuevo, eso no sería ideal, caería plana. En cambio, la mejor manera de hacer crecer tu negocio tiene mucho significado detrás de él. Implica que se trata de un enfoque más inteligente. Respira conmigo como dueño de un negocio que estos chicos podrían tener una mejor solución, que lo que ya uso como poder de una pieza de copia bien escrita combinada con un diseñador experimentado que sabe exhibirla. Porque de nuevo, esto no es negro, no es amor gris. Es un bonito tono de marrón. Por lo que en general, la idea es nunca debes saltarte el titular principal de tu diseño. Si vas a usar Lorem ipsum o algo así como el mejor servicio, tu diseño va a sufrir mucho. Si el cliente no te proporciona un gran contenido que puedas darle estilo en consecuencia, haz alguna investigación y idear algo por tu cuenta. Ahora, sé que eso es algo fuera del alcance del DOD como diseñadores web. Y dije que el millón de veces en este curso. Pero puedes inspirarte de varios lugares y usar algo como marcador de posición. Entonces tu cliente, tenías un titular ingenioso en realidad es sacado de algún otro lugar. Y que tiene que llegar a algo por su cuenta. Pero no repito, no te pierdas esta oportunidad. No uses Lorem Ipsum. Todavía en el lado del diseño. Observe cómo el titular es más grande que el subtitular, pero no enorme. Esto es bien proporcionado. Esto es lo que quieres. Superdimensionando, no tendría sentido. Seguro que puede que no se vea tan mal. Pero el enfoque de dos líneas es más agradable a la vista. Volviendo al aspecto de la página de aterrizaje, observe el apuntarse. A esto se le llama generación de plomo. Y quiero explicar por qué muchas páginas de aterrizaje van por este enfoque. Pensarías que vender sería el foco principal de las páginas de aterrizaje. Pero esto es lo que pasa. Hace mucho tiempo, las empresas se enteraron de que si el usuario pasa un poco de tiempo usando su servicio, Es probable que se enganche. A través de la analítica. Muchas empresas encontraron un punto de inconveniente. En realidad he leído mucho sobre el tema, pero para mantener esto breve, tiraré algunos ejemplos aleatorios. Pero no, esto está muy bien documentado y te proporcionaré algunos títulos de libros por si realmente quieres sumergirte en ello. Aquí hay algunos ejemplos. Si un nuevo usuario de Facebook agrega ocho amigos a su red, va a convertir en un usuario activo. Esto fue realmente en el inicio de la misma. Entonces hoy en día realmente no aplica tanto. Pero ese fue un punto crítico en Spotify. Si te gustan 10 canciones, es muy probable que te conviertas en miembro premium en Netflix. Si inicias una prueba gratuita, es extremadamente probable que sigas usando ese servicio de pago. El razonamiento detrás de todos estos ejemplos es algo complejo cuando realmente te sumerges profundamente en ellos. Pero hay algunas razones lógicas que son fáciles de conseguir cuando te inscribes en el juicio. Cualquier juicio del que hablar, por lo general pones en tu tarjeta de crédito. Ese no es el caso aquí, sino en la mayoría de las situaciones eso se requiere. Después de 30 días, te olvidas de ello, te cobran. Y luego hay dos posibilidades. A, no te das cuenta de que te están cobrando porque te olvidaste totalmente de ello y no tienes un sistema de notificación en marcha con tu banco. Esto sucede más de lo que nos gustaría pensar. Incluso pagué el fijo durante unos dos años antes de que finalmente cavara profundamente en mi cuenta y me di cuenta del error. Entonces esa es la primera posibilidad. Simplemente te olvidas de los pagos mensuales. Y b, la segunda opción, en realidad usas el servicio y ves su valor. Es por ello que muchas páginas de préstamos no te empujan a hacer una compra. Si me permiten esta metáfora. Es un poco como salir. Si bien quizá quieras tener sexo con esa persona desde el principio, salir todo agresivo y gritar que afuera no te va a dar grandes resultados. En cambio sales, tomas un trago, conoces punto-dot Bunsen. Y ese enfoque es mucho más probable que te dé lo que quieres. Mira, el objetivo final es el mismo, pero el enfoque marca una gran diferencia. Renunciar a tu dirección de correo electrónico no parece una gran decisión. No hay riesgo de tomar una copa con alguien en un lugar público. Lo mismo. Se siente seguro si no te gusta, solo levántate y vete. Pero después de que comience el juicio y en realidad exploraste el servicio, es posible que te des cuenta de que esto es exactamente lo que has estado buscando, o al menos el hecho de que el servicio sí te brinde algún valor, a pesar de que no es un perfecto partido. En general, esta es la razón por la que las páginas de aterrizaje no siempre te empujan a realizar una compra. Prefieren el enfoque menos amenazante. Prefieren el juego un poco más largo porque saben que tienen más posibilidades de triunfar de esa manera. Esta es una forma aún más sencilla de ver la generación de plomo. el primer paso, haz que la gente entre por la puerta. Hazles echar un vistazo a tu menú, que prueben tus productos. Cualquier interacción es una victoria. Cualquier tipo de compromiso es un éxito. Volver al lado del diseño. Observe el botón Get Started, sin Bisel y Embosante, sin sombra interior, sombra gota, conoce Patrón, Overlay, sin gradiente, sin aspecto 3D nada. Este es el diseño web moderno. No se necesitan todos esos detalles. El impacto general es mayor a este enfoque. Se deja brillar la ilustración, y esta pizca de color es exactamente lo que se necesita para dibujar el ojo del usuario. hay absolutamente ninguna posibilidad de que no veas este botón. Está diseñado de tal manera donde es imposible perderlo. Desplazarse por las siguientes áreas desde la página de aterrizaje te ayuda a decidirte. El martillado en la idea de que el servicio brinda valor. Observe cómo más ventas está muy bien subrayado, cosas grises. Aunque no hay muchos textos. Todo es corto y dulce. Esto es para que estés cómodo desnatando a través de él. A medida que nos desplazamos hacia abajo, observe cómo se arregló la cabeza de esto. Esta es una técnica común que permite que la página de aterrizaje no se llene con muchas llamadas a la acción. En cambio, el botón Empezar permanece visible en todo momento. En general, se trata de una hermosa página de aterrizaje que tiene todo su contenido apuntado en una sola dirección, haciendo que ingreses tu dirección de correo electrónico para iniciar la prueba gratuita. Una página de aterrizaje es la combinación perfecta porque proporciona claridad. Si miras lo más alto en los canales de venta, vas a ver otros servicios, cada uno con su propia página dedicada. Esto elimina cualquier ruido. Todas estas otras cosas se habrían combinado en una sola página web estándar. Habría estado abarrotado, lleno de gente, y la tasa de conversión se habría desplomado. Y eso es un hecho, hecho bien documentado. En general. Eso es exhibit.com, una gran página de aterrizaje. Por cierto, está en la naturaleza de las páginas de aterrizaje cambiar constantemente. Si visitas este sitio web y ya no es el mismo que se muestra en este video. No se sorprenda. Las páginas de aterrizaje cambiaron constantemente ahí mira, en base a la analítica y la barra inclinada o las campañas publicitarias que van junto con ellas. Tomemos un breve descanso y seguiremos en un momento. 64. Por qué las páginas de aterrizaje: Hey allá, creo que es importante me dirijo al elefante en la habitación. Las páginas de aterrizaje tienen una mala reputación, sobre todo entre los diseñadores web. Eso se debe a que los siguientes diseños que estoy a punto de mostrarte son en lo mayoría de la gente piensa cuando mencionas la página de aterrizaje aquí, este para un webinar. No hay logotipo, que es bastante extraño, y no hay navegación, lo cual es común. Un enorme titular gigante y la foto de este caballero inmediatamente debajo de él, tenemos el CTA. El diseño parece sin refinar con estos titulares grandes y dominantes y colores fuertes. Al moverse un poco hacia abajo, esta forma es exactamente lo que tiendes a verte en las páginas de aterrizaje. Carga de gol, texto negro, muchas marcas de verificación y una forma llamativa. El diseño está lleno de afirmaciones audaces y puedes desplazarte 500 píxeles sin ver otra llamada a la acción. Veamos otro diseño esta vez para el suplemento de pérdida de peso. Observe la falta de una estructura tradicional. No hay cabecera ni el área de héroes. En cambio, el diseño parece un volante. Cta es muy visible. No se puede perder esta forma. Entonces lo de papá está lleno, extremadamente ocupado y de nuevo, sin refinar. Observe la foto de los productos, está en blanco. Eso es por una razón y lo tocaremos en un minuto. Típico para las páginas de aterrizaje, obtenemos un montón de insignias, garantía de devolución de dinero como se ve en la televisión y así sucesivamente. Nuevamente, afirmaciones audaces como el último avance quema grasa, todo natural y así sucesivamente. El texto del cuerpo es enorme, redondo, el doble del tamaño de un sitio web estándar. Todo está desordenado y agrupado en conjunto, pero el diseño es extremadamente largo. Esto es de nuevo, típico de las páginas de aterrizaje. Este es el estándar donde un sitio web regular se detiene alrededor de seis a 8 mil píxeles. Las páginas de aterrizaje pueden tener 20000 píxeles de largo. Sí, sé que eso es ridículo, pero ese es el juego. Cds, mujeres atractivas, de nuevo, un elemento básico de las páginas de aterrizaje. Pasemos a otro diseño. Estos son todos diseños tomados de 99 designs.com y estos son muy recientes. Estos son pulgar 2020. Este es un suplemento que va a ayudar a tu sistema digestivo. Disculpe la baja calidad, pero 99 diseños limita el tamaño de un diseño. Por eso algunos diseñadores suben esta versión más pequeña de ese trabajo. Es por ello que no podemos ver todos los detalles finos. Aquí tenemos una tonelada de textos, marcas de verificación brillantes, y el stock de páginas muy largo para esos médicos son una necesidad. amarre de precios también es bastante común en las páginas de aterrizaje. Yo diría que alrededor del 70 por ciento de ellos presentaron algún tipo de descuento masivo. Este diseño funciona de la misma manera que el landing page de las aves del zoológico. Muestra el producto. Después presenta la enfermedad. Cómo en realidad puede estar sufriendo de él, y cómo es mejor tratarlo lo más rápido posible. Los peligros de esta enfermedad son un incentivo importante. En Uber este caso, queríamos más efectivo y un horario flexible. Ese fue el gancho. Eso es miel, eso es placer. Una de dos formas de vender. Aquí, vemos que el dolor corta el miedo. El segundo modo de vender. Por lo que he leído, parece bien motivado por dos cosas, como dije, una, placer y evitar el dolor. Uber obviamente se canaliza en el placer y la página de aterrizaje. Los suplementos generalmente van por el evitar el dolor y eso se hace asustándote. Los cuatro peligros de la diverticulitis. Después de que se presenta el problema lo extremadamente tolerablemente se nos muestra una solución. Entonces tenerlo funciona exactamente como un Uber este caso. Nos hipnotizan. Estamos listos para tomar medidas, pero no estamos seguros de lo que sigue. Lo mismo aquí. Tenemos miedo de querer evitar la enfermedad. ¿ Qué sigue? Bueno, aquí está la solución y aquí está cómo comprarla. Funciona en cuatro sencillos pasos. Ahora, para aliviar tu mente, se presentan los ingredientes. Nadie lee esta sección, pero es tranquilizador observar que la ciencia se presentó. Aquí está el titular, todos los efectos naturales y secundarios libres. Eso es todo lo que importa. Y avanzando hacia abajo, las historias de éxito son una necesidad. Yo diría que al menos el 80 por ciento de las páginas de aterrizaje cuentan con generosa sección testimonial. Saltando al final. Llegamos a evitar el dolor haciendo una compra rápida. Aquí, casi siempre sucede que si compras más, obtendrás un trato mucho mejor. Algo así como pagas 20 a 30 por ciento más y obtienes 100% más producto. De nuevo, eso es típico. Ahora, seguiré mostrándote algunas otras páginas de aterrizaje de fondo. Pero aquí la razón por la que tienen tan mala reputación. No estoy hablando de estos en particular te recuerdan y hablando de las páginas de aterrizaje en general, tienden a promocionar productos artilugios. Ya sea pérdida de peso, algún tipo de dispositivo sexual, un proyecto de ley que eleva tu impulso sexual y el Bolding, creciendo o extendiendo una parte de tu cuerpo, nutriendo bienes vendidos, cristales en lo que sea. La mayoría de estos productos tienen un signo de interrogación junto a ellos. Para algunas personas, estos productos son estafas directamente. Ahora puedo comentar si estas audaces afirmaciones son ciertas o no. Pero no, esa es la razón número uno de por qué las páginas de aterrizaje tienen mala reputación. Por cada página de aterrizaje encantadora para una siesta, su empresa o negocio serio. Hay al menos otras diez páginas de aterrizaje para algún tratamiento de New Age, facturas, hierbas, cristales, y demás para el asesinato, aunque las páginas de aterrizaje promocionando una especie de reunión. Generalmente es para el esquema piramidal de convención de tierra plana. Aceites esenciales o comercialización multinivel. Por números puros, estos superaron con creces a las páginas de aterrizaje serias y bien diseñadas. Entonces esa es la primera razón y tiene sentido. El segundo motivo es más en nuestra liga, la mayoría de las páginas de aterrizaje parecían que fueron diseñadas en 2005. Se ven modestas en el mejor de los casos. Bueno, hay excepciones, yo diría que alrededor del 60 al 70 por ciento de las páginas de aterrizaje que promueven productos artilugios se ven terribles, absolutamente horribles, abarrotados, gritos, agresivos. Esas son las palabras clave. Quizás quieras enrollarte las mangas y hacer un mejor trabajo con tu próximo cliente. Pero te sorprenderás. Este es el look que quieren los clientes. Es por ello que incluí esta discusión en el segundo pilar del diseño web, entendiendo las necesidades del cliente. Ver estos productos tienen un público objetivo muy claro. De verdad no quiero insultar a nadie. A gracias. Tenga en cuenta que este es un cierto sector del público que no es que personas bien informadas, crédulos, ingenuas quizá pasen una cierta edad con un pensamiento crítico menos que ideal. Considerando esta audiencia, parecen resuenar con grandes afirmaciones audaces, con titulares enormes, montones de llamadas a la acción, muchos textos y todas las demás cosas que mencioné hace unos segundos. Entonces, por eso nuestros clientes quieren estos diseños, porque el público objetivo realmente resuena con ellos. Además, hay un arte a estas páginas de aterrizaje tanto que el producto no importa. Eso lo diré otra vez. Estas páginas de aterrizaje funcionan tan bien que el producto no importa. Todo son matemáticas. Seguro que has oído hablar de algo llamado el embudo de ventas. No entraré en detalles porque estaría fuera del alcance de este curso. Pero sepan que personas experimentadas en este campo pusieron una cierta suma de dinero en los anuncios de Facebook. Cierto tipo de usuario entra a esta página de aterrizaje, y obviamente de un grupo de personas, un cierto porcentaje compra el producto, sea lo que sea. El fondo está en negro, siempre y cuando lo hagas bien. Como puedes ver, pasos densos y claros, es un plano muy sólido que la página de aterrizaje tiene que seguir. Al final de la misma, la tasa de conversión compensa los costos publicitarios. Y típicamente, si bien hecho, el propietario del sitio web hace un paquete. Obviamente sigue siendo difícil de lo que aún requiere una habilidad. Pero este ajetreo realmente funciona, y es por eso que el producto de pérdida de peso se deja en blanco. Puede ser cualquier cosa, puede ser cualquier ingrediente. No importa la marca, la efectividad no importa. Todo se trata de lo bien que construyeron las páginas de aterrizaje y el diseño no es algo que tú y yo vamos a apreciar. Eso se debe a que no somos el público objetivo. La columna vertebral de la página de aterrizaje se construye sobre estos claros pasos desde el embudo. Y eso es todo lo que importa. Con derechos de autor decentes, puedes hacerte rico rápido. Y así ha sido desde hace muchísimos años. Incluso en el mundo digital actual donde todo el mundo tiene acceso a información ilimitada, las páginas de aterrizaje de este tipo todavía lo hacen bien. Nuevamente, para que quede perfectamente claro, no digo que todas las páginas de aterrizaje estén basadas en estafas. Lejos de ello. Simplemente abordando por qué tienen mala reputación. Para recapitular, la principal razón por la que las páginas de aterrizaje son poco sabrosas es que tienden a promover productos artificiosos. Y la segunda razón es que se ven bastante mal. Y como tal, realmente no podemos crecer como diseñadores para hacerlos. El lado bueno es que estos clientes que pagar bien, sobre todo clientes que tienen experiencia previa en este campo. Puedes esperar una sola página de aterrizaje para traer tu ronda $2500. Depende de ti si quieres especializarte en este campo o no. Es una habilidad y se gana muy duro. Pero ahora tienes toda la información para tomar una decisión. 65. Página de landing de productos digitales: Bienvenidos a esta conferencia donde quiero descomponer una página de aterrizaje de productos digitales. Esta es mi propia plataforma de e-learning que construí para mi curso de Photoshop rumano. Esta es una gran manera de entender las necesidades del cliente porque yo soy el cliente. Es tan fácil empezar con el pie equivocado. De ahí, por qué tenemos que hablar de las necesidades del cliente. El bit esencial aquí es que mientras a lo largo bastante conocido en diversas plataformas de e-learning alrededor del mundo, en Rumania, nadie sabe quién soy. Esto significa que el contenido del curso es menos importante. Presentándome apropiadamente. Por esa razón, un reproductor de vídeo está inordenado. Este transmisor no sólo hace gran cantidad de información de manera efectiva, sino que la gente llega a ver mi cara. Eso es esencial para establecer la confianza. Ahí está el razonamiento detrás del jugador. También son imprescindibles el titular y el subtitular. Si bien mis habilidades de redacción de textos no son increíbles, lo que verás aquí es una versión traducida de Google. Por lo que por favor ten en cuenta eso. El sitio web original está obviamente en rumano porque esto es para el público rumano. A continuación, tenemos otro bit crítico con respecto a las necesidades del cliente. Como creador de contenido, si Google mi nombre, seguramente encontrarás mi corte dice en varias otras plataformas, algunas de ellas están muy descontadas. Esto presenta un serio reto. ¿ Cómo puedo vender mis acordes por cualquier precio, digamos 299, si se encuentra en otra plataforma por 2999. La solución es este área de llamada a la acción. Contamos con botones individuales, uno para el curso estándar de inglés, y otro para el curso premium de rumano. Estoy muy orgulloso de esta solución. Anteriormente, gasté mucho dinero en publicidad, pero entrarán pequeñas señales a la habitación. Después de revisar todos los análisis, me enteré de que la gente buscaba mi nombre en Google. Encontraron mis perfiles en varias otras plataformas de diseño, y se quedan ahí. Básicamente en lugar de comprar las llamadas de mi plataforma donde consigo todo el dinero, gente lo compró de algún otro lugar, generalmente con un gran descuento. Ahora bien, estas cargas por sí solas no serían suficientes. Después de todo, la diferencia de precio es sustancial. Estoy pidiendo algo así como cinco veces más dinero para la versión rumana del curso. Te estoy pidiendo alrededor de 80 dólares para las canchas, por cierto, solo para que tengas un número de ballpark. Ahora, ¿cómo puedo justificar eso de manera efectiva? Porque aún así la diferencia de precio sigue siendo significativa. Bueno, agregué esta parte aquí que dice, ¿cuál es la diferencia? Al hacer clic en él, bajarás a esta tabla comparativa que diseñé desde cero. Aquí se llega a ver qué es lo que de una manera muy clara. Además por encima de él tienes unas líneas de texto. Aclarar aún más por qué es mucho mejor comprar esta versión del curso. Básicamente, en pocas palabras, tienes acceso directo a mí mientras estás en otras plataformas, ese no es el caso. Ésas son obviamente otras ventajas también, pero eso es además del punto de esta conferencia. Para recapitular, lo número uno es presentarme, no el curso. El segundo es asegurarse de que la gente entienda el valor de esta plataforma frente a todas las demás. Ahora, respecto a la primera parte en presentarme, insignias son una gran manera de transmitir mucha información de una manera estéticamente agradable. Estos son todos iconos de lab icon.com. Tengo una suscripción muerta y la uso todo el tiempo. De esta sección de un vistazo, puedes aprender que soy un experto e instructor certificado de Photoshop. Soy un maestro de best-seller con más de 180 mil estudiantes de todo el mundo. He ido más de $50 mil a cuatro tienda y así sucesivamente. Esta es una elección de diseño inteligente. Estas insignias me ayudaron tremendamente. El contenido de la izquierda, bueno, es bastante. Se divide en varios párrafos. Estos puntos de bala le dicen al usuario lo que va a aprender a este curso. Es una larga lista para implicar que hay mucho contenido. Después de todo lo que doy seguimiento con un claro llamado a la acción que dice, iniciar el curso, no por ahora, no hacer una compra. El mejor modo de diseñar llamadas a la acción es echar un vistazo a los jugadores más grandes del mercado. Nuevamente, entendiendo las necesidades del cliente. Usa su enfoque, utilizó el enfoque de los grandes jugadores. Nadie es dueño de estas cosas como empezar, así que no hay problema en añadirlas a tus propios diseños. Observe el curso secundario, la versión en inglés no se muestra aquí. Prefiero favorecer la versión rumana, la de esta plataforma. Básicamente, si haces clic en esta otra, te llevan a otra plataforma. No quiero que eso suceda, pero si mis visitantes inevitablemente terminarán en otro sitio, al menos debería ser yo quien los mande al enlace de referencia mundial. Ese es el proceso de pensamiento detrás de estos botones. A continuación, algo un poco más obvio. Tengo una sección de galería para quienes son personas visuales. Esto es muy necesario porque compensa todo ese texto desde arriba. Básicamente, se quiere atender a todos, a los que quieren ver un video, a los que prefieren leer. Y por último, los que prefieren saltarse por el contenido y detenerse en lo que llame la atención, gente visual, ¿verdad? El siguiente área se basa en cementar la necesidad de este curso. Destaco ciertas palabras clave ya que esa es una técnica común de la página de aterrizaje. Cosas como tu propio ritmo, bien pagado. Ellos pueden elegir tus proyectos de acceso ilimitado, cualquier versión de Photoshop, no se requiere talento ni creatividad, y así sucesivamente. Estos son algo en la misma región yo zoológico aves enfoque miel con horario flexible y ganar más dinero. Yo lo seré, no soy tan conciso como ellos, sobre todo porque no tengo ese reconocimiento de marca. Por eso, tengo que trabajar más duro. Después de la tabla de comparación, tengo un poco más de contenido que la agencia de anuncios escribió para mí. Honestamente, no estoy muy seguro al respecto, pero lo mantuve en otro llamado a la acción bastante estándar. Y luego una sección sobre algunos recursos premium que se regalan como aguinaldo para quienes se inscriben. Esto es un incentivo para comprar el curso. No es gran cosa, pero sí ayuda. Otra parte clave es ese diplomado, el certificado que obtienes al finalizar el curso. Algunas personas, esto es una necesidad. De ahí por qué está incluido. Cerca del final, tengo algún grupo social de algunos de mis alumnos. Los testimonios son enormes en la mayoría de las páginas de aterrizaje, y éste no es diferente. Por último, algunas otras estadísticas clave presentadas a los y contras, una sección de preguntas frecuentes, la sección de blog por si quieres leer más sobre mí. Y el llamado a la acción asintió. Esta es mi página de aterrizaje creada a través de un constructor de drag and drop llamado page bakery, que se incluyó en un equipo que compré de team forest, un tema de WordPress. Esto fue fuertemente editado por un codificador experimentado y yo estaba tan contento con su trabajo que incluí aquí su nombre y enlace. Tomó mucho tiempo. Este fue un gran esfuerzo de mi parte. Y hasta con ella misma que siguen siendo cosas diversas que están bastante a la altura de mi estándar. Por ejemplo, estas líneas verticales de un píxel. Pero el equipo de WordPress tenía ciertas limitaciones que eran difíciles de superar. fin, al final de la misma, la comida para llevar es que el contenido del curso ocupa el segundo lugar. El objetivo de las páginas para ganar la confianza de los usuarios. Yo sí hice este video en la parte superior o las insignias de la sección de subencabezados. A continuación, para evitar que mis usuarios compren mis cotizaciones desde otra plataforma, que se llama canibalización. Por cierto, opté por incluir dos convocatorias a la acción y la tabla comparativa. Alterné entre TextContent e imágenes. Destacé ciertas palabras clave mediante el uso del método de miel. Dé un incentivo para comprar el curso así como presentar alguna prueba social. Esta página de aterrizaje funcionó bastante bien y a través de un refinamiento constante, estoy seguro de que lo va a hacer mejor. Hablando de mejorarlo. Esa es otra parte importante de las páginas de aterrizaje. Hablemos de eso en un segundo. 66. Páginas de aterrizaje de a/B: Bienvenidos a una importante conferencia. Destin, tú eres el trabajo ácido un par de veces y lo volveré a decir. Un sitio web necesita evolucionar constantemente. En realidad nunca habías terminado con tu trabajo. Y estoy hablando tanto como dueño de un negocio como como como diseñador web. Para entender verdaderamente de lo que estoy hablando, vamos a utilizar un sitio web llamado buena UI.org. No tengo afiliación era manera con ellos por cierto, en realidad un estudiante mío publicó este enlace en mi servidor Discord, donde por cierto, eres más que bienvenido a unirte. Entonces hablemos de las pruebas. Es posible que haya oído hablar de las pruebas AB. Bueno, aquí está en una situación muy directa. Netflix quiere que más personas se inscriban en el juicio. Tiene sentido lograr eso. Intentaron varias cosas, pero en este caso específico, usaron una carga como llamada a la acción y ser un formulario basado en correo electrónico. El resto del diseño es idéntico, excepción de ese pequeño cambio. Se puede ver cerca del final del diseño para agregar al PV de las pruebas, específicamente de diciembre a febrero. Parece que la forma es una mejor opción. Ahora bien, esto puede no parecer un gran problema, pero este es un hallazgo enorme con implicaciones serias. Si Netflix vio esto obtiene mejores resultados. Hay una buena posibilidad de que también se aplique a nuestros sitios web. Si esto hace que más personas comiencen el juicio, esto significa que es bueno para el negocio. Significa que los dueños de la página web que vamos a ser más felices, incluso una mejora del 23 por ciento es significativa. Pero imagínense si el aumento está en 10 por ciento, todo eso a partir de un cambio muy simple, el costo de cambiarlo es mínimo. El equipo de desarrollo puede hacer fácilmente este cambio en muy poco tiempo. Esto es lo que les encanta a las empresas. Mejoras que son baratas y fáciles de implementar, que mejoren su resultado final, el dinero, eso es todo lo que importa. Esta es la razón número uno para hacer pruebas AB. Esto por sí solo puede traer a Netflix unos millones de dólares adicionales al año. Y de nuevo, puedes aprender de eso y mejorar el rendimiento de los sitios web de tus clientes también. Pero retrocedamos un poco. Usted como diseñador web, no debe ejecutar personalmente pruebas AB a menos que sea su propio negocio. Una prueba AB es algo serio, y la mayoría de las empresas tienen equipos internos dedicados que se enfocan en estas cosas las 24 horas del día. Eso se debe a que no es tan fácil como cambiar un par de calcetines. Hay reglas estrictas y aparejadores. Necesitas ciertas habilidades y conocimientos. Necesitas coordinar tus esfuerzos con el equipo de desarrollo que tiene que implementar los cambios. Es necesario hablar con los departamentos de marketing para que puedan adaptar sus anuncios. Se requiere una versión de control, un tamaño de muestra lo suficientemente grande, y una tonelada de otras cosas. Es un enorme género el ir, ¿dónde nos deja eso? Bueno, en realidad es bastante simple. Deberíamos seguir a los grandotes. A lo que hacen, debemos imitar. Ahora, eso suena como algo sombrío que hacer. En un mundo ideal, cada empresa tendría un equipo dedicado. Eso haría pruebas AB las 24 horas del día. De hecho es que eso es extremadamente caro, tanto en términos de personal sino también para el servicio en sí. Entregar múltiples versiones del mismo sitio web generalmente se realiza a través de un servicio de terceros. Estos son muy caros. Sí tienes Google Optimize, que es gratuito. Pero en general el punto se mantiene, no es factible. Entonces lo que haces es buscar patrones. Si ves múltiples ejemplos donde la forma aumenta el número de conversiones, entonces por todos los medios, implementa eso en tus propios diseños. Problemas es que este tipo de información se mantiene en secreto. El razonamiento es simple. Estos pueden cambiar drásticamente un negocio en línea. Es por eso que es poco probable que encuentres una gran cantidad de casos prácticos de forma gratuita. Incluso buenos cargos de UI, dinero serio para toda la base de conocimientos. El comida para llevar es que cuando veas algo que está probado una y otra vez, usa al ganador en todos tus diseños. Por ejemplo, la tabla de precios parece ser un ganador muy claro en la mayoría de las situaciones. Este es el tipo de cosas de las que seguramente haré una nota mental, y me mantendré alejado de esta otra. Entonces de nuevo, esto es algo muy sencillo que puede marcar una gran diferencia o echar un vistazo a estos botones basados en trazos. Parece que los rellenos típicamente funcionan mejor. Echa un vistazo a la comida para llevar. Sabemos que este cuento de botones como neto negativo basado en este patrón base de evidencia. Entonces al reservar corrió este experimento no es de extrañar que eventualmente fuera rechazado. Una replicación predecible. Con esta información, podrás diseñar mejor los sitios web para tus clientes. Estas cosas obviamente no están escritas en piedra. Pero si varias pruebas muestran un resultado claro, entonces las posibilidades son que eso fue mejor. Para ser claros. Este recurso no es común. Esto es como el oro llamativo. Aprender de los demás errores es enorme. Te puedo decir que después de la implementación de algunas de estas cosas en mi propia página web overs, he tenido esa clara mejora en ventas. El caso es que no pude hacer pruebas AB porque no tenía los recursos para ellos. Exactamente lo que dije al principio. Pero simplemente cambié el diseño y miraron el número de ventas y sí subieron. Esa es la cosa. Es fácil y barato implementar los diseños. Es difícil realmente obtener la información de pruebas AB es difícil y costoso ejecutar realmente las pruebas AB. Pero la implementación en sí, es fácil desde un botón basado en trazos a uno lleno. Eso se hace en unos segundos. Ahora, volviendo hacia arriba, bueno, esto no es exactamente 100% científico o preciso. Al mirar ciertos números día tras día, llegas a saber cuándo pasa algo. Es muy probable que tus clientes vayan a hacer lo mismo. No podrán servir múltiples versiones de ese sitio web al mismo tiempo. Pero es probable que cambien el diseño y revisen los datos todos los días. En base a las pruebas empíricas, puedes mejorar el rendimiento del sitio web sin sistemas complicados ni costosos equipos de desarrollo de software. En conclusión, nosotros, como diseñadores, a veces creamos un sitio web basado en lo que se ve bien, basado en la guía de estilo de la empresa o en las necesidades del cliente. Pero Analytics sigue siendo rey y las estadísticas deberían reinar supremas. Es por ello que un sitio web debe evolucionar constantemente y usted o el cliente nunca deben enamorarse de un cierto diseño, si es posible, probar el infierno fuera de él en base a pruebas encontradas en una buena interfaz de usuario u otros lugares. Buena suerte con ello. 67. Estudio de caso: análisis de página de aterrizaje: Oye, ahí. En este clip, hablaré de la página de préstamos mía y posteriormente mis metas como dueño de negocio. Esto te ayudará a obtener la mejor visión de la mente de un cliente o de un empresario. Verás cómo cada detalle de la página está ahí por una sola razón. Y ese es el impulso de las ventas. Esto es importante porque cada día veo que los diseñadores se enfocan bien, el lado del diseño, pero no se dieron cuenta de que no están cumpliendo con las necesidades del cliente. Solo están tirando cosas por ahí. También quiero señalar la diferencia entre un sitio web y la página de aterrizaje. Si bien en un sitio web regular tienes un montón de cosas que puedes hacer. La página de aterrizaje se construye con un solo propósito específico en mente. En este caso, que Selling sea advertido, este es un video bastante largo sobre el nicho de diseño web. Si no te interesa, sáltala. Vamos a llegar a él y ya verás qué es, qué pone al balón el punto del proyecto. Se trata de una página de aterrizaje para el curso de Photoshop. El objetivo principal es obtener ventas para este producto digital. Eso es bastante obvio. Lo que no es tan obvio es que esta es una tarea difícil porque hay innumerables videos de YouTube los cuales son totalmente gratuitos, B, que son más baratos, dice la cancha por ahí, ver el precio puede parecer alto a algunos personas. Entonces, ¿cómo te acercarías a un proyecto así? Creo que nuestras dos avenidas principales, cuando nos enfocamos en mi pericia como docente o estar enfocados en las necesidades del alumno. Hacia el punto número uno, pensarían que si muestro que soy instructor certificado por Adobe y experto en Photoshop con más de 24 mil críticas y 200 mil estudiantes, eso establecería credibilidad. Eso haría que la gente confíe en mí, y por lo tanto pueden ser más propensos a comprar el curso. Aunque no elegí ese camino. Y aquí está el porqué. Tasa de rebote es esa métrica, ese número que nos muestra cuántas personas salen inmediatamente de un sitio web al entrar en él. Un estándar de la industria, y la mayoría de la gente en el saber lo monitoreaba constantemente. Personas salen de inmediato de un sitio web por varias razones. Pero una de las más grandes es un desajuste entre las expectativas de los visitantes y el contenido que se muestra. Si estás buscando el curso de Photoshop y ves una gran imagen de algún tipo aleatorio Eso está presumiendo de su pericia tiene números que no hablan a tus necesidades. En cambio, hay una buena posibilidad de que en realidad te moleste. En el nicho de la página de aterrizaje, debes asegurarte de que te enfocas con láser en los visitantes, quiere perder peso para dormir mejor, ganar más dinero para conseguir una cita, y así sucesivamente. El conocimiento entra en juego en un punto posterior en el terreno de venta. Qué métodos ante todo, es captar la atención del visitante y mantenerlo interesado. Eso lo diré otra vez. Lo que más importa es captar la atención del visitante y mantenerlo interesado. Si logras involucrarlo, suben las posibilidades de una venta. Está bien, con eso dicho, mira este encabezado. Es diminuto por los estándares de cualquiera. Y eso se debe a que el foco de visitantes debe estar aquí y esta zona central, el menú de navegación, es tan mínima como llega a casa sobre mi contacto, que son obligatorios en lo que a mí respecta. Dicha página luego se registró y vuelve a iniciar sesión, muy necesitaba un gran divisor de un pixel. Y ese es el encabezado. Sin imágenes, sin bisel, sin sombra interior, nada tan limpio como se pone. De esta manera el visitante se dibuja aquí. Aquí es donde tu redacción tiene que estar sobre el punto. La redacción de textos es esencial en una página de aterrizaje. Dice, conviértete en diseñador. No es aprender Photoshop lo que puede funcionar, pero los objetivos de la gente son y formulados de esa manera. No quieres conseguir un colchón nuevo. Quieres dormir mejor para que podamos sentirnos mejor. Se quiere estar bien descansado. A continuación, el término masa de vidrio está ahí para decir Este es un programa premium. Por último, desde principiante muestra este es el único programa de entrenamiento que alguna vez necesitarás. Todo es abarcador. Cada palabra aquí tiene sentido. Este es un gran titular. No hay grasa para ello. No se puede cortar nada. No. ¿ Podrías agregarle mucho de manera productiva? Corto, potente, efectivo. Entonces esto por sí solo es una de las razones por las que nunca debes usar Lorem Ipsum en las páginas de aterrizaje. Este titular por sí solo toma mucho tiempo para elaborar. Pero pasemos al subtitular. Dice aprendido Photoshop, diseño web, diseño aplicaciones móviles, diseño gráfico y mucho más. Esto indica que hay una tonelada de contenido, pero también son palabras de moda, palabras clave. Si buscas, digamos, diseño web, esta línea aquí te asegura que estás en el lugar correcto. Esto minimiza la tasa de rebote. Continúa. Adi fue impartido por un instructor de Photoshop certificado por Adobe. Se trata de una USP, un punto de venta único. El tiempo del curso y las credenciales de los instructores son ambos argumentos sólidos a favor del curso. Entonces de nuevo, todo lo que ves aquí que está dirigido a minimizar la tasa de rebote que en las personas clave interesadas. Última línea, acceso ilimitado para aprender a tu propio ritmo. Eso es poderoso una vez más, acceso ilimitado. Para que no tengas que apresurarte a ir a la web. También te dice que el curso no es una cosa de streaming de una sola vez. Entonces te tranquiliza diciendo que puedes aprender a tu propio ritmo. Eso se debe a que hay un grupo significativo de personas en cualquier campo que se intimida al aprender algo nuevo. No importa si es aprender a bailar, tocar la guitarra, o aprender un nuevo programa, no tienen confianza en su capacidad para recoger información rápidamente. Como tal, esta frase, aprende a tu propio ritmo, es muy poderosa. Todo eso, y sólo hemos pasado por qué, 5% de este diseño. De acuerdo, Pasando, las características del curso es algo que venía con la plataforma que estoy usando. Entonces no fue mi primera opción. Tuve que usarlo aquí por razones técnicas. Podría ser útil para aquellas personas que están interesadas en números mayores a 100 conferencias A las dos horas, todos los niveles de dificultad incluidos y así sucesivamente. Pero no es la mejor zona en este diseño. A continuación viene el video. El adelanto es de calidad un poco baja debido a diversos plugins que me ayudaron a aumentar la velocidad de las páginas, lo cual es un factor crítico en la venta de cosas en línea. El fascinado carga mejor. Pero la miniatura es llamativa. Cuenta con colores atrevidos y tiene este mensaje aquí. Aprende de un instructor certificado. Pasando hacia abajo, tenemos una serie de titulares aprendidos a crear 51 curso, ganar dinero, ganar confianza, contenido único. Todos estos son los titulares bien elaborados que se pretenden hablar con diversos individuos. Aprende a crear para tu trabajo, para tu negocio, para ti, pone en la tarjeta de desarrollo personal. Es algo para aquellas personas que quieren elevar sus vidas que quieren el cambio, que quieren crecer tal vez. Pero no empujo demasiado esta tarjeta porque no quiero prometer la luna ni el curso de Photoshop que cambia la vida. Vender a agresivamente siempre es contraproducente. En cambio, lo que hago es usar esta sección para separarme, videos de YouTube, cursos más baratos, incluso los míos en realidad. Y el precio aparentemente alto, dificultad progresiva se muestra primero porque de nuevo, las personas carecen de confianza y fe en sí mismas. Temen que puedan luchar. Entonces esto es lo primero que tengo que abordar. Otra parte de eso es el hecho de que cuando ves un video de YouTube, está fuera de contexto, o por supuesto tiene mucho más sentido. Llegas de la a la Z en un video de YouTube, no sabes lo que sigue. Instant held via live chat es una de las razones de por qué el curso tiene un precio como tal. Y esto es otra vez, otra razón por la que es mucho mejor que las más baratas, porque obtienes acceso a un profesional calificado. Contesta de inmediato. acceso ilimitado y la cantidad de horas te dice que esto es lo único que necesitarás. Aprender haciendo te dice que no tienes que memorizar cosas. La gente odia a las escuelas por una razón. Aprender a las actividades parece más divertido y agradable. Y aquí tenemos dos más, pero sigamos. El siguiente apartado es nuevamente, un gran argumento a favor de comprar este curso. En primer lugar, es un curso integral de 0 a héroe, cinco cursos en uno. Entonces obtienes este video aquí que te muestra todo lo que vas a crear. Este es un mejor uso del espacio en lugar de mostrar 100 miniaturas que son demasiado pequeñas, también ayudará a que el sitio web se cargue más rápido. A continuación tienes una lista de chequeo y todo el mundo está obligado a encontrar algo que le interesa. Por último, algunas estadísticas clave para esos pensadores analíticos lógicos que no toman decisiones con sus sentimientos. Hablando de eso, aquí está la forma en que termina la página. Por menos de $5 por hora para el mejor entrenamiento de Photoshop con instantáneo celebrado vía chat en vivo de un instructor certificado por Adobe. Esto traduce ese precio aparentemente alto en algo que es más relable, apenas 5 dólares por hora. Eso es un acero. Mover de nuevo hacia arriba. Esta área aquí se utiliza para pedir al usuario la acción. Se quiere hacer todo el proceso lo más fácil posible. No lo obligues a desplazarse copia de seguridad, roció el botón de llamada a la acción en lugares clave. El siguiente es que la prueba social es un gran problema. La gente necesita ver que este curso funciona. Por eso incluí este texto región pesada. Obviamente se desalentará a la gente. Léelo, pero ese no es el punto. El titular, el subtitular y todas las estrellas son lo que importa. Vivimos en un mundo donde la gente lee el titular de una noticia en Facebook o lo que sea y lo difundió, pesar de que en realidad no han leído el artículo, no tenemos tiempo suficiente. Entonces el simple hecho de que veamos un muro de prueba es suficiente para nosotros. Entonces otra vez, aunque esto pueda parecer como un error, que es demasiado pesado de texto, en realidad tiene sentido. Continuando, tenemos otra área de USBs, puntos de venta únicos. Estos puntos te ayudan a justificarte comprar el curso versus ver videos aleatorios de YouTube de varias personas estaban comprando un curso barato cuando no recibes ninguna ayuda real. A continuación, estas insignias son para aquellas personas a las que les encantaba escanear rápidamente una página. Todos estos son muy necesarios y creo que si tuviera total libertad, probablemente los colocaría en la parte superior de la página en lugar de todas estas muertes. Por ejemplo, el acceso instantáneo es para aquellas personas que odian esperar. Este es un incentivo importante para comprarlo y comenzó. Como se puede ver, la página de aterrizaje tiene que hablar montón de personas con comportamientos completamente diferentes. Algunas personas quieren tomar lo más bajo, algunas personas querían ahora, algunas tienen miedo de que no sean lo suficientemente creativos, o tal vez no puedan trabajar, y así sucesivamente. Tienes la tranquilizada a toda esta gente. Por último, una sección de preguntas frecuentes es muy necesaria, pero de cinco a seis preguntas deben ser el máximo. Más que eso y empieza a sentirse abrumador. Ahora retrocedamos. Observe la simplicidad de la página. Tenemos una fuente de aspecto fantástico en un par de pesos sobre un fondo blanco puro. Tenemos una muy fácil en el ojo azul para un par de secciones. Pero en todas partes que mires, todo el asunto está impecable. El color se utiliza para llamar la atención, ya sea para conseguir que un visitante haga clic en el video de YouTube o para comprar el curso. Eso es todo. Y con esa sencillez, estos iconos realmente cobran vida. Pasé mucho tiempo encontrando unos que coincidan, pero realmente brillan con todo este espacio en blanco a su alrededor. Todo el diseño se basa en la simetría, en una sensación de vacío y gran tipografía. No puedo decir que esté perfectamente enamorado de él, pero creo que cumple con mis objetivos como dueño de negocio. A modo de nota al margen, en la sección Acerca de mí, el enfoque se desplaza en mi pericia, pero también en mi historia de vida. Si quieres conocerme, este es el lugar para ello. Es una lectura bastante larga, pero no había tenido tiempo de crear un video de YouTube para colocarlo en la parte superior de la página. Tomando un último vistazo al diseño, mi pregunta para ti es, ¿cómo crearías una página así si un cliente viniera a ti con este breve para vender cursos de Photoshop para triples dígitos, cómo diseñarías este aterrizaje página? Como dije, podrías haberte centrado en la experiencia del instructor en la cima o en los proyectos incluidos en el curso. Podrías haber mostrado el plan de estudios, pero todas esas opciones se obtienen su sub-óptimo. Por ejemplo, mire la tabla de contenidos. Es ginormoso. Esto habría comido mucho espacio de presión. Y si solo incluyes la pequeña parte de ella, gente podría pensar No hay mucho contenido en el curso. Pero sí tengo que mencionar que no estoy contento por una cosa. Es el hecho de que no es extremadamente obvio que obtienes chat en vivo para la ayuda inmediata. Ese es uno de los puntos de venta más grandes y no estoy seguro de que este diseño lo demuestre suficiente. simple hecho de poder hablar con un experto en tiempo real es inmensamente valioso. Entonces, de nuevo, la pregunta es, ¿cómo crearías una página de aterrizaje para este tipo de proyectos? Muéstrame tu diseño en la sección de comentarios o en este acorde. Diviértete con él. 68. Pensamiento final sobre las necesidades del cliente: Oye, ahí. Al final del segundo pilar del diseño web, quiero hacer una visión general rápida. El número uno a recordar es que estás creando un sitio web basado en las necesidades de tu cliente no es para ti. No se trata de lo que te gusta, lo que crees que mejor usar a ese cliente. En ocasiones necesitas una página de aterrizaje en lugar de un sitio web regular. En ocasiones podría verse obligado a crear uno feo para un producto artificioso. En ocasiones estarás fuera de tu zona de confort. Depende de ti establecer tus estándares y decidir qué quieres hacer. Eres libre de rechazar proyectos no cruzarán cierta línea. Por ejemplo, toma este diseñador de logotipos. Se especializa en cierto look. Él lo hace muy bien. A veces va un poco fuera de esta vibra vintage, pero la mayoría de estos siguen el mismo estilo. Tú también puedes hacer eso. Si sólo te interesa diseñar hermosas páginas de aterrizaje, como éstas desde aterrizar hacia adelante, tú Seguro, Adelante. Eso es lo que me encanta del diseño web. Puedes especializarte en las páginas de aterrizaje de tecnología y eso es todo. Nada más. O puedes intentar ser versátil desde dentista hasta blogs, pasando por bufetes de abogados, pasando por el comercio electrónico, las páginas de aterrizaje y así sucesivamente. O bien escucha lo que quiere el cliente, que es lo que recomiendo al menos al principio por los primeros 340 años. O concéntrate en un solo estilo y sé por adelantado al respecto. No hay nada malo. Y siendo el tipo de destino para las páginas de aterrizaje de deck o cualquier nicho que elijas, puede que sea más difícil empezar. Vamos a especializarnos tiene sus ventajosas. Volviendo a las necesidades del cliente. Cuando reviso un diseño de uno de mis alumnos, inicialmente, siempre me enfoco en el primer pilar del diseño web. Miro la ejecución e inspecciono el diseño por los errores. Si no hay problemas con el tamaño del elemento espaciado, el contraste, el diseño de altura de línea, etc. El sitio web es muy probable un seis de cada diez como mínimo. Entonces paso a otras cosas más finas como elección de fuente, esquema de color, espacio negativo, gráficos personalizados, etc. Y si esos se hacen bien, el proyecto puede obtener una puntuación de ocho o 8.5. Lo que los principiantes no se dan cuenta es que sólo el cliente puede darte un nueve o un 10 porque es la punta de la pirámide. Otra cosa que tal vez no sepas es que cualquiera de estos diseños puede obtener una calificación muy baja. Cualquiera de estos magníficos diseños, ya sea una página de aterrizaje o un sitio web estándar, puede ser rechazado por un cliente. No importa si se trata de un proyecto de freelance o el proyecto directo uno a uno. hecho de que sea guapo y bien ejecutado, no significa que el cliente vaya a ser feliz. Voy a decir eso otra vez sólo porque sea guapo y bien ejecutado no significa que el cliente vaya a ser feliz dado este ejemplo en el pasado y lo volveré a usar. Si estás diseñando un sitio web para el gimnasio, tienes que saber qué quiere el cliente. ¿ Es un culturismo, hardcore Gm, un gimnasio CrossFit, y los constantes. Jim, digamos boxeo o MMA, un gimnasio amigable para mujeres con clases de yoga y luego vibrante vibra. Puedes diseñar tu duda de corazón, pero solo una de estas opciones es la adecuada para tu cliente. Es el único que te puede guiar. De esta manera, si me muestras un diseño precioso, probablemente diré que es hermoso, pero eso no significa que al cliente le vaya a encantar. Tienes que asegurarte de que entiendes su visión. Tienes que darle lo que quiere. Imagina que eres el chef de un restaurante y te encanta el ajo, las papas fritas. Bueno, esa puede ser tu comida favorita. Puedes servirlo hasta todos tus clientes. Tienes que tomar esos pedidos y aunque no estés de acuerdo con ello, tienes que entregar. Así que asegúrate de separar lo que se ve genial frente a lo que el cliente quiere. No me malinterpreten. No digo que no debas pedirme a mí ni a nadie más comentarios. Digo que nuestras opiniones no importan después del cierto punto. Si estás diseñado como alrededor de un siete u ocho, la única persona a la que debes estar escuchando es el cliente. Es el único que importa después de eso, Mark. Estoy a favor de la creatividad y hacer sitios web hermosos, pero todo es para nada. Si no puedes entregar lo que el cliente quiere. Y con eso, hemos concluido el segundo pilar del diseño web. Espero que ahora sepas lo que tienes que hacer. Y eso es para mantener tus oídos bien abiertos en este campo. No importa lo impresionantes que sean tus diseños si no están en sintonía con los deseos de la empresa, escucha a tu cliente y presta mucha atención. Esa es la clave. Gracias. 69. La tercera clave para convertirse en un gran diseñador web: Bienvenido al tercer pilar del diseño web. Atención al detalle. Pasaremos por varios casos prácticos y los desglosaré para que puedas entender mejor de qué se trata esta sección. El problema es que la atención al detalle está matizada. Es sutil al ojo no entrenado, es invisible. A modo de ejemplo sencillo, piensa en el color de tus capas de textos. Podrías usar negro puro, 000, 000, 000, ¿verdad? A lo que podrías ir por algo como hacer también, que es un poco más suave y más fácil a la vista. Aún más que eso, podrías ir por un código de color que tenga un poco más conocido para mojar, digamos tal vez con un poco de marrón en él. Para mí, esta es una decisión de diseño importante. La mayoría de la gente, esto parece irrelevante. Se ve igual, vale la pena que digan algunos. Pero grandes diseños de grandes, por todas estas pequeñas cosas que suman. Y esa es la clave aquí. No es una sola cosa. Diga cambiar el color de sus fuentes, eso va a mejorar radicalmente su diseño. No, Es Entonces 2050 pequeñas cosas que se amontonan y juntas se vuelven increíblemente poderosas al hablar del aumento de dos dígitos en las ventas. Individualmente, parecen triviales sin el resto de ellos. Todas las cosas de las que voy a hablar parecen una pérdida de tiempo. Es como los ingredientes de un pastel. ¿ Quién carajos se excita por la flor? O azúcar puro, es cuando se mezclan aplicación que una receta bien ordenada en ciertas proporciones. Ahí es cuando obtienes algo impresionante. Volver al diseño web. Cuando te banco en la atención al detalle, todo el sitio web se va a pelar refinado y abotonado, va a fluir muy bien de principio a fin. Y ese es el objetivo de esta sección. Pero retrocedamos un poco porque no podemos hablar de atención al detalle sin UX. Encontrarás que la gran parte de esta sección va a ser sobre UX, pero todo es práctico. Escucha, voy a explicar todo el UI piensa en UX en la próxima conferencia. Pero quiero compartir mis propias reflexiones sobre este tema. Al igual que tú, quería aprender más sobre UX porque era ampliamente conocido que es una de las claves para una exitosa carrera en diseño web. Empecé a ver cursos y me impactó el nivel de complejidad. Escucha, UX no es algo que aprendas en un día. Es una bestia propia que merece respeto. Devorar libros, cursos y seminarios que se metan realmente en estas cosas. Puedes encontrar cosas como pruebas de usabilidad. Se arriesgarán evaluaciones, diseños de baja y alta fidelidad, grupos focales, arquitectura de información de persona entonces mucho, mucho más. Estos harán girar la cabeza. Ser diseñador de UX a veces es algo diferente de ser diseñador web. Ahora bien, ¿se necesita todo esto? ¿ De alguna manera? Sí, definitivamente. Realmente no se puede comprimir años de aprendizaje en unas cuantas conferencias. Al final del día, este es un campo separado, pero te puedo proporcionar un curso acelerado con la información que necesitas para levantarte y correr de una manera me gusta pensar que esa es mi especialidad encontrar todo tipo de trucos, consejos, y técnicas que producen buenos resultados sólidos sin tener que pasar años dominando ese campo. De acuerdo, no te va a conseguir un 10 perfecto de 10. Pero aún puedes mejorar seriamente que estás diseñando. Entonces ese es mi objetivo en esta sección, un curso acelerado hacia UX y atención al detalle. Pongamos a trabajar empezando por lo básico. 70. ¿Qué es UX?: Hablemos de lo básico y cómo los veo. Ui es sinónimo de la interfaz de usuario. Ui es una carga diseñada y Photoshop. Ux es sinónimo de experiencia de usuario. Es así como funciona el botón y como se supone que el usuario lo usa para lograr un objetivo. Ahora, una buena UX simplemente significa una buena experiencia de usuario. En la vida real, el ejemplo más común es la botella de ketchup. A la versión de cristal de Heinz le encantó lo fantástico. Fue genial, UI, visualmente impresionante. Saquando el ketchup de ella. Ahora Paine, básicamente o no tienes ketchup o todo el ketchup. Esa es una experiencia horrible. Más que eso, la gran UI no pudo compensar la mala UX. Dicho de lo contrario, no importa lo impresionante el diseño de la botella fue una función bacteriana I0, sacar ketchup de ella no se cumplió. Volviendo al diseño web, esto significa que puedes diseñar un proyecto kick-ass en Photoshop solo para ver a los usuarios lucharon con él. Piensa en un botón que no tenga un flotador o un estado prensado, haces clic en él y no pasa nada. Se hace clic varias veces fuera de ilustración. Y después de 1015 segundos, finalmente llevado a otra página. Eso es horrible. Ux esa es una mala experiencia. No importa lo agradable que sea la carga o el sitio web de Intel para ese asunto, porque el usuario simplemente se enoja. Escucha, en la vida real, podemos pensar en tacones altos. ¿ Dioses deportivos, estos lideran Fantástico? Hizo la definición de gran UI, preciosa, impresionante a la vista. Todos aprecian su suerte. Pero el andar por ahí y los tacones altos todo el día, lo que entiendo, es un dolor mayor. Es una gran molestia. Esa suspensión SportScar increíblemente dura que golpea los dientes cada vez que golpeas un pequeño bache en la carretera. No hay almacenamiento del que hablar, gas, guzzler, alto mantenimiento, y así sucesivamente. Y ambos casos, podemos comprometer. Aceptamos todas las cosas malas asociadas con ellas por diversas razones en las que no me meteré. Pero como diseñadores web, no tenemos que hacer que nuestros usuarios aguanten ninguna penuria mientras navegan por ahí. Hay que recordar que los usuarios son supermodelos y el lapso de atención y los pacientes son extremadamente limitados. No creas que aceptarán una mala experiencia de usuario sólo porque quieren el producto o servicio de tu sitio web. Saber, hay otros 100 sitios web que se ofrecen lo mismo. Ahora para mantenerlo sencillo, piénsalo así. No hay compromisos en el diseño web. O piensas en la experiencia del usuario y la mejora constantemente, o descuidas eso. Y creas diseños que solo están destinados para la publicación en línea en Dribbble o Behance para gustos. Es bastante común ver diseños magníficos en estas plataformas que nunca salen de Photoshop, Adobe XD, ni de ningún otro programa. ¿ Por qué es eso? Porque no son realistas. Son completamente ficticios, como la vida de muchos influencers y celebridades. Cuando veas un diseño de mandíbula cayendo, apuesto a que hay un 90 por ciento de probabilidad de que no los consiga implementados en un sitio web de trabajo real. Eso tiene porque es 100% UI, 0% UX. Y en la posibilidad de que lo haga, simplemente no se verá igual. En cierto modo. Es como esos conceptos futuristas que ves en los espectáculos de autos. Cuando Mercedes quiere hacer las noticias, crean el concepto más por encima del top que pueden pensar con sillas giratorias y LEDs dentro de las ruedas y demás. Pero cuando el auto real golpea la carretera, parece una clase C ligeramente mejorada. Volviendo al diseño web, estos magníficos diseños se vuelven tontos porque no todas las demás empresas tienen el presupuesto de 50 a 100 K para pasar por todo el proceso desde un mareado? Sí, de 50 a 100 mil dólares por una página web. Las cosas se vuelven increíblemente caras cuando contratas a un equipo de diseño, equipos de UX, palabras de código, redactores y gestores de proyectos. Esta es otra razón por la que prefiero llevarte a un curso acelerado respecto a UX, la mayoría de tus clientes probablemente te pagarían unos 100 o unos pocos miles de dólares. Todavía necesitas habilidades de UX decentes. Y eso es lo que planeo enseñarte. Abajo a conceptos de riqueza para proyectos reales. Para recapitular, UI es sobre cómo se ve el sitio web, su estética. Ux es sobre cómo funciona el sitio web, cómo lo usan los visitantes para lograr un objetivo. No te enseñaré todo, pero te mostraré formas muy sólidas de mejorar los diseños de tu página web. Continuemos nuestra discusión en la próxima conferencia. 71. El mejor ejemplo de uX y la atención al detalle: Oye, ahí. En la siguiente conferencia, quiero mostrarles varios ejemplos de mi propia página web o peor fila de puntos. El motivo por el que me estoy enfocando es porque tengo acceso a su analítica. El comida para llevar es que después de implementar una lista de alrededor de 25 ediciones, logré duplicar mis ventas mensuales. Sí, ya oíste eso, ¿verdad? Se duplicó de 5000 a 10000 dólares mensuales. Bueno, hay algunos, no es tan impresionante para la bastante nueva startup que solo está captando velocidad. Estoy muy contenta con nuestra trayectoria. Además quería que supieras que no es de 100 a 200 dólares o algo ridículo así. Vale, Aquí está la versión antigua del sitio web en Chrome que está instalada en mi propia computadora. De ahí por qué la URL dice localhost. Y aquí está el actual, el vivo en Firefox. Empecemos con el cambio más grande. El mejor ejemplo de buena UX que se me ocurre, digamos que quieres comprar dos panqueques, dos sabores de avena cuando limonada y cuando Q0 están poniendo un pedido típico. Parece bastante simple, ¿verdad? Aquí están los panqueques y yo, Chris, estéril, somos lo suficientemente inteligentes como para agregar este ícono a través del cual puedes agregar el producto directamente a tu tarjeta. que no tengas que ingresar cada producto y dar click en Añadir al carrito, luego volver atrás y repetir el proceso para el otro producto. Inteligente, ¿verdad? Por lo que tengo dos panqueques en mi carrito. Por cierto, la velocidad es increíblemente rápida porque como dije, esta es una copia local de la página web. Ahora agreguemos la comida del nodo. Observe lo que acaba de pasar. Nos acaban de traer de vuelta a la pestaña de los panqueques. Tenemos que hacer clic en avena una vez más para seguir comprando. Ahí va otra vez. A lo mejor es un bug relacionado con esta categoría. Vamos a embolsar eliminar, boom, panqueques. Y finalmente una alfombra. Oh, ¿quieres los conciertos de la banda? Esta es una horrible experiencia de compra. Esto es malo. Punto en blanco Ux. Déjame mostrarte la versión actualizada que es el mejor ejemplo de buena UX. Bueno al menos la mejor mejora, boom, boom, boom, boom, boom. Y boom. En la versión actualizada esa pestaña ya no salta. En realidad, la página no se refresca en absoluto. Si volvemos a la versión antigua, échale un vistazo. Apuñalar lo que el icono de Refrescar en la parte superior del navegador. Observe la versión de trabajo Refresh. Esto fue en realidad bastante lento, lo cual fue aún más perturbador. Pero en la versión actualizada, este ya no es el caso. Además, recibimos un mensaje que aparece en la parte inferior de la página que dice que el producto ha sido agregado al carrito. El ícono también cuenta con un plus en su interior, por lo que transmite lo que hace este botón. Pero todos estos finos detalles se pueden hablar de que el punto latente, claramente esto es una mejor experiencia de usuario, manos abajo. Pero de lo que realmente quería hablar en esta conferencia fue de cómo terminé con esta horrible versión. Me un Photoshop y estructural especializado en diseño web. Bueno, tomémoslo paso a paso. En primer lugar, no codificé un sitio web. Yo uso la gran empresa de codificación de Rumania, muy respetada con un gran equipo de códigos. Por supuesto, creé un bonito diseño en Photoshop, pixel perfect, y también hice un prototipo interactivo en Adobe XD. Yo era un cliente de ensueño para ellos. El problema es que no mencioné que la página no debe refrescarse después de que el artículo haya sido agregado al carrito. No podía decir eso el Photoshop, no mis prototipos interactivos. Para decirte la verdad, ni siquiera lo pensé. ¿Por qué lo haría yo? Estaba enfocado en el lado del diseño, la interfaz de usuario, pero también en cosas como el proceso de pago, simplificando el proceso de registro, facilitando al usuario agregar su dirección, el botón Agregar al carrito en la página de inicio. Esas son todas tareas relacionadas con la UX. Entonces no es que no me importara ni que fuera ignorante. No. En cambio, lo que pasó fueron los codificadores que no nos manejan correctamente, ni les importó lo suficiente el resultado. No tuvieron la atención al detalle para ello. Su tarea era implementar mi diseño, hacerlo funcionar. ¿ Puedes añadir el producto a tu carrito? Sí. Caso cerrado. En cierto modo es como darle a una computadora esa tarea para acabar con todas las enfermedades en la Tierra. El AI mata a toda la humanidad. ¿ Completó la tarea con éxito? Sí, Simplemente lo hizo de una manera inesperada con lección de graves repercusiones, es fácil culpar a los programadores. Eso en realidad chicos buenos, y no quiero ofender a nadie. Pero en esta situación, está en ellos. El problema es que es discutible. Al final de la conferencia, me encantaría conocer su insumo dos, pero sigamos adelante. El siguiente es que hábilmente les pedí que crearan una opción en mi panel de administración a través de la cual podría elegir qué pestaña estaría activa por defecto. El razonamiento es sólido. lo mejor quiero promocionar mis panqueques esta semana, pero en la próxima semana, esa puede ser la clave, están poniendo el que está después de eso, mi limonada y demás. Básicamente, quería controlar lo que el usuario ve a mi panel de administración. Bueno, la pestaña predeterminada está configurada en panqueques. Después de que el usuario pase a una nueva pestaña y tenga el botón Agregar al carrito, la pestaña predeterminada salta a la acción. Obviamente, cuando les pido ese controlador, no asumí que esto pasaría. Es alucinante. ¿ Es culpa mía? Nuevamente, es altamente discutible. La mayoría de ustedes dirían que no. Y ya sabes, al final del día hice lo mejor que pude. Creé el diseño en Photoshop, pixel perfecto. Hice un prototipo interactivo que noventa y nueve puntos nueve por ciento de los clientes no hacen. Yo los ayudo con el proceso de entrega. Ayudé a poner las pruebas. Simplemente no esperaba este resultado porque no es razonable asumir que yo, como cliente o como diseñador, sé cuál es la mejor práctica en cuanto a pestañas en la página principal y cómo debería funcionar este proceso de agregar un artículo al carrito. Esa es una técnica de codificación y deben saberlo. Sólo cuando un freelancer entró en la imagen, me enteré de que la gran empresa debería haber usado JavaScript para allí para carrito característica el indio. Haré lo que pueda para pronunciar su nombre hundido. Se, hizo un gran trabajo. Siguió mis instrucciones y con su ayuda, logré duplicar mis ventas. Por supuesto que no hay refresco Agregar al carrito. Deng era sólo una parte de la ecuación, pero fue una de las mayores mejoras. Ahora se puede preguntar, ¿por qué no lo arregló la empresa de codificación? Bueno, cobran algo así como $50 por hora con el freelancer. El cobra menos de la mitad de esa cantidad. Estoy tirando números aleatorios, por cierto, estos no son precios reales por hora. Pero el hecho de que no fuera un error claro, un error de su parte en cuanto a funcionalidad. Es un poco complicado, como la compañía de codificación para hacer más trabajo, asignar el código a mi proyecto cuatro horas más, sin embargo no me factura de alguna manera. En este caso, es como no ser recibido en el restaurante. En cambio, se te pide a quemarropa. Reserva es común cortesía de saludar a alguien cuando llega a la puerta. Pero si no lo hacen, ¿es esa razón suficientemente fuerte para quejarse? Nuevamente, la empresa de codificación técnicamente hizo su trabajo. Implementaron el sitio. No era lo que esperaba. Pero, ¿es su culpa que tenga ciertos estándares? ¿ Dónde termina? ¿ A qué, 00:00 AM estoy pidiendo demasiado? Y en qué momento no les importa el resultado? Al final del día, este es el mejor ejemplo de atención al detalle y pobre UX que se me ocurre. Espero su opinión idealmente sobre el chat de discordia. Gracias. 72. Mejorar el proceso de pago para doble ventas: Bienvenido de nuevo a nuestro proyecto. Así es como mejoro el proceso de checkout y duplicé mis ventas mensuales. En la versión antigua, al hacer clic en el icono del carrito, se te envía aquí. Ten en cuenta que no estamos ingresados. El lado superior izquierdo, te mostró el contenido de tu tarjeta. Por el lado derecho, tenías un área de información bastante sustancial sobre la empresa, cosas como lo que creemos en nuestros ingredientes y así sucesivamente. Y por último, de abajo a la izquierda, dos cosas, la información de entrega y un botón que decía, por favor inicie sesión o regístrese. Bueno, esto no fue horrible. Tampoco fue tan genial. Echemos un vistazo rápido a la versión actualizada. Aquí está la nota rápida sobre el método de entrega y la llamada a la acción está clara ya que el día, no tienes que desplazarte ni mover tu mirada está ahí mismo. Es lo más importante en la página. En cuanto al contenido del carrito, éste se ha movido en la columna de la derecha. Ya verás por qué ese es el caso en un minuto. El botón que normalmente dice Place Order se muestra en todo momento, pero en este momento es gris y no se puede hacer clic porque no estamos conectados. El texto dice algo en la línea de, por favor llene toda su información. Las diferencias entre estos dos son mínimas pero bastante importantes. La columna info fue una fuente de distracción. Cuando el usuario quiera hacer un pedido, hay que hacer esto lo más corto posible, hacer que la caja sea una brisa corta y dulce. En cuanto al diseño en sí, registrarse o iniciar sesión es la acción más importante en la página. Elevar este botón es lo correcto. Entonces eso es que cuando inicias sesión, ahí es donde se han producido los mayores cambios. En la versión antigua, tenías lo siguiente. Todos tus productos alineados aquí. Básicamente, un pedido contiene al menos 34 productos. Dicho de lo contrario, esta zona suele ser bastante extensa. Esto empuja hacia abajo todo el contenido aquí. El botón Place Order, la carga roja de lanzamiento nuclear que hace que todo suceda no se ve en ninguna parte. Eso es todo el camino aquí abajo. Ten en cuenta que estoy grabando en 2560 por 1440, lo que significa que llego a ver más del sitio web comparación con un complemento de usuario estándar 1920 por 1080. Full HD es la norma en absoluto. Pero ni yo lo veo porque este botón no es obvio. Esto crea mucha confusión. Para agregar combustible a la llama. La mayoría de los usuarios no sabían lo que tenían que hacer. A lo mejor te parece obvio. Si tomas un enfoque de arriba a abajo, puedes ver que hay un inferior aquí. Esto dice información de contacto. Por favor, añada sus datos. Debajo de eso. Dice dirección de entrega. Por favor, añada sus datos. Siguiente día de entrega, por favor elige que has entregado el día y así sucesivamente. Ahora, de nuevo, esto no parece tan malo. Pero si sigues el curso hasta ahora, podrías haber recordado que tenía algo así como 300 anuncios para carrito con un solo checkout exitoso. Claramente, eso fue un problema. Así es como mejoro el checkout. En primer lugar, creé tres áreas distintas. Estos tienen sus propios rectángulos blancos, así como un número que determina ese orden. Si eso no fuera lo suficientemente claro, o bien restringió el acceso a secciones a entrada. Es por eso que todo está lavado. No puedes hacer click en nada porque no tenemos tu información. ¿ El usuario tiene que enfocarse en esta área. Aquí, hay dos grandes botones anaranjados que sobresalen. Dicen agregar info. En el lado izquierdo, el lateral te muestra algunas cosas marcadas en rojo, tu nombre, número de teléfono y dirección. Esto es para mostrarte que faltan esas cosas. Haga clic en el primer botón, aparece la ventana emergente, ingresa tu nombre y número de teléfono. Y eso se trata de eso. Ahora puedes continuar tu viaje. Tomé la decisión de cambiar el color de los botones a azul. Ese texto también es diferente. Ahora dice modificar eso para decirle al usuario que todo está bien. Dirección del día siguiente. Porque de nuevo, no había nada más en lo que pueda dar click. Este paso a paso se acerca, casi infalible. Ahora, como nota al margen, en base a la región, ciudad y dirección seleccionada , mi sistema calcula automáticamente los costos de envío. Además si bien tengo varias opciones de envío basadas en la dirección del cliente, solo algunas están disponibles. Para entender por qué esto es pionero, hay que mirar la versión antigua. Aquí. Como usuario recién registrado, el sistema te mostraría los costos máximos de entrega. Obviamente esto no era ideal. Por cualquier razón el lado mostró por defecto o costo que es tres veces más alto frente al normal. Imagínese 30 dólares en lugar de 10 dólares. Esa es una gran diferencia. Esta cosa sola hizo que mucha gente renunciara a su orden. Ahora, asegurado si pasaste por los pasos, primero pones tu nombre y número de teléfono, luego añades tu dirección, que por cierto requiere de un click extra por la absolutamente ninguna buena razón. Entonces yap, después de todo esto, obtendrías un precio preciso. El precio cambiaría. Pero los usuarios son las supermodelos. No tienen tiempo para resolver las cosas. No quieren pensador ni llenan formularios con las esperanzas de que tal vez sea el precio va a cambiar, se va a bajar. Pero volvamos a la versión actualizada. Después de decir mi dirección, el sitio web se va a refrescar y mostrarme qué es lo que podemos ver claramente las otras dos secciones, ambas ahora están activas porque el orden de tus acciones en este momento no realmente materia. En la Sección 3, eliges la forma en que quieres pagar ya sea en efectivo, que sí tiene un recargo, o a una tarjeta de crédito. Estos iconos, si bien pueden no parecer así, son fantásticos. Construyen confianza. Mostraron el nombre de una tarjeta de crédito muy popular operada en Rumania. En la versión antigua, este no era el caso. Se pueden encontrar artículos sobre este tema, pero en resumen, mostrar estos iconos es increíblemente importante. En la versión anterior, las opciones de you'll estaban realmente escondidas detrás del desplegable. Por lo que el usuario tuvo que trabajar un poco más para llegar a esta información. Si bien un solo clic no puede considerarse trabajo duro, sigue siendo un inconveniente, exactamente igual que la nueva dirección pop up donde tenías que hacer clic en el botón antes de ver realmente el formulario. No pongas estas barricadas. En realidad tú como diseñador y estoy seguro de que no las vas a diseñar, pero tienes que mantener a raya a la empresa de codificación. A los usuarios no les gusta la fricción extra. Continuando por este camino. Ese era un lugar en el viejo diseño donde se podían dejar algunas notas. En la versión anterior, tenías que hacer clic aquí y eso impulsó el pop-up. En la nueva versión, ya se muestra el campo. No es obligatorio, pero ya sabes, puedes usarlo si es necesario. También es útil la mano. Dice algo en la línea de cualquier cosa que anotar sobre el orden. Por último, todos los demás están por debajo del lugar de esa carga. Esto te dice si no usaste un método de pago o si no se ha cumplido el pedido mínimo agrupándolos en el lado derecho, el usuario se entera de que este es el lugar que tiene que volver a verificar. Un enfoque alternativo es mostrar los errores en línea, es decir, junto a esa área. Si no se selecciona el pago, podríamos mostrarlo ahí justo aquí. Pero opté intencionalmente por colocar todo aquí porque el usuario sabe que este es el botón Iniciar. Dice colocar orden. Si el color gris no te dice que algo anda mal, este mensaje debe el testamento respecto a la columna correcta. Esto siempre está a la vista. El monto total puede cambiar en función de sus opciones. Hay una opción de entrega que cuesta diez, lay, otra que es 15. Pero también una tercera que son 30. Por cierto, es la moneda aquí en Rumania. Que hay un recargo por si quieres pagar en efectivo. Al mostrar todo aquí, puedes ver claramente tu total en todo momento. Transparencia, confianza, estos son importantes, ya sabes lo que está pasando en todo momento. Y si cambias tus cantidades, nuevo, el total está justo aquí. En la versión antigua, ese no era el caso. Tenías que desplazarte constantemente hacia arriba y comprobar el total cada vez que elegiste algo, ya sea el método de pago de la fecha de entrega, o ajustaste tu cantidad. Eso fue frustrante como el infierno. Esto es UX. Este es el proceso a través del cual piensas tu experiencia de usuarios y la mejora. Sabía que algo andaba mal en base a esa campaña publicitaria de Facebook, pero también al chat en vivo y las llamadas telefónicas que recibí. La gente estaba luchando. Bueno, fue fácil despedirlos por no tener el cerebro para operar correctamente la computadora o leer una página web. Yo me humillé, él miró sus comentarios y traté de mejorar mi diseño. Es importante que escuches. No había ego. Lo dejé en la puerta. Lo importante es que encontré pinpoints en el proceso de pago y traté de arreglarlos. Por el momento, mis ventas se duplicaron. Y aún así hay más margen de mejora. Pero esa es una historia para otra época. 73. Mejorar la versión móvil para doble ventas de ventas: Bienvenidos a otra parte de mi lista de Aedes a través de la cual logré duplicar mis ventas. Esta vez nos estamos centrando en la versión móvil de la página principal. Si bien tengo una aplicación para Android, gran parte de mi audiencia visita mi sitio web para hacerlo ahí, los teléfonos, un asombroso 85% de los visitantes están usando un dispositivo móvil. La mayoría vienen de anuncios de Facebook e Instagram, en su mayoría porque es más barato. Pero esa es otra historia. Para ver el sitio web y el modo móvil, o tienes que hacer es abrir la consola del navegador. Puedes hacer eso presionando F2 L en tu teclado. O puedes hacer clic con el botón derecho, presionar Inspeccionar desde la nueva ventana que aparece. Busca este ícono. Al igual que en los videos anteriores, Firefox muestra la nueva versión, Chrome, la antigua. Así se veía el sitio web hace unas semanas cuando no tenías nada en tu carrito, apenas viste la mitad de un panqueque. No es ideal por ningún medio. Este texto, la copa, un buen 40% de la pantalla inmobiliaria. Esto fue horrible. Y si el usuario no detiene el pergamino, sólo vería la pestaña predeterminada, en este caso, la categoría de panqueques. Obviamente se podía desplazar la copia de seguridad y cambiar categorías, pero todo el enfoque era difícil. Es bueno ver todos mis productos tenías que navegar seriamente por ahí. Estamos hablando de minutos de explorar. Pero como ya sabemos, los usuarios no tienen ese tipo de pacientes. Además de eso, todo está demasiado extendido en este diseño. Si bien cada elemento con requiere una cantidad decente de espacio para respirar, esto es demasiado llegar a ver un solo producto y qué tercero, esto ahora es genial. Entonces ese es el viejo diseño. Ahora veamos el nuevo. Esto es mucho más parecido. Bueno, todavía tenemos una cantidad bastante grande de texto. Se llega a ver casi cuatro productos. Estaré en esta segunda fila está en completamente visible. Todavía se llega a ver una gran parte de estas imágenes lo cual es suficiente para captar tu atención. Esto se parece mucho más con un solo pergamino, se llega a ver el contenido de una categoría. Y debido a que el pergamino es tan corto, no tienes ningún problema en encontrar este desplegable. Si soy honesto, hubiera preferido el desplegable de categoría fija. Pero tal vez va a haber la versión 3. Ya veremos, bueno, estoy tirando constantemente la palabra importante. Realmente creo que esto fue un cambio de juego. Los usuarios experimentaron dramáticamente giro para mejor. Sin mencionar que en combinación con esa función JavaScript add to cart, ahora es mucho más fácil llenar tu tarjeta. Hablando al respecto, Echemos un vistazo a la antigua página web. Cuando la barra amarilla se hace visible, ya no se ve ningún producto en absoluto. Apenas un poco de este círculo gris. Así fue como se codificó el diseño. Técnicamente, sí, es sensible. Pero, ¿hicieron un buen trabajo los codificadores? Lejos de ello. En la versión actualizada, decidí basurar la barra amarilla todos juntos. Eso se debe a que el encabezado es fijo y el icono del carrito debe colocarse junto al menú de hamburguesas. Esto tiene mucho más sentido. Mirándolo desde la distancia. Todos estos cambios parecen tan básicos. Es de sentido común. Pero esto es lo que sucede durante el proceso de codificación. Es por ello que la mayoría de los proyectos requieren de un gerente, alguien con experiencia que pueda supervisar al equipo de codificadores. Y por otro lado, alguien que pueda instruir al equipo de diseño para llenar ciertos vacíos. Al final del día, probablemente vas a trabajar sola. Y es poco probable que se ocupe de un gerente de proyecto cuando se trabaja en proyectos que tienen un presupuesto de digamos, por debajo de los 3000 dólares. El mejor consejo que puedo darte es hacer mucho estudiando y levantar tu juego de UX. Recuerda, este hermoso diseño no vale nada si los visitantes lucharon para usarlo. Y si bien siempre vas a hacer lo posible, el cliente necesita lanzar el sitio web y volver con ciertos análisis y posteriormente cambios. Si bien estoy feliz de que mis ventas se hayan duplicado, sigo pensando que hay margen de mejora. ¿ Pueden empeorar mis próximos cambios? Corto eso puede suceder. Ser demasiado celoso es una cosa al 100%. Pero si tienes miedo a las pruebas, nunca vas a hacer ningún progreso. Con eso dicho, espero que los clientes tengan una mejor empresa de codificación. A continuación, hablemos de la atención al detalle en la siguiente conferencia. 74. 7 reajustes de sitio web que muestran la atención a los detalles: Bienvenido de nuevo al curso. Yo quiero ir con varias cosas que mejoré en mi página web y estos son todos pequeños detalles. Esto es a lo que me refiero con atención al detalle. En primer lugar, lo más obvio, el icono de agregar al carrito. Si bien el viejo parecía voluminoso, me golpeó que algunas personas pudieran asumir que vas a hacer clic en él y te van a llevar a la pantalla del carrito. Después de todo, eso es lo que pasa cuando haces clic aquí. Entonces pensé que eso necesita aclararse. Y les encantaron estos pequeños pequeños retoques porque tardan literalmente minutos en implementarse, pero la experiencia general en usar el sitio web sube. Entonces ese es el número uno. Número dos, decidí hacer pleno uso de esta inmobiliaria. Si bien el círculo se ve encantador, no es un uso eficiente del espacio. En un principio, estaba realmente orgulloso de mi página web minimalista y estos círculos agregaron un poco algo diferente. Podría discutir por ellos todo el día, pero la nueva versión muestra una experiencia de navegación mucho mejorada. Se llega a ver más de los productos. Y con ese aumento en la pantalla inmobiliaria, decidí agregar varios gráficos. Por lo que en general, se trata de una netlist y estos son puntos de venta únicos de la USP. Dicen cosas como sin azúcar, sin ODS hervidas, chocolate belga y así sucesivamente. Entonces una pequeña elección de diseño que hizo una gran diferencia. Continuando, número tres, un poco polémico. Cambié la fuente de mi cuerpo. En lugar de nuevo Nieto. Opté por la nodal llamada losa de Zillow. El razonamiento detrás de ella es simple. Las fuentes Serif tienden a verse mejor en los teléfonos móviles. Básicamente por esa estadística sustancial, 85 de mis visitantes están usando teléfonos móviles. Decidí mejorar su experiencia de lectura a la fuente serif Oeste. Básicamente todos esos pequeños detalles que se agregan a una fuente serif hacen que la palabra sea más fácil de ver, más distintiva. Como probablemente sabrán, no leemos la palabra letra por letra. Lo escaneamos y en base a su forma, nos dimos cuenta de qué es. Ahora, de nuevo, esto no es 100% seguro, no es ciencia dura, pero hay razones serias para creer que las fuentes serif son más fáciles de leer. De esta manera, el cambio. Número cuatro, destrozé el sistema de tabuladores desde el interior del producto. Aquí está la primicia. Una enorme tienda de comercio electrónico aquí en Rumania utiliza estas pestañas. Pero la forma en que funcionan es que haces clic en ellos y te desplazarás hacia abajo hasta una sección determinada. Por razones técnicas, no pude conseguir ese scroll en mi página web. Por lo que terminé con pestañas regulares. Problemas es que seguí recibiendo las mismas preguntas una y otra vez sobre los costos de envío, cómo debe almacenarse el producto, qué temperatura, fecha de caducidad, información nutricional, y así sucesivamente las obras. Todos estos se mostraban en pestañas separadas. Mi proceso de pensamiento inicial fue limitar la cantidad de información para que el usuario no se vea abrumado. Bueno, eso no funcionó tan bien. En la versión actualizada sin embargo, elimino la columna derecha que contiene información general sobre la empresa. Y he movido aquí la mesa nutricional. Además, agregué las reseñas debajo de la descripción general. Por lo que para hacer unos pergaminos, podrías llegar fácilmente a ellos. Número cinco, elegí destacar una revisión específica para cada producto. En la mayoría de los casos, las personas dan un pulgar hacia arriba o un pulgar hacia abajo. Podrían escribir unas palabras, pero eso es todo. Debido a eso, la mayoría de las críticas son decepcionantes que realmente no son útiles. Y la prueba social es algo enorme. Es por ello que pedí a mis desarrolladores que añadieran dos campos de texto para cada producto. Podría entonces buscar las mejores reseñas para el producto y mostrarlas de una manera diferente. Bueno, esto aún está en marcha. Busco las influencias con peso muy conocidas que puedan proporcionar la cotización para cada producto. Número 7, uno pequeño, pero de nuevo, enorme. Cambié la pregunta del chat en vivo antes de que dijeran algo así como, estoy aquí. Ahora dice: ¿Tienes alguna pregunta? Si bien puede no sonar como mucho, esto logró aumentar el número de conversaciones. Y más conversaciones típicamente significan más ventas. Y esto cambió la llamada. Pero dos segundos, por cierto, el servicio que estoy usando se llama Chandra. Pasé mucho tiempo encontrando el adecuado para mi negocio, no creo que éste esté bastante bien. Ahora, en general, estas son algunas de las pequeñas cosas que hice para mejorar mi diseño. manera individual. No parecen importantes. Pero cuando las agregas todas juntas, obtienes una mejor experiencia de compra. Y al final del día, eso es lo que importa. El más. 75. Actualizar la página de productos móviles: Bienvenido de nuevo a otra conferencia sobre cómo mejoré mi página web. La versión móvil de la página de inicio fue esencial para reducir el número de rebotes, lo que significa las personas que vieron el sitio web e inmediatamente se fueron. El siguiente paso es tener una gran página de producto. Por lo que quienes mostraron los leves intereses pueden obtener la información que necesitan para tomar una decisión. En la versión antigua, todo se soltó. Echa un vistazo a este espacio vacío en la parte superior. No tiene sentido. O este anillo invisible que rodea la sección de galería. El espaciado estaba por todo el lugar y aún más que eso, ciertas cosas se traían de frente y centro, pesar de que no tenían ningún sentido. Por ejemplo, estas migas de pan en la versión de escritorio, seguro, están bien, pero aquí golpean en medio de la página, totalmente inútil. En cuanto a los iconos de las redes sociales, no te envían a nuestros perfiles. En cambio, están acostumbrados a compartir esta página con tus amigos. De nuevo, bueno, esto no puede doler en la versión de escritorio. Aquí. Está en el camino como lo que el título, está cortado. Por lo que realmente no sabes lo que vale. Avanzando hacia abajo el selector de cantidad es sub bar, Pongámoslo de esa manera. Y esas tres pestañas, bueno, ahí están pagando a EU. Es realmente confuso incluso para mí. Ahora, honestamente, este es un diseño de tablero. No necesitas diez años de experiencia en UX para descubrir que esto no es ideal. La verdad es que te enfocas en las cosas grandes y luego trabajas hacia abajo. Después de que se lanzó el sitio web, supe que no era perfecto. Por lo que dejé a un lado una suma de dinero para estas cositas que tenían que ser ordenadas. No me sorprendió el hecho de que hubiera problemas. Fui atrapado desprevenido por el número de temas que descubrí. Ah. Y cuando agregaste el producto, policía de verdad, si parpadeaste, no sabías qué pasó. Se refresca la página y eso es todo. No hay indicación de si funciona este botón y cómo se supone que debes proceder. Entonces en general, una tonelada de temas que realmente no esperaba. El número de ellos fue absolutamente ginormoso y se convierte en la nueva virgen. En primer lugar, ocupé el espacio de manera efectiva. El Galilea es mucho más grande que cuando no sientes que está apretado. Las reseñas de productos son más pequeñas pero aún muy visibles. Además se obtiene un montón de información sin tener que desplazarse. Y en la mayoría de los casos, realidad ves el botón Añadir al carrito sin tener que desplazarse de 1 bit. Hace poco agregué esta etiqueta en el título, y eso hace aunque las cosas se apagan. Pero en la mayoría de las situaciones, el botón es visible. Cuando te mueves hacia abajo, te encuentras con una página muy alta. Eso es cierto. Pero es fácil de usar. Bueno, no es perfecto. Sigo pensando que está millas por delante de la versión inicial. Y aquí es donde realmente brilla la fuente serif. Pasé mucho tiempo jugueteando con la altura de la línea por lo que los campos de texto aireados y fáciles de leer. Creo que hice un buen trabajo. Y al final del día, estoy feliz de haberlo logrado. Si bien podría haberlo hecho un poco más grande, siento que la mayoría de la gente va a pasar por alto y van a buscar cosas clave como fecha de caducidad, revisiones o información nutricional. volver arriba, el controlador de cantidad está todo en una sola línea. Tenía que encogerme esta información sobre el tamaño de la porción, pero todo fluye bien. Y al hacer clic en el botón, obtienes algo llamado brindis. Un aviso rápido que te diga que todo está bien. Hubiera preferido algún tipo de aviso que centre su atención en la cabeza de dos. Pero todo son pasos de bebé. En general, comparar estos dos diseños es de noche y de día. No podían ser más diferentes. El modo en que logré todas estas ediciones fue hablar constantemente con el codificador y hacer sesiones de compartición de pantalla. Creo que ese es un tema en sí mismo. Entonces vamos a descomponer eso en la próxima conferencia. 76. Hacer sesiones de 1 a 1 con un programador: Bienvenidos a esta conferencia donde quiero hablar del proceso de mejora de una página web. Durante estos pasados pocos videos, ustedes vieron cómo transformé totalmente mi sitio web y posteriormente mi negocio. ¿ Cómo sucede eso? Bueno, primero tenemos que separar el tipo de trabajo que se está haciendo. Imagina que quieres renovar la casa. Hay cosas cosméticas como cambiar el color de las paredes, agregar muebles nuevos y mover cosas alrededor. Y luego hay un trabajo estructural como quitar un muro para crear un espacio abierto. Es lo mismo con los sitios web. Por ejemplo, la versión móvil de la página del producto es mucho más compacta. Eso se hace a través de CSS. Se trata de retocar remo, márgenes, tamaños de fuente, y varias otras cosas. Su código existente que ajustas donde unas pocas líneas que añadas. Pero en general, esto es puramente cosmético. Bajo el mismo paraguas, podemos añadir la nueva fuente serif, el tratamiento de texto resaltado, el icono de agregar al carrito, etc. Por otro lado, agregando dos líneas de texto para cada producto que sea estructural. Eso requiere un tipo de enfoque diferente. Bueno, parece ridículo li fácil agregar dos campos de texto por producto. Esto en realidad lo hace mejor la empresa que construyó el sitio web. El freelancer dudó en saltar y cambiarlo porque la base de datos está estructurada de cierta manera. A modo de nota, todo el código de sitios web está escrito en un idioma universal con comentarios escritos en inglés. Aun así, es como usar la ducha de otra persona. Seguro que tienes una ducha la más nueva casa para pero la elegiste, sabes usarlo en la ducha de otra persona, aunque los principios son los mismos. Puede que te sorprenda esta o aquella dificultad no es realmente la cuestión aquí. Se trata más de tener que cambiar de marchas. Idealmente, se hace el trabajo estructural. El equipo empaca sus maletas y se dirige. Después entra en juego el equipo cosmético. Esa es la situación ideal. Pero eso requiere una buena visión general de todo el proceso. Y lo más probable es que no tengas la experiencia para ello. No se preocupe. Mientras estés preparado para la ilustración, estarás bien. Honestamente, ese es el mejor consejo que puedo darte. Las cosas malas pasan todo el tiempo. Cómo reaccionas es lo único bajo tu control. Volviendo al diseño web, contraté lo hundió, el freelancer indio para ayudarme con todos los cabos sueltos que manché. Hablamos por Skype y él instaló un servidor local. Esto a veces se denomina modo de puesta en escena o de caja de arena. No importa el nombre, la idea es con trabajar en una copia. Si algo sale mal, el sitio web no estará abajo para los clientes que pagan. espectador del equipo o cualquier escritorio. Constantemente hacía cambios desde mi computadora. Fue un proceso que consumía mucho tiempo. Usaría la herramienta inspect y escribiría algo de CSS yo mismo para poder acercarme a lo que quiero. Yo compartiría mi pantalla y le mostraría lo que quería decir con mayor altura de línea. Cuando mis conocimientos de CSS eran demasiado limitados, hice una captura de pantalla rápida y edité la imagen en Photoshop. Ladrillo por ladrillo, tarea por tarea. Trabajamos hasta que terminamos. Después de unas 30 ediciones, empujamos el código a la versión en vivo del sitio web. Las grandes empresas de codificación supervisaron el empuje. Eso a pesar de que solo trabajábamos en cosas cosméticas. Por cualquier razón, las cosas se descomponen todo el tiempo sin razón aparente. Es por ello que lo mejor es tener algún tipo de supervisión. Después de que mis cambios estaban vivos, la empresa de codificación hizo su trabajo para específicamente como ejemplo, insertaron esta reseña destacada. Nota. No les pedí un sistema al que seleccionaría una revisión existente y singlet out. Tenga en cuenta que sería más caro, más complicado. En cambio, pedí dos campos de texto por producto que si se dejaran vacíos no aparecerían. Yo lo hice porque pensé que los nuevos productos no tendrían ninguna opinión y no quería una sección MD. Aprendí de mis errores pasados y anticipo eso lo peor. A modo de nota al margen, se habían insertado estos campos en el back-end porque estas páginas de productos no son estáticas. Dicho lo contrario, si tengo 20 productos, no encontrarás 20 archivos en el servidor. Uno por cada producto que entraría y le añadiría algo. Específicamente estos campos, no, en cambio estas páginas se generan desde el backend. Vamos a acercarnos al lado de la codificación de las cosas ahora mismo. Y no quiero explicar algo, no me comprendo del todo. El hecho es que quería que se hiciera bien. El indio se hundió pudo haber hecho algo como una solución temporal, pero quería usar las mejores prácticas y tener una base sólida. De ahí por qué tuve que usar el gran holding. Después de que terminaron su parte, el freelancer entró en juego una vez más en compartir pantalla. Diseñamos estas dos capas de texto al contenido de mi corazón. Tenga en cuenta que todo este proceso tardó de cuatro a cinco semanas en completarse, sobre todo porque cada parte involucrada estaba ocupada. En realidad soy el dirigido el director general de la empresa, así que tengo una tonelada de cosas que hacer respecto a dirigir realmente el negocio, realizar entrevistas, contratar personas, pagarlas, sentar procedimientos, control de calidad, etcétera. La empresa Vicodin tenía proyectos con un valor de cuatro luego cinco dígitos. ¿ Por qué desviarían a uno de sus codificadores para saltar a mi diminuto proyecto por la mísera pareja de 100 dólares. En cuanto al freelancer, por naturaleza, salta de proyecto en proyecto, pero obviamente prefiere los más grandes que paguen mejor. En resumen, esta no es una situación ideal para nadie. Pero siempre y cuando sepas lo que quieres y prepares la lista con anticipación. Las llamadas vía micrófono y pantalla compartida deben ser cortas y dulces. En total, durante estas últimas semanas, creo que pasamos alrededor de 30 horas más o menos trabajando y hablando unos con otros. Espero que toda esta información haya sido útil y ahora tienes una mejor idea de lo que pasa entre bastidores. Si tienes alguna pregunta, siempre estoy en este curso, así que avísame. 77. ¿Qué sigue?: Enhorabuena, has logrado llegar al final. Espero que este curso fuera lo que esperabas y más. El siguiente paso es continuar tu viaje de aprendizaje y practicar lo más posible. Por otro lado, convertirse en un gran diseñador es sobre los números también. No se puede esperar trabajar y ahora sí, pero podemos ser geniales en ello. Tienes que poner el tiempo y no importa en qué proyecto elijas trabajar. Tan solo asegúrate de seguir trabajando. Gracias y nos vemos en el próximo curso.