Refactoring UI: Tuple

For this edition of Refactoring UI, we're going to redesign Tuple's hype page, sharing lots of tips on layout, styling text, and choosing colors.
🚀 Tuple website: tuple.app/
📬 Updates/Submissions: refactoringui.com/
🔥 Design tips: / steveschoger
👨🏻‍🎨 Sketch files:
Original: www.dropbox.com/s/kth033kqdhy...
New: www.dropbox.com/s/tictbuvpnzx...
👀 Streamline icons: www.streamlineicons.com/free-i...
🎨 Dribbble colors: dribbble.com/colors/
🎨 Sip (color picking app): sipapp.io/

[@PerfectionismTech]

That background gradient tip is a such a great idea, I’ll have to use that sometime. Still not feeling that drop cap though. I think the circle is making it feel disconnected from the rest of the word.

[@RasmusSchultz]

PerfectionismTech "HEN". EALLY ISTRACTING 😝

[@Gashdal]

yeah i love every design this guy has ever done on this channel, but the drop cap really just doesn't work.

[@RasmusSchultz]

what's great about Steve is he can articulate the reasoning behind almost every design decision he makes - not every person is going to agree with every decision any designer has ever made, but it's never just "feel good" decision making, which is why these videos are so valuable :-)

[@Gashdal]

i dont think that really applies in this situation. everything is subjective but i think from an objective standpoint the drop cap is just.. confusing and therefore not the best design choice

[@moondust2365]

I think the drop cap would be better if he either removed the circle or lowered the text to make the W and the HEN look like they're part of the same word, which is what they are...

[@enotirab]

Man, I really love how you're able to use a set of principals to drive out our design decisions but still manage to make these very diverse looking designs. As a developer it is so helpful to see things presented this way.

[@Hd1ym3]

enotirab yes ! yes! I feel like my eyes / mindset are evolving

[@ajaym6795]

Steve, your tutorials are amazing. For viewers, here are the main takeaways from this video: 1. Use 70 to 80 characters on a line for comfortable reading (1:55 - 2:00) 2. Consider title and body text alignment (2:03 - 2:20) 3. Cool Resource #1 - dribbble's color picker (3:40 - 4:10) 4. Use italics instead of bold in body text to emphasize without overdoing it (4:30 - 5:40) 5. Steve's way of adding glow to description text while maintaining the emphasis of sub header text (8:48 - 9:24) 6. Cool Resource #2 - Streamline Icons (9:40 - 10:10)

[@paramaggarwal]

This series is absolutely _killing_ it! ❤️

[@jonaserlandsson8969]

I agree, it's a marble! It made me interested in design, which says a lot cause I've always hated frontend stuff and now I better understand why I never liked it. I didn't understand design. Thanks Steve!

[@Nachtfalter89]

Satisfying to watch! Thanks a lot for this series.

[@devmrin]

Awesome stuff Steve! These UI refactoring episodes are 🔥🔥🔥

[@Cccdoesmc]

Great series 👍🏻 and very satisfying too!

[@ElLevidente]

Fantastic! Love the series, you're doing Gods work my friend.

[@tiepolo71]

Gawd, I love these videos. Every time he releases one I drop everything I'm doing to watch them.

[@SoeaOu]

Legend. Thanks for putting this up.

[@scikud]

Incredible work as always!

[@yhhxenllaa4670]

This video series is magical. You're a genius Steve. We all really appreciate these videos!

[@bdeleasa]

I could watch your videos all day long. These kinds of videos are SO helpful. Thank you!!!!

[@addmister]

Every time I see the initial design I feel like it isn't so bad. Then you do it over and the improvement is incredible. Great work, love the vids!

[@caseyli]

Steve, another incredible video. I’m really digging that you are spreading your videos across very different case studies. Love how this one was text heavy to see what to do with it. Amazing work! (You’ve inspired me to put together my own design tips that’s coming out soon. Stay tuned.) Thanks again for an amazing series and brand. Easily the best design knowledge share I’ve ever encountered.

