UI Challenges

I've subscribed to the daily UI challenges from http://www.dailyui.co/ to improve my UI skills.

Project Link: https://ljesp.github.io/project-ui-challenges/

Note that the focus of these challenges is the UI. Although I sometimes add functionality, some of the results' functionality may be either missing, incomplete, or buggy. Also, not designs aren't fully responsive. Fake brands a designed for some challenges.

Day 1: Sign Up — "Sentiment"

I had this concept for a social app which I put most of my effort on. The sign up section was more of an afterthought. I've created reusable components for this challenge.

Day 2: Credit Card Checkout — "Orbital Skies"

This challenge was difficult for me since there's a lot of ways of implemeting this UI and I'm clueless what the best practices are. I did some research but the outcome is still pretty barebones.

Day 3: Landing Page — "Blind Box"

I watched the film Bird Box and I had this funny idea of a fashion store set in that universe. The outcome is stylish and I enjoyed animating it (not all of it, some parts were painful).

Day 4: Calculator — "Calculatey"

I wanted to create something cute for this challenge and I also coded the calculator's functionality. Near the end I had the idea for the clear/reset numbers animation which I really liked (it is also where I realized the power of react-spring). This was the challenge where I first discovered and implemented the react-textfit package which allows me to make text fit their container as it scale which is very useful. This is the first UI I developed with the mobile-first approach. It made development a bit less painful and I do believe it is the better approach.

Day 5: App Icon — "Trevert"

I wasn't too excited in doing this challenge since I'm not great at making icons specially with the short amount of time. Still, I ended up with a design I'm satisfied with. The concept came from the word "revert" (hence the arrows pointing backwards). I added the T so that it becomes a palindrome. Perhaps it's an app for time travel.

Day 6: User Profile — "Elecy"

In this challenge I was inspired to make a super simple user profile interface. A lot of time was put into making the layout responsive in both mobile orientations. It's the first project I used grids in Figma for design which I believe helped in making a very solid layout (I used rows and columns in previous challenges).

Day 7: Settings (Desktop Only)

For this challenge I wanted to make a modern UI for desktop that's friendly and easy on the eyes. The enter animation was enjoyable to make. The contents of this page came from GitHub's account settings.

Day 8: 404 — "Payapa"

This one is very simple. The main focus in this layout is creating the design elements in pure HTML and CSS. It's my first time coding a design like this. The combination of designing with grids and coding with space and size variables really helped a lot.

Day 9: Music Player — "Granite" (Desktop Only)

This is one of the bigger UIs I've made. The challenge was to make a music player but I designed more of a Spotify-like site. Designing and coding each took a day.

Day 10: Social Share

A simpe social share button. I wasn't able to create the animation I originally intended which requires a more advanced use of React-Spring.

Day 11: Flash Message

Creating this was delightful all throughout. Absolute positioning was heavily used to layout the design elements. This one is fully responsive!

Day 12: E-Commerce Shop (Single Item) — "Ample" (Desktop Only)

Figma Project Link

It took me a couple of days to design this interface with reponsive layouts for different screen size. I only coded the desktop layout of the interface since I realized that it would require more commitment i.e. it need to be a separate project. I would love to develop the entirety of this UI in the future.