Refactoring UI: Transistor

For this edition of Refactoring UI, we take a look at Transistors's integration page, sharing lots of tips on layout and form design.
📘 Refactoring UI - The Book: refactoringui....
🚀 Transistor website: transistor.fm/
🔥 Design tips: / 994601867987619840
🛩 TailwindCSS: tailwindcss.com/
💬 Twitter threads:
st...
st...

[@ngayon]

I don't even do UI Design but I really enjoy your videos. :D

[@ruzicic7]

Same here! :)

[@ajaym6795]

One of the most useful redesign videos I've ever watched. Now I'm going to be useful by listing the main tips: 1. Reducing the max width - "Anything between 960 and 1024 should suffice". (1:14 - 1:38) 2. Use color instead of bold weight to distinguish selected tab. This prevents 'shifting' (3:50 - 4:18) 3. Place simple icons inside a circle to make them appear bigger without looking clunky (6:30 - 6:50) 4. Use a divider to associate a button to a title that its far away from (9:05 - 9:25) 5. Use different background colors instead of borders to create separation without cluttering the interface (9:25 - 10:10) 6. Set button and input field heights between 40 to 48 (10:50 - 11:10) 7. Use a soft background colour with dark text to make alerts that don't hurt the eyes. (12:48 - 13:50) 8. Consider button placements in your form. (14:38 - 15:50)

[@mauronunes7196]

Thanks

[@Chaithzx]

Why did you stop making videos man. I am loving them a lot.

[@MuhammadjavohirSuratov]

Steve, I think a guide on the effective use of Figma will be a great help! Great video!

[@HannahxHero]

So glad you're back have been waiting for a new video, absolutely love your methods and how you explain things! Please don't disappear for so long again 😊

[@joaquingarciaalonso8180]

man, what you do is magic

[@strictoaster]

Hey there! I recently came across your channel. I've been doing interaction design for many years and I find it really interesting to see how other designers make decisions, specially since you are putting in words what I usually do instinctively. If you are taking suggestions on future videos, I'd love to know more on what your workflow is to come up with design systems in new projects (things like setting up your Figma project, laying out colors/fonts, components, how you make changes to an already implemented design system, etc). Keep'em coming! PS: you forgot to add the links in the description :)

[@AnshMehraa]

I bought the book as well as the videos. This is really high quality content. All the best guys!

[@bopraYT]

I bought the book last month - Really good value for the money and I already implemented about 2/3 of the tips and guidelines from the book. For someone like me with no background in design, it is by far the best book out there with a "no fluff" direct approach and guidelines that anyone can implement and get immediate results and great feedback from users.

[@தமிழோன்]

I'm a developer. I always wanted to make my personal projects look good. This video helped me a lot. This convinced me to give your a book a try! Thank you so much!

[@MartinGarnett]

I love your videos - can I suggest you do a few videos that break away from the 'safe UI' design? I see you tend to default back to the tailwind css look, but in a lot of projects that's just not possible due to brand limitations. I often get stuck when trying to either stick closer to my client's branding OR trying to think up new looks for the same UI so they feel like they're getting something more unique to them. I recently had a UI that I produced for a client which had nice space around elements, but they wanted it all squished together and padding reduced MASSIVELY because they wanted more info on the screen at any one time, even after me informing them that people aren't opposed to scrolling. -.-

[@starogre]

this sounds like a lack of research. i wouldn't rely on design videos to cram info on in better ways. perhaps you just need the right competitive products to compare to and the right research to use as evidence of having users scroll a bit more for more pleasing designs

[@KevinBlank]

Dang... Now let us know how much time you spent thinking/experimenting with those design choices before making the video. You make it look so easy, but I would imagine you put more time into the thought process than 17 minutes. Such good content.

[@trashmail8]

As a back end developer who is working together very closely with a front end developer, this is so interesting and useful! Many many thanks!! I really like that you describe *why* you do things and I'm getting really inspired by this... Which also influences back end decisions again. Also love to see the tools you're using. In other words: your channel is my first new subscription in a while! ;)

[@vmohir]

Awesome. It's just one the best videos I've seen in youtube

[@SoeaOu]

Wow, the end result looks cleeeean.

[@strangulator123]

I love watching your videos. I love design (although I'm no UI designer) and believe that sometimes, only subtle changes are required to make a world of difference on a webpage.

[@doctorsphoenix4681]

Please upload more videos you honestly make the best!!

[@craigmillerer]

I love this! So happy to see this pop up in my sub feed again! More of this please 😁

[@leojclarke]

I could watch Steve do this all day... Pleeeeeaaaase do some more of these...!

[@adepurnama1642]

so enjoyable and insightful seeing the design process like this for a beginner like me. really appreciate it!

[@NCRCETOfficial]

Hey Steve, Waiting for more of your work. Please Upload soon :-)

