Semana da Programação

R$128 de desconto!
Oferta acaba em:

0

dias

00

hrs

00

min

00

seg

Primeiras aulas do curso Sketch: Refinando o visual da interface

Sketch: Refinando o visual da interface

Introdução e organização dos arquivos - Introdução

Fala, pessoal! Bem-vindos a mais um curso aqui da Alura. Meu nome é André Lisboa e eu sou designer focado em interfaces. Significa que, no meu dia a dia, eu trabalho criando telas para sites, para aplicativos, para sites responsivos, para sistemas de designer digital em geral.

Esse aqui é o vídeo que inaugura o nosso curso de Sketch avançado. Se você não conhece a ferramenta Sketch, caiu meio de paraquedas aqui nesse curso, eu aconselho vocês fortemente a dar uma olhada nos dois cursos que precedem esse, o Sketch básico.

Sketch intermediário e até o ponto que a gente vai chegar aqui no Sketch avançado. Nesses dois cursos a gente aprende um pouco mais o ferramental, como trabalhar com a ferramenta do Sketch, como criar formas básicas e tipografia.

Até que a gente vai evoluindo e chegou um ponto que estamos nesse curso aqui, onde a gente vai querer aprender um pouco mais de conceitos um pouco mais avançados mesmo, em relação não só ao Sketch, mas como o designer de interface em geral, como criar experiência do usuário melhor, como criar uma melhor interface para o usuário interagir.

Nesse curso aqui a gente vai partir do conceito que acontece muito no mundo real: existe um cliente fictício, Alurafólio, que já tem um site que está implementado e ele quer fazer um redesenho. Então esse cliente fictício, ele já tem esse site aqui, que foi até uma criação meio grotesca, até exagerada, mas é para mostrar mesmo que pode acontecer esse tipo de situação no mundo real.

Eu já tenho esse site aqui, que tem umas áreas, têm a home, tem aqui a parte do hero, que nós vamos conhecer todos esses conceitos ao longo desse curso, uma parte de benefícios, de como construir seu site, aqui o rodapezinho. E ele quer redesenhar esse site trazendo novas áreas e reciclando essas áreas que já existem.

Então o que a gente vai aprender, a gente vai transformar esse site aqui no site final, que aqui a Alurafólio e tal, mostrando como ele funciona. Então aqui nós temos a imagem do hero, que o hero como a gente vai aprender é a parte do layout onde o usuário é mais retido no nosso site.

Então é a área mais importante, que é a primeira coisa que o usuário dá de cara, e é isso que vai determinar se ele vai continuar na plataforma ou se ele vai fechar.

Então nós vamos redesenhar essa área daqui, vamos incluir uma nova área de benefício, onde não existia antes, uma área de exemplos de sites que já foram criados por essa plataforma, vamos também aqui mostrando como você constrói esse site a partir do Alurafólio, que é um site para criar sites, é um construtor de sites.

Aqui temos uma outra área de: ah, essas aqui são nossas integrações, estamos integrados com o Trello, com o Google Drive, com n ferramentas. E ao final aqui temos a parte do footer. Além disso, nós temos aqui no topo uma área para o usuário fazer o login, então ele vai clicar aqui, acessar com o e-mail dele, com a senha e vai fazer o login para realmente entrar na área que ele vai construir o site dele.

Além disso, a gente aqui no programa Sketch, vamos criar também a versão responsiva do nosso layout. Então nós vamos pegar tudo que a gente criou na versão para desktop e vamos também criar a versão para celular. E no final vamos também aprender ver como protótipo e tal. Vamos prototipar mais a versão desktop mesmo, mas a versão responsiva também é possível de ser prototipada.

E, pessoal, uma coisa muito importante que a gente vai aprender ao longo desse curso que a gente vai trabalhar não apenas com a ferramenta Sketch, nós vamos utilizar também a ferramenta do Photoshop e do Illustrator, que assim a gente consegue ter uma maior gama de possibilidades para trabalhar.

Então a gente vai utilizar o Photoshop para tratar as imagens, usar o Illustrator para criar vetores, criar ilustrações e agregar todos esses elementos, que a gente vai criar, tudo no Sketch. Vamos pegar todos esses elementos e jogar tudo no Sketch, onde a gente vai centralizar todas as informações para depois de exportar e ter um produto entregável para o nosso usuário final.

