Design para todos os tamanhos e telas de projeto: design responsivo no desenho | Bryan Zavestoski | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Design para todos os tamanhos e telas de projeto: design responsivo no desenho

teacher avatar Bryan Zavestoski, Independent UI/UX Designer and Educator

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

7 aulas (18 min)
    • 1. Apresentação

      2:24
    • 2. O que é design responsivo

      3:44
    • 3. Primeiro estiramento de opção de redimensionamento de desenhos

      2:03
    • 4. Pin de segunda opção de redimensionamento ao canto

      2:19
    • 5. Terceira opção de redimensionamento redimensionar objeto

      1:41
    • 6. Opção de redimensionamento final flutuar no lugar

      1:42
    • 7. Juntando tudo

      4:26
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

611

Estudantes

--

Sobre este curso

Nota: A partir da versão 44, o Sketch atualizou como suas opções de redimensionamento funcionam e é muito diferente do que quando este curso foi gravado. Alguns conteúdos específicos de desenho podem não ser mais relevantes, mas este curso ainda deve fornecer algumas informações sobre os conceitos básicos de design responsivo.

Este curso vai ensinar o design básico de design responsivo e explicar como projetar layouts responsivos. Ele vai se concentrar nas novas ferramentas de redimensionamento no desenho de aplicativo de design. O desenho tornou-se rapidamente a ferramenta mais amplamente utilizada para web e design móvel, substituindo o Photoshop para muitos designers. Em uma atualização recente, o Sketch introduziu a capacidade de objetos responder e adaptarem-se às mudanças em .

O desenho define quatro comportamentos diferentes sobre como objetos devem redimensionar:

  • Alongamento
  • Pin ao canto
  • Redimensionar objeto
  • Flutuar no lugar

Vamos focar nos usos de cada opção de redimensionamento e terminar combinando todos eles no nosso projeto de curso.

Este curso é para qualquer pessoa que tenha interesse em web design. Não vai passar por cima dos conceitos básicos de desenho absoluto, por isso alguma familiaridade com desenho ou outro aplicativo de design é útil, mas não necessário.

Conheça seu professor

Teacher Profile Image

Bryan Zavestoski

Independent UI/UX Designer and Educator

Professor

Hi! I'm Bryan Zavestoski, a User Interface and Product Designer. I've worked with businesses from some of the largest financial services companies in the world to small but mighty, living room startups. I'm now taking the knowledge I've gained from these organizations and sharing it with the design community.

If I'm not designing, I'm probably running around outside, whether that means climbing, skiing, or hiking.

Learn InVision Studio - Tutorials for new and experienced designers

