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.
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.
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.
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).
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.
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.
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).
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.
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.
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.
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.
Creating this was delightful all throughout. Absolute positioning was heavily used to layout the design elements. This one is fully responsive!
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.
This is a typical looking UI designed with accessibility in mind. It's influenced by interfaces of by Messenger and Discord.
Just a countdown timer. No functionality included.
Minimalist on/off switch. I used react-spring for animation once again.
- create-react-app
- react-router-dom โ routing
- styled-components โ styling
- react-spring โ animation
- react-textfit
Unsplash โ stock photos
Google Fonts โ fonts
Font Awesome โ icons
IcoMoon โ icons (SVG)
Material Design โ icons (SVG)
Collect UI โ inspiration
This project was bootstrapped with Create React App.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.