Espero que vocês tenham gostado do conteúdo que está preparado aqui nesse curso. E espero vocês estão na próxima aula, onde a gente vai entender um pouco sobre o briefing do projeto que a gente vai aprender, vamos dissecar um pouco a ementa desse curso para realmente depois começar a meter a mão na massa, aprender um pouco sobre esse curso de SketchUp avançado. Então eu espero vocês na próxima aula, pessoal.

Introdução e organização dos arquivos - Overview

Fala, pessoal! Bem-vindos a mais um vídeo aqui da Alura e nessa aula daqui a gente vai entender um pouco sobre o quê que a gente vai fazer durante esse curso aqui de Sketch avançado.

O nosso cliente é a Alurafólio. O Alurafólio é um local onde a gente consegue construir um site, é uma plataforma construtora de sites. Então lá a gente consegue subir nossos trabalhos, nossos portfólios, criar um site com todas as imagens.

Então é um construtor de sites. E o Alurafólio já tem aqui uma landing page, que é uma página vendedora, para que as pessoas entrem na plataforma e fiquem com vontade de criar o próprio site delas.

Então a gente foi contratado para redesenhar esse site, essa landing page, apenas. Que não está muito bacana, está super grotesca. Não tem um padrão visual, cada fonte tem um tamanho, tem fotos que não estão dando leitura, várias cores diferentes. Então a gente foi contratado para redesenhar isso e trazer uma melhor experiência para o usuário, para incentivar o usuário a se cadastrar nessa plataforma e criar o site dele.

Então o que a gente vai ver aqui ao longo desse curso, a gente vai repensar todas essas áreas que já existem e também vamos incluir novas áreas que ainda não existem.

Então, aqui por exemplo no hero nós vamos alterar isso daqui, a parte benefícios vamos alterar, como construir seu site vamos criar uma nova, aqui o rodapé vamos pensar uma nova maneira. E, além disso, vamos inserir novas áreas também ao longo dessa plataforma, desse site que a gente vai desenvolver.

Então vamos pegar aqui, vamos dar uma passada aqui e vamos ver como a gente vai aprender a como construir o menu, o hero, os benefícios. Vamos criar essa área que é uma área nova de exemplos de sites que foram construídos na nessa plataforma.

Como construir seu site e integração dizendo: ah, já estamos integrados com todas as ferramentas disponíveis na internet, tal. E repensar o footer. Além disso, também vamos fazer aqui a página de login, para o usuário realizar o login dele na plataforma. E, além disso, vamos também fazer aqui a versão responsiva, como a gente já comentou.

Então vamos fazer aqui, pegar todos esses padrões que nós criamos aqui e adaptar para a versão para celular, beleza? Então vamos passando aqui e ver tudo que a gente vai aprender ao longo desse curso, dar uma dissecada melhor em todas as etapas desse curso de Sketch avançado.

Na primeira aula nós já vimos a introdução, a aula de overview, que é essa aula aqui, após isso nós vamos ver o guia de estilos. Vamos aprender o quê que é um dia de estilos, como construir um e qual a importância dele. Então vamos construir o nosso.

Depois vamos começar a aprender a organizar nossas pastas e criar o arquivo no sketch. Por que isso? Como esse aqui é um curso mais avançado, provavelmente alguém vai pegar esses áudios que nós criamos e se desenvolver, transformar em código, fazer acontecer mesmo.

E para isso nós temos que ter uma comunicação muito boa entre o profissional de design e o profissional de desenvolvimento. Então, para isso, a gente vai deixar tudo organizadinho em pastas.

Caso o desenvolvedor precise de alguma coisa a gente consegue enviar para ele facilmente, tudo organizadinho, bonitinho, para ele não se perder e para gente ter uma comunicação muito boa. E depois vamos criar o arquivo no sketch, então vamos já usando o Grid, vamos criar um Grid e vamos começar a posicionar os elementos.

Depois nós vamos aprender a fazer um menu, que é a parte do topo e a parte do hero, que vai ser dividido em dois, hero 1 e hero 2, que é a primeira área do site, onde o usuário entra e já bate o olho e ele tem que ser retido, porque tem que ser algo que motive ele a continuar navegando pelo site.

Então tem que ser algo muito interessante e que contribua para uma boa experiência do usuário. Fora isso, nós vamos depois desenvolver a área de benefícios, que é essa área daqui, onde mostramos os benefícios de utilizar o Alurafólio, e como fazer. Isso na aula dois.

Na aula três vamos continuar esse layout e vamos construir área de exemplos, a área de como construir o seu site, a área de integrações e o footer e login. Onde, aqui nós podemos ver temos aqui o footer e vamos também criar essa área aqui do login, que vai ser um modal ou também um pop up, também como é chamado.

Fora isso, vamos fazer também a parte da responsiva para celular, então vamos pegar todos esses padrões que nós já criamos na versão para desktop e adaptar. Não vai ser uma criação do zero, mas vamos ver como é que a gente consegue fazer esses dois tipos de layouts e adaptar com menor tipo de mudanças possíveis, com poucas mudanças. E, fora isso, vamos fazer a home e vai ser dividida em duas aulas e a página do login.

No final, nós vamos refinar nossa interface, vamos pegar tudo que a gente já construiu e dar uma olhada final. Isso é muito importante para gente conseguir não deixar passar nenhum erro, dar uma olhada boa para ver se está tudo certinho antes de realmente mandar para nosso cliente, para o desenvolvedor, para o usuário que vai testar. É muito importante.

E depois na 5.2 nós vamos ver os entregáveis, não só para o usuário final, para o cliente, mas também para o desenvolvedor. Nós vamos prototipar e nós vamos aprender a ferramenta do Zeplin, que mais para frente a gente vai ver um pouco melhor o quê que ela é.

E, ao final, vamos concluir esse curso aqui de Sketch avançado, vamos dá uma passada em tudo o que aprendeu e ver qual foi o ganho desse curso para nossa carreira de designer.

Pessoal, se vocês tiverem alguma dúvida, eu vou deixar aqui na descrição desse vídeo uma trade, um link para o fórum que eu vou criar. E nesse fórum eu vou deixar uma trade, onde vocês podem deixar qualquer dúvida lá, eu vou responder.

E eu acho muito bacana que não deixem apenas dúvidas, mas algo que vocês queiram complementar também, assim a gente consegue ter uma boa troca e maximizar o nosso conhecimento, aprender o máximo possível.

Então eu espero que vocês tenham gostado de todo o conteúdo que está preparado aqui nesse curso. E espero vocês na próxima aula, onde a gente vai começar já ver o guia de estilos, o quê que ele é, a qual a importância dele, como criar um. Espero, então, vocês lá, pessoal.

Introdução e organização dos arquivos - Guia de estilos

Download dos arquivos aqui

Fala, pessoal! Bem-vindos a mais um vídeo aqui da Alura e nessa aula daqui a gente vai aprender sobre o guia de estilos. Nessa aula daqui a gente vai dividir em três tópicos. Primeiro vou explicar o quê que é um guia de estilo, vou falar a importância dele e depois a gente vai criar o nosso do nosso projeto.

Para começar vou dizer que vou apresentar o que é um guia de estilo. E o guia de estilo é um local onde a gente insere num projeto de design todas as cores que a gente vai utilizar no projeto, as tipografias, qual o tamanho de cada fonte, qual o tamanho de cada item, por exemplo, o título tem tal tamanho, o texto corrido tem tal tamanho, subtítulo tem tal tamanho. Enfim, qual o tipo de botão vai utilizar, qual a cor do botão, qual o tamanho dele.

Enfim, a gente pode ir incluindo diversos elementos que a gente acha pertinente de inserir no guia de estilo. Eu tô com um aberto aqui de exemplo para a gente dar uma olhada. Nesse aqui ele cria uma paleta de cores bem completa, com várias cores, e aqui os tons de cada cor, diz quais são as cores complementares.

A gente pode inserir também a tipografia e não só a tipografia, mas também o tamanho do título, tamanho do subtítulo, do texto corrido, enfim, da legenda. A gente pode inserir tudo isso.

A gente pode também criar elementos da interface, como é que vai ser sempre a navegação do topo, como vai ser os botões, como vai ser o rodapé, o menu do rodapé. Isso aqui no caso do projeto para mobile, mas, enfim, a gente pode também criar da maneira que a gente achar mais interessante, incluindo ou não elementos que gente queira.

Então, aqui mostra também como é que são os cards desse projeto. Quais são os ícones, que é muito interessante quando a gente faz produzir com ele uma vai escolher os ícones, a gente escolher apenas uma família tipográfica e não ficar escolhendo várias famílias, apenas uma para ficar com o padrão visual. Qual o tipo de ilustração, se a gente quiser também quais são os tipos de fotos que vão ter, as fotos vão trazer tal sentimento, enfim. A gente pode definir o que a gente vai que vai ter no guia de estilo.

