Venho estudando conceitos e metodologias de UX há algum tempo, então resolvi iniciar um desafio de UI diário (https://www.dailyui.co/) para ajudar a aprimorar minhas habilidades técnicas e praticar conceitos importantes de interface do usuário, tais como tipografia, hierarquia, cor, espaçamento e grids, composição, arquitetura de informação, etc.
Sei que um desafio primariamente visual como este não leva em conta todos os estágios necessários para que um produto funcione plenamente como em um projeto real, mas o objetivo neste cenário é aprimorar o uso de ferramentas de prototipação como o Figma e soltar a criatividade, por isso, tentarei ser o mais abrangente e diverso possível, criando algumas telas com texto em inglês, outros em português, algumas para celular, outras para web ou mesmo aplicativos para desktop.
<aside> <img src="/icons/send-to_lightgray.svg" alt="/icons/send-to_lightgray.svg" width="40px" /> 01 - Sign Up
“Create a sign up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can image.”
Para este primeiro desafio optei por imaginar uma tela com responsividade, para ser acessada tanto por computador quanto por smartphone.
</aside>
<aside> <img src="/icons/send-to_lightgray.svg" alt="/icons/send-to_lightgray.svg" width="40px" /> 02 - Credit Card Checkout
“Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.”
Neste desafio pensei em um checkout fácil para um produto único, com um card descritivo simples que contempla algumas informações e imagens simples em carrossel.
</aside>
<aside> <img src="/icons/send-to_lightgray.svg" alt="/icons/send-to_lightgray.svg" width="40px" /> 03 - Landing Page
“What's the main focus? Is it for a book, an album, a mobile app, a product? Consider important landing page elements (call-to-actions, clarity, etc.)”
Neste terceiro dia do desafio, estruturei uma landing page para uma empresa que atua com Saas. Segmentei em cores suaves para o background, uma cor de destaque no botão para o orientar o CTA e um formulário simples para contato.
</aside>
<aside> <img src="/icons/send-to_lightgray.svg" alt="/icons/send-to_lightgray.svg" width="40px" /> 04 - Calculator
“Design a calculator. Standard, scientific, or specialty calculator for something such as a mortgage? Is it for a phone, a tablet, a web app?”
Para este desafio construí uma calculadora convencional, simples e com botões redondos no estilo do ios atual. Aproveitei para criá-la tanto em light mode quanto em dark mode.
</aside>
<aside> <img src="/icons/send-to_lightgray.svg" alt="/icons/send-to_lightgray.svg" width="40px" /> 05 - App Icon
“Design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance and does it stand out when put on your home screen alongside other apps?”
Hoje foi dia de imaginar um ícone para um app, comecei com uma logo simples e alternei em duas versões, uma com predominância do degrade como fundo e outro de forma inversa.
</aside>
<aside> 💡 06 - User Profile
Design a user profile and be mindful of the most important data, names, imagery, placement, etc. Is it for a serious profile? A social profile?
Seguindo com os desafios, desta vez o objetivo foi criar um perfil de usuário. Pensei em campos para os dados tradicionais, uma visualização da foto de perfil com opacidade delimitando o que será visível e algumas seções como favoritos, compartilhamento, etc.
</aside>