DEV Community: Pedro Dos Santos

O Que é UX/UI Design e Por Que É Importante para Desenvolvedores

Pedro Dos Santos — Thu, 27 Jun 2024 21:12:12 +0000

A digitalização dentro das empresas e órgãos públicos vem aumentando e se tornando um processo irreversível, cada vez mais presente no nosso cotidiano. Desde o app que utilizamos para pedir uma refeição ao uso do app do banco que utilizamos para efetuar um pagamento. Com essa mudança de paradigma surgem novas oportunidades e novas áreas, como: UI e UX Design.
Apesar dos seus conceitos e aplicabilidade serem utilizados anteriormente em diversas indústrias, os mesmos não estavam devidamente inseridos no processo de desenvolvimento de um novo produto digital.

Neste artigo, falaremos sobre o que é UI e UX e a importância dos desenvolvedores fazerem parte desse processo.

O que é UX?

UX (user experience em inglês) significa “experiência do usuário”. É o conceito de toda a experiência do usuário ao interagir com o produto, visando além de uma boa aparência, também funcionalidade, adaptabilidade ao produto, pelas emoções e experiências sensoriais que o design provoca no usuário. O Macintosh da Apple pode ser considerado um dos primeiros grandes casos de sucesso na área de UX. A ideia de usar “janelas” no lugar de linhas de comando já existia, entretanto não era amplamente usada, mas a equipe da Apple foi responsável por ter tornado a interface gráfica amplamente disponível. Ao realizar isso mostraram que a experiência do usuário não se trata apenas de conseguir fazer determinada coisa, mas sim como aquilo é feito e da satisfação do usuário no processo.

O que é UI?

UI (user interface em inglês) significa “interface do usuário”. É o conceito de toda a interface gráfica exibida ao usuário durante a utilização do produto, como: o processo de definição de cores, imagens, fontes dentre outros. Todos esses itens são essenciais para criar algo visualmente bonito. A interface precisa estar agradável para prover ao usuário uma boa experiência, para isso esses itens abaixo precisam estar bem alinhados:

Organização de elementos da interface.
Utilização de ícones, textos, animações que já deixem claro ao usuário do que se trata.
Construção de botões, menus e outros componentes que facilitam o uso da funcionalidade.
Familiaridade entre as telas e componentes ajudam o usuário na adaptabilidade e entendimento da funcionalidade.

Essa imagem exemplifica bem a definição e diferença de UI e UX :

Por Que É Importante para Desenvolvedores ?

Durante todo esse processo é essencial que os desenvolvedores estejam presentes, pois investir em UX e UI desde o início do processo do desenvolvimento irá resultar em economia de tempo e recursos a longo prazo. Definições claras de design e componentes reutilizáveis irão acelerar o desenvolvimento e a adaptabilidade do usuário ao produto, o foco na experiência do usuário durante o desenvolvimento reduz a necessidade de retrabalhos e ajustes posteriores. O foco no cliente e a integração de UI , UX com o time de desenvolvimento é uma necessidade fundamental para o sucesso do produto.
Algumas formas do desenvolvedor contribuir nesse processo é participando das fases de upstream e downstream junto do time de UI e UX, agregando com insights e melhorias de fluxos valiosos e pontuando possíveis limitações técnicas que possam surgir durante desenvolvimento, a participação nesses momentos também contribui para que o desenvolvedor saiba e entenda a necessidade do usuário e como o que irá ser desenvolvido agregará valor.

Design Pattern - Compound Components

Pedro Dos Santos — Mon, 05 Feb 2024 23:32:56 +0000

É um padrão avançado de design utilizado para a construção de componentes que trabalham juntos e de forma coesa, promovendo maior flexibilidade, controle e comportamento sobre o componente.Permitindo que se crie um conjunto de componentes que funcionam juntos para formar uma unidade funcional maior, de forma que cada componente individual não tenha conhecimento direto e não esteja acoplado aos demais, mas que juntos funcionam bem.

Um bom exemplo de utilização de componentes compostos pode ser visto em HTML com os elementos e . Eles não fazem muita coisa sozinhos, mas juntos fornecem uma experiência completa e funcional ao usuário, que ao clicar numa opção, o select tem conhecimento de qual foi clicado, pois os componentes compartilham os estados por conta própria sem precisar configurá-la explicitamente.

Aqui está uma visão geral de vantagens e desvantagens do uso dos componentes compostos:

Vantagens:

Separação de responsabilidades: Aplicando esse conceito, é possível separar claramente o relacionamento entre os componentes pais e filhos, gerendo um código mais modularizado e fácil de entender.
Reutilização: Pelo fato dos componentes estarem devidamentes separados, é capaz de utilizar em vários lugares sem a necessidade de duplicar código ou funcionalidade.
Manutenibilidade: Por gerar menos duplicação de código, e de menor complexidade e melhor compreensão. Torna a manutenção mais fácil.

Desvantagens:

Curva de aprendizado: Para novos desenvolvedores implementar esse conceitos requer uma certa curva de aprendizado e necessidade de uma documentação clara de como os componentes interagem entre si.
Possível complexidade excessiva: Em determinados casos, os compound components podem levar a uma hierarquia com complexidade maior, principalemente quando não foram projetados para isso.

SPA (Single Page Application)

Pedro Dos Santos — Mon, 22 Jan 2024 21:20:32 +0000

