Revisão e classificação do esboço

Rapidamente engolindo sua concorrência, o Sketch está pronto para superar o Photoshop como a ferramenta de prototipagem de interface, a tal ponto que muitos desenvolvedores agora preferem os designers a entregar arquivos do Sketch em vez de arquivos do Photoshop em camadas. Ao contrário do Photoshop, o software gráfico Sketch foi desenvolvido desde o início para projetar interfaces interativas. Ele cria composições ao vivo para que os clientes possam visualizar o que acontece quando clicam, deslizam ou tocam no seu design em seus computadores, laptops, tablets ou telefones. Por tudo isso, os designers que usam o Photoshop para criar interfaces de usuário para desktops e dispositivos móveis podem querer dar uma olhada no Sketch.

Vindo da Holanda, o Sketch é um programa de design de vetor somente para Mac com foco na criação de protótipos interativos de designs de aplicativos e da Web. O tipo de design de trabalho produzido pelo Sketch permite que seus clientes tenham uma ideia melhor de como tudo parece e responde. Isso, por sua vez, permite que eles forneçam feedback mais útil sobre a funcionalidade (interface do usuário ou interface do usuário) e experiência do usuário (UX) e, consequentemente, permite a aprovação informada antes do estágio de desenvolvimento - reduzindo a frustração e economizando tempo e dinheiro.

A concepção relativamente recente de Sketch (2008) foi focada no design colaborativo de telas, por isso tem uma vantagem sobre o Photoshop, que estreou 30 anos antes, quando a palavra tela tinha a ver com a medição da densidade de meios-tons. Os designers começaram a se apoiar no Adobe Photoshop para organizar e entregar arquivos de design de interface, porque era a melhor ferramenta na caixa para fazer o trabalho - não porque era uma ferramenta criada especificamente para esse fim.

No entanto, o Sketch não está sozinho no espaço de design do UX. O Adobe XD (XD significa Experience Design), lançado em 2016 como parte da Creative Cloud da Adobe para Windows e Mac, também é uma ferramenta baseada em vetor para wireframing e produção de protótipos interativos de clique.

Um segundo concorrente baseado em vetores, apontado como "a ferramenta de design de tela mais poderosa do mundo", é o Studio, da plataforma de gerenciamento de sistemas de design de peso pesado InVision (gratuito para um protótipo, US $ 25 por mês para protótipos ilimitados). Ao contrário do Sketch e do XD, o Studio possui um módulo de animação avançado integrado. O trabalho realizado no Sketch pode ser sincronizado com a plataforma InVision usando seu próprio plug-in do Craft Manager. A Adobe oferece um plano inicial XD gratuito que possui armazenamento (2 GB) limitado e uso de uma parte da coleção Adobe Fonts. A versão completa do XD está disponível como parte da assinatura da Adobe Creative Cloud (CC), a partir de US $ 20, 99 por mês para o aplicativo único ou de US $ 54, 99 por ano para todos os aplicativos da Creative Cloud, incluindo Illustrator, InDesign e Photoshop.

O Sketch usa uma variante em um modelo de assinatura, que custa US $ 99 por ano por dispositivo (computador ou celular), para indivíduos. Isso inclui um ano de atualizações e o Sketch Cloud (para compartilhamento e colaboração on-line), após o qual você pode manter e usar sua versão atual para sempre ou renovar por US $ 69 por ano para recuperar atualizações regulares e benefícios da nuvem. O licenciamento por volume varia de US $ 64 por ano por dispositivo para dois a nove dispositivos e US $ 49 cada para 50 ou mais dispositivos.

Vale a pena notar que, quando você compra uma licença, tem direito a apenas um assento (para uso apenas em um computador). Se você usa vários Macs, como um desktop e um laptop, não tem sorte e precisará adquirir dois assentos. Muitos aplicativos baseados em assinatura permitem dois assentos por licença como uma boa oportunidade para os criativos que trabalham duro em seus computadores no escritório e no laptop em casa. Um inconveniente relacionado é que, se você quiser usar o Sketch em um Mac novo ou se tiver que reformatar sua unidade, precisará cancelar o registro do Sketch em sua máquina / unidade antiga e depois se registrar novamente.

Começando

O Sketch é muito fácil de baixar no site da empresa (sketchapp.com); há uma avaliação gratuita de 30 dias, sem necessidade de cartão de crédito. O esboço requer o MacOS 10.13.4 (High Sierra) ou posterior. A empresa adverte que, se você estiver trabalhando com documentos complexos de várias páginas com centenas de pranchetas, é recomendado um dos Macs mais poderosos e carregados com RAM. Testei o Sketch 53.2 em um MacBook Pro 2018 com um processador Intel Core i9 de 2, 9 GHz, 32 GB de RAM e uma placa de vídeo Radeon Pro 560X.

