# Refactoring UI: Bad About

Channel: Steve Schoger
Video: https://www.youtube.com/watch?v=S6-q5BheEYU
Duration: 14 min
Language: English
Words: 3074
Transcript page: https://viewrankai.com/tools/youtube-transcript/S6-q5BheEYU

---

[0:00] hey guys welcome back to another edition of refactoring UI today we're gonna be taking a look at a submission from Christopher Harris it's a side project he's been working on called bad about and it allows you to quickly share discover the drawbacks post something to help you make a more informed decision be in a product service or another general topic it's pretty cool and right now they're looking for early contributors to help kick-start the community so check it out create an account and make a post if you think here's something we're sharing and today we're going to be looking at the topic page that lists all of the posts

[0:29] this one being for the Apple iPhone 10 now the general layout is off to a decent start but we're gonna see if there's a few things we can do to clean it up without affecting the functionality of the page too much now here's a sketch mock-up I made so let's start with the post section everything's looking a little bit crammed in here so we're gonna do a few things to give everything room to breathe and just to avoid getting distracted by the rest of the page we're gonna pull one of these posts out of the UI to make some tweaks and then bring it back in when we're

[0:55] done so the first thing we're going to do is increase the width of the panel it's pretty tight especially for all the information that's being squeezed in here and it's particularly noticeable on the title some of these titles are pretty long so we definitely want to increase the reading width of them that gives us much more room to work with and we're gonna divide this content in two thirds the first two thirds are going to be for the title of the post and then one third of the space will be used for the voting let's also decrease the size of the font from 20 pixels to 18 pixels so we have a

[1:27] little more room to work with and we're just going to increase the line had a bit for more comfortable reading we're also going to group the meta and action icons together right now they're looking a little bit messy because they're sort of all over the place so we're going to put the user name and date together separating them with a dot for distinction and we're also going to move the icons just to the right of those as well as make them a bit later when you have solid filled high cons like this they don't ever have your weight than the text there beside so I like to make

[1:53] them a bit lighter than the text so they feel more balanced and finally we're going to reduce the size of the icons so visually they look like they're closer to the size of the text and now that we've moved all this information underneath the post title we've freed up some space on the left here so that gives us a little more room to work with now the show more button it's looking a bit clunky and I just want to make a sign note when I was browsing some of the posts I couldn't help but notice that most of the descriptions are the same as the title

[2:20] of the post so there's a pretty good argument to make this description optional but I don't want to focus on that right now I just want to find a way to de-emphasize this a bit and another site that uses this expand to show more button is YouTube and they just do it with the text link which couldn't be clearer and it just looks a lot more subtle so we're gonna apply this to the design and we're just gonna do it inline with the post title that way if the title is compelling enough to read on it feels natural just click it and continue reading now that's looking much more be

[2:51] emphasized and this whole section is looking much more cleaner so let's now move over to the voting options on the right okay so the first thing that stands out is those upload and down vote arrows bring another taking up a lot of horizontal space and I think they'll be a bit easier to use and just look more natural if they're stacked on top of each other we also want to increase the size of the label and the volume because we want the value to be much more scannable and taken in at a glance and in addition to increasing the size of the value we're also going to increase

[3:24] the contrast because it's pretty light right now now even though we increased the size of the labels we still kept them pretty small because they're repeated in every section but we still want them to have a little bit of emphasis so an easy way to achieve that is by making them uppercase now because uppercase letters don't have varied shapes like lowercase letters do words can be a bit hard to read and scan so what I like to do is apply a bit of letter spacing when using uppercase just to give the letters more room to breathe now because the post title is left-aligned I want to make the voting

[4:01] fee left-aligned as well plus when it's centered lay it currently is it sort of feels like it's just floating there and left the lining it sort of anchors to that spot and I'm just gonna bring these down so the labels are sitting on the same base line as the first line of the post title and another thing that's a bit repetitive is this help icon it's shown on every single post along the right-hand side and it contains the same information and I really think this information could be put into the help icon that showcased on the left sidebar so we're going to go ahead and remove

[4:37] that just to free up some additional space and finally we're going to lighten the arrow icons for the same reason we did with the share and report icons and I'm also going to increase the vertical space of the panel just to give it more room to breathe okay so I think that's looking much better now an overall much cleaner so what we're gonna do now is apply this treatment to the rest of the design just to see how much of an impact these little changes made to the overall experience okay so I think this is looking much cleaner and organized and even though we added a lot of vertical spacing to the

[5:16] panels to give them room to breathe we've actually managed to reduce the overall height of the content because we increase the reading width of the post preventing it from excessive wrapping and now that we're using liberal vertical spacing on the post we can probably do without this space between each panel allowing us to tighten it up a bit more now this header it's looking a bit heavy and taking focus away from the posts so we're gonna do emphasize it a bit by giving it the same background color as the posts and invert the text color we're also going to increase the spacing to give it room to breathe and then

[5:46] lighten the title font a bit and this help icon is feeling a little detached so we're just going to move it to the right of the title we're also going to give the load more button the same treatment so this whole section feels like one group and because we're using rounded corners on all of the buttons for a consistency we're going to apply the same corner radius on this panel now we really want this to stand out because it's probably the most important section on the page but right now it's grey on a white background so it feels like it's standing back a bit so we're gonna flip

[6:17] this so the page background is gray and the posts are white we're also going to drop this border and replace it with a box shadow just to make it look a little bit cleaner now in the previous edition of refactoring you I featuring WP pusher I talked about my technique for drop shadows and how I layer multiple shadows do you make them look more natural so we're gonna give this a sealant a treatment okay so I think that's looking much cleaner now so let's move on now when I first landed on this page I didn't realize there were all these additional categories below the facts until I scrolled so we want to make that

[6:53] a bit more obvious and I think a way we can do that is by introducing a vertical navigation on the left side something that would always remain there when you scroll and would just act as anchor links to each section but before we do that I want to clean up some of the information that's already there right now everything is looking a bit messy the title is right aligned everything else is centered there's a lot of inconsistent spacing and since we want to add the vertical navigation here I think it would make sense if we move some of the information that's currently in there to the top of the

[7:25] page so we're gonna put the title on the top left and put the share icon beside it and then we're gonna move the call-to-action to the top right just to balance things out a bit now orange is a really difficult color to work with it's hard to make it look good and accessible with white text because as you can see right now it fails so you could darken it but you're going to end up with something that looks closer to brown so if you're working with a color like this what I like to do is find a lighter alternative and make the text dark instead of light so what I'm using here

[8:01] is a little bit closer to yellow but it still manages to work nicely with the orange used in the logo and instead of making the text grey we're gonna saturate it with the warmer color just to make it feel like it's sort of glued to the button we're also going to simplify the text a bit and because we're using all caps I'm going to once again increase the letter spacing now because I made that button a lighter orange you might be thinking I should give the sign-in button these same treatment but instead I'm actually going to de-emphasize even more and make it look more like a secondary button and

[8:32] the reason for this is I like to have just one primary action on a page having multiple can get a bit confusing but using just one can help you just understand what the purpose of the page is and that's exactly what the new post button is doing for us so we're just gonna give this a one pixel border and invert the text color now this information is looking much more organized and it clears up the left side where we want to introduce our navigation so I'm gonna create a link for each section of this topic and left-aligned it now let's just style this help information by left aligning

[9:04] the icon to bring more attention to it and we'll emphasize the text by italicize it now as you can see I'm aligning everything nicely to a grid and for centered layouts like this I almost always work with the 12 column grid as it's pretty flexible and it makes it really easy to divide your content into multiples of 4 3 & 2 so as you can see the left-side navigation is going to take up a quarter of the page and the main content area is going to take off three-quarters of the page and as I mentioned earlier the content of these panels is going to be divided

[9:32] into thirds so the post title is going to take up two thirds and the voting is going to take up the remaining third okay so let's look at more organized now so let's tell the navigation now because some of the posts might be hidden within the show more expand button at the bottom I thought it would be nice to include the amount of posts within each section in the navigation just to provide a little bit of clarity I also want to highlight the current section we're on so we're gonna do emphasize the other sections by making them a bit lighter and I'm also gonna give the

[10:02] active state a light background color I'm also going to add a hint of orange to the left of this active statement I really like adding hints of color like this as it's a nice and easy way to bring attention to something okay so let's just tighten things up a bit and I'm gonna make this share icon a bit lighter because I forgot to earlier and then we'll move on to the header okay so first let's make the header white like we did with the post section and then give it the same shadow treatment we're also going to make it a bit taller so we can make these buttons

[10:31] a bit bigger and just give them more room to breathe now in my last video which featured WP pusher I talked about how I like to make my inputs great one on a white background as it eliminates the need for borders and it just looks a bit cleaner so we're gonna apply that here now the language on this button is conflicting a bit with the post button on this page which can be a little bit confusing so we're going to make this a little more direct and call what it is and even though this button is a different color than the primary action it still does compete with it a bit so

[10:59] we're gonna tone it down a bit now if we were on the Browse page that list of all the topics I would consider making it the primary action there but in this case you really want that new post button to stand out as much as possible and I'm not really concerned about it getting lost because it's on the top bar sort of grouped with the search intended for discovering topics so they're very much associated with each other and just to give it a little more visual interest and make it look more actionable we're gonna add an icon to the left of it so that's looking much

[11:25] better and again we're just gonna tighten things up a bit and make this menu icon a bit lighter like we did it with every other icon in the page now as I was working on this page I noticed there are a lot of different grades being used I've seen some solid grades as well as a few that were saturated with a bit of blue and I see this sort of thing happening quite a bit and it just looks messy in the design as well as in the code and for this design we could probably get away with using as little as three greys one dark one for primary

[11:53] text use on things like titles posts and values and then a lighter one for secondary text and then maybe a third one for the icons and we're gonna be using true Gray's instead of the cool greys that are saturated with a bit of the balloons that are seen in parts of the design mainly because the primary colour is orange which is a bit warmer of a color and the cool grades don't work as well with that let's also change the typeface right now the design is using Roboto which is a great typeface but maybe we can find something a little more premium and just to experiment

[12:24] let's use two different typefaces so I noticed that the logo type B is using próxima Nova I personally love próxima Nova it's clean versatile and it just looks great on most screens so maybe we can bring that into the rest of the design now one side I like to check out is fonts in muse comm and it's just as the title says it's a gallery of fonts in use and it's great for finding inspiration and great font pairings so since I already decided I want to use proximity Nova I'm going to search for and see if I can find a great pairing for it and immediately I'm presented

[13:00] with a ton of great results and just scrolling through the first page I saw this example called a subtle with a V that uses próxima Nova for the body text and frate stands for the headings and this is a combination I probably wouldn't have considered all my own but seeing it here helped me realize how well the two work together so we're gonna try this combination on the design and just use freight stands for the page title now I really like the bold version of this font it sort of looks fun but professional at the same time and we really want this title to stand out okay so I think that's looking

[13:34] much better I think it really shows how much impact a high quality typeface can make on the overall design and that pretty much wraps everything up I'm just going to make these blue saturated icons gray because I miss them earlier and let's just compare the new design with the original if you want to check out this design and sketch I've included a link to download the files in the description you can also check up the site mad about at bad - about comm and if you enjoyed this video and wanna receive updates for more content like this is publish be sure to sign up at refactoring UI calm

[14:21] [Music]

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt