Daily UI #043 - Food/Drink menu

043 mockup

Decided to do something a little bit fun with this one. Frozen yoghurt places always seem to have this sort of over the top, quirky style, so I had a go at creating a UI to match.

frozen yoghurt menu app screen

Daily UI #042 - To do list

042 mockup
to do list screen

A super simple, minimalist to-do app. A lot of to-do list apps are packed with features - different categories, multiple lists, due dates, recurring tasks etc. but sometimes you just want something simple that displays a basic list of all the things you need to do.

As a subtle way of motivating and reminding you to do tasks, the background of each list item gradually becomes darker the longer it has been on the list. This way you can see at a glance which items you've been putting off or neglecting to do.

Daily UI #041 - Workout Tracker

workout tracker app
workout tracker app screen

Since I'd already done a "run tracker" app, I designed an app for doing set workout routines. Up the top is your current set, with the future sets in a list down the screen. I imagine you'd be able to choose different routines (such as ab workout or weight loss workout). Tapping more information pops up information about the excercise (including diagrams). You can also tap up the top to reset or skip a set.

I've never used a gradient this obvious before, but since gradients seem to be making a comeback in UI design I wanted to see how it worked.

Daily UI #040 - Recipe

Strawberry parfait mobile recipe app
recipe app mockup rose gold iphone

I use my phone a lot for cooking. The most irratating thing for me is having to switch from the directions tab to the ingredients tab whenever I need to know how much of an ingredient to add. It's tedious to have to re-find your spot each time you switch tabs, particularly if there are a lot of ingredients.

So, in this design, all ingredients in the directions section are highlighted in a different color. This allows you to quickly see the ingredients involved in each step (very useful). Tapping on each ingredient pops up with exactly how much of that ingredient you need – no need to switch back to the ingredients tab every time.

You can also swipe left to hide a step once you're finished with it, reducing clutter on your screen and making it easy to immediately see what step you're up to when you come back to the app.

recipe app screen 1
recipe app screen 2
recipe app screen 3
recipe app screen 4
recipe app mockup

Daily UI #039 - Testimonials

Testimonials screen mockup

Don't have too much to say about this one, just a simple testomonials block for web. The speech bubble shapes curve around the peoples' pictures.

testimonials screen

Daily UI #038 - Calendar

calendar mockup
calendar transition animation

A simple minimalist calendar app. Days with events on them are circled, with the number of dots around each one representing the number of events on that day.

The list view shows all the events in a given month, so you can see all the events you have coming up.

Did a nifty little animation in after effects to show the transition from the calendar view to the list view. Having the days fly across gives users a link between the two screens and gives a feeling of consistency.

Also discovered a useful "intertial bounce" after effects expression that you can see when the calendar events slide in from the right. It adds a little bounce effect to elements entering in, and uses some cute physics so that the bounce effect adjusts depending on the velocity at which the element was moving. You can adjust the amplitude, frequency, damping/decay of the oscillation to make the bounce as subtle or obvious as you need. I chose a pretty subtle one to avoid it looking like some crazy 90s powerpoint presentaiton.

amp = .1;
freq = 2.0;
decay = 2.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0 && t < 1){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}

Daily UI #037 - Weather

weather app mockup
weather app three screens
weather app iphone 6 mockup

I've seen a lot of this "overlapping, wiggly, gradienty, graphs" style, and I thought it would work really well for a weather app.

The top wiggly graph is the hourly temperature forecast. Tapping/dragging over the graph shows detailed information for each data point. Drips icons show when there is a chance of rain, and are always visible.

Bottom graph is the daily temperature forecast (corresponding to the individual days below). Days show icons for the weather on each day, and the background of each day showing the overall chance of rain on that day.

Scrolling down reveals more information for that day - sunrise/sunset etc. as well as a few buttons.

The colours of the UI correspond to the weather at the time - for example the light blue for fine/sunny weather, grey/green for storms or rain, purple/orange at night.

stormy 1
fine 1
night 1
stormy 2
fine 2
night 2

Daily UI #036 - Special offer

daily ui special offer

Playing with some new photo assets from qeaql.com. They're really great, you can change the colours of all the objects and they all have transparent backgrounds. Anyway, had fun playing around with them. Ended up having a bit of an ikea vibe.

Daily UI #035 - Blog post

035 mockup

Something in a bit more of a girly style today, again it's a style that I'm not really used to working in. Also some new colours – muted browns. I quite like the font here too - libre baskerville.

The header image doubles as an image carousel for posts with multiple photos - with arrow handles which pop out on hover (below).

blog post screen 2
blog post screen 2