Na página de download, o Sketch oferece um Guia para iniciantes, documentação extensa, tutoriais e dicas e links para suas mídias sociais e comunidades de desenvolvedores, blog e chats e Dribble. É acolhedor e inspirador ver uma lista de encontros e eventos da comunidade global de design. Além disso, o site oferece uma infinidade de recursos gratuitos e premium do Sketch App UX / UI, incluindo kits de estrutura de arame, kits de interface do usuário móvel, modelos, maquetes, painéis, conceitos e ícones.

Interface e Canvas

O esboço é liderado pelo exemplo e fornece uma interface de usuário contextual limpa com três seções principais - e (por design) sem painéis flutuantes. Se você já é um usuário de Mac, encontrará a UI do Sketch familiar, porque é modelada nas interfaces de aplicativos da Apple, como Pages, Numbers e Keynote. Com esta versão mais recente, o Dark Mode da Apple agora é suportado.

No lado esquerdo da tela, você encontrará a Lista de páginas com um inventário de suas camadas, itens de conteúdo individuais nessas camadas e pranchetas e o conteúdo nomeado. À direita está o Inspetor, onde você pode mexer nas propriedades do conteúdo, em qualquer camada que você selecionou. No topo, você tem a Barra de Ferramentas que abriga ferramentas e ações. O centro do palco é a sua tela onde você cria a mágica.

A Lista de páginas facilita a organização, a atribuição ou a alteração de camadas, além de permitir que você nomeie, agrupe, selecione e duplique itens de conteúdo para que seu fluxo de trabalho seja eficiente. Você estará em ótima forma quando chegar a hora de entregar os arquivos a um desenvolvedor.

O Sketch lubrifica seu fluxo de trabalho, facilitando ou automatizando tarefas comuns com bibliotecas fáceis de criar, estilos de texto e camada, instâncias de símbolos e predefinições. Além disso, existem centenas de kits de interface do usuário que economizam tempo, modelos e plug-ins disponíveis, que ampliam ainda mais a funcionalidade do Sketch de diversas maneiras.

Desenho e composição tipográfica no Sketch

Como um Cheetah está em execução, o Sketch está em prototipagem. Um guepardo certamente é capaz de andar, mas o que evoluiu está sendo executado. Da mesma forma, você pode absolutamente desenhar no Sketch, e não há problema nisso, mas o que é extraordinário no Sketch é sua prototipagem. Ainda assim, vale a pena ter uma visão geral do que pode ser feito com as ferramentas de desenho do Sketch.

Toda a criação, importação e montagem de conteúdo começa com um clique no menu suspenso Inserir. Lá você encontrará as ferramentas esperadas de forma, desenho e texto. Convenientemente à direita estão as operações de arranjo, como trazer à frente, alinhamento e distribuição; e ferramentas booleanas básicas não destrutivas, como Union, Subtract, Intersect e Difference. As ferramentas vetoriais intuitivas e eficientes permitem a criação e edição de formas, seus pontos e curvas de Bezier. Embora o Sketch possa lidar com tarefas essenciais de desenho, ele não é o Illustrator - nem deveria ser.

A tipografia básica no Sketch é simples, com recursos familiares semelhantes ao Microsoft Word, além de opções decorativas para sombras, preenchimentos e bordas. A formatação de blocos de tipo pode exigir algum esforço manual no Sketch, que, por exemplo, não suporta tabulações - você deve empregar a tecla de espaço para simular o efeito desejado. Isso é ótimo, porque qualquer composição complexa é inútil ao projetar layouts responsivos: tudo tipográfico (tamanho, quebras de linha, hifenização etc.) muda quando visualizado em vários dispositivos de tamanhos diferentes.

Prototipagem e Design Responsivo

Diferentemente de outros programas de desenho (mas muito parecidos com o Adobe XD), o Sketch facilita a criação de um protótipo interativo. Para simular o caminho do seu site ou aplicativo (UI) e como será a experiência (UX), você pode atribuir determinadas áreas como rolagem ou não rolagem, menus de link e link cruzado, símbolos, seções, páginas e instâncias e defina pontos de acesso (áreas clicáveis). Você não apenas pode visualizar seus esforços no aplicativo, mas também pode usar o Sketch Mirror (mais sobre esse recurso abaixo).

