I spent 10 DAYS redesigning Visual Studio Code... | Speed UI Design

Опубликовано: 07 Июнь 2024
на канале: Demystifying Design

99,794

4.1k

Want me to look at your UI? → https://marcmcdougall.com/teardown
Pick my brain → https://marcmcdougall.com/clarity-call
Learn UI Design → https://marcmcdougall.com/learn
Find A Job in Design → https://bestdesignjobs.com/
Full UI Design Playlist → https://bit.ly/2UqOzBH

Partners:
Where I hire my freelance WordPress developers (Codeable) → https://bit.ly/49iI4Yg
Need an analytics tool? Check our Fathom → https://bit.ly/41ZQwuP

Links from the video:
Check out VS code: https://code.visualstudio.com/
Figma File for this project: https://bit.ly/3yXWsZ7
See this design on Dribbble: https://bit.ly/4kKIWvn

In the 91st episode of Demystifying Design, I'll be redesigning VSCode! The most pervasive code editor out there, maintained by Microsoft.

This entire redesign took me about ~35 hours to complete (over 6 days). Hope you enjoy!

Important timestamps:
0:00 Introduction
0:31 UI Teardown
1:26 Colors & Typography
2:30 VSCode Redesign Begins
3:30 Primary Navigation
4:03 File Explorer
5:33 File-Level Navigation
6:27 File Content
7:22 Tool Windows
8:25 GitHub Copilot Integration
9:49 Marketing Site Redesign
10:54 Page Navigation
11:28 Hero Section
12:55 Trust Section
13:14 GitHub CoPilot Blade
15:30 Productivity Section
16:08 Deployment Section
16:32 Customizability Section
17:12 Social Proof Section
18:06 Footer CTA
18:53 Summary

Music licensed by Epidemic Sound:
Fall Call, by Dusty Decks
Riding High, by Jon Runefelt
Bumfuzzle, by Jobii
Neon Nostalgia, by Rebecca Mardal
The Main Event, by Matt Large
Exits, by Felix Johansson Carne
Vivid View, by Dusty Decks
Cupcake Delivery, by Dylan Sitts

All content in this video is intended to be purely transformational in nature.

#webdesign #redesign #design #designer #designchallenge #speeddesign #appdesign #designchallenge #webdesign #learndesign #webdev #ui #uidesign #webdesign #graphicdesign #websiteredesign #microsoft #vscode #developer #development

CTC