Como adicionar dados aos seus desenhos de esboço

Sep 12, 2025
Como

O design da tela percorreu um longo caminho nos últimos anos. Heck, nós nem estávamos dizendo 'design de tela' há alguns anos. Como dezenas de designers gráficos e ilustradores evoluem para combater o design da tela, também nosso conjunto de ferramentas. Não estamos mais criando peças de arte estáticas e específicas - estamos planejando viver, sistemas de design de respiração que devem trabalhar em uma variedade de ambientes.

Este novo conjunto de demandas deu origem a uma explosão de novas ferramentas flexíveis e focadas. Meu favorito do monte é o esboço, uma estrela crescente da equipe da Bohemian Coding.

O esboço me permite trabalhar mais rápido do que eu já sonhei, tudo enquanto me libertava para fazer o que faço melhor: design. É leve o suficiente para rapidamente protótipo e fortes o suficiente para ir a alta fidelidade quando estou pronto. Um dos maiores fortes do esboço é a sua crescente comunidade, que criou uma enorme seleção de plugins que estendem o esboço em qualquer direção que você deseja.

Construir , da Invision Labs, visa alimentar o fluxo de trabalho de design do futuro. Ele oferece um conjunto crescente de ferramentas, todos construídos para economizar tempo e adicionar realismo enquanto projetam. A hora vem de inúmeras etapas salvas (adeus cópia e cola!) E o realismo vem de acesso rápido a dados reais e conteúdo (adeus lorem ipsum!).

Nesta lição, daremos uma olhada no uso de três ferramentas principais do CRAFT: fotos, digitar e duplicar, para criar um design completo e realista de tela para uma lista de contatos.

01. Configure sua Artboard

Vamos começar criando um novo documento no esboço e configurando uma prancheta para trabalhar dentro. Em um documento fresco, acerte Inserir & GT; Prancheta ou simplesmente o. UMA chave para ativar a ferramenta Artboard.

No painel direito, você verá um menu preenchido com tamanhos de artboard predefinidos (criados para corresponder a dispositivos e cenários populares). Selecione iPhone 6 e uma prancheta será criada para você no centro da tela.

02. Desenhe um cabeçalho

Embora estejamos especificamente criando uma lista de contatos nesta lição, precisaremos de alguns bits de interface extras para completar a ilusão. Com a ferramenta retângulo ( Inserir & GT; Retângulo ou R. ), tire um cabeçalho no topo da prancha. Insira o título 'Contatos', e alguns ícones para uma boa medida, como 'menu' e 'busca' ações no canto esquerdo e direito da Artboard, respectivamente.

03. Construa o rodapé

Add a tabbed footer, with a floating action button for adding a new contact

Adicione um rodapé de tabulação, com um botão de ação flutuante para adicionar um novo contato

Antes de chegarmos aos dados, vamos igualmente construir um rodapé rápido de guias, completo com um fab (botão de ação flutuante) para adicionar um novo contato. Com a ferramenta retângulo, desenhe um retângulo branco e coloque-o na parte inferior da prancha. Usando a ferramenta oval ( Inserir & GT; oval ou O. ), desenhe um círculo para o fab.

04. Insira ícones.

Em seguida, insira alguns ícones para mostrar ao usuário onde clicar em: A 'plus' dentro do fab, um ícone 'usuário' na guia Esquerda e um ícone 'Histórico' à direita. Também adicionaremos um indicador - uma simples linha preta - para mostrar que o Contatos A visualização é selecionada. Agora também é um ótimo momento para definir a cor do fundo do Artboard (preto), que você pode fazer selecionando o Artboard e depois escolhendo uma cor no inspetor.

05. Crie um item de contato

Com o nosso conjunto de palco, é hora de criar um único item de contato. Este é o item que será preenchido com dados, duplicados e organizados em uma grade para completar uma lista completa de contatos. Vamos começar com um círculo simples, que atuará como um espaço reservado para o avatar (uma foto que representa cada usuário).

06. Faça algumas camadas de texto

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

