Cómo agregar datos a sus diseños de bocetos

Sep 11, 2025
Cómo
[dieciséis]

El diseño de la pantalla ha recorrido un largo camino en los últimos años. Heck, ni siquiera decimos "diseño de pantalla" hace unos años. Como puntuaciones de diseñadores gráficos e ilustradores evolucionan para abordar el diseño de la pantalla, así también debe nuestro conjunto de herramientas. Ya no estamos creando piezas de arte estáticas, singularmente especificadas, estamos planeando vivir, respirar sistemas de diseño que deben trabajar en una variedad de entornos.

Este nuevo conjunto de demandas ha dado a luz a una explosión de nuevas herramientas flexibles y enfocadas. Mi favorito del grupo es Sketch, una estrella en ascenso del equipo de Bohemian Coding.

Sketch me permite trabajar más rápido de lo que nunca había soñado, mientras me liberaba para hacer lo que hacía lo mejor: diseñar. Es lo suficientemente ligero como para prototipo rápidamente y lo suficientemente fuerte como para ir a alta fidelidad cuando esté listo. Una de las mayores fortalezas de Sketch es su creciente comunidad, que ha creado una gran selección de complementos que se extienden bocetos en cualquier dirección que desee.

Artesanía , desde Invision Labs, apunta a alimentar el flujo de trabajo del diseño del futuro. Ofrece un conjunto de herramientas en crecimiento, todas construidas para ahorrar tiempo y agregar realismo al diseñar. El tiempo proviene de innumerables pasos guardados (¡Adiós copia y pegue!) Y el realismo proviene de un acceso rápido a datos reales y contenido (¡Adiós Lorem IPSUM!).

En esta lección, echemos un vistazo a usar tres herramientas clave de la nave: fotos, tipo y duplicado, para crear un diseño de pantalla completo y realista para una lista de contactos.

01. Configure su tablero de arte

Comencemos creando un nuevo documento en boceto y configurando un tablero de arte para trabajar dentro. En un nuevo documento, golpee. Inserto y gt; Tablero de arte o simplemente el A Clave para activar la herramienta de arte.

En el panel derecho, verá un menú lleno de tamaños de tableros predefinidos (creados para que coincidan con dispositivos y escenarios populares). Seleccione iPhone 6 y se creará una tabla de arte en el centro del lienzo.

02. Dibuja un encabezado

Aunque estamos creando específicamente una lista de contactos en esta lección, necesitaremos algunos bits de interfaz adicionales para completar la ilusión. Con la herramienta rectangular ( Inserto y gt; Rectángulo o R ), extraiga un encabezado en la parte superior del tablero de arte. Inserte el título 'Contactos', y algunos iconos de buena medida, como las acciones de 'Menú' y 'Buscar' en la esquina izquierda y derecha del Artboard, respectivamente.

03. construir el pie de página

[sesenta y cinco]

[dieciséis] Agregue un pie de página con pestañas, con un botón de acción flotante para agregar un nuevo contacto

Antes de que lleguemos a los datos, también construyamos un pie de página con pestañas rápida, complete con un FAB (botón de acción flotante) para agregar un nuevo contacto. Con la herramienta rectangular, extraiga un rectángulo blanco y colóquelo en la parte inferior de la mesa de arte. Utilizando la herramienta ovalada ( Inserto y gt; Oval o O ), dibuja un círculo para el FAB.

04. Insertar iconos

A continuación, inserte algunos iconos para mostrar al usuario dónde hacer clic: A 'PLUS' dentro del FAB, un ícono de 'Usuario' en la pestaña Izquierda y un icono de 'Historial' a la derecha. También agregaremos un indicador, una línea negra simple, para mostrar que el Contactos Se selecciona la vista. Ahora también es un buen momento para establecer el color de fondo del tablero de arte (negro), que puede hacer seleccionando el tablero de arte y luego escogiendo un color en el inspector.

05. Crea un artículo de contacto.

Con nuestro conjunto de escenarios, es hora de crear un solo elemento de contacto. Este es el elemento que se llenará con datos, duplicados y se organizará en una cuadrícula para completar una lista completa de contactos. Comencemos con un círculo simple, que actuará como marcador de posición para el Avatar (una foto que representa a cada usuario).

06. Hacer algunas capas de texto.

Add text layers where the names and addresses of your contacts will sit

[dieciséis] Agregue las capas de texto donde los nombres y direcciones de sus contactos se sentarán