SPA(Single Page applicaton) é um tipo de aplicação web que ,apesar da nomeclatura, não se trata de uma única página. A diferença existe na forma como a página é carregada, geralmente as aplicações são renderizadas pelo lado do servidor, nas SPA’s não, o contéudo é carregado uma única vez no momento inicial de acesso a aplicação e conforme necessário vai se atualizando apenas as partes mais relevantes da página, sem recarregar a página por completa, tornando a usuabilidade melhor para o usuário.

De modo geral, em uma aplicação SPA, o carregamento de recursos (como HTML,CSS e Javascript) ocorre do lado do cliente(browser) via APIs Javascript, desta formas se retira uma responsabilidade do servidor de renderizar e processar os contéudos, mas apenas lidar e manipular os dados da aplicação, focando na persistência em bancos de dados e retornar os dados para o cliente, geralmente utilizando comunicação RestFull via chamadas HTTP, devolvendo dados no formato XML e JSON. Essa arquitetura é ótima pois mantém uma separação de responsabilidades bem clara entre back-end e front-end, permitindo ter duas equipes trabalhando em paralelo.

Bons exemplos de aplicações escaláveis com SPA’s são: Gmail, Outlook, Trello, Airbnb e Netflix.

Muitas SPAs são construídas utilizando frameworks JavaScript, como: Angular, React ou Vue.js. Esses frameworks simplificam o desenvolvimento, facilitando a criação de componentes reutilizáveis e gerenciando o estado da aplicação de maneira eficiente.

Mas como não há “bala de prata” no mundo da programação, neste tipo de aplicação web também possui vantagens e desvantagens. Algumas delas são:

Vantagens:

Melhor experiência do usuário, pois não há necessidade de ao mudar de página ter uma busca em um servidor para obter a página, deixando a navegação mais fluída.
Desenvolvimento mais fácil e rápido, não havendo necessidade de escrever código para renderizar páginas via servidor.
Melhor funcionamento off-line e cache.

Desvantagens:

Acoplamento ao Javascript no navegador, pois uma SPA requer que Javascript esteja presente e ativado.
Menor capacidade de otimização no SEO.

Separação das Camadas de Serviço no FrontEnd

Pedro Dos Santos — Fri, 02 Sep 2022 13:51:45 +0000

Fala galera!
Tudo certo?

Vim compartilhar com vocês essa maneira de separar a camada de serviços e chamadas a API no Front End, esse modelo é composto por 4 serviços "essenciais":

HttpService(aonde tem os interceptors de token e de toast no response)
AuthService(aonde ocorre a autenticação),
ToastService(aonde está o serviço de toast messages)
StorageService(aonde ocorre a manipulação de dados no localStorage)

Permitindo que os serviços sejam criados apenas uma vez e chamados em toda a aplicação,já com os interceptors e toast por estarem herdando do HttpService os outros serviços essenciais.

Abaixo estão imagens dos arquivos dos serviços e das chamadas nos pages.

Service Article:

Service Article Delete:

Service Article GetId:

Service Article getAll:

Service Article Post:

Service AuthService:

Service HttpService

Service StorageService:

Service Toast:

Service Article Put:

Link do repositório do projeto nos comentàrios.

Job Freelancer e algumas dificuldades

Pedro Dos Santos — Fri, 08 Apr 2022 22:29:59 +0000

Fala Dev's , beleza?
Atualizando um pouco sobre a trajetória, essa semana surgiu um trabalho de freelancer, a responsável da empresa me chamou no WhatsApp e me falou o que ela estava precisando, ela precisava de uma landing page e que fizesse uma configuraçã "simples" no seu Gmail do Google Workspace, até ai tudo certo, passei o valor do serviço e mandei um "esboço" de como ficaria o site que iria fazer, ela gostou e fechamos o serviço.
Passei por algumas dificuldades na hora de implementar o dominio comprado pelo Google Domains, não estava conseguindo passar o DNS que o Netlify estava me passando, após algumas pesquisas e tutoriais assistidos, consegui resolver. Após isso fui para a configuração do Gmail,nunca havia tido contato com Google Workspace, entrei no Workspace e não entendi nada hahaha, li alguns artigos e entendi por alto como funcionava a plataforma, e realizei a configuração necessária da forma correta.
Após essa experiência percebi que quando me interreso por algo,me esforço e quero aprender, eu realmente aprendo e aprendo bem. Fiquei mais confiante e otimista diante desses meses de estudos e nenhuma oportunidade de ingressar no mercado que estavam me desanimando aos poucos. Mas vou continuar e agora mais embalado e confiante.

Abs,

Hello World

Pedro Dos Santos — Tue, 05 Apr 2022 11:31:04 +0000

A primeira postagem aqui não poderia faltar um hello word clássico, decidi fazer essa conta no DEV.to para registar minha evolução como desenvolvedor. Bom me chamo Pedro e comecei a estudar fazem 6 meses, estou no desenvolvimento Web com HTML5, CSS3, Javascript e suas frameworks como React e Node,essa semana comecei a estudar banco de dados relacionais e não relacionais, no meu projeto atual estou desenvolvendo usando React no Front e Node no Back com PostgreSQL e MongoDB, esse vem sendo meu maior projeto já desenvolvido mas sei que após esse virão outros maiores. Estou animado e venho gostando muito da área.