Daily UI #034 - Car Interface

car interface screens

Maybe a bit of a stretch to call this a "car interface," but I thought this would make a good apple watch app, and I thought it would be fun to design for apple watch since I've never done it before. It's strange designing a for something I've never owned or properly used before, but apple has some pretty good guidelines which explain a lot of the intricacies behind the standard UI.

From left to right: Notifications screen to let you know if you've left your headlights on. App screen showing how much fuel you have left and the ability to remotely lock/unlock your car from your watch. App screen with tire pressures, with an indication of any tires with pressures that might be too high or low.

watch mockup
034 mockup 3
034 mockup 3

Loading animation

See the Pen NNKEjj by Rachael (@rachaek) on CodePen.

Gooey effect loading animation. Uses a method similar to this tutorial to create the gooey/sticky effect with a combination of blur and contrast svg filters. There are more versions I made while playing around on codepen.

The effect probably doesn't work in safari, I don't think it has good support for svg filters. Definitely works in Chrome and FF though.

Daily UI #033 - Customize product

customize t-shirt

A little mobile screen for customising a t-shirt. Clean and simple, nothing too exciting. Tapping the t-shirt slides down the bottom panel so that the full t-shirt image can be seen.

Used some new fonts - Proxima Nova for the main text, Intro for the heading and "add to cart" button.

t-shirt customization screen
t-shirt customization screen

Daily UI #031 - File upload

drag to upload file upload modal

A minimal file upload modal. One file at a time, drag and drop to upload, circular progress indicator.

concept sketches
upload files, first state upload files, second state upload files, third state

Daily UI #030 - Pricing

pricing tables

Some basic pricing tables. Something clean and simple, highlightling a particular plan yet letting the user easily compare between them.

I added some subtle gear patterns to the background. One gear for the cheapest, up to three gears for the most expensive. I thought this was a somewhat cute/interesting idea, although it does distract from the text a little, so it's a tradeoff there.

sketches of pricing table ideas

Daily UI #029 - Map

friend map mockup

An idea for an app that my brother's been working on – an app that will tell you if your friends are in a certain predefined "zone" such as at work, at home, or at uni. Less stalkerish than apps that tell you exactly where your friends are, since you'll only know where they are if they are in one of the zones, otherwise you have no idea.

The style of the map may be completely unfeasible. Pretty sure you're usually stuck with the google or apple map style unless you want to do a lot of work that change that. But I figured I'd design to an "ideal" for this one and not worry about the real world.

friend map screen

Daily UI #028 - Contact us

contact us form mockup

A simple contact us form with a flashy (maybe slightly impractical) "submission confirmation" animation. I liked the idea of having the map on the side, forming a background. Clicking the map would slide the contact us form off to the side, to expose more of the map and provide address details.

When the user clicks submit the form shrinks to become a piece of paper that gets stacked in an inbox.

Initial animation storyboard.

028 storyboard

CSS animation

Daily UI #027 - Dropdown

027

A few quick dropdown menu variations – a list, icon boxes, or a compact version suited for mobile devices.

Daily UI #026 - Subscribe

subscribe to the newsletter
first screen
second screen
third screen

Subscribe boxes are fairly standard. I could have easily mocked up a couple of fields with a "subscribe to our newsletter" heading and a submit button. But I wanted to do something a bit different. I thought it would be cute to have the popover window in the shape of a letter, with the user filling out their address details on the front. Clicking "send" then sends off the letter, which the user will receive in a few minutes as a "confirm your subscription" email.

I was initially worried about the strange placement of the "send" button, since it's not particularly intuitively placed for a user. I think a lot of users are used to hitting enter to submit a form anyway. But I don't know, moving it to the bottom right might still be beneficial for usability.

subscribe sketch

Daily UI #025 - TV app

025 mockup

This was a tricky one. I'm not used to designing for TVs, it's a very different platform. I decided to do a recipe app, with videos for each recipe where you can follow along.

Things I realised from working on this:

  • People are likely to be far away from the screen – UI elements and text must be big
  • There's always something selected, unlike mobile apps or web. It should be obvious which object is selected, which objects are selectable, and how to get between them
  • Navigation has to be simple, preferably grid-based since interaction is through a remote
recipe tv app screen

Daily UI #024 - Boarding Pass

boarding pass screen design

The main goal for this design was to make the necessary information as bold and easy to read as possible. If you're handing your bording pass to the airline staff, or just looking at it yourself, you don't want to be squinting to try to look at tiny type, you want it bold and in your face.

So everything is in all-caps, with a narrow bold typeface highlighting the important features.

process sketches
boarding pass screen
24 mockup 2