Uma novidade no Sketch é que você pode preencher os campos de texto e forma do protótipo com dados dinâmicos realistas, em vez de ficar vinculado ao tédio habitual do Lorum Ipsum. Nas camadas de texto ou forma selecionadas, você pode atribuir um arquivo de origem a partir do qual importa texto ou imagens.

O Sketch funciona muito bem com outras pessoas - e não apenas dentro do aplicativo. Foi uma delícia descobrir que eu podia copiar e colar um ícone criado no Illustrator. Na importação, o Sketch criou uma camada agrupada para minha arte e, a partir daí, eu poderia usar o ícone como está, adicioná-lo a uma biblioteca ou criar um símbolo - assim como você pode fazer com qualquer arte criada no aplicativo.

No mercado atual, qualquer design bem concebido e destinado à tela deve ser responsivo. Isso significa que o conteúdo na tela ou na página de um aplicativo é redimensionado e alternado automaticamente, dependendo do dispositivo de visualização (computador, laptop, celular, tablet). Assim, o texto é redimensionado, as quebras de linha são alteradas e as imagens encolhem, expandem ou ocultam, dependendo da aparência melhor em cada dispositivo.

No Sketch, você deve criar layouts variantes e simplificações das diferentes proporções manualmente, copiando e colando cada elemento ou grupo. No entanto, gostaria que houvesse uma opção de ajuste inteligente para modificações de layout responsivo, semelhante ao Redimensionamento responsivo no XD ou mesmo ao recurso Ajustar layout do InDesign. Embora o ajuste do layout quase nunca forneça uma solução perfeita, certamente economiza tempo e fornece um lugar melhor para começar do que uma página em branco.

Para visualizar seus designs do Sketch em tempo real nos seus dispositivos, existe o Sketch Mirror gratuito para iOS, além de vários aplicativos para fazê-lo nos dispositivos Android. Em todos os casos, os dispositivos precisarão de conexão Wi-Fi ou USB. Tomar decisões informadas sobre o projeto beneficia o fluxo de trabalho de qualquer pessoa e, para esse fim, poder ver seus ajustes, cortes e dimensionamento de texto ao vivo com o Sketch Mirror no dispositivo real é um recurso pesado.

Saída e colaboração

Quando seu trabalho está pronto para o feedback do cliente ou a colaboração da equipe, há várias maneiras de compartilhar. O método principal é carregar o documento no Sketch Cloud. Após o upload, você obtém um URL e pode escolher quem convidar para exibir o documento e definir um dos três níveis de acesso: Comentar, Fazer download ou Usar como biblioteca. Qualquer pessoa com o link pode usar as ferramentas de comentários integradas e, se abrir a página em um tablet ou telefone, poderá visualizar as pranchetas em resolução máxima, desde que haja um layout para o dispositivo.

As bibliotecas conectam você e sua equipe aos ativos e predefinições do projeto. Criá-los no Sketch é fácil e é um método inteligente de armazenar ativos de marca flexíveis em um único local acessível globalmente, seja local no disco rígido, no servidor ou mesmo em armazéns de terceiros como o Dropbox. Uma Biblioteca é apenas mais uma página de Esboço em seu documento que você designa como Biblioteca, o que a torna disponível e útil para adicionar ou revisar ativos.

Se você editar um símbolo criado, quando você (ou qualquer outra pessoa que esteja colaborando no documento) retornar ao documento de design, encontrará uma mensagem no canto superior direito da tela alertando sobre a atualização. Você pode clicar para atualizar ou pode decidir desanexar o trabalho artístico da Biblioteca. O esboço é grande no pedido e na organização; portanto, quando você clica nesse alerta, é exibida uma janela de diálogo listando os componentes da sua biblioteca, mostrando o símbolo desatualizado e o símbolo atualizado lado a lado. É ótimo ter informações completas ao seu alcance.

Como alternativa, você pode exportar pranchetas como páginas PDF que podem ser marcadas com comentários no Apple Preview, no Adobe Acrobat ou em qualquer outro software de visualização de PDF. O Sketch também exporta gráficos, fatias e páginas como arquivos JPG, PNG e SVG. Além disso, ele pode exportar código para atributos SVGs e CSS.

Nada superficial sobre este aplicativo

O Sketch é uma ferramenta completa criada para designers que criam experiências de design com base em tela, e isso é feito com maestria. Com sua interface familiar (para usuários de Mac), interface intuitiva e fácil colaboração cruzada entre designers e seus clientes, o Sketch ganhou sua sólida reputação como a ferramenta de prototipagem, porque facilita e agiliza o processo de validação e aprovação do projeto. Para obter o máximo em recursos de ilustração vetorial, consulte o Editors 'Choice, Adobe Illustrator.