Sketch de A a Z: Torne-se um Designer de UI

Tutorial de Sketch - torne-se um designer de UI e UX.

Língua: alemão

Sketch-Tutorial - torna-te designer de UI e UX

O Sketch é uma ferramenta eficaz e intuitiva com a qual você cria protótipos de projetos web. Com a ajuda do software de UI e UX, você cria interfaces de usuário dinâmicas para sites e aplicativos. Uma vantagem significativa é que, como os designs seguem as regras do design web, você entrega um resultado diretamente implementável para o desenvolvimento. Conheça o Sketch neste tutorial de mais de cinco horas com Luca Kiedrowski, que prontamente o guiará desde o conceito até um protótipo e, finalmente, para uma interface web completamente projetada.

Torna-te um designer de UI e UX: Cria interfaces de utilizador para websites e apps com o Sketch.
Para começar rapidamente: Aprenda os fundamentos de Sketch, UI e design UX.
Para o teu progresso: Aprende técnicas avançadas de design, como os operadores booleanos.
Tutorial prático: Crie uma interface de usuário moderna usando o exemplo de um aplicativo
Melhor trabalho em equipe com os desenvolvedores: Dê a eles protótipos prontos para desenvolvimento diretamente.
Entendo em 5 h o conceito de UI e UX: O treinador Luca Kiedrowski mostra exemplos de melhores práticas.
Assim, o aprendido permanece na mente: Inclui material de trabalho para participar

Tanto Google quanto Apple apostam no Sketch - faça como os grandes e aprenda agora como criar designs de UI simplesmente bonitos, amigáveis ao usuário e prontos para o desenvolvimento.

pormenores

Pode ser utilizado com:
Conteúdo: 5 h Treinamento em vídeo
Licença: privada e comercial Direitos de utilização
Bônus: incluindo material de trabalho

Categorias

Design (Ilustração, Layout & Impressão)

Feito com amor por:

Luca Kiedrowski

Exemplos de aplicação

Smartphones com um aplicativo cujo design foi desenvolvido no Sketch.

Abrir galeria

Exemplo: No tutorial, você cria um aplicativo pronto para desenvolvimento usando o Sketch.

Smartphone com um aplicativo cujo design foi desenvolvido no Sketch.

Abrir galeria

Exemplo: Seu treinador dá dicas e truques sobre design moderno de UX e UI para você.

Introdução

Gratuito

Tutorial de Esboço: 1.1 Introdução

Seja bem-vindo ao Tutorial de Sketch: aprenda como você pode projetar seus próprios aplicativos usando o programa. Aqui está uma visão geral do curso.

Baixar o arquivo do projeto

Gratuito

Tutorial de Sketch: 1.2 O que é o Sketch?

Uma breve introdução ao programa "Sketch" e como você pode ter acesso a este programa.

Tutorial de esboço: 1.3 Interface do Programa

Aqui você vai conhecer melhor o Sketch. Vou te mostrar o programa completo e você aprenderá a trabalhar de forma eficaz com ele.

Tutorial de esboço: 1.4 Ferramentas de assistência

O Sketch não seria um programa tão incrível se você não pudesse usar ferramentas de auxílio. Aqui você aprenderá como adicionar essas ferramentas.

Tutorial de Esboço: 1.5 Os plugins mais importantes

Plugins ajudam você a trabalhar ainda melhor e mais rápido com o Sketch. Vou mostrar para você quais plugins podem te ajudar melhor.

Tutorial de esboço: Instalar bibliotecas 1.6

Tutorial de Esboço: Instalando bibliotecas 1.6.

Com as Libraries, você pode importar designs padronizados da Apple ou Android diretamente para o seu projeto.

Tutorial de Esboço: 1.7 InVision

O InVision é uma ferramenta que facilita bastante o seu projeto do Sketch. Lá você pode criar "wireframes" para estruturar seu projeto.

Princípios básicos de design

Tutorial de desenho: 2.1 Cores

As cores oferecem a você a possibilidade de dar vida ao seu aplicativo. Aqui você encontrará uma pequena introdução ao mundo das cores.

Tutorial de Esboço: 2.2 Fontes

A rede social "Medium" mostra como as fontes podem influenciar a experiência do usuário. Fontes em seu aplicativo podem ser muito importantes.

Desenvolver protótipos

Tutorial de esboço: 3 Prototipagem

Agora vamos começar com o aplicativo em si.

Design de tela

Tutorial de esboço: 4.1 Tela inicial e modelos de design

Agora estamos nos aventurando em nosso projeto real e começamos com a tela inicial. Além disso, aqui você aprenderá como podemos criar modelos de design.

Tutorial de esboço: 4.2 Criar grupos e estilos de texto

Tutorial de desenho: 4.2 Criar grupos e estilos de texto.

Nesta lição, aprenderás como podes criar grupos e guardar estilos de texto para poupar tempo.

Tutorial de Esboço: 4.3 Encontrar, criar e personalizar ícones

Ícones são uma parte importante de um aplicativo. Neste vídeo, você descobrirá onde encontrar os melhores ícones e como integrá-los ao seu projeto.

Tutorial de esboço: 4.4 Criar design de bate-papo, trabalhar com camadas

Tutorial de esboço: 4.4 Design de chat, trabalhar com camadas

Agora vamos para o chat do nosso aplicativo. Lá trabalhamos com camadas, as quais você também deve usar para poupar tempo.

Tutorial de Esboço: Design do iPhone X 4.5

O iPhone X mudou algumas coisas no design de aplicativos. Os designers agora precisam trabalhar com uma nova forma de tela. Aqui você vai aprender o básico.