[@michaelwong1908]

Just watching one of you videos made me learn more than me tweaking my UI for all these years! And now that I have your book, some big improvements will come to my UI. You're my best UI teacher.

[@mikeynma]

I have been watching Adam's videos on Tailwind and was wondering where you had gone...also, got your book/videos/fonts/icons and I can highly recommend it to everyone! We are about to redesign our site and this will be the go to guide for it!

[@milililie]

I'm so glad I found your channel! I love when people teach from an example, I think it's the best way to do it.

[@BrunoDeAngelis]

Amazing redesign, extremely informative. Thanks Steve 🔥

[@cilcoposea]

As a developer, this channel brought me AMAZING insights and some ui quick wins. I really hope you're gonna come back! By the way, really really amazing music =)

[@randomizednamme]

Wow! I’m so glad I stumbled on this video. I’m a dev that always really struggles with design on personal projects. This format of taking an old design and improving it, most importantly, the *reason* you are making a change is really helpful.

[@cimolaruan8304]

Just started working as a junior dev a year ago and I hope one day I can work as a ui designer. Great videos! Thanks for sharing.

[@MarekIsProbablyBored]

This is pure gold Mr. Schoger!

[@Homicidalburger]

Still come back to this channel to share with new designers and devs all the time.

[@makingwithsteve]

Love these videos so much. Hope you end up making more of these some day!

[@heycezer]

Been a while since we had any of these gems. It was totally worth it.

[@hrmny_]

You seem to like making things bigger, do you have advice for making compact ui as well? I'm not a big fan of headers that are too big when they just have one row of buttons especially

[@6LayersDeep]

Such a professional presentation, Steve.

[@RyanJeffB]

I always find that your design methodology is super interesting and amazing.

[@tcroz7733]

Love these videos. Would like to see more!

[@nico_guru_medidation_error]

Damn good video! I certainly recognize those "developer UI patterns" even though I've done my fair share of UIs. Having a set-palette certainly helps - with enough variation for the grays and blacks. I also really liked the idea of inverting colors and not using "green red" -pattern which is a definite smell of "developer-UI". All in all, good video which did present me with things I can immediately implement ... as soon as I do some UI work the next time (mostly APIs for me now days).

[@easyluckable]

I like the redesign. However I am not so sure about the treatment of the disconnect button and the KZbin title. I am not sure if most people would know they are clickable buttons. Also do you mind share your Figma color palette file?

[@salamista]

I agree. I think if he did some usability testing he would find that the "buttons" don't do very well.

[@werty1432k]

Hey Steve, Any plans to make more in this series?

[@rachelfang8017]

You did a great job in explaining design rationales! Love it!!

[@marymoopoo]

This was *so* useful to watch

[@Martina-cr9io]

This is amazing, thank you.

[@y_thedreamer95]

Man! I just love this videos, It's awesome that design patterns that you shared with us.

[@AbhimanyuSirothia]

So good to see a new video after so long! 👏🏼😊

[@aldoescobar3570]

Love the before and after!

[@martingalovic9030]

Nice Steve, I truly respect how good you are at making shit look 10x better and how satisfying is it to watch you do that. May I ask you how you recreate HTML/CSS website into Figma, I assume you are lazy like everyone else and just automate it somehow. Thanks!

[@PetersonJoseph]

man, you are GOOD.

[@justthatpm]

Watched the whole thing through. Steve, you rock.

[@uxcoda8806]

Awesome as always Steve. I'm a right aligner but was actually rooting for the buttons to stay left :)

[@BackToBackSWE]

This is awesome!!

[@andrewkiminhwan]

you are a UI GOD wow wow wow steve

[@CodingCatDev]

Oh my gosh I love seeing Figma in action by a pro!

[@AestheTH1C]

Impressive, as always

[@bencelinski523]

Awesome stuff! Hope there will be a lot more of those videos on the channel! All the best Steve :)

[@JordanRolph]

Awesome tips yet again - thanks Steve!

[@prasabdilah2302]

Great content as always, Steve. Thanks

[@hapacooks]

Hi Steve, I've been following your stuff for quite some time. I was wondering if you'd ever consider making your Figma files available to the public to poke around in? :)

[@FreeNextGen]

Love this series man! Hope you keep it going!

[@mattgelfand6746]

Excellent work Steve.

[@dansheetz4285]

Great stuff as always, Steve.

[@electrolyteorb]

Top notch content

[@uisamurai]

Steve we miss you! When are you releasing new videos?

[@AisukiJapan]

Good job! As a web dev I really enjoy your videos!

[@resolutionAgha]

so awesome, thank you so much

[@epnur]

