Transcripciones
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