Entendendo resolução e imagens em UI Design

1. Introdução: Oi. Sou Christine, designer de UX UI E hoje, veremos como as imagens funcionam no design da interface do usuário. Para realmente obter os melhores resultados on-line, é fundamental entender primeiro a resolução da tela. Portanto, essa classe é configurada em duas partes. Primeiro, desmistificaremos a resolução da tela, entenderemos realmente o que isso significa, por que usamos pontos e não pixels e em quais tamanhos de tela realmente usamos para basear nosso design Compreender as resoluções de tela será uma grande vantagem para todos os aspectos do design dos olhos, especialmente quando se trata de transferir o design para o desenvolvimento Depois de aprendermos o básico, veremos as imagens, que tipo de imagens existem, onde encontrá-las e como lidar com elas para fazer seu design brilhar Este é um curso de aprendizado. 2. Resolução: pontos, pixel e resolução na tela: Vamos falar sobre pontos de pixel e resolução de tela para entender o tamanho que seus designs precisam ser configurados. Vamos primeiro entender o que são pixels. Bem, os pixels são basicamente os pequenos pontos dos quais uma imagem é feita Eles são o menor elemento em uma imagem. Observe que os pixels assinam somente imagens. Tipografia e planos de fundo ou botões são vetores. Isso significa que eles são feitos de equações matemáticas. É por isso que eles podem ser ampliados e reduzidos para qualquer tamanho, e a resolução da tela realmente não os incomoda No entanto, os pixels não são realmente uma medida confiável porque dependem da resolução da tela, a chamada DPI ou também conhecida como PPI, pixels por polegada Isso mede quantos pixels existem em 1”. Quanto maior o DPI da tela, mais pixels ficam acumulados nessa polegada e, portanto, mais nítida é da tela, mais pixels ficam acumulados nessa polegada e, portanto, a imagem Então, como você pode ver, uma medida, por exemplo, de quatro pixels seria muito diferente em tamanho físico em diferentes resoluções de tela O DPI é determinado pelo dispositivo do usuário, então você não saberá disso com antecedência e também não poderá influenciá-lo Então, o que precisamos é de algum tipo de medida de espaço, independentemente da resolução da tela, mas ainda em relação aos pixels, e é aí que os pontos entram. Mas vamos começar do começo. 3. Resolução : por que desenhamos em 1x: Antigamente, um ponto era igual bm pixel e a vida era bem simples Em muitas telas, esse ainda é o caso hoje. No entanto, a resolução da tela foi aprimorada primeiro pela Apple com a tela retina De repente, dentro do mesmo espaço físico, caberiam quatro pixels em vez de um. Eu dobrei o DPI mantendo o mesmo tamanho físico da tela Isso foi ainda mais longe com telas como a super retina do iPhone 11 Pro, por exemplo, que triplicou o Isso significa que o pixel não era mais uma forma confiável de medição, pois significaria coisas muito diferentes em telas diferentes. É por isso que apresentamos uma medida como tamanho físico do seu design, independentemente da resolução da tela. A propósito, estou usando apenas iPhones aqui como exemplo, mas isso seria exatamente o mesmo para o design de desktop Agora, a pergunta mais comum e provavelmente também está em sua mente é qual é o tamanho que eu uso para configurar meu design. O maior possível? Não. Nós sempre e não podemos enfatizar isso o suficiente, sempre projetamos com o chamado “x”. Isso pode parecer um pouco confuso, mas vou mostrar por que fazemos isso Então, vamos pegar a retina quatro do iPhone como exemplo. Então, para esse grão, assim como para qualquer outro, podemos obter as medidas em pixels e podemos obter as medidas pontuais. Lembre-se de que com dois x, um ponto ficará assim em pixels. Portanto, para configurar nossos designs, sempre usamos as medidas pontuais e não as medidas de pixels. Dessa forma, configuramos nosso design automaticamente para que um ponto seja igual a um pixel, e estamos projetando no chamado X. Em todos os softwares de interface de usuário, como Figma ou Sketch, você tem pranchetas predefinidas que podem ser usadas e notará que estão todas configuradas em um X, prontas para uso e notará que estão todas configuradas em um 4. Resolução: recebendo melhores resultados em todas as Resoluções: Então, como projetar em um X ainda garante boa qualidade em todas as resoluções de tela Portanto, este é o nosso design configurado em um X, onde um ponto é igual a um pixel. Assim, elementos como botões de tipografia, ícones vetoriais e ilustrações se adaptarão Eles são chamados de elementos vetoriais, que significa que são feitos de equações matemáticas Então, em segundo plano, eles simplesmente aumentam para qualquer tamanho necessário. A tela basicamente dobra o pixel sozinha nos bastidores, e você não precisa fazer nada? A propósito, isso é o mesmo para espaçamento. Então, digamos que você tenha um espaçamento de 40 pixels em seu único x, que será automaticamente escalado para o mesmo tamanho físico em sua tela retina Então, absolutamente nada com que se preocupar. Você provavelmente ouvirá muitas pessoas falando sobre espaçamento de 40 pixels ou fonte de 16 pixels, como eu acabei Na verdade, eles significam pontos porque em um X, é o mesmo. Portanto, não se confunda com isso. No entanto, lembre-se de que as imagens são feitas exclusivamente de pixels, portanto, não são dimensionadas automaticamente Na maioria das vezes, eles são armazenados em um arquivo no servidor e, em seguida , literalmente inseridos pelo código quando precisamos dele. Portanto, o código só pode extrair o que você fornece. Portanto, se você fornecer apenas uma imagem de um x para uma resolução de dois x, ela ficará muito embaçada em uma tela de retina Então, o que você faz é fornecer essas imagens em uma resolução de um, dois x e três x. O código é configurado de forma que ele possa captar a resolução da tela e , em seguida, simplesmente inserir a imagem correta. É também por isso que você tem esse pequeno sufixo de dois x e assim por diante no nome da imagem para identificar o tamanho certo para a resolução correta da tela É também por isso que é tão importante usar um software de interface de usuário adequado, como Figma ou sketch, que permita fazer isso e não algo como Não me interpretem mal. Gosto muito do photoshop, mas ele foi feito para edição de fotos e não para configurar o design porque você não poderá exportar suas imagens em um tamanho maior posteriormente Então, com o software de design certo, isso é muito fácil. Aqui, estou na Figma, tudo o que faço é escolher minha imagem e, no lado direito, adiciono a porta E você verá que começará com um x. Vou escolher um JPEG, pois ele não tem transparência, então o JPC ficará bem E então, à medida que você adiciona mais, você pode adicionar mais exportações. Tudo o que eu faço é alterá-los para KPC também, e você pode ver que ele adicionou automaticamente um a dois x para as duas vezes para a resolução da retina, e três x quatro e uma resolução ainda maior O único X geralmente não tem nenhum sufixo, então você pode deixá-lo assim Você pode então clicar aqui em Exportar e ele exportará essas imagens no arquivo que você escolher. O melhor do Figma é que você nem precisa exportar todas elas sozinho, porque se você der acesso à sua equipe de desenvolvimento no Figma , eles podem simplesmente escolher essas imagens e exportá-las em qualquer tamanho que desejarem 5. Resumo de resolução: Vamos resumir. Usamos o ponto. O ponto é uma medida do espaço, independentemente da resolução da tela. E sempre projetamos em um x. É aqui que um ponto é igual a um pixel espaçamento tipográfico e todos os elementos baseados em vetores se adaptam à maior densidade de pixels por padrão, então você não precisa se preocupar com As imagens precisam ser exportadas ou disponibilizadas para exportação para obter resoluções mais altas para sua equipe de desenvolvimento 6. Imagens online: SVG JPG e PNG quando e por que: Neste vídeo, falaremos sobre imagens no design de interface do usuário e como colocá-las e manipulá-las. Ao lidar com imagens on-line, você pode receber três formatos de arquivo diferentes. O primeiro formato seria SVG. SVGs são para arquivos vetoriais, então seria algo como logotipos ou ícones As imagens não podem ser armazenadas como SVGs, pois não são baseadas em vetores, mas em pixels Para imagens, a primeira opção seria sempre um JPEG. A menos que sua imagem tenha transparência , você a salvaria como PNG. Você também usaria um PNG se quiser salvar algo como um círculo ou algo que basicamente não seja uma imagem retangular , porque o fundo teria que ser transparente Em relação ao tamanho do arquivo, ele também funcionaria na ordem apresentada aqui. O SVG é sempre o menor. Se você puder salvar suas imagens como SVG, isso só funciona se for baseado em vetores, como, por exemplo, ícones Às vezes, você vê um SVG e a mesma imagem de um PNG. Isso ocorre porque o PNG aqui será uma imagem alternativa. Se você estiver lidando com imagens e fotografias padrão , o JPG será sua primeira escolha. Isso sempre será menor do que um PNG. Portanto, você só escolhe um PNG se precisar da transparência. 7. Imagens online: onde encontrar imagens: Deixe-me mostrar alguns lugares onde você pode encontrar imagens que você pode usar em seu design de interface de usuário. É importante saber que você precisa possuir os direitos de qualquer imagem que estiver usando em seu design ou encontrar as chamadas imagens isentas de direitos autorais Você não pode simplesmente escolher qualquer imagem na Internet e simplesmente colocá-la em seu site. É muito importante que você respeite isso porque pode haver consequências legais. Minha página absolutamente favorita para imagens é a Splash. Splash não só tem uma ótima seleção de fotografias, mas também é isento de direitos autorais Isso significa que você pode usar todas essas imagens gratuitamente. No splash, você pode simplesmente pesquisar a imagem exata que está procurando ou ter essas boas categorias aqui Então, por exemplo, vamos falar sobre saúde e bem-estar, e então você encontrará coisas muito, muito boas. Além disso, se você estiver procurando por imagens de fundo grandes, isso é ótimo se você for à seção de natureza, por exemplo, você pode ver que está tendo fotos muito, muito boas para escolher. O Unsplash também fornece plug-in para sketch e Figma. Então, é muito bom trabalhar nisso, então você pode simplesmente pesquisar todo o banco de dados unsplash diretamente e colocar as imagens Caso contrário, basta clicar aqui, baixar sua imagem e inseri-la em seu design. Pixabay e pixels são mais duas páginas que funcionam exatamente como Embora sejam isentas de royalties, ainda existem algumas regras Sempre verifique a licença que dirá exatamente o que é permitido e algumas coisas que você precisa considerar se quiser usar essas imagens Às vezes, você pode estar procurando por algo um pouco mais específico ou mais exclusivo. Então eu recomendo dar uma olhada na Shutterstock ou da iStock Eles têm uma seleção muito boa por um preço muito justo. A propósito, a maioria das páginas que acabei de mostrar também tem arquivos de ilustração e vídeo. Se você está procurando uma ilustração em particular , quero recomendar uma página chamada Blush, que eu absolutamente amo Isso é de Pablo Stanley e é absolutamente incrível. Ele vem com um Figma e um plug-in de esboço, para que você possa usá-lo facilmente diretamente em seus arquivos de design E o que o Blush faz é ter uma seleção de ilustradores diferentes, e então você pode misturar e combinar as Por exemplo, entre aqui. Então você pode ver que há elementos diferentes e, mais tarde, em seu arquivo de design, você pode simplesmente juntá-los , alterar as cores e criar ilustrações muito, muito boas 8. Imagens online: de colocando imagens e proporção: Vamos dar uma olhada em como as imagens devem ser colocadas em seu design. Você pode colocar suas imagens dentro do grão ou como uma imagem de largura total fora da grade Você pode unir quantas linhas da grade quiser. Então, aqui, por exemplo, eu uno duas, mas depois me certifico não colocá-las na sarjeta se estiver colocando a próxima imagem ou algum texto ou qualquer outro elemento Sempre que fizer sentido, recomendo usar uma proporção para suas imagens. proporção é a relação entre a largura e a altura da imagem. Você não precisa, mas eu gosto muito usar uma proporção de 16 a nove. E isso é bastante comum. Por exemplo, esse slide de apresentação tem de 16 a nove. Você também pode usar outras proporções, como um para um , quatro quadrados ou cinco para quatro ou quatro para três, são bastante comuns. As proporções são muito úteis porque, dessa forma, você sabe que todas as suas imagens sempre funcionarão bem juntas Por exemplo, você pode ter começado colocando sua imagem em uma grade de duas e depois queira ampliá-la em uma grade de quatro com algumas outras Isso não é problema com uma proporção porque todas as imagens sempre terão proporcionalmente a mesma altura quando você as redimensionar Como sempre, lembre-se, isso é algo que deve ajudá-lo. Então, às vezes, uma proporção pode não ser a escolha certa. Por exemplo, aqui no lado direito , minha imagem de fundo. Se eu fizesse isso de 16 a nove, provavelmente preencheria a tela inteira, e eu não quero isso. Então, eu apenas faço esses um pouco menores. Você pode simplesmente calcular a proporção sozinho ou usar uma calculadora de proporção. Então, aqui, por exemplo, se eu mudasse esse para 1.500, ele calcularia automaticamente a altura para mim Eu posso, é claro, arredondar para pixels inteiros. Depois, você também pode escolher aqui entre diferentes proporções e acessar diretamente o novo tamanho de pixel 9. Imagens online: texto em imagens de fundo: Agora vamos falar um pouco sobre como combinar imagens de fundo com texto. Isso é algo frequentemente usado no chamado herói ou palco, que é a primeira grande coisa que você vê ao abrir uma página. Então você está configurando isso em seu design e parece perfeito. Você encontra esse bom local gratuito para colocar seu texto e seu cliente adora, e então a vida real se instala. O design da interface do usuário não é estático. Ele mora no navegador. Então, nesse tamanho, você ainda pode se safar, mas pode ver que quanto menor a imagem ficar, mais o botão desaparecerá na laranja. E se você mudar isso para uma imagem mais movimentada , pode imaginar que ela não funcionará em todos os dispositivos Então, o que podemos fazer? Uma solução seria se você tivesse uma imagem relativamente vazia, assim, fixá-la em um lado. Aqui, por exemplo, eu o conserto à esquerda. Então, minha cópia fica onde eu a coloquei, mas minha cadeira fica um pouco cortada, o que é bom neste caso. Para o design móvel, você simplesmente forneceria uma imagem totalmente separada No meu caso, eu apenas corto a cadeira e a uso assim, mas você também pode usar uma imagem completamente diferente para o fundo. Agora, você também pode ter imagens muito ocupadas e ainda querer usá-las, como neste caso. O que você pode fazer neste lugar é adicionar uma sobreposição e você pode brincar com a transparência aqui Como você pode ver, a sobreposição não apenas torna o texto mais legível, mas também adiciona mais cores da sua marca ao design E isso só lhe dá uma aparência muito mais sofisticada. A propósito, você também pode adicionar essa sobreposição em toda a imagem e diminuir um pouco com a opacidade Isso também dá um resultado muito bom. 10. Imagens online: como lidar com pequenas imagens: Às vezes, você pode receber imagens que deseja usar como imagem de herói em sua página, mas elas simplesmente não são grandes o suficiente e pareceriam pixelizadas Você pode verificar o tamanho simplesmente soltando a imagem em seu software de design de interface e ele mostrará as dimensões em pixels Ou você pode escrever collect em qualquer imagem do seu computador e ela fornecerá as informações. Aqui, por exemplo, eu sei que estou usando um JPEG. Esse é o tamanho da imagem e essas são as dimensões em pixels que estou procurando. Então, minha imagem aqui tem 1.200 pixels de largura. Isso significa que na minha tela, ao desenhar em um x, vou usá-la com cerca de 600 pixels de largura. Isso me garante que mais tarde eu possa exportá-lo dobro do tamanho de 1.200 para retina e ainda ter bons resultados No entanto, isso definitivamente não é grande o suficiente para uma imagem de fundo. Então, vamos ver o que podemos fazer para jogar com ele se ainda quisermos usá-lo em nosso herói. As imagens nem sempre precisam estar tamanho real para brilhar em uma seção de heróis. Como você pode ver aqui, eu simplesmente adicionei um pouco de cor para apimentar um pouco Você notará que, se brincar com isso, ainda poderá obter resultados muito bons. Além disso, embora a maior parte do seu conteúdo deva realmente encaixar e se comportar de acordo com a grade, com uma imagem de herói , você pode abrir uma exceção para, por exemplo, retirá-lo da grade ou fazer uma você pode abrir uma exceção para, por exemplo, retirá-lo da grade ou fazer animação muito boa. O melhor de trabalhar com imagens menores na seção de heróis também é que elas se adaptam muito bem aos dispositivos móveis 11. Resumo de imagens: Vamos resumir o que aprendemos sobre imagens. Use JPEG para imagens sempre que possível online. Para transparência, por exemplo, um fundo transparente, salve as imagens como P e G. Tente salvar suas imagens com uma proporção sempre que possível. Considere o tamanho e o comportamento de redimensionamento ao escolher imagens de fundo grandes Use uma sobreposição em imagens ocupadas. Você também deve sempre fornecer um texto completo para as imagens. Isso é muito importante para a acessibilidade. 12. Obrigado: Bem feito para terminar este curso. Sinta-se à vontade para entrar em contato conosco na lua learning dot io, estamos sempre interessados em ouvir seus comentários. Você também faria como um grande favor se você pudesse apenas tirar um minuto e deixar um comentário aqui. Se você gostou deste curso e também certifique-se de que você tem uma olhada em nossos cursos adicionais. No ponto Moody Learning. Nós cobrimos todos os assuntos desde os fundamentos do design UX UI até Figma e até mesmo alguns conceitos básicos de código. Certifique-se de visitar nosso site na Moody Learning dot IO, onde você também pode se inscrever em nossa newsletter.