E, pessoal, a importância da gente criar o guia de estilo é que, quando a gente está acertando ele, a gente já define: todos os títulos vão ter tal tamanho, todos os subtítulos vão ter tal tamanho, todos os textos corridos e as coisas vão ser apenas essas. Assim a gente já consegue definir antes do projeto começar, a gente já consegue definir qual o padrão visual que ele vai ter.

Então sempre que o usuário bater o olho com um título ele vai saber que é um título, porque vai ter sempre o mesmo tamanho, sempre a mesma fonte, sempre a mesma cor, o botão sempre vai se manter no mesmo padrão. Porque, imagina, a gente tem várias telas diferentes, aí o botão numa hora verde, e na outra é vermelho, e na outra é azul, aí na outra é uma outra cor. Então isso não traz muito um padrão. Aí cada página tem uma fonte diferente, isso deixa confuso.

Então a gente define o guia de estilo justamente para ter esse padrão visual entre os elementos da tela, da interface que a gente vai construir. Isso é importante para o designer e para o desenvolvedor também, porque, pessoal, pensa que depois que a gente finalizar o layout, a gente vai entregar para alguém, e essa pessoa vai construir baseado no layout que a gente entregou, vai desenvolver esse projeto.

Então é interessante a gente já mandar algo que esteja estruturando, dizendo: sempre que tiver um título, usa esse tamanho de fonte, na hora da construção sempre que for uma cor, as cores são apenas essas. A gente não fica inventando cores. Então, assim a gente consegue ter uma comunicação alinhada com o profissional de design e o profissional de desenvolvimento.

Agora que a gente já sabe tudo isso, vamos abrir o Sketch aqui e começar a criar o nosso guia de estilos. Vamos lá? Então já tô aqui com o Sketch aberto, numa página qualquer. E aqui apertando a ferramenta de áudio, eu vou abrir aqui o desktop HD e vou já criar o nosso art bord, que a gente vai incluir as coisas aqui.

Vamos criar aqui um retângulo, apertando a ferramenta R, que a gente já aprendeu nos cursos anteriores. E vamos começar então a incluir as nossas cores. Primeiro aqui é o preto do nosso projeto, que tem esse hexadecimal aqui 393939. Vou duplicar isso aqui, e vamos começar a incluir as outras cores. A próxima vai ser esse roxo aqui, que a gente vai utilizar como nossa cor principal. Esse roxo aqui, jogar ele para o lado e aqui vamos por a nossa próxima cor, que vai ser o branco. Ele sumiu aqui na interface, vou só botar uma bordinha, só para gente que ele não sumiu, que é um branco mesmo aqui.

Agora o próximo eu vou incluir um pouco diferente, porque agora vou excluir um degradê que é o que a gente vai utilizar esse projeto aqui. A gente vai utilizar um degradêzinho, então vou pegar essa cor aqui primeiro, ela está por último, vamos por ela aqui. E aqui essa cor mais escura vai ter esse hexadecimal aqui 4a2f7b. Está vendo, tem a transiçãozinha aqui entre as cores.

E agora, por último, a nossa cor complementar aqui que a gente vai utilizar vai ser um amarelo, que combina bem com o roxo, que estão em locais diferentes no esquema de cores, são cores complementares: roxo e amarelo. Já está aqui tudo definidinho, nossas cores e agora o próximo passo.

Então vai ser a gente incluir as fontes que a gente vai utilizar. A gente vai utilizar duas fontes, a Baloo Da, que é uma fonte do Google, Google Fonts, que vai ser a nossa fonte display, apenas para títulos. E para o texto corrido vamos utilizar a Open Sans. Então eu vou escrever aqui um texto qualquer, sei lá, qualquer texto aqui, só para a gente ter uma noção mesmo, não sei porque ele veio com essa cor aqui, enfim.

Então, primeira coisa vamos pegar essa nossa cor aqui, e vamos definir aqui ou a gente podia também fazer assim. Então já temos essa cor aqui e vamos botar aqui Baloo Da, que vai ser nossa fonte principal. E esse aqui vai ser o nosso título. Nosso título vai ter sempre 68 pixels de tamanho. Vou aproveitar aqui e fazer assim Open Sans, 16 e vou por aqui Baloo Da 68 pixels. Está definido aqui. Vou pôr aqui embaixo assim, para ficar mais bonitinho e agrupado.

