Dia 02
Descrição: Projete uma tela de registro de usuário para um aplicativo de saúde.
Sugestão: Considere fazer a transição entre a tela de registro e a tela de login (lembre-se do campo de “esqueceu a senha”).
Dica: Adicione as dicas de senha segura (um caracter maiúsculo, um caracter especial, etc.) e uma micro interação de mostrar e esconder a senha.
Desenvolvimento do desafio
Para concluir o segundo dia, realizei uma tela de splash screen, tela de login e tela de cadastro. A tela de cadastro possui o input de senha que mostra ao usuário os caracters que faltam e os que já foram adicionados para tornar a senha forte.
Desafio Uitober
Período: Outubro até Novembro de 2024.
Objetivo
O desafio tinha como objetivo estimular a prática de UI Design e aprimorar as habilidades, técnicas e criatividade. Durante 15 dias, as administradoras do projeto (Carol Costa e Guyllian Kanashima) enviavam emails com o briefing do projeto do dia, como o projeto tinha pouca duração, os briefing pediam poucas telas mas sempre com objetivos diferentes.
Dia 01
Descrição: Crie um card de produto para um aplicativo de e-commerce. Você pode fazer em qualquer resolução desde que seja mobile.
Sugestão: faça interações de customização do produto. Ex: trocar de cor, selecionar tamanho, adicionar mais de um, etc.
Dica: Faça uso de grid e autolayout para otimizar seu tempo.
Desenvolvimento do desafio
Decidi criar uma página de produto de um Fone Bluetooth com interações de carrossel de imagem, troca de cor do produto e adicionar produto como favorito, ao realizar essa tela foquei nas interações que o usuário teria.
Dia 03
Descrição: Crie uma tela onde o usuário pode selecionar diferentes serviços de um aplicativo de finanças pessoais.
Sugestão: Use gráficos e calendários para uma experiência visual mais fluida.
Dica: Considere adicionar gastos fixos, gastos variáveis, receitas e investimentos
Desenvolvimento do desafio
Ao criar essas telas, foquei em incluir as informações mais importantes na página inicial, como, por exemplo, o saldo atual, saídas e atividades recentes. Ao trabalhar na página de 'Atividades Recentes', adicionei um campo de pesquisa e filtros para facilitar o acesso dos usuários, além de listar as atividades recentes em ordem cronológica de compra.
Dia 04
Descrição: Desenvolva uma tela de contagem regressiva para um evento especial.
Sugestão: Não foque apenas na tela estática, tente criar o contador em funcionamento e inclua o estado do que acontece quando a contagem chegar em 0.
Dica: Pense em como você pode engajar o usuário enquanto aguarda o evento.
Desenvolvimento do desafio
Ao criar esta tela, foquei em desenvolver uma animação decrescente para anunciar o lançamento do produto. Utilizei componentes do Figma para criar a animação de maneira simples e bonita.
Dia 05
Descrição: Projete uma tela de mensagens/ chat.
Sugestão: Considere criar uma tela de chat individual, uma tela de chat em grupo, uma tela de listagem de todos os chats, uma tela de criar nova mensagem ou novo grupo e, quem sabe, de alguém ligando para você.
Dica: Tenha em mente ações que podem ser feitas dentro de cada tipo de chat (editar nome do grupo, adicionar e excluir membros, envios de arquivos, envios de figurinhas, envios de áudios, etc.)
Desenvolvimento do desafio
Criei as telas de chat individual, chat em grupo, recebimento de ligações e chamadas de vídeo em grupo. Ao desenvolver esse desafio, foquei em criar um design moderno, com funcionalidades importantes e já presentes em aplicativos similares.
Dia 06
Descrição: Crie um checkout com o resumo de uma compra em uma plataforma que vende cursos.
Sugestão: Inclua sugestões de outros cursos com desconto com base no curso que o usuário adicionou no carrinho, com gatilhos para que ele queira adicionar mais ao carrinho antes de finalizar a compra
Dica: Certifique-se de que a estrutura do checkout não causa confusão no usuário ou que o faça abandonar o processo de pagamento
Desenvolvimento do desafio
Ao realizar o sexto dia do desafio, trabalhei em uma interface de checkout, reunindo todas as informações importantes durante uma compra em uma loja online, como, por exemplo, dados do produto a ser comprado, informações de pagamento, valor a ser pago, incluindo frete, e as políticas de reembolso. Durante o processo, idealizei uma interface que transmitisse confiabilidade e fosse de fácil usabilidade.
Dia 07
Descrição: Desenvolva uma tela para coletar feedback do usuário sobre um app, que o levará para a app store.
Sugestão: Uma tela com um pop-up/modal dentro do app para o usuário avaliar; uma tela dentro da app store para que ele faça a avaliação seguindo o sistema de cinco estrelas e um comentário.
Dica:
Você pode aproveitar algum app que já criou em algum desafio anterior.
Desenvolvimento do desafio
Reutilizei a tela do desafio 03 para desenvolver este desafio, criando um pop-up intuitivo que chamasse a atenção do usuário.
Dia 08
Descrição: Projete uma tela de configurações gerais que poderia se encaixar em qualquer contexto, independente do tipo de aplicativo/site/plataforma.
Sugestão: Pode ser mobile ou desktop. Use toggles e sliders para opções ajustáveis.
Dica: Faça um benchmarking na parte de configurações em todos os apps que você tem e identifique o que eles têm em comum, como: configurações da conta, notificações, privacidade, segurança, alterar para tema claro/escuro, etc.
Desenvolvimento do desafio
Ao realizar o desafio 08, primeiramente fiz uma pesquisa de mercado para entender os padrões de uma tela de configurações. Após essa pesquisa, comecei a desenvolver a tela, incluindo funções como voltar à página anterior, pesquisar configurações e visualizar as principais opções de configuração.
Dia 09
Descrição: Crie uma tela de FAQ para um aplicativo de delivery.
Sugestão: Considere adicionar outras orientações para o caso de o usuário não encontrar o que ele precisava, como contato com o suporte .
Dica: Se um usuário chega na sessão de FAQ, ele quer resolver seu problema rapidamente, portanto considere um layout que seja simples e eficiente, organize as perguntas por categorias, inclua uma barra de busca para facilitar a navegação, etc.
Desenvolvimento do desafio
Ao desenvolver essa tela, busquei métodos de interface que facilitassem a jornada do usuário ao procurar uma resposta para sua pergunta. A tela apresenta as principais perguntas, uma barra de busca e uma área de contato, caso o usuário não encontre o que precisa.
Dia 10
Descrição: Desenvolva uma tela que permita ao usuário explorar diferentes receitas disponíveis no aplicativo, destacando categorias como "Receitas Populares", "Novas Receitas" e "Receitas em Destaque".
Sugestão: Inclua filtros para diferentes tipos de refeições (café da manhã, almoço, jantar, sobremesas) e uma seção para receitas saudáveis ou vegetarianas.
Dica: Utilize imagens atraentes das receitas e informações resumidas, como tempo de preparo e avaliações dos usuários, para incentivar o engajamento.
Desenvolvimento do desafio
Seguindo o briefing, desenvolvi a tela de receitas, idealizando algo desejável e prático. Criei um banner chamativo para atrair a atenção do usuário, além de incluir categorias de comida e receitas populares, com informações sobre o tempo de preparo, avaliações dos usuários e um resumo da receita.
Dia 11
Descrição: Projete uma home para um aplicativo de saúde e uma tela de submenu para um serviço específico (ex: consultas).
Sugestão: A tela principal deve ter ícones claros, enquanto o submenu pode incluir opções detalhadas.
Dica: Você pode fazer na visão do paciente ou do profissional/ consultório, mas atente-se ao tipo de informação necessário em cada caso.
Desenvolvimento do desafio
Decidi desenvolver a tela na visão do paciente, criando categorias de serviços oferecidos pelo aplicativo, utilizando as cores branca e azul, conforme a descrição da tela. Achei importante também incluir um card com os compromissos do dia daquele usuário, além de adicionar cards de clínicas e médicos próximos.
Dia 12
Fluxo de e-commerce (3 Telas)
Descrição: Crie três telas para na visão de um gestor de e-commerce
Tela de adicionar produto: adicionar imagens, tamanhos, categorias, valores, descrição e outras especificações necessárias.
Tela de personalização da loja: Nome, descrição, imagem da logo, banner, endereço, etc.
Tela de transações: Listagem das transações (pagamento concluído, venda cancelada, pagamento pendente, etc), mostrando o total dentro de um período que o usuário possa selecionar.
Sugestão: Use um layout que destaque informações importantes.
Dica: Para atender este público é preciso que as informações sejam claras e os processos sejam rápidos e eficientes.
Desenvolvimento do desafio
Ao desenvolver esse fluxo de e-commerce, primeiramente realizei uma pesquisa de mercado para compreender o nível dos dashboards dos concorrentes. Após concluir essa etapa, comecei a trabalhar na página de produto, onde o gestor poderia editar as informações gerais, imagens, preços e informações adicionais, como tags e tipos de venda. A próxima página a ser desenvolvida foi a de personalização da loja, que possui funcionalidades para alterar o banner, o logo, o endereço e as informações gerais, sendo importante destacar os tamanhos de banner e logo que o gestor pode utilizar. A última etapa foi a de vendas, onde criei uma tabela de transações com as informações mais relevantes, além de filtros para pedidos pagos e pendentes, barra de busca e filtros variados.
Dia 13
Descrição: Desenvolva quatro telas para uma plataforma de jogos onde os usuários podem visualizar e gerenciar suas bibliotecas de jogos.
Tela de início: Sugestões de jogos com base no perfil do usuário, jogos em alta e jogos em promoção.
Tela de detalhes do jogo: Informações detalhadas sobre um jogo específico, incluindo descrição, avaliações, capturas de tela e um botão para iniciar o jogo.
Tela de análise: Gráficos e informações sobre o tempo gasto em geral e em cada jogo, com opções de filtragem por semana, mês e ano.
Tela de conquistas: Visualização das conquistas obtidas no jogo, incluindo progresso em cada uma e um botão para compartilhar nas redes sociais.
Sugestão: Adicione interações simples de hover para destacar sutilmente algum item onde o usuário passar seu mouse.
Dica: Transições entre diferentes telas não precisam ser animações elaboradas, o simples funciona (às vezes o famigerado smart animate gera muita sobrecarga no processamento de informações).
Desenvolvimento do desafio
Ao desenvolver o desafio do dia 13, percebi que talvez fosse uma das telas mais complexas que eu iria criar ao longo do desafio. Decidi, então, estudar a jornada do usuário em aplicativos de jogos já existentes para compreender como esse fluxo deveria funcionar.
Tela de início: Após concluir essa pesquisa e entender quais informações e funcionalidades as telas deveriam conter, comecei a prototipar a página inicial, utilizando banners de jogos que chamassem a atenção do usuário, funcionalidade para visualizar amigos online e cards de jogos em destaque e em promoção.
Tela de detalhes do jogo: Ao trabalhar nessa tela, meu objetivo era tornar o jogo desejável para o usuário, através de imagens, capturas de tela e avaliações dos usuários.
Tela de análise: Ao desenvolver essa etapa, fui precisa em criar dois gráficos: um para o tempo gasto e outro para a média de horas jogadas, juntamente com filtros de data e jogo.
Tela de conquistas: Foquei em criar cards dos jogos do usuário para desenvolver essa tarefa, com cada card exibindo um ícone de conquista que o usuário obteve. Também criei uma seção de análise de conquistas, com filtros e barra de pesquisa
Dia 14
Descrição: Projete quatro telas que mostrem o fluxo de um aplicativo de produtividade.
Tela de tarefa: Criação de uma nova tarefa com opções detalhadas.
Tela de lista: Visualização da lista de tarefas.
Tela de detalhes da tarefa: Informações sobre uma tarefa específica.
Tela de conclusão: Tela que aparece ao marcar uma tarefa como concluída.
Sugestão: Considere fazer um app que seja gamificado, exemplo: ao concluir uma tarefa, o usuário ganha um prêmio ou faz progresso em seu avatar.
Dica:
Pense em como motivar o usuário a concluir tarefas
Desenvolvimento do desafio
Para realizar o penúltimo desafio, busquei uma interface com um estilo único e marcante. Ao desenvolver a tela de tarefas, criei uma listagem simples, onde há uma mudança de cores entre as tarefas concluídas e as não concluídas. Procurei manter a mesma arquitetura nas telas de nova tarefa e detalhes da tarefa, alterando apenas as informações e os inputs. A última tela a ser desenvolvida foi a de conclusão de tarefa, onde criei uma animação com ícones atrativos e uma chamada destacando os pontos conquistados ao concluir a tarefa.
Dia 15
Descrição: Desenvolva um fluxo de usuário em um aplicativo de trivia, onde os usuários podem testar seus conhecimentos.
Tela de login: Simples e clara, com opções de recuperação de senha.
Tela de seleção de conteúdo: Onde o usuário pode selecionar a categoria que deseja jogar (ciências, história, culinária, cultura pop, conhecimentos gerais, etc.)
Tela do jogo: a tela onde o usuário vai responder todas as perguntas relacionadas à categoria selecionada anteriormente.
Tela de falha: Quando o usuário erra as perguntas e falha.
Tela de sucesso: O que o usuário ganha ao acertar todas as perguntas?
Sugestão: Pense em como ajudar o usuário caso ele queira alguma dica que ajude a responder a pergunta atual.
Dica: Lembra do show do milhão (ou nós que estamos muito velhas?)? É uma ótima inspiração.
Desenvolvimento do desafio
Para finalizar o último dia do Uitober, decidi trabalhar em uma interface divertida, com uma proposta de entretenimento. Desenvolvi, primeiramente, a tela de login, por ser uma tela com funcionalidades padrão e de baixo nível de complexidade. Ao criar as telas de seleção de conteúdo, sucesso e falha, busquei incluir ícones coloridos e animações divertidas para prender a atenção do usuário. Ao desenvolver a tela de jogo, achei interessante adicionar uma barra de progresso durante o jogo. A pergunta e as opções de resposta foram elaboradas com tipografia e espaçamentos pensados para não confundir o usuário.
Desafio Uitober
Período: Outubro até Novembro de 2024.
Objetivo
O desafio tinha como objetivo estimular a prática de UI Design e aprimorar as habilidades, técnicas e criatividade. Durante 15 dias, as administradoras do projeto (Carol Costa e Guyllian Kanashima) enviavam emails com o briefing do projeto do dia, como o projeto tinha pouca duração, os briefing pediam poucas telas mas sempre com objetivos diferentes.
Dia 01
Descrição: Crie um card de produto para um aplicativo de e-commerce. Você pode fazer em qualquer resolução desde que seja mobile.
Sugestão: faça interações de customização do produto. Ex: trocar de cor, selecionar tamanho, adicionar mais de um, etc.
Dica: Faça uso de grid e autolayout para otimizar seu tempo.
Desenvolvimento do desafio
Decidi criar uma página de produto de um Fone Bluetooth com interações de carrossel de imagem, troca de cor do produto e adicionar produto como favorito, ao realizar essa tela foquei nas interações que o usuário teria.
Dia 03
Descrição: Crie uma tela onde o usuário pode selecionar diferentes serviços de um aplicativo de finanças pessoais.
Sugestão: Use gráficos e calendários para uma experiência visual mais fluida.
Dica: Considere adicionar gastos fixos, gastos variáveis, receitas e investimentos
Desenvolvimento do desafio
Ao criar essas telas, foquei em incluir as informações mais importantes na página inicial, como, por exemplo, o saldo atual, saídas e atividades recentes. Ao trabalhar na página de 'Atividades Recentes', adicionei um campo de pesquisa e filtros para facilitar o acesso dos usuários, além de listar as atividades recentes em ordem cronológica de compra.
Dia 02
Descrição: Projete uma tela de registro de usuário para um aplicativo de saúde.
Sugestão: Considere fazer a transição entre a tela de registro e a tela de login (lembre-se do campo de “esqueceu a senha”).
Dica: Adicione as dicas de senha segura (um caracter maiúsculo, um caracter especial, etc.) e uma micro interação de mostrar e esconder a senha.
Desenvolvimento do desafio
Para concluir o segundo dia, realizei uma tela de splash screen, tela de login e tela de cadastro. A tela de cadastro possui o input de senha que mostra ao usuário os caracters que faltam e os que já foram adicionados para tornar a senha forte.
Dia 04
Descrição: Desenvolva uma tela de contagem regressiva para um evento especial.
Sugestão: Não foque apenas na tela estática, tente criar o contador em funcionamento e inclua o estado do que acontece quando a contagem chegar em 0.
Dica: Pense em como você pode engajar o usuário enquanto aguarda o evento.
Desenvolvimento do desafio
Ao criar esta tela, foquei em desenvolver uma animação decrescente para anunciar o lançamento do produto. Utilizei componentes do Figma para criar a animação de maneira simples e bonita.
Dia 05
Descrição: Projete uma tela de mensagens/ chat.
Sugestão: Considere criar uma tela de chat individual, uma tela de chat em grupo, uma tela de listagem de todos os chats, uma tela de criar nova mensagem ou novo grupo e, quem sabe, de alguém ligando para você.
Dica: Tenha em mente ações que podem ser feitas dentro de cada tipo de chat (editar nome do grupo, adicionar e excluir membros, envios de arquivos, envios de figurinhas, envios de áudios, etc.)
Desenvolvimento do desafio
Criei as telas de chat individual, chat em grupo, recebimento de ligações e chamadas de vídeo em grupo. Ao desenvolver esse desafio, foquei em criar um design moderno, com funcionalidades importantes e já presentes em aplicativos similares.
Dia 06
Descrição: Crie um checkout com o resumo de uma compra em uma plataforma que vende cursos.
Sugestão: Inclua sugestões de outros cursos com desconto com base no curso que o usuário adicionou no carrinho, com gatilhos para que ele queira adicionar mais ao carrinho antes de finalizar a compra
Dica: Certifique-se de que a estrutura do checkout não causa confusão no usuário ou que o faça abandonar o processo de pagamento
Desenvolvimento do desafio
Ao realizar o sexto dia do desafio, trabalhei em uma interface de checkout, reunindo todas as informações importantes durante uma compra em uma loja online, como, por exemplo, dados do produto a ser comprado, informações de pagamento, valor a ser pago, incluindo frete, e as políticas de reembolso. Durante o processo, idealizei uma interface que transmitisse confiabilidade e fosse de fácil usabilidade.
Dia 07
Descrição: Desenvolva uma tela para coletar feedback do usuário sobre um app, que o levará para a app store.
Sugestão: Uma tela com um pop-up/modal dentro do app para o usuário avaliar; uma tela dentro da app store para que ele faça a avaliação seguindo o sistema de cinco estrelas e um comentário.
Dica:
Você pode aproveitar algum app que já criou em algum desafio anterior.
Desenvolvimento do desafio
Reutilizei a tela do desafio 03 para desenvolver este desafio, criando um pop-up intuitivo que chamasse a atenção do usuário.
Dia 08
Descrição: Projete uma tela de configurações gerais que poderia se encaixar em qualquer contexto, independente do tipo de aplicativo/site/plataforma.
Sugestão: Pode ser mobile ou desktop. Use toggles e sliders para opções ajustáveis.
Dica: Faça um benchmarking na parte de configurações em todos os apps que você tem e identifique o que eles têm em comum, como: configurações da conta, notificações, privacidade, segurança, alterar para tema claro/escuro, etc.
Desenvolvimento do desafio
Ao realizar o desafio 08, primeiramente fiz uma pesquisa de mercado para entender os padrões de uma tela de configurações. Após essa pesquisa, comecei a desenvolver a tela, incluindo funções como voltar à página anterior, pesquisar configurações e visualizar as principais opções de configuração.
Dia 09
Descrição: Crie uma tela de FAQ para um aplicativo de delivery.
Sugestão: Considere adicionar outras orientações para o caso de o usuário não encontrar o que ele precisava, como contato com o suporte .
Dica: Se um usuário chega na sessão de FAQ, ele quer resolver seu problema rapidamente, portanto considere um layout que seja simples e eficiente, organize as perguntas por categorias, inclua uma barra de busca para facilitar a navegação, etc.
Desenvolvimento do desafio
Ao desenvolver essa tela, busquei métodos de interface que facilitassem a jornada do usuário ao procurar uma resposta para sua pergunta. A tela apresenta as principais perguntas, uma barra de busca e uma área de contato, caso o usuário não encontre o que precisa.
Dia 10
Descrição: Desenvolva uma tela que permita ao usuário explorar diferentes receitas disponíveis no aplicativo, destacando categorias como "Receitas Populares", "Novas Receitas" e "Receitas em Destaque".
Sugestão: Inclua filtros para diferentes tipos de refeições (café da manhã, almoço, jantar, sobremesas) e uma seção para receitas saudáveis ou vegetarianas.
Dica: Utilize imagens atraentes das receitas e informações resumidas, como tempo de preparo e avaliações dos usuários, para incentivar o engajamento.
Desenvolvimento do desafio
Seguindo o briefing, desenvolvi a tela de receitas, idealizando algo desejável e prático. Criei um banner chamativo para atrair a atenção do usuário, além de incluir categorias de comida e receitas populares, com informações sobre o tempo de preparo, avaliações dos usuários e um resumo da receita.
Dia 11
Descrição: Projete uma home para um aplicativo de saúde e uma tela de submenu para um serviço específico (ex: consultas).
Sugestão: A tela principal deve ter ícones claros, enquanto o submenu pode incluir opções detalhadas.
Dica: Você pode fazer na visão do paciente ou do profissional/ consultório, mas atente-se ao tipo de informação necessário em cada caso.
Desenvolvimento do desafio
Decidi desenvolver a tela na visão do paciente, criando categorias de serviços oferecidos pelo aplicativo, utilizando as cores branca e azul, conforme a descrição da tela. Achei importante também incluir um card com os compromissos do dia daquele usuário, além de adicionar cards de clínicas e médicos próximos.
Dia 12
Fluxo de e-commerce (3 Telas)
Descrição: Crie três telas para na visão de um gestor de e-commerce
Tela de adicionar produto: adicionar imagens, tamanhos, categorias, valores, descrição e outras especificações necessárias.
Tela de personalização da loja: Nome, descrição, imagem da logo, banner, endereço, etc.
Tela de transações: Listagem das transações (pagamento concluído, venda cancelada, pagamento pendente, etc), mostrando o total dentro de um período que o usuário possa selecionar.
Sugestão: Use um layout que destaque informações importantes.
Dica: Para atender este público é preciso que as informações sejam claras e os processos sejam rápidos e eficientes.
Desenvolvimento do desafio
Ao desenvolver esse fluxo de e-commerce, primeiramente realizei uma pesquisa de mercado para compreender o nível dos dashboards dos concorrentes. Após concluir essa etapa, comecei a trabalhar na página de produto, onde o gestor poderia editar as informações gerais, imagens, preços e informações adicionais, como tags e tipos de venda. A próxima página a ser desenvolvida foi a de personalização da loja, que possui funcionalidades para alterar o banner, o logo, o endereço e as informações gerais, sendo importante destacar os tamanhos de banner e logo que o gestor pode utilizar. A última etapa foi a de vendas, onde criei uma tabela de transações com as informações mais relevantes, além de filtros para pedidos pagos e pendentes, barra de busca e filtros variados.
Dia 13
Descrição: Desenvolva quatro telas para uma plataforma de jogos onde os usuários podem visualizar e gerenciar suas bibliotecas de jogos.
Tela de início: Sugestões de jogos com base no perfil do usuário, jogos em alta e jogos em promoção.
Tela de detalhes do jogo: Informações detalhadas sobre um jogo específico, incluindo descrição, avaliações, capturas de tela e um botão para iniciar o jogo.
Tela de análise: Gráficos e informações sobre o tempo gasto em geral e em cada jogo, com opções de filtragem por semana, mês e ano.
Tela de conquistas: Visualização das conquistas obtidas no jogo, incluindo progresso em cada uma e um botão para compartilhar nas redes sociais.
Sugestão: Adicione interações simples de hover para destacar sutilmente algum item onde o usuário passar seu mouse.
Dica: Transições entre diferentes telas não precisam ser animações elaboradas, o simples funciona (às vezes o famigerado smart animate gera muita sobrecarga no processamento de informações).
Desenvolvimento do desafio
Ao desenvolver o desafio do dia 13, percebi que talvez fosse uma das telas mais complexas que eu iria criar ao longo do desafio. Decidi, então, estudar a jornada do usuário em aplicativos de jogos já existentes para compreender como esse fluxo deveria funcionar.
Tela de início: Após concluir essa pesquisa e entender quais informações e funcionalidades as telas deveriam conter, comecei a prototipar a página inicial, utilizando banners de jogos que chamassem a atenção do usuário, funcionalidade para visualizar amigos online e cards de jogos em destaque e em promoção.
Tela de detalhes do jogo: Ao trabalhar nessa tela, meu objetivo era tornar o jogo desejável para o usuário, através de imagens, capturas de tela e avaliações dos usuários.
Tela de análise: Ao desenvolver essa etapa, fui precisa em criar dois gráficos: um para o tempo gasto e outro para a média de horas jogadas, juntamente com filtros de data e jogo.
Tela de conquistas: Foquei em criar cards dos jogos do usuário para desenvolver essa tarefa, com cada card exibindo um ícone de conquista que o usuário obteve. Também criei uma seção de análise de conquistas, com filtros e barra de pesquisa
Dia 14
Descrição: Projete quatro telas que mostrem o fluxo de um aplicativo de produtividade.
Tela de tarefa: Criação de uma nova tarefa com opções detalhadas.
Tela de lista: Visualização da lista de tarefas.
Tela de detalhes da tarefa: Informações sobre uma tarefa específica.
Tela de conclusão: Tela que aparece ao marcar uma tarefa como concluída.
Sugestão: Considere fazer um app que seja gamificado, exemplo: ao concluir uma tarefa, o usuário ganha um prêmio ou faz progresso em seu avatar.
Dica:
Pense em como motivar o usuário a concluir tarefas
Desenvolvimento do desafio
Para realizar o penúltimo desafio, busquei uma interface com um estilo único e marcante. Ao desenvolver a tela de tarefas, criei uma listagem simples, onde há uma mudança de cores entre as tarefas concluídas e as não concluídas. Procurei manter a mesma arquitetura nas telas de nova tarefa e detalhes da tarefa, alterando apenas as informações e os inputs. A última tela a ser desenvolvida foi a de conclusão de tarefa, onde criei uma animação com ícones atrativos e uma chamada destacando os pontos conquistados ao concluir a tarefa.
Dia 15
Descrição: Desenvolva um fluxo de usuário em um aplicativo de trivia, onde os usuários podem testar seus conhecimentos.
Tela de login: Simples e clara, com opções de recuperação de senha.
Tela de seleção de conteúdo: Onde o usuário pode selecionar a categoria que deseja jogar (ciências, história, culinária, cultura pop, conhecimentos gerais, etc.)
Tela do jogo: a tela onde o usuário vai responder todas as perguntas relacionadas à categoria selecionada anteriormente.
Tela de falha: Quando o usuário erra as perguntas e falha.
Tela de sucesso: O que o usuário ganha ao acertar todas as perguntas?
Sugestão: Pense em como ajudar o usuário caso ele queira alguma dica que ajude a responder a pergunta atual.
Dica: Lembra do show do milhão (ou nós que estamos muito velhas?)? É uma ótima inspiração.
Desenvolvimento do desafio
Para finalizar o último dia do Uitober, decidi trabalhar em uma interface divertida, com uma proposta de entretenimento. Desenvolvi, primeiramente, a tela de login, por ser uma tela com funcionalidades padrão e de baixo nível de complexidade. Ao criar as telas de seleção de conteúdo, sucesso e falha, busquei incluir ícones coloridos e animações divertidas para prender a atenção do usuário. Ao desenvolver a tela de jogo, achei interessante adicionar uma barra de progresso durante o jogo. A pergunta e as opções de resposta foram elaboradas com tipografia e espaçamentos pensados para não confundir o usuário.
Resoluções
Participar deste desafio foi extremamente enriquecedor! Tive a oportunidade de aprimorar minhas habilidades como UI Designer, trabalhando em telas com objetivos distintos e exclusivos. Além disso, pude expandir meus conhecimentos em prototipação ao desenvolver diferentes tipos de animação.
Resoluções
Participar deste desafio foi extremamente enriquecedor! Tive a oportunidade de aprimorar minhas habilidades como UI Designer, trabalhando em telas com objetivos distintos e exclusivos. Além disso, pude expandir meus conhecimentos em prototipação ao desenvolver diferentes tipos de animação.
Quer saber mais?
Entre em contato comigo para falar sobre design, gatos ou cinema
Converse comigo
Quer saber mais?
Entre em contato comigo para falar sobre design, gatos ou cinema
Converse comigo