Onboarding screens in a sort of galactic glow style, for an app that "gamifies" learning new things.
Please note: the fancy animations don't work on mobile (the search bar is still selectable though).
The magnifying glass "searches out" and draws the search bar into existence, and then pops back down inside the search box to sit where a search icon would normally sit. Something a bit fancy.
Not too much to say about this one. An ipad app to connect to a "smart house." The ipad could be mounted to the wall, or just sit around the living room for people to use. Clicking on each panel would open up more options and statistics for that particular topic.
I tried to keep the color palette is as neutral and unsassuming as possible, in order to avoid clashing with the interior design of the home.
Rounding out my fitness app with a run tracking screen. Scrubbing along the graph at the bottom moves the location marker around the track, so you can see where you were at that point in time and how fast you were going. The bottom panel in designed to slide up (using the hexagon handle), covering the map, but showing more stats about your run, as well as social sharing options or whatever else is relevant.
Trying a leaderboard for a generic app. I liked the idea of having the profile pictures be the faces of little people on top of the podium. I found the coral-red and white color palette quite difficult to work with here. With such a limited palette it's easy for things to look awkward or there not to be enough contrast in areas. I did my best.
Email order receipt, with a realistically styled receipt for the order itemisation.
Not a Daily UI, but I did some quick little sticker designs for BB-8 from the latest star wars movie and wanted to show them here (because BB-8 is just so gosh darn adorable).
While creating the original, it struck me how similar BB-8's pattern was to the pattern on the companion cube from portal. So I had to make a mashup of the two.
Trying a slightly more rustic, hipster style here. Not a style I am normally too fond of, so I found this one a little more difficult.
Decided to do a bit of a cutesy one this time, for a bit of fun.
I was originally going to have the smile upright, but I realised if I had it sideways the smile could just slide from left to right without rotating.
A different take on a countdown timer app. Simply slide the bars up and down to set the timer (the user's selection is reflected numerically up the top). Finer adjustments can be made by tapping above or below each column. When the timer is started, the handles disappear and the columns change height to reflect the remaining time as the timer counts down.
Playing some more with subtle gradients and a minimalistic approach. Colours were inspirated by Google inbox – I think they give a solid and professional feel, while still being bright enough that it feels fun and not too corporate.
I like the idea of a pull out "tray" for the friends list. If you're just talking to one person, it's not there unless you specifically open it. It opens automatically if another friend sends you a new message. If you're talking to multiple people, the people you're talking to appear at the top of the list, with all other friends below, but faded out a little.
Another quick one today. I liked the idea of separating the photo section from the info section. This allows the photo section to enlarge over the top of the info if the user wants to see a larger version of the images. The color dots for choosing variations of the product I thought were quite cute as well (as opposed to the usual dropdown).
A little social share button with the four main social sharing sites. Click and it rotates and opens out to show the four networks which can be clicked to share the content. The "plus" in the centre rorates into a "cross" when the button is open, showing that the button can be closed again by clicking again in the center.
I thought it would also be fun to build a working version of the animation. This one is pure CSS, with a hover trigger instead of a click trigger.
Hover over to see the animation, and select from the dropdown to see the code behind it.
I wanted to design a minimal music player, something that could sit in the corner of your screen and look nice but not get in the way.
When the album changes, the album art rotates towards the user, as if you were flicking through CDs in a record shop or CD walled. The UI controls change to match the current album art. The swoopy patterns at the bottom could be animated as a kind of visualiser too (or remain static as to not be distracting).
User profile for a fitness app. Hexagons and orange. Can't go wrong.
The bottom panel is designed to be able to slide up to view more history and statistics.
It seemed like an obvious choice to make an app icon to go with my calculator app from the previous day. Simple and clean to match the app design.