Essa é a quarta e última parte de uma série sobre como criar um app iOS desde o início usando diversas pods e ferramentas que fazem a sua vida mais fácil. Clique aqui para ver a parte anterior. Você também pode achar o projeto no Sketch que usei para este post aqui.

Neste artigo, vou falar de Sketch para desenvolvedores e como você pode criar interfaces melhores sozinho. O objetivo aqui não é se tornar um designer, mas colocar a pontinha do pé nessa água. Esse tipo de conhecimento pode ajudar as pessoas que estão desenvolvendo suas próprias ideias, que normalmente não têm dinheiro para contratar um designer, ou aqueles que não têm designers no time. Se esse é o seu caso, saiba que essas habilidades só vão levar o seu produto ou ideia um pouquinho mais longe. Oferecer uma experiência incrível é essencial para que qualquer produto tenha sucesso, e para isso um bom designer é imprescindível.

Vamos refrescar a memória… A figura abaixo mostra a cara do app, pelo menos por enquanto.

Abaixo, você pode ver outra foto. Essa segunda versão é um pouco melhor, certo? =) Neste artigo vou mostrar como podemos chegar lá usando o Sketch.

Referências

Antes de começar, vamos falar algumas coisas sobre referências. Eu sempre fui muito curioso sobre design e UX. Por um bom tempo, eu quis incorporar algumas habilidades de design ao meu pipeline diário de desenvolvimento, mas não tive sorte com o Photoshop. Com o Sketch, porém, a história foi diferente. O Sketch por si só é uma ferramenta (uma ótima ferramenta, aliás), mas sozinho, simplesmente não é o bastante.

Nessa minha busca por aprender um pouco mais sobre esse universo de design, eu acabei trombando com algumas ótimas referências, que vou compartilhar aqui embaixo. Lembro que isso não é obrigatório, mas se você quiser aprender melhor sobre processo criativo, teoria de cores, experiência do usuário, design e afins, eu recomendo!

• Amazing Sketch Tutorial – https://themmed.com
• The Design of Everyday Things, Don Norman
• Don’t make me think
• Product Design Course @ Udacity
• Don Norman’s Course @ Udacity
• Lean UX
• Smashing Magazine ebooks
• Color for Designers, Jim Krause
• Lessons on Typography, Jim Krause
• Visual Design, Jim Krause

Atenção: De novo, não estou dizendo que este material é o melhor ou que você se tornará um designer depois que estudá-lo. Esse é o material que eu li e me ajudou no caminho. Honestamente, ainda existem diversos gaps nas minhas habilidades e no meu entendimento de design, mas estou, sem dúvida, muito melhor em todas essas coisas do que antes.

Primeiros passos

Eu criei diferentes páginas no projeto do Sketch. Uma para nossas telas, outra para os ícones do app, outra para a paleta de cores e uma para os símbolos. Isso vai manter seu sketch organizado. Você pode ver abaixo alguns screenshots delas:

Antes de mergulhar de vez no projeto e em como podemos criá-lo, vamos falar um pouco sobre configuração, plugins e outros programas que podem melhorar nosso pipeline.

Configuração, plugins e apps

O Sketch oferece vários plugins que podem melhorar bastante a sua experiência, economizando algumas horas de trabalho. Os plugins podem ser instalados usando outro app que garante um processo bem simples. O SketchBox é um companheiro incrível para o Sketch, eu diria um “must have”.

Plugins a serem baixados:

• Craft, da invision
• SwiftColorPalette
• Flinto

Existem vários outros plugins, para necessidades mais especiais. Neste link tem uma boa lista deles.

Ainda tem mais uma coisa antes de começarmos. Nosso Sketch vai ficar lindo com todos esses plugins, mas ainda tem algo faltando: ícones! Ícones são o tipo de coisa que, ao longo da vida do seu projeto tendem a ficar desorganizados. Para lidar com isso do jeito certo, podemos contar com a ajuda do IconJar.

O projeto

Primeiro, vamos selecionar algumas cores pra criar nossa paleta. Uma excelente ferramenta para nos ajudar com isso é a Coolors. Não dá para falar em Marvel sem pensar em um belo vermelho e branco, então, vamos fazer simples, com apenas três cores:

Atenção: Tem muita coisa sobre “Como criar uma paleta de cores”, desde livros até excelentes pesquisas online que podem te ajudar com isso, como o Google Design por exemplo. Não é meu objetivo aqui dizer mais sobre isso, você pode ler essas informações de pessoas com muito mais conhecimento no assunto.

Construindo seu AppIcon

Depois de selecionar a paleta de cores, a próxima coisa que normalmente eu faço é o logo do app. O Sketch pode ajudar a gente com isso! Vamos criar uma nova página a partir do template iOS APP Icon.

Não tem muita coisa pra fazer aqui, só preencha as formas com nosso vermelho e adicione um “Text” no meio. Você pode adicionar um texto usando o atalho T. Selecione a fonte, o peso e a cor.

Você pode selecionar o texto e o fundo e alinhá-los usando a barra de cima, à direita.