Adicione camadas de texto onde os nomes e endereços dos seus contatos se sentarão

Ao lado do oval, vamos também inserir um par de camadas de texto. Com Inserir & GT; Texto ou simplesmente o. T. Chave, use a ferramenta de texto para inserir uma camada que lê "nome aqui", e outra embaixo que lê "e-mail aqui". Estas serão as camadas que preenchemos dados do painel do tipo dentro de artesanato.

07. Escolha um nome

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

Usando o painel do tipo, preencha o design com alguns nomes aleatórios

Hora de fazer a salsicha! Vamos começar inserindo um nome real e um endereço de e-mail real. Primeiro, selecione a camada que lê "nome aqui" e abra o painel do tipo (localizado na barra do artesanato ao lado do inspetor). Você será apresentado com um menu de dados para selecionar. Escolha 'nomes', depois selecione entre homens, mulheres ou ambos. Sua camada de texto será automaticamente preenchida com um nome real.

08. Preencha a camada de texto de e-mail

Nós vamos preencher a camada de texto de e-mail da mesma maneira que fizemos os nomes. Selecione o 'e-mail aqui' camada, abra o painel do tipo e selecione Endereço de e-mail para inserir rapidamente um endereço de e-mail realista.

09. Um rosto aleatório

Select a source from which headshots can be pulled

Selecione uma fonte a partir do qual os headshots podem ser puxados

Em seguida, queremos preencher o círculo cinzento com um avatar de fotos real, que faremos com o painel de fotos. Comece selecionando a camada do círculo e abra 'fotos' do painel de artesanato. Aqui, você tem algumas opções, como fornecimento de uma pasta local, Dropbox ou na Web em geral.

Aqui estou selecionando uma pasta local cheia de imagens que baixei do site uifaces.com. Clique em "Colocar fotos" e o CRAFT preencherá seu círculo com uma face aleatória tirada da sua coleção.

10. Crie uma lista de contatos

Com um único contato preenchido, é hora de criar uma lista completa de contatos. Antes de fazermos isso, vamos inserir uma pequena linha divisória sob as camadas que acabamos de criar.

11. Duplicado

Para repetir nosso único elemento de contato em uma lista inteira, vamos usar o painel duplicado do Craft. Com o seu grupo selecionado, abra o painel duplicado e confira as opções.

Temos duas opções: seleção interna e contagem específica. O primeiro permite que você selecione a área que você deseja que a lista, em seguida, preenche-o com o ajuste de itens. O segundo permite definir a contagem exata ('Eu quero uma grade x itens de largura e y itens de altura').

12. Usando a seleção interna

Nós estaremos usando a opção de seleção interna, que eu encontrei é perfeito para o design da tela. Como esta é uma lista vertical, não uma grade, só vamos verificar a opção vertical. Clique em conteúdo duplicado e você verá algumas coisas acontecerá.

Primeiro, seu único grupo de contato foi triplicado. Em segundo lugar, cada vez que duplicar sua magia, seus campos são reabastados, então cada novo grupo usa dados frescos. Em terceiro lugar, há uma nova camada criada sob seus grupos de contato, que usaremos para definir a área que queremos ser preenchidas com contatos.

13. Redimensionar a camada

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

Redimensionar a camada de controle duplicado, e os contatos multiplicarão para preencher o espaço

Para fazer a lista de contatos preencher a tela inteira, vamos redimensionar o Controle duplicado camada. Simplesmente pegue a alça inferior da forma e arraste-a para baixo até a parte inferior da sua prancheta.

Assim que você soltar, duplicará automaticamente criará mais grupos de contato para preencher o novo espaço, preenchendo novamente cada novo grupo com novos dados.

14. Corrigir o espaçamento

Agora, nossa lista está no lugar, você pode notar que o espaçamento não está certo. Com artesanato, ajustar calhas é bem simples. Com a camada de controle duplicada selecionada, abra o painel duplicado mais uma vez e observe que o botão agora lê ajustar calhas. Em vez de cutucando cada nova camada ao redor da tela, basta alterar a opção da calha vertical para 20 e, em seguida, pressione o botão Ajustar guuts. Sua lista se encaixa automaticamente no espaçamento correto.

