#DecDailyUI

Lex Lofthouseloftio@typo.social
2022-12-21

ICYMI I have called time on #DecDailyUI

It was too ambitious for me to finish, and a few things have happened that have forced me to rest.

If you wanna have a go at the challenge at any time, or see what I did, all is on my website ๐Ÿ˜Š

loftio.co.uk/decdailyui/

I found a lot of value in doing this though, which was the whole point!

I think if I was to do it again, I'd maybe create bigger challenges across greater spans of time.

Lex Lofthouseloftio@typo.social
2022-12-16

#DecDailyUI Day 16 โ†’ Icon

A handy guide to Twitter's verification badges now that we've got some more to choose from.

Blue badge: USER VERIFIED โ€“ The OG. But who knows
what the fuck it means now.

Yellow badge: PISS โ€“ or if you sell something?
Maybe your piss.

Brown badge: SHIT โ€“ upgraded piss

Grey badge: GOVERNMENT โ€“ upgraded shit

Glowing badge: SUPER VERIFIED โ€“ glows in the dark

Pink badge: RED โ€“ not pink honest

Orange badge with bitcoin logo: CRYPTOBRO โ€“ Met you in a bar one and won't leave you alone

Mastodon logo: TRAITOR โ€“ Clearly hates free speech

Badge with paintbrush: AI FODDER โ€“ They willingly post art, let's steal it

Blue badge again: VERIFIED โ€“ Thereโ€™s probably still another version of this kicking about somewhere if Iโ€™m being truly honest... This whole place has completely gone to shit and how anyone can trust Musk is completely beyond me. Itโ€™s almost...
Lex Lofthouseloftio@typo.social
2022-12-15

#DecDailyUI Day 15 โ†’ Film

It would be really cool if all my streaming services could be built into one app, now I'm not asking a miracle here where they're all merged, but just a quick switch between them!

Let's be honest here though, I just wanted a chance to redesign Netflix...

A mockup of a multi streaming service, showing Netflix in view with a featured film (Jingle all the way), and a carousel with recently viewed shows and films.
Lex Lofthouseloftio@typo.social
2022-12-14

#DecDailyUI Day 14 โ†’ Switch

Just playing with Figma prototyping today!

A simple switch animation using component variants and smart animate in Figma.

Lex Lofthouseloftio@typo.social
2022-12-13

#DecDailyUI Day 13 โ†’ Recipe

Idea for a recipe website. You can create, search for and save recipes. Keeping it really simple, no life stories, all about the ingredients and the method.

I'm really happy with how this one turned out aesthetically ๐Ÿ˜Ž

Mobile screens for an app website that let's you search, favourite and create recipes. Showcasing a Broccoli and Stilton Soup recipe.
Lex Lofthouseloftio@typo.social
2022-12-12

#DecDailyUI Day 11 โ†’ Product
Catching up on old days

The idea here is to make the call-outs about the product the most prominent. Going against the grain of making the 'add to bag' UI usually the most ๐Ÿšจ๐Ÿšจ๐Ÿšจ area of the UI!

Mockup of product page area for 'Charity Pot' by Lush, with a gallery, title, call-outs, short description, pricing and add to bag UI.
Lex Lofthouseloftio@typo.social
2022-12-12

#DecDailyUI Day 12 โ†’ Hotel

Booking App

I wanted to steer away from using white backgrounds and inject a bit of colour. I feel I might have gone too far, but that's why we're experimenting here ๐Ÿ˜…

Plenty more I'd have done to this but I had fun, and that's what matters.

3 screens showcasing a hotel booking app, the first screen has a search and shows popular destinations. The second screen shows details about a certain hotel including reviews, rooms and images. The third screen shows a booking made and the details on how to change that booking.
Lex Lofthouseloftio@typo.social
2022-12-10

#DecDailyUI Day 10 โ†’ Price

I used Figma's content to create this. I wanted to incorporate some nice gradients to emphasise the differences, and make the free account more muted.

Ok so I took 2 days off, sue me! I will post 8 & 9 as bonuses on quieter days ๐Ÿ˜

3 different price plans, from FREE to Professional (ยฃ12 per editor/month) and Organization (ยฃ45 per editor/month). Based on Figma's pricing structure.
Lex Lofthouseloftio@typo.social
2022-12-07

#DecDailyUI Day 7 โ†’ Search

If you have minimal options available, I wouldn't suggest a dropdown โ€“ show the options all at once instead.

However, if you have too many options for that then a dropdown is probably necessary.

But then if you have a shit tonne of options in a dropdown then surely it should be searchable?

The dropdown dilemma.

A series of states of a dropdown/search combo box

1st state: empty wth a country title
2nd state: box selected showing all dropdown options
3rd state: user has typed 'Be' and the box shows an auto fill to say 'Belarus', the dropdown options show 4 countries starting with 'Be' including 'Belarus', 'Belgium', 'Belize' and 'Benin'
Lex Lofthouseloftio@typo.social
2022-12-06

#DecDailyUI Day 6 โ†’ Music

