Flujo de trabajo del diseño web moderno → concepción, desarrollo de wireframe, maquetas y prototipos

1. Introducción: Con el diseño web responsive, el diseño web adoptivo y cientos de aplicaciones de diseño en línea, mucho ha cambiado con el proceso de diseño web en los últimos años. Diseñadores, ellos Sketch, ellos Wireframe, ellos Prototype, incluso Colaboran con sus desarrolladores, incluso generan guías de estilo en línea para sus desarrolladores. Vamos a cubrir todo este proceso moderno de Diseño Web durante este curso así que déjame mostrarte lo que vamos a cubrir en este curso con algún detalle. En este curso, vamos a diseñar un proyecto de sitio web receptivo desde cero, que implicará obtener información de los clientes, estudiar breves de diseño, Ideación o al menos bocetos, Wireframing, y luego Mockup o diseño web para pantallas grandes, medianas o pequeñas junto con la configuración y el cálculo de rejillas, y finalmente, estaremos creando especificaciones y guías de estilo para nuestros desarrolladores. Al final para los flujos e interacciones, vamos a construir un prototipo sencillo usando InVision App. También voy a mostrarles pocos enfoques de diseño y marcos como Atomic Design, diseñando con el enfoque Content-first, Consideraciones de Diseño Web Responsive y Diseñando para Desarrolladores. Las herramientas que estaremos utilizando durante este proceso son maquetas Balsamiq para crear Wireframes. Después, Adobe Photoshop para crear tu diseño web o maquetas para pantallas grandes, medianas y pequeñas. Entonces, vamos a usar Zeplin para crear guías de estilo online para desarrolladores, y al final vamos a crear un prototipo sencillo con la aplicación InVision. Ahora bien, ¿qué problemas voy a resolver durante este curso? Cómo meterse en la mente de su cliente, y dónde obtener inspiraciones de diseño para iniciar su diseño, y cómo calcular su cuadrícula para diferentes tamaños de pantalla, y cómo configurar guías para diferentes tamaños de pantalla, ¿puedo necesita contenido antes de diseñar, y puede mi diseño convertirse fácilmente a código, ¿cuáles son los últimos enfoques eficientes para el diseño web receptivo? Voy a contestar todas estas preguntas durante este curso. Este curso no es para principiantes en Photoshop. Si fueras principiante, deberías mirar mis otros cursos de diseño de UI. Hola, soy Ahsan [inaudible] y estoy diseñando UI de los últimos ocho años y soy freelancer. Si quieres aprender mi proceso de creación de diseños web impresionantes y diseño web responsive usando tableros de arte y cómo vas a crear un sitio web amigable fresco, entonces deberías tomar este curso. Vamos a verte dentro de este curso. 2. Qué cubriremos en este curso: Ahora déjame mostrarte un poco a fondo lo que vamos a cubrir en este curso. Al final, básicamente vamos a diseñar este sitio web receptivo para tablets, móviles y vistas de escritorio junto con creación de sus cuadrículas se puede ver por aquí es cuadrícula de cuatro columnas. Después tenemos cuadrícula de ocho columnas para tablet. Déjame mostrarte. Contamos con rejilla de 12 columnas para nuestro escritorio. Aparte de eso, también vamos a crear esta documentación en línea recta. Puedes ver por aquí el espaciado y las especificaciones para nuestros desarrolladores. Junto con eso, también vamos a desarrollar nuestra guía de estilo de UI. Se pueden ver por aquí todos los colores, gradientes, topografía, patrones, iconografía, elementos de forma, elementos de interfaz de usuario, todo lo que vamos a diseñar utilizando la guía de estilo. Durante nuestro proceso de diseño, vamos a crear más tableros. Se puede ver por aquí, he creado un tablero más por aquí. Entonces vamos a crear una guía de estilo al final, que es será mediante el uso de Zeplin. Aquí se puede ver todo el código, colores, sombras, y todo el textil generado por aquí. Entonces también vamos a crear un prototipo para flujos o animaciones mostrando a tus desarrolladores que esto es lo que quise decir. Se puede ver por aquí cómo sale esta barra de navegación y se desvanece. Pocos de los conceptos de diseño que voy a cubrir son el diseño atómico. Se puede ver por aquí cómo vamos a diseñar utilizando la química de átomos, moléculas, organismos, plantillas, y páginas. También vamos a diseñar utilizando este sistema de cuadrícula de 8 puntos, que es prestado de Google Material Design y les voy a mostrar cómo vamos a utilizar este sistema de cuadrícula de 8 puntos en nuestros diseños. Parte de la parte que vamos a cubrir es de UX, que va a ser nuestra ideación o bocetos y obtener detalles de tus clientes y cómo vamos a obtener bocetos iniciales de nuestro cliente, cómo vamos a diseñar wireframes, y cómo vamos a traducir nuestros wireframes en maquetas. Cómo vamos a entregar estas maquetas en guías estilo y luego guías de estilo codificadas para nuestros desarrolladores al final. Si tienes alguna sugerencia sobre este curso, puedes preguntarme directamente, puedes mandarme un mensaje, puedes hacer cualquier pregunta que quieras. Si te atascas en algún lugar o quieres que se añada alguna lección o quieres un poco más de detalle sobre ese tema, avísame que te voy a ayudar. Empecemos. 3. Requriements de curso: Ahora empecemos con lo que vamos a necesitar para este curso. Vamos a necesitar dos cosas. Uno es tu nivel de habilidad y segundo es el software como Photoshop. Necesitamos Photoshop CC última versión ahora mismo es 2017. No sé cuándo vas a comprar este curso. Podría ser 2018 o algo más. La última versión de Photoshop, puedes descargar la versión de prueba de Photoshop o puedes comprar su fotografía, paquete CC empaquetado mensualmente. No intentes ir por una sola app, necesitamos solo paquete de fotografía mensual. Es sólo por $10 al mes. Ahora, en términos de habilidad, lo que vamos a necesitar es que vamos a necesitar al menos las habilidades que he escrito en mi diseño de UI en curso de Photoshop. Ya puedes ver en esta pantalla en este momento. Al menos necesitas saber cómo vas a configurar Photoshop para el diseño de la interfaz de usuario, y cómo usar Photoshop, cómo configurar teclas de acceso directo personalizadas, y cómo instalar extensiones, recursos, scripts, todo. Creo que las primeras dos o tres secciones, necesitas saber hacer estas cosas antes de empezar este curso. Además, si te preocupan las combinaciones de tipografía, necesitas tomar mi curso de tipografía de tipo para tus diseñadores. No te voy a mostrar todos los consejos y trucos, cómo seleccioné lo falso para este diseño. Este curso estará cubriendo específicamente todos los pasos y el proceso de un diseñador web moderno desde su proceso de diseño hasta manejarlo a los desarrolladores. Incluso vamos a producir algunas de las guías de codificación y estilo en este curso. este curso hay mucha toneladas de información. No te lo pierdas, y empecemos. 4. Extensiones de Photoshop: Antes de empezar con nuestro diseño web responsive de Photoshop y flujo de trabajo de diseño web moderno, te voy a mostrar y compartir contigo algunos de los plug-ins y los scripts que vamos a necesitar durante este curso. Echémosles un vistazo y les voy a mostrar tanto las gratuitas como las pagadas. Ahora, de aquí en adelante, no voy a explicar todo lo que sé que eres experto, al menos en el manejo de Photoshop. Si no eres un experto, deberías ver mis pocos otros cursos, que son diseño de UI en Photoshop y tipografía para combinaciones tipográficas y elegir la fuente y el tipo de letra adecuados para tu proyecto. Empecemos, te voy a mostrar la mayor parte del tiempo, los libres y los más importantes los vamos a necesitar estos durante todo este curso. A ver qué tenemos. Ahora, el primer plugin que te voy a mostrar es este UberFaces por mostrar iconos de avatar y rostros de personas. Puedes traer diferentes fotos en Photoshop para mayormente las de retrato y los avatares al diseño de tu interfaz de usuario. Similar es éste, esto es básicamente un randomuser.me. Cuentan con extensión Photoshop, puedes descargar la más reciente. Entonces tenemos esta Tinta. Vamos a generar especificaciones para nuestros desarrolladores, se puede ver este ejemplo por aquí, la altura y anchura de los elementos y también la fuerza. Entonces se puede ver por aquí, se va a mostrar la fuerza por aquí. Entonces vamos a necesitar este Gridify. Este es realmente el plug-in más necesario durante mi curso. De verdad necesitas éste. Entonces también puedes instalar este Font Awesome PS. A veces necesitamos algunos iconos de la biblioteca Font Awesome, que es básicamente para desarrolladores y bootstrap. Otros cuatro que voy a mencionar aquí son los plugins que realmente no necesitamos, pero son impresionantes. Una de ellas es esta GuideGuide. Cuesta $10 y es uno de los mejores que he visto por diseñar sus calificaciones y guías. Entonces tenemos este Patrones Sutiles para traer diferente patrón en Photoshop. Entonces tenemos el CSS Hat 2 por traerlo y usarlo para diferentes CSS. Generando instantáneamente colores CSS, degradados para tus capas y elementos de Photoshop. Entonces para otra vez, especificaciones del desarrollador, puedes ver que ésta es otra. Estos se llaman especificaciones de línea roja, se puede ver por aquí. En su mayoría nuestros desarrolladores necesitan saber cuáles son las distancias entre los diferentes elementos desde arriba y cuáles son los anchos y alturas de estos elementos como botones. Entonces este es uno de ellos, pero esto es un poco costoso. Vamos a usar este gratis, Tinta. Intenta darle primero a mis alumnos los plugins gratuitos porque creo, no debes gastar demasiado en comprar plugins si hay una buena alternativa gratuita. Pocos otros plugins, este también exporta capas de Photoshop, pero vamos a usar el panel de exportación de Photoshop en su lugar, así que tal vez si te gusta este o diseñas para iOS o Apple, entonces puedes extraer salida 2X o 3X para pantallas retina, entonces tenemos pocos plugins más como este. Se trata de Renamy, y esto es para archivos SVG, exportando archivos SVG, en su mayoría para iconos. Entonces exportas iconos SVG, van a expandirse y contraerse fácilmente, son formas vectoriales. En HTML y programación, realmente van a ayudar a tus desarrolladores en lugar de exportar archivos PNG. Entonces tenemos algunas cosas más que les voy a mostrar. Ahora para la parte de instalación de los plugins, te voy a mostrar algunos de los artículos que necesitas conocer. Entonces si no has visto mi curso anterior, diseño de UI en Photoshop, realmente necesitas verlo o tomarlo. Vas a encontrar el código de descuento para mis otros cursos al finalizar este curso, así que si necesitas tomarlo antes de tomar este curso, debes tomarlo. En ese curso, te he mostrado todo el proceso de instalar diferentes plugins de Photoshop CC en Mac o incluso sistema operativo Windows, y cómo vas a utilizar este instalador de ZXP para instalar diferentes plugins en Photoshop CC 2017. y también cómo lo vas a instalar manualmente. Voy a compartir estos dos enlaces la mayor parte del tiempo, tratar de leer las instrucciones de cualquier plugin que descargues porque he visto a muchos de mis alumnos que me hacen preguntas y cuando les digo, “¿Has leído el archivo Léame o instrucciones de instalación?” Entonces dicen: “Oh, me olvidé de leerlo. No puedo instalarlo. Ahora, lo he instalado”. Por lo que antes de que me contactes o me hagas preguntas, intenta leer cuidadosamente la guía de instalación y sigue los pasos. Estos son todos los plugins que vamos a necesitar, voy a repetir al final otra vez. Los cuatro o cinco plugins que realmente necesitamos es este plugin de Uber, UberFaces. O bien puedes usar UberFaces o este generador de usuarios aleatorios. A mí me gusta más este UberFaces. Entonces realmente estamos necesitando esta Tinta, y también esta Gridify, y esta Font Awesome Photoshop. Si puedes conseguir otros, depende de ti, pero no te recomiendo gastar demasiado en ellos. Ahora, pasemos a la siguiente lección donde les voy a mostrar mi configuración interfaz de Photoshop. Voy a ir con mucha velocidad porque todas estas cosas que he discutido en mi curso de diseño de UI de Photoshop, que es para usuarios básicos y pro o incluso expertos, así que pasemos a la siguiente lección. 5. Cómo organizar un proyecto de diseño web: En esta lección, vamos a hablar de organización de carpetas. A muchos diseñadores que he visto, normalmente tratan de organizar su PSD en diferentes carpetas y todo está disperso, no localizan las fuentes ni los activos utilizados. Entonces al final es un lío muy grande si estás trabajando con un equipo o un equipo de desarrollo o un gerente de proyecto, necesitas ser muy bueno organizando tus cosas. Déjame mostrarte cómo normalmente organizo mis PSD y activos y diferentes archivos. En primer lugar vamos a crear una carpeta con el nombre del proyecto, como Wstudio Design o también puedes nombrarlo con el nombre de un cliente, y también puedes crear varios proyectos en una carpeta de un solo cliente. Entonces si obtienes mucho trabajo de un solo cliente, puedes crear el nombre del cliente y luego crear múltiples carpetas de proyectos. Por lo que nombrelos, también puedes etiquetar la fecha. Entonces es como el 2017, así que sé que lo hice en diciembre de 2017 o noviembre de 2017. Te memoriza eso al final si necesitas encontrarlo, puedes encontrarlo fácilmente que lo hice en 2017. Ahora aquí hay ejemplo de cómo voy a nombrar la carpeta de un cliente. Aquí está el nombre de mi cliente y dentro de que tengo un proyecto de diseño de ese cliente y si entro dentro de ese proyecto de diseño, puede ver que hay diferentes carpetas, el contenido del sitio, el contenido escrito, texto y copia, Voy a mantenerlo afuera. También esa guía de estilo estadounidense que vamos a crear al final, ahora mismo no necesitas preocuparte por ello, solo vas a mantener a estos dos afuera. Entonces el wireframe, encuentra carpeta para los wireframes, se puede ver aquí mismo tengo un wireframe. Después tenemos todos los PSD con sus previsualizaciones, así que asegúrate de crear siempre una vista previa de cada archivo que diseñas porque a veces de mirar solo a los desarrolladores de nombres o tal vez a los gestores de proyectos, no van a conseguir lo que este archivo se trata de todo. Entonces con sólo ver que es pequeño adelanto saben que este es el diseño grande. También puedes ver los he nombrado landingpage_lg, lg significa grande, mayoría de los desarrolladores conocen este término, pero aun así si no conocen este término, vas a generar una vista previa y van a ver el previsualice y sepa instantáneamente que este archivo es medio para pantalla media o pantalla grande o pequeña. Ahora en la inspiración, es básicamente tu pizarra de humor o las inspiraciones, puedes ver aquí tengo mucho, puedes ver cómo conseguí inspiraciones de diferentes fotos e imágenes, puedes ver por aquí tomé las fotos del sitio web asi me gusta, tomo capturas de pantalla. Se puede ver por aquí, aquí hay otro tema o tablero de humor, voy a hablar mucho de mood board y vamos a crear uno en línea para poder colaborar con otros diseñadores o tal vez desarrolladores o jefes de proyecto. Entonces así es como vas a arreglar todas tus carpetas y activos. En la carpeta de activos, vamos a guardar todas nuestras fuentes y también las imágenes de stock que vamos a utilizar durante nuestro proyecto. Entonces la próxima vez, no quiero ver final, final final mal organización de carpetas si estás diseñando para algún cliente. Entonces todos mis alumnos, solo quiero asegurarme de que sepan organizar sus carpetas de diseño, tal vez otros diseñadores lo hagan de manera diferente, pero creo que lo hago así. Entonces estas son las inspiraciones, PSD es la final, el PSD está con previsualizaciones, wireframes. También con previsualizaciones creo que olvidé la vista previa por aquí. Entonces el contenido del sitio, guía de estilo de la interfaz de usuario, inspiraciones y activos. Aquí hay una cosa más que puedes crear, tal vez puedas crear un documento de especificaciones, tal vez una carpeta de especificaciones para tus desarrolladores. Ahora en esta carpeta nos vamos a quedar con el documento de línea roja, déjame mostrarte el documento de línea roja. Copiemos esto desde aquí y lo voy a pegar. Entonces ese es nuestro documento de línea roja, lo vamos a compartir en otra carpeta, como se puede ver por aquí hemos mostrado las distancias y los tamaños de nuestros botones y todas las demás cosas diferentes. Entonces estas son las especificaciones de distancias y tal vez podamos mover nuestra guía de estilo de UI a la especificación así. Creo que eso es todo, así se puede conseguir bueno en la organización de carpetas para sus proyectos de diseño. Entonces pasemos a la siguiente lección. 6. Organizar las capas y grupos de PSD: En esta lección, voy a hablar de organizar tus capas de Photoshop en grupos y cómo las vas a nombrar correctamente, que tus desarrolladores u otros miembros del equipo u otros diseñadores, siempre que abran tu archivo PSD, saben lo que significa esta carpeta o este grupo o esta convención de nomenclatura significa. Empecemos. Ahora puedes ver a la derecha en mi panel de capas, déjame solo hacerlo un poco más grande. Voy a aumentar el tamaño de la miniatura ahora mismo. Ahora bien, si miras esto en el panel de capas, puedes ver en la parte superior, estas son básicamente las especificaciones anotadas por Ink. Voy a nombrarlo especificaciones, algo así. Para que los desarrolladores sepan que estas son las especificaciones. Puedes esconderlos o puedes mostrarlos. Se puede ver por aquí en las líneas rojas por aquí, si trato de ocultarlas, puede ver que están escondidas y mostradas. Entonces estas son las especificaciones. Entonces el siguiente va a ser Grid. Hay dos rejillas, vertical y horizontal. Se puede ver esta es la cuadrícula de columnas, se puede ver por aquí, 1200 píxeles de ancho y esta es la cuadrícula vertical. Es mejor que los llames como cuadrícula vertical de 8 puntos, algo así. También puedes usar algo así como 1200 píxeles, 10 píxeles, margen, con el canalón de 30 píxeles. Por lo que el desarrollador sabe que este es el sistema de cuadrícula que has utilizado. Ahora avanzando, se puede ver que tenemos cabecera en la parte superior, entonces tenemos, si traté de ocultarlo, se puede ver toda esta área de héroes y área de cabecera está oculta. Dentro de ese encabezado, tengo uno, que se llama el contenido. Para que puedas ver todo mi texto y botones están en este contenido. Si vas a esta navegación y logo, es una sección superior, entonces este fondo de video, está en otro grupo. También puedes mover esta capa a la capa de fondo de video así. Es un área de video de una cuadra por aquí. Es así como vas a alinear y organizar todo tu contenido dentro de diferentes carpetas y diferentes secciones. Entonces tenemos la siguiente sección, que es este proceso sobre hitos de cada proyecto que tomamos, sección 1. Ahora si haces click en cualquier icono, puedes ver por aquí, tengo esta carpeta llamada pasos. Todos los cuatro pasos están dentro de esto y tienen sus carpetas separadas con sus iconos, como puedes ver, paso 1-icon. Por lo que la mayoría de las veces los desarrolladores usan convenciones de nomenclatura con guiones o guiones bajos. Por lo tanto, intenta usarlos, usa letras minúsculas, paso 1 icono, o paso 2 icono, paso 1 icono o paso 2 icono, paso 3 icono. Se puede ver por aquí. Lo mismo va a ser para los botones. Entonces si hago clic en este botón, se puede ver que he nombrado todo este botón, btn-main. Básicamente btn es para botón y esto es principal. No te preocupes por esta capa, pero la mayoría de las veces tu carpeta debe ser nombrada correctamente, por lo que este es un grupo. Ahora, pasemos a unas cuantas cosas más. Ahora puedes ver al pie de página, tenemos este pie de página al final y puedes esconderlos o mostrarlos como quieras. Una cosa más a veces, tal vez a propósito, puedo hacer clic derecho aquí y darle algo de color a esto, como este es naranja o tal vez quiero darle un color rojo a este encabezado o tal vez quiero darle el color rojo a este grilla y sin color a todos ellos. Este color rojo significa que este es gradiente y está bloqueado y el desarrollador o cualquiera de los dos diseñadores que van a trabajar en él pueden saber instantáneamente que esta capa está básicamente bloqueada. También si quieres el fondo como este, puedes usar algo como esto o puedes agregar una nueva capa como esta, color sólido y usarlo para fondo, lo nombraré bg. Es fácil cambiar de color en cualquier momento. Puedo hacerlo gris o de cualquier color que me guste. Entonces así es como vas a organizar todo tu documento encabezado sección 1, sección 2, sección 3, sección 4, y pie de página. Para crear todas estas carpetas, tengo acción guardada por aquí, así que voy a mostrar eso en el siguiente video cuando vamos a empezar a diseñar estas. momento, el propósito principal de esta conferencia es que cómo vas a organizar tus capas para que los desarrolladores u otros diseñadores u otros miembros del equipo, puedan entender fácilmente lo que has diseñado. Ahora, pasemos a la siguiente lección. 7. Puso las convenciones de nombres con desarrolladores: Ahora tengo algunos consejos más sobre nombrar adecuadamente tus capas. Ahora si miras alguno de los elementos como estos botones o menús desplegables, lo que sea que se pueda hacer clic o tener alguna interacción sobre él, habrá dos o tres estados más para ello. Si tengo este botón se puede ver por aquí, tiene dos estados. Una es ésta, y otra es flotante o estado activo. Voy a nombrarlos muy apropiadamente. Igual es la historia con este botón obtener una cotización, tengo dos versiones de la misma. Uno es este botón fantasma. Cuando el usuario va a pasar el mouse sobre él, va a ser libre así. Ahora cuando vas a nombrar las capas de grupos de esa interacción vas a tener mucho cuidado. Ahora mismo, puedes ver aquí tengo button-quote-ghost. Entonces se va a llenar este botón y con un subrayado lo he declarado aquí, es flotar y estado activo. Por lo que va a ser flotante y estado activo para ambos estados, va a ser así. Ahora en dispositivos móviles, su mayoría no hay estado flotante porque el toque va a ser básicamente el estado activo. Cuando alguien intenta tocar el botón, cualquier botón de tu sitio web, en una pantalla móvil, no hay flotar en una pantalla móvil así que ten eso en cuenta. Si estás planeando alguna animación o algo o cualquier interacción, ajusta con el todo y una diferente para el activo, entonces estás en una posición equivocada. Así que piense con cuidado. Tu botón tendrá estados tanto activos como hover igual porque en dispositivos móviles no hay estado de desplazamiento Así que no puedes pasar el cursor sobre ningún icono o cualquier elemento en tu, cualquier botón en tu pantalla móvil. Ahora si miras este botón, voy a mostrar cómo lo cambié de nombre. Por lo que vas a agregar el estado activo de hover, y luego esta es la etapa simple. También puedes agregar el estado normal por aquí así normal al final solo para dejar claro que tus desarrolladores entienden que lo que va a ser. Así que asegúrate de que todos los iconos, aunque estos iconos tengan alguna interacción en el hover o algo así, vas a agregar otro grupo y renombrarlo según su estado. Esta es la cinta principal. Como se puede ver por aquí, este es básicamente el estado flotante o activo. Se puede ver que he mencionado por aquí diseñador destaca hover. Entonces este es el ítem resaltado o el usuario se está centrando en este momento por aquí. Entonces esta es la cinta que quería darte para nombrar tus capas y botones o desplegables que sean interactivos y nombrarlos adecuadamente para que tus desarrolladores sepan que esto va a ser un cambio de color o un cambio de estado. Ahora pasemos a la siguiente lección. 8. ¿Qué es un buen resumen de diseño?: Ahora, siempre que empieces algún proyecto de diseño, ya sea un diseño web o un diseño de logotipos o un diseño de aplicaciones, lo primero que vas a obtener de tu cliente es el resumen de diseño. Ahora, hay dos tipos de clientes. Uno que pueda crear un breve de diseño muy bonito y otros que sólo van a decir, necesitamos un sitio web. En ese caso, vas a obtener la información de tu cliente, que voy a cubrir en la siguiente lección. Ahora mismo, en esta lección les voy a mostrar ejemplos, ejemplos reales de más de tres o cuatro escritos de diseño y cuáles son los detalles que pueden obtener con ellos así que empecemos. Ahora, aquí está nuestro resumen de diseño del concurso de diseño web 99designs.com. He abierto este concurso que básicamente se está ejecutando en este momento, elegante sitio web para productos de crianza inteligente. Ahora bien, si vas a esta breve pestaña, he abierto esta. Son pocas las secciones a la misma. Información de antecedentes de esa organización. Después tenemos estilos visuales personalizados. Entonces tenemos detalles de contenido; cuál será el contenido de tu diseño o página, y lo que debes evitar. Entonces tenemos otra información como otras notas, puedes ver ahí están todos los diferentes adjuntos y logotipos y fotos de marca, imágenes que puedes ver por aquí. Estas son imágenes muy bonitas tomadas sobre fondo blanco. También hay entregables. Estos son básicamente para el concurso que los archivos finales estarán en este [inaudible] Ahora, hablemos de ellos uno por uno. La información de antecedentes será sobre ¿qué es la organización? ¿ Cuáles son su público objetivo, ya sea para padres de familia, si es para ancianos, si es para asesores de finanzas, o lo que sea. Es necesario leer todo esto detenidamente. Entonces, ¿cuál es la industria de esa organización? Ya sea una industria de la moda, industria de la tecnología, y entonces tenemos sitio web existente. La mayoría de las veces, normalmente, los escritos de diseño tienen sitios web existentes y necesitas rediseñar ese sitio web o necesitas crear uno mejor. Entonces tenemos este estilos visuales, así que aquí no hay nada especificado este cliente con estilo, pero hay muchos sitios web inspiradores. Desde estos sitios web inspiradores, vas a conseguir mucha pizarra de humor o puedes decir eso lo que realmente necesita tu cliente. Acerca de cada página web ha especificado que busca algo como esto. Entonces le gusta la limpieza de este sitio web. Entonces esto es de tendencia, de moda, proyecto limpio, imagen mínima del producto, elegante. Estos son los estilos que busca. Por cada sitio web o sitio de inspiración que te envía tu cliente, aunque le estés pidiendo un breve, entonces siempre menciones lo que le gusta de eso. No te limites a obtener dos o tres URL, URL de sitios web que no te van a ayudar en absoluto. Pregúntale a tu cliente, ¿qué te gusta de este sitio web? Cuál es la porción específica que te gusta de este sitio web. Toma eso en tu mente y toma capturas de pantalla de estos sitios web. Lo que hago es abrir estos sitios web inspiradores y tomo la captura de pantalla usando este plugin que tengo, este plugin de Firefox. Creo que se llama Disparo. No recuerdo su nombre, pero voy a compartir la URL para esto. Hay mucho bueno que pueden tomar capturas de pantalla también, a veces solo creo un archivo PDF de este breve y lo guardo en una carpeta. Pasemos a los detalles del contenido. Ahora, los detalles del contenido serán de qué se trata esta página y de qué se trata el contenido de esta página, los encabezados, y todo lo demás. Se puede ver que tiene menos descripción, pero tal vez en los archivos adjuntos se encuentre el contenido del discurso. Ahora bien, lo que hay que evitar son las cosas que hay que evitar. Ahora, aquí no ha especificado nada, pero he visto muchos otros escritos donde el desarrollador o el gerente del proyecto o el cliente, normalmente piden evitar esto o estas cosas. Ahora, en el otro, se puede ver que hay una gran cantidad de activos de diseño en el archivo adjunto. Además, el cliente te ha dicho el tema de tu diseño, esto es muy importante. Deben ser dos o tres palabras como elegante, lúdico, inteligente, creativo, de clase alta, de moda y premium. Estos son los temas o tendencias de diseño que vas a buscar. Estas son todas las imágenes del producto, descárgalas y guárdalas en la carpeta de activos de la que te hablé. Es así como vas a interpretar cualquier breve de diseño. Es necesario buscar cuáles son los temas que busca. De moda, de clase alta, creativa, juguetona, inteligente. Se puede ver que tiene un toque de bolsa de pañales premium o lo que sea. Permítanme mostrarles otro ejemplo. Ahora, aquí hay otro ejemplo que guardé. Podría ser un viejo proyecto de 99designs. Nombre de la organización, descripción de la organización, y su público objetivo. Esto es muy importante. Necesitas preguntar a cualquiera de tu cliente, si tu cliente no te da ningún resumen de diseño, puedes crear un documento de Word o cualquier pregunta, contestar PDF, y asegurarte de que tu cliente responda a todas estas preguntas, así que haz un en base a esto. Voy a compartir la plantilla contigo, así que no te preocupes por ello, puedes descargarla desde aquí. Ahora, se puede ver industria, sitio web existente, número de páginas, descripción de página, estilo, idea temática, qué evitar. puede ver que este cliente ha dado muy menos información por lo que no es un muy buen resumen de diseño, pero creo que puede funcionar con este inspirador webs; se puede ver que el cliente menciona lo que le gusta de este sitio web. Hay otras notas, sistema de gestión de contenidos, y el apego de su logotipo. Asegúrate de que cada vez que recibas un informe de diseño de tu cliente, necesitas obtener las pautas de diseño o el logotipo o branding de esa empresa. Se puede ver aquí ya tiene algún sitio web, por lo que es necesario rediseñarlo. Se puede obtener el logotipo a partir de ahí. Pero es mejor que obtienes el logotipo en formato Adobe Illustrator o alguna imagen transparente formato PNG. Déjame mostrarte otro ejemplo, este es un breve muy detallado sobre un sitio web, TraderPlaza, podrías haber visto mi diseño en [inaudible] para este sitio web. Ahora, se puede ver que es una muy larga. Es necesario leerlo con mucho cuidado. Se puede ver que ha mostrado información importante, objetivo primario de la página principal, estilos visuales. También ha destacado algo en rojo. Entonces tienen algunos sitios web inspiradores listados por aquí; también las cosas que les gustan de ello, detalles de contenido. Es muy específico en detalles de contenido. Se puede ver la navegación superior de izquierda a derecha, logotipo, dos enlaces, y menú desplegable de idioma. Tiene un contenido muy específico. Puedes ver por aquí, incluso muestra lo que vas a escribir en el encabezado 1 y el encabezamiento 2 en tu área de imagen de encabezado. Se pueden ver otras cosas que quieran en el formulario y otros contenidos. Permítanme mostrarles otro ejemplo. Esta es la aplicación Web. Se llama Ripenn, por lo que el diseño de la página de inicio de la aplicación. Hay objetivos de UX. Cuáles son los principales objetivos, cuáles van a lograr los usuarios con este diseño o con esta app. Estos son los activos de diseño necesarios. Después tienen la nueva página de inicio. Han explicado todo lo que se necesita en esa aplicación web. Entonces esta porción Nueva Semilla y ahí está esta porción Página Stream, Stream Page Count. Si tienes algo como esto de alguna aplicación web, necesitas entender cómo funciona. Es el propósito de este diseño, de lo contrario, necesitarías hacer preguntas a tus clientes que de qué se trata. En ocasiones con los escritos de diseño, lo que vas a conseguir, vas a obtener estas previsualizaciones predeterminadas de las páginas que necesitas rediseñar, algo así por lo que necesitas mantenerlas contigo. Todo esto se trata de calzoncillos de diseño y cómo los vas a interpretar. Si tus clientes no te han dado ningún resumen de diseño o elementos de diseño o recursos de diseño como su logotipo, sus imágenes de producto, este es el momento en que vas a obtenerlos de tu cliente. Este es el primer paso. Espero que ahora entiendas mucho sobre los calzoncillos de diseño y cuáles son sus formatos. Pasemos a la siguiente lección. 9. Cómo obtener ideas iniciales y bocetos temprano: La tarea más difícil para cualquier diseñador es meterse dentro de la cabeza de sus clientes. Esta es la tarea más difícil. Ahora, la mejor manera de meterse dentro de la cabeza de su cliente, y lo que realmente necesitan sus clientes es dejarles bosquejar sus propias ideas. Dales un poco de papel. Si puedes acudir a tus clientes, dales algo de papel y deja que dibujen lo que necesitas, lo que quieres en el encabezado y la primera sección de tu sitio web, segunda sección, tercera sección y el pie de página. Esto te va a ayudar lo que hacer y no hacer de tu wireframe o de tu diseño web. Ahora bien, no te concentres demasiado en estos diseños o en estos bocetos de tus clientes. Los vas a mejorar más adelante. Permítanme mostrarles algunos de los ejemplos de bocetos de clientes. Ahora, aquí están viendo uno de los bocetos del cliente. puede ver que pueden ser muy ásperas y no tienen demasiados detalles. Asegúrate de que sea lo que escribas tu cliente, debe ser legible para que luego puedas ver lo que tus clientes realmente escribieron al respecto, porque a veces vas a olvidar lo que discutiste con tu cliente o qué es. Si estás en un sitio remoto y los recibiste de tu correo electrónico, entonces te vas a meter en problemas si no puedes leer su letra. Ahora, permítanme mostrarles algunos ejemplos más. Aquí te damos algunos ejemplos más. Se puede ver el medio y el izquierdo. Estos son de algunos de mis clientes, y se puede ver que el medio tiene un problema muy grande de eso no lo puedo leer muy bien. Levantando tu, ¿cuál es esta palabra? Marcar. Creo que tarjeta de puntuación de crédito, puedes ahorrar esto tanto en tu vida. Entonces esto es muy engorroso. No puedo leer lo que está escrito aquí. Este es un muy mal ejemplo, así que asegúrate de que tu cliente escriba algo muy legible y legible. Puedes leerlo fácilmente y entenderlo. Del lado izquierdo, de nuevo, el mismo problema es que hay cosas que puedo entender, pero la calidad de imagen es muy baja. También, se pueden ver estas notaciones, no puedo leer lo que está escrito aquí. Mensaje de batería o no sé qué es. Entonces conseguí este nivel 1, nivel 2, nivel 3, nivel 4, pero no sé cuáles son las anotaciones aquí. ¿ Qué es esta barra de boceto o lo que sea? Por lo que estos son los problemas que puedes obtener con estos bocetos de clientes. Así que ten en cuenta, asegúrate de convencer a tu cliente de que por favor dibuja o escribe cosas legibles como puedes ver aquí en el ejemplo correcto. Se trata de una imagen ampliada de algún boceto de cliente, pero creo que es muy legible. Lo obtuve de algún sitio web en línea, lo busqué en Google, así que no es mío. Entonces este es el video y esta es la caja de pensamiento o lo que sea. Entonces tenemos planes, ayuda por aquí. Entonces esto es muy conciso y muy bien escrito. Puedes leerlo fácilmente. Por lo que sus bocetos de cliente deben ser de esta manera. También puedes ayudar a tu cliente, tal vez mostrarles algunos ejemplos, enviarles algunos ejemplos de los bocetos y dejarles dibujar los suyos propios. De esta manera saben que este es el resultado final que van a obtener. Ahora, una vez que obtengas todos los bocetos, el siguiente paso se mostrará en el siguiente video. Entonces pasemos al siguiente video. 10. Preguntas para hacerle a tu cliente antes de cada proyecto de diseño web: Ahora en esta etapa, ya tenemos los bocetos de nuestro cliente. Ahora es el momento en que salgamos adelante y obtenemos algo más de información sobre el diseño y el proyecto que vas a hacer por tu cliente. Hay dos conjunto de preguntas que voy a hacer. Una es sobre el propio negocio y sus competidores, y la segunda será sobre sus usuarios finales o clientes. Ahora las preguntas sobre su negocio, el negocio de su cliente. El primero es ¿cómo describes tú mismo tu negocio? Si se trata de una sola persona o personalidad, si estoy creando un sitio web sobre alguna figura social o alguna personalidad social, entonces se estarán describiendo que soy experta entusiasta o tal vez soy un deporte experto o soy blogger o algo así. Pero si es un negocio, entonces lo van a describir como hacemos esto con este tipo de ventas y nuestras ventas mensuales es esta. Entonces todo sobre su negocio, ya sea que estén vendiendo algo cercano o algo así. El segundo es, ¿cuál es el objetivo principal de tu página web? Esto es muy importante. Tu cliente debe pensar en un solo gol aquí. Esto demostrará que cuál es el objetivo de tu diseño. Te vas a sacar una buena idea de esta respuesta. Ahora la tercera es, ¿qué problema quieres resolver con este diseño? Esto es muy crucial. Ahora necesitas saber a qué problema se enfrenta tu cliente. Este es el punto básico donde quieres pegarle realmente duro para conseguir algo de buen dinero. Ahora lo que sea que escriban por aquí, esto va a ser muy bueno para ti. El cuarto es, quiénes son tus competidores, y agrega los enlaces del sitio web. Esto es realmente crucial. Es necesario ver qué están haciendo los competidores, qué tan bien está vendiendo su negocio, ¿cuál es la estructura de sus sitios web? ¿ De qué colores están usando? ¿ Cómo han trazado sus páginas de aprendizaje, cuáles son los encabezamientos o desencadenadores de conversión que están utilizando por ahí? Hay mucha información que puedes obtener de los competidores. Entonces tenemos la última pregunta que es, ¿tienes el contenido listo para tu página web? Se trata de su cliente y su sitio web. Necesitas tener listo el logotipo y el contenido de texto antes de empezar a diseñar. De lo contrario, va a doler mucho al final. A veces cuando tienes el texto, y si no tienes el texto, toda tu estructura de tu diseño se puede cambiar. Al igual que si vas a poner cuatro o cinco líneas en el área de cabecera o héroe de tu sitio web, y cuando tu cliente te da el contenido real, te da una o dos líneas. Por lo que realmente va a cambiar tu diseño. Necesitas rediseñarlo o recambiarlo o alterarlo mucho. Obtén el logo y las pautas de marca. Si tienen algunas pautas de marca, cómo usar su logotipo o las cosas y el contenido del texto, o el contenido de su página, como imágenes, encabezados de texto, todo. Por lo que necesitas tener esto listo antes de entrar en el diseño. Ahora el segundo conjunto de preguntas son sobre los usuarios y clientes. La primera pregunta será, ¿qué son demográficos de sus clientes o usuarios? ¿ Cuál es su edad? ¿ Cuál es su rango salarial o tal vez cuál es su autenticidad? Ya sean mujer joven o ancianos o algo así. Desencadena eso, vas a apuntar tu diseño hacia la mujer, y cuál puede ser tu esquema de color podría cambiar en esta información. Demográfica puede cambiar su diseño y forma de su diseño. Ahora la séptima pregunta es, ¿qué impresión quieres dar a tus usuarios cuando vean tu sitio web por primera vez? Esto es realmente importante. Estas son las directrices de diseño o las palabras clave de diseño. Yo las llamo palabras clave de diseño como el sitio debe ser confiable, o tal vez debería mostrar algo de diversión o creatividad, o tal vez sea muy serio o audaz. Entonces estos son los temas. Realmente te van a ayudar a decidir tu tipografía, tus fuentes, tal vez tus colores, tal vez la redondez de tus botones. Ahora la octava y última pregunta, ¿qué información buscarán sus usuarios en su página web? Esto es realmente importante. Ya sea que estén buscando cupones de descuento o que estén buscando la mejor oferta, o si quieren descargar algún PDF o el registro de agua o quieren suscribirse. Esta es la principal función de su sitio web. Con esto finaliza este cuestionario. Voy a compartir este cuestionario con ustedes en el formato PDF y el formato de palabra. Puedes dárselo a tus clientes y usarlo como quieras. Si quieres agregarle más preguntas, puedes agregar más preguntas. Pero esta es la forma en que vas a obtener buena información antes de comenzar tu diseño. Entonces pasemos a la siguiente lección. 11. Uso de la plantilla de reunir contenido para el contenido de la sitio web: Ahora déjame mostrarte cómo quieres que el contenido de tu cliente esté en el formato. Déjame mostrarte el formato que uso para que mi cliente llene su contenido. Por lo que aquí tenemos la navegación superior y tiene enlaces a nuestra marca lift, Casos prácticos, Contáctanos, Consigue una Cotización. Entonces si tienen algo que necesitan especificar como dos o no, pueden especificar en rojo en la siguiente línea. Después tenemos el titular, después tenemos el subtitular, el primer párrafo y después tenemos, se puede ver por aquí los botones. Es así como vas a diseñar todo, Sección 1. Entonces esto es realmente importante. Todo debe estar en diferentes secciones. Se puede ver que este fue nuestro encabezado de navegación y titulares. Después tenemos la sección uno, tenemos hitos. Este es nuestro rubro principal, y este es nuestro subtítulo. Se puede ver que esta es una notación que estoy usando. Esta primera línea, luego hay dos guiones para la segunda línea que va a ser subtitular. También puedes usar el mismo formato o lo mismo como esto, y otra vez, pero me gusta simple. Aquí tenemos los pasos de proceso uno, dos, tres, cuatro, sus detalles. Después tenemos la Sección 2, después tenemos la Sección 3. Nuestro equipo principal es especial, estamos bolsa llena de magos digitales, imágenes con títulos por aquí. Este es básicamente el documento que va a dar forma a nuestro diseño. Este es todo el contenido escrito, podrías tener mucho, pero ahora mismo, este es el que utilicé para mi diseño W Studio, que vas a hacer en el futuro. Esta es la sección para o también puedes llamarla aquí pie de página, algo así. Déjenos para ustedes listos para darle un paso más allá. Entonces este es el botón, consulta por teléfono o dinos qué quieres. Enlaces sociales, oficina de lujo, dirección de nuestra oficina, correo electrónico y número de teléfono. Es así como quieres obtener todo el contenido de tu cliente. Aparte de esto, también necesitas logotipos y las imágenes que has usado como esta imagen que usé, esta es básicamente la imagen de stock, pero quieres las imágenes de los miembros del equipo originales de tu sitio web o de sus clientes o lo que tengan. Entonces consigue las imágenes, el logotipo, antes de empezar a diseñar. Este es el contenido que necesitas obtener de tu cliente. Si tienen imágenes de producto, te van a dar las imágenes del producto. Un consejo más es que a veces esas imágenes de producto podrían necesitar algún retoque o necesitan hacerse alguna edición. Entonces puedes cobrar extra por eso, pero ahora mismo, tengo estas imágenes las cuales ya están editadas y están sobre el fondo blanco, así que no necesito edición. Tenga esto en cuenta, a veces podría cambiar el plazo o la hora del proyecto. Si consigues el contenido, puedes informar a tu cliente que ahora te van a llevar unos días más extra porque necesito editar todas estas imágenes que me diste porque están sobre un fondo rojo o algo así. Ten en cuenta todas estas cosas, usa esta plantilla. Voy a compartir esta plantilla contigo. Entonces pasemos a la siguiente lección. 12. Tableros de colores para el diseño web: hoy voy a hablar de Mood-Boards. Ahora bien, ¿por qué son importantes las tablas de humor en cualquier proyecto de diseño? Porque van a dar forma a la dirección o equipo o estilo de ese proyecto. Los tableros de humor son solo una colección de pocas imágenes, textos o recortes o incluso diferentes capturas de pantalla de diferentes porciones de sitios web, incluso imágenes de retratos de diferentes modelos o algo así, o incluso cualquier fotografía fuera. Aunque hayas sacado alguna foto de tu aula o algo así solo para conseguir la idea o tema de estilo de ese diseño. Podrían ser colores, familias de fuentes o tipos o textos que te gusten, aunque te gusten algunos iconos de algún sitio web, solo recortas eso. Esto es básicamente para establecer tu tema y estilo de tu diseño. Ahora, he usado esta herramienta en línea se llama N-I-I-C-E.C-O, niice.co. Es realmente genial. Crea un tablero de humor, tablero de humor en línea. Existen diferentes estilos entre los que puedes elegir. Hay diferentes estilos y opciones, puedes subir tu logo y otras cosas así no necesito tanto. Simplemente cambio el título y el subtítulo, y también hay opciones que puedes exportar. En la cuenta libre, me quedan tres exportaciones. Puedo exportarlo como PDF, y también archivo Zip para todas las imágenes. También puedo compartir esto con el enlace de descarga de correo electrónico, enlace privado, contraseña Dropbox, para que puedas compartirlo con cualquiera o puedes exportarlo y enviárselo a cualquiera. El principal es que también puedes agregar gente a este tablero, puedes agregar tus equipos de desarrolladores u otro diseñador con el que estés trabajando puedes agregarlo por aquí. Ahora, el propósito principal es que vas a establecer el tema de tu diseño. Se puede ver en este diseño, voy a usar alguna fuente como esta. Entonces necesito una fuente muy audaz, muy gruesa, muy curva y audaz y sans-serif como ésta, me gusta ésta. Entonces también me gusta este, estos son los iconos que me gustaron. Me gustaron dos iconos de colores, iconos de línea. Podría ser una buena inspiración para nuestras características o área de pasos de proceso de pasos. También, puedes ver aquí tenemos otra muestra para texto o tipografía. Entonces se puede ver por aquí, otra vez, tenemos estilo, colores, tipografía, se pueden ver los grises, los usos de grises y morados lo tomé de aquí. Entonces tenemos otra inspiración que he recogido por aquí, puedes ver esta Experiencias de usuario Inspiradas en las personas. Este párrafo, este botón, se puede ver la sombra, los colores, las luces a su alrededor, podemos ampliarlo, ampliarlo así. Por lo que se puede ver con claridad. Puedes alt u opción-click sobre esto para reducir el tamaño. Estas son diferentes imágenes que coleccioné o los clips de texto, o diferentes capturas de pantalla que coleccioné para obtener el tema y la dirección de nuestro diseño. Si miras a éste puedes ver cómo se recorta esta imagen dentro de esta caja en la parte inferior. Esta es la idea que tomé de esta zona, esta inspiración- board y la usé en nuestra sección de equipo, donde he mostrado las imágenes de nuestro equipo de pie. Estas son todas las cosas y temas, y colores e ideas de texto y topografía, incluso las ideas de maquetación. Usé algunas de las ideas de diseño de estos. Además, se puede ver esta imagen tener superposición de negro. Tan superposición muy negra y superposición gris-negro, me gustó. Usé una superposición morada, similar a ésta. También la disposición del contenido por aquí, me gusta mucho. Aquí tenemos la dirección, aquí tenemos nuestros vínculos sociales. Esta es la mejor manera de crear tu equipo de diseño. Otros también pueden agregar imágenes o algo así por aquí. Si hace clic en este “Signo Plus”, puede subir imágenes, puede agregar un video, puede agregar texto, y puede agregar subtableros si tiene múltiples tableros, como dos o tres. Ahora mismo, realmente no necesito más que estos pocos. Me gustan mucho estos y necesito sólo estos dos, inicia mi diseño. Incluso si puedes agregar tu logo por aquí, si ya está diseñado, puedes agregarlo por aquí, que puedan combinar el estilo con todos estos. Eso es todo de humor-boards. Si estás diseñando sin una pizarra de humor, te falta algo. Puedes crear pizarras de humor en línea o puedes tener solo una carpeta con llena de todas estas imágenes para obtener la inspiración. Normalmente, creo una carpeta en mi disco duro. Utilizo esta herramienta puede ser hace unos días, me gustó mucho. Pero aún así, preferiré mi propio disco duro si estoy trabajando solo. Si estás trabajando en equipo, esta herramienta es una bendición. Hay versión gratuita y también una versión pro, ahora mismo estoy usando versión gratuita y eso es suficiente para mí. Todo esto se trata de los tableros de humor. Pasemos a la siguiente lección. 13. Fase de Ideación (al menos 3 diseños): El primer paso en cualquier tipo de diseño es la ideación. Ahora, la ideación significa que vas a sacar algunos bocetos ásperos de tu idea y ponerlo en el papel muy rápidamente. Al menos, supongo que necesitas al menos tres diseños. En primer lugar, comienza con primer diseño y luego otro. A lo mejor puedes sumar hasta tal vez seis diseños así. En ocasiones, los equipos de diseño, llegan con más de 20 o tal vez 30 diseños o bocetos diferentes en esta fase de ideación. Aquí puedes ver, tengo los bocetos iniciales, cuatro bocetos diferentes, cuatro diseños diferentes para la misma página que diseñamos. Ahora, en el lado izquierdo, si se puede ver por aquí, tenemos logo en el lado izquierdo y navegación y el botón por aquí. Algo que debes tener en cuenta que en tu fase de ideación o en esta sección, no vas a usar ninguna palabra. Se puede ver por aquí, los botones son solo cajas planas llenas con el marcador negro o tinta, y las líneas aquí son sólo las líneas onduladas para el texto de aquí. Esto es sólo un video que esta aquí, será algún video por aquí. Entonces estos son cuatro iconos, se puede ver por aquí. Entonces de nuevo, el texto agita cuatro textos. Entonces estas son algunas imágenes o retratos de equipos. Este es solo el diseño. Se puede ver por aquí, solo estoy colocando mi contenido en esta página muy rápidamente. Ahora, este es el diseño central para el encabezado superior. Ahora, en esta sección, se puede ver por aquí, cambié totalmente el diseño. Estoy colocando el video por aquí y texto y botón por aquí. Entonces los cuatro pasos, los estoy usando en paso icono o imagen por aquí, detalles por aquí. Icono de paso por aquí, detalles por aquí. Así es como estoy cambiando el diseño de la primera iteración por aquí. Entonces puedes ver en esta sección para nuestro equipo, puedes ver las imágenes están totalmente cambiadas. Aquí, teníamos formas ovaladas, y [inaudibles] sobre el [inaudible] ahora que tenemos la mitad del cuerpo de la imagen o la mitad del cuerpo de nuestro equipo. Entonces en la parte inferior, se puede ver tengo un mapa y ubicación. También podemos agregar el número de teléfono por aquí. Entonces del lado derecho, tengo un formulario para contactar o tal vez iniciar un formulario de cotización. Entonces al fondo, tengo pocas líneas por aquí y enlaces sociales. Todo por aquí se ilustra de la manera más sencilla. No vas a elaborar por aquí la anotación y elaboración va a estar en la fase wireframe. Por lo que una vez que vas a decidir a partir de todas estas cuatro opciones o cinco opciones o seis opciones, vas a finalizar una de ellas y vas a acumular alambrada en ella. Aquí se puede ver, tenemos otro layout. En realidad he mezclado dos páginas. Entonces traté de ponerlo por aquí, pero se puede ver que la sección 3 está un poco desalineada porque usé la siguiente página. Se puede ver por aquí. Ahora, aquí, tenemos otro layout. Aquí, tenemos dos videos por aquí, y tenemos nuestro texto y botón por aquí. Además, se puede ver a lo largo del video, tenemos algún texto o tal vez algún testimonial de nuestro cliente, entonces tenemos área totalmente diferente por aquí 1, 2, 3 es el proceso y aquí estoy mostrando a los miembros de mi equipo quienes son los responsables de esto paso. Entonces nosotros, de nuevo, tenemos algunas imágenes de miembros del equipo o tal vez creo que estos son pocos más testimonios de clientes junto con el proceso o tal vez podamos tener uno o dos. Entonces esta es la idea que utilicé en el diseño final. Teníamos dos testimonios de clientes por aquí. Ahora, se puede ver en el último, este trazado históricamente centralizado uno y dos, y esto es casi lo mismo aquí. Este es totalmente diferente para el Mapa de Pie de Página y Formulario de Contacto. Entonces éste es totalmente diferente. Tenemos botón y texto por aquí, y tenemos pujas recientes o algo nuevo por aquí que quizá sea tuits recientes o algo así, o enlaces de proyectos recientes. Entonces tenemos esta barra social por aquí y tenemos pocos enlaces y textos por aquí. Es así como vas a diseñar pocas ideas de ideas iniciales y bocetos de tu diseño. Esta es también una fase en el diseño de la experiencia del usuario. Entonces creo que vamos a tocar algunas de las fases del diseño de la experiencia del usuario en este curso. Creo que eso se trata mucho de ideación. Ahora, pasemos a la fase de wireframing. 14. Introducción a los maquetas de Balsamiq: Ahora vamos a utilizar Balsamiq Mockups para diseñar nuestra maqueta para este ejercicio, para este diseño. Es básicamente un siguiente paso de nuestra fase de ideación. Ahora voy a usar Mockups Balsamiq. Te voy a dar algo de la introducción de este software. Es muy fácil de usar, así que no te preocupes por ello. Puedes descargar su versión de prueba por 30 días. Además, si puedes comprarlo, creo que vale la pena si dibujas muchos wireframes. Si no quieres comprarlo, entonces puedes usar incluso Photoshop. Podrás descargar estos kits para kits de wireframing. Se puede ver por aquí, hay muchos, puede ver, o se puede crear uno propio. Eso no es un problema muy grande. Ahora bien, el beneficio de usar Balsamiq es que utiliza un estilo muy bocoso. Por lo que usuario final, nuestros clientes, si les presentas tu wireframe, no se van a confundir que este es el diseño final. El segundo beneficio es que tiene muchas extensiones. Se puede ver, se pueden cargar muchas otras maquetas de diseño como se puede ver por aquí. Existen diferentes bibliotecas para apoyar el diseño de iOS o el diseño de Android. Incluso se puede ver, bueno, Plantillas Apple Watch. Entonces tenemos muchas plantillas geniales como esta, Bootstrap. Si tus desarrolladores están usando Bootstrap, entonces puedes seguir adelante directamente y wireframe todo tu diseño usando esta biblioteca bootstrap. Además, hay plantillas para UX Design. No los necesitamos en este momento, Casos de Uso y otros proyectos. Por lo que hay mucha biblioteca de símbolos grandes que es libre de usar. Puedes cargarlo. Te voy a mostrar cómo vamos a cargarlo. Estos son básicamente archivos BML. Puedes ver, o si haces clic con el botón derecho en “Descargar BMML”. Si haces click aquí, Descarga BMML, vas a descargar este archivo y nos vamos a cargar en nuestro Balsamiq Mockup para cargar esto. Ahora, vamos a cambiar a la ventana de Balsamiq Mockups, y sólo voy a darte la visión general de cómo usar esa app. Aquí está la pantalla de Balsamiq Mockups. Se puede ver por aquí, aquí tenemos nueva herramienta de proyecto Balsamiq. Puede hacer doble clic y cambiar el nombre a Wstudio. Voy a renombrarlo. Por el lado izquierdo, puedes ver aquí están nuestras maquetas. Podría haber uno, dos, tres, o cuatro alambres. Depende de ti. Entonces del lado derecho, tenemos información del proyecto. Si quieres hacer clic y describir algo por aquí, puedes dar alguna información a tus diseñadores o lo que sea, tus desarrolladores, a otros miembros del equipo. Después hay dos más, boceto, y se puede ver por aquí, modo de boceto es algo así. Tenemos este iPhone por aquí, por lo que se puede ver que es un poco incómodo. No es perfectamente redondo. Si cambio a wireframe, se puede ver que ha cambiado de forma. Es un look un poco más preciso. Entonces te toca a ti cuál quieres usar. Es un poco más limpio. No importa cuál utilices. Voy a, ahora mismo, eliminar esto. Entonces vamos a renombrar esto a Landing page. Esta es nuestra página de aterrizaje. Voy a familiarizarte con esta interfaz ahora mismo. No voy a crear nada por aquí. Ahora, en la parte superior, se puede ver por aquí, tenemos Todos los Activos. Los activos son básicamente los archivos que puedes importar. Por ejemplo, si quieres usar alguna imagen en tus maquetas, puedes importarlas por aquí, yendo a este Proyecto, Importar, Activos. De la misma manera, se pueden importar las bibliotecas de símbolos BMML. Tengo este iosControls.bmml. Puedo seleccionar este archivo y abrirlo, y va a ser Biblioteca de Símbolos, puedes ver por aquí. Donde lo puedo encontrar, si voy a este símbolos suizos, puedes ver que he cargado muchas rejillas bootstrap, esta alerta iOS7, pero como puedes ver por aquí. Se trata de controles IOS7. Se puede ver que estos son algunos de control de toggle. Estos son los controles que no estaban por defecto, presentes en este software y los cargé desde esto. Ahora, déjame mostrarte qué otros controles tiene. Se puede ir a Activos, se puede ir a Big donde tenemos gráficos, e imágenes, y pocas otras cosas. Entonces puedes ir a Botones. Hay muchos botones, interruptores de encendido y apagado, botones numéricos de paso, y muchos otros controles. También puedes ir a común. Hay icono, nombre de icono, imágenes, enlaces, etiquetas. Además, puedes ir a Contenedores, donde vamos a utilizar esta ventana del navegador. Puedes ver por aquí para nuestro diseño de estructura alámbrica, formularios de fondo para control de formularios, iconos. Tenemos una biblioteca completa de iconos Font Awesome por aquí. Después tenemos controles de iOS. Se puede ver por aquí. Después tenemos controles de diseño como conjunto de campos, barras de botones, acordeones, sitemaps, barras de tareas. Después tenemos Mockup. Cuáles son los comandos que vamos a dar. A lo mejor del costado de cualquier porción de una alambrada. Después tenemos medios donde tenemos imágenes, webcam, reproductor de video. Entonces si no puedes encontrar ningún símbolo simplemente escribe aquí como bu. Voy a escribir para botones, y se puede ver que hay muchos botones. botón, botón, barra, botón círculo, botones multilínea, botón puntiagudos. También hay algunos iconos empezando por B. Así que si escribo bug, puede ver por aquí, tenemos ícono por aquí, que es un bug. Es así como se utiliza esta adición rápida. Esta es una herramienta muy útil por aquí. Además, si vas a símbolo, estos son los símbolos que he cargado. Descargué el archivo BML, e importé pocas bibliotecas BML como controles Bootstrap e iOS7 por aquí. Ahora, también, se puede ir a textos cuando se tiene que escribir algún encabezado, o etiqueta, o algo así. Por lo que estos son todos los textos importaciones, pan rallado, bloque de texto. Puedes usar algo como esto si no hay contenido o quieres una idea muy esbozada de tu diseño. Esta es toda la introducción de tu interfaz Balsamiq Mockup. Puedes añadir nuevos maquetas por aquí. Puedes duplicar este haciendo clic derecho aquí en esta flecha, renombrarlo duplicado. También puedes crear versiones alternas para la misma maqueta o alambres que estás diseñando. También, hay más controles. Ya puedes ver si trato de crear algo, déjame solo poner unas cosas por aquí. Tengo esto y tengo esta imagen, y quiero alinearlos. Si no está alineado, voy a seleccionar a ambos con Shift. Si no ves nada por aquí, puedes hacer clic en este, Panel de Información. Estos son los controles para alinearlos. Puedo alinearlos en el medio, o puedo alinearlos a la izquierda, o puedo alinearlos así, en el centro vertical. Es así como lo alineamos. Si lo vamos a alinear frente a un contenedor, como tengo esta ventana del navegador, así que lo voy a mover hacia atrás haciendo clic derecho y Enviar a Atrás. Por ejemplo, algo como esto y voy a hacer clic derecho y bloquearlo. Por lo que no se va a mover a ninguna parte. No lo desbloqueemos y los voy a mover a los dos. Crea un grupo, Control G o Comando G para crear un grupo, y voy a mover este grupo con esto, así que lo voy a alinear así. Además, si arrastras algo como esto, puedes ver aquí tenemos guía inteligente. Demuestra que es el medio. Es la esquina izquierda por aquí, algo así. Si hacemos click por aquí, puedes ver, también puedes poner algunas barras de desplazamiento por aquí. Cambia el fondo. Todo sobre este control, las propiedades de cualquier control van a estar por aquí; tamaño, posición, estratificación, extra, etc, etc. Hay pocos controles como creo Copy Paste, quizá Group, Ungroup. No he usado nada desde aquí. Simplemente uso mi teclado porque son atajos de teclas muy autoexplicativos. Puedes encerrar por aquí. En su mayoría, lo que hago es bloquear esta pantalla del navegador para que no se mueva y coloque mis objetos con respecto a esto. Es así como vamos a utilizar este Balsamiq Mockups. Es muy fácil de usar. Creo que he explicado mucho. Una vez que empieces a explorarlo, te va a encantar de verdad esta herramienta. Pasemos a la siguiente lección donde realmente vamos a diseñar nuestro modelo de alambres. 15. La maquetas de Balsamiq parte 1: En esta lección, vamos a diseñar este wireframe para nuestro proyecto de diseño web W studio y vamos a usar maquetas Balsamiq. He dado alguna introducción, y durante esta lección les voy a mostrar algunas de las teclas de acceso directo que voy a usar mucho tiempo. Empecemos. Vamos a crear un nuevo proyecto, o vamos a abrir un proyecto que guardamos la última vez. Este es nuestro estudio W, solo está vacío y hemos creado una maqueta. Si no tienes maqueta por aquí, puedes hacer clic en este signo Plus y crear una nueva maqueta por aquí o Control N o Comando N para una nueva maqueta. Ahora, lo primero que vamos a hacer es que vamos a conseguir algún contenedor por aquí, que va a ser nuestro navegador. Nuestra ventana del navegador, hagámosla un poco más ancha por lo menos 900 píxeles o tal vez un poco más de 900. Así. También, vamos a ampliarlo un poco más, tal vez 1,500 o algo así por aquí. Creo que ya es suficiente. Si queremos ampliarlo más, vamos a ampliarlo más. Ahora vamos a hacer clic derecho en él y vamos a bloquear este navegador web. Ahora, nuestra página web base de navegador web está fija por aquí. Lo primero que vamos a conseguir son los medios de comunicación, que van a ser nuestra imagen o logotipo por aquí. También puedes usar este o éste, te toca. Voy a usar esta imagen, voy a ponerle nombre logo. Nuestro logo va a estar por aquí, entonces vamos a utilizar nuestra navegación. Veamos qué navegación tenemos por aquí, tal vez barra de enlaces como esa. Esta es nuestra barra de enlaces, y voy a renombrar estos a quizás diseño web. Para que esto sea exitoso, vamos a utilizar nuestro documento de Word o puedes ver el contenido de nuestra página, Diseño Web Brand Uplift. Nosotros lo renombramos en el diseño original, así que esto es tour, quiénes somos, o aquí tuvimos casos prácticos, contactar, y obtener un presupuesto. Vamos a colocar estos cuatro enlaces por aquí, vamos a copiarlos desde aquí. Este documento de mi Word, cópielos desde aquí, y lo voy a pegar por aquí. Todos están separados por una coma, voy a usar la misma sintaxis que han usado. Simplemente pon una coma aquí así, y nuestra navegación está hecha. Aquí hay un botón más, que es Obtener cotización. Voy a dar clic aquí botón, voy a arrastrar un botón por aquí, hacer doble clic, y vamos a conseguir una cotización. Tenemos nuestro botón por aquí, y tenemos nuestro logo y todo listo. Ahora, a continuación tenemos los elementos de cabecera, subtítulo, nuestra imagen o video por aquí. Para reproductor de video, voy a arrastrar este reproductor de video por aquí. Vamos a mover este reproductor de vídeo por aquí así. No te preocupes por el diseño ni por el diseño final, esto es solo un alambrón. Simplemente coloque los elementos que van a estar ahí para que nuestro cliente vea y juzgue que este elemento no falta por aquí. Yo me voy a levantar play icon por aquí, vamos a moverlo así. Ahora, para el titular, vamos a volver a nuestro documento Word, copiar esto en nuestro texto, ¿dónde está nuestro texto? Aquí tenemos algún texto, o ¿dónde está titular? Subtítulo, un gran título. Vamos a arrastrar este gran título, colocar esto por aquí y vamos a arrastrarlo así. ¿ Va a ser multilínea? Veamos en este panel. Auto size, y no tenemos, creo multi-line por aquí. Vamos a usar un texto de varias líneas por aquí así. Tenemos texto multilínea, vamos a quitarlo, algo así. Vamos a aumentar el tamaño a 40, que era nuestro tamaño de titulares, coloquemos algo como esto. Tenemos nuestro titular por aquí. Ahora, para los subtítulos, subtítulos, vamos a usar esto, veamos cuál es nuestro subtítulo, subtítulo o nuestro primer párrafo. Voy a usarlo así. Ahora, ten en cuenta que aunque estés colocando estas cosas así al final, tal vez en el diseño podríamos sustituirlas por aquí. Esto no es un tema de colocación o diseño, es solo que nuestro contenido estará en esta porción y en esta área o no me falta ningún contenido crucial por aquí, solo para asegurarme y estar en la misma línea o misma página con tu cliente. Estos son muy cruciales, vamos a eliminarlo y voy a usar otra vez la tecla Alt u Option para hacer una copia, al igual que photoshop, y voy a poner algo por aquí así, y vamos a usar tal vez 28, no, creo que 20 serán lo suficientemente buenos. Tenemos nuestro subtítulo por aquí, no te preocupes por la alineación, no estamos preocupados por el diseño en este momento, solo queremos que nuestros elementos por aquí, primer párrafo, necesitamos ser muy rápidos en esto. Acabo de poner algunos textos por aquí, párrafo, tenemos párrafo, y ese es nuestro párrafo por aquí. Ahora necesitamos un botón para empezar, botón por aquí, tenemos un botón Empezar, así que vamos a hacer clic en él, Comenzar ahora. Hay dos cosas, puedes cambiar el tamaño de estos botones, también puedes darles colores si quieres. Normalmente sugiero que no se deben dar colores, tal vez si tu cliente no entiende y si es un botón o no, puedes resaltarlo algo así. Esto significa que es un botón y está muy resaltado por aquí. Ahora nuestro encabezado casi está terminado, vamos a mover esto un poco hacia abajo, así, y también este de aquí. Ahora nuestro encabezado está hecho, vamos a crear una línea horizontal o H Regla se llama. Voy a conseguir una línea por aquí para asegurarme de que esta sección haya terminado, así que vamos a ir a la siguiente sección. 16. La maquetas de Balsamiq parte 2: Ahora, lo que vamos a hacer es sólo copiar éste y éste porque nuestra siguiente sección también tiene un rubro y un subtítulo así. Veamos cuál es el subtítulo o rubro. Hitos, voy a saltarme algunas de las secciones de este video con mucha velocidad porque son la misma tarea que hemos hecho una y otra vez. No te preocupes si lo hago muy rápido. Voy a centrar alinearlo. A lo mejor algo como esto. Ahora está en el centro. Control C, Control V. Creo que hice copias extra por lo que también le voy a dar center align, algo así. Ahora, tenemos nuestro rumbo por aquí. Ahora, tenemos el paso 1, 2, 3, 4 y van a tener algunos iconos. Voy a ir a iconos. Puedes colocar algunos iconos, saltar, estás perdiendo el tiempo por aquí seleccionando iconos. Lo que voy a hacer es ir a Media. Voy a dar un nombre de icono como, nombre fue evaluar su diseño de negocio para sus usuarios. Evalúa tu negocio, algo así. Entonces tenemos un texto debajo de él. Va a ser algún texto como este. Te voy a dar una propina por aquí. Control C, Control V. Va a estar en el medio así, un poco corto. A lo mejor puedes cambiar el color a algún gris opaco por algo así. Ahora, lo que vamos a hacer es agruparlo, controlarlo o mandar G, y presionando Opción, vamos a hacer 1, 2, 3, 4 copias. Ya hemos hecho los cuatro ejemplares. Es así como vas a crear incluso en tus diseños. Este es un método muy bueno. Crear un elemento que se va a repetir una y otra vez. Hazlo perfecto y luego repítelo. Aquí tenemos la segunda opción. Voy a saltarme esto con rapidez, porque esta va a ser tarea repetitiva. Necesitas hacer doble clic para meterte dentro de cualquier grupo. También puedes hacer clic derecho y desagruparlo. ¿ Dónde está el desgrupo? Básicamente es esto. Además, puedes hacer clic en este desagrupamiento. Creo que es Comando Shift Control G o Comando Shift G, para desagrupar. Son fáciles de editar así. De lo contrario, debes hacer doble clic en él para meterte dentro del símbolo. Ahora, voy a volver a acelerar mi video. Voy a agruparlos de vuelta. Alinearlos de nuevo porque algunos de ellos están desalineados. Voy a hacer clic en ambos para alinearlos de nuevo, así. Si crees que algo no está alineado, asegúrate de alinearlo así. Todos ellos han sido alineados. Ahora, voy a hacer ajustes. A lo mejor los voy a seleccionar a todos así. Esto no es un grupo. Comando G o Control G. Ahora, vamos a seleccionar todos los grupos y vamos a dar click. Creo que fue éste, sí, éste. ha alineado todos horizontalmente en el medio así con la misma distancia de cada lado. Ahora, están mucho mejor alineados. Opción Alt. Lo estoy sosteniendo y arrastrándolo para hacer otra copia así. Ahora, vamos a pasar a otra sección que es nuestro equipo, supongo. Sí, tenemos nuestro equipo de trabajo. También puedes mostrar tus logros o algo así. Pero voy a saltarme esta sección. Nuestro equipo es especial. Estamos llenos de esto. Voy a copiar Comando C o Control C, Control o Comando V. Arrástrelo hacia abajo. Ahora, vamos a conseguir algunas imágenes por aquí como disparos a la cabeza o algo así. En los Medios, tenemos esta webcam, que se asemeja a lo que necesitamos por aquí. Tenemos uno por aquí así, y podemos tener algo de texto por aquí. A lo mejor un enlace o simplemente un texto. Podemos usar este subtítulo o tal vez texto. Aquí está nombre con título. Se llama John Doe. No debemos preocuparnos mucho por el texto que es muy pequeño. Tenemos texto por aquí que era un texto grande. Aquí podríamos tener sólo una línea o un título o etiqueta o algo así. Entonces no te preocupes por ello. Lo voy a poner por aquí y lo voy a duplicar y escribir su nombre como Internet. A lo mejor Internet Marketer, algo así. Voy a duplicar rápidamente todo esto. Basta con alinearlos primero. Estoy presionando la tecla Mayús para hacer selecciones múltiples. Entonces los voy a alinear así. Simplemente agruparlo, selecciónelos todos, Comando de Control G. Tenemos un grupo por aquí. Se va a alinear con el grupo superior por aquí, Alt u Opción tecla 1, 2, 3. Ahora los voy a alinear rápidamente con esta alineación horizontal. Se puede ver que tenemos nuestro área de equipo hecho. Nuevamente, necesitamos una regla horizontal. Entonces lo vamos a duplicar así. Ahora tenemos algunos temas espaciales por aquí. Desbloquea el navegador, y hazlo un poco más grande así. Nuevamente bloquearlo para que no te equivoques moviéndolo por error. De nuevo, necesitamos un rumbo por aquí y un subtítulo. Hagámoslo un poco de tamaño. Control de mando C, mando V. Tenemos un párrafo por aquí. Para nuestro párrafo vamos a utilizar este texto por aquí. Estas son las notaciones que puedes usar. Se puede ver el color de tu cabello rojo. Dentro de esto, el texto será de colores rojos. Entonces si quieres usar algo como esto, puedes usarlo, pero solo quiero usar texto y párrafo sencillos, lo que no debemos preocuparnos por ello en este momento. Voy a seleccionar esto, hacer doble clic, pegarlo aquí, centrarlo alinearlo y así. Ahora tenemos dos botones por aquí. Añadamos algunos botones o tal vez podamos copiar el mismo botón. Comando C, y mando B. Vamos a moverlo al fondo así. Lo estoy arrastrando. Entonces tenemos dos botones, creo que obtener una cotización o creo que consulta gratuita. Entonces tenemos dos botones por aquí. Tenemos algunos textos por aquí, que va a ser una etiqueta supongo. Pongamos algunos textos como, cotización gratuita, no recuerdo lo que pusimos aquí. También aquí tenemos números telefónicos 0800-333-555. Por lo que se va a alinear con esto. Ahora tenemos casi la forma de nuestra página principal. Añadamos la dirección por aquí, que es ésta, control de comando C. Añadamos texto por aquí, que va a ser esta. Veamos qué teníamos. El párrafo es negrita. Tenemos que añadir marcas de asterisco para ponerlo en negrita. Entonces estoy usando asterisco frente a estas líneas. Entonces tenemos este audaz. Entonces esto se hace. Vamos a mover nuestros enlaces por aquí, que van a ser nuestros vínculos sociales. Escribamos Facebook. Por lo que este va a ser enlace de Facebook. Entonces necesitamos una plaza de Twitter. Entonces necesitamos un Instagram o LinkedIn. A lo mejor creo LinkedIn. Ahora también puedes hacer clic en todos ellos, hacer que el espacio entre ellos sea constante, y vamos a agruparlos, controlar G de mando G. Vamos a moverlo así. Por lo que tenemos listo nuestro armazón inicial. No tenemos que preocuparnos mucho de cómo se va a ver, cuando se finalice diseño. Sólo necesitamos que los elementos estén en esta página. Por lo que ahora mismo se puede ver que no está en el medio. También este, este necesita estar en medio así. Entonces tenemos algún problema por aquí. También puedes seleccionar todo el grupo así, y moverlos por ahí. No hace falta que sea muy pixel perfecto, pero creo que debería tener alguna forma. Entonces para tener la idea de cómo se va a quedar. Creo que nos falta algo por aquí. También creo que agregamos dos opiniones de usuarios por aquí. Esto se puede agregar en la fase de diseño. Entonces si quieres agregarlo por aquí, puedes agregar a las opiniones de los usuarios por aquí. ¿ Dónde está nuestro layout? Supongo que así te maquetas. Por lo que también podemos usar algunos gastos generales de maqueta, podemos agregar opiniones de clientes en esta área. Voy a moverlo así. Voy a crear esto, y moverlo aquí así. Por lo que tiene sentido que estemos señalando sobre este apartado. Entonces así es como anotas tu diseño. También puedes crear versiones alternas donde varies tu diseño o tu diseño puede ser una maqueta más para el mismo y enviarlo a tu cliente. También uso estos soportes rizados, tal vez video de tu cliente usando tu producto, algo así. Entonces sigo agregando estas anotaciones por aquí para asegurarme de que tu cliente o lo siento tu cliente, entienda lo que quise decir, entonces lo vamos a exportar a PNG. Vamos a exportarlo todo al PNG y lo vamos a enviar a nuestro cliente. Entonces vamos a ver cómo va a quedar nuestro PNG. Por lo que tenemos landing page PNG. Este es nuestro alambrico y deberías estar orgulloso de ello. Hemos utilizado la mayoría de las técnicas de diseño de la experiencia del usuario. Asegúrate de anotar para explicar tus ideas y algo así. En la siguiente fase vamos a diseñar usando este alambrico y crear una fase de alta fidelidad o diseño visual de tu página de aterrizaje. Entonces pasemos a la siguiente lección. 17. Marco de diseño atómico: hoy vamos a hablar de un marco de diseño llamado Atomic Design. Este marco de diseño fue propuesto por Brad Frost. Creo que este es el camino a seguir ahora mismo en los últimos tiempos cuando nuestras aplicaciones web y nuestras aplicaciones móviles, tienen 50 pantallas. Entonces necesitas algún marco para controlar tu diseño. Por qué voy a tocar esto, porque este es un curso de diseño un poco avanzado. Vamos a ver qué es realmente Atomic Design, y sobre la base de esto, vamos a construir nuestra guía de diseño de interfaz de usuario en la siguiente lección. ¿ Qué es Atomic Design? Diseño atómico básicamente, se ha tomado de la idea de química donde tenemos átomos, moléculas, y organismos. Ahora, lo que hace es que hay cinco tipos de diferentes niveles de diseños. Dividimos nuestros elementos de diseño en cinco niveles. Átomos, es las moléculas de forma más simples. Entonces diferentes elementos de diseño que combinan para crear moléculas. Después se combinaron diferentes moléculas para crear organismos. Juntamos diferentes organismos, y ellos crean plantillas que se pueden convertir en páginas con agregar un contenido en él. Veamos algunos de los ejemplos de esta entrada de blog. Se podía ver por aquí, aquí tenemos átomos, moléculas, organismos, plantillas, y páginas. Ahora, los átomos son se pueden ver los bloques de construcción, muy simples en elementos de interfaz web como etiqueta de cualquier campo, luego campo de entrada como el botón. Estos son todos átomos. Entonces tenemos moléculas. Se puede ver que combinamos estos tres átomos para crear una barra de búsqueda. Esto va a realizar sólo una sola tarea. Una molécula va a realizar una sola tarea. Aún así son muy simples. No tienen funciones complejas o no son muy complejas. Entonces organismos. Ahora, los organismos van a entrar en alguna forma del diseño. Al igual que puedes ver tu encabezado o él lo llama cabeza masiva de cualquier elemento de diseño. Yo lo llamo cabecera y navegación. Se puede ver esta barra de encabezado o barra de navegación. Tiene logo, luego tiene navegación, todos los enlaces. Entonces tiene barra de búsqueda o tal vez también puede tener enlaces sociales. Esto va a ser un organismo. Tenemos una molécula por aquí, una molécula por aquí, y una molécula por aquí, que va a ser nuestro logo y enlace o tal vez es un átomo. Básicamente, estamos combinando diferentes moléculas para crear y diseñar elemento. Se va a llamar organismos. ¿ Por qué necesitamos toda esta metodología, y todo este marco para controlar nuestro diseño? Si estás diseñando una aplicación muy grande, y tenemos este encabezado en todas las páginas diferentes, y tal vez tengamos diferentes encabezados en pocas páginas, así que esto va a controlar todo. Sabemos que este elemento de diseño o este patrón de diseño u organismo es para esta página, y este es para esta página. Aquí puedes ver algunos ejemplos más como este es la barra superior de Yahoo. Después tenemos Tumblr, después tenemos la CNN, y Facebook, y Google. Puedes leer todo al respecto si quieres. También hay un libro de Brad Frost sobre este tema. Si quieres ir con más detalle, creo que puedes seguir adelante, y pedir su libro, que es de 10 dólares, supongo. Ahora las plantillas básicamente van a combinar diferentes organismos. Normalmente las plantillas serán como una alambrada. No van a llenar el contenido real de la página. En este momento creamos diferentes organismos, o puedes llamarlos patrones de diseño. Básicamente estamos construyendo una biblioteca de diseño. Podemos escoger una cuadra por aquí, y poner el segundo bloque, así que este es básicamente otro organismo. Entonces tenemos pocos organismos más, se puede ver por aquí. Aquí tenemos una entrada de blog. Este es otro organismo. Entonces tenemos la lista, lista de imágenes, ese es otro organismo. Entonces tenemos este párrafo y video descripción para este video, este es otro organismo. Es así como creamos una plantilla. Ahora las plantillas básicamente nos van a ayudar a construir nuestro diseño muy rápido. ¿ Por qué? Si has diseñado algún blog de WordPress o cualquier sitio de WordPress que conozcas, que las páginas de blog y las páginas de publicación del blog, son diferentes a la página principal de tu sitio web. Estaremos diseñando una plantilla para la página principal. Entonces para la segunda página, sólo vamos a conseguir este organismo, y colocarlo en la parte superior del otro para crear otra página. Va a ser muy fácil si tenemos marco incorporado para seguir las pautas de diseño. Esto es básicamente un marco de diseño. Lo vamos a utilizar en la construcción de directrices de diseño de la interfaz de usuario. Este es un marco muy bueno. De verdad quería que ustedes se metieran en esto. Ahora, hay otra forma de crear el mismo enfoque. Pocas personas, lo que hacen es que usan estas plantillas, y las usan como plantilla en escala de grises. Simplemente siguen mejorándolo y agregándole detalles hasta el diseño final. Se puede ver aquí ha demostrado que estudio en Pittsburgh siguen un proceso similar donde las estrellas de diseño, escala de grises y maquetación menos. Normalmente tratan de aumentar su complejidad y fidelidad. La fidelidad es básicamente lo precisa que es o lo cerca que está del producto real. Si es una alambrada y no tiene contenido, sólo líneas como ésta, es de baja fidelidad. Aquí no tenemos ningún texto. Se puede ver por aquí, una vez que empecemos a poner texto y algunos detalles, va a ser fidelidad media. A los maquetas, maquetas de colores que creamos en Photoshop, a esos se les llama alta fidelidad. Páginas. Ahora, las páginas son lo mismo que una plantilla, solo que tienen el contenido real. Se puede ver por aquí, empezaron a agregar contenido a esto, como imágenes. Entonces el contenido real por aquí. Este es contenido real, por eso se está mostrando por aquí. Las páginas van a ser el más alto nivel de fidelidad, que acabo de describirles, que básicamente son las maquetas. Este es el Diseño Atomico. Se puede leer este post. Voy a compartir el enlace a esto. Además, tienen otra, creo que también es alguna explicación más por aquí. Voy a compartir ambos enlaces con ustedes. Puedes leerlo. Es muy necesario. Creo que tienes la idea de Atomic Design y por qué la sigo en mis diseños. Pasemos a la siguiente lección para crear pautas de diseño de la interfaz de usuario. 18. Sistema de cuadrícula de 8 puntos: hoy vamos a hablar de un marco de diseño llamado sistema de cuadrícula de 8 puntos. Es básicamente sistema de rejilla, puedes aplicarlo al sistema de rejilla vertical y a los sistemas de cuadrícula horizontal también. Ahora si no sabes cuáles son los sistemas de cuadrícula vertical y horizontal, necesitas ver mi curso tipografía para Diseñadores de UI. He explicado mucho sobre los sistemas de rejilla y ritmo vertical y muchos otros elementos de diseño relacionados con las rejillas. El sistema de rejilla de 8 puntos es popular debido al diseño de materiales. diseño de materiales de Google se basa en el sistema de cuadrícula de 8 puntos y también puedes llamarlo sistema de cuadrícula de 8 píxeles. Voy a explicar con pocos ejemplos lo que en realidad es sistema de cuadrícula de 8 píxeles y cómo podemos aplicarlo en nuestro diseño web o cualquier diseño de interfaz de usuario. Déjame explicarlo con un ejemplo de archivo de Photoshop. Voy a abrir un nuevo archivo. Voy a tomar el ancho es de 1,280 y la altura será de 2,400, 1,280 es creo que estándar para una rejilla Bootstrap, así que voy a crearla. Tenemos este expediente. Ahora lo que voy a hacer es crear un sistema de cuadrícula basado en 8 píxeles o 8 puntos o un diseño de guía en él. Se puede ir a ver un nuevo diseño de guía. Vamos a usar 12 columnas y canaleta. Ahora, dentro de la canaleta asegúrate de que todo lo que uses en tus mediciones va a ser el múltiplo de ocho. Se puede ver por aquí tengo canaleta es igual a 24 píxeles, que es de nuevo el múltiplo de ocho. También puedes usar 16 si quieres, depende de ti. Ahora, en las filas para el ritmo vertical, puedes usar la altura para ser de 48 píxeles, o puedes usar 16 píxeles, o puedes usar ocho píxeles. Depende de ti. En mi ejercicio de diseño he usado la superposición de patrón de cuadrícula vertical de 8 píxeles. Si vas con 48 tendrás más espacio y creo que es más fácil alinear tal vez y también puedes usar 32, depende de ti. Es así como vamos a crear sistema de cuadrícula de 8 puntos. Ahora déjame explicarte con algunos botones. Por ejemplo, si trato de crear un botón, se puede ver por aquí, realmente se va a poner perfectamente bien dentro de esta cuadrícula, y su tamaño será igual al múltiplo de ocho. Si voy a este panel de información y si Control click en esta capa, puedes ver por aquí 200 por 48 pixels. Básicamente es múltiplo de ocho, por lo que 48 es un múltiplo de ocho. También puedes usar algo similar por aquí, tal vez 196 o algo así, que también es un múltiplo de ocho. Pero creo que en su mayoría esta altura será lo suficientemente buena como para compensar todos los elementos de diseño. Es así como vas a hacer estos elementos de diseño. Ahora, otra configuración que puedes hacer aquí es ir a preferencias y guías cuadrículas y rodajas, y estoy usando 64 píxeles de línea de cuadrícula para cada, así que la división es cuatro. Si dividimos 64 por 4 , van a ser 16 pixel. Es básicamente una cuadrícula la cual te puede ayudar a crear tu, así que voy a habilitar el comando grid colon, coma, creo que es una cita. Entonces comanda cita, y puedes ver que tenemos esto. Ahora si tratamos de usar esta cuadrícula, que es la cuadrícula de Photoshop, se puede ver que se puede diseñar un botón que está perfectamente dentro del rango de este nuestro sistema de cuadrícula de ocho píxeles. Entonces déjame mostrarte lo que es. Es 256 por 64. Aquellos de ustedes que han estudiado ciencias de la computación, ya saben que nuestras computadoras y nuestras mordeduras y todo el sistema se basa en ochos, así que 32, 64, algo así. Esto funciona muy bien cuando diseñas algo. Déjame esconder esto. En esta página se puede ver esto se ve realmente cool, muy proporcional. Igual, se puede utilizar la escala de tipo. Escala de tipo, puedes usar ocho píxeles, 16 píxeles, 24 píxeles. Entonces puedes tener, vamos a crear algo por aquí. Voy a usar 16 pixeles. Los colores deberían ser éste y vamos a escribir algo por aquí. Esto es 16 pixel, esto es 32 pixel, esto es 24 pixels, y esto es 64 pixels. Cambiemos los tamaños a partir de aquí. Voy a usar 64 para este, 24 para éste, 32 para éste, y 16 para éste. Esta báscula realmente te va a ayudar en el diseño. Eso no significa que tengas que estar demasiado fijo en esta escala de tipo. También puedes usar márgenes y remo para ajustarlo. En mi diseño real, no estoy usando 64 ni 24, estoy usando 49 y 54 píxeles, y estoy usando margen y relleno para encajarlos en mi sistema de cuadrícula de 8 píxeles. Todo esto se trata del sistema de cuadrícula de 8 píxeles. Puedes usar este sistema de rejilla en tus remantes, en tus márgenes, en tus casi todos los elementos de tu diseño. Si tienes una sección, como yo tengo esta sección por ejemplo, esta sección por aquí, y tengo otra sección. Cambiemos este color a otra cosa para que puedas ver. Tengo esta sección, y mi contenido está partiendo de esta área. Por ejemplo, este es mi contenido. Este es mi contenido, esta es mi sección. Lo que vamos a hacer es que vamos a usar la altura de, por ejemplo, 96. Voy a usar esto. Este es mi bloque de correo que he usado para establecer el relleno superior y el relleno inferior de mi contenido. A esto también se le puede llamar márgenes. Aquellos que conocen un poco de programación o conocen HTML, saben que esto se puede lograr por márgenes o remo. Esta va a ser nuestra sección. Por ejemplo, una sección tenía 800 píxeles de alto o lo que sea. Este es nuestro contenido, y estos son nuestros remantes en la parte superior y en la parte inferior. Se puede ver por aquí por qué uso este bloque de 64 píxeles. Ya puedes ver si hago click aquí, es 96, la altura es 96 porque 96 es un múltiplo de ocho. Tendremos este layout en todo nuestro diseño. Yo he explicado mucho de esto todo el ritmo vertical en mi tipográfico, así que si no lo has tomado, creo que deberías verlo, y obtendrás mucho sobre sistemas de rejilla y diseño modular y todo esto vertical cosas de ritmo. Este sistema de cuadrícula de 8 puntos u 8 píxeles es un nuevo concepto. Muchos diseñadores, incluso para aplicaciones móviles que usan aplicaciones móviles de diseño usan esto. Google Material Design lo está usando. El diseño de Android se basa en este sistema de cuadrícula de 8 píxeles o 8 puntos. Creo que esto se trata mucho del sistema de cuadrícula de 8 puntos. Pasemos a la siguiente lección donde vamos a diseñar las directrices de la interfaz de usuario para nuestro proyecto. 19. Selección de Typeface y colores: En esta lección, voy a hablar de cómo decidí la combinación de fuentes y combinaciones de colores para este proyecto. Lo que realmente hago es experimentar normalmente dentro de Illustrator para las combinaciones de fuentes. ¿ Por qué? Porque en Illustrator, las fuentes son un poco muy bonitas y tienen buenas curvas, no tienen ningún borde pixelado ni algo así. Entonces puedo ver más pura o más de cerca cuál el borde y cuál es el tipo de letra o el tono de la fuente, o el mensaje de la fuente, la fuente está transmitiendo. Así que probé muchas combinaciones de fuentes. Se puede ver por aquí, Nunito Sans con Nunito y Yorkten audaz con Nunito Sans y Orkney con Corbert. Después tenemos a Yorkten con Nunito. Me gustó Yorkten la mayor parte del tiempo, así que lo usé para el encabezamiento. Yo sólo tengo la versión audaz de la misma. Creo que lo conseguí de algún sitio premium. Entonces hay otra fuente que me gustó mucho, es este Pier Sans. Por lo que también fue muy guapo. Lo que hice es resaltar algunas de ellas con diferentes colores, que me gustaron mucho. Se puede ver por aquí, esta es otra combinación, pero para mí no se veía muy bien para la empresa basada en tecnología. Por lo que hay otra que puedes ver por aquí, Proba Pro y Serif72 Beta. Había otra fuente audaz que me gustó mucho. Era Trueno, y también era fuente libre. De verdad me encantó, pero creo que al final, me quedé pegado por éste. Fui por éste. Yorkten y Nunito Sans. Nunito Sans es básicamente la fuente de Google. Por lo que también puedes usar estos dos, Nunito Sans y Nunito. Si no tienes este Yorkten, intentaré enlazar si puedo encontrar su enlace gratuito. Trataré de encontrar si aún es gratis. Ahora, así es como fui por diferentes combinaciones de fuentes y sigo intentándolo. En primer lugar elijo dos o tres fuentes para este rubro. Básicamente el texto de visualización o texto de encabezamiento. Porque quería algo audaz, poderoso, confiable. Entonces uso este. Entonces para el texto, uso una fuente o trato de elegir una fuente que sea muy legible, incluso en tamaños pequeños, y trato de ver que coincide con esto o con todo nuestro equipo. Entonces si tenemos un estudio basado en tecnología creativa o un estudio basado en tecnología, debería estar coincidiendo con nuestro font-stroke. Por lo que nuestra fuente debe transmitir el mismo mensaje. Ahora sobre los colores. Diseñé este logotipo solo para este propósito de ejercicio. Probé tres colores. Este es un poco de color azulado con el morado y azulado púrpura, básicamente azules y morados en su mayoría y se combinan para formar este W-W. Yo, de nuevo, uso Nunito Sans, supongo o tal vez creo Nunito. Creo que uso Nunito. No lo recuerdo. Por lo que Nunito utilizo para este logo y elijo los colores, los tres colores de este logo en mi tema principal, y estamos usando básicamente la variación de este gradiente. Es así como elegí diferentes fuentes y diferentes combinaciones de fuentes, tipos de letra, y esquemas de color. En la siguiente lección te voy a mostrar mi guía de estilo de diseño U-I y la plantilla que usé y te daré un ejercicio para crear uno tú mismo, ¿de acuerdo? Se puede ver por aquí. Aquí hay algunas combinaciones de colores más que probé. Esto es un poco muy afilado y muy enérgico. No quería transmitir este mensaje. Esto es un poco, se puede decir producto verde o tal vez verde. Descuidé este color, así que uso este. Es así como llegué al esquema de colores y partidos de tipografía y seleccioné mis tipos de letra. Pasemos a la siguiente lección. 20. ¿Qué son las guías de estilo de UI de tu estilo?: En esta lección, vamos a cubrir el concepto de Guías de Estilo de la UI, o a veces llamadas mosaicos de estilo, y por qué realmente las necesitamos. A continuación vamos a ver qué son patrones de diseño o bibliotecas de patrones y qué otras empresas más grandes como Yelp o Salesforce son, cómo están usando las guías de estilo para ayudar a sus desarrolladores y diseñadores. En realidad, la razón por la que utilizamos guía de estilo es para acercar desarrollo y sus diseñadores en la misma página o acercarlos. Por lo que esto es ahora mismo la guía de estilo se construye con Photoshop. Hay guías de estilo que se construyen con HTML y están en línea. Te mostraré los ejemplos apenas en unos minutos. Primero veamos algunos de los ejemplos, y cómo creé esta guía de estilo UI. Utilizo una plantilla de Medialoot y es una muy buena plantilla de guía de estilo UI. No hay gradientes en su, pero los agregué. En primer lugar, vamos a definir todos los colores que vamos a utilizar. Entonces estoy usando pocos colores por aquí, diferentes tonos del mismo color. Se puede ver por aquí, este es nuestro color principal. Este es otro tono. Este es un tono un poco más claro. Ahora lo que utilicé es que uso este seleccionador de color para cambiar la saturación y el brillo, para conseguir unos colores más. Entonces tenemos este gris claro. Este gris claro también está más cerca de este morado creo. Después tenemos gradientes, después tenemos tipografía. Esta es la escala de tipografía que elegí. Te voy a mostrar cómo elegí esto en otra lección. Entonces tenemos nuestro texto corporal, nuestro hipervínculo, cómo será el enlace. Después tenemos las secciones de botones. ¿ Cuáles son los tamaños de los diferentes botones? Estos son diferentes estilos; normal, flotar, activo. Estos son otros estilos que podemos usar para el mismo botón. Después tenemos iconografía, todos los iconos que voy a usar, los voy a pegar por aquí. Se puede ver, estos son los iconos que utilicé en mi diseño. Estos son iconos personalizados, los compro en Creative Market. Entonces así es como los conseguí. Cambio sus colores de acuerdo a mi tema. Yo uso morado y este color azulado para conseguir estos iconos. Entonces tenemos nuestros elementos de forma. Ahora, toda esta guía de estilo de UI está siguiendo las reglas del diseño atómico. Se puede ver que estamos definiendo nuestros átomos por aquí. Al igual que puedes ver tenemos botones, textiles, gradientes, colores, estos son todos los átomos que vamos a usar para construir nuestro diseño. También se pueden ver estos elementos de forma. También son los átomos. Si los combinas, van a crear nuestra biblioteca de patrones. Entonces el primer paso es en todos los procesos de diseño, si estás diseñando un sitio web muy grande, una aplicación web, o tal vez una aplicación web social, entonces necesitas construir esta guía de estilo de UI. Realmente te va a ayudar en el desarrollo y en tu proceso de diseño. Vamos a alinear su desarrollo y diseño un poco más cerca con esta guía de estilo. Se puede ver por aquí ahora esto se llama elementos de interfaz de usuario, y esto es básicamente nuestras moléculas. Se puede ver por aquí, esta es nuestra barra de pasos, barra progreso, entonces esta también es barra de progreso de paso. Estos son otros controles. Estos son nuestros átomos de nuevo. Esto es de nuevo, este diseño de interfaz de usuario. Este es nuestro artículo y está combinando tres cosas; nuestro párrafo, nuestros títulos, y nuestras imágenes por aquí. Entonces esta es una molécula en diseño atómico. Se puede avanzar más allá. Se pueden crear muchas bibliotecas de patrones diferentes llenas de ella. Se pueden crear ventanas modales. Se puede crear un formularios completos, mensajes de error, páginas de error, plantillas, páginas diferentes. Esto depende de ti. Pero este es el punto de partida para cualquier diseño. Si puedes crear esto, a veces cuando estoy diseñando, primero creo el primer diseño y luego construyo esta guía de estilo de UI a partir de su diseño. Para que puedas ir de arriba a abajo, o de abajo a arriba. Depende de ti. Puedes avanzar o revertir; es tu propia técnica. Pero a veces podría cambiar estos cuando veo que el diseño general no es adecuado con estos, así que podría cambiarlos. Estos son todos los gradientes, todos los colores que vamos a usar, y toda la tipografía. Déjame mostrarte algunos ejemplos más que son realmente buenos, puedes usarlos en tu diseño. Entonces aquí hay otra. Esta también es una guía de estilo, y tiene diferentes secciones. Se puede ver por aquí la tipografía. Después tenemos botones y pestañas, iconos, formas, después tenemos gráficos, temp. Estas son las paletas de colores. Se puede utilizar una paletas de colores para tipografía, fondo, e ilustraciones. Ahora bien, esto es totalmente diferente, y creo que fue de azulejos estilo Mindy Wagner, creo que sí. Esta es otra guía de estilo, mesa de trabajo, y es de [inaudible], creo. Me gusta mucho este diseñador y lo sigo mucho. Para que se pueda ver por aquí, tiene diferentes mesas de trabajo. Uno está configurado con colores, otro con tipografía. Se puede ver por aquí, están todos los diferentes tipos. Se puede ver cómo ha mostrado esta zona de cancha por aquí. Entonces tenemos esta forma. Entonces todo lo que están siguiendo es la misma pauta. De verdad me encanta éste porque tiene pocas cosas más. Se puede ver por aquí, si vamos a estos colores, entonces tenemos todo este sistema de cuadrícula. Se puede ver también está mostrando la cuadrícula, cuadrícula 1080 píxeles, y con estas columnas. Entonces puedes ver aquí tenemos ajustes de fuente. Una cosa más, si puedes agregar line-height con tu fuente, creo que es lo mejor que puede conseguir un desarrollador. Por lo que falta de la mía por aquí. También puedo agregar line-height por aquí. Pero vamos a crear algo similar con nuestra herramienta Zeplin. Por lo que vamos a utilizar al final Zeplin para crear una guía de estilo en codificación. No esto, sólo la imagen. Estas son diferentes guías de estilo. Realmente me encanta esta herramienta, esto tiene muchas otras opciones. Se puede ver estos son los controles de formulario, patrones, y este es el párrafo, es la altura de línea y todo. Además, puedes poner un poco de texto pequeño. Se puede ver por aquí, son cajas textos pequeños, Montserrat 12 píxeles, y la altura de línea es de 18 píxeles. Entonces así es como vas a diseñar una guía de estilo. Ahora, permítanme mostrarles algunos de los ejemplos de guías de estilo en línea que están utilizando otras grandes compañías gigantes, y cómo lo están usando construyendo bibliotecas de patrones y todo lo demás. 21. Ejemplos de guías de estilos de UI: este momento te estoy mostrando los lineamientos, lineamientos de tipografía de Salesforce, puedes ver por aquí. Estas son sus Directrices, Color, Accesibilidad, Entrada de Datos, Datos de Pantalla, Diseño, Movimiento, Navegación. Se puede ver aquí, aquí está la pauta de tipografía: Delgada, ligera, regular, audaz. Cuatro tipos de fuentes que están utilizando. Tienen su propia fuente y se puede ver en la parte inferior estos son los ajustes que están utilizando. Entonces también puedes usar, ver estos iconos por aquí. Si vas a Iconos, puedes ver que estos son los diferentes colores e ícono que están usando. Este es un ejemplo de guía de estilo de Salesforce o tal vez biblioteca de patrones que puedes ver. Entonces tenemos este muy bonito patrón mailchimp.com y estos son realmente grilla. Tienen su Sistema Grid mostrado por aquí, cómo vas a usar su sistema de grid y también con ejemplos de código. Entonces este es básicamente el final definitivo de tu guía de estilo. Tus codificadores van a desarrollar este sistema y es básicamente el sistema de tu guía de estilo de UI diseñada en un formato de codificación. Van a utilizar estos elementos y los van a enchufar en el marco de diseño atómico para crear páginas y plantillas enteras. Se puede ver aquí tenemos valores de píxel y también esta altura de línea. El valor de píxel, esta es la altura de línea, semi negrita de lo que tenemos subtítulo y altura de línea. Es así como han mostrado estos otros pocos ejemplos del código que puedes usar. Esto es realmente genial. También puedes ir a este Tablas y ver cómo son sus estilos de tablas, puedes ver por aquí. Hay un ejemplo en vivo, ejemplo codificado, interactivo. Entonces esta es la biblioteca de patrones definitiva que vas a construir a partir de tu guía de estilo de UI. Además, puedes ver si vas a este Código para América, puedes ver que tienen su propia guía de estilo. Se puede ver estos son el icono, tamaños que están usando, estos otros iconos. Si bajamos, puedes ver que estos son todos los colores que están usando: primaria, secundaria. Este es el diseño que están usando. Es así como vas a crear toda una guía de estilo y lo que va a hacer tu guía de estilo, va a hacer algo parecido a esto al final. Tu diseñador y desarrolladores, se van a reunir para crear algo como esto. Al final, este es el sistema que va a hacer avanzar tu diseño. Se trata de una aplicación web muy compleja o algo así. Estas son diferentes guías de estilo. Esta es una guía de estilo para Yelp y voy a compartir estos enlaces contigo para que puedas familiarizarte con esta guía de estilo y bibliotecas de patrones y todo esto y esto es realmente sus técnicas modernas de diseño, por lo que realmente debes familiarizarte con ellos. Pasemos a la siguiente lección. 22. Crearemos una guía de estilo: En esta lección, te voy a mostrar cómo creé mi Guía de Estilo de la UI y dónde obtuve la plantilla para ello. Tengo la plantilla del sitio web medialoot.com y es una plantilla gratuita que tienes que atribuir si la compartes en algún lugar. Ahora lo estamos compartiendo. Te estoy mostrando que uso este. Son pocas las cosas que no estaban presentes en ella, como se puede ver hay tres colores, gris oscuro, gris claro, y el blues. Pero añadí algunos colores más por aquí. Aumenté el tamaño de esta porción. Entonces también, cambié la tipografía, y los tamaños de los botones, y pocas cosas por aquí. Ahora, voy a cambiar a mi vista de Photoshop de este archivo que creé. Aquí, puedes ver esta es mi guía de estilo. Son pocas las cosas que voy a compartir contigo como creé o conseguí tres tonos de estos colores porque mucha gente, normalmente lucha con esquemas de color. Ahora bien, si voy a este gris oscuro, si haces doble clic en él, puedes ver esto es el gris oscuro, pero no es totalmente gris, es un poco en color morado. ¿ Cómo conseguí estos colores, estos colores oscuros? En realidad, empiezo con este color aquí. Entonces voy algo como esto. Se puede ver esto va a ser de este color. El segundo método que puedes usar es, puedes hacer clic en cualquier color, y puedes ir a este brillo, y reducirlo al 20 por ciento. También la saturación, reducirla a 20 por ciento. Se puede ver que se va a conseguir un color gris púrpura muy oscuro. Nuevamente, puedes moverte en esta dirección si quieres, a unos colores anchos dentro del gris. Se va a conseguir algo de este morado y la mayor parte del negro. Entonces también, se puede ver este gris claro también es totalmente no gris claro, se está inclinando hacia este color azul por aquí. Es gris, blanco, y azul. No es totalmente de color gris. Entonces tenemos este azul. Mis colores principales fueron uno, dos, y tres. Tengo todos estos colores de estos tres colores. Éste, ¿cómo lo conseguí? Cambié el brillo o un poco de saturación, si quieres. Se puede ver por aquí, tenemos hue 226. El matiz de este color será 226. Es el mismo tono de color que estoy usando, 226. Se puede ver estos son solo los tonos y diferentes tonalidades, diferentes tonos de este color. Básicamente, estoy agregando blanco blanco por aquí a estos. También aquí, tengo un turno de saturación por aquí. Intento saturarlo más para que tenga más nitidez en ella. Puedes probar muchos colores. No es muy difícil si sabes usar esta técnica, saturación de matiz y brillo. Esto lo he descrito en mi Curso de Diseño de UI en Photoshop, que es el curso más vendido en diseño de UI. Ahora, viniendo hacia el gradiente, nuestro gradiente básico era éste, entonces creé éste. Quité un color de aquí, por lo que es de azul a verde azulado. Entonces tenemos este color morado oscuro a azulado. Estos son básicamente los mismos gradientes, es solo que traté de agregar algunos tonos más del mismo color, tal vez color opaco, o tal vez un poco más de color brillante para crear estos gradientes. Ahora para los desarrolladores, puedes crear tantos colores, puedes usar tantos colores en los gradientes. Si eres diseñador, debes saber que tu desarrollador solo necesita que se detenga el color. Al igual que puedes ver qué aquí, si voy a esta Overlay Gradient, puedes ver por aquí, si hago doble clic en él o hago clic en él, esta es la Paradas. Se puede ver por aquí, esta es nuestra parada al cero por ciento y tenemos la parada por aquí, que es del 100 por ciento. Lo que necesitan es que ¿de qué color usas al cero por ciento? ¿ Qué al 50 por ciento? Si has usado tres colores, si has usado dos entonces cero y 100 por ciento será más que suficiente. También, es un gradiente lineal. El segundo método es que solo puedes hacer clic derecho y copiar CSS, y eso es todo. Tus desarrolladores solo van a necesitar el archivo CSS. Si lo pego por aquí, puedes ver que este es el gradiente ya generado en este archivo CSS. No necesitamos preocuparnos mucho, esto es solo para fines de presentación que tus desarrolladores sepan que su desarrollo o su archivo HTML está coincidiendo con tus estilos. Entonces tenemos esta tipografía. Aquí, tengo esta escala de visor. Voy a llegar a eso algún tiempo. También agregué este pequeño texto por aquí. Es de 16 pixeles, y este cuerpo está usando 20 pixeles, se puede ver aquí, lo mencioné por aquí. También, los rubros tienen 54, 36, 28, 24, 20, 20. Aquellos de ustedes que han visto mi curso de tipografía, entonces saben que cómo creo estas escalas tipo. Esta es básicamente una escala de tipo base de 16 píxeles, y utilicé 1.5 como relación de escala. Te voy a mostrar cómo conseguí estos en pocos minutos. Además, puedes ver por aquí estos son diferentes estilos de botones. Nuevamente, estoy usando los mismos gradientes en la parte superior. Se puede ver estos son los gradientes que estoy usando dentro de los botones. Algunas de las sombras que estoy usando, se puede ver por aquí, soltar sombras. Estoy usando la sombra gota color morado, morado oscuro, 30 por ciento, luego distancia, 20, tamaño. Voy a compartir este archivo contigo, así que no te preocupes que no sepas cuáles son estos estilos. Igual, también puedes decirle a tu desarrollador que cuál es la redondez de tu borde, ocho píxeles de tus botones. Estos son pocos estilos más. Se puede ver que he usado estos estilos en diferentes lugares de mi diseño. Entonces tengo estos iconos. Creé estos iconos. Los conseguí del archivo de Illustrator. Cambié de color y lo pegué. Es un archivo vectorial con un objeto inteligente por aquí. Si hago doble clic en él, se van a abrir en Illustrator. Contamos con estos campos de formulario. Acabo de cambiar el borde o el trazo de estos campos de formulario para obtener este efecto. este momento, nos estamos centrando en diseñar solo una página de aterrizaje, pero te das la idea de que puedes crear más controles y usuarios más diseñados como el diseño de post, y los artículos, y citas, y un montón de otras cosas. No quiero ir con mucho detalle ahora mismo. Creo que estos pocos estilos y esta guía de estilo es más que suficiente para nosotros. Empecemos y empecemos a preparar nuestro diseño. 23. Explota la escala de tipos: Pero antes de eso déjame explicar cómo conseguí esto. Estoy usando una escala de tipo muy compleja o muy diferente. Se puede ver por aquí mi objeto vectorial se ha abierto. Vamos a minimizarlo. Por lo que estoy usando esta escala de tipo, Página web de escala modular. Se puede ver 16 pixel es mi base, 1.5. Por lo que 16 pixel, 24 , 36, 54, estos son los cuatro tamaños. Entonces para pantallas móviles y pantalla de tablet, estoy usando 1.75. Entonces esto es 49, 28. Estos son unos tamaños más que obtuve. Entonces si voy a 1.25, estas son las tallas, 25, las puedo usar, 32 o 31. Entonces puedo usar 48 si quiero. Entonces estas son todas las diferencias y más tamaños que obtuve de la báscula. Si quieres saber más al respecto, necesitas ver mi curso de tipografía. Ahí, he explicado por qué y cómo conseguimos estas escalas. También puedes usar este estilo tipográfico y escala desde el diseño del material. Puedes ver sus estilos base son 12, 14, 16, 20, 34, y puedes usar también estos. Entonces esto es realmente genial si quieres usar estos, los vamos a ajustar usando márgenes y remaches. Creo que les expliqué todo esto en curso de tipografía, pero aún así, si no lo saben, los vamos a alinear usando márgenes y remaches y todo lo demás. Entonces así es como construí mi guía de estilo de UI, la voy a usar en mi diseño. El segundo que puedes hacer es que puedes ver en la parte inferior, he agregado todos estos colores que voy a usar. Además, si puedes ir a los Estilos, aquí se guardan todos mis estilos de botón. Entonces si vas a este botón y debes saber que cómo guardar un estilo, nuevo estilo y se guardará por aquí. Esto realmente va a acelerar nuestro trabajo porque este curso está más enfocado al flujo de trabajo y cómo voy a lograr un flujo de trabajo rápido. Se puede ver por aquí, todos mis botones están listados por aquí. También, uso estas Bibliotecas, pero creo que son muy desordenadas para mí en este momento. Por lo que me quedaré con Muestres y Estilos ahora mismo. Así es como usas tu guía de estilo para crear tu diseño y alinear tu diseño con los desarrolladores. Ahora, pasemos a la siguiente lección. 24. Herramientas en línea para Calcuations de cuadrícula: Siempre que diseñes algo, es realmente importante que planees tu diseño con tus calificaciones y guías y tu cuadrícula modular con mucho cuidado. Ahora, en el diseño web, los tamaños más comunes cuando comienzas para un diseño de escritorio, van a ser de 1280 píxeles. Por lo que hoy les voy a mostrar las herramientas en línea que pueden crear cuadrículas y guías con su sistema de grid que es utilizado mucho por los desarrolladores, que es bootstrap y otros grandes sistemas. Para un tamaño de escritorio, vamos a ver qué herramientas de cuadrícula se utilizan normalmente. Hay cuatro herramientas que te voy a mostrar en esta lección. Una es esta grid.guide, y el tamaño que vamos a utilizar es esta 1,280 y 12 columnas, y la relación exterior mayor es básicamente es margen. Entonces si quieres obtener algún margen afuera, puedes verlo calculado que el margen no es posible. Si vas a 1.0, hay algún margen. Se puede ver en esta zona rojiza de durazno, y el amarillo es básicamente nuestro tamaño de columna. Por lo que se puede ver el ancho de columna es 98, ancho de canalón es de ocho, pero necesitamos algo más. Tal vez 20 pixels ancho de canalón es bueno o tal vez si estás diseñando para algún sitio web de moda, posible que necesites espacios muy amplios entonces tal vez necesites este espacio de 32 o 44 canalones. Ahora, normalmente creo que iría con estos dos, 32 o 20 píxeles. Creo que estos son más que suficientes. Ocho píxeles es un poco más pequeño. También puedes cambiar a 1.5. Se puede ver si quiero cambiar a 1.5, me está mostrando pocas opciones como para ancho de canaleta 4, 10, 16, 22. Ahora, lo genial es que podemos descargar este archivo PNG, y se puede ver por aquí. Se trata de archivo PNG y subpatrón. Puedes importarlo fácilmente en Photoshop. Déjame crear un nuevo archivo. Tablero de arte nuevo 1,280 ancho, 2,400 altura y voy a usar tablero de arte. Comprueba esto, y solo crea esto. Entonces tenemos nuestro tablero de arte por aquí. Arrastremos esta guía y la peguemos por aquí. Vamos a dimensionarlo así y puedes ver esto es la representación de cuadrícula de tus rejillas y guías. Por lo que tenemos nuestra configuración de sistema de cuadrícula horizontal, columnas o la configuración del sistema de cuadrícula de columnas, y se puede ver que tenemos estos márgenes y todas estas otras cosas configuradas. Es así como creo las guías al instante, en lugar de crearlas con estas nuevas maquetaciones de guía. Esto es mejor porque luego los encierro para que no se muevan. Otra que es muy similar es ésta. Yo lo usé mucho tiempo, y lo genial es que puedes usar cualquier tamaño. Si voy a diseñar para una tableta, voy a usar 768, y tal vez pueda reducir ancho de canalón o tal vez mantenerlo igual, tal vez 28, y ahora voy a cambiar este número de columnas a ocho. Quitemos los márgenes. Así es como se crean sus sistemas de cuadrícula. Vamos a crear tres rejillas diferentes y los tamaños que estoy usando son 1,280. Por lo que también puedes usar 20 píxeles o tal vez 10 píxeles por aquí y 12 por aquí, así. Cambiemos el tamaño. Si utilizo 24 pixels canalón y velocidades de margen de 10 píxeles, puedes ver que esto se vuelve verde en lugar de rojo. Por lo que estamos usando 1,280 píxeles completos. Así que asegúrate de que cada vez que intentes crear una cuadrícula, está usando el ancho completo. Si vas a esta herramienta, esto es automáticamente haciendo todos los cálculos, por lo que no nos preocupamos por ello. También puedes dejarlo cero, puedes ver si lo dejamos cero tenemos 16 y 28. También puedes usar este. Este PNG es cuadrícula 28 ancho también es muy impresionante. Está más cerca de 30 y buen espaciado. También podemos usar este 16 uno. Por lo que cualquiera de estos dos puedes elegir. Estos dos son geniales. Ahora, pasemos a esta herramienta reguladora. También es lo mismo. El cool al respecto es si solo necesitas dos entradas ancho general y columnas. Entonces si ingresas estos, se va a calcular todas las combinaciones por ti mismo. Si establece el ancho de canalón en cuatro, puede tener 12 columnas con 103 píxeles de ancho, y también puede crear archivo PNG. Usemos este y veamos qué va a hacer y cómo va a quedar. Por lo que se veía así. También es muy buena herramienta para crear columnas y creo que el nombre es muy cool, 12 columnas, 70 ancho y 40 canalón. Una herramienta realmente bien dispuesta. Me gustó mucho cómo lo ha llamado también esta, estas dos herramientas son impresionantes. Ahora, la última herramienta que les voy a mostrar es este grid.org modular. Tiene algún cálculo raro porque tienes que hacer todo el cálculo tú mismo. Entonces insisto en que lo utilices con alguna otra herramienta como ésta o ésta. Sé que si configuro el ancho de columna en 81 y el ancho de canalón en 28, fácilmente puedo tener 12 columnas. Entonces en esto, voy a usar mi línea base que es de ocho píxeles. Te conté sobre el ritmo vertical del sistema de cuadrícula de ocho píxeles. Por lo que estamos utilizando sistema de cuadrícula de ocho puntos o marco de diseño de ocho puntos el cual es utilizado por equipo de diseño de Google y vamos a generar este diseño modular de acuerdo a esto. Entonces si no sabes qué es el diseño modular, necesitas ver mi curso tipográfico. Tan sólo una breve introducción de que vamos a dividir nuestro diseño en diferentes módulos. Se puede ver por aquí si cambio el tamaño a seis, se puede ver esta línea blanca básicamente está separando todo nuestro módulo. Puedes usar las alturas de tu módulo y algo así. Ahora estoy usando 12 columnas. Esta es básicamente nuestras columnas verticales así. Estos módulos son básicamente ritmo vertical. Por lo que se están utilizando para el ritmo vertical y estas son nuestras columnas. Nuestra base es básicamente de ocho píxeles, también puedes ajustar a 16 si quieres. Se puede ver así es como va a cambiar el diseño. También puedes ir por un múltiplo de ocho. Entonces si vas a 32 o 48, va a mostrar algo como esto. Ayuda a nuestro diseño a alinear fácilmente las cosas y a cómo espaciar diferentes elementos. Se pueden utilizar estas áreas blancas, estas líneas horizontales blancas para espaciar diferentes áreas y secciones. Ahora, lo genial de esta herramienta es que puedes descargar un patrón de Photoshop y lo puedes aplicar rápidamente en tu documento de Photoshop. Entonces déjame crear un nuevo documento. Voy a ir a Nuevo, y he guardado una plantilla sólo para crear rápidamente este 1,280. Haga doble clic, y tenemos esta capa uno. Voy a Alt Option Delete. Opción Eliminar herramienta rápidamente. Llénalo de color blanco, y ahora voy a hacer doble clic en esta capa y Opciones de mezcla. Voy a ir a Patrón y tengo a este Patrón que está bien. Por lo que 108 por 40 pixeles. Si voy a esto, se puede ver que hay más mecenas. Ahora puedes ver que he usado este y se ve realmente genial. Creo que el ancho de columna es de 28 y el ancho de canalón es de 28. Ahora hemos usado esto. Entonces si quieres algo de espacio alrededor de tu Lienzo, entonces para tableros de arte vas a ir a esta herramienta de tablero de arte y hacer clic en este tablero de arte y cambiar su ancho a 1,400. Vamos a alinear esta capa 1 en el medio, así. Para que puedan ver así es como consigo mi configuración de rejilla. Entonces si quieres usar tus rejillas y cuadrícula modular, hay otras formas en que también puedes usar un patrón. Crea un patrón con estas líneas de ocho píxeles y configura en Photoshop y puedes aplicar eso. Pero si solo tengo una capa para configurar todas mis columnas y mi ritmo vertical, y mis rejillas verticales y horizontales, entonces creo que esta es la mejor herramienta que es ésta modulargrid.org. Puede crear tu cuadrícula modular. Ahora, a veces cuando diseño, no uso esta cuadrícula de ocho píxeles en el frente. Simplemente sigo colocando cosas con sólo las columnas. Para los ajustes finos, vas a dejar tu diseño al final. Ahora te he dicho cómo voy a configurar mi rejilla, vertical y horizontal y las cuatro herramientas que puedes usar para configurar tus rejillas. Estos son realmente geniales. Para esta herramienta, puedes ver por aquí, déjame mostrarte, que puedes crear también un archivo de trasplante Adobe PNG y también un script. Entonces si quieres ejecutar un guión, eso depende de ti. Normalmente uso este archivo PNG. Entonces si hago click aquí, puedes ver que me va a dar una grilla. El problema con esta cuadrícula es que no me muestra ningún número. No me está mostrando cuánto ancho de columna o lo que sea que haya usado. Por lo tanto, asegúrate de nombrarlo correctamente. Entonces si voy a esto, canaleta de 24 píxeles y margen de 10 píxeles. Voy a volver a Photoshop. Nombra tu capa 1,280 y 24 canaleta, y lo que era 10 pixel 10 margen. Por lo que tu desarrollador sabe qué ajustes has usado construyendo tu sistema de grid. Siempre debes decirles que estás como usando estos ajustes. Alinémoslo en el medio así. Entonces así es como se presenta esta rejilla. Si quieres usar este, normalmente lo que hago es que superponga esto con color gris y además traté de hacerlo un poco así. Bueno, ocultemos éste así, y lo que hago normalmente es arrastrarlo así y llegar a la altura de todo el documento. Entonces vamos a bloquearlo y vamos a conseguir que ambos se agrupen en carpeta o grupo de cuadrículas. Entonces tenemos esta configuración de cuadrículas y así es como vas a configurar tus calificaciones y columnas y todo para empezar a diseñar tu diseño web. 25. Planifica tu cuadrícula para ver una vista de escritorio: Ahora, lo segundo es que también vamos a crear las otras vistas como 768. Se puede ver que ahora tenemos el problema. Podemos crear ocho columnas y se puede ver que está mostrando el ancho 780. El problema es que creo que necesitas conseguir diferentes tamaños perfectamente. Pasemos a esta calculadora y veamos qué cálculos podemos tener para los otros sistemas de cuadrícula. Entonces si trato de tener ocho columnas por aquí, puedo tener 16, 18, 24. Por lo que 16 y 32, son comunes en ambos. Supongo, si voy a 1,280 y 12. A ver. Tengo 16. Por lo que el tamaño de canalón de 16 columnas es común en todos ellos. Entonces creo que podemos quedarnos con este. También si voy a cuatro y 400 y voy a este cuatro. A ver. Tenemos 16 de nuevo. Creo que un ancho de canalón 16 es común en todas mis tallas. Además, sólo probemos este. Incluso si uso el ancho del iPhone, que es de 320 píxeles, todavía tengo 16 píxeles como mi ancho de canalón en las tres combinaciones que he probado. Entonces si voy al 960, vamos a ver. Incluso en 960 tenemos 16, 24. Tenemos 28 por aquí. Si voy a 16, tenemos 16 y 32. Entonces creo que vamos a usar 1,200 y usar 12 píxeles para que podamos ver cuántas combinaciones. Si utilizamos 1,200 tamaño de cuadrícula, tamaño de ancho, y con 12 columnas, el ancho de canaleta común es de 24. Entonces si me cambio a 768 y ocho columnas, todavía tengo 24, que es bastante aseado. Si voy a 400 y cuatro columnas, todavía tengo 24. Entonces 24, creo, es el ganador y también se puede ir con 1,200 píxeles. A ver si voy con 1,240 y 12 columnas, 48. A ver. También podemos usar algo como esto, 48. Podemos Podemos usar sistema de red 1,200 con 12 columnas y creo que podemos descargar el PNG desde aquí. Se puede crear un PNG muy bonito. Entonces depende de ti. Puedes usar 1,200 o 1,280 o 1,400. Depende de ti. También puedes usar 1,400 si quieres. Se puede ver ahora se ha desplazado a 28, pero 16 es común en todos ellos. Depende de ti, lo que decidas asegúrate de que tu ancho de canalón sea similar, pero creo que puedes usar cualquier ancho de canalón. Eso no es un problema si tienes un diseño móvil más pequeño, puedes cambiar el ancho de la canaleta. Ahora, la razón por la que estoy tratando de encontrar un ancho de canalón común es que creo que puede crear algún problema para tus desarrolladores, pero creo que es posible en el sistema de cuadrícula cuatro que puedas usar diferentes anchuras de canalones de columna. Pero creo que si intentas ejecutar a tu desarrollador en estos problemas, creo que en Bootstrap, que los desarrolladores pueden cambiar el ancho de canalón y tamaño de canalón para diferentes dispositivos o diferentes diseños como pequeños o tal vez grandes o medianos dispositivos. Entonces no te preocupes mucho por ello. Si realmente necesitamos cambiar el ancho de la canaleta, lo cambiaremos. Entonces en este momento, no necesitamos preocuparnos por cómo se va a implementar en su situación real o codificación real. Pero ten en cuenta que creo que es mejor que uses algo común donde tengamos el mismo ancho de canaleta en todos tus diseños con varios tamaños de columna, número de columnas. Esto termina mis cálculos de cuadrícula y haciendo rejillas y creando ritmo vertical para tu diseño. En la siguiente lección, vamos a empezar a diseñar algo y configurar esto todo de acuerdo a mi plan. Entonces pasemos a la siguiente lección. 26. Cómo usar el espacio blanco en el diseño web: Ahora, vamos a planear nuestro ritmo vertical, y nuestras rejillas y guías que vamos a montar en este ejercicio. Ahora, primero déjame mostrarte cómo se presenta todo mi diseño, y estoy usando sistema de cuadrícula de 8 puntos o marco de diseño de 8 puntos por aquí, que es Google Material Design prestado de Google Material Design. Si voy a estas rejillas, puedes ver por aquí, si trato de ocultar mis rejillas verticales, puedes ver que estoy usando 1200 píxeles de ancho y estoy usando 12 columnas. momento, en este ejercicio de diseño, mi ancho de canaleta es creo 30 píxeles. Pero voy a usar 24 píxeles solo para asegurarme de que vamos a usar nuestro sistema de cuadrícula de 8 puntos. No importa la distancia que elijas, asegúrate de que tu ritmo vertical, que es éste, estas líneas, deben tener ocho píxeles de ancho, por lo que ocho píxeles de alto. Puedes ver por aquí, si vas a esta zona, déjame acercar, ahora puedes ver cuánto espacio me quedé de arriba, 1, 2, 3, 4, 5. Entonces es 5 multiplicarse por 8 así que es, creo, 40, 40 píxeles en la parte superior. Nuevamente, se puede ver en la parte inferior, tenemos la misma distancia, 1, 2, 3, 4, 5. Nuestro ritmo vertical es casi después de cada cinco bloques. También puedes ver nuestro botón es 1, 2, 3, 4, 5, 6. Vamos a utilizar la misma técnica en nuestro diseño. Se pueden ver estas distancias. Estos son los puntos clave que realmente pueden crear muy elegante y muy singularidad en tu diseño. Por lo que tu diseño se verá muy elegante y fresco y limpio. Una misma técnica se puede ver por aquí, si voy a esta zona, se puede ver tenemos una distancia de 1, 2, 3, 4. Entre encabezamiento y este párrafo, tengo cuatro, entonces se puede ver aquí, de nuevo, tenemos cinco, supongo, 1, 2, 3, 4, 5. Así es como todo mi diseño está funcionando. Si vas a esta zona, puedes ver por aquí, de nuevo, entre estos dos rubros, subpartida y rumbo, tenemos 1, 2, 3, 4, 5 cuadras separadas. Es así como vamos a diseñar todo nuestro diseño. Estas distancias realmente importan. Se puede ver por aquí, de nuevo, en esta zona, tenemos 1, 2, 3, 4. A veces estoy usando 32 píxeles de distancia, y a veces estoy usando 40, y en pocos lugares de nuestras secciones, estoy usando 64 y a veces 96 píxeles. Si vamos a esta zona, se puede ver por aquí, son casi 60 y 96 píxeles de esta sección a esta sección. De esta zona otra vez, tiene, déjame mostrarte, así es 56. Es así como vamos a diseñar todo nuestro diseño. Antes de eso, asegúrate de tener todas tus muestras de color listas por aquí. Si no sabes cómo crearlos, solo tienes que seleccionar cualquier color y añadir a las muestras. Puedes hacer click por aquí, y se agregará por aquí. Normalmente, guardo muchas muestras. En su mayoría, las muestras que voy a utilizar están en la parte inferior, desde esta zona hasta esta zona. Ahora, pasemos a nuestras herramientas para crear esta cuadrícula de ocho píxeles. Ahora mismo porque mi movimiento de ocho píxeles no es fijo, a veces estoy usando cinco brechas, a veces usando cuatro huecos, algún momento usando siete brechas u ocho huecos, así que voy a usar sólo esta sola línea de ocho píxeles. Voy a usar algo parecido a esto. Hay muchas maneras de crear esto. Hay herramientas en línea, también puedes crear un patrón de píxeles, puedes ver por aquí, tengo esta superposición de patrones. Yo he creado este patrón. Vamos a “Desbloquear” esto. Déjame mostrarte. Yo he creado estos patrones, se puede ver por aquí, esto es ocho y esto es 16 pixeles, y esto es, creo que son 24. Por lo que estos son diferentes sistemas de cuadrícula de píxeles que puedes usar. También puedes usar 16 si quieres. A lo mejor simplifica tu colocación porque las rejillas son más anchas. Se puede ver que algunos de mis elementos están fuera de sincronización por aquí. Se puede ver por aquí, pero esto está casi a la perfección, se puede ver el rumbo. También el botón no encaja aquí porque tiene ocho píxeles y ocho píxeles en la parte superior, inferior. Pero se puede ver toda la idea del bloque está por aquí. Nosotros vamos a armar algo como esto. Entonces, empecemos y configuremos algo como esto. 27. Configuración de tablero de trabajo y cuadradas para la vista de escritorio: Ahora vamos a crear nuestra red modular utilizando este sitio web modulargrid.org. Vamos a usar ocho como nuestra línea base, ocho píxeles, que son estas pequeñas líneas, estas líneas verticales. Entonces tenemos nuestro módulo, 78, que es esta columna, este ancho. Entonces tenemos 12 módulos, que son 12 columnas por aquí. ancho de la canaleta es de 24 píxeles, que es esta área blanca. Este es el espaciado entre nuestras dos columnas. Entonces tendremos nuestra altura de módulo, que es uno. Porque si trato de poner cero aquí así, creó algunos problemas. Entonces uso este. Así es como se hace el diseño por aquí. Contamos con nuestro ancho total de 1,200. Haga clic en este “Descargar”. Tu patrón es descargar. Ahora, vamos a mover este patrón. Ya lo he movido, puedes copiarlo en tu carpeta de presets, dentro de la carpeta de patrones. A partir de eso, lo vamos a cargar en Photoshop. Ahora vamos a crear un nuevo archivo en Photoshop. Vamos a crear Nuevo. He luchado mucho con las mesas de trabajo y he aprendido mucho. Déjame mostrarte cuál es el proceso que vamos a utilizar, 1,200 por 2,400, y vamos a dar click en Tablas de trabajo. Trabajan de una manera muy rara. Hay muchos bichos en las mesas de trabajo. Realmente no me gustan para nada, pero tenemos que usarlos. Hay dos formas, si puedes usarlas por primera vez y seguir diseñando dentro de la mesa de trabajo o simplemente puedes crear cualquier documento sin mesa de trabajo. Entonces, cuando estés creando nuevo documento, desmarque éste y podrás crear un documento de 1,200 píxeles sin este artboarding. Creo que tiene una sensación de buggy por mí, así que ahora mismo me voy a quedar con esta mesa de trabajo. Veamos cómo va a salir. Ahora, para esta capa, vamos a crear otro rectángulo por aquí. Haga clic aquí, que deben ser mil 200. Ahora, por qué estoy creando esto. Te voy a decir en pocos minutos, altura va a ser de 24. Este es mi documento principal de rectángulo por aquí, rectángulo. He creado un rectángulo. Ahora, voy a hacer si voy a crear secciones de este diseño dentro de esta Mesa de trabajo 1. Yo he creado nuestra acción por aquí. Si no sabes cuáles son las acciones y cómo crearlas, necesitas ver mis otros cursos o puedes ir en línea. Es muy fácil. Voy a compartir esta acción contigo, al menos necesitas saber cargarlas. Voy a crear diferentes carpetas. Se puede ver por aquí, Cabecera de cuadrícula, Navegación, todo. Está dentro de esto. Vamos a mover esto dentro de la Cabecera. Ahora, voy a duplicar mi rectángulo y lo voy a mover dentro de la cuadrícula. En la Cuadrícula, ya he descargado la grilla que está en mis patrones. Voy a usar Pattern Overlay, y voy a usar la Grid. Vamos a colorearlo blanco. También voy a colorear este blanco, va a ser nuestro fondo. Voy a bloquear esta capa por aquí, y esta va a ser nuestra rejilla. También puedes nombrarlo como 1,200, canalón de 24 píxeles o algo así para asegurarte de que recuerdes que es así. Así es como es mi estructura de carpetas o grupos que he creado dentro de mi mesa de trabajo. También puedes cambiarle el nombre a escritorio, algo así. En esta área vamos a diseñar. Veamos cuál es el tamaño de esto. Se va a igualar 1,200, y voy a ver cuál es el tamaño de esta capa. También son mil 200, pero no sé por qué esto se estropeó por aquí. Veamos cuál es nuestro patrón. Basta con hacer click en este “Snap to Origin” y creo que el patrón estará en su ubicación. Entonces presiona “OK”, y vamos a ver. Amplíe eso nuestra columna, que todo esté alineado. Todo está bien. Ahora, podemos empezar a diseñar en esta área. La segunda opción es que voy a ampliar mi mesa de trabajo a 1,400 solo para conseguir algo de espacio a su alrededor. Entonces, veamos, no he hecho clic en la mesa de trabajo. Asegúrate de hacer clic en la mesa de trabajo, selecciona la mesa de trabajo en el panel de capas y elige el tamaño así. Ahora, voy a alinear mi cuadrícula dentro de esto, así. Es así como vas a crear un documento de 1,400 píxeles. También puedes crear 1,400 documento en el inicio. Voy a llenar este documento con el mismo color. Creo que es tamaño está un poco apagado, así que voy a redimensionarlo así. Este es mi fondo, voy a, de nuevo, cerrarlo para que no me mueva por las cosas. Básicamente voy a alinear las cosas con este trasfondo. Es así como se configura nuestro documento principal y así se va a utilizar las mesas de trabajo. Entonces si no usas mesas de trabajo al principio, al final vas a seleccionar todas tus capas, algo así, y vas a hacer clic derecho en Mesa de trabajo desde Capas o Grupos. También puedes ir a esta zona y puedes ir a Mesa de trabajo desde Layers. Por lo que vamos a seleccionar todas nuestras capas y todo dentro nuestro diseño y vamos a crear mesa de trabajo a partir de ahí. Entonces estoy usando el segundo método, que es que estamos empezando con una mesa de trabajo. Contamos con nuestra configuración de rejilla. En la siguiente lección, vamos a diseñar nuestro encabezado, y te voy a mostrar qué cosas necesitas para abrir al mismo tiempo cuando vas a diseñar un encabezado. Entonces sigamos adelante. 28. Diseño de áreas de jefe/héroe parte 1: Ahora, empecemos nuestro diseño que hemos creado en la última lección. Guardémoslo con algún nombre, como wstudio. Ahora he abierto todos los documentos que necesito. Uno es este contenido. Necesito este contenido abierto. Entonces necesito este documento donde tenemos nuestro logo, que es archivo Illustrator. Las otras cosas que necesitas son esta imagen que estoy usando, que básicamente son mis activos. Voy a usar esta imagen, que es imagen libre de regalías. Además, voy a cargar mi Guía de Estilo de UI en Photoshop. Voy a cargar este sitio ahora en mi Photoshop así. Lo primero que vamos a hacer es que los vamos a arreglar para arriba horizontal así. Tengo esta Guía de Estilo de UI cargada en la parte superior así, y mi diseño está por aquí. Vamos a subirlo un poco y voy a hacer clic en este y acercarme al 100 por ciento. Ahora, vamos a seleccionar este encabezado. Voy a seleccionar este encabezado, navegación, y logotipo, y voy a agarrar mi logo desde aquí. Copia. Yo lo voy a pegar por aquí, Control V, Comando V, Objeto Inteligente, y va a ser un Objeto Inteligente. Ahora, para la grilla, vamos a hacer que sea 20 por ciento para que podamos ver a través de ella, y yo la voy a bloquear. Hagámoslo 10 por ciento. Creo que el 20 por ciento es bueno. Voy a cerrarlo y me voy a mover. Una vez que bloqueo esto, puedo hacer clic en cualquier capa detrás de esto. En este momento solo los estoy alineando sin usar distancias ni espacios. El siguiente paso es que vamos a utilizar este texto corporal, que van a ser nuestros enlaces. Voy a dar click aquí una vez. Ahora vamos a sacar el contenido de aquí. Voy a copiar estos enlaces de este documento de navegación superior, y lo voy a pegar por aquí así. También voy a colorear esto. Ya tengo esta paleta de colores, así que asegúrate de tener esta paleta de colores. También puedes crear variaciones de esos colores como he usado este. Un poco más oscuro, de color grisáceo. Escondemos la grilla por aquí. Vamos a crear unas guías a su alrededor para que conozca el límite, al menos. Voy a ocultar mi cuadrícula ahora mismo sólo para poder diseñar libremente. Ahora, voy a crear un botón negro por aquí, que estaba en nuestra guía de estilo por aquí. Este es el botón normal. Vamos a hacer clic en esto y voy a agarrarlo. Esta es nuestra capa, y la voy a agarrar y arrastrarla hasta aquí. Este es nuestro botón ahora mismo. Démosle un nombre, “Consigue una cotización” algo así. Vamos a usar regular por aquí. El tamaño del lector regular de 20 píxeles, y el tamaño del botón debe ser de 144 por 40 porque vamos a usar botón pequeño. Este va a ser un pequeño botón. Control T o Mando T, 144 por 40. Asegúrate de no haber hecho clic en esto, lo contrario va a estropear tu altura y ancho. Voy a bajarlo un poco así. Creo que veo algo de espaciado, así que voy a quitar esto de aquí. Básicamente está rastreando. Se ve raro. Fue demasiado, tal vez cinco es bueno. Voy a mover esto con esto. Asegurémonos de que lo vamos a alinear por aquí. Seleccionemos esto y alinémoslo aquí. Se puede ver que vienen los chicos inteligentes, están alineando las cosas con éstas. Voy a alinear todo así. Creo que mi esquina redondeada es un poco demasiado, así que voy a usar cuatro píxeles por aquí así. Se ve bien. Tenemos “Consigue una cotización” y sección superior casi hecha. A continuación, es nuestro encabezamiento y párrafo y botón por aquí, y luego agregamos imagen de video por aquí. Antes de eso, vamos a establecer la altura de nuestra zona superior. Vamos a crear la altura de 800, algo así. Lo que voy a hacer es, voy a crear 800 píxeles de alto algo aquí como esto. Ahora, por qué necesito este bloque para conseguir la sección superior. Voy a crear una guía, así. Está en 800. Ahora lo voy a borrar. Creo que ahora debería pasar a este azulejo así. Tengamos algo de espacio por aquí. Además, podemos alejar un poco para que sea más fácil para nosotros. Tengo más espacio por aquí. Ahora necesitamos agregar uno, solo arrastra esto, y borra todo lo demás. Voy a usar el Título 1. Creo que lo borré todo. El tipo de letra es Yorkten, y vamos a usar 54, y también voy a usar la altura de línea para ser 54. También puedes usar 56 si quieres. Ahora tenemos nuestro rumbo por aquí, alinémoslo al azar. No te preocupes demasiado por el alineamiento, vamos a arreglar eso una vez que estemos en nuestra grilla. Ahora necesitamos un párrafo por aquí y vamos a seleccionar nuestra herramienta D y texto y arrastrar algo como esto. Vamos a copiar esta área, este párrafo, y pasar a Photoshop. Tiene Nunito Sans, Regular, y 20 píxeles o 20 puntos, y vamos a usar 24 por aquí. Veinticuatro es básicamente nuestra altura de línea. También es un múltiplo de ocho. Se puede ver que este color se ve muy afilado, por lo que vamos a hacer aburrida así. Especificamos este color en tu guía de estilo. Puedes ver por aquí si vas a esto. Podrás ver estos son los colores para tu gris oscuro y claro. siguiente paso es que vamos a crear un botón por aquí. Para eso, teníamos nuestro estilo de botón, que era éste. Voy a arrastrar y soltar mi botón por aquí. Es decir, “Empieza ahora”. Este es nuestro botón. Alinémoslo en el medio así. Esto se ve bien. BTN-Main. Este es nuestro btn-main. Vamos a moverlo dentro de nuestra zona de cabecera. Esto va a ser por aquí. ¿ Qué es esto? Creo que es nuestro botón. Vamos a alejarnos. Es bar btn-quote-nav. Está en la navegación. Voy a moverlo a navegación y logo, navegación, y logo, navegación y logo. Vamos a renombrarlo a “Logo”. Este es nuestro objeto inteligente vectorial, éste. Ahora vamos a mover este botón por aquí. Selecciona este botón, V, y voy a moverlo así. No te preocupes por la alineación vertical, vamos a meter eso después de que vamos a arreglar todo el diseño. Ahora vamos a crear algo por aquí. Tenemos pocas capas afuera. Tenemos que moverlos dentro de la cabecera. Ahora vamos a encender nuestra cuadrícula porque necesitamos nuestra cuadrícula ahora mismo, y creo que la necesitamos al menos 50 por ciento para poder ver cuál es el tamaño de mis columnas. Tenemos estas columnas por aquí. Vamos a crear un rectángulo, y voy a crear un rectángulo como este. Esta va a ser nuestra área de video. Puedes crear o pegar cualquier imagen por aquí. Tengo una carpeta llena de imágenes gratis, déjame mostrarte. Aquí está la carpeta que tengo de imágenes libres de espacio de trabajo, así que voy a agarrar cualquier imagen de aquí y la voy a arrastrar mi Photoshop y lo vamos a mover por aquí así. Entonces esta es nuestra imagen. Yo lo voy a colocar dentro de esto. Algo así. Vamos a agruparlo y llamarlo “Video-area”. De nuevo, va a estar dentro del encabezado o puedes llamarlo área de héroe o lo que sea, depende de ti. Voy a arreglar algunas cosas. Entonces video-area y va a tener alguna superposición en ella. Voy a usar alguna superposición en esta área. Pasemos a Estilos de capa, Overlay de gradiente, y vamos a utilizar el mismo gradiente que teníamos, tal vez éste. Todos tenemos estos gradientes en nuestras guías de estilo, creo. Veamos dónde va a estar. Vamos a hacer que sea algo así. A lo mejor podemos usar superposición o multiplicar o tal vez oscurecer. Sigue intentándolo hasta el momento que vas a conseguir. Voy a usar superposición con normal. Esto se ve bien. 29. Diseño de áreas de jefe/héroe parte 2: Puedo agregar más si quiero gustarme esto. Entonces así es como se ve. Puedo usar cualquier otro, tal vez como éste. De nuevo, creo que tenía algo de sombra en el fondo de esta zona. Entonces voy a añadir sombra en este rectángulo. Así que ve a Estilos de capa y Sombra suelta. Entonces tengo esta sombra. Puedes usar cualquier color para esta sombra o tal vez algún color más oscuro al azar desde aquí. Entonces voy a usar este color ahora mismo. Tamaño, voy a usar 10, muévelo cinco píxeles. Entonces creo que se ve genial. Noventa, algo así. A lo mejor podemos usar algún color más oscuro a su alrededor. Entonces algo por aquí. Así es como estoy usando algo de sombra por aquí. Ahora, podemos agregar algún botón por aquí, lo cual es muy fácil. Vamos a utilizar una herramienta Elipse. Sostenga “Shift” para las proporciones. Entonces tengo este eclipse y va a ser blanco por aquí. Entonces necesitamos un botón Play que va a estar en nuestras herramientas de forma personalizadas. Por lo que es básicamente un rectángulo redondeado. Se puede ver que está seleccionado, es necesario encontrarlo. Si no puedes encontrarlo, necesitas habilitar todas tus formas por aquí. Entonces lo que voy a hacer es que lo voy a arrastrar así. Coloralo morado, creo que era este morado, y lo vamos a mover en medio de esto. Entonces lo voy a mover en medio de esto. También lo voy a colocar con mis ojos. Así que asegúrate de entrenar tus ojos. Si es proporcional te gustará. Es así como he creado casi la sección superior de mi encabezado. A lo mejor necesito conseguir los gradientes. Veamos qué otros efectos podemos tener. La luz lineal también se ve bien. También la luz dura se ve genial. La luz suave también se ve bien. Luz y color, solo color esquivar lineal, aclarar pantalla, quemar lineal, quemar color, multiplicar, oscurecer. Entonces vamos a usar lo normal con opacidad así. También puedes aumentarlo si quieres, algo así. Se ve bien. También puedes usar color, que es éste, este morado azulado. Se ve mejor por aquí. En el botón Original, creé otra sombra de gota, que es ésta. Se puede ver aquí tenemos tres sombras, puede ver este es el gradiente, y luego tengo una sombra que es sombra azulada. También puedes usar este color púrpura azulado para esta sombra. Si quieres hacerlo un poco más oscuro, puedes aumentar la saturación así y depende de ti. Acerquémonos para ver qué está sucediendo realmente con el botón. Por lo que puedes ver aquí tenemos algunas sombras. Aumentemos la otra sombra, que es ésta. Hagámoslo un poco más aburrida así y aumentemos su tamaño. También lo vamos a multiplicar más así. Se ve mejor ahora. Si quieres ocultar este color demasiado afilado a su alrededor, que es azul, más bien puedes agregar este color, por lo que es un poco de azul púrpura. Ahora, se ve mejor y más elegante. Ahora es el momento en que lo vamos a alinear con nuestra grilla. Entonces voy a encender mi grilla. Lo primero que voy a hacer es, veamos cuál es el tamaño de esto. Altura, voy a coincidir con la altura de mi logo. Voy a presionar esto con mi grilla, 48. Por lo que va a caber dentro de mis barras, ocho barras de píxeles. También voy a uno, dos, tres, cuatro. Para que puedas usar algo como esto. Cuatro líneas de arriba y luego vamos a alinear esta zona con ésta, como ésta, dos, tres, cuatro, cinco. Entonces tal vez creo que lo colocaré por aquí. Entonces cinco de arriba. Ahora, para el botón, lo voy a alinear así. Por lo que es casi alinear en el medio. Creo que desde arriba es uno, dos, tres, cuatro, cinco. Por lo que son 40 píxeles de arriba. Estos realmente importan, asegúrate de que esto va a ser así. Ahora sobre esta zona, vamos a expandirla un poco así. Ahora tenemos nuestra área de video y es nuestra obra de teatro. Agrupémoslos juntos. Botón Play-BTN o Reproducir. Por lo que tenemos nuestro área de video, vamos a dimensionarlo de acuerdo a nuestra grilla. Voy a tamañarlo así y desde aquí así. Entonces veamos qué es lo que está más cerca de la 591. Quinientos noventa y uno dividen por 8. Entonces creo que necesitamos 74 multiplicados por 8, 592. Entonces voy a tamaño 592, así, y va a encajar perfectamente en mi grilla. Creo que no necesito preocuparme por esto. Ya creo que dentro de esto, alineado con el tamaño. Nota sobre las columnas. Se puede ver por aquí, estoy usando dos columnas para esto. Entonces voy a usar esto; una, dos, tres, cuatro, columnas para esto. Por lo que estos enlaces están tomando una, dos, tres, cuatro columnas. Se pueden ver estas cuatro columnas. Esto realmente va a ayudar a tus desarrolladores a alinear todo, algo así. Después tenemos nuestro logo en estas dos columnas. Otras cuatro de tres columnas están vacías. Por lo que necesitas no preocuparte por estos. Ahora, vamos a alinear nuestro texto en nuestras líneas así. Vamos a moverlo un poco por aquí y vamos a mover nuestro botón dentro de la cuadrícula. Algo así. Ahora, vamos a ocultar nuestra cuadrícula y alejarnos para ver qué tan proporcionado es nuestro diseño. Se ve genial. Ahora bien, si quieres agregar la siguiente área o siguiente sección, puedes agregarla por aquí. Agregamos alguna superposición de esta área con nuestra siguiente sección. Ahora, en la siguiente sesión vamos a crear la siguiente sección de este diseño. Entonces pasemos a la siguiente lección. 30. Diseño de la sección de pasos parte 1: Ahora en esta lección, vamos a crear la segunda sección, llamamos la primera sección, Sección 1 y se puede ver que nuestro encabezado está casi completo. Son pocas las cosas que me perdí por aquí, que es una línea, que es ésta. No dejes que tu cliente abandone tu sitio web con los primeros tres segundos. Entonces lo que voy a hacer es que voy a conseguir esto en esta área, seleccionar T o texto, y lo vamos a pegar por aquí. Haga clic derecho y conviértelo a texto de párrafo. A lo mejor no va a estar en forma en esta zona. Vamos a crear un párrafo. Va a ser así. Veamos qué está pasando por aquí. Tenemos esto. Alinémoslo a la izquierda, para que se vea mejor. Alinearlo en el medio o tal vez lo alinearemos después. Vamos a establecer el tamaño de la fuente, que va a ser Yorkten Normal Bold, y va a ser, ¿qué escala teníamos? Veinticuatro es bueno. Lo tenemos por aquí. Entonces vamos a usar 24, y va a ser Yorkten Normal Bold. También podemos usar 24 y tal vez 28. Nosotros queremos por aquí, así. Creo que 24 se ve bien. Nuestra altura de línea será de 28. Entonces tenemos esto por aquí. Enciendamos nuestra grilla, algo así. Ahora lo que vamos a hacer es que necesitamos alguna superposición por aquí. Acerquemos y veamos dónde tenemos esto alineado. Algo así. A lo mejor podemos usar esta columna por aquí. Por lo que es más fácil alinearse así. Ahora la segunda porción que vamos a hacer es que primero vamos a crear el color de fondo de o la capa de fondo de esa porción. Vamos a mover esta Sección 1, y voy a agarrar mi herramienta de rectángulo y vamos a arrastrar algo similar a esto. Algo así. Vamos a ajustar el tamaño después. Entonces no te preocupes por ello. Simplemente arrástralo así. Nuestro color se va a expandir a ambos lados. Vamos a moverlo algo así. Ahora por esto, no sé cuál es el problema con esto. Haga doble clic, y estamos usando este color, que es f2f4f7. Es un poco azulado, esta sombra por aquí. Si voy a este tono y sigo aumentando el brillo y sigo reduciendo la saturación, así. Entonces voy a conseguir algo por aquí. Voy a conseguir la mitad de esto. Algún color el cual es un poco azulado gris o blanco azulado muy claro. Así es como conseguí este color. Lo estoy usando 5-2-5-4-5-7. puede ver que está muy cerca de la tonalidad de esto. Por lo que es 226 y es 223. La saturación es de dos, brillo en 97. Voy a presionar “Ok”. Veamos dónde está el límite de esto. Vamos a subirlo un poco. Multiplicemos nuestra grilla. Entonces vamos a usar multiplicar algo como esto o tal vez oscurecer. Entonces esta es mejor vista. Este es un truco que acabo de descubrir hace unos días que puedes crear algo esto, y lo vamos a nombrar fondo. Entonces este es nuestro BG. Se puede ver. Vamos a colorearlo otra cosa, para que podamos alinearlo fácilmente. Ahora creo que está alineado, y vamos a colorearlo oscuro y vamos a ocultar nuestra cuadrícula. Se puede ver cómo nuestra sección se está moviendo a la siguiente sección, y tenemos algo de sombra aquí en esta sección. Ahora de aquí en adelante vamos a crear algunos estilos. Vamos a crear textiles combustibles. Para que podamos reutilizarlos una y otra vez. Este es nuestro estilo básicamente de párrafo. Entonces pasemos al estilo de párrafo. Si no ves nada aquí, puedes ir a Ventana y habilitar estilos de párrafo por aquí. Voy a crear un nuevo estilo de párrafo. Hice doble clic en él y seleccioné textos completos y voy a crear nuevos. Este es nuestro estilo de párrafo gris. Este es nuestro estilo de párrafo gris. Presiona “Ok” y pasa a este, y luego vamos a volver a hacer doble clic en esto. ¿ Qué está pasando por aquí? Vamos a quedarnos con eso. Vamos a seleccionar esto, crear un nuevo estilo y va a ser nuestro rubro 1, rúbrica 1 o encabezamiento principal. A pesar de que no lo vamos a utilizar una y otra vez supongo, pero creo que van a ser encabezados de sección. Va a ser rubro de sección. Se va a guardar todos los colores y todo. Te voy a mostrar cómo nos va a ayudar al final. Este es nuestro encabezamiento de sección, y creo que necesitamos un estilo más, que va a ser éste. Voy a seleccionar este. Voy a crear un subepígrafe blanco. Va a ser nuestro subtítulo blanco, y vamos a guardarlo así. Una cosa más, vamos a crear un subtítulo de este color. Por lo que voy a crear otra en la siguiente sección. En primer lugar, lo que vamos a hacer es trasladarnos a esta zona, que es esta Sección 1. Asegúrate de estar dentro de ella. De lo contrario vas a dar click afuera en alguna parte. Ahora tenemos esto, este es nuestro rubro y este es nuestro subtítulo. Pasemos a esta zona y voy a seleccionar T. Este es un truco muy bonito que he descubierto, presiona turno mientras vas a dar click, lo contrario se va a escribir para este camino o esta forma al fondo. Entonces tengo algo como esto. Pega por aquí, y voy a usar mis estilos, que es mi estilo de párrafo. Tengo encabezamiento de sección y haga clic en este. Tenemos nuestro estilo de vuelta. Ahora vamos a usar el subtítulo, que va a ser algo así. Si seleccionas cualquier capa, capa de texto en Photoshop, hay un truco muy bonito que si he seleccionado este y luego hago clic en este icono de texto, se va a crear el texto en el mismo estilo, color y tamaño de fuente, en el que hace poco hice clic. A veces me resulta muy difícil encontrar las fuentes que tengo. Entonces lo que hago es, solo hago clic en la capa que me gusta y luego vuelvo a la carpeta o grupo y luego hago click dentro y me va a dar el mismo todo. Entonces probemos esto. Control C y lo voy a pegar por aquí así. Ahora voy a usar un color. Creo que usé este color en mi diseño. Entonces, sí. Tenemos este color. Ahora aquí, vamos a crear otro estilo, estilo de párrafo. Voy a hacer doble clic en él, y voy a hacer clic en éste. Este va a ser nuestro subrubro púrpura. Subhead púrpura, algo así. Para que puedas recordarlo. Subhead blanco, algo así. Yo lo necesitaba este. 31. Diseño de la sección de pasos parte 2: Entonces tenemos nuestro subtítulo púrpura por aquí. Ahora vamos a crear la siguiente sección que va a ser nuestros iconos y sus detalles por aquí. Entonces lo que voy a hacer es el mismo truco. En primer lugar, veamos el proceso que tuvimos. Evalúa tu negocio y diseña para los usuarios, prueba productos en tus usuarios reales, comercializa tu producto. Ahora primero vamos a conseguir todos estos textos. Entonces antes de eso vamos a crear sólo una muestra. Una cuadra. Entonces primero, el primer bloque va a ser éste. Este es nuestro primer bloque. Voy a meter esto en esta zona. Voy a dimensionarlo en consecuencia tal vez creo que necesito un tamaño de 128. Creo que 128 es bueno, con buen aspecto. Alejemos el zoom y veamos cómo está dimensionando. Sí, creo que se ve bien. Entonces vamos a crear un subtítulo por aquí, que va a ser, “Evalúa tu negocio”, así que voy a usar evaluar tu negocio por aquí. Evalúa tu negocio. Este es nuestro primer paso y vamos a utilizar algo más cercano a esto. A lo mejor éste. Creo que un poco más oscuro es bueno. Entonces tenemos esto. Por qué no he creado un estilo para éste es porque no necesitamos un estilo por aquí, vamos a usar 20 así, y creo que esto es bueno. A lo mejor necesitamos algo parecido a esto. Entonces ya casi lo tenemos hecho. Basta con copiar el resto del texto, Ctrl C y voy a crear un párrafo por aquí así y voy a centrar alinearlo. Apliquemos nuestro estilo de párrafo, que es párrafo gris. Entonces no necesito anular mi estilo, así que hice esto. Ahora vamos a encender nuestra grilla porque vamos a usar tres columnas por aquí. Entonces vamos a pasar por aquí y esto es lo que pasa mucho conmigo que no hice click dentro del área correcta. Entonces voy a pasar a la sección 1, Ctrl G y va a ser mi paso 1. Ahora movámoslo dentro de estas tres columnas. Lo tenemos casi en medio de estas tres columnas. Ahora lo segundo que vamos a hacer es que lo vamos a alinear para que no tengamos que alinear todo de nuevo. Entonces, alinémoslo así. Creo que se ve bien. Esto va a ser W mayúscula, y tenemos nuestro primer paso terminado. Ahora vamos a replicar esto en las otras tres columnas. Yo sólo voy a reemplazar el icono y el texto. Entonces lo voy a hacer muy rápido. Entonces voy a Ctrl G o Comando J y lo voy a mover por aquí así. Asegúrate de que una vez que traigas tu otro ícono por aquí, los nombres correctamente y los dimensionas correctamente para que no oculte el ícono anterior, solo copio el otro y lo tamaño dentro de esa cuadrícula. Voy a usar 128 por lo que esto se va a alinear correctamente. Necesitas recordar de qué talla usaste. Voy a borrar el anterior. Entonces así es como voy a copiar todo y voy a replicar estos cuatro pasos. Ahora hemos completado nuestra tarea repetitiva. Hay una cosa más que puedes hacer. Se puede ir a esta rejilla superior y vamos a dividir esto en cuatro secciones para asegurarnos de que estamos usando todo con precisión. Lo que vamos a hacer es que vamos a habilitar a nuestros guías. Ocultemos nuestra grilla. Vamos a usar nuestro Griddify y lo vamos a dividir en cuatro verticales. Entonces asegúrate de que sea vertical así y lo vamos a dividir así. Entonces ahora tenemos cuatro áreas por aquí, hay algún problema. Hagamos primero la selección de esta zona así. Entonces los vamos a dividir así. Esto es perfecto. Entonces Ctrl D o Comando D para ocultar la selección y creo que tal vez GuideGuide plug-in podría funcionar. Ahora mismo nuestro todo está alineado. También puedes crear estas guías en el inicio de tu documento porque ahora lo he ampliado con 1,400, por lo que mis guías no están funcionando. Veamos si puedo crearlos con mi plug-in GuideGuide, despejemos las guías y voy a usar mi plug-in GuideGuide. Veamos si puede crear algún margen. Entonces 12 columnas, el ancho va a ser 78, canaleta va a ser 24, y es centro. Entonces voy a añadir guías. Entonces tengo mis guías y este plug-in realmente me ha salvado el día. GuideGuide, debes tenerla. Entonces acabo de hacer una selección y creé las guías a su alrededor para que puedas ver que está perfectamente sobre mi maquetación, que está detrás de eso, así que es mi mecenas. Puedes usar esto para alinearte fácilmente, puedes hacer selecciones como estas y alinear tus elementos. Entonces la siguiente voy a crear en la siguiente lección porque estos están tomando mucho tiempo. Alinémoslo en el medio. Perdón. Asegúrate de mover todos tus elementos en las áreas adecuadas. Al igual que tengo este problema por aquí, así que este es el paso 4. También puedes mover todos estos a otro grupo llamado pasos. Se va a simplificar así tu trabajo. Está en medio, así que puedo esconderme y mostrarles así. Es así como vamos a crear diferentes lineamientos y guías aunque haya ampliado el tamaño de mi documento. De lo contrario, el sistema de guía por defecto de Photoshop no está funcionando. Está creando guías sobre todo el documento. Entonces pasemos a la siguiente lección. 32. Diseño de la sección de comentarios de usuarios: Ahora, en esta lección, vamos a ajustar parte del ritmo vertical de esta área, y también vamos a crear dos reseñas de usuarios por aquí. Empecemos. En primer lugar, vamos a ocultar esta cuadrícula porque tenemos nuestras columnas por aquí. Gracias al plugin GuideGuide por aquí, realmente me salvó el día. El primer paso es, voy a crear un eclipse por aquí de 64 o tal vez 96 píxeles por 96 píxeles. Asegúrate de estar dentro de la capa o sección correcta. Otra sección, vamos a moverlo en la parte inferior y crear un grupo. Crear un grupo denominado reseñas de usuarios. Tenemos nuestro primer usuario. Vamos a crear uno y duplicarlo. Creamos un bloque y lo vamos a repetir. A esto se le llama repetición en términos de diseño. Pasémoslo a la sección 2. Vamos a cambiar el nombre de esta sección 2 a reseñas. Usa las opiniones de los usuarios y voy a colorearlo de blanco. No estoy seguro de por qué esto no está funcionando porque creo que tenemos antecedentes. Vamos a moverlo por encima del fondo. Ahora, tenemos nuestros antecedentes. Voy a moverlo en la sección 1. También podemos llamarlo reseñas de sección. Asegúrese de que su organización y arreglo sea buena. Ahora, voy a tener algo de frontera a su alrededor. Va a ser trazo, y voy a usar un trazo de 4 píxeles, y va a ser este color nítido. A lo mejor éste. Esto se ve bien. Estos son los colores que edito desde esta zona, esta, y vamos a utilizar un usuario de plugins UberFaces. Si bien tu capa está seleccionada, vas a hacer clic en esta, y tenemos a nuestro único usuario por aquí. Vamos a usar algún texto por aquí. Este va a ser nuestro nombre. Vamos a crear 20. Usa 20 píxeles y los vamos a mover a ambos en esta zona. Lo que intento hacer es, estoy usando todas estas columnas por aquí y estas seis columnas para la segunda revisión. Vamos a moverlo así. Voy a acercar. A lo mejor podemos usar sólo otra fuente, que va a ser Nunito Sans. Veamos cómo se va a quedar por aquí. Nunito Sans Regular. Se ve mejor. Coloremos este. Usemos el semi audaz Nunito Sans por aquí y vamos a usar el color oscuro, que va a ser éste. Algo así. Se ve mejor. Veamos qué tan audaz se ve. El negrita se ve mejor, supongo. Nosotros hemos puesto este estilo aquí así. Es un estilo personalizado, así que no te preocupes por ello. También podemos cambiar y alterar fuentes al final. Afinación fina, mantener eso al final. Si alguien está pintando un auto, van a afinar todo al final. Presionemos Shift y arrastrémoslo así. Ahora mismo, voy a pegar un poco de Lorem ipsum desde aquí. Pegar Lorem ipsum. Voy a usar el textil por aquí, que era estilo de párrafo, donde es nuestro párrafo gris. Esta es nuestra primera revisión. Voy a alinear esta cara con la crítica así, algo así, y ésta también con ésta. Yo lo voy a alinear con esta elipse. Perdón, ¿cómo lo llamamos? Elipse. Elipse, no eclipse. Está relacionado con la luna, supongo. Tenemos nuestra opinión de usuario creada. Veamos qué tenemos en nuestra revisión de usuarios. ¿ Dónde está nuestro texto? Muévelo a la revisión del usuario y ahora tenemos nuestro bloque completo. Ahora, asegúrate de tener un espaciado constante desde el lado izquierdo. Uno, dos, uno, dos, tres, cuatro. Estoy usando 24 píxeles de aquí. Si quieres conseguir esto un poco más de tiempo, puedes usarlo algo como esto. A lo mejor algo como esto. Esto se ve bien. Ahora, tenemos nuestra revisión lista. Ahora, vamos a duplicarlo y vamos a duplicar a todo el grupo. Uno, dos, uno, dos, tres, cuatro. Básicamente, también tiene la misma distancia. Veamos si podemos alinearlo aquí. ¿ Cómo se ve así? Todavía se ve bien, por lo que no necesitamos preocuparnos por las alineaciones. Ahora, vamos a cambiar la imagen por aquí. Vamos a, de nuevo, usar esto. Trajamos unos hombres por aquí. Crea otro. Este se ve bien. Tenemos esto por aquí. Vamos a moverlo dentro de esto. Vamos a mover este. Eliminemos ambos y solo seleccionemos éste, y lo voy a recortar dentro de él. Esto es bueno. ¿ Cuál era el nombre de eso? Carl Bates. Usemos este Carl Bates. Ahora, tenemos nuestras reseñas alineadas. También puedes usar algo como esto. A lo mejor puedes centrar alinear estos y mantener éste a la izquierda. Vamos a habilitar nuestras capas, y vamos a centrar alinear este nombre, y simplemente agruparlas. Nombre, imagen. Vamos a centrar alinearlo usando este. Estas columnas, alinémoslas en el centro y en el medio. Hagamos lo mismo por este. También puedes dejar fuera toda la columna por aquí para esta y también esta. Voy a hacer doble clic en él para redimensionarlo y algo así. Hay muchos estilos. Podrás equilibrar estos problemas y los problemas de espaciado amplio más adelante. Ahora, puedes ver que se ven más equilibrados. Ahora vamos a ajustar nuestro ritmo vertical. 33. Ajustar espacio y ritmo vertical: Ahora, en esta lección vamos a finalizar esta segunda sección y vamos a mover las cosas para que nuestro espaciado vertical sea correcto. Creo que siempre debemos terminar así nuestra sección. Ahora lo que voy a hacer es que voy a ver cuáles son los espaciados de mis diferentes elementos por aquí. Se puede ver por aquí tenemos este uno, dos, tres, cuatro, cinco, seis, siete, ocho. Va a ser 48 casi. Hazlo dentro del medio de estas líneas. Esta es la porción que estoy usando, todo este bloque para alinear esto. Entonces para este, lo voy a alinear desde aquí abajo de esta sección uno, dos, tres. Creo que es un poco más lejos. Creo que éste se ve bien. Tres cuadras me estoy moviendo o usando dentro del medio. También puedes usar algo como esto, tal vez dos cuadras. lo que hablo dos bloques significa estos dos bloques, uno blanco y otro rojo. Esto se ve bien. Ocultemos nuestra grilla y veamos cómo se ve. Se ve bien. Las distancias buenas. Veamos cuáles son las otras distancias para nuestros otros pasos e iconos. Estos son nuestros pasos. A lo mejor puedo usar uno, dos, tres, cuatro. Creo que me gusta aquí, así. Vamos a alejarnos. Este espaciado se ve bien. Entonces vamos a mover nuestra sección de revisión de usuarios con esto. Creo que olvidé el encabezado de la opinión del usuario por aquí. Lo que voy a hacer es duplicar este Control G y moverlo con mis teclas de turno y flecha, y voy a renombrarlo lo que mis usuarios están diciendo de mí. Creo que fue lo que nuestros clientes están diciendo de nosotros. Fue en negro porque estaba en la misma sección, así que voy a usar este color. Voy a alinearlo en el medio rápidamente, y Control D. Veamos de dónde puedo conseguir este. Creo que es una sección nueva. Esto se ve bien. Aquí está bien, y luego vamos a mover a estos dos por ahí, tal vez por aquí. Alejemos el zoom para ver el efecto. Siempre asegúrate de alejarte para ver cómo se ve. Creo que se ve un poco equilibrado, se ve bien. Ajustemos el tamaño de esta zona. Tenemos creo que 96 de este lado. Tu parte superior e inferior de cada sección debe ser similar. Si estás usando algo como esto por aquí, así que voy a colocar unas guías por aquí así, sonriendo la distancia. Es 96 básicamente. Voy a usar 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, y 12. Vamos a usar 12 cuadras por aquí. Usemos solo una altura de 96 y el ancho 1,200. Es más fácil para mí usar unos bloques así. puede ver por aquí lo puedo alinear con las líneas, y voy a seleccionar mi fondo y lo voy a alinear con esto así. Nuestras distancias son perfectas. A ver si hay algún otro problema, usémoslo así. Creo que esto está fuera de mi columna. Eso no es un gran problema, creo que están casi en medio de esta zona. ¿ Hay algo más que necesite cambiar? Esto es casi perfecto. Algo así. Mi ritmo vertical es perfecto. Tenemos que pasar a la siguiente lección y siguiente porción, que va a ser nuestro equipo. Por eso, te voy a ver en la siguiente lección. 34. Diseño de sección de equipo parte 1: Ahora en esta lección, vamos a crear nuestra tercera sección que se trata de nuestro equipo. Entonces empecemos y vamos a crear esto ahora mismo. Ahora vamos a cambiar el tamaño de nuestro tablero de arte, vamos a seleccionar la herramienta de tablero de arte desde aquí y vamos a dar click en ese nombre del tablero de arte y vamos a aumentar la altura a 3,400, algo así. Se puede ver, se ha expandido desde abajo. Ahora vamos a cambiar nuestra cuadrícula, así que descúbrela. En realidad, lo que está pasando aquí es que se va a dimensionar de acuerdo a nuestro tablero de arte. Lo hemos reducido el tamaño y esta era nuestra forma, es muy resistente cambiarlo. Ahora tenemos los patrones, por lo que ya se aplica patrón a esta forma. Ahora vamos a crear otra, vamos a bloquear esta cuadrícula y vamos a pasar a la sección dos. Aquí, vamos a crear un fondo. Vamos a crear un fondo como este. Se empareja con ese, el fondo superior, y voy a tener un color que es un poco de color púrpura grisáceo opaco, un poco más opaco que el de arriba. Voy a seleccionar esto, vamos a ocultar la cuadrícula. Se puede ver cómo va esto muy bien. Esto es blanco para hacer más énfasis en esta zona, entonces esto es un poco gris opaco y esto es más gris. Ahora cambiemos el nombre a fondo o BG. BG es la abreviatura de fondo se utiliza en CSS y codificación HTML mucho. Creo que a tus diseñadores, desarrolladores realmente les va a encantar este BG. Ahora vamos a tener algo por aquí, que va a ser nuestro rumbo. Nuestro equipo es especial, estamos bolsa llena de magos digitales. Estas son las palabras que vamos a usar. Nuestro equipo impresionante, así que lo voy a cambiar ahora mismo, alinémoslo en el medio entonces voy a usar otra línea. Vamos a aplicarle nuestro estilo de párrafo. Aquí tenemos nuestro estilo de párrafo, que fue éste, y lo vamos a cambiar a eso. Vamos a alinearlo en el medio otra vez, Ctrl+D o Comando+D para anular la selección. Entonces lo que estoy haciendo es, estoy seleccionando rápidamente todo el lienzo o tablero de arte, y lo estoy alineando en el medio usando eso. Esta es nuestra sección dos, vamos a subirlas así. Ahora, lo que hice aquí es que agregué las imágenes de mis 40 miembros, y vamos a volver a usar rejillas, cuadrículas y guías. En realidad usé un truco muy simple, déjame mostrarte. Aquí tenemos a esta hermosa chica y la vamos a copiar por aquí en esta zona. Ahora ya puedes ver, aquí está. Nosotros lo vamos a agarrar y encogerlo para que podamos tenerlo centrado en esta zona. Podemos tener cuatro o tres integrantes del equipo al menos por aquí. Puedes tener tres o puedes tener cuatro, depende de ti. Bajemos así el tamaño. Ahora simplemente vamos a usar un truco muy simple, que se multiplica u oscurece. Creo que oscurecer va a funcionar bien. Darken va a funcionar bien en el fondo de la diapositiva. El segundo que vamos a hacer es que la vamos a mantener dentro de este fondo. Así es como hice este truco muy sencillo, vamos a moverlo un poco por aquí, así. Aquí está nuestro único miembro del equipo. Usemos algunos otros de aquí, voy a usar el mismo truco una y otra vez, oscurecerlo y moverlo en la zona y dentro de esos. Vamos a habilitarlos. De nuevo, colócala dentro de esta caja. Muévete por ahí. Ahora como puedes ver, he usado tres columnas para cada imagen, puedes ver por aquí. Puedes usar cuatro columnas si tienes tres miembros del equipo o puedes usar tres columnas si quieres mostrar más de tres. Estoy evitando la canaleta, aquí tenemos cuatro integrantes del equipo y podemos usar sus títulos en la cima. Voy a crear una y luego saltarme la otra muy rápidamente, para que sepas que tengo usuarios. Vamos a crear este rectángulo redondeado por aquí y vamos a usar algo así como 15 en tal vez 16 píxeles por aquí. No se ve bien, así que vamos a usar 32. 24 pixels y se redondea totalmente. Veamos qué altura tiene, tiene 48 alturas, perfecto. 48 píxeles de alto. Es perfecto. Ahora, voy a combinar otra forma, que va a ser ésta. Creo que esto es más que suficiente, movámoslo así. Ahora vamos a combinar tanto esta forma por Command+D o Ctrl+E Vamos a moverlo fuera de este clip y llamarlo etiqueta o algo así. Este es nuestro nombre principal y etiqueta de este miembro, vamos a mantenerlo 64, algo así. Ahora vamos a usar un textil, que va a ser Nunito Sans regular 20 pixels, y el color que voy a usar es el blanco. Voy a usar diseñador, algo así. Esto se ve realmente genial. Usemos nuestro color negro, que es nuestro equipo de color negro, que es éste. 3d3d3f. Si quieres resaltar más este color, puedes usar este. Estoy reduciendo el brillo para obtener más combinación de color, para que puedas ver que es más negro. Por qué uso esta combinación, porque mi fondo es un poco aburrido. Tengo fondo gris oscuro, así que estoy usando más color de resaltado así. Aunque quieras quedarte con el color anterior, depende de ti. Si quieres quedarte con este color, esto también se ve muy decente. Vamos a mover esto en el medio usando en tus propios ojos. Ahora vamos a Ctrl+G o Comando+G para agrupar esto y hagámoslo una etiqueta. Vamos a usar otra etiqueta. Ahora hay más creatividad. Si quieres usar, puedes usar algún estilo como este. Mueve las etiquetas hacia arriba y hacia abajo con las cabezas de diferentes personas de los miembros de tu equipo, así que marketing o algo así. Entonces tenemos otra etiqueta, que va a ser esta persona. Ahora voy a mover esto un poco hacia abajo y un poco a la derecha, y este va a ser nuestro miembro del equipo de diseño de UX, y vamos a mover esto en el medio. Así es como estamos haciendo algunas cosas creativas por aquí. Es así como he usado todas estas etiquetas. Ahora para resaltar, voy a usar este color azulado para resaltar esto. También si quieres mantenerlo plano, puedes mantenerlo plano. Normalmente lo que hice es añadir una sombra de gota por aquí, que era de este color, supongo. No, creo que era del mismo color, y se le puede agregar algo de oscuridad, tal vez mantenerlo 50 por ciento, algo así, y vamos a reducir la opacidad a 30, algo así. Tan solo para que se destaque. Por lo que alguien se cierne sobre esta persona, se va a resaltar así. Es así como hemos hecho algo fresco y movámoslo un poco hacia abajo solo para asegurarnos de que esté alineado con éste o tal vez un poco más abajo que éste. 35. Diseño de sección de equipo parte 2: Ahora, puedes usar cualquier fuente de script para los nombres sobre ellos. Veamos si tengo alguna fuente manuscrita. Creo que usé algún marcador, tal vez escribamos algún marcador. Se trata de Eds Market Main Script Regular. Tengo éste. Utilizo Marcador Permanente Regular, creo que es fuente de Google y puedes usarlo también. Lo que voy a hacer es que voy a escribir su nombre, Jenna Jem, algo así. Vamos a mover eso por aquí y vamos a usar marcador permanente para el tamaño de 24 píxeles, y vamos a usar nuestro color blanco grisáceo. Vamos a agregarle algo de sombra de gota. Porque no va a ser visible así, así que voy a añadir alguna sombra de gota, así, sólo para acercarla un poco más al texto, así. Se ve bien. Ahora, vamos a duplicarlos y encadenarlos a la gente así que voy a saltarme esto. Ahora, hemos completado casi esta porción, solo necesitamos alinear nuestro material vertical que está junto con la rejilla vertical. Veamos qué vamos a hacer por aquí. Ahora, vamos a agarrar este y vamos a usar algo similar a las cosas viejas que hicimos, así que veamos qué teníamos aquí dentro. Vamos a hacer clic en esta cuadrícula, y voy a multiplicarla y hacerlo 100 por ciento. Veamos cómo se va a ver. Todavía no puedo ver el fondo, así que lo que voy a hacer es que voy a hacer el fondo un poco más oscuro para el propósito de alineación. Creo que está un poco desalineado, vamos a moverlo hacia abajo, se puede ver por aquí. Esto es un poco de cosas de cirugía, yo lo llamo cirugía de diseño, porque necesitas ser muy preciso, así que 1, 2, 3, 4, 5, y 6. Creo que voy a dejar cinco en la parte superior, ocho, cinco es 40; 40 píxeles en la parte superior. Vamos a mover este un poco arriba así, por lo que está dentro de esta zona. Ahora, podemos reducir nuestro tamaño de fondo principal. Veamos cómo está la distancia. Tenemos aquí casi como 107 o tal vez 108, algo así, y tenemos por aquí 107, así que es casi perfecto. Tenemos mismo espacio por aquí en esta zona y esta zona. Ahora, voy a cambiar el color de nuevo al fondo que hemos utilizado. Veamos algunas cosas más, tal vez acercar y ver la parte inferior de la misma y puedes ver que tenemos algún problema. Tenemos ahora el ritmo vertical perfecto. No es necesario, si tu codificador no puede hacer estas muy precisas, no importa, pero asegúrate de que las distancias desde arriba y abajo sean las mismas. Deberían estar en buen espaciado; básicamente es un uso del espacio amplio. Ahora, se puede ver en este fondo, que es muy colorido, utilicé sombras de gota. Como he dicho de esta técnica en mis cursos anteriores, que si tienes fondo muy colorido, necesitas usar alguna sombra de gota. Ahora bien, esta zona está hecha, así que vamos a mover esto un poco hacia abajo porque teníamos una línea dentro de ella así. Creo que siento que esta distancia es un poco pequeña, así que la voy a aumentar seleccionando estos 2 y 1, 2, 20, y 1, 2, 3, 4, así que estoy sumando 24 más por aquí. Nuevamente, los vamos a mover 24 píxeles hacia abajo. Vamos a seleccionar todas estas y todas las etiquetas, y voy a usarlas. Perdón, esto no. ¿ Qué es esto? También éste. Control G. Estos son mis artículos sobre las imágenes. Estos son en realidad artículos sobre las imágenes. Voy a seleccionar las cuatro imágenes de estas personas y los artículos, y luego los vamos a mover 1, 2, 3, 4, así que sólo para conseguir la distancia precisa. Nosotros los movemos hacia abajo y los movemos hacia abajo. Estamos bien con esta sección, y creo que hemos creado muy bonita sección. Pasemos a la siguiente lección donde vamos a crear la última sección, que va a ser pie de página. Pasemos a la siguiente lección. 36. Diseño de pies parte 1: Ahora en esta lección vamos a crear la última sección, que va a ser nuestro pie de página. Ya he reunido pocas imágenes libres, que vamos a utilizar. Puedes usar cualquiera de ellos. Cualquier imagen de tu oficina, o alguna imagen fresca tomada desde afuera como esta, o tal vez tu asiento de oficina vacío. Puedes tener una charla con nosotros o algo así. Lo que voy a hacer es, voy a arrastrar al pie de página esta imagen. Este es nuestro trasfondo. Ahora voy a mantener mi tecla “Opción” o “Alt” con la tecla “Shift” para crear algo como esto. Estoy aumentando el tamaño a algo así. También puedes cambiar el tamaño de la mesa de trabajo. Selecciona este tablero de arte y voy a usar tal vez 3460, o tal vez 3500, solo aumentar 100 más. Tenemos más espacio. Ahora esto se hace, entonces vamos a superponer algo más en él, que va a ser nuestro rectángulo. Simplemente arrastra un rectángulo como este y vamos a usar algún color, puede ser éste. Vamos a usar la superposición. Entonces en esta Muerte por Stock la imagen que hemos usado, solo esconde esta. En primer lugar lo vamos a hacer escala de grises. Voy a ir a Ajustes. Hay muchas formas de cambiar el color. Voy a usar la superposición de color. Voy a usar el color morado desde aquí. Vamos a moverlo por aquí. Este o puedes usar éste, depende de ti. Hay muchas maneras de conseguir mucho gran efecto. Si vas a este color, puedes ver esto básicamente está coloreado en blanco y negro. También puedes usar algún otro color. Ahora ha sido coloreado. Ahora puedes habilitar la superposición, y hagámosla normal y que sea un poco de opacidad. Usa algo de opacidad como esta. Ahora puedes ver que he logrado el mismo efecto. Hay muchas maneras en que puedes lograr este efecto. Vamos a moverlo hasta el final para que no se vea nada dentro. Ahora esta es nuestra oficina. El cool es que puedes cambiar el color cuando quieras. Puedes ir a éste, a éste, o a éste, o a este color, o tal vez a este color, depende de ti. Ahora alejemos el zoom y veamos cómo se ve. Se está construyendo muy bien. Ahora agreguemos algunos estilos y cosas por aquí. Nuestro rumbo era, Let Us Wow You y todas estas cosas. Este es el párrafo, dispuesto a dar un paso más. Voy a crear un nuevo encabezamiento, pulse “Shift” y “Control V”. Ahora se puede ver que la fuente es muy extraña por aquí. Estos son nuestros subtítulos, así que lo voy a pegar en una nueva capa. Tengo dos líneas ahora. Este es nuestro estilo de párrafo principal. Lo que voy a hacer, es que voy a usar el encabezado de sección. Voy a anular ahora mismo y voy a usar el color blanco. Ahora no molesta con nada más, no cambies nada más. Para este, voy a usar de nuevo subhead white y anular todo. Cambiemos. No te preocupes por la distancia, vamos a crear otro por aquí, y esta vez vamos a pegar el párrafo por aquí. Algo así. Aquí tenemos el párrafo y vamos a usar el estilo de párrafo gris. Vamos a usar el color blanco por aquí. No cambies nada más, solo aplica esto una vez y luego usa tu propia imaginación para cambiar las cosas. Voy a hacerlo un poco ancho solo para tener dos líneas por aquí. Al final alinearemos todo, solo creemos todas estas cosas impresionantes y sigamos adelante. Ahora vamos a utilizar nuestra Guía de Estilo de Plantillas. Voy a alinearlo rápidamente así. Vamos a sacar todo de ella. Voy a usar Shift V y básicamente voy a usar este botón. Esto va a estar viniendo por aquí. Esto es lo que necesitaba. Este va a ser nuestro botón Consultar Gratis Con Nosotros. Esto se ve realmente genial. Vamos a moverlo en el medio un poco arriba así, un poco por aquí. Habilicemos a tus guías, a tu cuadrícula. Vamos a duplicarlo y vamos a usar algo así. Alinémoslo con éste. Haremos el alineamiento al final. Solo primero sigamos creando cosas. Lo que voy a hacer es, voy a usar este color negro y este botón va a ser blanco. Creo que ese botón fue Cuéntanos Qué Quieres. A lo mejor la necesidad es buena. Hemos acercado y se puede ver que nuestros botones se ven realmente bonitos. Ahora lo segundo es que podemos agregar algo por aquí, que va a ser nuestro correo electrónico hello@wstudio.org, algo así. El color será blanco, tal vez podamos usar este blanco. Entonces lo vamos a duplicar y lo vamos a alinear con este 0800 va a ser nuestro número telefónico. Ahora asegúrate de que tenemos todo dentro de estos botones. Como puedes ver ahora, esto es un poco diferente, así que voy a moverlo dentro de esto. Este fue btn consultar, y este fue btn correo electrónico. Estos son dos botones y todo está alineado. Vamos a alinearlos así. Tenemos todo alineado al menos estos botones. 37. Diseño de pies parte 2: Necesitamos una dirección por aquí y creo que los vínculos sociales por aquí. ¿ Queda algo más? Sí, creo que son las únicas cosas que aún quedan o tal vez todo derecho reservado. Eso es lo último que necesitamos poner aquí. Ahora vamos a usar el mismo párrafo, duplicarlo, y lo voy a mover fuera de estos botones. ¿ Dónde estamos creando todo? Estos están fuera del pie de página, así que los voy a mover dentro del pie de página así. Ahora están dentro del pie de página, así que todo se ve bien. ¿ Dónde estuvimos la última vez? Este es el lugar en el que estuvimos la última vez. Aquí está nuestra oficina. Podrás ver una vez que hayas establecido tu propio patrón de diseño o sistema, te será muy fácil implementarlo y usarlo con cuidado y crear diseños de aspecto impresionante con él. Voy a seleccionar esto y colorearlo con éste. También puedes usar este color o tal vez color negro, depende de ti. El color negro también se ve bien, éste. Hay muchas maneras en que puedes enfatizar esta, por lo que también puedes usar negrita por aquí y cambiar el color por el mismo blanco. Puedes dejarlo así. Veamos cuál es la altura de la línea porque me parece un poco extraña. No, creo que la altura de línea es perfecta. Necesitamos iconos completos por aquí, así que voy a usar un truco muy práctico el cual se llama fuentes Icon Social. Se puede ver por aquí tengo algunos de ellos alineados, así que vamos a duplicarlo, y usar alguna fuente de Icon Social, para que podamos usar esta, Socialico Regular. Entonces voy a usar este, Socialico Regular. Lo que necesitamos es Facebook y no Amazon. A lo mejor necesito Bhars, LinkedIn. Estos son muy pequeños. Puedes elegir a quien quieras. En realidad, solo necesitas escribir en pocas palabras. Si trato de usar algo como esto, entonces voy a usar F. Si presiono solo F, puedes ver el icono de Facebook luego Twitter, W. Voy a poner un poco al azar por aquí porque va a ser muy difícil para mí encontrar las correctas. Voy a usar estos cuatro y el tamaño de fuente que voy a usar podría ser 64, algo así. Enciendamos mis rejillas y veamos qué estoy haciendo aquí. Estas se denominan fuentes sociales. Puedes instalarlas y te van a dar algunas formas como estas, y solo puedes usarlas en tus diseños. No es necesario traer diferentes formas o iconos. Si quieres usar algún SVG o algún ícono, puedes usarlos, pero normalmente hago algo como esto. Es muy útil para mí. Vamos a moverlo fuera de esto. Aquí está nuestra dirección de oficina, vamos a sacar esta, y los vamos a alinear así, o tal vez así. Perdón, debería ser así. Hay algún problema, que es esta caja. Asegúrate de que tenga un tamaño preciso, lo contrario no se van a alinear. Yo los he alineado ambos y si quieres cambiar el tamaño, puedes cambiar el tamaño de estos. Nuestra oficina de lujo se ve genial. Creo que tal vez puedas usar la fuente Yorkten Bold, que es nuestra segunda fuente por aquí. Puedes reemplazarlo así. Se ve más fresco, más bueno así. También puedes aumentar la altura de la línea si quieres, algo así. Pero creo que la altura de la línea era buena. No se veía raro. Ahora esto está completo. Ajustemos nuestras alturas de línea y todo lo demás. Veamos dónde podemos cambiarlo todo. Primero cambiemos el tamaño de la cuadrícula por aquí, tal vez algo como esto. Tenemos el espacio en la parte superior el cual va a estar listo para tomar. Creo que tenemos uno, dos, tres, cuatro, cinco, seis, siete, ocho. Usemos ocho por aquí y vamos a usar dos por aquí. Agregamos algo como esto y lo vamos a mover por aquí. Se ve perfecto. Subiremos un poco por aquí y por los botones, los voy a meter a los dos en unos botones de grupo y los voy a mover un poco arriba, tal vez aquí. No están alineados. Vamos a alinearlos primero, algo así. Están alineados muy perfectamente con esta rejilla. Vamos a moverlas, estos dos elementos un poco más arriba. Alejemos el zoom y veamos cómo se equilibra. Sí, creo que se ve bien, pero tal vez ahora se ven perfectos. No recuerdo si me he perdido algo, pero creo que se ven muy bien. Ahora vamos a dimensionar nuestro lienzo. Lo que necesitamos aquí es uno, dos, tres, cuatro, cinco, seis, siete, ocho. Veamos qué agregamos en la parte superior. ¿ Qué tiene de malo esto? Ahora lo único que queda es que necesitamos cambiar el fondo de este diseño, que es esta área. Tenemos que recortarlo y para eso voy a usar de nuevo un bloque de 48 píxeles de alto. Yo lo voy a hacer ancho, del mismo ancho, por lo que va a estar en la parte superior de éstos. Voy a alinearlo en la parte inferior así. Ahora voy a ver qué talla queda por aquí porque es un poco difícil para mí calcular. Ahora voy a ver 163, así que necesito eliminar 163 píxeles de nuestra mesa de trabajo. Pasemos a la mesa de trabajo y voy a sacar 163 de esta altura. Va a ser 3,500 menos 163, 3,337 divididos por 8. A ver, son 417 por 8, 3,336, por lo que el tamaño debe ser 3,336. Este es el tamaño perfecto. Ahora vamos a quitar de aquí esta barra blanca. El segundo es que vamos a ocultar nuestra rejilla y Voila, nuestro diseño está perfectamente listo. Es así como vamos a usar mesas de trabajo y crear un diseño impresionante que esté alineado verticalmente y todo. Hay pocos cambios más que hice por aquí como cambié el botón a negro, y también este efecto gradiente, lo cambié para ser éste, este gradiente más oscuro que usamos en nuestro ejercicio y también cambié el ángulo. El ángulo ahora es 140 así. El ángulo es casi a partir de aquí. Cambié algunas cosas por aquí, entonces puedes ver este diseño se ve genial. Si tiene alguna pregunta, háganme preguntas. En la próxima serie, vamos a crear vistas de tablet y vistas móviles para este diseño. ¿ Por qué usé mesas de trabajo? Lo habríamos diseñado sin mesas de trabajo porque el plugin Zeplin, necesita mesas de trabajo. Vamos a exportar esta mesa de trabajo a Zeplin para crear algunas cosas increíbles para nuestros desarrolladores. Estoy abierto a cualquier pregunta. Si necesitas que conteste alguna pregunta, puedes preguntarme en cualquier momento. Pasemos a la siguiente lección. 38. Consideraciones de diseño web de Responso parte 1: Antes de que vamos a empezar a diseñar para las vistas de dispositivos inteligentes de usuarios de tabletas, vamos a considerar algunas de las técnicas de diseño responsive que debes tener en cuenta al diseñar para pantallas móviles o pantallas de tabletas o sitios web receptivos. Ahora lo primero es, te voy a mostrar es priorizar contenido, lo que significa que en pantallas pequeñas tenemos menos espacio disponible. Por lo que quizá necesitemos esconder o mostrar parte del contenido en base a su importancia. También se llama carga condicional, y debes decidirlo con los usuarios o los miembros de tu equipo como tu CEO o el dueño del sitio web que qué contenido es importante para tus usuarios. Necesitas decidir esto con tu cliente que qué contenido vas a ocultar y qué contenido vas a mostrar. Ahora permítanme mostrarles el ejemplo de priorización de contenidos. Aquí como puedes ver esta es nuestra vista de escritorio. En un dispositivo móvil, es posible que necesitemos ocultar uno de estos. Este es un párrafo, podría llevar algún tiempo. Nuestro espacio y lo vamos a quitar, y en cambio vamos a mostrar esto. Esta es la línea más importante, que es que no dejes que tu cliente abandone tu sitio web dentro de los primeros tres segundos. Esto es más importante que leer esto o mostrar este párrafo en una pantalla móvil. Lo que hacemos es que vamos a ocultar esto, y vamos a mover esto por aquí. Voy a hablar de otras técnicas. Pero ahora mismo, significa que vamos a ocultar algunas de las cosas. Podríamos necesitar ocultar estos cuatro elementos en un botón, y vamos a mostrar estos botones, por lo que dos botones en la parte superior. Esto es priorización de contenidos. Este botón es muy importante, por lo que necesitamos mantenerlo por aquí. Estas son las cosas que vamos a considerar cuando estamos diseñando para sitios web receptivos. Ahora, el siguiente paso son las imágenes receptivas. Vamos a entregar diferentes imágenes para pantalla diferente. A veces incluso toda la imagen se cambia con alguna otra imagen la he visto en muchos sitios web por su tiempo de carga y velocidad. Imágenes más grandes, van a llevar mucho tiempo así que lo que hacen los desarrolladores es crear diferentes conjuntos de imágenes para diferentes tamaños de pantalla. Permítanme mostrarles el ejemplo. Ahora, aquí puedes ver tenemos esta imagen de fondo muy grande de este reproductor de video. Este fondo detrás de este botón Play, lo vamos a apretar en una pantalla móvil. Lo que vamos a hacer es si su tamaño es como 800 por 700 píxeles, vamos a generar tres tamaños diferentes. A lo mejor para una pantalla móvil, podríamos generar un tamaño que tiene tan solo 400 píxeles de ancho. Lo que va a hacer es que se va a cargar muy rápido en pantallas más pequeñas. Esta es la técnica principal detrás estas imágenes sensibles o cambiar diferentes imágenes en diferentes tamaños de pantalla. Ahora la técnica que utilizamos la mayor parte del tiempo mientras diseñamos es Alter content block positions. Lo que vamos a hacer es reposicionar nuestros bloques de contenido en función del tamaño de la pantalla. Por ejemplo, si has visto algunos blogs, puedes ver que las barras laterales normalmente se mueven hacia abajo por el contenido principal. Permítanme mostrarles el ejemplo. Aquí hay una plantilla de alguien creo que se llama Milana. Ahora, lo que puedes ver aquí es que tiene dos columnas: diseño de columna principal base que es ésta es nuestro contenido principal. Se puede ver por aquí, estos son diferentes posts. Esta es básicamente la barra lateral del lado derecho Acerca de mí, Síguenos, Etiquetas, y etc. Ahora cuando se va a apretar en una pantalla móvil, se puede ver el contenido principal va a estar en la parte superior. Todas las demás cosas que puedes ver aquí Sobre Mí y todo, se reposicionan en la parte inferior. Además, están aplicando priorización de contenido porque este contenido no es mucho de un valor, necesitamos que el usuario vea primero este contenido. Es así como vamos a cambiar los bloques de todos los elementos de diseño. Ahora se puede ver que hay una cosa más que incluso ellos cambiaron todo el diseño. Ahora las publicaciones del blog tienen un diseño diferente. Están en un diseño de tarjeta así. Es así como vas a diseñar para sitios web receptivos. Una consideración más que muchos diseñadores no entienden es menos uso de imágenes. Si vas a cargar una tonelada de imágenes en cada pantalla de tu sitio web, y va a tomar mucho tiempo para que tu sitio web se cargue, realmente vas a ralentizar tu sitio web. En smartphones, creo que los usuarios no van a esperar más de cinco segundos para cargar el sitio web. Tu sitio web debe cargarse muy rápidamente. Ahora para que eso suceda, necesitas usar menos imágenes. Ahora déjame mostrarte el ejemplo de menos imágenes. Ahora lo que vamos a hacer es que se puede ver en todo este diseño sólo hay pocas imágenes, una es ésta. Estos son los pocos miembros del equipo, cuatro imágenes, y este fondo. Sólo hay cinco imágenes en todo este diseño. Estos cuatro serán iconos SVG. Voy a explicarlo al final. Todos estos van a ser generados por código CSS o código de desarrollador. Esto también puede ser un icono de SVG, y todo lo demás es solo CSS o tal vez este logotipo es una imagen. Todo lo demás no es una imagen. Creo que va a ser muy pequeño, menos cargando en tu sitio web y muy menos tamaño para las imágenes. Ahora bien, si superpones algo así en una imagen, realmente va a hacer que su tamaño sea más menor. Si utilizas imagen como esta imagen a todo color, va a tener algo más de espacio de tamaño en kilobytes. 39. Consideraciones de diseño web que parte 2: Ahora, otra consideración son los tamaños de encabezamiento y texto. La mayoría de los diseñadores, no saben que también podemos hacer que nuestra tipografía sea receptiva. Vamos a cambiar nuestro encabezamiento y tamaños de texto para cada pantalla. Ahora, normalmente tomo tres escalas tipográficas diferentes, y las uso para cada tamaño de dispositivo. Para dispositivos medianos o vistas de tableta, voy a usar algún otro tamaño de encabezado puede ser menor que el tamaño del escritorio. También, para smartphones, vamos a usar tamaños de encabezamiento pequeños porque si usamos el mismo tamaño de cabeza como tenemos aquí en este diseño, se puede ver por aquí, ayudamos a construir confianza con el diseño. Es de 54 píxeles. Si trato de usarlo en una pantalla muy pequeña, pantalla móvil, se puede ver como aquí, se va a llevar toda la pantalla. Creo que hasta va a tomar tres líneas para mostrar este titular con 54 píxeles. Lo que voy a hacer es que voy a usar un tamaño más pequeño, tal vez 49 pixels o tal vez 38 pixels o 36 pixels solo para asegurarme de que sea legible y cuida bien la pantalla pequeña. Estas son las consideraciones que vamos a tener en cuenta al diseñar para dispositivos móviles o dispositivos pequeños. Ahora, la última consideración son diferentes rejillas de columnas. Lo que vamos a hacer es, vamos a usar ocho columnas para tablet view y para smartphones, voy a usar cuatro columnas sólo con el propósito de simplicidad y alineación. Ahora, en realidad, lo que hace es, en codificación real, el número de columnas es el mismo, pero en realidad, nuestro diseño va a tomar todas las columnas o tal vez la mitad de ellas en la mayoría de los casos. Permítanme mostrarles los ejemplos. Ahora, si ves esta vista de tableta, puedes ver que tenemos una, dos, tres, cuatro, cinco, seis, siete, ocho columnas. Ahora, lo que vamos a hacer es, se puede ver por aquí, estamos usando algún contenido [inaudible]. Aquí, he eliminado el párrafo en mi vista de tableta. Se puede ver que estoy dejando esta primera columna y estoy usando esta zona por aquí así. O quizá puedas decir que también estoy usando el medio de esta zona. Me salté esta columna y moví mi contenido por aquí. Además, puedes ver tengo esta priorización de contornos o como puedes ver, mis enlaces están ocultos en esta área. Entonces puedes ver que tengo un tamaño totalmente diferente para mi área de video. Ahora, puedes ver mi área de video está tomando todo el espacio. Está usando ocho columnas, pero en cuanto a nuestra codificación o desarrolladores, puede ver que está tomando todo el ancho o completo 12 columnas. No te preocupes por ello. Incluso si estás usando menos columnas, tus desarrolladores adivinarán eso cómo van a mover esto. No te preocupes por ello. Ya puedes ver, está tomando seis columnas. Esta zona y esta zona va a tomar seis columnas. Ahora, la base de todo este diseño receptivo es mitades, cuartos, y fulls. Se puede ver aquí estamos usando la mitad de las columnas y aquí, estamos usando columnas casi completas. Estamos centrando alineando todo. Entonces en esta área, también estamos usando la mitad. Se puede ver esta zona es la mitad, esta área es la mitad. Estamos usando medias columnas para este diseño. En las pantallas móviles, tenemos menos espacio, por lo que vamos a centrar alinear todo. Se puede ver por aquí, están apilados en la parte superior y la inferior. Es así como vamos a diseñar para pantalla pequeña. Aquí hay una cosa más que puedes ver. Esta imagen, es totalmente diferente a la imagen que tenemos en el escritorio. Está recortado, es imagen más pequeña por lo que se puede cargar más rápido en una pantalla móvil. Esto es lo que vas a hacer en tu pantalla móvil, o diseño responsive. Asegúrate de ocultar contenido o mostrar contenido base en cosas diferentes. Se puede ver por aquí, he escondido el párrafo y he usado esta línea que estaba por aquí. Úsalo aquí como párrafo. No dejes que tu cliente abandone tu sitio web en los primeros tres segundos. Es así como vamos a cambiarlo todo. Ahora, puedes ver mi botón Cotización ha desaparecido. Está justo dentro de éste. Tenemos nuestro botón Cotización por aquí. Además, puedes ajustar los tamaños de tus botones. Es posible que tengas que apretarlos si el tamaño de tu botón es demasiado grande para que las pantallas pequeñas mantengan todo en proporción. También puedes ver que este botón y este botón, tienen diferentes tamaños. “ Consigue una cotización” y “Consulta Gratuita Llamada” en la parte superior de la otra. Están apilados. Además, he movido estos enlaces y he movido todo lo demás en la parte inferior. Premios y Clientes tienen más prioridad, así que lo moví hacia arriba. Se trata de movimiento de bloques de contenido o reposicionamiento de bloques de contenido basado en la priorización de contenido. Estos son pocos conceptos con los que necesitas familiarizarte antes de que vayas a diseñar para sitios web receptivos, y para vistas medianas o usuarios y dispositivos de tabletas, dispositivos pequeños. Creo que hemos terminado con esta conferencia. Sigamos adelante. 40. Planificación de la cuadrícula para la vista de tablet/medio: Está bien. Ahora, en esta lección vamos a iniciar nuestro diseño responsive, que va a ser para las vistas de tabletas o tabletas, iPads o cualquier tableta. Antes de eso, hice algunos cambios en mi diseño de escritorio. Se puede ver por aquí, hay muy pocos cambios, pero son muy sutiles y muy únicos. Lo que hice es, primero, estaba usando estas seis columnas para este área de video y sentí que el espacio en blanco entre estas dos áreas era demasiado. Entonces lo que hice fue extender esta zona, este contenedor, a la mitad de esta columna, a la séptima columna. Ahora está usando uno, dos, tres, cuatro, cinco seis. Siete columnas básicamente. Ahora, no tengas miedo de usar medias columnas. Ahora tu codificador, lo que va a hacer es que va a usar todo este bloque de siete columnas. Pero va a usar parte del relleno o margen de esta zona. Va a sumar 39 o 38 márgenes de píxeles o relleno en el lado izquierdo. Entonces así es como funciona la programación. Entonces no tengas miedo de que mi diseño no esté tocando esta zona o esta rejilla, no encaja perfectamente. Ya sea que encaje perfectamente o no, depende de ti. Tus codificadores van a diseñar así. Van a pensar lógicamente, van a agregar algo de relleno por aquí. Igual es la condición por aquí. Se puede ver en esta zona, tenemos un relleno o margen. Estas son las distancias que van a cuidar y trazado de cuadrícula de recorrido. Asegúrate de hacer algo como esto y sabes qué se mueve detrás del código y cómo funciona el código. Pocas cosas más que agregué aquí es esta línea, y este símbolo de copyright, y todo este texto está en mayúscula. También, he usado 16 puntos. puede ver por aquí es un tamaño de texto pequeño, 16 puntos para estos Premios Clientes en este libro de texto por aquí. Por lo que ahora nuestro tamaño de documento es de 4 mil píxeles de alto. Un cambio más. Lo que hice aquí es, déjame mostrarte. En esta zona teníamos mucho espacio entre este Obtener una cotización y estos enlaces. Entonces lo que hice es que estoy usando 32 pixeles de distancia. Entonces uno, dos, tres, uno dos. Por lo que estoy ahora mismo a 32 pixeles del botón Obtener una cotización. Esto también es múltiple de ocho, así que asegúrate de mover las distancias así. Esto realmente te va a ayudar a crear algo de armonía en tu diseño. Ahora vamos a saltar al navegador para calcular nuestras rejillas para nuestra vista de tablet. Ahora vamos a usar gridulator para calcular nuestras rejillas. Ahora, ¿por qué estoy usando 736? A pesar de que estoy usando el tamaño del documento de 768, porque vamos a dejar algunos márgenes alrededor de nuestro diseño, para conseguir algo de espacio para respirar. Si deduces 768 y deduces 32 de él, vas a obtener este valor por aquí. Entonces vamos a usar 71 y 24 y pasemos por esta zona. Ya lo hemos puesto todo. Ocho píxeles es nuestra línea de base, 71, ocho módulos, 24 píxeles Canaleta, una Altura de Módulo y 736 es nuestro Tamaño. Vamos a descargar este patrón y lo vamos a instalar en Photoshop. Nosotros lo vamos a guardar, vamos a cortarlo, y vamos a pegarlo en la carpeta de nuestro Patrón de Photoshop. Preajustes, Patrón. Necesitas encontrarlo en tu Mac o incluso si estás usando Windows, necesitas encontrar esta carpeta. Está en la carpeta de instalación o tal vez en carpeta de biblioteca de MAC, supongo. Entonces 736, así que vamos a llamarlo 736. Voy a recargar mi Photoshop para conseguir este patrón. Ahora, he abierto mi viejo escritorio. Ya sabes lo que vamos a hacer es que voy a duplicar esta mesa de trabajo, porque necesitamos todo el contenido en ella. Voy a hacer clic derecho Duplicar Mesa de trabajo y voy a nombrarla tableta y vamos a duplicar otra. Por lo que tenemos otra copia de la misma mesa de trabajo. Ahora lo que vamos a hacer es cambiar el ancho, 768, así. Entonces hemos cambiado el ancho, ahora vamos a aplicar la rejilla y todo lo demás en ella. Ahora mismo no vamos a cambiar nada más que la grilla. Por lo que solo desbloquea estas capas. Ahora en el Patrón, lo que vamos a hacer es que vamos a cargar este patrón 736 “Anexar”, y va a ser en el último, así, haga clic en “Aceptar”. Lo que vamos a hacer es que lo vamos a dimensionar, Control T o Command T y vamos a usar 736. ¿ Qué está pasando aquí? 736 pixels. Ahora lo vamos a alinear en medio de este lienzo, en toda esta área. Voy a seleccionar todo y alinearlo en el medio, así. Pasemos a la herramienta Mover. No sé por qué no lo está alineando en el medio. Yo he llamado a los controles. Entonces tenemos esto en el medio, pero nuestro patrón está un poco apagado. Vamos a acercar y puedes ver que este es nuestro patrón, está realmente apagado. Entonces voy a hacer clic en este Snap to Origin, y se va a arreglar nuestro patrón. Ahora puedes ver cómo he trazado todo el patrón. Tenemos algo de espacio alrededor del diseño. Se pueden ver estos márgenes y estamos usando esta área en su interior para diseñar nuestro diseño. Asegúrate de que cuando estés diseñando para vistas de tablets o móviles, vas a usar menos espacio para estos márgenes. No utilices demasiado del ancho por aquí porque ya tenemos espacio muy limitado. En la siguiente lección, lo que vamos a hacer es que vamos a usar este diseño, esta cuadrícula para diseñar nuestro layout. Se puede ver que esto también es un problema por aquí. Ahora es perfecto desde arriba también. Entonces en la siguiente lección vamos a cambiar este diseño para esta área de cabecera y pasemos a la siguiente lección. 41. Diseño de área de jefe/héroe para tableta: Ahora, en esta lección vamos a estudiar este diseño tabular y nos vamos a centrar sólo en esta área. Por lo que este encabezado superior o esta vista de plantilla de nuestro encabezado o área de héroe. Entonces, empecemos. En primer lugar, voy a ocultar esta área de escritorio, para poder enfocarme sólo en esto. Basta con acercar un poco. Lo que vamos a hacer es, primero vamos a sostener esto. Por lo que ahora puedes ver que nuestra grilla no está bloqueada, así que asegúrate de que esté bloqueada. También log esta carpeta. Ahora lo vamos a mover a la izquierda, así. Ahora puedes ver que el espacio se ve un poco extraño porque, tenemos vista pequeña, así que vamos a moverlo hacia arriba. A lo mejor dejar estas tres líneas o tal vez, supongo que estas cuatro serán más que suficientes. Antes de eso, teníamos cinco líneas por aquí. Ahora, vamos a mover estos por aquí, pero aún así creo que vamos a necesitar algo, eso es más conseguir botón de cotización por aquí. Por lo que se va a alinear a la derecha de esta zona. Creo que podemos encajar nuestros enlaces por aquí, si quieres, puedes mantenerlos así. Pero lo que normalmente hago es, normalmente muevo esto por aquí, y por aquí voy a crear un menú de hamburguesas. Entonces si puedes ocultar el menú de hamburguesas, depende de ti. Creo que es mejor si no escondes tus enlaces en absoluto. Entonces si de verdad quieres esconderlos y piensas que si alguien aprieta más en la vista de tableta o tal vez cambia algo, entonces puede dar algunos problemas, puedes ajustar eso. Ahora, otra técnica es que, también se pueden cambiar los tamaños de estas áreas. Entonces si quieres cambiarlo a 16 puntos o 16 píxeles, depende de ti. Pero creo que hasta ahora puedes quedarte con este tamaño. Entonces vamos a moverlo así. Por lo que 1-2-1-2-3-4. Entonces estoy en este momento usando 24 pixeles. Entonces déjame esconder la rejilla por aquí, y ver si algo se ve bien. Entonces no sé por qué subió. Vamos a moverlo por aquí. Creo que todavía se ve bien, lo sé, pero algo se siente apagado. Entonces lo que voy a hacer es, voy a cambiar mi navegación. Entonces lo voy a ocultar. Vamos a mover este botón de cotización a un lado de la izquierda, por aquí, y vamos a sumar rápidamente tres líneas por aquí, para crear navegación como esta. Entonces voy a cambiar la altura a dos píxeles. Entonces un control G, dos control G, o mando G tres. Entonces lo voy a mover por aquí. Seleccionémoslos todos, y démosles algunas distancias proporcionales. Entonces voy a esconder ahora mismo la grilla, así que se ve bien. Si quieres tener algunos redondeados, algo así por aquí. Entonces déjenme nombrarlo algo así, algún botón como este. Depende de ti. Entonces lo voy a cambiar a tal vez algo como esto, o tal vez así. Ahora voy a mover todas estas formas en la parte superior, y puedo cambiar su color. Entonces tengo que cambiarlos manualmente, uno por uno. Vamos a crear el gradiente y ver cómo se ve ahora mismo. Por lo que tengo un 72 muy duro, pero la altura debe ser de 48. Algo así. A lo mejor puedes reducir el tamaño de estos. Van a ser 36, algo así. Entonces, ocultemos nuestro botón de cotización y veamos cómo se ve. Se ve casi perfecto. Ahora bien, si quieres cambiar el estilo de tu botón de código, también puedes hacerlo. Asegúrate de que los tamaños de tus botones sean los mismos. Entonces movamos el tamaño de éste en proporción, algo parecido a esto. Se ve realmente amplio. Este se ve mejor, y consigue tu código, puedes quitarlo por completo. Entonces ahora mismo en este diseño, lo voy a quitar por completo, porque ya tenemos esto, empiece ahora por aquí. Entonces lo que voy a hacer es, podría necesitar alguna sombra de gota por aquí, para resaltarlo. Entonces agreguemos algo de sombra de gota por aquí, y voy a usar ocho píxeles, ya que la distancia de tamaño va a ser de cuatro píxeles, y la dirección será de 90 grados. Entonces una sombra muy sutil alrededor de mi objeto. Entonces vamos a expandirlo un poco más, tal vez 10 píxeles como este. Por lo que se ve bien. Por lo que hemos configurado nuestro ícono de navegación por aquí, y también un logotipo de arriba. Ahora vamos a enfocarnos en esta área. Ahora hay una técnica más, no necesitamos enfocarnos en estos, así que voy a esconder todas las demás secciones porque de lo contrario se van a interponer en mi camino. Cada vez que arrastro o cambio algo. Ahora vamos a movernos. Por lo que una cosa más necesitamos despejar estas guías. Guías tan claras, y vamos a crear algunas guías, otra vez, para eso, vamos a seleccionar esta zona. Voy a ir a guiar. Sé que el tamaño de la columna era de 70. Teníamos ocho columnas. [ inaudible] fue de 24, y podemos sumar las guías que son así. Por lo que hemos configurado nuestros guías. Esto realmente nos va a ayudar. Esta guía plug-in realmente me salvó el día muchas veces. Entonces ahora lo que vamos a hacer es, vamos a subirlo un poco. También éste. Por lo que eres libre de alinear a cualquier enemigo que te guste. Ahora mismo estoy alineando por aquí, así que lo que voy a hacer es que voy a mover mi área de videojuego ahora a la izquierda, y vamos a usar todo el ancho. Algo así. Entonces lo vamos a colocar por aquí. Voy a conseguir este rectángulo, que es básicamente el contenedor y lo voy a redimensionar con toda esta zona. También puedes redimensionarlo de esta manera, así. Creo que esto es más que suficiente, el tamaño es más que suficiente. También puedes exprimirlo un poco más, por lo que está en línea con tu guía. Ahora vamos a redimensionar esta modalidad, se ve realmente grando,128 [inaudible]. Por lo que esto se ve muy bien en el medio. También podemos ocultar esta zona si quieres. Pero ahora mismo, en esta iteración de diseño, voy a conservarlo. Por lo que también puedes decidir estas cosas después. Entonces porque nuestra vista de tableta, creo que vamos a ver pocas cosas por aquí. Entonces, movamos un poco este botón hacia arriba, así, en esta área, algo así. Vamos a mover nuestra idea de video poco hacia abajo, un poco más hacia abajo, conseguir algo de espacio en blanco. Por lo que casi hemos completado nuestra presente sección. Pero necesitamos tener algún espaciado horizontal o algo así. Entonces vamos a usar de [inaudible]. Alineemos primero este. Nosotros los vamos a meter en hamburguesa para grupo. Ahora mismo, lo voy a alinear colocando alguna guía por aquí. Entonces alinea este menú de hamburguesas con mi logo, que es donde está mi logo. Entonces aquí está mi logo. Voy a seleccionarlos a ambos, y los voy a alinear así. Ahora voy a subirlo. Algo así. Eso es mejor Ahora si hemos alineado esta zona de arriba, ahora estamos a la altura de esto. Al igual que esto. Creo que ya está dentro de esto. Ahora lo vamos a mover por aquí. Esto es bueno. Ahora, este botón. Creo que podemos cambiarlo a un paso arriba. Ahora esto se ve bien. Ocultemos nuestras rejillas y veamos cómo se ve. ¿ Se ve genial? Sí. Se ve genial. El espacio en blanco es casi perfecto. Por lo que nuestra sección superior, nuestra sección de cabecera está completa. Pasemos a la siguiente sección donde vamos a cambiar otras secciones. Entonces pasemos a la siguiente lección. 42. Diseño de sección de pasos (cómo funciona) para tableros: Ahora nos vamos a centrar en la siguiente área, que era nuestra área de escalones. Ahí hay una técnica. Ahora lo que voy a hacer es que sólo voy a mostrar esta sección 1 y no voy a habilitar a todas las demás. Lo que voy a hacer es bajarlo porque teníamos más espacio por aquí. Se cambia el espacio. Ahora había algunos solapamientos aquí. Ahora mismo en esta sección, creo que tal vez necesito mover un poco mis antecedentes si hay que mirar muy de cerca para este. Se puede ver por aquí en el lado izquierdo, este fondo es hasta aquí. Se superpone con este apartado. Ahora vamos a alejarnos y vamos a apagar la cuadrícula, habilitar esta cuadrícula guías, columna de control. Ahora vamos a alinear todo en el medio. Estas van a tomar cuatro y cuatro columnas. Empecemos y empecemos a mover estas cosas. Control+A y Alt Control+H. Ahora puedes ver que estamos teniendo algunos problemas. Te voy a mostrar en pocos segundos. Ahora puedes ver que estamos teniendo algunos problemas. Lo que vam