15. Adicione um cabeçalho fresco

Com a nossa lista completa e preenchida com pessoas de aparência real, vamos dobrar de volta para a interface e inserir algum talento, talvez na forma de um cabeçalho de foto completo. Começaremos selecionando a forma original "Header-BG" que desenhamos com a ferramenta retângulo e redimensionando-a para o primeiro contato na lista. O cabeçalho provavelmente deve parar em torno de 20px do primeiro item, já que é a mesma sarjeta que usamos em nossa lista.

16. Encontre a imagem certa

Unsplash is an impressive online photo resource

Unsplash é um impressionante recurso de foto online

Com a nossa forma recém-dimensionada selecionada, vamos abrir o painel de fotos e dirija-se à guia Unsplash. Unsplash é um recurso on-line incrível, preenchido com fotos livres de royalties e de alta qualidade.

Craft permite filtrar por cor e categoria, então encontrar uma foto perfeita para qualquer ocasião é mais fácil do que nunca. Com o nosso esquema de cores escuras, acho que a categoria espacial fará muito bem. Clique em Place Foto e sua nova foto cairá no lugar.

17. Tweaking Colors.

Como o artesanato coloca uma foto aleatória com base nos nossos filtros, é fácil embaralhar a imagem de novo e de novo, até encontrar um que você gosta. Basta manter clicando em Lugar Foto até que você goste do que vê.

A foto que eu gosto é um pouco brilhante, então eu vou desligá-lo por um entalhe adicionando um preenchimento translúcido escuro na parte superior da imagem. O esboço permite que você "empilhe 'preenche uma única forma, então tudo o que precisamos fazer é clicar no pequeno ícone' + 'na seção de preenchimentos do inspetor. Eu adicionei uma camada preta de 50% no topo da imagem, que agora parece certo.

18. FEITO!

There you have it – a realistic mockup full of data

Lá você tem - um maquete realista cheio de dados

Isso é tudo que há para isso! O Mad Dash Normal para encontrar conteúdo geralmente consiste em buscar, copiar, colar e repetir - não mais. O preenchimento de um layout inteiro com dados realistas é apenas alguns cliques, e você nem precisa deixar seu programa de design favorito.

Como - Artigos mais populares

Use Framer X para construir protótipos interativos

Como Sep 12, 2025

(Crédito da imagem: Framer) Como designers, há sempre a questão de quais ferramentas de prototipagem você deve us..

Crie uma cena com o RendeMan para Maya

Como Sep 12, 2025

(Crédito da imagem: Jeremy Heintz) Neste renderman for maya tutorial, cobriremos uma variedade de tópicos começand..

Realizar testes de usuário gratuitos e rápidos com o UserLook

Como Sep 12, 2025

Imagem: Getty Images Suposições são ruins para os negócios. Eles são ruins porque, por natureza, temos opiniões..

Criar raios de Deus em V-Ray

Como Sep 12, 2025

Na fotografia do mundo real, os raios de luz são os mais visíveis quando têm uma superfície para saltar, como poeira, pólen ..

Como criar uma pintura a óleo digital usando artrge

Como Sep 12, 2025

Pintando digitalmente usando um Tablet de desenho e desenho de software artrágono. Usando em um tablet gráfico o..

Anatomia MasterClass: Perfeito suas figuras

Como Sep 12, 2025

Nesta masterclass, eu revelo os passos básicos que você precisa seguir para aprender Como desenhar figuras . Vou..

Adicionar sugestões visuais ao seu site

Como Sep 12, 2025

É irritante para os usuários do site clicar em um link apenas para descobrir que a página da Web não é de interesse, desperd..

Como projetar uma promoção para uma marca imaginária

Como Sep 12, 2025

Ao projetar para uma marca, seja uma configuração uma ou uma inicialização que você está levando a liderança criativa, consistência em todos os pontos de toque é a chave. ..

Categorias