[@captaindesign]

Make more, these are amazing!!

[@sulaimanadewale320]

Very clear and precise! Thank you!

[@jameswillard8716]

Your design thinking is spot on!! Correctly guessing the design decisions you made was really fun and TailwindCSS is awesome!! Great job - Bravo!!

[@makotokino27]

hello! i just came across your website and this channel. we def need more ui heroes like you in the design community. thanks for all you do :)

[@SimonHamp]

Thanks for going through this, Steve. That was such a rapid redesign! Your explanations and justifications were spot on and the finished product looks top class even with just a little work. Two things that really blew me away: 1) the subtle background gradient across a large portion of the page, and 2) the small caps trick. Both added some interesting flair without any heavy lifting. Great work!

[@nandhagopalgopalsamy1726]

The best video tutorial for learning design

[@ryckett]

Not a designer (well sorta, sometimes webdesigner but mostly programming) but I love these videos. Keep it up! :)

[@deanrademan2503]

Minor tips for great impact! Love your work man!

[@MrSaulWhite]

Thx man, these videos are so helpful. Just keep 'm coming, Steve :)

[@philarnold115]

Great work, Steve!

[@Timooooooooooooooo]

This series is amazing

[@bhanukrsingh]

Hey, Steve your Refactoring UI series is just amazing. I have just started designing website for 6 months now, and watching you work on UI, I learn lot of things. I request you to publish video more. Great work.

[@SteveSchoger]

Plenty more to come :)

[@vasbinder]

Another great video! A lot of typography decisions and the reasoning behind them made in this one. Wish we could see these more often, but the effort it takes into making them is probably quite a bit. As long as we keep getting this quality, I don't care to wait. 😉

[@chamugas888]

This is gold

[@equiz]

Amazing tips! Thanks for sharing

[@delia3644]

Just waaaaw! Thak you!

[@jeffbrand2337]

So glad I subscribed...learning by osmosis over here...always thought I was not a designer, then I thought I was a bad designer...now I KNOW I'm a bad designer, but getting better thanks to this series!

[@trip1123]

Awesome stuff. I love it.

[@januaryperson1306]

Awesome Man

[@AlexTechie]

Great video, I learned a lot!

[@elliotcondon]

Damn! That was some good refactoring 🤘

[@mehdilamaafar5823]

thank you very much for the tutorial help a lot 💕

[@Mzmsz]

LOVE. THESE. VIDEOS.

[@ahmetsali]

great tips, thanks!

[@mozartmatt]

Awesome!

[@jakeroosenbloom]

7:24 It should be *you're

[@SteveSchoger]

Oops 🤷‍♂️ Good eye!

[@r00k123123]

Thanks! Fixed on the production site (tuple.app).

[@JawsoneJason]

I hope there is more soon!

[@Keno_jm]

I need 100 more of these please

[@praneethdamian]

please keep making these.

[@andersonlee404]

pls upload more, ur vids are great

[@sohanvjartakhani]

very helpful

[@MyMusicChannel88]

Hey Steve, I've been following your video series for about a week and a half now and I'm obsessed. I was wondering If you could share the original sketch files for the other videos too? I think they are really helpful to use for practice. Thank you for all the work you've put into these videos, a lot of other designers are benefiting from it :)

[@wsshambaugh]

Great video! Love the description of the thinking process behind the design changes. The typo in their first line of copy (“Screehero”) was really bothering me though.

[@SteveSchoger]

Ah good eye! When I first read this I thought you meant the headline and I panicked a bit 😅

[@ArcTiiXHD]

The input field is the main item on the page, it should stand out way more. It kinda disappears between the wall of text and the big purple background color. Great video, as always! Just my 2 cents.

[@nicolasparada]

Very nice 👏👏👏

[@agatagyama]

Amazing! Make more videos!! :D

[@davidglimpse9339]

