smorbee
patreon
Twitter UI concept behind the scenes!
🕑 Added 2021-07-01 21:06:39 +0000 UTCHello! This is a little look behind the scenes at a little project I threw together a few days ago.
This has been an idea I've wanted to do for a bit now, starting from when I was frustrated one night at Twitter's current UI, especially on iPad, being really bad.
Combined with my constant wish for more skeuomorphic elements in interface design, I took it upon myself to concept out what i felt like would be my "ideal" look for twitter, and here we are!
I went into it a little bit on twitter, but my main focus with this was having any user interacted elements be 3D and stand out from the otherwise flat-shaded backgrounds. The most obvious element of this is the shelf of items on the left corresponding to twitters sidebar, featuring some admittedly very classic ios-inspired designs, but also shows up on tweet interactions and other buttons more subtly.
While I am pretty happy with a lot of the elements here, there is one element of this I feel I could have done better but i kinda rushed through it last minute as it was getting late, and that this tabbed menu shown here.
My idea was that the un-clicked tab would be curved upwards to give it a more 3D look indicating it can be pressed to switch to it, and I think the idea works in theory still, but my execution of it here I feel could have been done better ultimately. Ah well.
All that aside, lets get into what its like behind the scenes.
Since this was all designed around an orthographic perspective, the Z axis had to be played around with a bit for the sake of lighting looking right.
This shelf really is all kinds of messed up from any other view but from the very front. The perspective on the walls is created by hand by shrinking the inside as it moves back, objects are placed seemingly randomly on the Z axis, there's a copy of the envelope icon behind it. and that birdhouse is looking like pinnocchio. What gives?
Well, it all starts with the lighting. To get the lighting just right for what I wanted, I used 2 different light sources. One was used to create shadows going straight back and give a general overall light to everything, and the other sits at a 60 degree angle and it only used for specular hightlights on the 3d objects, nothing else. This means all 3d elements have a uniform look in the way they are rendered that stands out from the flat elements, almost like they don't belong with the rest of the world on screen. Because of this, some creative liberties had to be taken with perspective and shadows. I wanted to minimize shadows casting on the sides of the shelf, so objects that appear larger in the window had to moved in a way that their shadow remained smaller and softer. And with the envelope, a copy of it was made specifically to cast a shadow for it so the shadow would be smaller than the object actually is. (the copy is invisible to the camera in render view).
So the birdhouse looks the way it does simply because i wanted shadows to cast from the roof and the pillar. Also the pillar is angled down just slightly to give it the slight perspective look at the top.
Behind everything is a background wallpaper run through a blurring glass. It should look familiar to those that have followed @smorbee for a while!
My idea behind it was inspired by how Windows 11 handles transparency, using a material that always shows your wallpaper no matter what is behind the window. Specifically with this I was imagining an alternate interface for iPad apps where the very last background material shows your wallpaper through glass like that, because that would be really cool.
(Here's the dark mode version.)
(And these are the nodes I used to create the glass look! I used a mix of glass and principled to let it catch shadows more visibly and dampen the colors slightly.)
Speaking of materials, I also did some playing with that on the 3D elements to give them a more cartoony look. This list icon uses very rough metallic to give deeper shading than the lighting would otherwise provide, and I think it looks particularly excellent.
And to finish off, here's some close up shots of other areas of the scene!
Thanks for reading!