Junto al óvalo, también vamos a insertar de par de capas de texto. Con Inserto y gt; Texto o simplemente el T Tecla, use la herramienta de texto para insertar una capa que lea 'Nombre aquí', y otro debajo de eso lee el correo electrónico aquí '. Estas serán las capas que rellenamos con datos del panel de tipo dentro de la embarcación.

07. Elige un nombre

Using the Type panel, populate the design with some random names

[dieciséis] Usando el panel Tipo, rellene el diseño con algunos nombres aleatorios

¡Tiempo para hacer la salchicha! Comenzaremos insertando un nombre real y una verdadera dirección de correo electrónico. Primero, seleccione la capa que lea 'Nombre aquí' y abra el panel Tipo (ubicado en la barra de artesanía junto al Inspector). Se le presentará un menú de datos para seleccionar. Elija 'nombres', luego seleccione entre hombres, mujeres o ambos. Su capa de texto se llenará automáticamente con un nombre real.

08. Llene la capa de texto del correo electrónico.

Vamos a llenar la capa de texto del correo electrónico de la misma manera que hicimos los nombres. Seleccione la capa 'correo electrónico aquí', abra el panel Tipo y seleccione la dirección de correo electrónico para insertar rápidamente una dirección de correo electrónico realista.

09. Una cara aleatoria

Select a source from which headshots can be pulled

[dieciséis] Seleccione una fuente a partir de la cual se puedan tirar en las cabezas en las cabezas en las cabezas.

A continuación, queremos llenar ese círculo gris con un verdadero avatar de fotos, que haremos con el panel de fotos. Comience por seleccionar la capa del círculo, luego abra 'Fotos' desde el panel Craft. Aquí, tiene algunas opciones, como el abastecimiento de una carpeta local, Dropbox o la web en general.

Aquí estoy seleccionando una carpeta local llena de imágenes que descargué desde el sitio web uifaces.com. Haga clic en 'Poner fotos' y la artesanía llenará su círculo con una cara aleatoria tomada de su colección.

10. Crea una lista de contactos.

Con un solo contacto lleno, es hora de crear una lista completa de contactos. Antes de hacer eso, insertemos una pequeña línea divisoria debajo de las capas que acabamos de crear.

11. duplicado

Para repetir nuestro único elemento de contacto en una lista completa, vamos a usar el panel duplicado de Craft. Con su grupo seleccionado, abra el panel Duplicado y echa un vistazo a las opciones.

Tenemos dos opciones: selección interior y conteo específico. El primero le permite seleccionar el área en la que desea la lista, luego lo llena, sin embargo, muchos elementos se ajusten. El segundo le permite definir el recuento exacto ('Quiero un elemento de cuadrícula X de ancho y y de alto').

12. Uso de selección interior

Vamos a utilizar la opción de selección interior, que he encontrado es perfecto para el diseño de pantalla. Dado que esta es una lista vertical, no una cuadrícula, solo vamos a verificar la opción vertical. Haga clic en el contenido duplicado y verá que sucederán algunas cosas.

Primero, su grupo de contacto único se ha triplicado. En segundo lugar, cada vez duplicado hace su magia, sus campos se vuelven a rellenar, por lo que cada grupo nuevo utiliza datos nuevos. En tercer lugar, hay una nueva capa creada en sus grupos de contacto, que usaremos para definir el área que queremos llenar con contactos.

13. Cambiar el tamaño de la capa.

Resize the Duplicate Control layer, and the contacts will multiply to fill the space

[dieciséis] Cambie el tamaño de la capa de control duplicado, y los contactos se multiplicarán para llenar el espacio.

Para que la lista de contactos complete toda la pantalla, vamos a cambiar el tamaño del Control duplicado capa. Simplemente tome la manija inferior de la forma y arrástrela hacia abajo hasta la parte inferior de su tablero de arte.

Tan pronto como lo sueltes, duplicar creará automáticamente más grupos de contacto para llenar el nuevo espacio, llenando nuevamente a cada grupo nuevo con datos frescos.

14. Arreglar el espaciado.

Ahora, nuestra lista está en su lugar, es posible que notifique que el espaciado no está bien. Con artesanía, ajustar las canaletas es bastante simple. Con la capa de control duplicada seleccionada, abra el panel Duplicado una vez más y observe que el botón ahora lee Ajustar canales. En lugar de empujar cada nueva capa alrededor del lienzo, simplemente cambie la opción de canalización vertical a 20, luego presione el botón Ajustar los canaletas. Su lista se ajustará automáticamente al espaciado correcto.