Love these videos! It would be cool if you could do some follow up after the refactor to compare conversion stats for the email sign up.

[@herrDOS]

Drop caps in interface design! Holy molly

[@msueldo]

Thanks!

[@JanVanEchelpoel]

Another great video! Not sure about the "designed" dropcap though, as it might be too disconnected from the typography of the text.

[@JessHines]

I love the text-driven nature of this one! When you have a lot of text, it's easy to resign yourself to the "fact" that there's going to be a certain amount of suck, but you prove otherwise! As I was watching, I thought you could probably do labels for the previously bolded text in the first section, but now I like that it's more of a narrative than bullets. I'm big on typography, and really enjoyed this refactor! Props on using Tailwind! I'm going to use that on my next project; I've been using Tachyons, and the whole utility-first CSS has been amazing. Side note, but with what seems like a pretty darn good screenshare option in VS Code coming soon, any insight on how Tuple will be different?

[@parikeshtkar]

Hi Steve, these videos are great. Aren't you planning to continue? I recently bought the whole pack of "refactoring UI" and I find these videos here a very good complimentary step.

[@roach_iam]

Fantastic turn around. Only thing I would add is a CTA at the bottom of the page.

[@jonathond3402]

Steve, your amazing were did you leave UX and UI? Are there any resources you recommend?

[@app11120]

bravo!!!!!!!!!!!!!!!!

[@doctorsphoenix4681]

AMAZING tutorial, as always. Is that a typo on the first line after the drop cap? 'screehero'?

[@AlexBerman]

More!

[@gritsboy123]

Hey Steve, I’m just starting to get my feet into web design. Any resources to understand pallets and typography? Also what program are you using. Love this series, keep it up man!

[@paweonorin2978]

great video as always, I have one question. How do you create this page on sketch, do you use a program that automatically creates sketch page versions or do you create everything from the beginning ?

[@resolutionAgha]

OO great

[@PMSTTR]

Really love the videos. But i have a question. Do you manually recreate pages in sketch or do you use a tool for that?

[@philip9677]

Hi Steve these are great, can you make more tutorials

[@vai0]

Great stuff! In many cases, the client strongly prefers placing the call to action above-the-fold in theory increase conversion. Have you ever came across this case and how did you handle it? Thanks!

[@7uvenucmeIz]

when's the next video out?

[@theroosafamily]

Do you have a sketch tutorial? Or one you recommend?

[@MikeBurnsUIUX]

I hit like before watching.

[@MrSaulWhite]

Haha, same thing here. I just know for a fact that it's gonna be awesome again.

[@herrDOS]

I see you’ve added a drop shadow to the details text in the coding stage

[@LongTran-tj8yt]

What was the name of the tool you used to code up the website? _something_ CSS?

[@oooobs1]

Long Tran Tailwindcss

[@huxainsyed]

Hey Steve! First of all, damn man! Your videos are some of the most comprehensive and to the point tutorials I have seen here on YT. Been a fan ever since you started tweeting those little nuggets of design info. Keep em coming. I don't know if you do requests but can you do an explantory video of your procedure of using and exporting SVGs in Sketch. I visited tuple.app and saw the optimized SVG code for the dropcapped 'W'. I have been banging my head against the wall to get Sketch to generate that kind of optimized SVG code but to no avail. Please help! :(

[@SteveSchoger]

www.sketchapp.com/extensions/plugins/svgo-compressor/

[@huxainsyed]

Steve Schoger Thanks. I'll explore it and get back to you

[@geryno_]

I wanna use grid just like yours, so can you tell me its margin and gutter please? That would be very helpful :)

[@orod73]

What program is being used in this video to visually edit HTML?

[@KSwizzleDrizzle]

What’s that plug in at 4:18 that lets you scan the color?

[@timothyshambra7296]

Can you expand on "Kelvin CSS"? I wasn't able to find it by googling. Thanks! Awesome video.

[@SteveSchoger]

