Refactoring UI: Tuple

0:00hey guys welcome back to another edition of refactoring UI today we're gonna be taking a look at a submission for my friend Ben Ornstein Ben along with his friends Joel Sutherland and Spencer Dixon are starting a new project called tuple which is a screen sharing tool made specifically for pair programming and to kick things off they created this landing page to generate some interest this is a project that I'm really excited about using myself so I was really happy to help melt with this now when I first saw this site I thought it looked a bit familiar wait a second this looks just like Adam Levine's advanced

0:34view components design course site for shame Ben that's okay though to be honest I did the same thing when I started designing copying designs you like is a great way to learn and start paying attention to details that you wouldn't have noticed otherwise but with that said we're gonna do a few things to both deviate from this design and find a few ways to improve it so let's dive in so the first thing we're going to take a look at is the placement of this signup form actually like this treatment of the offset panel and box-shadow it's a great way to make important content like this

1:04pop off the page however for this particular design it's interfering with the content a bit see we have this really strong headline here it really pulls the reader in and can compel them to read on but before they get a chance to they're being encouraged to sign up for something and they don't really know what it is yet it's not until the body that it begins to go into more detail about the project so we're going to move this signup section below this first block of text that goes into that detail about the project that helps a bit but the background color in the header is still dividing

1:35the headline and the body so we're going to remove that and invert the text so it feels more like an article okay now I appreciate that the text is constrained here a common mistake that I see developers make is paragraphs filling the entire width of the page container but right now it's pretty narrow especially for the size of the font they're using for a comfortable reading with it's recommended to have 70 to 80 characters on a line so we're actually going to open this up a bit now because we removed the background color that divided the titles and the body into two different sections the titles centre

2:10alignment is feeling a bit awkward so we're going to left align it with the body to sort of glue them together and make it feel like a more natural transition okay great now this is a really strong headline but at the moment the typography isn't doing a really great job at delivering it it sort of feels small and unup enya nated so we're going to increase the size of it we're also going to get rid of the bold weight on the second line of text to give the main headline a little more emphasis and [Music] this design is using the system font stack or more specifically as you see

2:47here San Francisco which is Apple's operating system phone San Francisco comes in a variety of weights including heavy and black which are much more louder and expressive especially for headlines like this so we're going to use black for this headline to bring a little more energy to it okay so the background-color that created the header section that we removed earlier did add a lot of liveliness to the page so we want to try and reintroduce it by adding hints of the color now a trick I often like to do is add thick accent borders in this case across the top of the page it's just a

3:24quick way to bring life to an otherwise bland looking design now up until this point touple hasn't really defined their visual identity they just stole the color from Adams of advanced view core site so let's explore some new color options picking colors can be tricky especially when you're blindly picking from a color picker so one thing I like to do is limit my palate now one way you can do that is by going to dribbles color page I'll be sure to leave a link in the description there they have a small ish selection of colors and by selecting one of the colors you're provided with high quality examples you

4:02can also filter the results by showing the most popular shots and it's great because all the examples are in context of a real app that was designed by a professional designer so for this site I'm gonna try finding something close to this indigo color and I think this example looks pretty good so we're just gonna roll with it okay before we go any further I recently had the pleasure of designing tuples logo so we're going to put it in the design at the top above the headline okay let's take a closer look at the styling of the text here so right now they've bolded a lot of points sort of

4:39highlighting the features it's an interesting idea but because they're trying to make so much standout barely anything stands out at all so we're going to remove the bolded text they highlighted the features down a bit further anyway and we'll be addressing that shortly now we still want to give some words emphasis but in a different way one thing I like to do is italicize certain words to give the text more of a conversational tone the trick here is to read your text very carefully even out loud if you have to and listen to yourself as you read it to see if certain words jump out for example for

5:15the headline here I may read it as remember when slack stole screen hero from us see how I put emphasis on the word stole by tala sizing it it helps the reader use a similar tone there are a few instances where these opportunities come up in the text so we're gonna go through it and do the same thing I just add with the headline okay because this now reads much more like an article we're gonna try a few things to make it feel like an article one thing that I see quite a bit in print design and every now and then in websites is the use of drop caps you do