This was a total self serving exercise today to design a music streaming app. Look, I love you Spotify, but what's with the constant pushing of podcasts and now audiobooks? I just wanna see what songs I've been listening to, find my playlists and search for stuff.

I hope you enjoy the names of my playlists ๐ŸŽถ

A mockup of two app screens for a music streaming app

Showing some recently played songs:
"Glimpse of Us" by Joji.
"Anti-Hero" by Taylor Swift
and "Hand Covers Bruise" by Trent Reznor and Atticus Ross

there is also Playlists
"Captain America would jam to this" and
"Songs that contain actual crack"

There is a sticky menu at the bottom.

The second screen shows a song being played "Glimpse of Us" by Joji. It also shows the playlist it's being played from at the top and play/pause controls.
Lex Lofthouseloftio@typo.social
2022-12-05

#DecDailyUI Day 5 โ†’ Question

Simple FAQ accordion

I was chatting about Pokemon cards to a friend the other day and they were asking about banned cards, of which there are quite a few, especially in Expanded format.

I wanted to display the beautiful visuals of the cards. The current website has a hover effect that I don't love ๐Ÿ˜ฌ

FAQ section on a website

Which Pokรฉmon cards are banned?

+ Standard Format (closed)

- Expanded Format:

Archeops
Black & Whiteโ€”Noble Victories, 67/101
Black & Whiteโ€”Dark Explorers, 110/108

Milotic
XYโ€”Flashfire, 23/106

Shaymin EX
XYโ€”Roaring Skies, 77/108, 77a/108, and 106/108

+ Unlimited Format (closed)
Lex Lofthouseloftio@typo.social
2022-12-04

#DecDailyUI Day 4 โ†’ Menu

I thought I could use the menu prompt to have some fun with a Lobby redesign for #FortniteChapter4 โ€“ keeping it similar to the current structure, but having an option where you could change the lobby theme.

Now, back to the game ๐Ÿ‘‹

Mockup of a Fortnite lobby in a pink theme, with options to change the theme by colour.
Lex Lofthouseloftio@typo.social
2022-12-03

#DecDailyUI Day 3 โ†’ Fitness

An opportunity to try some light - med - dark modes today. I'm not 100% with it, but it has been a fun experiment.

It's Saturday so I don't want to spend it all behind a computer because I need to try and achieve 10k steps today ๐Ÿšถโ€โ™€๏ธ

Let's not try and be perfectionists with this challenge ๐Ÿ˜…

A series of displays showing progress with steps taken that day, distance travelled, moving minutes and calories.

The 3 screens show different progress and modes (light, medium, dark).
Lex Lofthouseloftio@typo.social
2022-12-02

#DecDailyUI Day 2 โ†’ Onboard

Honestly, this is just one I wanted to do from an aesthetic point of view.

I haven't designed anything with 3D objects (I didn't create this one btw) or this kind of black and white outlined feel.

Thought it would be fun for today โœจ

A mockup of a final screen of an app onboarding process
There is a 3D render of a hand doing the ๐Ÿค™ sign.

The text below reads:

You're all set!
...but you can always change stuff later in the setting area.
So, when you're ready ... Let's Go!
Lex Lofthouseloftio@typo.social
2022-12-01

My first post for #DecDailyUI

โœจ Dates โœจ
How would date pickers look if we were visiting other planets?

A switcher between ABY and AD is used to choose dates in the Star Wars system, or ours. It also uses Aurebesh characters because why the hell not? ๐Ÿ˜…

There's also an indication of the calendar system for each planet โ€“ I made most of these up btw.

If you want to take part โ€“ check out the prompts here: loftio.co.uk/decdailyui/
You can do them in any order, and as often as you like!

Lex's mockup of a booking system based on booking a trip to fictional planets such as Coruscant, Gallifrey, Skaro and Krypton.

The booking system allows you to switch between different planetary calendars to make the booking.
Lex Lofthouseloftio@typo.social
2022-11-30

๐Ÿ“ฃ Calling all designers โ€“ or those of you who fancy a challenge

I have created a set of prompts for the #DecDailyUI challenge. An advent of UI design ๐Ÿ˜Š

Participate all month or just for some, it doesn't matter! Just have fun with it ๐ŸŽ‰

Iโ€™ve kept the prompts vague enough for variety here.

Also it doesnโ€™t matter what order you do these in, just choose one each day and tick it off the list ๐Ÿ˜Š

Prompt list: loftio.co.uk/decdailyui/

#UI #UIDesign #DesignChallenge #AdventOfDesign

Prompts for #DecDailyUI challenge:

Recipe
Music
Social Media
Pattern
Film
Search
Hotel
Dates
Filter
Onboard
Question
Fitness
Icon
Notes
Download
Ticket
Empty
404
Invite
Stats
Price
Switch
Product
Menu
Lex Lofthouseloftio@typo.social
2022-11-30

I will be posting a #DecDailyUI design challenge set of prompts later on, if anybody fancies doing an advent of design thing!

#UIDesign #Design #DesignChallenge #AdventOfDesign

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst