Livro 1- Como aprender Design de Interfaces o Guia Definitivo

Resumo 31/10/2022 pg 6-13

Neste livro como o título já diz, o autor tem o objetivo de dar dicas para iniciantes de UI Design de como aprender sobre design de interfaces de forma mais eficaz. O autor começa por responder dúvidas frequentes sobre UI Design. A primeira pergunta é sobre o salário de um UI Designer. O salário de um UI Designer varia de Júnior, Pleno e Sênior onde um designer Júnior com experiência teórica e sem prática vai de 1000 a 1500 reais, um designer Pleno com experiência teórica e mais de 1 ano de prática vai de 2500 a 5000 reais e um Sênior com experiência teórica e mais de 4 anos de prática e skills avançadas vai de 6500 à 9800 reais. A segunda pergunta é qual tamanho de tela se deve usar num projeto. Não existe um tamanho certo mas a resolução mais usada é 1366×768 na web e o autor escolhe a resolução 375×667 para mobile que é o mesmo do iphone 8 mas indica que o leitor escolha o que lhe mais for confortável. A terceira pergunta é qual ferramenta utilizar para fazer designs. Existem 4 principais ferramentas que são o Sketch, Adobe XD, Figma e InVision Studio. Vale destacar o Figma porque é bem simples, tem bastante funcionalidades e é de graça. A última pergunta é se é preciso saber programar para trabalhar com UI Design e a resposta é não, porém vale a pena porque se você dominar HTML, CSS e Javascript podes desenvolver e criar telas mais tecnicamente viáveis. O próximo tópico que o autor aborda são erros que iniciantes cometem em começar em UI Design. O primeiro erro é começar a criar uma interface já pensando em todos os aspetos visuais de cores, tipografia, estilos e efeitos. Existem muitas etapas antes que você precisa executar e você precisa diminuir a complexidade no inicio do processo de criação. O segundo erro é aprender somente sobre como usar softwares de UI Design. Ficar fazendo curso atrás de curso sobre Adobe XD, Figma, Sketch não vai te fazer ser um UI Designer melhor que vai criar telas mais criativas e funcionais. O terceiro erro é não coletar e analisar boas referências de interfaces porque não adianta você só ter uma ideia genial e já sair criando sem nem ao menos buscar por referências ou inspirações pois as chances são que você vai acabar tendo um bloqueio criativo. O último erro é não entender qual a diferença entre UX e UI Design sendo que resumidamente UI (User interface) tá inserido dentro de UX (User experience), mas não é a mesma coisa, UX é sobre a experiência do usuário ao utilizar um produto ou serviço e o profissional que trabalha com UX é quem realiza atividades de pesquisa e teste.

O resumo da semana fica por aqui e no próximo irei dar continuidade com um novo tópico.

Resumo dia 06/11/2022 pg 14-19

Vou dar continuidade ao resumo começando pelo tópico ” Como aprender e por onde começar no mundo do UI Design”. Na trajetória de aprendizado do autor descobriu que o caminho ideal pra começar no mundo de UI Design é composto das seguintes etapas: “aceitar que criatividade e senso estético é algo que você desenvolve e não algo que você nasce sabendo”, criatividade e dom são habilidades da qual você desenvolve através de trabalho duro; “compreender e saber aplicar os princípios básicos de UI Design”, não adianta nada você querer criar interfaces elegantes e perfeitas se você nem ao menos sabe quais são as boas práticas ao criar elas, uma das maiores causas de bloqueios criativos e falta de confiança ao criar interfaces é porque o designer não domina com maestria todos os princípios básicos de UI Design; ” não existe perfeição e sim o exercício da prática constante e interminável”, tens que aceitar que teus projetos, métodos e habilidades nunca vão ser perfeitas, você nunca terá aprendido o suficiente, sempre vai ter alguma coisa pra melhorar e evoluir, você precisa continuar buscando por conhecimento, aprendendo e praticando cada vez e cada vez mais. E essas na visão do autor são as 3 etapas que compõem o caminho ideal pra começar no mundo de UI Design. Agora vamos avançar para 6 princípios fundamentais de Ui Design. O autor começa introduzindo esse tópico explicando que em qualquer disciplina ou área sempre vão existir fundamentos e princípios básicos que vão guiar você na direção correta e em UI Design existem certas regras e boas práticas que devem ser seguidas. O primeiro princípio é o “Espaço”. Também conhecido como espaço negativo ou espaço em branco, diz a respeito do espaço que você define entre os demais elementos de uma interface. Uma interface com uma boa legibilidade, usabilidade e elegância possui muito espaço. Deixar muito espaço em branco em uma interface não é desperdício de espaço, muito pelo contrário, é justo isso que faz com uma interface seja boa. O autor explica que o conceito de Espaço divide-se em 2 tipos: o espaço micro que diz a respeito do espaço interno dos elementos de uma interface e o espaço macro que diz a respeito do espaço entre grupos de elementos. O autor coloca imagens que exemplifica esses conceitos.

Para o resumo não ficar muito estendido vou ficar por aqui porque os próximos princípios são mais estendidos.

Resumo 21/11/2022 pg 20-29

No resumo anterior parei no primeiro princípio que é o espaço e próximo que se segue são os princípios de Grids e alinhamento. Um grid é como se fosse o esqueleto de uma interface e o uso principal dele é definir uma regra de organização e alinhamento dos diversos elementos que uma interface possui. Grids de interfaces digitais não possuem linhas horizontais (rows) e isso se deve ao fato de que não existe um controle 100% exato da altura e largura de uma tela. Todas as interfaces que você criar vão precisar se adaptar conforme o tamanho da tela do usuário, ou seja, é praticamente impossível você definir uma regra clara quanto à altura e largura de todas interfaces do mundo. Agora o terceiro princípio é a Consistência. Consistência é algo que diz a respeito de alguma coisa que segue um determinado padrão ou ordem pré estabelecida. Interfaces com muitas inconsistências visuais passam a impressão de algo que foi feito as pressas e mal revisado. Um exemplo de inconsistência é usar cores “semelhantes” aleatoriamente e a maneira consistente seria usar uma paleta de cores funcional e selecionada ou então outo exemplo é utilizar tamanhos aleatórios entre os elementos de uma interface, a forma consistente seria definir uma hierarquia de escala e tamanhos para cada elemento
da interface. Passando para o quarto princípio temos Hierarquia Visual. É através de uma hierarquia visual que você vai definir o que é mais importante em uma interface. Essa hierarquização é aplicada da mesma maneira que o princípio da consistência. Ou seja, você vai dar menos e mais destaque aos seguintes elementos: Tipografia, Cores, Escala de tamanhos, Espaço e Agrupamento. O penúltimo princípio é um pouco extenso e é a Usabilidade. Usabilidade não se trata somente do quão intuitivo e fácil de usar algo é pois de nada adianta uma interface ser bonita ou fácil de utilizar se ela não tem a capacidade de possibilitar que você consiga fazer o que você quer fazer e é por isso que você precisa dominar os seguintes assuntos caso você queira criar interfaces que sejam úteis, usáveis e agradáveis: Affordances- é uma pista da função ou forma de como alguma coisa deve funcionar. É basicamente um empurrãozinho gentil que você precisar dar no seu usuário, assim mostrando o que pode ser feito com algum elemento; Signifiers- um signifier é literalmente algo que dá significado e explica o que é uma determinada função, botão ou elemento; Efetividade de usabilidade- é algo que diz a respeito sobre se o usuário consegue atingir seus objetivos com precisão. A efetividade pode ser alcançada através da linguagem que é utilizada em uma interface. Se você utilizar uma linguagem muito técnica com jargões as chances são que o seu usuário não conseguirá utilizar a sua interface e o mesmo serve para complexidade de funções, botões e elementos da sua interface;

No próximo resumo darei continuidade aos tópicos inseridos no princípio de Usabilidade que se seguem.

Resumo 28/11/2022 pg 30-35

Dando seguimento ao resumo anterior vamos ver os conceitos de: Eficiência-Esta se trata sobre a velocidade que o usuário consegue atingir os seus objetivos, interfaces com maior eficiência são na sua essência simples e com poucos passos, ou seja, quanto menos etapas, passos e atividades o usuário precisar fazer para atingir os seus objetivos, melhor. O próximo tópico é o Engajamento que diz a respeito do quão entretido um usuário fica ao utilizar uma determinada interface, a Netflix e YouTube são mestres do engajamento; Tolerância de erros-todo produto vai possibilitar que o usuário cometa erros, isso é comum. O que nós podemos fazer é contornar essas situações e apresentar maneiras de ajudar o usuário à evitar esses erros. Basicamente é o CTRL+Z; Facilidade de aprendizado- o quão fácil uma interface é de aprender a usar? É aqui que as convenções são tão poderosas, se você cria algo que as pessoas já estão acostumadas a utilizar a sua interface tende a ser fácil de utilizar. E essas foram todos os conceitos que vc precisa dominar para criar boas interfaces que sejam úteis, usáveis e agradáveis. Vamos passar para o sexto e último princípio fundamental de UI Design que é Design Visual em Interfaces. Para o autor existem 3 principais elementos do Design visual em interfaces: Cores, Tipografia e Componentes. Aplicar os 6 princípios de UI Design em cada um desses elementos é o que realmente faz a diferença ao criar uma interface, ou seja, toda vez que você for criar uma nova paleta de cores, um botão ou até mesmo selecionar uma família de fontes você deverá levar em consideração os aspetos de consistência, hierarquia visual, espaço, etc. Termina assim os princípios fundamentais de UI Design, agora o autor vai introduzir Cores em Interfaces: Um guia prático. A primeira coisa que você precisa saber sobre cores digitais é o modelo de cores HSB. Utilizar o modelo HSB é a maneira mais versátil de criar variações de cores e paletas. Para entender melhor sobre o modelo HSB vamos ver o que as letras que compõe essa sigla significam. HUE (Matiz): É um atributo que define qual cor você vai trabalhar. Também é a posição de uma cor na roda de cores e é mensurado em graus, onde 0º é vermelho, 120º é verde e 240º é azul. Saturation (Saturação): É o quão vívida ou colorida uma cor é. 100% de saturação é uma cor vibrante e intensa e 0% é cinza, ou seja, sem cor. É um número que vai de 0 à 100. Brightness (Brilho): É o quão acessa uma cor é. 0% equivale a preto e 100% equivale ao nível máximo de brilho de uma cor. Ao manipular esses 3 valores você consegue criar inúmeras variações de cores.

