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.

Para saber mais sobre mim ou meu trabalho: https://riciere.com/

<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.

01 Isometric.png

01A Sign Up Page.png

01B Sign Up App.png

</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.

02 Credit Card Checkout Mock.png

02 Credit Card Checkout.png

</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.

03 LP Exibir.png

03 Landing Page.png

</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.

04b Calc Isom.png

04d Calc Dark Img.png

04c Calc C Img.png

</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.

05 Icon vis a.png

05 Icon vis b.png

05 Icon Mock.png

</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.

06 User Profile img.png

06 User Profile.png

</aside>