Guía detallada para construir Wireframes usando maquetas de Balsamiq

1. Sobre mí: Hola. Bienvenido a mi curso. Mi nombre es Sadat y han estado diseñando productos y soluciones cerca de una década ahora. Empecé en la industria automotriz diseñando nuevas herramientas y tecnologías que tuvieron un resultado directo en la seguridad, confiabilidad y eficiencia fuera de la línea de producción y en el usuario final tanto que me metí al espacio tecnológico tiempo completo donde formé parte de construir soluciones y servicios tecnológicos integrados de alta gama para grandes organizaciones idee. Las soluciones que implementé involucraron el aprendizaje automático, automatización, las tecnologías en la nube y muchas más. Posteriormente, comencé mi propia forma y construí una aplicación móvil impulsada en la nube y una plataforma de aprendizaje de música. Aprendí muchos conceptos nuevos sobre diseño, prototipado, emprendimiento en todo el camino. Me encanta construir productos y diseñar soluciones para móviles, web e incluso el mundo real. El viaje hasta ahora ha sido divertido, atractivo y revuelta. Por último, y si no el aspecto más importante es el hecho de que me encanta enseñar. Entonces únete a mí en este maravilloso viaje para convertir tus ideas a la vida. 2. ¿Por qué toman este curso: ¿ Por qué debería tomar este curso? Bueno, déjame empezar dándote algunos hechos y cifras de acuerdo al salario dot com, tú un diseño nosotros hoy en un salario promedio de descuento alrededor de 72.000 dólares. El extremo bajo de la escala salarial es por alrededor de $50,000 mientras que los tops de gama alta de $90,000 soy un trabajo de talla. Los análisis de publicación indican que hay alrededor de 9000 puestos de trabajo únicos para ti están en tus ex diseñadores por mes en 2017 en EU, y el liderato está listo para crecer. Las principales empresas globales están todas diseñadas, centradas y tienen equipos de diseño dedicados encuentran floreciente y enriquecedora experiencia del cliente en diversas etapas para host de productos. Diseñé este curso, teniendo en cuenta todos los factores dobles. Al final de los puntajes, conocerás diversas metodologías de diseño como las personas de usuario usan a flote y muchas más. Sabrás construir planos de escribirnos y convertirlos en hermosos marcos de alambre . Podrías traducir marcos de alambre en marcos interactivos sin escribir una sola línea. Por supuesto, usted sería capaz de compartir estos apellidos interactivos con clientes, posibles empleadores o incluso inversores ángel. Cementando tus ideas, productos tangibles clicables, acelerando tu crecimiento y ambición. Entonces ven únete a mí en este curso, que es fina unidad información concisa fuera de la industria, conceptos relevantes y tubos llenos de grandes visuales para que todo el proceso de aprendizaje sea divertido y un imbécil y lo más importante, para conseguir empezaste rápidamente. Mi nombre es Sadat. Por favor sí ven a bordo. 3. Cómo preparar las herramientas preparadas en Balsamiq: necesitamos conseguir unas cuantas herramientas que te ayudarán a llevar tu imaginación a la pantalla digital . El primer taburete es balsámico. Es una gran esposa. Encuadrar a eso te permitiría construir increíble por marcos. Los marcos de alambre te permiten obtener un flujo y sentirte fuera de tu sitio web. Dirígete a www. Ese balsámico no vienen a descargar. El buen tipo en BALSAMIC tiene un periodo de prueba de 30 días y la licencia costó $89 para comprar. Siento que es una gran inversión que te traería grandes beneficios a largo plazo. Tiene un Mac en una versión de Windows, y por favor descargue la versión específica de su sistema operativo. 4. Curso de sección Ojective: el objetivo fuera de las puntuaciones es diseñar tu sitio web. Reanudando como diseñador de aplicaciones web y móviles, estarás diseñando este sitio web desde cero. Empezarás construyendo marcos de alambre de su sitio web y en el proceso, entenderás diversos conceptos básicos de diseño como el flujo de usuario y usarás un personas que culminará con el diseño de afinación fina listo para ser entregado a lo que sea Alepo. Entonces, sin más preámbulos, empecemos. 5. Por qué aprende el diseño en primer lugar: una pregunta frecuente que me hacen es, ¿Por qué debo aprender? Diseñado? En primer lugar, quiero empezar con la codificación. Y a eso, digo yo, como empresario, no hay nadie más que conozca tu idea. ¿ Y qué quieres construir mejor que tú? Podrías bucear la forma en que el usuario accede a tu sitio web, cómo él o ella y rastrea con tu página web cómo se les entrega el servicio. Cualquier producto es un resultado final de una serie de iteraciones en. Al diseñar primero, usted sería capaz de prever diseño, ladrar cuellos, limitaciones de servicio y varios otros retos que podría no haber bajado en el propio inicio. Si esto surge en una etapa posterior de desarrollo, te hará retroceder sustancialmente con respecto al tiempo y al dinero, agregó la mayoría de los desarrolladores cobrados por hora. Si haces cambios en el diseño, son el producto durante el desarrollo, te va a costar mucho. También ten en cuenta que los desarrolladores pueden darte comentarios e informarte sobre bloqueos de ruta de diseño de productos o sitios web, pero no es responsabilidad resolverlo por ti. El dueño de resolverlos descansa sólo en ti. Y por último, si le das un diseño completo a un desarrollador, sería capaz de trabajar más rápido y mucho más fácil de resumir. Diseñado, Primero desarrollado Siguiente principio te ayuda a construir un gran producto mucho más rápido a un costo mucho optimizado. 6. Conceptos básicos del diseño: varios aspectos diferentes, como tipografía, paleta de colores, diseño gráfico, persona del usuario, flujos de usuario, diseño de página y muchos más son todos parte del diseño Web. Si bien el diseño Web de Tom y el desarrollo Web a menudo se utilizan indistintamente, diseño Web es técnicamente un subconjunto. Fuera de la categoría más amplia, fuera de la codificación de desarrollo Web, o programación, entra dentro de la categoría de Desarrollo Web. Hay una relación más blanca entre represent y desarrolladores de desarrollo web. Toma el diseño que creas y recrea en un idioma que las computadoras pueden entender. Por lo que tenemos página web A se pega en un extremo y usabilidad y funcionalidad del sitio web en el otro . El objetivo del diseño Web es lograr un equilibrio entre ambos. El usuario debe poder encontrar lo que está buscando de la manera más fácil posible, y el diseño debe ser visualmente atractivo. Podría parecer como tratar de encajar una clavija cuadrada en un agujero redondo, pero no es difícil y muy posible. Entonces déjame que sí te usé para unos Jagan. El primer Domo se llama yo o diseño de interfaz de usuario. En el nivel más básico, la interfaz de usuario es una serie de pantallas, páginas y elementos visuales como botones o iconos que utilizabas para interactuar con el dispositivo o una pantalla. El generalmente off interactuando actualmente es por el medio apagado de un toque o un clic. Sí, la interacción de voz está cogiendo vapor, pero me va a llevar un tiempo convencerme de que batir mi teléfono en público y hablar con él. El otro término al que quiero presentarte se llama experiencia de usuario o tú experiencia de usuario X , Por otro lado, es la experiencia interna que tiene un usuario, ya que él o ella interactúa con cada aspecto de una empresa producto y servicio. Eres es un subconjunto de ti x, te excede más amplio y tiene mucha ciencia cognitiva se le aplica. Se trata de un interés de proceso, resultado de la investigación y el análisis. Por ejemplo, Candy aplastar el popular juego móvil. Ves a la gente jugando por todas partes tiene su diseño UX de una manera para que sigas regresando por más. UX es un dominio completamente nuevo y actualmente está fuera del alcance fuera de este curso, así que vamos a echar un vistazo a algunos ejemplos de sitio web y analizar su diseño. Ah, sitio web altamente funcional con muy mal diseño es el que estás viendo aquí en tu pantalla. Se trata de un sitio web regional de los mayores proveedores de telecomunicaciones de la India. Este sitio web está repleto de funcionalidad pero obtiene una enorme actualización y diseño. Se puede distinguir en la barra lateral izquierda. Hay una tremenda cantidad de información y herramientas muy abajo. Tenemos los iconos de las redes sociales, pero desafortunadamente tienen poco o ningún impacto en absoluto. Este sitio web en general, con todo el bling bling bling, iconos de estrellas y todo, se puede describir en una sola palabra. Repulsivo. Este es un ejemplo de lo que tu sitio web no debería ser. Ahora echemos un vistazo a la página web de la empresa matriz y veamos cómo le va mucho mejor a su diseño . Se pueden ver los detalles relevantes y se ve bien también. Eso se puede observar en la página de aterrizaje. Hay un hermoso deslizador del tiempo. El slider cuenta con anuncios clave e información importante sobre dónde sus servicios y ofertas. Este va a ser uno de los aspectos más importantes fuera de tu página web. ¿ Notaste que usé un nuevo término llamado Landing page? Bueno, un landing pages, una página web en la que los usuarios aterrizan primero al hacer clic en un enlace aquí en este caso. El landing page es la página principal a continuación. Se pueden observar enlaces que abordaron claramente los requerimientos inmediatos fuera de los usuarios. El encabezado del sitio Web generalmente contiene el logotipo del negocio, información de contacto y diversos otros enlaces. Estos elementos se llaman elementos de menú, y cada uno fuera del elemento de menú tiene un elemento de sub menú, lo que redirigiría al usuario a la página relevante abajo abajo. Tenemos el pie de página fuera de la página web. Generalmente, encontrarás información rápida enlaces rápidos en el mapa del sitio fuera de toda la página web. Puedes distinguir esta flecha por aquí. Yo le estoy dando click. De inmediato lleva al usuario a la parte superior del sitio web. Me gustaría llevar su aviso a este enlace en particular por aquí, el portal BS en El Hindi. Esto básicamente redirige al usuario a una versión fuera del sitio web en el idioma regional. ¿ Por qué es importante esto? Bueno, según el British Council, sólo el 25% de la población mundial puede hablar inglés. Eso significa que hay otro 75% de la población mundial que no puede leer el contenido de tu sitio web. Sí, Google Chrome hace un excelente trabajo en la traducción de sitios web, pero en ninguna parte está cerca de construir un sitio web regional completamente construido de forma nativa. Echemos un vistazo a otro ejemplo fuera Gran diseño de sitios web. MIMO es una excelente app que gamma Phi regañando solo por curiosidad. gamificación es el concepto de aplicar la mecánica de juegos y técnicas de diseño de juegos para involucrar y motivar a los usuarios a lograr sus objetivos. Generalmente, se trata de un vuelo en un entorno que no sea de juego. Se puede ver este sitio web sólo tiene un propósito, y ese propósito es que los usuarios lleguen a Donald App. Ese tater extra dice es lo que los Abdo's y hay una marca en la pantalla de inicio fuera del aire, justo en la playa de aterrizaje. Descarga enlaces para la manzana claramente mencionados, junto con el hermoso cartel que dice, Recibe notificaciones cuando la APP esté disponible para Android abajo abajo podemos hacer salir. Existen iconos de redes sociales que son fáciles de seguir. Este es un ejemplo de excelente sitio web de diseño minimalista verdaderamente construido para propósito 7. Sitios web dinámicos responsivos en respuesta a la respuesta: habrías escuchado el término sitio web totalmente responsive Sitios web estáticos etcétera para el agua al día. Un sitio web responsive es un único sitio web que se adapta a cualquier tamaño de pantalla, por lo que es fácil de usar en una tableta móvil y un dispositivo de escritorio. No se requiere pellizcos ni rastreo de sitios. El diseño se adapta instintivamente al dispositivo en el que se está viendo, por lo que se ve muy bien en todas las plataformas. Un sitio web dinámico o sensible utiliza tecnologías de sitios plateados y bases de datos. Estaremos tocando con ellos muy pronto. Algunos beneficios del sitio web Responsive incluyen una actualización de diseño más fácil y actualizaciones de contenido más fáciles . Un sitio web estático conciertos fuera de una serie de páginas web con contenido fijo donde cada basado muestra la misma información a cada visitante. Las páginas estáticas del sitio web contienen código HTML fijo en el contenido de cada página no cambia a menos que sea actualizado manualmente por el diseñador o un maestro web. Es así como se hicieron los sitios web hace unos años antes de la explosión del smartphone. Un sitio web estático no se adapta al tamaño de la pantalla. Si estás viendo el sitio web en un dispositivo móvil, requerirías que el cochecito de lado pellizque si estás creando un sitio web de blogs donde estarías creando nuevos contenidos regularmente. Los sitios web estáticos no son el camino a seguir. Echemos un vistazo a algunos ejemplos reales. Entonces volvamos a visitar nuestro sitio web favorito para inspiración de diseño e intentemos comprobar si este sitio web es responsable, ¿ no cuáles son tus conjeturas? Bueno, podemos comprobar si un sitio web es responsable o no simulando realmente un tamaño de pantalla móvil en el distributivo. Esto se puede hacer jugando con la ventana del navegador, por ejemplo, eso reduciría el tamaño de la ventana del navegador a un tamaño real de un dispositivo móvil. Se puede ver que tengo que citar Scroll para llegar al otro lado fuera de la página web y también acercar para ver contenido que es relevante para mí. Este no es un sitio web receptivo. Visitemos el sitio web de la empresa matriz y comprobemos si este sitio web es un sitio web receptivo o no. Para hacer eso, déjame simplemente dirigirme a los bordes en la ventana de mi navegador y tratar de simular un tamaño de pantalla móvil Ah ja lo puedes hacer Este sitio web es un sitio web receptivo. El contenido fuera del objeto lo ha alineado claramente para el tamaño de pantalla. Se está mostrando en también se puede hacer el menú. Todos los artículos se han comprimido en algo que llamamos el menú de hamburguesas porque casi parece una hamburguesa en este momento. Déjame volver a intentar comprobar si puede funcionar para una tableta. Por lo que estoy cambiando el tamaño de la pantalla para que funcione para un dispositivo tablet. Sí, podemos ver que el contenido es automáticamente responsable. Alinearse a la pantalla dice que se está mostrando en esto es un ejemplo fuera de un sensible sitio web dinámico y sensible. 8. Estudio de caso de encuadrado de alambre: Tratemos de entender más mediante el uso de un ejemplo de la vida real fuera de un marco de alambre cobrando vida en la forma para sitio web. Este es un marco de alambre de la expedición de Hemingway, cortesía de Aaron de Follow Bright Consulting Partners. Hemingway's es una empresa que organiza expediciones en África, así que analicemos esto. Donde libre, puedes notar la esquina superior izquierda para haber comenzado con el logo y en la parte superior derecha. Tienen su número gratuito inmediatamente por debajo de su refuerzo de su experiencia en credibilidad al mostrar un cuadro de texto en el que se muestra el número de años que han estado en los negocios . Se están asegurando de que el cliente sepa que Hemingway's es una marca de confianza, y es el momento de ponerse en contacto con ellos. El sistema de menús está limpio, y tiene todos los enlaces importantes, cada uno llevando al visitante a una página diferente en el sitio web con información relevante ya que ahí una empresa de expedición, están en el negocio de vender experiencias. Tener imágenes visuales que inducen un factor de pared en sus futuros clientes es muy vital. De ahí que tengan un set off imágenes de deslizador. Hacer clic en una imagen de deslizador en particular llevaría al usuario a una página diferente, con más detalles con respecto a esa imagen en particular, Hemingway's quiere que sus usuarios sepan lo que la empresa puede ofrecer. Muy, muy claramente. El cuadro de cubiertas en el lado izquierdo del deslizador. Asegúrese de que esto se comunique de manera muy efectiva debajo del deslizador. Contamos con una nota personal del propietario. Esto es para hacer cumplir la deuda de imagen. Hemingway's no es una organización grande, opaca de tours y viajes corporativos, sino que es una empresa personalizada que se preocupa por las experiencias personales de un individuo. Bloques recientes que cubran en profundidad información sobre viajes o cómo guiar o deben ver sitios se presentarían a continuación la nota de propietarios con miniaturas grandes. Debajo de las publicaciones del bloque se encuentran testimonios de clientes reales. Justo al lado de esta sección se encuentra el mapa fuera de la región donde operan y se auto abajo. Toda la sección del cuerpo principal se encuentra la sección del pie de página. Este segundo comprador tiene información de Keeling y de contacto. Esto para la región es persistente. Significa que esta foto se mostrará en todas las páginas del sitio web. No sólo la página de inicio. Piénsalo como tu firma de correo electrónico. Ahora vamos a analizar la versión final fuera de la página web. Se puede ver que la versión final del sitio web es casi similar a la inicial por fotograma . algunos cambios menores, los años de experiencia se han movido por el contacto la más mínima sección con parecen como diseñados en el marco de alambre debajo del deslizador. Tenemos el mensaje del propietario poniendo un nombre detrás del negocio, junto con el mapa de la derecha, que representa las regiones en las que sirven. Hemos bloqueado presume una línea en un diseño ligeramente diferente con miniaturas más pequeñas de pie en el marco derecho. Los testimonios de clientes se han movido completamente hacia abajo a una nueva sección. Como se puede ver, hay algunas modificaciones hechas a la comida o abajo. Incluyen algunos enlaces de redes sociales, que no fueron factorizados en el marco de alambre original. Para concluir el producto final es 90% similar a la versión inicialmente conceptualizada. Este es el poro off marcos de alambre. Te tiene, dijo el presidente en sitio web superior, o APP se va a ver y qué funciones va a satisfacer. Y frames te dan una sensación fuera de los retos que hay que superar si estás construyendo un sitio web impulsado por funciones. Los marcos Y también dan a los desarrolladores claridad sobre lo que hay que hacer. Para sumarlo todos los marcos de alambre. Dé su base sobre la que pueda construir sus sueños e ideas. Recuerda siempre, nuestro edificio es tan fuerte como su base. Si la fundación es débil que el edificio se derrumba, el mismo fantasma, tu sitio web o producto. Si la fundación es débil, puede que tengas la mejor idea o app en mente, pero no tendrá éxito. 9. Comprender las personas de usuario: Nos estamos aventurando un poco en territorio UX en este momento, pero siento que es crucial que conozcas lo esencial de este concepto. Entonces, ¿qué es una persona de usuario? Ah, persona de usuario como un usuario hipotético que tiene oro similar y comportamientos fuera de tu usuario objetivo , AH, personaje ficticio que representa los rasgos y características esenciales de tus clientes compre hasta de. Por lo que Nas o personas de usuario se crean a través de encuestas de investigación y entrevistas fuera de su público objetivo . En términos laicos, persona de usuario es identificar quiénes van a ser tus usuarios principales y mapear sus personalidades. Asumamos que estás construyendo un pequeño sitio web de ahorro. Vamos a nombrar este sitio web benny put dot com Este sitio web automáticamente adeudar un preset algunos de tu cuenta bancaria cada mes e invertir lo mismo en fondos mutuos. ¿ Quiénes serían los usuarios objetivo de Penny Parte B. Serán niños? ¿ Será llamar a estudiantes, o será de abuelos? El factor más importante para el libro de Penny Porter es que su segmento objetivo, o grupo objetivo debe tener una fuente fuera de Ingresos regulares Los niños dependen de sus padres, por lo que no son el grupo objetivo. Los universitarios dependen parcialmente de los padres de familia, pero aún así hacen trabajo a tiempo parcial. Todavía no son el grupo objetivo porque ese ingreso esporádico y los abuelos estacionales son mayores. folk suele vivir de una pensión o inversiones que ya realizaban en el pasado. Por lo que no son tu grupo objetivo ideal para asegurar inversiones frescas yendo por prueba y error, puedes aislar al grupo objetivo para Penny Port va a ser personas que tengan una ganancia constante y tengan un trabajo que les pague regularmente. El segmento objetivo serían parejas trabajadoras jóvenes más frescas que estén saliendo o casadas una vez más. Esto se basa en una encuesta de varilla de medir y es una cuestión de hecho una suposición, ya que todos los supuestos errores podrían arrastrarse. Y la forma más recomendada de hacer la validación del segmento Stargate es validar. Tu suposición es tomando una encuesta de muestra y hablando directamente con tus clientes finales. Para este ejemplo, supongamos que el segmento objetivo va a ser hombres y mujeres de entre 20 y 30 años con ingresos estables queriendo invertir para el futuro. Tienen un título universitario y nuestra sanación sabia de Internet de Tiro, una dos ciudades enteras de un país en particular. Déjame mostrarte una persona de usuario de muestra. Conoce en Eire en Iowa, trabaja como entrenamiento en la división de recursos humanos fuera de una startup. Empezó su carrera hace apenas un año. El arranque para el que trabaja, recaudó una buena cantidad de capital de riesgo y tiene un buen potencial de éxito. Relación sabia, ella está en una relación comprometida, seria. Definitivamente el matrimonio está en nuestra mente en Iowa, esta hembra a su regreso de edad, 22 a 28 años. Su ingreso promedio es de alrededor de 15 mil dólares estadounidenses, o yo en nuestros 10 millones. Y tiende a llevar un estilo de vida normando. Ella tiene un comportamiento tranquilo y tiene una región a cuál es el futuro? Ella entiende el valor del dinero y tiene el impulso de ahorrar. Ella tiene aficiones activas como viajar, escribir y jardinería que n más rica, emocional y mentalmente. Está activa en redes sociales, pero es consciente de su reputación. Comparte artículos noticiosos vinculados a un campo de trabajo o afición. Ella no comparte nada. Ella considera esta falsificación para incluso fotos de perros, gatos y celebridades. Su oro incluye construir un corpus decente cuando es momento de fundar una familia o vivir con una pareja a la que quiere maximizar bien durante los primeros años fuera de una obra que enfrenta temas en entender la jerga técnica respecto a las inversiones en es bombardeada con los consejos gratuitos que obtiene de sus compañeros. Ella quiere una solución simple, fácil de usar que atienda a su estilo de vida, pesar de que quiere que la solución sea automatizada. Ella querría ver los dashboards fuera de cómo están desempeñando sus inversiones. Esto es lo que hace muchos port dot com. Automatiza la inversión en base a metas y apetito de riesgo. Da reporte conciso, tiene hermoso dashboard con métricas relevantes y es accesible incluso en móvil, un producto y un partido de cliente hecho en el cielo. 10. Analizar el sitio web de referencia: cuando tengas una idea de diseño, siempre busca referencias buscando en otro sitio similar. Se llega a conocer aguas por ahí y lo que se puede hacer de manera diferente. Además, puede funcionar de la otra manera a ti. Conoce lo que está funcionando y puedes implementar lo mismo. ¿ Recomiendo el primero que el segundo? ¿ Uno de los mejores lugares para consultar las referencias? Interés del ISP. Pinterest te da mucha inspiración de diseño. Se puede ver lo que están haciendo otros diseñadores por ahí. Tengo un barco llamado Luz Industrial y Magia. ¿ Qué pasó? Todas las cosas increíbles que encuentro a través de Internet, encontré un sitio web que vamos a analizar posteriormente en Pinterest. Encontré un currículum, una plantilla de sitio web por pixel mind para ser la mejor plataforma para que comiences. El sitio web tiene un enfoque limpio y minimalista al respecto. Este sitio web está siguiendo un diseño de una sola página. Básicamente, se puede acceder a todas las diversas secciones mediante desplazamiento. Esta es una gran técnica de diseño. Si estás viendo este sitio web en un dispositivo móvil, es mucho más fácil desplazarse que hacer clic derecho. Cualquier sitio web que tu factura tiene que ser móvil amigable ya que puede permitirte mostrar tu trabajo a una planta prospectiva de inmediato en tu smartphone. Entonces analicemos el diseño. Se tiene una gran imagen de portada poniendo inmediatamente una cara al nombre de la hamburguesa. Manu se utiliza aquí, ya que da un lado izquierdo royal con todas las secciones importantes del sitio web del lado derecho , puedes distinguir las redes sociales. Los iconos se muestran de manera bastante predominante. Esto es importante porque como freelancer eres el encargado de generar tu propio negocio , y no hay mejor manera que las redes sociales. Justo debajo de la imagen de portada está el nombre. Junto con el conjunto de habilidades básicas. Esto es crucial. Atrás quedaron los días de la Cuaresma oídos humanos en enormes volúmenes de texto. El lapso de atención humano es rojo, utilizando drásticamente por el día. Necesitas poner palabras clave si quieres comunicarte de manera efectiva. Si la persona quiere saber más, hay un botón Para descargar un CV detallado, asegúrate de revisar la sección de consejos y trucos fuera del curso para ver lineamientos y cómo hacer uno atractivo pagado CVI o Izumi. Esto culmina la sección de aterrizaje o, en este caso, la sección de bienvenida una página de aterrizaje es la primera página del señor Sees cuando aterrizan en su página web. Existen diferentes tipos de páginas de aterrizaje. Discutiremos sobre ellos en el apartado posterior. El siguiente apartado es la sección sobre mí. Un breve apartado sobre mí es la mejor manera de presentarte con algunas líneas de texto limitadas . Hay una foto en miniatura con algunos detalles de contacto relevantes y algunas métricas creíbles, como el número de proyectos terminados. cuántos clientes se les ha atendido, y si se puede notar el número de tazas de café terminadas, esta no es una métrica relevante en absoluto, pero ésta se utiliza para establecer un tono más ligero, no corporativo a todo el sitio web. Esto se hace para humanizar al freelancer y tratar de que el visitante se sienta. El freelancer es un trabajador dedicado porque el café es generalmente el estimulante que se usa cuando el ir se pone duro y uno necesita quemar bien el aceite de medianoche. El siguiente apartado es la sección de resumen de carrera. Nuevamente, hay un rubro que captura la sección Titán, junto con unas pocas líneas que resumen los logros de la carrera. Esta sección se puede utilizar para resaltar cuáles son tus calificaciones educativas, y si has tenido alguna experiencia laboral previa. El siguiente apartado es la sección de habilidades en un mundo cuando necesitas ser un jack de todos los oficios, se basa para ser honesto en qué fuerza tienes. Esto se denota por una gráfica circular, pesar de que he visto a la gente juzgar su conjunto de habilidades por darse puntajes más altos para todos. Te sugiero encarecidamente que no hagas eso. Esto es mejor poblado sacando una encuesta a tus clientes. Después de haber completado un proyecto, piénsalo como un set de C o un puntaje de satisfacción del cliente. Asegúrate de consultar la sección de consejos y trucos para conocer la mejor autopista para realizar una encuesta de satisfacción de clientes o clientes. El apartado después de la sección mi habilidad es el núcleo fuera de la página web, la sección de portafolio. El apartado tiene el mismo diseño que antes, con el encabezado anunciando el nombre de la sección y unas pocas líneas de texto para resumir el trabajo continuación que tienes una especie Barton que inicia el diferente tipo de trabajo que has realizado. Si estuviera construyendo un sitio web de reanudación, podría tener mis cursos online ordenados aquí en base a temas. A lo mejor esto podría ser UX tú eres yo diseño. ¿ Qué desarrollo mamario, emprendimiento? Curso de choque, etcétera. Aquí las imágenes originales Great off se utilizan con funciones adicionales, como marcarlas como favoritas o abrir una vista más detallada de la misma. El último apartado es el apartado Contáctame. Esta es una de las secciones más importantes fuera de tu página web. Esto es lo que va a generar una ventaja para que realmente te dé seguimiento. Este formulario de contacto cuenta con todos los campos relevantes y además cuenta con todos los datos de contacto relevantes para asegurarse de que su planta de perspectiva seguramente pueda llegar a usted de su manera preferida . Llevemos nuestro enfoque de vuelta a la parte superior de la página y al menú de hamburguesas al hacer clic en él . Se puede distinguir un tipo de secadora de animación sale de la izquierda. También se observó, hay una sombra en la esquina de Destructor. Esto es para crear un sentido off depth off sentimiento de que este menú se trata de una página web en un plano diferente. Podrías distinguir los encabezados de sección están presentes en este cajón, Manu, Manu, y al pasar por encima de ellos los resalta, y aparece una animación subyacente justo debajo de ellos para ahora dar clic en cualquier encabezado de sección toma el visitante a esa sección en particular en la página web. Esto se hace mediante el uso de anclajes. Básicamente, estás dejando caer un ancla al inicio de una sección en particular y asignándolo al encabezado de sección Oh, pero al sitio de desarrollo. Pero sentí que deberías saber de esto. También hay cierta animación, como el menú de hamburguesas, convirtiéndose en cruzado y cruzado volteando de nuevo en un menú de hamburguesas. Nuevamente, puedes notar las secciones. Sigue un formato estándar. Hay un encabezamiento y abajo que tienes unas líneas de texto. Es lo mismo para todo tipo de secciones. Por aquí. El color del texto es mayormente gree, y el fondo es grande y blanco. Hay una sensación de uniformidad en el diseño, y esto se llama sistema de diseño desde tipografía, maquetación y granos, dos colores, iconos, componentes e incluso convenciones de codificación hasta voz. Y no el estilo, guías y la documentación. Un sistema de diseño está reuniendo todos los's de una manera que permita que todo el equipo aprenda, construya y crezca. Estaremos aprendiendo más sobre los sistemas de diseño en las futuras lecciones. Ahora que hemos entendido el sitio web, construyamos nuestro marco de alambre 11. Introducción a las maquetas de Balsamiq: balón de estómago es una aplicación increíble que te permite tanto bella por marcos. Al abrir IQ inferior, te saludan con la ventana de aplicación. El interfaz de usuario IQ inferior está conformado por cinco áreas primarias. La barra de herramientas, la biblioteca U I, el lienzo, el panel Navegador y el panel de propiedades. La barra de herramientas consiste en una serie de iconos, cada uno para realizar acciones en otras áreas de la interfaz de usuario. Se puede ver una posición manual de hamburguesa en la esquina superior izquierda no están haciendo clic en esto se obtiene un desplegable. Este desplegable consiste en unas cuantas opciones. El 1er 1 es simulacros. El 2do 1 es Activo, los símbolos Tercera Unidad, y el último es basura. Los marcados son los que estarás enmarcando bien en el lienzo. Por aquí, los activos son las imágenes que estaría usando en los marcos de tu esposa. Si es todo lo que las estás usando, puede ser una imagen en particular o incluso un logotipo que quieras incorporar a tu esposa. Para él, los símbolos 3er 1 son un concepto importante en el campo del diseño. Un símbolo es un grupo fuera de ti. Se controlan objetos Y que representan una sola pieza de funcionalidad. A menudo se utiliza para partes de la interfaz de usuario que aparecen repetidamente en varias pantallas diferentes. Otros programas de software a veces se refieren a esta función como plantillas, páginas maestras, componentes personalizados o incluso widget. Por ejemplo, si utilizas la aplicación Gmail en tu smartphone, el flotante plus Barton se ve en casi todas las pantallas. El diseñador, al crear un simulacro de arriba de la misma, habría creado un símbolo fuera del icono más para reutilizar varias veces. Construir hornos, reutilizar como y cuando sea necesario. En esencia, los símbolos te permiten crear elementos comunes reutilizables que puedes usar a través de diferentes pantallas de marcado . La basura es básicamente todos los elementos que has eliminado, y es posible que quieras recuperar. El grupo de iconos en el centro de la barra de herramientas es para las funciones de lienzo que se realizan comúnmente . Estas son las acciones que probablemente hayas utilizado antes en editores de texto como Copiar, Pegar, Pegar Agrupar, Alinear y Zoom. El apartado final fuera de la barra de herramientas está en el extremo derecho y contiene el rápido en dos conmutaciones para el panel de información del proyecto inspector de propiedades de la Biblioteca U. Y y conmutar hueso de presentación a pantalla completa, la Biblioteca U Y. o la U I Control Elements Library es una larga tira de U. Y. Controles justo debajo de la barra de herramientas. Enumera todos los elementos u objetos de control U Y que pueden venir con los mock ups así como activos e iconos y símbolos. El objetivo principal fuera de la biblioteca U. Y es dejarte en ti. Yo controlo elementos al lienzo de marcado ahora llegando al área de lona maqueta. Esta es la zona de trabajo más importante fuera de las maquetas ultimas. Aquí es donde tu marcado cobra vida. Una vez que añadas, objetas a él, puedes moverlos, redimensionarlos, jugar con ellos al contenido de tu corazón hasta que tus elementos de marcado se sientan bien. El panel Navigator en el lado izquierdo muestra la lista fuera de las pantallas de marcado o lienzos. Se resalta el objeto seleccionado actualmente. Puedes hacer muchas cosas geniales con el panel Navigator, como configurar lienzos infantiles, etcétera. Exploraremos lo mismo en las próximas lecciones. El panel del lado derecho fuera de la aplicación, propiedades desplazadas para un control u objeto seleccionado, dependiendo de qué icono esté seleccionado. O muestra al inspector de propiedades o el piano info del proyecto. El inspector de propiedades permite establecer algunas propiedades comunes como alineación, posición, tamaño, etcétera, por ejemplo. Déjame solo soltar un botón por aquí, y puedes ver que estoy recibiendo varias funcionalidades por aquí para transformar este botón en particular. El panel Info del proyecto contiene un área para agregar algunas notas sobre el proyecto y también seleccionar el tipo de piel. Te explicaré los diferentes tipos de pieles y dónde usarlas un poco por delante en el curso. Ahora que has entendido los diversos paneles fuera de balsámico, construyamos ese marco de alambre. 12. Pantalla de encuadre con alambre: 1: al abrir la cabeza balsámico hacia la barra de herramientas U A a la pestaña común y arrastró hacia abajo una ventana del navegador. Entonces, vamos a nombrar este sitio web. Mi impresionante currículum un sitio web, ¿verdad? Y luego vamos al tamaño y al Inspector y cambiarlo a 10 a 42 576 Vamos a alejar un poco. Fantástico. Esto nos da una bonita representación de pantalla blanca fuera de una ventana del navegador que estamos construyendo para dispositivos de pantalla blanca. Atrás quedaron los días de los monitores de chatarra. ¿ Estoy en lo correcto? Entonces antes de que incluso empecemos a transformar un anuncio, ustedes elementos. Hay un concepto importante al que me gustaría presentarles. Y eso se llama bloquear un elemento tú en particular. Vamos a la derecha como y haga clic en el navegador de bloqueo. Básicamente, lo que pasa es que una vez que encerraste este particular tu elemento, esto no se mueve libremente. Esto es muy crucial. Si estás construyendo mucho, sois elementos. No quieres que se metan mientras trabajas de manera tan sistemática. Siempre que estés construyendo marcos de tu esposa, bloqueó los elementos que no vas a interactuar activamente. Menta. Volvamos a la página web. Podemos ver que tenemos un menú de hamburguesas por aquí a la izquierda, seguido de algunos iconos de redes sociales a la derecha. Entonces tratemos de replicar la costura sobre balsámico. Vayamos a contenedores y seleccionemos el rectángulo de la barra de herramientas U I. Arrástrelo hasta aquí y transformémoslo para que parezca un menú de hamburguesas . Eso es lo que solía dimensionar un poco. Excelente. Ahora quiero que mantengas Option y Mac y Old y Windows y arrastrado hacia abajo, creando así otra copia fuera del Elemento U. Podemos repetir los mismos pasos y crear la tercera línea para seleccionar los tres rectángulos y crear un grupo fuera del mismo. Puedes hacer lo mismo presionando Comando G. Este es un concepto muy importante, y los grupos de diseño te permiten, bueno, un grupo de set algunos elementos y luego operar en ellos como grupo en lugar de operar en ellos de manera individual. Ahora me estoy moviendo más viejo a tus enredos al mismo tiempo, me siento un poco incómodo con la longitud, así que déjame tratar de reducir un poco la longitud y también el capitán. Entre ellos, podemos ver que hay ciertos iconos fuera de las redes sociales por aquí en la parte inferior derecha. Hace que sea realmente fácil para nosotros incorporar iconos de redes sociales. Pasemos al campo de anuncios rápido y busquemos Facebook en la barra de herramientas. Esto se ve bastante bonito. Arrástrelo hasta aquí, y también podemos seleccionar el tamaño. Siento que em es mejor o forrado para reflejar cómo se ve el sitio web original. También podemos sumar los otros elementos a como Twitter. Yo estaba arrastrando con ustedes y otra vez listo, acostumbrado a Seiss nos hemos vinculado en Strung it Up Again. Bonito. ¿ Es este hielo y estoy recibiendo el último fue Instagram otra vez? Hice sus estudios dis hielo y lo arrastré aquí mismo. Vamos a traerlos a todos en una sola noche. Sí. Y ahora selecciona todos estos iconos y se trasladó a los inspectores y selecciona el espacio hacia fuera verticalmente . Esto traerá un espaciado igual entre los iconos. Podemos ver que hay una enorme imagen de portada debajo de los iconos de las redes sociales, así que vayamos a la pestaña de medios en el tú una biblioteca y arrastramos hacia abajo imagen que se llama esta imagen de portada y arrástrala hasta el otro lado, podrías preguntarme, ¿ Por qué arrastramos hacia abajo una imagen y paja arrastrando hacia abajo un rectángulo se puede estacionar que pensaba que llegaría a ella en una etapa posterior? Volvamos a nuestra página web de referencia. Admitimos que hay unos libros de texto enormes justo encima de la imagen de portada. Entonces volvamos a los contenedores y seleccionemos rectángulo y lo coloquemos encima de la imagen de portada . Antes de empezar a hacer algo. Yo sólo quiero volver atrás y mirar. El imagen de portada tal que cualquier tipo de acción que haga aquí no afecta la posición de la imagen de portada detrás de ella. Transformemos un poco el tamaño de los cuadros de texto para que esté mejor alineado con lo que tiene el sitio web de referencia. Tenemos un título de cabecera, seguido de un subtítulo y un botón. Tratemos de replicar lo mismo en Balsámico, así que déjame ir al texto y escribir un título grande. Ahora tomemos un subtítulo e introduzcamos el texto que ojos te barra X. ¿ Qué prensa aburrió Android? Esa es la posición. Esto solo un poquito para el gran título que está en el botón con arrastrar hacia abajo el Barton y colocarlo justo debajo del subtítulo que aumentan un poco el tamaño. Siri sebo. Enhorabuena. Acabas de completar el primer green sobre Balsámico. 13. Pantalla de encuadre con alambre: 2 parte 1: vamos a desplazarnos un poco hacia abajo y fueron recibidos con sobre mi sección. El apartado sobre mí consiste en nuestro título o, en este caso, político este un encabezado, junto con unas pocas líneas de texto por debajo de él. También tiene algunos rectángulos colocados uno encima del otro, con algunas métricas también mencionadas en la parte superior. Entonces volvamos a Balsámico. Demos click derecho y duplicemos la pantalla anterior. Entonces, eliminemos las cosas que no requerimos. Déjame desbloquear la imagen de portada y borrar la misma. Permítanme borrar el rectángulo, el texto en el botón. necesitamos el gran título, así que vamos a llevarlo hasta el centro por debajo del gran título. Tenemos un bloque de texto, así que arrastremos hacia abajo el texto. Se compra elemento. Vamos a nuestra página web y copiemos este texto. Volvamos a traerlo a Mick volátil y pegarlo. Excelente rehabilitación son línea de subtítulos apenas cerca de listo. Posicionémoslo hacia el centro mediante el uso del texto. Herramientas de transformación en el inspector que vamos a estar aprendiendo son concepto muy importante llamado símbolos y cómo crear algunos construidos en Baltimore. En este momento, un símbolo es un set off you elementos que se pueden reutilizar. El te ahorra mucho tiempo cuando estás construyendo muchas pantallas con mismo elemento reparativo , y en este caso es el título de este pequeño texto de párrafo debajo de él. Entonces vamos a seleccionar el título grande y el elemento de texto y agruparlos. Ahora lo vamos a convertir en un símbolo, así que dirígete a la hora del inspector, y aquí puedes nombrarlo como símbolo del título y puedes golpear convertir a símbolo. El color ha cambiado de Popo a verde. Se puede acceder a los símbolos mediante el uso del símbolo. Pase por aquí. Reutilizaremos esto en una etapa posterior. Ahora agreguemos un nuevo rectángulo por aquí, Así que vamos a los contenedores y pinchemos sobre rectángulo y vamos a redimensionarlo. Arrastremos otro rectángulo en la parte superior. Por lo que hemos creado la base para la visualización de métricas. Recuerda siempre que todos tus elementos están en diferentes planos. Por ejemplo, el rectángulo alargado está encima del rectángulo estirado. Déjame tomar el rectángulo alargado y enviarlo atrás. Se puede distinguir que el rectángulo estirado está sentado encima del alargado. Déjame traerlo de nuevo arriba, y ahora puedes ver que el alargado está encima del rectángulo estirado. Pues bien, para poner las cosas en perspectiva, permítanme darles otro ejemplo. Asumamos que estás en un helicóptero de lujo, ¿verdad? Y estás mirando abajo a una cuadra en particular de tu ciudad. Todos esos edificios diferentes son como diferentes tú por elementos. Algunos edificios son más altos, algunos edificios más cortos, pero cuando se ven desde arriba, todos parecen estar a la misma altura, pesar de que existen en diferentes planos. Entonces vamos a fingir los detalles restantes en los rectángulos. No tenemos imagen un subtítulo, una línea de texto, unos iconos en unos pocos, tanto texto como de mujeres dentro de estos rectángulos. Entonces volvamos a saltar de nuevo al Balsámico. El rápido en dos de nuestros hace que sea realmente fácil para nosotros ideo elementos, Así que vamos a rastrear esta imagen. Busquemos el subtítulo. Arrástrelo hasta aquí. Vamos a escribir texto. Seleccionemos la etiqueta. Permítanme simplemente seleccionar lo mismo. Déjame mantener la opción y duplicar lo mismo. Déjame subir un poco esto para que sea mejor posición. Déjame mantener el turno y reducir el tamaño fuera de la imagen para que tengamos más espacio. Permítanme arrastrar estos elementos. Ah, déjame bloquear este rectángulo. Muy selectivo, dijo Title y algún texto y tire en otro ejemplar fuera del mismo. Eso es re centro. Todo esto se ve bien. 14. Encuadre con alambre: pregunta de desafío de pantalla 2: Te he mostrado cómo usar la biblioteca y el rápido en la barra de herramientas rápidamente en el resto de los iconos para completar la pantalla. 15. Encuadre con alambre: solución de desafío de pantalla 2: Enhorabuena. Si lo has hecho con éxito ahora busquemos los iconos en la Biblioteca U. Y. Y. El primer icono es un icono similar, así que intentemos encontrarlo. Sí, tenemos un pulgar arriba delineado eso arrastrando hasta este punto en particular por aquí. El siguiente ícono que tenemos es un ícono de usuario más, así que volvamos a usarlo. De Vito. No hemos añadido ícono de usuario. El siguiente que se ha ido es una taza de café. A ver si Baltimore lo tiene para nosotros ahora. Tiene trofeo. Sí, excelente. Podemos notar que aquí hay algunos números de título. Vayamos a la rapida en campo y tipo de Gran título 10. Y para que el subtítulo vaya por nivel, coloquemos esto en el centro usando las herramientas de transformación de texto. Vamos a mantener la opción y copiar de nuevo los números. Vamos a mantener la opción y la copiamos. Subtítulos a continuación. Ahora alinemos un poco esto. Podemos utilizar las directrices automáticas como referencia Deborah, lo que nos permite alinear objetos anteriores en la pantalla con bastante facilidad. Excelente. Nosotros también hemos completado pantalla . Espero que te estés divirtiendo 16. Encuadre con alambre: pantalla 3: la pantalla de resumen de carrera es un poco más larga en la naturaleza. Sigue la misma estructura fuera de adelante. Ah, y algún texto a continuación. Entonces vamos a duplicar pantalla, también, en borrar los elementos que no necesitamos. Transformemos este rectángulo y añadamos el sombrero de graduación. Sí, rastreemos esto en el lienzo y cambiemos también el tamaño . Doble X. Ahora agreguemos un subtítulo. Colóquelo justo debajo del ícono que es. Extiende un poco este rectángulo y colóquelo justo al lado del icono. Volvamos a una referencia representan. Podemos notar que hay un número seguido de un título con un subtítulo, otro subtítulo en un montón de texto Así podemos volver a Balsámico y dejar que Título del anuncio cambie eso a un número que agregó otro título. Cámbialo. Teoh String Bass son título basado en texto Eso es un poco demasiado grande. Bajémoslo a 24. Posiciona eso justo al lado del número. Vamos a un subtítulo sobre otro tema. Añadamos algo de texto. Seleccionemos elementos y reducimos a Seiss. Alinémoslo en su lugar, seleccione todo el elemento y cree un extensor de grupo enredo un poco y mantenga viejo son opción en duplicado sobre elementos activados que hemos creado. Hacer doble clic en el grupo te permitirá editar elementos individuales fuera del mismo y golpear escape te llevará de vuelta al lienzo. Seleccionemos todos los elementos del rectángulo y creemos un grupo para que podamos alinearlos un poco mejor en la página web. Se puede hacer notar que hay un Aramark que está apuntando hacia el ícono de graduación. Entonces, veamos si podemos encontrarlo. Arrastre el icono hasta el punto y colóquelo para que esté en contacto con el rectángulo. Excelente. Tenemos terminada la pantalla tres. 17. Encuadre con alambre: pantalla 3: parte 2: podemos ver que el segmento de experiencia fuera del sitio web está alineado bastante diferente al segmento anterior. Aquí, se puede apreciar que todos los elementos están mintiendo a la derecha y el icono está hacia el lado derecho de la pantalla. Entonces volvamos a Balsámico y duplicemos la pantalla. Eliminemos los elementos que no requerimos. Seleccionemos el icono de graduación en el subtítulo y lo movamos un poco fuera del lienzo. Posteriormente, selecciona el icono de Aramark y mueve que también un poco fuera del lienzo. Ahora movamos todo este segmento hacia la derecha y posicionarlo por aquí. Seleccionemos el icono de graduación en el subtítulo y más al lado derecho de la pantalla . Eso es doble clic en el icono y busca una Nikon que se asemeje a un empate. Excelente. Hemos sustituido el ícono por otro nuevo ícono y entra en el subtítulo Eliminar este Adam Mark y encontremos otro Aramark señalándonos a la derecha. Arrastre hacia arriba el ícono y colóquelo justo en el centro para que esté entrando en contacto con el rectángulo que es una línea Icahn un poco. Necesitamos alinear el contenido al lado derecho fuera del rectángulo. Entonces volvamos a la lechuga balsámico en grupo todos los elementos dentro de este rectángulo en particular . No lachter enredo Ahora que ha bloqueado este rectángulo. Ahora vamos a seleccionar todos los elementos dentro de este rectángulo en particular e ir a la sección de control y deslizar en una línea. Ahora mismo todos los elementos se han movido hacia el lado derecho. Pero se veían un poco revueltos, así que vamos a arrastrarlo hasta el borde y dejarlos arrastrarlos hacia fuera. Ahora déjame tomarlo esta posición al centro y alinearlo de tal manera que esté a la par con el subtítulo Déjame hacer lo mismo con el siguiente párrafo formateado al centro y luego alinearlo para que esté en línea con los subtítulos. Selecciona el título y reduce el tamaño para que esté a la par con los subtítulos demasiado Excelente. Si me siguen hasta ahora, eso es genial. Has completado la pantalla tres. Enhorabuena 18. Encuadre con alambre: pantalla 4: Entonces empecemos a construir pantalla para que tengamos una gráfica de métrica de conocimiento. Entonces veamos cómo podemos duplicar lo mismo en balsámico. Volvamos a Balsámico y duplicemos la pantalla. Eliminemos los artículos que no necesitamos. Desbloquea este rectángulo y borra lo mismo. Ahora vamos al rápido activo y busquemos un círculo. Esto se ve bien. Por qué no llega a drogarla hasta el centro y mantenga turno y agrandarlo. Podemos ver que tenemos un título junto con algún texto, Así que volvamos a una página anterior. Copia este símbolo y vuelve a pegarlo. Ahora eso es rápidamente agregar algo de título. Tráelo al centro y cámbialo a números. Colóquelo en el centro. Vuelve al ganado rápido y busca una etiqueta. Entrar conjunto de habilidades. En este caso, voy a probar mi conjunto de habilidades. Es decir, seco. humor nos posicionó al centro usando las herramientas de formato de texto. Vamos a mover esto un poco al centro del borde selector de pantalla y cambiarlo a un gris claro que aumente el tamaño de la etiqueta a 20 encendido. Posicionarlo en consecuencia. Sí, Ahora elegamos a todos estos tres. Andi, ponlos juntos y presiona Ault u opción y crea duplicados fuera de la misma que puedes notar en las armas que tenemos. Las imaginaciones de paginación permiten al usuario ir a otra página o a una sección fuera del sitio web . Asumamos que tienes más del doble para conjunto de habilidades. Esto permite al usuario desplazarse por las habilidades que tiene. Podrás aprender más sobre cómo hacer estos prototipos altamente interactivos en mi curso de mecanografía de perlas . Entonces volvamos a Balsámico y añadamos los dos círculos y algunas formas para denotar la paginación, seleccionemos todos estos grupos y solo reducimos un poco el tamaño y alinearlos a disidentes. Ahora vamos al arroyo en Toolbar y busquemos Arrow con un círculo. ¿ Klein son excelentes? Llevémoslo al centro. Eso es en unos cuantos círculos. Estamos acostumbrados a tamañar dos s. Volvamos al rápido a y busquemos Círculo delineado y traerlo. Teoh s en posicionarlo justo al lado del otro círculo que le dijo a Option y crear otro . Y volvamos a la barra rápida en la barra de herramientas y busquemos otra flecha, que está apuntando al otro lado. Fantástico. El círculo lleno básicamente denota al usuario qué página está viendo actualmente, y el todo o el gran círculo hacia fuera denota las otras páginas a las que el usuario puede navegar dentro del sitio web. 19. Encuadre con alambre: pantalla 5: parte 1: Duplicemos la pantalla y eliminemos todo lo demás excepto el título y una pequeña línea texto. Excelente. Si visitas la página web, podemos hacer que haya una interfaz tabular. Esto es como una función de ordenación, así que volvamos a Balsámico y busquemos la barra de botones U Element. Arrástrelo hacia arriba justo debajo de la pequeña línea de texto. Volvamos a nuestro representante de referencia Encabezados laterales y cedro, todos Diseño Web imprimen un diseño APP. Así que volvamos aquí y viejo representante Diseño diseño de impresión AP decidir. Puedes notar que estoy separando las pestañas usando el coma. La barra de botones por defecto tenía sólo tres pestañas, pero he añadido otra vez. A ver si va a venir. Excelente. Para agregar más columnas, debes tener un signo de coma justo al lado del elemento en el que estás entrenado entrar. Entonces después del diseño de impresión, tuve una coma y entré diseño, con ello Balsámico entendió que necesita una columna adicional. Volvamos a un sitio web de portafolio y podrías hacer que haya una serie de imágenes por aquí, así que volvamos a nuestra rápida en la barra de herramientas y busquemos imagen ahora sostenga la tecla de opción Ault y duplique thes, con ello creando una forma fuera de un gran vamos a aliarnos en todos los's un poco al centro y mantener opción de nuevo y arrastrar hacia abajo y crear otro antes, mayoría una cuadrícula. Ahora selecciona todos los de y crea un grupo. Felicidades, tu pantalla terminada cinco. 20. Encuadre con alambre: pantalla 5: parte 2: Volvamos al siguiente verde. Se puede ver que esta pantalla está particularmente fuera de lugar, su apoyo no en la gripe. Pero esta pantalla es como una pantalla de llamada a la acción. Imaginemos que el visitante realmente se emociona. Al ver todo el trabajo que has hecho y realmente quiere contactarte, debes darle a él o a ella el aprovisionado para hacerlo. La siguiente acción posible para el usuario, después de emocionarse por una obra, debe ser contratarte o ponerse en contacto. Y eso es lo que esta página web está tratando de hacer con el botón Big Blue Hire me. El colocar fuera de este gran botón azul es perfecto, así que volvamos a Balsámico y tratemos de recrear esto que se duplica la limpieza anterior y eliminar todos los elementos que no necesitamos. Vamos a la U I a bar y buscar subtítulos que se está arrastrando por el centro y el para volver a una página web y copiar este texto. Doble clic en comando o control. Ser bastado. Espero que hayas notado una ligera diferencia en nuestra página web. Se puede distinguir que hay un salto de línea que IHS me contrata empieza en un carril diferente , pero en Balsámico quiere basted. Se puede distinguir que está en una sola línea, se puede arreglar y abajo. Es increíble en esos términos. ¿ Por qué acabas de entrar a la fila y tienes que entrar? Contralora son y pega Enter y podrías distinguir que balsámico entendió que contratarme debería partir de una nueva línea. Hagámoslo al centro y asegurémonos de que todo se vea. Entonces volvamos a la primera pantalla y copie este botón de descarga de CV y traerlo de vuelta aquí y pegarlo. Eso es por favor en el centro. Excelente. Ahora vamos a la barra de imágenes y descarguemos. Vamos al rápido en la barra de herramientas y busquemos Imagen. Ahora eso es arrastrarlo por completo y colocarlo justo debajo del yo superior. Pero felicitaciones. Ya has completado la pantalla 5.5, y solo hay una última pantalla por conquistar, y luego estaremos pasando a construir el sistema de menús 21. Encuadre con alambre: pantalla 6: por lo que vamos a duplicar la pantalla anterior y eliminar todos los contenidos. Ahora vas a usar el símbolo que hemos creado. Entonces vayamos a la biblioteca y selecciona símbolo y arrastre título en texto a la pantalla de la U. S. S. Puedes editar elementos individuales de un símbolo al igual que lo haces con los grupos. Todo lo que necesitas hacer es hacer doble clic y realinear un poco la parte del texto. También puedes editar la fuente fuera. Un símbolo de los cambios que realice se reflejaría en todos los símbolos anteriores. Esto. Asegúrate de no tener que hacer el doble del trabajo, ve al arroyo en la barra de herramientas y busca el área de entrada de texto e ingresa los campos relevantes porque estamos creando un formulario de contacto. Duplicemos los campos que hemos creado, vayamos a la última parte y tuvimos área de entrada de texto y arrástralo hacia arriba para crear la parte de mensaje del formulario de contacto. A pesar de que en el sitio web se puede ver que los nombres fuera de los lujos son sobre el campo de texto fuera recomiendo colocar el nombre del campo dentro del propio cuadro de texto en dejar que desaparezca cuando el usuario empiece a introducir algún texto en el mismo. Esto se denomina texto de Marcador de posición. Entremos el mensaje más antiguo de la policía porque ese es un área de mensajes. No. Volvamos a la barra de herramientas más rápida y agreguemos un botón. Arrastremos el botón hacia abajo por debajo de los marcos de esposa relevantes del campo de texto y desplazamos un poco hacia arriba y alineamos todo el campo correctamente. Eso ha cambiado el nombre a contactar, y tenemos nuestro formulario de contacto. 22. Encuadre con alambre: desafío de pantalla 6: Ahora que ya sabes construir increíbles marcos de esposa, me gustaría que completaras la pantalla poniendo los iconos relevantes y todo el contenido restante . 23. Solución de desafío de la Wire-framing con Wire-framing - Pantalla 6: Entonces vamos a Berlín, un pequeño subtítulo de título y arrástralo hacia arriba e introduzcamos el texto. Contáctame Ahora tenemos un icono de ubicación, seguido de algún texto, así que vamos a copiar esta ubicación de texto. Un marcador de mapa. Excelente. Entonces, solo dejemos caer el marcador de mapa y peguemos este texto justo al lado. Tenemos un celular hacia adelante por unos números que representan Contáctame vía móvil, aunque recomiendo encarecidamente. No pongas tu número de móvil en un dominio público Correo electrónico. Este es un sobre cerrado así y luego con el cerrado debería, también, también, eso se basa un texto de nuevo justo al lado del ícono y un número de fax. O bien, vamos a darle al beneficio de la duda un número fijo. No, es fax y pega los números justo al lado. Se puede hacer notar que nos falta una parte importante fuera de la pantalla, y ese es el alimento de sección. El pie disección es un lugar que albergará diversos datos, como tus enlaces de redes sociales si quieres o puedes tener, por ejemplo, u otros sitios web pueden tener tus publicaciones recientes. Generalmente es la última sección fuera de la página trasera. Añadamos rápidamente un pie de página vinculado a y solo copie este texto para que las letras desbloquearon el navegador y ligeramente alargadas Tomemos un rectángulo. Colóquelo justo. Aquí y vamos al texto. Intercambiarlo un poco demasiado audaz, pero para tomarlo centro y arrastrarlo Excelente, has completado todas las pantallas. Ahora vamos al hombre que secciona. 24. ¿Qué es un menú de Hamburger?: vamos a estar construyendo el menú de hamburguesas, dijo Duplicar el primer verde y crear en tu enredado Vamos a alejar un poco y arrástralo para que llene una sección fuera de la pantalla, dirígete al personal tecnológico y arrastre el elemento de lista a su enredo. Qué es Ir a nuestra página web demo y abrir al rectángulo y ver la forma en que esta lista de elementos que tenemos. Bienvenido sobre mí. Habilidad profesional. Ponga el tonto y el contacto. Entonces vayamos uno por uno y editamos esto. Bienvenida me Corea Habilidad. Llena tú y contacto. Entonces, por favor, sentémonos aquí y arrástralo hacia arriba. Se puede constatar que las brechas entre los elementos de la lista no son suficientes, por lo que necesitamos aumentar esto. Entonces volvamos a nuestras propiedades de lista y aumentemos la longitud entre estos elementos. Creo que esto es bueno lo que necesitamos para aumentar un poco el tamaño. Entonces eso es aumento de tamaño un poco 24 y aumentar la brecha entre los elementos. Deja que sus tractores un enredo fuera de esta exuberante con la pantalla y eso es sumar la marca de cruz . Excelente. Hemos completado el ítem del menú. Ahora necesitamos hacer esto interactivo 25. Comprender los puntos de anchor: cuando estás arrancando de alcista son especialmente un sitio web de una sola página como este elemento central que conoces después de recordar se llama puntos de anclaje. Los puntos de anclaje son básicamente anclas, que dirigen al usuario a una sección en particular fuera de su sitio web. Por ejemplo, déjame revisar sobre mí. Me va a llevar a la sección sobre mí. Déjame ver la sección de contactos. Me va a llevar todo el camino hasta la sección de acto frontal porque hemos creado o mejor dicho, diseñador aquí ha creado puntos de anclaje para lo mismo. 26. Haz que el Wireframe interactivo: parte 1: Ahora vamos a estar haciendo esto por fotograma Interactivo sin escribir una sola línea de código. Pero antes de eso, tenemos que asegurarnos de que el artículo muy importante. Y es decir, necesitamos renombrar nuestras pantallas. Entonces vamos a renombrar rápidamente esto para dar la bienvenida Acerca de mí. Cardia Curry are are one skills port Folio contact y renombrar la pantalla anterior Pide a todos a Vamos a eliminar esto. La última pantalla que no necesitamos, y volver al elemento del menú y crear nuestros enlaces. Entonces bienvenido se va a ir a la pantalla de bienvenida Sobre mí. Se va a ir al sobre mí carrera pantalla va a ir a la pantalla de carrera. Habilidad va a ir a la pantalla de habilidades habilidades. Ah, eso es un portafolio de twister de lengua va a ir a la pantalla de portafolio contacto va a ir a la pantalla de contacto. No, veamos este proyecto y lo veamos en pantalla completa. Ahora veamos cómo interactivo este rifle M iss. Sí, hemos vuelto a la pantalla de carrera es solo volver atrás, es decir ir a la pantalla de contacto y hemos llegado a la pantalla de contacto. Ahora volvamos atrás, déjame ver si puedo ir a la pantalla de habilidades. Excelente. Por lo que básicamente hemos mapeado las mismas pantallas a los elementos Bavis y creado una experiencia interactiva sin escribir una sola línea de corte. Emocionante, ¿no? Por lo tanto, hagamos que esto por cuadro sea aún más interactivo al permitirle abrir nuevos enlaces. Entonces vamos al ícono de Facebook aquí y seleccionemos. Agregar un nuevo think o link a una dirección Web. Déjame ir a las notas y copiar el enlace a mis grupos de Facebook, que se llama Lone Log. Por Sadat. Podrás aprender muchas cosas nuevas si te uniste al grupo también. Obtén acceso a promociones y cupones, coach. Entonces volvamos a Balsámico. Y a esto, volvamos a Twitter. Eso es correcto. A desnuda y copia mi manejador de Twitter que ha tratado o com slash. Por lo que eso s 89. Copia esto y cómo el capaz de agregar aquí vinculado a Nuevo rep. Atriss lo basó. Volvamos al Icon Lincoln. Copiar mi perfil alargar. Se puede hacer notar que hubo un estrecho con el perfil de Facebook porque aquí no había ícono que indicara un hipervínculo. Entonces volvamos a las notas. Copia de nuevo mi perfil de Facebook. Vuelve a las cuotas. Icono de libro, Seleccionar enlace a la dirección de Rep. Golpeé OK, exactamente. Nunca lo arreglé. Y volvamos al último, que es mi instagram, pero solo instagram dot com slash log de préstamo. Por lo que aquí estarás teniendo mucho off videos y fotos, así como videos de un minuto de varias técnicas de diseño diversas. Excelente. Volvamos a la vista presentación rectal política a pantalla completa y veamos si podemos conseguir estos iconos de redes sociales hagan lo que queremos que hagan. Eso es páginas abiertas en redes sociales. Entonces probemos Facebook. Excelente. Eso es, Ritter. Fantástico. Eso es intentar a Lincoln. Excelente. Probemos Instagram. Excelente. Por lo que también puedes vincular este botón para realmente habilitar una descarga de CV un poco fuera de la caja, pensando que realmente puedes usar un marco de alambre en sí como tu currículum un 27. Hacer WireFrameInteractive - parte 2: Si has prestado atención, podrías hacer que nos falta un aspecto importante. Y ese aspecto es construir interactividad entre las pantallas para que podamos construir interactividad entre la pantalla propagada rápidamente teniendo una marca de flecha, lo cual es bastante simple. Entonces bajemos el ángulo. Uno. Copia esto para todas las pantallas. Las cosas solo copian y pegan el Aramark, también. Todas las diversas pantallas que hemos diseñado para que podamos construir la interactividad MAWR en el marco de alambre. No necesitamos esto porque aquí es donde termina la pantalla. Por lo que necesitamos tener una flecha que nos lleve arriba. Vamos a copiar esta flecha a para que podamos sumar un nivel diferente de interactividad que IHS lleve la pantalla arriba dos en las otras pantallas, también. Fantástico. Yo sólo estaba rápidamente guardarlo. Y ahora construyamos la interactividad. Entonces esto va a ir a la sección sobre mí. El apartado sobre mí va a ir a la sección de carrera. El apartado de carrera va a ir a la carrera una sección y Corea. Una sección va a bajar a la sección de Habilidad. Sección diskette va a bajar a la lancha llena tu sección. El apartado de portafolio va a bajar a las acciones de culto Verde y la pantalla de acción de cultura va a bajar a la pantalla de contacto y la pantalla de contacto va a ir todo el camino de regreso. Teoh la pantalla de bienvenida que la pantalla de acción de culto va a volver a la sección anterior que es la sección de portafolio. Cuando recogimos a Arrow, el portafolio va a volver a la sección de habilidades. Las secciones de habilidades de Pyro van a volver a la carrera. Una sección, la de Corea va a volver a Teoh la sección de Corea y la sección de cardio va a volver Teoh sobre mí sección sobre mi sección ¿Va a volver a la sección de bienvenida ? Podría parecer un poco confuso en este momento, pero veamos cómo estos libros cuando entramos en modo de presentación a pantalla completa Excelente, hermosa. Estamos teniendo una experiencia cohesiva, interactiva. Uh huh. Aquí hemos chocado con una barricada. Esta sección va al portafolio de sección. El apartado de portafolio está volviendo a la sección de habilidades en lugar de volver a la acción de cultura. Ahora solo revisemos los vínculos. Excelente. Pero volvamos a ver. Hemos hecho mucho de elementos en esto por directiva Freeman. Todavía queda un pequeño elemento y lo has adivinado. Ese es el menú de hamburguesas. Antes de hacer eso, necesitamos hacerlo todo lo importante y eso es renombrar nuestras pantallas. Por lo que eso ha renombrado esto a May new out en selecto menú de hamburguesas por aquí y vincularlo a nuestra pantalla de salida de menú para que puedas distinguir el icono de color rojo, que indica vinculación. Ahora sabemos que al hacer clic en esta hamburguesa, Manu, vamos a abrir el menú de hamburguesas y hacer cómo diversos hipervínculos a los anclajes de radio de la Playa Roja. Ahora necesitamos habilitar aquí la señal cruzada para que podamos volver a la pantalla anterior y esa va a ser la pantalla de bienvenida. Tenía un guardarlo. Volvamos a la vista de presentación y veamos nuestros vínculos al hacer clic en la hamburguesa. Manu, estamos sacando el menú de hamburguesas y estoy dando click en el green cruz. Volvemos al menú principal Felicidades. Realmente has hecho a esta esposa desde interactiva sin siquiera escribir una sola línea de código y con ello podrás demostrarlo a tus inversionistas. Tus líderes de proyecto, tus padres, tus amigos, tus clientes, quienquiera y ellos podrán obtener una mejor sensación integral. Qué exactamente estás tratando de construir para ellos o para ti mismo. Pero hay un último truco en mi manga. Déjame mostrártelo en el siguiente video. 28. Haz que el aspecto profesional de WireFrame: has completado a tu esposa marco con grandes niveles de interactividad. Necesitas presentar esto a tu cliente de gestión o incluso los inversionistas lo harían. ¿ Se puede presentar lo mismo? Yo dije, Sólo que lo sepas. A pesar de que los marcos de adquisición de fondo están destinados a ser como bocetos, definitivamente se puede poner un traje Para deslumbrar a las personas directas dirigirse al panel de propiedades y seleccionar los detalles del proyecto. Siempre es buena práctica dar una pequeña descripción a tu proyecto. Introduzcamos unas palabras. Mi increíble bota uvas Folio, ¿verdad? Terribles capitalistas Teoh Rencher. Esto es muy útil. Cuando envías este marco de esposa a otra persona y una lectura rápida sobre el proyecto, información los pondrá al día para agilizar qué es exactamente lo que están mirando ahora. Dirígete a la sección de piel y cámbiala a marco de alambre. Hoy has convertido un dibujante, caricatura, nivel off wire frame toe profesional buscando increíblemente diseñado marco adecuado, y lo hiciste. Si has llegado al escenario, debes estar orgulloso de ti mismo. Ahora ya estás listo para mostrar tus habilidades al mundo y mostrar cómo construir sitio web Amazing . Echemos un vistazo a este hermoso marco de alambre de nivel profesional en la vista de presentación de pantalla completa Se ve increíble. Te lo digo, estoy muy, muy contento con y caliente. Ven y tú también deberías serlo. Esto está listo para ser exhibido en un enorme proyector a cualquiera que quieras. Excelente trabajo. Enhorabuena. 29. Comparte los Wireframes interactivos al mundo: ahora que hemos completado todo tu marco de alambre, te gustaría compartir con el mundo. Pero no todo el mundo tiene instalado el balsámico Malcolm en el sistema, y la mejor manera de compartir marcas para revisiones para discusiones para sugerencias y retroalimentación es exportar el mercado como un PDF. Entonces vamos a la ventana del proyecto y haga clic en exportar a PDF. Ahora tenemos todo el markup seleccionado todas las pantallas optimizadas para tu ing en pantalla, y también puedes agregar varias personalizaciones. También puedes incluir notas de marcado, mostrar las sugerencias de vinculación para que puedan entender cuál vincula a cuál . Así que habilitemos eso y haga clic en exportar a Pdf, y lo voy a subir a mi escritorio. Esperemos a que exporte las pantallas. Excelente. Echemos un vistazo a nuestro destino. Voy a usar el lector de Auto Acrobat porque eso es lo que va a tener la mayoría de la gente y vamos a entrar a pantalla completa. Se puede hacer notar que los vínculos se mencionan claramente sobre los vínculos ya están resaltados y también activos. Hermosa. El persona es capaz de interactuar en un pdf. Ni siquiera necesita Bart mercado estomacal. Excelente. Y como dije, si quieres pensar fuera de la caja, en realidad puedes programar el botón de descarga de CV para descargar tu currículum A. 30. Una Recap: qué increíble viaje ha sido hasta ahora. Recapitulemos rápidamente lo que todo lo que has aprendido aprendiste qué son marcos Y y por qué son importantes. Aprendiste a entender las necesidades del cliente y construir marcos de alambre basados en él. Usando un estudio de caso en profundidad, entendiste lo que uso a los dueños de un monedero y cómo debes elaborarlos. Analizaste un sitio web de cartera y entendiste por qué los marcos de alambre son importantes. Cuando estás construyendo uno en tu habitación, descargaste balsámico y entendiste los diversos dos bares fuera de balsámico y qué funciones traen a la mesa. Creaste hermosos marcos de alambre fuera de las pantallas más wearier del sitio web de la cartera y en proceso aprendiste donde tus taburetes y técnicas como grupos, símbolos, etcétera. Creaste interactividad entre las pantallas y los elementos U sin siquiera escribir una sola línea de código. Eugene es la piel de todo el marco de la esposa para que parezca profesional y de carne. Por último, aprendiste a crear Pdf interactivos para compartir habitaciones de tu esposa con amigos, inversionistas y clientes. Este ha sido un viaje increíble hasta ahora, y disfruto enseñándote. Espero volver a enseñar aquí en diversos cursos y diversas otras oportunidades en el futuro