Aqui o nosso subtítulo, que é um pouquinho maior, menor, perdão, que ele tem 42. Vamos trazer aqui. Mais um agora, esse aqui vai ser 22, que já vai ser um títulozinho bem menor. Então aqui vamos pôr 22. Aí agora o que a gente vai fazer, a gente vai puxar para cá também novamente e vai por aqui. Vamos por Open Sans, no tamanho 16. E aí aqui gente põe Open Sans, 16 pixels.

E agora, por último, o texto do botão que vai ser 14, e vamos por aqui Bold. E aqui a gente põe Open Sans Bold, 14. Esse aqui é o texto que vai ficar dentro do botão. Então já temos aqui tudo certinho, o que está faltando agora então é a gente incluir os botões que a gente vai utilizar na nossa interface. Vamos lá. Vamos começar a criar.

Eu vou criar aqui um retângulo, que ele vai ter 172 de largura. Opa, posição não, desculpa. 172 de largura por 63 de altura. Vamos tirar essa borda aqui e aqui no Radius eu vou botar o máximo que der. Legal, já temos aqui a cor dele, ele vai ter essa nossa cor aqui. Então eu posso simplesmente puxar aqui e 172 por 63. Ele está preso aqui. 172 por 63. Radius, bastante.

E aqui, se eu clicar nele, eu consigo editar isso daqui. Eu vou botar ele na diagonal para ficar mais legalzinho. Já temos aqui. E agora a gente vai por uma sombrinha, vamos por aqui 2, 2, 6, vamos por 6 aqui também. Acho que ficou muito. 2 e aqui 8, e vamos por, está muito forte, vamos por 16. Olha já ficou bem mais tranquilinho.

Aí agora o que a gente vai fazer, eu vou puxar esse elemento daqui e vou escrever ele aqui: Botão. Botão, aqui. Nossa cor: fff. Não, vou por aqui só em letra maiúscula, na verdade. Botão. Vamos alinhar eles aqui, esses elementos. Legal, está pronto aqui o nosso botão.

E agora, pessoal, vocês já repararam também que quando a gente está utilizando um site, um aplicativo, algum elemento, plataforma digital, os botões eles têm estados, que esse aqui seria o estado natural dele, tem o estado que quando eu passo o mouse por cima ele reage de uma maneira, e quando a gente pressiona ele arranje outra maneira. Eu tenho aqui uma página que eu posso explicar, que mostra exatamente isso.

Vocês estão vendo, segundo esse exemplo aqui do Material Design, vocês estão vendo que quando o usuário clica nesse botão ele mostra que na profundidade, no eixo Y, no eixo Z, perdão, ele vai um pouco para frente na interface. Então, isso mostra que a gente, geralmente, põe uma sombra um pouco maior, para mostrar que houve essa distanciação. Então a gente vai representar isso aqui também. Então esse aqui vai ser quando ele tiver no hover, passar o mouse por cima, eu vou botar aqui 8, 8 e 16, e vou aumentar aqui a opacidade para 34. 32, na verdade. Então já mostra aqui que tem uma diferençazinha aqui na sombra.

E agora tem um outro estado, que é quando ele foi pressionado, ele já foi pressionado, não é só um hover. E agora é o pressed, que é outro estado. Então eu vou, na verdade, vou mexer só um pouquinho isso aqui, eu vou trazer um pouquinho mais escuro nesse canto e um pouquinho mais escuro nesse canto. E a gente pode ver que tem uma sutil diferença entre os botões, que é ele pressionado e ele não.

Então, pessoal, está tudo pronto aqui e eu espero vocês na próxima aula, onde a gente vai começar a definir os assets que a gente vai utilizar no projeto, definir as pastas. Vamos separar tudo certinho para gente começar a já criar o nosso projeto no Sketch. Eu espero vocês lá.

Sobre o curso Sketch: Refinando o visual da interface

O curso Sketch: Refinando o visual da interface possui 168 minutos de vídeos, em um total de 36 atividades. Gostou? Conheça nossos outros cursos de UI - User Interface em Design & UX, ou leia nossos artigos de Design & UX.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UI - User Interface acessando integralmente esse e outros cursos, comece hoje!

  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

  • Desconto

Premium

Desconto
  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75 R$64,33
à vista R$900 R$772
Matricule-se

Premium Plus

Desconto
  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100 R$89,33
à vista R$1.200 R$1.072
Matricule-se

Max

Desconto
  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120 R$109,33
à vista R$1.440 R$1.312
Matricule-se
Procurando planos para empresas?

Acesso completo por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas