Refactoring UI: Transistor

0:00hey guys welcome back to another edition of refactoring UI in this episode we're going to be taking a look at an example provided by my friend Justin Jackson Justin and his partner John Buddha our building transistor a platform to host all of your podcasts on it's a really great tool to manager shows and grow your audience I actually have a few friends who use transistor for their podcasts and all they have to say is great things about it so I was really happy to take a look at the design to see how it could be improved now overall design wise I think this is off to a

0:32good start especially considering it's just a two-man team and neither of them have a design background so Bravo to them for what they've already produced but I was taking a look at a few pages within their app and the integrations page jumped out at me as a good example to consider making a few tweaks - I thought there are a lot of quick wings on here that would clean this page up and bring it to that next level but one thing I plan to keep in mind when refactoring this page is that it's on a bit of a template that's shared with other pages I really don't want to make

1:03major global changes without considering how they're going to affect other pages so before we get into some of the page level changes let's explore a few of the small global changes so one thing I did notice that could be fixed on all of the pages is the page width at the moment this design has a max width of 11 27 pixels resulting in an excessively long reading width with a long form inputs and a significant amount of wasted space on some of the pages so we're going to reduce the max width anything between 960 in 1024 should suffice okay that helps a bit but in addition to that we

1:41can also bump up the font size to better maximize that space at the moment it looks like most things are using a base font size of 14 pixels so most of the time I work with a base font size of 16 as in 1 bream or M unit is equal to 16 pixels and work around that to define my hierarchy as we increase the overall font size we may want to increase the vertical space between elements so I'm going to bump up the margins and padding on the header section and we'll touch on some of the other elements as we make our way through the page okay another global change we

2:17may want to take a look at is the greys specifically the color gray used for text and background elements so right now there is a little bit of inconsistency with how the greys are being used for example in some cases the greys used in the headings and the background color are saturated with a bit of blue for a cooler look which I encourage but in other cases the gray is used on elements like the paragraph text and borders are blocked with reduced opacity this results in a differently perceived gray depending on the background it sits on so if some text sits on a light gray and slightly

2:54saturated background it's going to look different than the gray that is directly on the white background for this reason I like to have a fixed pallet of cell colors to choose from something I defined up front I like to work with nine to ten Gray's this gives me enough range so I can use them for both light and dark mode lately I've been relying on the greys and many other colors that come with kale when CSS is default palette now I recognize that I am totally biased as I picked these colors but I spent a ton of time picking them and using them I find they are great for

3:29a starting point and I think it's worth noting that the gray 600 to 900 are accessible on white and Grey's 100 to 600 are accessible on black so I'm going to apply these Gray's to the transistor UI and these Gray's by default are saturated with a bit of blue like some of the current transistor Gray's okay so the last global change we're going to make is a subtle one in the horizontal navigation at the top so at the moment it's using a combination of color and weight to put emphasis on the active State this does certainly helped you highlight it a bit but one of the

4:04problems with using a bolder way to highlight the active state is that it causes subtle shifting when navigating from one page to the next so to avoid this I would just give every link the same weight and use color alone to emphasize the active state okay so now that we've made a few global changes that aren't overly destructive let's what can be done to this page itself okay so even though we reduce the max width of the page and increase the base font size the reading width on this page description text is of still a little bit too much we could simply reduce that by making this text block smaller but

4:40that does look a bit odd when it doesn't share the same width as every other container on the page so another way to decrease the reading width is by increasing the size of the text so we're going to bump that up to 18 pixels now unfortunately this results in the text stealing a lot of attention because as the size increases it takes up more of the surface area resulting in increased contrast so we can combat that by reducing the color contrast to a lighter but still accessible gray let's also take a look at how we can clean up the appearance of the content in these panels you know like right now nothing

5:19really lines up making it tricky to scan a lot of common elements like inputs and buttons are positioned in different places on the y-axis preventing an efficient flow now since all these panels share a lot of the same type of content I want to try to fix one and carry those changes where it can to the other panels so to start I want to take a look at a more complex one and see how those changes are transferable so taking a quick look at this I would say that the YouTube auto posting panel has the most complex layout I figure if I can solve the problems on this one I

