Daily UI #023 - Onboarding

onboarding glow mockup

Onboarding screens in a sort of galactic glow style, for an app that "gamifies" learning new things.

glow onboarding screens

Daily UI #022 - Search

Actual Speed

Slow motion

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.

Made in CSS with keyframe animations (with a javascript click trigger).

Daily UI #021 - Home Monitoring Dashboard

021

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.

home monitoring dashboard screen

Daily UI #020 - Location Tracker

020 mockup

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.

run tracker app screen

Daily UI #019 - Leaderboard

leaderboard mockup

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.

leaderboard app screen

Daily UI #018 - Analytics Chart

spend tracking analytics

Had a go at a screen for a budget/spending tracker app. You can display and compare different spending categories by pressing the circle icons. A detailed breakdown of the spending for that category is then displayed below.

spend tracking analytics
spend tracking analytics

Daily UI #017 - Email Receipt

email receipt

Email order receipt, with a realistically styled receipt for the order itemisation.

BB-8 and Companion-Cube-BB-8 Stickers

Bb 8 stickers

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

Bb 8 stickers flat

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.

Bb 8 mockup both

Bleep Bloop

Daily UI #016 - Pop-Up / Overlay

016

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.

Daily UI #015 - On/Off switch

smiley o

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.

Daily UI #014 - Countdown Timer

countdown timer mockup

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.

countdown timer first screen
Setting the timer - slide the bars up and down or tap above or below to increase or decrease the amount of time
countdown timer second screen
Handles disappear once the timer is started
countdown timer third screen
Time bars change height as the time decreases

Daily UI #013 - Direct messaging

direct messaging app

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.

Daily UI #012 - E-Commerce Shop (Single Item)

product sales page for blue chair

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

Daily UI #011 - Flash Message (Error/Success)

error and success messages
Just a quick one today. I'm quite liking the "flat with subtle drop shadows" style. Added in some rustic brush strokes for the tick/cross to add some interest and make it feel less clinical.

Daily UI #010 - Social Share

social share thingy

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.

Daily UI #009 - Music player

Music player interface

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

Daily UI #008 - 404 page

404 page mockup
Thought this might be a cool concept – page being sucked into space through a rip in the browser.

Daily UI #007 - Settings

fitness app settings page mockup

Settings screen for the fitness app from day 6. Designing the icons took the longest here, but I think it was worth it in the end.

fitness app mockup both screens
fitness app settings page

Daily UI #006 - User profile

fitness app user profile mockup

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.

fitness app user profile mockup

Daily UI #005 - App Icon

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.

app icon image
itunes store mockup