tailwindcss.com/

[@SnakeShitNL]

What are your thoughts on using that large of a font size for body text? To me it feels unnatural on desktops as it reduces info density that much that it resembles more a tablet breakpoint than a true desktop one. I know they didn't had the content to fill a large page with say a 14pt font. But this seems excessively large for desktop.

[@BBMmovies]

Nice video as always! You use the San Francisco Font on this Website. Is this Font available as a webfont? I never found it anywhere ...

[@SteveSchoger]

css-tricks.com/snippets/css/system-font-stack/

[@davidnagy5171]

i was always wondering - how do you get a sketch file for the sites' original design? do you make it yourself after a screenshot or is there a tool for grabbing a whole page and converting it to a sketch file?

[@FatihAltnok]

11:24 What's the CSS thing you mention here?

[@amanyadav.16]

Which tool did you use to edit the web page?

[@AttilaNewman]

May I ask what is the name of the software you using for editing during the video that has a title on top called "refactor-tuple". Thanks in advance

[@tylerlavoie9132]

What was the thing you coded it up with? Kale and CSS?

[@user-gw8bq7fh7q]

Tailwind CSS

[@moamenali7626]

Hey Steve, You mentioned kelvin css what is that? & where can I learn about it? P.S. you provide a well-detailed high quality educative content which is super valuable to us :)

[@thepineapplehead]

It's Tailwind tailwindcss.com/

[@heycezer]

Woah, this is pretty awesome. I'm curious though; what's the song in the background?

[@SteveSchoger]

Original composition I made specifically for the screencast :)

[@heycezer]

Steve Schoger oh, that's nice. I love the tune .. it's just .. perfect for getting things done.

[@SteveSchoger]

You can check out the full version here: www.dropbox.com/s/t0t4pu4hqearthn/screencast-beat.wav?dl=0 It has a bit of an intro but after that I just repeat it a bunch of times to fit the length of the video.

[@heycezer]

Steve Schoger geez .. thanks a ton. Looking forward to more insightful videos.

[@rajasha3518]

What software are you using for designing this ??

[@devantaebison]

It looked like the Sketch App

[@raylawlor4887]

Brilliant videos... In this one... I'm not sure about the dropcap... when I saw this it confused me as a reader... I think a drop needs to be typographic rather than simply graphic. It pulls the text together and keeps the connection. (Just my opinion!) :)

[@petezzza]

Steve, in Sketch / Figma, fonts are differently displayed than in the browser. This somehow can fix it? How to deal with this?

[@SteveSchoger]

Саша Захарчук -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

[@petezzza]

Thanks for reply :)

[@anto8927]

What software is he using?

[@Vuroz]

Chrome Remote Desktop?

[@mikeynma]

Another video!?!?!? Eeeeeeeeeeeeeeep #amiturningintoafanboi

[@ffactory945]

So this is basically just Parsec but rebranded for business?

[@fenxis]

Heh, screehero was fixed in the live version 😀

[@bigmistqke]

I miss you

[@pelegred6123]

It's been a long time...

[@SteveSchoger]

😅 It's been about a month. These take waaayyy too long to make to push them out every 2 weeks.

[@pelegred6123]

And I enjoy each and every second of it 😍 the way you approach the redesign is almost cathartic...

[@GoodJobCasey]

I think since it such a hot topic right now, doing one for Reddit maybe be interesting. Get some of those reddit views...

[@amnesiacmyx]

I'm pretty ignorant to web design, but what are we seeing here? Is this editing the page in an image editing software as kind of 'proof of concept' and then this is later created in HTML?

[@SteveSchoger]

Yeah, I recreated the original design in an image editing app called Sketch. When the design is finalized I would code it in HTML/CSS (I use a framework called Tailwind CSS to build it). Some people would just design in code but for me I find it much more efficient to design it in Sketch first.

[@whatisiswhatable]

Now they just need a copywriter on that intro. Thing is LONG