5:50this by taking the first letter of an article and letting it sneak on to the other lines of text below it this is a great way to lead into an article and just make it a bit more interesting in this case I'm going to contain it in a circle using our new brand color just to add a bit of liveliness to it in addition to the drop cap another technique that you'll often see in print design is the use of small caps on the first few words some fonts actually have small caps built in but you can also fake it by reducing the font size so the

6:22top of the caps aligns with the top of the lowercase letters at the regular size I would also up the weight to the next available options so it feels much more balanced and give it a bit of letter spacing so it's easier to read okay this is really coming along so let's move on to our signup form first let's update the color of this button to match our new color and because this is no longer overlapping anything we're going to remove the container and now that we've opened up the width of the page we're going to make this an input group instead of two different components now

7:00because this is no longer a standalone signup form and we have the paragraph leading into it I encourage the guys to make this text sound a little more human and make it feel more attached to the text above it so we're going to replace this with this new sentence that's been provided we're also going to keep the bold weight just to highlight this section a little more let's also give the input group a drop shadow to reintroduce that nice depth that the container provided and because the input is gray and we gave it a drop shadow it's looking a little bit muddy around it so instead we're going to make the

7:37input white and make the background a subtle gray but we're not gonna make the entire background gray because the white feels really nice at the top and really helps that headline pop a bit more instead we're going to make it a very subtle gradient that starts with white and is a subtle gray by the time you get to the input okay let's move on to the detail section now one thing I like to do to break the page up and make it a bit more interesting is introduce different background colors on each section I don't want to introduce brand new colors but just work with the ones

8:11I'm already using on the page for example for this section I'm going to use the new indigo color and invert the text with it and for the frequently asked questions section I'm going to make it dark like the current text color okay so here are the main features they are striving to build some pretty important information but right now it's not very scannable so this is actually another thing I encourage them to reevaluate and I asked them to provide more clear title to each of these points and just use the current text to provide a little bit more detail and to make the titles pop a bit more we're going to do

8:51emphasize that description text now one way you can do this is by reducing the opacity a bit this certainly makes it stand back a bit but what I like to do is hand pick a color from an HSB color picker by moving it up on the y-axis and in addition to this to make that text look a little more vibrant I like to adjust the hue a bit nothing too much about ten degrees should suffice and what this does is adds a bit of glow to the text but still manages to look secondary to the white title text okay let's take a closer look at these icons

9:26right now they're just generic icons which is not bad it's much better than using the default bulleted list but maybe we can find some that better represent what the message is saying so another product that I'm really excited about are these streamlined icons by Vincent Lemoine he's been working on streamlined icons for quite a while and is about to launch a major update streamlined 3.0 which now has two weights plus a fill version of every icon in the set totaling 30,000 icons I'll be sure to share a link in the description there's pretty much an icon for every possible scenario so I went ahead and found some that feel better

10:10aligned with the messaging here and now that we've opened up the width of this page we're going to put these points into two columns okay let's move down to the frequently asked questions section right now the questions and answers aren't laid out in such a way that maximizes the space especially now that we've opened it up a bit hierarchy doesn't need to take a top-to-bottom approach for example by using color and weight we can use a two column layout that can be just as effective and eliminate the awkward reading length we're also going to give the answers the same color treatment as the details section just to make the

10:49question stand out a bit more now because we created this two column layout it's not quite clear how the questions and answers are divided the title did a good job at making clear boundaries so we're going to add a border at the top of each this helps divide it and make the questions and answers feel more attached sort of containing the two okay let's just adjust the spacing a bit and that pretty much wraps everything up so let's just compare it with what we started with now you can go ahead and see the site live I coded it up using Kelvin CSS so you can also see the mobile breakpoints and

11:28while you're there feel free to sign up to get project updates I for one am really excited to see what they deliver if you enjoyed the tips in this video be sure to check out my Twitter page at Steve sugar where I regularly share practical tips that you can use on your own design now if you want to see these sketch files to the design in the video I've included a link to download the sketch files in the description and if you enjoyed this video and want to receive updates when more content like this is published be sure to sign up at refactoring UI calm [Music]