Tutorial de Esboço: 4.6 Perfil de Usuário, Efeito de Desfoque

Tutorial de esboço: 4.6 Perfil do usuário, efeito de desfoque.

Com efeitos você pode dar um design interessante ao seu aplicativo. Estamos utilizando o efeito de desfoque no seu perfil de usuário.

Tutorial de esboço: 4.7 Utilizando o design como ferramenta

Neste vídeo, você vai descobrir como usar o design como uma ferramenta para dar um toque de elegância ao seu aplicativo.

Tutorial de rascunho: utilizando bibliotecas 4.8 e criando planilha de ações.

Tutorial de esboço: Usar bibliotecas 4.8 & Criar uma folha de ação

Agora vamos usar a biblioteca iOS para construir uma Action Sheet. Com bibliotecas, você não só pode economizar tempo no design, mas também no desenvolvimento.

Disponibilizar designs

Tutorial de Esboço: Disponibilizar 5 Designs no InVision

Se a tua aplicação deve ser desenvolvida, os desenvolvedores precisam dos teus designs. Nesta lição, aprenderás como disponibilizar os teus designs no InVision.

Fornecer informações importantes.

Tutorial de esboço: inserir 6 ajuda no aplicativo

Tutorial de esboço: 6 ajuda para adicionar ao aplicativo.

Os utilizadores da aplicação muitas vezes não conseguem encontrar os botões corretos ou têm outras perguntas que não são facilmente identificáveis. Por isso, estamos a criar uma secção de perguntas e respostas.

Design profissional

Tutorial de esboço: 7.1 Criar gráficos de design plano

Tutorial de Desenho: 7.1 Criando gráficos de design plano.

Quando tens prazos apertados para os teus projetos, muitas vezes não tens tempo para desenhar tudo sozinho. Aqui ficas a saber como e onde podes obter ajuda.

Tutorial de Esboço: 7.2 Redesign de Casa

Na tela inicial, ainda temos muito espaço para melhorias. Por isso, vamos redesenhar nossa primeira tela.

Tutorial de esboço: 7.3 Experiência do usuário durante o processo de compra

Tutorial de esboço: 7.3 Experiência do usuário no processo de compra

O processo de compra de um usuário deve funcionar sem problemas, pois este é um dos momentos mais delicados do fluxo do usuário.

Inovações no Sketch.

Tutorial de esboço: 8 Prototipagem no Sketch

Tutorial de Esboço: 8 Prototipagem no Esboço

Na nova versão do Sketch, você tem a possibilidade de criar um protótipo diretamente no Sketch.

Detalhes sobre o conteúdo

Compreender e implementar design de UI/UX para dispositivos móveis com Sketch
Seja para aplicativos, sites ou blogs - dê vida ao seu conceito de UI/UX com Sketch. Neste tutorial em vídeo com mais de cinco horas de duração do instrutor Luca Kiedrowski, você vai aprender rapidamente todos os fundamentos da utilização do programa, para logo em seguida trabalhar intensamente em um projeto de exemplo de design de aplicativo interativo.

Por que você deve assistir ao tutorial do Sketch

Você estará utilizando uma ferramenta profissional no design de UI/UX, já que empresas renomadas como Google, Facebook e Apple utilizam o Sketch. Devido à interface intuitiva, o manuseio do programa é facilmente aprendido, permitindo que você alcance resultados apresentáveis em pouco tempo.

Seja você um profissional experiente ou não no design: O tutorial do Sketch é ideal para quem está começando no campo do design de UI/UX e especialmente para a realização de suas próprias ideias de design de aplicativos com o Sketch. Fundamentos e aplicação em um só lugar!

Se você já faz designs para web e impressos (por exemplo, com Photoshop ou Illustrator): Adquira a habilidade de transferir seus designs e elementos individuais como ícones ou símbolos para designs de UI dinâmicos e prontos para desenvolvimento. Com seus conhecimentos em web design, você oferecerá um grande diferencial ao seu currículo.

Melhore a colaboração com desenvolvedores web: Utilizando o Sketch, você projeta interfaces que já seguem as regras do design web. Assim, você entrega aos desenvolvedores designs que podem ser implementados diretamente. Dessa forma, você reduz significativamente o caminho desde o conceito e design até o desenvolvimento de um aplicativo web.

Design de UI/UX com Sketch do início ao fim

O tutorial do Sketch foca na aplicação prática do programa, que está disponível em uma versão de teste gratuita pelo provedor. Com o instrutor, você passará por todas as fases, desde a criação de um esboço até o design de UI final, usando um exemplo de design de aplicativo. Os materiais de trabalho estão incluídos no tutorial, permitindo que você pratique diretamente:

Primeiramente, você esboça grosseiramente como a interface do aplicativo deve parecer. Em seguida, você trabalha diretamente no design. Você cria a tela inicial, trabalha com grupos, camadas e estilos de texto, e seleciona ícones adequados. Você projeta um chat, um assistente e um perfil de usuário, e aprende como usar bibliotecas, action sheets e efeitos. No final, terá um design de UI completo, a partir do qual poderá criar um protótipo na versão atual 52 do Sketch.

Antes disso, você aprenderá os principais fundamentos do Sketch e do design de UI. Assim, você se familiarizará rapidamente com a interface, conhecerá os principais plugins e ferramentas auxiliares e saberá como usar fontes e cores de forma eficaz. O instrutor também mostrará quando é apropriado combinar o Sketch com o InVision, por exemplo, na fase de criação dos wireframes.