Neste tutorial, eu vou te ensinar como criar um aplicativo de revista web simples e sofisticado no desenho, tanto para móvel e desktop.Vamos usar o VSCO estética como inspiração e, ao final deste tutorial, você vai se conscientizaram de muitas das características mais importantes do Sketch.
Além dessas habilidades específicas do aplicativo, você também vai ter uma compreensão mais profunda sobre a definição de tipos e layout com a ajuda de uma escala modular .Nós estaremos usando algumas técnicas básicas e intermediárias no Sketch.Vamos começar!
Ativos Tutorial
Você vai precisar dos seguintes ativos com o objetivo de seguir junto:
Imagens de Unsplash (para a imagem do herói que você pode baixar o que eu tomei recentemente )
Merriweather fonte do Google Fonts
Montserrat fonte do Google Fonts
Ícones de O Projeto Substantivo
Facebook logo
Twitter logo
Logotipo Instagram
Logotipo Google Plus
Disclaimer Rápida
Antes de abrirmos Sketch e criar um novo documento, gostaria de salientar que este conceito é puramente teórica.Seria necessária uma análise de mercado muito mais profundo antes que pudéssemos transformá-lo em um produto utilizável real.Eu sempre fui apaixonado por histórias em linha com belas fotos, por isso criei este conceito para ensiná-lo a seguir as tendências da web a partir da perspectiva de um designer.
Tipografia
Quando eu começo um projeto, eu sempre começar com tipografia porque eu acredito fortemente que a tipografia é a ferramenta mais importante para designers de comunicação têm à sua disposição.
Para o corpo do texto e títulos maiores, eu escolhi Merriweather, uma fonte com serifa inspirado por rostos livro de estilo antigo, que funciona bem para contar histórias e viagens.Em alta resolução mostra que dá a sensação de, um jornal impresso real.
Por outro lado, para os elementos de interface do usuário comuns, tais como botões e etiquetas, eu queria algo moderno, então eu escolhi Montserrat, que é uma fonte sans-serif limpo e simples.
Configurando as pranchetas
Primeiro de tudo, eu gostaria de escrever um pouco mais sobre como eu me aproximo minhas configurações de layout e tipografia. Tim Brown , Type Manager para Adobe Typekit, criou uma ferramenta fantástica chamada Escala Modular .Esta ferramenta é grande: depois de definir o nosso tamanho do texto ideal e sugerir um número importante, ele vai dividir e multiplicar esses números por um valor matematicamente familiar como a proporção áurea ou quinta perfeita.Em um momento, quando montamos a nossa hierarquia tipográfica e os elementos básicos de nosso layout, eu sempre vou remeter para esses números.
Nota: Obviamente, em alguns casos, é preciso quebrar essa regra, mas vai nos proporcionar um equilíbrio natural dentro do nosso layout e tipografia, que é agradável aos olhos.
Eu definir o tamanho do texto ideal para 18px e 670px definido como um número importante, já que esta será a largura real, utilizável de nosso layout móvel.
Passo 1
Depois de abrir esboço, vamos selecionar a opção Artboard (A) dentro do menuInsert.
Para a nossa exibição móvel, eu recomendo que você escolha o iPhone 6 dimensões, mas se você tiver um modelo de iPhone diferente, é melhor escolher aquele.Usando Sketch tem uma enorme vantagem na medida em que lhe permite espelhar o seu trabalho para o seu dispositivo iOS em tempo real com Esboço Espelho , sem exportar ou transferir imagens.Espelho é uma parte essencial do meu trabalho design, porque com ele, eu posso ver imediatamente o resultado final do meu trabalho na minha mão.
Para ativar esta função, você vai precisar do app Esboço Espelho a partir da App Store.Em seguida, clique no ícone do espelho dentro Esboço (certifique-se seus dispositivos estão na mesma rede ou conectada através de um cabo USB).
Para a visualização do desktop, eu escolhi a tela do Desktop HD, que é 1440px de largura.
Dica: depois podemos modificar a altura da nossa prancheta mudando os números no painel do inspector.
Passo 2
Depois temos as pranchetas adequadas, é hora de definir algumas guias para o nosso layout tem espaço suficiente e parece equilibrada.Para ligar os governantes e os guias básicos, vá em Exibir> Mostrar réguas (^ R).Em seguida, selecione o meio de nossa tela móvel, que vai estar em 375px e também colocar uma marca na primeira e na última 40px, de modo que ele vai trabalhar com um 40px preenchimento horizontal.
Para criar um clique diretriz na régua em 40px, em 375px e no 710px pontos.
No caso de a vista desktop, que também estabeleceu um guia central (720px) e 100px estofamento.
Criação de área de navegação Top
Nota: Se você gostaria de criar uma maquete realista com uma barra de menu Safari original, você pode criar uma imagem e cole na imagem cortada, ou você pode fazer o download do modelo de GUI iPhone 6 (iOS 8) criado pelo (antigo) Teehan + equipe Lax.
Dica: É bom saber que o esboço foi construído em um modelo iOS bem, que você pode encontrar em Arquivo> Novo do modelo> iOS UI Design.
Passo 1
Para criar a nossa barra de navegação superior, vamos selecionar a ferramentaRetângulo (R).
Dica: Eu realmente recomendo que você aprenda os atalhos mais importantes, porque eles são fáceis de usar.Na maioria dos casos, a tecla de acesso é a primeira letra da nossa ferramenta, de modo que em caso de retângulo é R, em caso de oval é O, no caso de linha é L.
Com a ferramenta Retângulo criar um 750px de largura, 120px alta retângulo, que tem um #F9F9F9 cor de fundo.
Dica: Em termos de cores, eu sempre usar números HSBA (matiz, saturação, brilho, Alpha), porque é fácil de modificá-los e imaginar o resultado com antecedência.
Passo 2
Vamos selecionar a (O) ferramenta Oval e enquanto pressiona as teclas Shift + Alt,desenhar um círculo perfeito 80px.No lado direito, no painel Inspector, clique no botão Fills, e sob a quarta página upload de uma imagem de perfil.
Dica: Se você pressionar a tecla Alt e mova o cursor, você pode ver as distâncias em pixels entre os elementos selecionados.
Passo 3
Selecione a ferramenta de texto (T) e coloque um nome ao lado da foto de perfil com 20px preenchimento à esquerda.Defina o tamanho da fonte para 22px e a cor da fonte para #9E846E .Você pode definir as letras maiúsculas no menu Tipo> maiúsculo.
Coloque o texto 'nova história' com as mesmas configurações no lado direito da nossa prancheta com 20px preenchimento direito.
Passo 4
Agora, vamos criar nosso primeiro ícone, que será um ícone '+'.
Vamos criar um retângulo 36x6px com nossa Retângulo (R) da ferramenta, que tem a mesma cor que o nosso texto.Uma vez feito, duplicar a forma resultante.
Selecione o segundo e no painel de inspector (do lado direito) girá-lo em 90 graus.
Depois de colocar os retângulos um ao outro perfeitamente, arraste o primeiro e solte-o na segunda no painel da camada.Ao fazê-lo nós mesclar as duas camadas separadas em um ícone 36x36px.
Passo 5
No caso do nosso ponto de vista desktop, nós também temos o mesmo retângulo navegação largura com altura de 70px e 80% de opacidade.
Tamanho do texto do botão de menu é um pouco menor;14px 40px com um estofamento e um #CCCCCC linha separadora.
Projetando a navegação inferior fixo
No caso de a vista móvel, vamos criar uma barra de navegação inferior fixo, onde o usuário pode escolher entre a grade, locais favoritos, busca e páginas de perfil.
Passo 1
Assim como com a parte superior de navegação, vamos começar com uma largura total, 100px de altura, #FFFFFF retângulo com 90% de opacidade.Vamos colocar um 1px #E6E6E6 linha na parte superior do rectângulo e dividi-lo em quatro colunas iguais.
Todos os nossos ícones são 50px de altura e sua cor é #666666 .
Dica: você pode criar seu próprio ícone 'Grid' arranjando nove 14x14px retângulos com 4px estofamento.
Criando o cabeçalho
Passo 1
Para a imagem herói, vamos criar uma largura total, 850px alta retângulo e preenchê-lo com uma foto, como no caso da foto do perfil.Para certificar-se o texto será ainda legível, eu coloquei uma camada preta sobre a imagem com 20% de opacidade.
No caso da imagem de herói desktop, eu recomendo 1000px para a altura.Além disso, certifique-se de que a imagem está sob a barra de navegação.
Passo 2
Para o título e subtítulo, os tamanhos de fonte são 60px 24px e, respectivamente.A fonte do título é Merriweather Bold and the fonte da legenda é Montserrat Regular.
Passo 3
O último elemento em nossa imagem herói é o botão "Get Inspiration ', em que o tamanho da fonte é 24px com espaçamento de letras 1.33px.O botão em si é 338x89px com uma 3px largura da borda branca.Vamos colocar o botão 70px partir da parte inferior da imagem.
Para a visualização do desktop, eu recomendo, um tamanho de fonte 18px menor.
Criando Artigo Cartões
Passo 1
Nesta etapa, vamos criar um lugar especial para a história mais popular.A fim de fazer isso, comece com um retângulo preenchido-image 670x480px, que tem um ícone especial no canto superior direito.Com este ícone todos podem sinalizar suas viagens favoritas no site.
Este ícone tem um círculo branco com 80x80px 2px dentro espessura.O ícone 'pin' é 12px de largura e nós usamos um número regular 18px Montserrat.Este ícone todo tem 70% de opacidade e top 15px e preenchimento direito.
No caso da visualização do desktop, esta imagem é 1240x750px e ícone 'local favorito "é 50x50px.
Passo 2
Agora podemos criar nosso primeiro cartão.Como primeiro passo, fazer um retângulo cheio de imagem 670x522px, depois outro 670x435px #FFFFFF retângulo.Coloque o segundo rectângulo no topo da primeira.
Criar um terceiro, retângulo 670x744px e cobrir com ele as duas anteriores.Coloque esta camada de acordo com as anteriores.Dê um pouco de sombra para esta camada, o que irá torná-lo saltar um pouco.
Raio Border é essencial para o nosso projeto de cartão, então configurá-lo para 5px.A fim de ver este raio em cada camada, clique sobre essa camada de sombra e usá-lo como uma máscara.
Devido ao fato de que no celular não temos um estado de foco, vamos usar a visão em foco como um modo de exibição padrão, de modo que todas as informações serão visíveis imediatamente.
Depois de selecionar todas as camadas ligado a este projeto de cartão, podemosGroup (⌘-G)-los juntos, então podemos duplicá-los facilmente enquanto pressiona a tecla Alt e movendo o grupo original para baixo (em alternativa, podemos duplicar com ⌘-C e ⌘ -V método, também.)
Dica: Como organizar nossas camadas em grupos é extremamente útil em projetos maiores como este.
Na visão da área de trabalho, podemos usar as mesmas cartas.Para resultados mais sofisticados, sugiro aprimorando as relações e tamanhos de letra um pouco.
Não se esqueça que temos uma visão de foco disponível na área de trabalho, para que possamos criar uma versão mais simples do cartão como um padrão, revelando a mais complexa quando o usuário passar o cursor em cima do cartão.
Projetando a parte do mapa com a jornada Colecções
Com a ajuda desta parte do mapa, é possível filtrar e pesquisar viagens por localização.Os resultados serão exibidos como coleções escritas por vários autores.
Passo 1
Crie um retângulo 750x850px e preenchê-lo com uma simples imagem de tela do Google Maps.Para a barra de pesquisa coloque outro retângulo na parte superior do rectângulo com 80% de opacidade.
Dica: Para o alinhamento mais fácil, criar um quadrado no lado esquerdo da barra de pesquisa.Após isso, pode colocar o nosso ícone de pesquisa no local correto.
Eu escolhi #B3483E como a cor principal para o meu UI Mapa.Esta cor foi inspirada pela Pantone Marsala , cor da Pantone do ano de 2015.
Passo 2
Quando alguém procura por um local específico, os resultados serão exibidos como pequenos cadernos do jornal.Cada livro revista é uma imagem cheia retângulo 320x414px, com uma sugestão de uma sombra.
Podemos definir o raio fronteira seletivo, selecionando a sua forma e pressionando a tecla Enter.Se seleccionar um dos pontos do vetor, podemos dar-lhes valores separados raio de fronteira.Defina o top eo raio fronteira canto inferior direito para 12px.
Passo 3
Na visão da área de trabalho, quase tudo é idêntico, exceto que posicionar as revistas ao lado do mapa e não sob o mapa.
Projetando pequenos cartões artigo
Passo 1
Projetando pequenos cartões artigo será semelhante a criar os maiores, exceto que temos de eliminar a descrição ea parte resumo das histórias.Dessa forma, podemos visualizar mais informações no mesmo espaço, de modo que o usuário pode ir embora mais conteúdo ao mesmo tempo.
Na vista de ambiente de trabalho, além de diminuir o tamanho das placas, que também classificá-los em uma grade de três colunas.Eu acredito que isso vai nos dar uma maneira conveniente e rápido para descobrir e explorar novos conteúdos.
Chamada para Ação
Antes de terminar o nosso projeto com o rodapé, é inevitável que nós fornecemos uma seção de call-to-action.
Passo 1
Como sempre, precisamos de um retângulo cheio de imagem em 750x1000px.A fim de tornar o texto legível, nós adicionamos uma camada branca do inclinação para a nossa imagem.Nossa inclinação é de #FFFFFF opacidade 30%, para#FFFFFF opacidade 70%, por isso, só precisa modificar a quantidade de opacidade.
Dica: um pequeno, mas às vezes ainda significativo truque para melhorar a legibilidade do nosso texto é adicionar sombra a ele.Neste caso, eu apliquei uma sombra de luz suave em meu título e parágrafo de texto.
Criação da Área de Rodapé
Para a área de rodapé, vamos utilizar uma combinação de ícones de mídia social e botões de texto.
Certifique-se de que os nossos ícones de mídia social permanecem palpável em telas pequenas móveis.Vamos fazê-los, pelo menos, 44px de altura ou largura.
One More Idea
Para a visualização do desktop podemos criar mais um estilo de navegação, mas temos que ter cuidado com isso e só usá-lo acima de 1440px de largura.É equivalente à navegação inferior fixado em exibição móvel.
Parabéns!
Nós completamos nosso projeto aplicativo web bela revista.Tendo seguido este tutorial Espero que você está mais confiante na utilização de Esboço para grandes projetos.Vamos dar uma olhada em um mashup dos produtos finais:
Estou curioso para saber sobre como encontrou o processo, por isso, não hesite em deixar comentários e perguntas nos comentários.
0 comentários:
Postar um comentário