Zavzen Design - Product Design for B2B SaaS businesses

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Apresentação: Oi, eu sou Brian, um designer de interfaces freelance. Neste curso, vamos nos concentrar nas novas ferramentas de dimensionamento de re no esboço APP design. Vamos ver como essas ferramentas podem ser usadas para criar designs que adaptam todos os tamanhos de tela . Essas ferramentas simplificam a criação de designs que podem responder a uma variedade de layouts, dispositivos e tamanhos. Eu pessoalmente fiz a mudança de Photoshopped para esboço cerca de dois anos atrás, e eu pessoalmente confiei quase exclusivamente em esboço. Desde então, muitos Web designers vão contar uma história semelhante de como eles deixaram a loja de fotos e agora se concentrar em projetar com esboço. Por que o esboço está sendo adotado tão rapidamente? Esboça uma ferramenta que foi criada com o design digital em mente. Bem, Photo Shop é um editor de fotos que tem sido hacks para trabalhar como uma ferramenta de Web design. Sketch tornou-se o aplicativo preferido para interface e Web designers porque ele se concentra em Lee nas ferramentas que eles precisam. Sem todas as três ferramentas D, filtros de fotos e outros recursos que raramente usam, Sketch tornou-se uma escolha ainda melhor para os Web designers. Com a adição das opções de dimensionamento re adicionadas em meados de 2016, dando a um designer a capacidade de modificar como a camada atua quando fica menor ou maior, projetos podem se tornar muito mais flexíveis. Essa flexibilidade é importante porque o uso móvel está explodindo o uso da Web móvel passado uso da área de trabalho pela primeira vez em 2014 e agora representa quase 2/3 de todo o tráfego da Web . O tempo de criação para um único tamanho de tela ou dispositivo acabou. Agora precisamos de uma maneira de projetar para o futuro flexível e em constante mudança da APS e sites para o projeto de classe. Vamos criar um aplicativo de eventos de forno de página única. Esta página será capaz de redimensionar para uma variedade de tamanhos de tela. Esta aula é para qualquer pessoa que queira aprender mais sobre design responsivo e como criá-lo . Eu não vou estar revisando os conceitos básicos absolutos do esboço, então alguma experiência com Sketch Photoshopped ou outra ferramenta de design definitivamente será útil. Mas eu vou estar falando através de cada passo que eu estou dando e algumas das teclas de atalho divertido também . Mesmo que você seja novo para esboçar, você terá uma ótima idéia do que é possível ao projetar com esboço. Então vamos entrar e falar um pouco sobre o que exatamente o design responsivo é 2. O que é design responsivo: você provavelmente já ouviu o termo design responsivo jogado ao redor. Mas o que significa exatamente? De acordo com a Wikipédia, Web design responsivo é uma abordagem ao Web design que visa permitir que as páginas Web de desktop sejam visualizadas em resposta ao tamanho do dispositivo. Um está vendo com. Basicamente, isso significa que seu site ou APP mudará a aparência com base no dispositivo em que alguém está visualizando. Quantas vezes você já olhou para um site em seu telefone e teve que ampliar para ler a página? O design responsivo ajuda a evitar esses casos e torna seu conteúdo acessível em qualquer lugar e para todos. Muitos designers preferem uma primeira abordagem móvel ao design responsivo. Isso evita o problema comum de tentar encaixar tudo da tela da área de trabalho em uma pequena tela do telefone. Ao cortar o conteúdo primeiro, é muito mais fácil expandir para uma tela maior semelhante ao design responsivo. O design adaptável também muda a aparência com base no tamanho em que está sendo visualizado. No entanto, experimento adaptativo muda apenas em alguns pontos específicos. Embora muitas ferramentas de design possam criar projetos adaptativos usando várias placas de arte ou documentos, esboço é exclusivamente qualificado para criar design responsivo devido às suas características de dimensionamento . Agora vamos dar uma olhada em alguns exemplos de abordagem adaptativa, responsiva e ah híbrida para Web design. Reuni quatro exemplos diferentes dos diferentes tipos de design que podemos usar para se adaptar a diferentes tamanhos de tela. O primeiro site, Apple usa uma abordagem adaptável, então eu vou redimensionar isso e você pode ver a imagem do livro Mac fica menor à medida que minha porta de visualização fica menor. Não é realmente uma mudança gradual, embora você possa ver como ele tipo de salta para ser os tamanhos diferentes. E então, mesma forma, com o cabeçalho, você pode ver que ele tem todas as opções. Mac iPad, relógio para iPhone. E, em seguida, à medida que ele fica menor, ele irá encaixar apenas para incluir este ícone à esquerda que permite que você obtenha todas essas opções. Portanto, esta é uma abordagem adaptativa. Passaremos para o próximo. Coca Cola Coca Cola usa uma espécie de abordagem híbrida que você pode ver enquanto eu o redimensiono. Ele vai encaixar menor muito rapidamente, mas, em seguida, nesta seção do meio, você pode ver algumas das imagens começam a mudar de tamanho e o texto re flui apenas um pouco antes de finalmente encaixar para o Vieux Port móvel. Então, isso usa um pouco de design responsivo nesta seção do meio, onde as imagens e textura mudando, mas é principalmente adaptável. Nosso próximo exemplo. McDonald's. Eles são totalmente responsivos. À medida que redimensiono a porta de exibição, você pode ver o texto muda de tamanho. As imagens mudam de tamanho. Essas imagens sempre ocupam toda a largura da tela, independentemente do tamanho. E, finalmente, irá para o alvo ponto com. Temos algumas opções de itens aqui. Como eu redimensioná-lo, você pode ver que este também é totalmente responsivo. Todas as imagens serão redimensionadas e, em seguida, você também pode ver em suas categorias em destaque. Aqui vai de Ah, seis colunas, cinco colunas. As colunas vão realmente ficar menores. E então, à medida que ficamos ainda menores do que isso, vamos rolar para baixo e temos quatro colunas. Então, finalmente, ele vai obter ainda menos colunas. Os itens estão um pouco pequenos agora. Nós rolamos um pouco mais e eles são para baixo para três colunas. Então, independentemente de qual porta Vieux, você está vendo isso ainda parece bom. Aqui temos uma espécie de meio. Você pode ver que nada está totalmente destacado. Tudo está ocupando a quantidade de tela que eles querem em tamanho real. As imagens são um pouco maiores. Eles serão um pouco mais óbvios, mas ainda se ajustam a cada tamanho. 3. Primeiro estiramento de opção de redimensionamento de desenhos: agora que falamos um pouco sobre design responsivo e por que gostaríamos de usá-lo. Vamos ver como podemos usar algumas dessas técnicas dentro do esboço. A primeira opção de dimensionamento re que vamos olhar é chamada alongamentos, a opção de dimensionamento re padrão. Sempre que você criar um grupo ou um símbolo com stretch, todos os espaços e objetos serão redimensionados proporcionalmente. O que isso significa é que se fizermos o nosso grupo duas vezes asl ARJ, os objetos dentro do grupo e o espaçamento entre esses objetos dobrarão. Vamos entrar no esboço e ver como podemos aplicar stretch em nossos projetos. À medida que selecionamos uma camada, podemos procurar as opções de dimensionamento re na barra de ferramentas direita. Como você pode ver, eles não estão lá. A primeira coisa que vou fazer é agrupar essas cinco camadas junto com o Comando G. Uma vez agrupadas, vamos selecionar todas as quatro caixas dentro do grupo. Estou segurando comando e deslocamento para selecionar cada camada dentro do grupo. Agora, na barra de ferramentas, podemos ver a opção de dimensionamento re. Como você deve ter adivinhado, ele já está definido para esticar. Podemos redimensionar este grupo e ver como os objetos dentro do grupo irão agir. Cada objeto esmaga os alongamentos de ar para permanecer no recipiente. Esta caixa tem 140 pixels de altura e 140 pixels de largura, e tem 40 pixels de cada borda. Se dividirmos o tamanho total do grupo por ambos, o tamanho e a distância das bordas são cortadas pela metade. Aqui, vou selecionar o ícone dentro do nosso grupo de texto. À medida que o redimensiono, o ícone rapidamente se deforma para ficar quase irreconhecível. Vamos precisar encontrar outra opção de dimensionamento re, que poderia funcionar aqui. 4. Pin de segunda opção de redimensionamento ao canto: seguida, vamos olhar para o segundo re opção de dimensionamento pino para canto. Quando um objeto é definido para fixar no canto, ele manterá o mesmo tamanho. Independentemente de como o grupo externo é redimensionado. A posição da borda mais próxima também permanecerá a mesma, não importa o tamanho de um grupo. Se um objeto tiver 10 pixels da borda, ele permanecerá 10 pixels da borda. Pinter Corner tem um caso especial. Se um objeto estiver centralizado entre duas bordas, ele permanecerá centralizado entre essas bordas. Como o grupo é redimensionado, Penta Corner pode ser útil para posicionar itens em uma barra de status móvel ou cabeçalho de site . Por exemplo. No IOS, há um sinal móvel e uma operadora à esquerda e a porcentagem da bateria à direita. Se essa barra de status fosse expandida para caber em um telefone maior ou menor, gostaríamos que esses itens permanecessem perto da borda da tela. Também pode ser útil em um site para manter o logotipo principal centrado ou para manter o logotipo principal no lado esquerdo da tela. Agora vamos dar uma olhada em um exemplo aqui. Eu criei um documento semelhante ao último vídeo. Primeiro, devemos selecionar cada uma das camadas e configurá-los para fixar o canto. Então eu estou segurando o comando e deslocamento para selecionar cada uma dessas camadas. E então eu vou para as opções de dimensionamento re. Está atualmente em stretch, que é o padrão, e então eu vou mudar isso para fixar a esquina. Agora vamos ver como estes reagem quando eu selecionar todo o grupo. Como você pode ver, cada um dos objetos permanece do mesmo tamanho. Ele também permanece a mesma distância de cada uma das bordas. Vejamos estes apenas para ter certeza que este objeto tem 140 pixels de largura e 140 pixels de altura , e tem uma distância de 40 pixels de cada borda. Vou selecionar o grupo inteiro, redimensioná-lo para ser muito menor e, em seguida, selecionar o grupo superior esquerdo novamente. Como você pode ver, ele ainda tem 140 pixels por 140 pixels, e ainda tem uma distância de 40 pixels de cada borda. Para olhar para o caso personalizado que eu falei, vamos olhar para esta seção de cima aqui. Eu já disse que nosso ícone seria fixado no canto. Então vamos ver o que acontece quando movemos todo o grupo. Vou torná-lo maior e torná-lo menor. O ícone fica centrado. 5. Terceira opção de redimensionamento redimensionar objeto: Nossa opção de dimensionamento de 30 é chamada de objeto de redimensionamento. Quando enviado para redimensionar objeto, a distância de todas as quatro bordas externas permanece a mesma. O objeto será redimensionado para preencher todo o espaço redimensionado. Objeto não se comporta ligeiramente diferente quando a camada está tocando três lados do grupo externo . Quando este for o caso, uma camada permanecerá do mesmo tamanho. Esse comportamento específico pode ser útil para barras laterais ou barras de guias móveis. Muitas vezes queremos que esses itens permaneçam do mesmo tamanho, independentemente do tamanho externo total. Redimensionar objeto pode ser útil quando aplicado ao texto. Um grande bloco de texto pode ser usado para preencher todo o espaço restante ao redor. Outros objetos ou texto dentro de um item de lista podem ser definidos para sempre preencher o todo com dessa lista, independentemente de o tamanho da lista aumentar ou diminuir. Agora vamos ver como redimensionar objeto funciona. Vou começar selecionando cada um de nossos grupos internos e alterando-os de esticar para redimensionar objeto. Vou selecionar nosso grupo externo e começar a redimensioná-lo como você pode ver nossos objetos redimensionar, mas eles vão manter a mesma distância das bordas. Vamos testar que este bloco é 140 pixels por 140 pixels, e é 40 pixels de uma borda e 450 da outra borda. À medida que o redimensiono um pouco, ainda temos a distância de 40 pixels e 450 pixels de cada borda, mas o tamanho do nosso objeto mudou. 6. Opção de redimensionamento final flutuar no lugar: Agora nós fizemos isso para o quarto e último fluxo de opção de dimensionamento re no lugar. Quando definido para flutuar no lugar, uma camada permanecerá sempre do mesmo tamanho. Isso é semelhante ao pino para canto, mas o fluxo no lugar difere e como ele modifica o espaço ao redor do objeto. Pinchuk Orner mantém um objeto à mesma distância da borda mais próxima. fluxo no lugar ajustará o espaçamento proporcionalmente. É melhor pensar nisso em termos de porcentagens. Se um objeto estiver 10% da borda mais próxima, ele permanecerá 10% dessa borda. À medida que um grupo fica maior, a distância da borda mais próxima crescerá na medida de pixel aparente, mas permaneceu 10% do tamanho total do grupo. Flutuar no lugar pode ser útil para ícones dentro de uma barra de abas ou para texto dentro de uma tabela. Se a barra de abas ou tabela for redimensionada, todos os itens dentro permanecerão do mesmo tamanho, mas se reposicionarão para serem distribuídos uniformemente . Então, aqui está a nossa opção de dimensionamento re final flutuar no lugar. Eu já fui e selecionei cada um dos quadrados e configurá-los para flutuar no lugar, Então vamos ver como eles reagem todos, selecionar o nosso grupo, pegar um ponto de ancoragem e redimensioná-lo. Você pode ver que todos os quadrados manterão seu mesmo tamanho, mas as distâncias das bordas ficarão ligeiramente menores ou ligeiramente maiores. Vou selecioná-lo. É o mesmo padrão 40 e 40 que temos visto, e então eu vou re selecionado o grupo, redimensioná-lo um pouco para baixo. Você pode ver que é um pouco mais perto se olharmos de novo. 23.35 e 31.54 Então é realmente baseá-lo fora das porcentagens em vez das distâncias reais de pixel. 7. Juntando tudo: Agora vamos reunir todas as opções de dimensionamento re em uma interface real. Como mencionei na introdução, Nosso projeto de classe é uma única tela de aplicativo móvel baseada em sua banda ou filme favorito. Aqui está um exemplo, que usa cada uma das opções de dimensionamento re. Aqui está o nosso exemplo Eventos em para o projeto Classe. Vamos dar uma olhada em uma visão geral de toda a página pressionando o comando um. Você pode ver que eu tenho seis nossa placa configurado para iPhone sete tamanho para iPhone sete plus e dois para iPad Pro na parte superior. Temos todas as opções de dimensionamento re padrão aplicadas, e na parte inferior temos todas as opções de dimensionamento re personalizado para que possamos fazer as páginas redimensionar como gostamos. Vamos dar uma olhada no APP todos selecionar o nosso iPhone sete tamanho comando para ampliá-lo e comandar zero para garantir que estamos em 100%. Zoom. Temos muitos dos recursos padrão para um IOS up. Temos nossa barra de status no topo, nossa barra de título. Dentro da APP. Temos a hora e a localização do nosso evento e a possibilidade de comprar bilhetes. E, finalmente, temos as pessoas que participam do evento e alguns dos ícones para chegar a diferentes partes do aplicativo. Vamos dar uma olhada no que acontece quando o redimensionamos. Vou rolar até o iPhone 7 mais o tamanho para cima. Tudo ainda parece muito bom. Algumas coisas estão ficando um pouco esticadas, mas não é muito óbvio aqui. Se formos para o iPad Pro Forever, no entanto, eu posso redimensioná-lo aqui e você pode ver um monte de coisas têm tipo de agir. Não exatamente como ele gostaria. Nossa barra de cabeçalho ficou muito alta, e alguns de nossos ícones estão ficando um pouco esmagados. Parte do alinhamento está fora de uma onda se rolarmos para baixo, alguns dos ícones para o tempo no local meio que se afastaram do texto, e nossas imagens de perfil se transformaram em ovais em vez de círculos. Vamos ver como podemos corrigir isso. Então agora eu estou ampliando em nosso iPhone sete plus, com as opções de dimensionamento re aplicadas todos os tamanhos novamente. Nós não temos nenhum alongamento sobre os ícones agora, mas não é super óbvio. Então vamos dar uma olhada no iPad Pro novamente. Vou redimensioná-lo e depois vamos dar uma olhada mais de perto. Nossa barra de cabeçalho permaneceu do mesmo tamanho e são ícones não parecem que eles estão esticados em tudo. Se clicarmos aqui, podemos ver que alguns desses objetos estão presos ao canto, para que eles permaneçam do mesmo tamanho. E então este, que é centrado como um lugar flutuante. Então ele vai ficar centrado o tempo todo. Se rolarmos para baixo, temos a nossa localização e hora em que o ar enviado para flutuar no lugar e podemos ver que o ícone fica bem ao lado das imagens. Compre ingressos. É um pouco grande demais, mas queremos que seja maior quando estiver no iPad. Então aqui enviaram para redimensionar objeto. O que podemos fazer. Por enquanto, podemos aumentar um pouco o tempo, e temos uma grande ação para comprar os ingressos. Podemos rolar para baixo e ver. Nosso pessoal se espalhou um pouco, e da mesma forma com nossos ícones, eles permaneceram do mesmo tamanho, mas se espalharam. Então, estamos muito perto do que gostaríamos que o dedo do pé do iPad se parecesse com apenas algumas aplicações das opções de dimensionamento re. Nenhum dos nossos ícones de ar esticado. Nossas imagens de perfil ainda são círculos, e muito do texto está espaçado como queríamos. Teremos que fazer algumas pequenas atualizações, mas nada muito importante. Agora que olhamos para um exemplo, adoraria ver o que todos inventam. Sinta-se livre para compartilhar esboços, ideias e telas finais. Se alguém tem uma pergunta, quer feedback ou apenas quer compartilhar seu projeto, deixe um comentário abaixo. Na seção de comunidade deste curso, um esboço de nota final tem algumas limitações. Como você viu no nosso exemplo iPad, as opções de dimensionamento re só vão tão longe. Os designs ainda precisam ser modificados manualmente quando os tamanhos forem muito maiores ou menores do que o design original. Temos mais flexibilidade e liberdade no design do que nunca, mas sempre há espaço para melhorias. Veremos o que o futuro nos reserva. Obrigado por fazer este curso. Espero que você tenha aprendido algo, e se você gostou, por favor deixe uma revisão dos tribunais abaixo. Obrigado novamente e design feliz