Agora, o splash!

A partir do ícone você pode facilmente derivar sua tela de splash. Crie uma nova página clicando no sinal de + na barra de páginas e com um duplo clique mude o nome para screens. Depois, clique no canvas em branco e pressione A para surgir o artboard menu, que contém alguns canvas pré-configurados. Para esse projeto, vamos selecionar o iPhone 7. Clique no novo artboard, pressione cmd + R e renomeie para Splash.

Verifique se você selecionou Background color e Include in Export e adicione nosso vermelho. 

Pressione T para adicionar um texto e verifique se ele está alinhado no centro, tanto na horizontal, quanto na vertical, como fizemos no passo do ícone.

Tela de caracteres

Esta é uma das telas mais desafiantes do projeto, mas nada para se preocupar de verdade. Vamos lá!

Assim como antes, pressione A, escolha iPhone 7 e nomeie o novo artboard como Heroes. Essa tela vai usar alguns componentes da Apple como Navigation Bar e status Bar. Para isso, vamos copiar os componentes de um dos templates do Sketch chamado iOS Design.

É só copiar e colar a Navigation Bar e o status bar dentro do seu artboard novo. Assim:

Esses componentes são definidos e salvos como um símbolo. Os símbolos são como os “smart objects” do Photoshop, o que significa que se você usá-los em diferentes lugares no seu projeto, você só precisa mudar em um lugar para afetar todos os outros. Nós queremos isso, mas não ainda; então, vamos fazer o “detach” do símbolo da Navigation Bar. Clique com o botão direito do mouse no componente e selecione “detach” do símbolo.

Após o “detach” símbolo voltar a ter seu agrupamento original, antes de ter sido transformado em um símbolo*. Nesse caso se torna um grupo com diversas coisas diferentes, então, vamos nos livrar de algumas delas. Nós não precisamos, por exemplo, do Pin Left ou do Edit.

Agora vamos mudar a cor de fundo do nosso artboard, movendo a navigation e a status bar para y = o e mudando a cor do elemento Bar dentro do grupo Navigation Bar/Black para vermelho. Fica assim:

A seguir, vamos criar os ícones que usaremos na nossa navigation bar.

• Se certifique de alinhar tudo direitinho;
• Depois de brincar um, pouco você vai criar alguma coisa perto disso:

• Depois disso, podemos agrupar todas as coisas usando cmd + g. O próximo passo depois de agrupar, nesse caso, é clicar no ícone ‘create a symbol’, na barra superior.

Para o outro ícone você só precisa repetir os mesmos passos, usando formas de retângulos ao invés de quadrados. Tente!

Finalizando a NavigationBar

Vamos agrupar a navigationBar, a status bar e os ícones de forma que possamos mover todos eles como uma coisa só. Selecione todos os elementos e clique cmd + g.

Depois de agrupar, crie um símbolo:

Isso vai permitir que, a partir de agora, nós possamos colocar essa navigation bar em qualquer artboard só clicando em insert > symbol > navigationBar. Bom, né?

Tableview Row

Para criar nossa table view row vamos seguir os mesmos passos. Para ser franco, de agora em diante não tem nada de realmente novo; você já viu tudo o que é necessário. Vamos trabalhar em mais alguns exemplos e o restante você pode tentar sozinho.

• Crie um retângulo com R;
• Mude o nome para Row, com cmd + r;
• Adicione uma imagem de um personagem ao projeto;
• Mude a forma para parecer com uma imagem de thumb;
• Coloque dentro da Row, assim:

• Adicione um título usando T;
• Adicione uma minibio, de novo clicando em T;
• Adicione uma linha de separação clicando em R, e dê a ela 1 pixel de altura e de comprimento;
• Agrupe todos os elementos;
• Selecione o novo grupo, segure “option”, arraste e solte. Isso vai copiar o grupo. Fácil, não? Depois você deveria ter algo como:

Do it yourself!

Os próximos passos são praticamente os mesmos, então não vou explicá-los um a um. É extremamente necessário brincar com tudo isso. Para esse tipo de conhecimento, a prática é a única forma de aprender. Sketch é algo que requer algumas horas de mão na massa e treinamento. Meu objetivo aqui é só mostrar o caminho e pontuar algumas coisas. Entretanto, a jornada é toda sua.

Você pode baixar o projeto do sketch que eu usei aqui. Use-o como um guia de referência, para ver como eu fiz as coisas, mas ache o seu próprio jeito! Isso é sem dúvida a coisa mais importante.

Este artigo foi o último da série e espero que você tenha gostado. Eu ainda vou usar esse material em artigos futuros, para mostrar como fazer o Readme do seu repositório ficar mais bonito, por exemplo.

Como sempre, dúvidas, feedbacks e comentários são mais que bem-vindos.

***

Esse artigo foi originalmente publicado (em inglês) na Cocoa Academy, no Medium. Veja aqui.

***

Artigo publicado originalmente em: http://www.concretesolutions.com.br/2017/01/20/app-ios-marvel-desde-o-inicio-4/