Hello, I've got a few questions if you have time. What is this tool? What are you modifying? SVGs representing UI elements? Or some tool for web designers editing html/css pages "in place"? How do you turn your design changes back into css? Do you hand that over and it becomes the developer's responsibility to reproduce the visuals as you intended them? Great video, thanks!

[@ZhengCheng]

Great tutorial!

[@alborzdesign]

how did you bring the website over to Figma? is that a feature in Figam? I use sketch most of the time. Never seen something like this before.

[@brnktv]

This is not a feature of Figma, but it can import Sketch files. Steve usually makes a copy of the current iteration of a site into whatever design application he's using, so it's mostly done by hand.

[@dreilacadin]

Hi Steve. I love your Refactoring UI and I'm learning a lot. Though can I just ask, how do you export a page and import them in Figma to be able to edit them? Thanks!

[@thanhn.3284]

I heard that he recreated them in figma.

[@Beraksekebon21]

@@thanhn.3284 thats must be alot of work

[@anbiniyar]

Great book and great videos! Thank you for posting this :)

[@Oswee]

This is so well made vid and awesome content!!! Enjoyed a lot!

[@rgb-plays]

Wait. Did you recreate the current status in Figma manually just to "refactor" it?

[@JosselinCuettePlus]

That's not that long :)

[@geeksy2278]

There is a plugin called "HTML to Figma" 😊

[@Dipenparmar12]

Amazing screencast @steveSchoger

[@siddhantjain2402]

Bro, give us more awesome stuff!!!

[@DanianDL]

I love these videos so much, kudos!

[@gilberttorchon1280]

So impressive! Where should a complete beginner in UX/UI start?

[@marceloprado2035]

This video is amazing! Thanks so much for explaining us the "why" of every change. So much to learn!

[@JuanMoisesTorrijos]

Yaaay I love these videos! Please more!

[@kp8752]

You can fix inline element width shifting on weight change in a couple of lines of css

[@phillymayo]

Love it. Keep em coming

[@stenyxx]

He’s back!

[@sebianoti]

Amazing as always

[@bensmith807]

Super insightful!

[@enzoferey]

Thanks for the amazing video ! I was wondering how you go from the website to Figma. Is there a way to crop all elements in layers one by one as Figma elements or do you need to create every element one by one ?

[@NathanLehman]

Wow, best one yet!

[@brnktv]

How did you manage to break the color styles into groups like that in Figma? I also have a color style setup for all the Tailwind colors, but I've not found a way to break them into multiple groups like that. Awesome video, as usual. Thanks!

[@brnktv]

Never mind! I figured it out. For anyone else who was wondering how to do this - go get the Chroma plugin for Figma. It'll tell you everything you need to know. Woot!

[@DrazV2]

Thanks for sharing your knowledge like this

[@garishere]

Mesmerized!

[@anvarnazar6545]

This is Gold.

[@brianstanton423]

love it, great video!

[@doktoren99]

Great work! Thanks :)

[@Jaenotan]

High quality video as always! Thank you. What is your take on the placement of multiple action buttons? For example a "Save" button and an "Archive" button on the same form, which order should the buttons be in? Windows places primary action buttons to the left of other buttons but the natural reading (in western countries) is from left to right, meaning the natural placement of the primary action button is to the right.

[@SteveSchoger]

Here's a Twitter thread where I share a few opinions on button position: twitter.com/steveschoger/status/1159894497066659841?s=20 I mostly talk about next/previous buttons but I think it's applicable to many scenarios

[@Jaenotan]

@@SteveSchoger Thanks! I missed that the thread continued. This is extremly helpful.

[@randomuser66438]

Best notification I got today

[@merelinguist4810]

Have a look at the file Steve is editing here: www.figma.com/file/LoF10pQqpCsxaz2WQ5w2SC/transistor.fm

[@danilobleal]

Hayo Steve! Great and inspiring content. I get very eager to design when seeing your stuff. Though, one little thing that got me confused was the fact that you're using Figma on the browser. It gets kinda tricky to realize when you're looking at the actual design/page and when you're in Figma redesigning it. Just a bit of feedback... Maybe using Figma in the desktop app would've help! Still, thanks for the content dude!

[@niranjannitesh]

When will we can see more videos. I would really appreciate it. I have read Refactoring UI book, but still I like these videos more.

[@shadymohammed3197]

Amazing content!

[@sravaniv1268]

What are semantics in UI? you mention this a lot and I tried to look it up, but couldnot find more info

[@tamrat_assefa]

Damn... So clean!

[@jimmykoli]

Hi Steve, how do you go about editing this video. Like do you do the video first and then the vocals. Or do you just do both the vocals and designing at the same time?

[@michaelbrauner]

I have a different question. What kind of cms do u prefer for creating webprojects?