15. Añadir un encabezado fresco.

Con nuestra lista completa y poblada con personas de aspecto real, volvamos a volver a la interfaz e insertar un poco de estilo, tal vez en forma de un encabezado de fotos completo. Comenzaremos seleccionando la forma original de 'encabezado-BG'. Dibujamos con la herramienta Rectángulo y redimensionarlo hacia el primer contacto en la lista. El encabezado probablemente debería detenerse alrededor de 20px desde el primer artículo, ya que es el mismo canal que utilizamos en nuestra lista.

16. Encuentra la imagen correcta.

Unsplash is an impressive online photo resource

[dieciséis] Unsplash es un impresionante recurso de fotos en línea

Con nuestra forma de nueva forma seleccionada, abramos los paneles de las fotos y diríjase a la pestaña OSCLAP. Unsplash es un increíble recurso en línea, lleno de fotos sin royalties, de alta calidad.

El arte le permite filtrar por color y categoría, por lo que encontrar una foto perfecta para cualquier ocasión es más fácil que nunca. Con nuestro esquema de color oscuro, creo que la categoría espacial hará bien. Haga clic en Colocar la foto y su nueva foto caerá en su lugar.

17. Tweaking COLORS

Dado que las artesanías colocan una foto aleatoria basada en nuestros filtros, es fácil barajar la imagen una y otra vez, hasta que encuentre uno que le guste. Simplemente siga haciendo clic en el lugar de la foto hasta que te guste lo que ve.

La foto que me gusta es un poco brillante, por lo que voy a convertirla en una muesca agregando un relleno translúcido oscuro en la parte superior de la imagen. El boceto le permite "apilar" se llena en una sola forma, por lo que todo lo que necesitamos hacer es hacer clic en el icono Little '+' en la sección Rellenos del Inspector. He agregado una capa negra del 50 por ciento en la parte superior de la imagen, que ahora se ve bien.

18. ¡Hecho!

There you have it – a realistic mockup full of data

[dieciséis] Ahí lo tienes, una maqueta realista llena de datos.

¡Eso es todo al respecto! El toque normal normal para encontrar contenido generalmente consiste en buscar, copiar, pegar y repetir, ya no. Rellenar un diseño completo con datos realistas está a solo unos clics de distancia, y ni siquiera tiene que dejar su programa de diseño favorito.

Cómo - Artículos más populares

Cómo acelerar y optimizar los sitios de WordPress

Cómo Sep 11, 2025

[dieciséis] (Crédito de la imagen: diseñador web) WordPress comenzó como una simple plataforma de blogs, pero se convirti�..

Cómo dibujar plumas

Cómo Sep 11, 2025

Si siempre ha querido saber cómo dibujar plumas, y hacerlas súper realistas, estás en el lugar correcto. Esta guía paso a paso ofrece consejos y consejos para dar plumas de aves un acabad..

Hacer el cabello 3D realista y la piel en 3DS MAX y V-RAY

Cómo Sep 11, 2025

[dieciséis] No te pierdas Vértice 2018 , nuestro evento de debut para la comunidad de CG. Embalado con..

Construir aplicaciones que funcionan fuera de línea

Cómo Sep 11, 2025

[dieciséis] Durante mucho tiempo, la funcionalidad sin conexión, la sincronización de fondo y las notificaciones de push tienen apli..

5 consejos para mejorar sus creaciones de VR

Cómo Sep 11, 2025

[dieciséis] Líder de taller de vértices Glen Southern Comparte sus mejores consejos para ayudarlo a m..

Cómo esculpir en el cine 4D

Cómo Sep 11, 2025

[dieciséis] Al acercarse a un modelo o escena que requiere el modelado refinado ofrecido por la escultura, muchos artistas en 3D podr�..

Pinte un retrato como los viejos maestros

Cómo Sep 11, 2025

[dieciséis] Para este tutorial, tomaremos una mirada en profundidad los beneficios de copiar una antigua pintura maestra. He elegido c..

Acelera su flujo de trabajo de textura

Cómo Sep 11, 2025

[dieciséis] El guerrero es un proyecto personal que tuve la alegría de conceptar y diseñar. Quería crear un personaje que encarna e..

Categorías