O resumo de hoje fica por aqui e no próximo resumo darei continuidade começando por explicar porque é importante criar tantas variações de cores

Resumo 05/12/22 pg 35-41


Para começar o resumo de hoje vou começar pela importância das variações de cores. Uma interface precisa de muito mais do que 5 cores. Uma boa interface é composta por vários tipos e variações de cores que são separadas nas seguintes categorias: Cores Primárias- são as cores principais de uma interface é ela que vai definir a identidade visual dos elementos da interface (por exemplo, o Facebook é conhecido pelo Azul), e ainda precisarás de 5 à 10 variações claras e escuras da sua cor primária; Cores de Acentuação- são as cores utilizadas para comunicar ou destacar elementos específicos em uma interface. Basicamente você vai precisar de 4 tipos de cores de acentuação que é Contraste para utilizar em botões importantes, labels e outras informações
que precisam de destaque, Estado de perigo que são variações de vermelho para enfatizar ações de deletar ou confirmar ações destrutivas, Estado de alerta que são variações de amarelo para mensagens e ações que necessitem da atenção do usuário e Estados positivos que são variações de verde para confirmações e informações positivas como aumento de percentagens, valores, etc; Tons de cinza-quase todos elementos de uma interface são compostos de tons de cinza, textos, formulários, controladores, etc, e vais precisar de 6 à 10 tons diferentes de cinza para conseguir resultados satisfatórios. Agora o autor faz uma espécie de guia de como criar uma paleta de cores usando variações claras e escuras. Primeiro se começa pela cor primária, selecione uma cor para servir como base. Depois deve-se criar as variações escuras dessa cor manipulando os valores de Saturation e Brightness. Agora resta criar as variações claras. Por fim selecione um tom de cinza quase preto e vá alterando os níveis de brilho até que você crie uma grande variações de tons de cinza e pronto, já tens uma paleta de cores funcional e pronta para ser utilizada,

O resumo termina aqui e no próximo será a introdução de Tipografia em Interfaces.

Livro 2- O impossível é só uma lenda!

Resumo dia 24/10/2022

A história deste livro começa com um jovem de 23 anos que num certo dia em uma das suas aventuras viajando pelo mundo teve que escolher entre ir para o Equador passar o natal e ano novo isolado na natureza ou voltar para o Brasil passar o natal com a família sendo que ele se encontrava em Mâncora no norte de Peru a mais de 4 mil quilómetros de distância da sua cidade. Depois de pensar muito ele decidiu que iria voltar para o Brasil e iria passar um tempo vendendo brigadeiros e juntando dinheiro pra ir para Europa que era uma vontade que ele tinha há algum tempo. Tendo apenas uma semana para chegar no Brasil a tempo de celebrar o natal o jovem pôs-se então a estrada pedindo boleia pois o dinheiro que ele tinha era apenas pra comer. Após 3 dias de paragens nalgumas cidades finalmente o jovem cruza a fronteira do Brasil, mas ainda tava longe do seu destino final então não parou por ali e continuou pedindo boleia em postos de gasolina. Após outros 5 dias enfrentando algumas dificuldades pelo caminho e mesmo achando que ele não conseguiria chegar a tempo de celebrar o natal, o jovem finalmente chega em seu destino precisamente no dia 25 e assim conseguiu passar o natal com a família que já havia alguns meses que não os via. Depois de celebrar o natal e ano novo o jovem começa a pôr em prática o seu plano pra juntar dinheiro pra viajar para Europa e começa a vender brigadeiros que ele mesmo fazia na sua cidade e a cada dia que ele saía pra vender lucrava 100 reais vendendo 1 por 1 real. Fico por aqui neste pequeno resumo do início e no próximo dou continuidade a história do nosso jovem aventureiro.