5:56should be able to easily solve the problems on the rest so let's start with that one way to clean up a design and make it look ten times better is alignment specifically alignment of text and right now this icon is really throwing everything off but it's also a nice visual cue making it more scannable it will be nice to actually bring more attention to it so to do that we're going to indent all the text so it's on the same scanline and that helps a bit but I think it would be nice to draw even more attention to this icon so we could do that by increasing the size but I find

6:33blowing up simple icons like this always looks clunky and unprofessional so a great way to make the icon appear larger without actually making it bigger is to contain it in a shape like a circle not only does this draw more attention to it but it also unifies the icon with other section icons nicely and since we bumped up the relative size of the body text we're going to increase the size of the title this also makes it so it's more proportionate to the icon that we just modified to the left and since we increase the font size of all of these elements much like we did with the

7:08elements in the header we're going to increase the line Heights margins and padding so they are more proportionate to the font size next let's take a look at the connected channel information so we have two buttons displayed here wait that's not a button that's a label and a title hmm okay well let's make it more apparent that this is in fact not a button so first we're going to remove the button styling and give this more of a title treatment by increasing the size now this label is still useful but we're going to de-emphasize it with size and weight and color so it's not taking away

7:47from the title itself now one thing that I almost overlooked is that this title is in fact a text link that navigates to the connected YouTube channel but it's not super clear on the old design nor the new design we're working on so we're going to add an icon that is commonly used to indicate when something is an external link and this title it's pretty important arguably more important than the title of this section but right now it's competing for attention because they are both using a large and bold font so let's reduce the weight of this section title to balance things out a bit okay that's looking much cleaner now

8:24this disconnect button might be a tad too attention grabbing for such a high severity action a common problem I see with developer designs is that they always make destructive actions read but semantics should be a second consideration if the destructive action isn't the primary action on the page they might be better to give it a secondary or tertiary button treatment so in this case we're going to de-emphasize it by changing the color to a soft gray now we still want to appear clickable so we're going to increase the weight and put an icon I found on material icons next to it this manages to make it a bit more subtle while still

9:03appearing clickable finally let's distance it from the title to avoid accidental disconnection by moving it to the far right now making this change helps to give it a comfortable proximity from the title link but it now feels like it's just floating there so we're going to add a light border to better associate it with the title okay so the addition of this border is nice because it plays an important role of associating the elements but it begins to clutter the design especially because there is another border dividing the page description and the channel title too many borders like this can make a design look busy but a great way to create

9:41separation between two elements is to give adjacent elements slightly different background colors so we're going to make this bottom section a subtle off-white as well as increase the space to define the sections a bit better additionally I'm going to remove the border around this section container it already has a box shot on it and usually that with a combination of a darker background is enough to create distinction eliminating the need for a border okay moving on so as you can see here we have a preview card to the left and the channel settings on the right that might be fine for this but if you go further up the page to the mailing

10:20list section you'll see that it has an input of its own so it would be nice to keep all the form elements aligned as you scroll down the page to give you a nice flow so to do that we're going to flip the preview card and the inputs let's also maximize the space by splitting these elements 50/50 within the allocated space now we've been talking a lot about increasing the overall space to the layout making it more proportion to the font size as well as give the elements additional room to breathe but we also need to consider this for individual components like inputs and buttons so

10:56we're going to bump up the height of those I like to be generous with elements like this somewhere between an overall height of 40 and 48 pixels should suffice I'm also going to remove the uppercase formatting on these labels to make them a bit more legible additionally I'm going to make the border two pixels so it shares the same width as borders used elsewhere on the design this ultimately makes it look darker and heavier so we're also going to soften the color to balance it out with the surrounding design okay next thing we want to take a look at are these button colors in terms of

11:30semantics I suppose this might seem like the right approach with the green Save button indicating success in the gray button as a secondary treatment but as we already discussed semantics are secondary to hierarchy and hierarchy why is this image upload button stands out way more than the Save button furthermore the white text on the screen button isn't accessible I usually like to use my brain color for primary actions now in this case the brain color is yellow which is often associated with warning but transistor also heavily uses a dark gray something that's really close to black within their brain palette and I think dark gray is

12:09perfectly acceptable to use for primary actions I often resort to that when my brain colors are associated with disruptive options like red or yellow and to give the image button a secondary treatment we're going to invert it so use a soft gray for the background and a dark color for the icon and text let's also move this help text over so it's associated with the action so users can easily find it when they're about to upload an image okay and this preview card is looking pretty good but I think we should add a label to it so it's a bit clearer what we're looking at we're almost done with this section but

12:48we still have this bottom message to deal with now this message is saying that it initiated the posting of all the previous episodes to youtube and then it just stays there which might be a bit unnecessary after everything is uploaded it might be more useful if this was emphasized a bit more once the channel first gets connected and then disappears after all the episodes are processed so to make it pop more we're going to move it below the channel title and contain it in a neutral colored alert style now I want to use a neutral color style because it's not necessarily a positive or a negative alert now one thing that

13:26I've observed is that most developers would style their alert messages using a dark background with white text but sometimes it's hard to work with those colors and still achieve accessible contrast ratios I find a nice way to treat these alerts is to make the background a soft color with dark text this is easy to accomplish by using the predefined palette like we're doing with the greys so in this case once again I'm going to use the Tailwind CSS defaults finally let's take a look at this completion status located on the top left so I really like this treatment but like the white text on a green button

14:04this check has the same problem of being difficult to see so once again we're going to invert this using a letter green for the background and a dark green for the check okay so I think this section is looking pretty good it's looking much cleaner so let's apply some of these changes to the other sections so just to recap we're going to align the text elements and make space for the icon that we're going to contain on a circle we're also going to applaud the same text and spacing treatments and redesign this title disconnect section okay we're getting really close here now on this mailing list section we have

14:38another Save button now the first thing we want to do is style it so it's consistent with the other primary button on the page but I also want to reconsider the position of it now even on the bottom here my first instinct was to right align the button that's right typically put buttons forms and I think it's important to always have the form submit buttons in the same position I had a previous employer of mine we did some testing on both the left and the right and concluded that it didn't matter where the button was positioned as long as it's in the same spot everywhere within

15:14the application but I was still unsure of this so I took the conversation to Twitter and most of the replies said to right align the button which I almost proceeded with but then I was informed that right aligning the button post some accessibility issues now this comment made some sense to me but I would have to do some additional research before I agreed this is the best solution in all scenarios this would also be a global change and I would hate to commit to something like this without confirming all the cases but for the sake of this video I went with my gut and decided to left the line

15:47the button so it sits below the forums regardless I think it's worth visiting this thread on Twitter as well as a few others that I brought up during the creation of this video as there's a really great discussion surrounding this topic so I'll be sure to link these below in the description finally I'm just going to update the style of this Spotify link so it's consistent with every other link on this page and that pretty much wraps everything up so let's just compare our starting point with the design we landed on [Music] okay so thanks for checking out the video I hope you liked it I just wanted

16:34to share one thing so recently I launched an e-book and video course with my friend Adam Lavin it's pretty much everything we know about designing for the web packed into a single comprehensive resource it comes with 50 chapters of no fluff content three fast paced videos packed with tips and how to apply them to real-world examples the complete package also comes with great resources including beautiful color palettes font recommendations component gallery if you're looking for layout ideas and need some inspiration plus there's a set of 200 icons that you can customize for your projects we're really proud of this package it's something we wish existed when we were just starting

17:14out so if you want to learn how to design beautiful UIs I think it's definitely worth checking out and it's also a great way to support the YouTube channel if you like these videos so you can find a link for that in the description so thanks again for checking out the video and we'll see you again real soon [Music]