Boarding Pass
A Boarding Pass.
Mixing a static boarding pass, as well as some live flight notifications. The user can have a glance at the most important information, when she needs it. The live updates helps the user to adapt to the changes that can happen. A cool seat distribution diagram also helps the passenger easily find her seat.
Onboarding
An Onboarding.
A quick onboarding process that explains what the app is about. In this scenario, the three slides introduce a companion app for a music festival. The idea is to let festival goers that they will be able to see what artists will be present, where and when the shows will take place.
A special thanks to Francisco Moreno, Michael Aleo, Paweł Bukowski and Anton Mislawsky on Unsplash for the cool photos!
Search
A Search Bar
This is another DailyUI where I can’t resist coding the thing. The idea was to explore ways to animate a search bar. In this particular scenario, a circular button unrolls to create a search field. The idea was so simple and fun that I had to code it. You’ll see its very simple! Check out the demo.
The main mechanic makes use of the dasharray and dashoffset properties for SVG strokes. In this case, the whole SVG path starts from the end of the text field and comes around the circle. They are not two separate paths! Therefore it makes it easier to animate it using only the two dash properties. The circle is 36px in diameter, which makes a circumference of roughly π36 = 113.097. This is our dasharray value. The length of the text field is exactly 200px. This is our dashoffset value. Something I had to figure out was that the dashoffset is calculated from the bounding box. not from the length of the path. Therefore, the dashoffset needs to be negative, so that the first dasharray starts at -199 (I had to give it a little room to accommodate the imprecision of my circumference) from the starting point.
Now we need some JavaScript to trigger the animation. The input field is self-containing, which means we can’t place elements inside. Therefore a simple CSS solution wasn’t possible (Prove me wrong! lol). Using .blur() and .focus(), I can remove and add classes that will let me interpolate between the two dasharray and dashoffset states. It’s not more complicated than that.
In the end, I still think my code is a little intense for a search box, but the goal was to create a neat little animation. Use it, implement it, modify it, cite me if you want, and keep coding!
Home Monitoring Dashboard
A Home Monitoring Dashboard
Home monitoring can mean different things. In this scenario, it means monitoring different consumption habits related to the home. This includes water usage, electricity usage, temperature control, light control, etc. Combined to this dashboard is the idea that you could be controlling your home more ecologically and efficiently with the help of statistics. You see that your house is too warm, and that your electricity consumption is too high? Try adjusting your thermostat. The app also offer some tailored eco tips to help.
Location Tracker
A Location Tracker
In this scenario, the user is a member of a car sharing service. She is looking for a car to use that is nearby. Selecting a pin on the map leads to more information about that car, its price and its precise location. She can reserve it from there and track it until she finds the car.
Leaderboard
A Leaderboard
This leaderboard displays results from a cross-country skiing race. The result list shows final times, but also intermediate times.
Analytics
An analytics page
In this interface, the user can have a look at his electricity consumption, while comparing it with outside temperature. The data can also be extended in the future, to help predict electricity usage based on past patterns and forecasted weather.
Email Receipt
An email Receipt
Showing some gratitude, but also showing important details in an organized fashion.
Pop-up/Overlay
A popup/Overlay
A popup that lets a user choose what files to download. This could be used to reduce clutter in an interface. For example, I based this dailyui on a typical Internet Archive page, where multiple download formats are available. The circles on each line lets the user select files to download.