I spent 10 DAYS redesigning Visual Studio Code... | Speed UI Design
Vložit
- čas přidán 3. 08. 2024
- Full UI Design Playlist → bit.ly/2UqOzBH
Want a custom design for your business? → marcmcdougall.com
Check this UI out on Dribbble → [coming soon!]
Here's the Figma file for this project → bit.ly/3yXWsZ7
Where I hire my freelance WordPress developers (Codeable) → bit.ly/49iI4Yg
Links from this video:
- Check out VSCode! code.visualstudio.com/
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
UPDATE! Looks like since I uploaded this, VSCode actually updated their landing page....and it looks *surprisingly* similar to my recommendations. Coincidence? You decide...
It's still the same :/
Hmmm, really? Maybe I got an a/b test
@@DemystifyingDesign Yeah probaly.
Actually landing page is updated month ago.
@@DemystifyingDesign You can still look at it from waybackmachine, its the second to last snapshot, ngl it looks clean
Visual Studio Code and Visual Studio is two different product
Yea I found that name change weird too.
And this is one of the most frustrating things when working with visual studio as most research results on Google when typing this yields results for Vscode.. windows marketing is a mess
Yeah I would've rather had the logo with "Code" written beside it instead of "Visual Studio"
@@nalstudio_officialor VS Code
The main factor that drives people to use vscode is not copilot, it's the lightweight feeling alongside the tools it has. You can install copilot on pretty much any IDE.
The deal with VsCode is that you choose which tools you want to get by installing plugins unlike most code editors that bloat you with tons of tools dedicated to a specific project. Its also fast which makes it great for quickly editing files
Idk, Sublime is preeeety fast and lightweight....
@@DemystifyingDesign sublime doesn't have as much extension support as vscode.
Dude why do ppl think vscode is light weight. It’s an electron app which is a memory hog. It’s anything but light weight.
@@Trizzi2931 Just open any other IDE and see how much slower it takes.
Electrons apps are only memory inefficient. They are pretty fast and flexible.
@@Trizzi2931Its not lightweight but it feel lightweight when it contains more features.. In short its lightweight..
I just use notepad++ for lightweight editing txt file. but not for coding🤣
A lot of people in the business con artist don't understand one simple thing, when a product works, no one gives a shit how the website looks. It's only when you sell snake oil when looks actually matter.
To be honest i don't really like the redesign for vscode, but the website was amazing, great job there. Most vscode users remove 90% of the interface anyway, anyone that uses is professionally just strips it down to it's bare-bone editor and plugin.
Yeah, the end of the day users strongly prefer functional interfaces. That's why I didn't really want to redesign the code editor itself. But hey it to be done for that content baby!!
I really hope microsoft don't take any ideas for the editor. The good thing about VScode is that it is very light in UI and doesn't look busy like an IDE does. The "profile" and options part is barely ever used and wastes precious vertical space. The way it is right now doesn't waste space at all, it sits in an unused part of the UI (bottom part of the sidebar). The project bar also wastes precious vertical space, switching project is a very rare event, the "project dashboard" extension does it much better, which is an icon in the side bar.
Things that switch your context (from code editor to file tree, from code editor to project list, from code editor to settings) all belong in the side bar, as to waste as little space as possible. The main element where you're gonna spend 90% of the time is the editor, it should be as big as possible. The other main part is the terminal, which under the redesign would see its space halved. Very rarely you want to see "problems" and the terminal at the same time, it makes little sense for them to share space. The way it is right now, where you choose either "problems" or "terminal" makes it so you focus either one of them, and when they are focused they use a big part of the UI.
T H I S
This redesign it feels like it'd be cumbersome to work with, specially when developing something server-side where you end up having to spin up the server and keep track of the logs about what the program is doing
It does visually look more appealing, but adding so much into the UI actually makes it heavier, quite worse
A more minimal visual would be better, which current VS Code already achieves
Mostly agree with both of you. A big part of the problem of doing a redesign like this is that you need to do something unique and interesting in order for it to be a useful video.
In the real world, you would have to layer this visual design on top of months and months of user testing.
Fortunately for you though, this was just an experimental redesign. 🤣
@@DemystifyingDesign For a video it works wonder, or even maybe a more specialized web design editor, it probably could work as a rather good editor?
Sadly, UI/UX is a lot more nuance in the real world
For rhe website logo, I would keep Visual Studio Code anyway as Visual Studio is a total different product. Other thing very important on the app redesign side is the status bar. Even though putting the git branch above looks great at first look, but then it needs also to include all the git commands as menus. Looks good, but not that functional.
Really like the website with that dark mode theme. I would keep a toogle to stay inclusive as some people also have hard times while reading on dark themes. Great job.
Yeah I think I should have spent more time focusing on the git section. Could have emphasized that upon clicking it, it should expand into a bigger context menu or something. Thanks for the solid feedback!
"Devs like me are staring at a screen all day, we can't afford to flashbang them with a white screen" - Proceeds to flashbang the entire audience with a whitescreen
Got to make sure you're awake
@@DemystifyingDesign😢it's 3 in the morning mann
VSCode has been the most used editor since way before Co-Pilot. Co-Pilot isn't their main selling feature. It's the lightweight and fast nature of it with best in class support for most languages. It just feels like an IDE without being bulky.. it has good extension support, you add support for new languages yourself like if you create a new language yourself. The built-in Git UI is pretty great. It just has everything. Mostly better than other editors for humans (let me exclude vim so people don't bash me)
Sublime does all of that too! But right now, if you want to use copilot, it's a hassle unless you use VSCode
@@DemystifyingDesign I have used sublime. It doesn't have the same language support as VSCode. It feels like a text editor (which it is) but VSCode feels like the IDE which I wanted to clarify.
Copilot is a good to have, but All real competitors to VSCode have integration with Copilot.
@@DemystifyingDesign nice video i enjoyed the redisign but imho like @TalhaBalaj said sublime lost it's place as editor for the majority of people to vscode way before copilot came around, like we are talking at least a few years back
Yep, a few years back. We're in a different world now and the main differentiator *now* is native copilot integration.
@@DemystifyingDesign To your point about unless you use VSCode, how so? They have an extension for every major editor/ide. It's even easy to setup in NeoVim
one thing you get wrong is 11:00
Visual Studio and Visual Studio Code is a different product. Visual Studio is a more full-fledged IDE, which is used mostly for development of C# and C++ programs on Windows. VS Code, however, is much lighter and flexible. I can see why you would get this mixed up since Visual Studio's logo is very similar to that of VS Code (instead of a cut-off ribbon, it is completed, and the color is purple instead of blue).
Yeah that's a good point. I'll blame Microsoft for this and call it a day
@@DemystifyingDesign yeah, its annoying indeed
You need to call it visual studio code becuase microsoft already have visual studio
I would love a VSCode theme that looks like your redesign! I NEED IT!!!
We can dream 🥲
@@DemystifyingDesign cant you give that via extension?
I could but I'm not going to - would take me like 3 weeks to build this out and include all the edge cases
@@DemystifyingDesign well... someone gotta do it 🤞
@@sobhanbhowmick I'm working on one at the moment. I'll update once it's finished...
great lighting! you've come a long way, sir
Haha getting a wee bit better every time
I like this UI of vscode, I would like to have it the way it showed in this video
What do you mean??
@DemystifyingDesign that he prefers your redesign of VS Code
Ah thank you!
Awesome ❤ Loved the changes
doesnt seem like much of an improvement
I really like the workspace folders you put on the top, it feels better to work with multiple projects in a single window.
INSANE. ABSOLUTELY AWESOME.
You're awesome 😎
So satisfying to see your videos reaching a wider audience! Great insights on design choices yet again!
Thank you! 🙏
To be honest, your redesign looks so much better and intuitive than the "new" Visual code website. i love to see these redesign videos, they are so inspiring! Keep up the great work!
And now I NEED THIS!!!
Few suggestions:
- Move the git to the bottom on the left panel. And get that copilot shit outta here xD
- The search is vague. What does it search ? Folders/Files or contents of the files ?
- Get rid of the left redundant git menu between the bottom of the text editor and the terminal. And move the Line Col info to the right hand side of the bread crumbs.
- And no one cares about the copilot thing.
- Also avoid 2 groups of tabs. Make projects a different control, like a drop-down maybe (idk). Also wastes vertical space.
I'll be in your corner when the challengers come knocking, this is absolutely stunning... Made me wonder what I have been doing as a developer... well, upcoming... And after the fight, I'll send you my invoice too...😆
Hahaha do it!!
that multi windows is absolutelly a must have future feature
Great Work man appreciated
Disgustingly beautiful 😍, you need to send a proposal for this man. This needs to be the next visual studio code refactor
Mind blowing bro ❤❤❤
Man, you really made me like the actual vscode ui. Are you really designing for devs? Give me keyboard shortcuts and a CLEAN interface
Boom! Keyboard shorcuts are now active
Congrats! You made it look really cool but you also just made the webpage look like any other developer brand website
This was so satisfying. Great design.
The horizon separator is veryyyy nice!
It truly is the cutest little thing I ever saw
I love it!
woah! that Plus Jakarta font choice shocks me, I don't know it was that popular!
i really love this design. keep going bro
Really nice work. This would almost tempt me to us VS code. A really cool redesign.
Great video!
Thank you!
Thanks, now I can spend the next 2 weeks customizing vscode to look exactly this
if you do make guide ill fallow it
Hell yeah
Loved it ❤
Love it ❤
In reality most of those things are already present or achievable using extensions.
One of the best features of the VSC is the ability to customize it. So for example have the primary sidebar on the right (I personally don’t get why somebody would do it, but a few colleagues has it setup like that), or for example move there the terminal etc.
If Microsoft were to redesign VSCode, they should make a video like this
I would 100% download this!!
Hell yeah!
as long as it makes my text colorful im happy
i love the website u designed.. its what shud hv been there for real
Now I need your Visual Studio Code organization. Damn! I would love a floating terminal though.
Gah! Didn't think of that
@@DemystifyingDesign When they'll copy your design of this video, you could propose it as the next iteration lol :D
very nice redesign
Thank you 🙏
please do more redesign!!!! and also upload consistently plss so i have something to watch and learn
Haha thank you I'm trying these videos are so hard to make!
@@DemystifyingDesign hahaah i agree! i am also a ui ux designer, ( a beginner) i learn alot from this haha! welcomee!
I'm glad someone out there gets something out of these. If you ever think of anything else that would help please let me know!
I don't want to hate and please take this just as creative criticism so here we go... This to me looks like a toned down version of Int Idea and don't get me wrong I like that. But as an vs code power user, the default dark theme with how things are set up just works. And I would much rather focus on the just works part instead of looking all pretty. It look pretty good as is as well. Also for the copilot feature, not everyone wants to talk to copilot nor posseses a license for it.
One last thing, the landing page redesign .... that's very much on point. Good job for that.
Yeah like I said in the video, the editor itself doesn't really need a redesign, thank you for your honest feedback 🙏
I actually like the vscode website design. It's simple, and gets the job done. What is it with landing pages having to be this huge super animated website that always looks exactly like every other landing page?
They don't! But there are clear usability & messaging problems that if corrected will make the site more sensible and effective.
awesome ❤
Love how those 'visual representations' of features are essentailly very guided screenshot of text after all. Like for a programmer a 'users.forEach' loop ist just a very common block you recognize at a glance. No need to abstract it visually if you can abstract it faster cenceptually :D
Hell yeah that was the plan!
Great job bro. You now have a finger print on a Microsoft site/app
It's crazy!
I was impressed with your process. The only part that made my brain hurt, or more like explode, is you did not mention CSS frameworks. The clear winner is Tailwind, simply because it ticks every box and in the end is a single file and inline styles.
this is the complete opposite of the redesign I would make but it still looks good and has a lot of features. I just think that most developers look for code editors with less menus and a clean look which isn't this. I currently hide everything except files and code view in VSCode if I want to access something that is hidden I do it through a toggle like CTRL+Shift+X for extensions.
Oh really? How do you switch between files? I feel like I'm constantly bouncing between files left and right in and out of components and styles.
@@DemystifyingDesign CTRL+P to open all files and have search available to open whatever I want in the project. I don't remeber the file structure on the file / class names I want to access
This looks so much better haha. i want that design lol🤣
You and me both!
Nice video. Thanks.
Vs code design is just superb
i love this redesign, it actually looks modern now!
Thank you 🙏
Also, the projects can be huge .. the problems tab by default only lists probelms in currently opened file, but your design suggests that it should list all the problems, across different files in the project. This can be extremely intensive in terms of computation for what is supposed to be a "code editor" (and not an ide).
Similarly, having multiple projects open in the same window, when the projects are big, all of them have to be loaded, which will be memory expensive.
The above problems will lead to a bad and janky user experience.. to make it all worse, you only have one window which goes unresponsive when any one of the project causes issues.
In the next episode: "We teach Messi how to play football" 💀💀
NO WAY THEY UPDATED THE PAGE IT LOOKS THE SAME!!
clicked assuming this would be another click bait but damn wish if vscode looked like that great channel btw subbed and liked.
Welcome!n
wanted to say that they updated their page and its looks like it took some "clues" from you :D
what are you talking about at 2:36? VS code alredy has a folder tree on the left, as well as tabs on the top, you just don't seem to be able to navigate it very well
but yeah, having workspaces be separated make a whole lot of sense, and your design looks pretty good as well
I usually disagree with most "redesigns", but I really liked this one, there's one or two things that I don't agree with, but otherwise seems great! :) I specially loved the website!
Thank you! What do you disagree with out of curiosity?
Thank you for the reply, @@DemystifyingDesign!
I think the < and > arrows at 6:14 are not intuitive on a text editor, I also don't think it's a feature that should be in the UI
I also get a weird feeling about the workspace tabs, there's way too many tabs in the final editor, one row per file and one row for workspaces...I understand that it's for easy access to change the workspace, but it looks cluttered in my opinion. I unfortunately don't have a proposal on what to do for that, I feel like tabs are a great idea for workspaces, but they also make the header too busy
well done
This looks great. The only problem I have and I’m sure as a new user is that if I downloaded visual studio code, I would expect it to look like it looks on the main page and because you’ve changed it. It doesn’t this now causes confusion and makes customers angry that they now have to go and figure out how to make it look like it does on the homepage, which is why Microsoft keeps the way it looks because that’s how it looks when you open it after downloading it
this is amazing! in vs code there is an extension called "apc" to customize the ui more deeply in vs code, I'll try to see how far I can get with its design! thanks!
Dude that'd be so cool keep me posted fo sho
OMFG!!! Y'all calm down. This is just a treatise on possibilities. You guys are flaming like he is the UI PM on the VS team. This is also why products are built in a vacuum with a finite set of development partners. If you leave things open to users, you would get so many contradicting preferences that you would never get a product shipped.
Lmao I was fully expecting this when I redesigned a product for devs. The most opinionated cohort in the history of users 🤣
@@DemystifyingDesign This is why I avoid products for developers. The baseless opinions, jihad, and zero-sum games are distracting and embarrassing. It used to not be this way, but this is what happens when anyone can practice a craft. It used to be that professionals did the work, academics stayed in academia, and hobbyists could torture each other on forums. Now that tools and platform companies have started embracing open-source, everyone has come outside to play, and they are bringing their vitriol and bellicose rhetoric with them. It is like Lord of the Flies out here.
That's by far the most eloquent comment anyone has ever left
Damn! Looks so good. Can you redesign my life😍
Your very talented
Thank you for the kind words 🙏
So iam guessing the next video is on jetbrains, I dunno i spend most of my time on Android studio and it's got a new ui redesign but would love to see your version of it that is if you ever do it but really appreciate the time and effort for this video it looks awesome mate ❤
I think this will satisfy my redesign needs for at least the next few weeks 😅 thanks mate!
Phenomenal improvements! Why not submit a PR to the VS Code UI, would really like to see this!
Man, if I were going to do that I'd need to really spend a lot more time thinking through the edge cases and prototyping it with users. If Microsoft wants to sponsor me I'll gladly do so ;)
@@DemystifyingDesign I reckon they should, you know! 😂
Wayyyyy better than what they’ve currently got going on 😂
The landing page is and always has been, the best I could ask for: "A BIG download button" that detects the version I need to download based on my OS.
It is the only thing I'm going to use the site for.
I would like to see what software landing pages you have designed to see if THAT is there. 👀👀
Nice job !
My god, this is one sexy website! I am definetely going to steal some ideas here 🙂
Steal away I won't tell 😉
This redesign (at least the VSCode app part) seems to ignore the main paradigm that VSCode uses: CMD+P opens the omnibar, which you can search files directly, or run commands by prefixing the query with a >. The search in the left sidebar is completely useless as you either focus it and start typing to search, or you can press CMD+Shift+F, or open the search section of the sidebar. Branch switching should stay in the dedicated version control tab of the sidebar, mixing it in the file explorer creates opportunity for mishaps. The workspaces tab bar is a tremendously bad idea, you often have 10+ files open per-project, you'll get sick of switching tabs between files and projects. Not to mention that VSCode allows to open "workspaces", multiple folders inside the same window, which does the 'projects' thing way better. I also find it easier to have separate windows per-project, especially with multiple screens setup (also allows easy ALT+TAB to switch project).
These and more are the reasons developers prefer VSCode, while they steer away from the old NetBeans, Scintilla, Atom, and various other alternatives.
Yeah, I was imagining that when you click / focus on the sidebar search it would become full-screen much like the existing CMD+P experience is today in VSCode.
probabaly i am ready to user your design
this is cool
😎😎😎
I don't really like having project tabs on the top. You could get rid of the branch selector on the sidebar, since you already have a branch selector on the status, bar and replace it with the project selector if that's really necessary. but I'd prefer to have different windows for each project. what I do like is the color and the fonts. great job in advance. new subscriber!
Yeah fair enough I can totally understand a use case for new projects in new windows
I projects not too much projects, would be great to move the to the left side, align vertically
Bro just turned vs code into a saas startup
Just a hard days work
there are a lot of apps need to redesign, more please
Project switching tab seems a great ideia. I would like to try it out. But I can see some concerns around memory
Totally fair
The biggest glaring usability issue with VSCode is it's subpar ability to hide ALL of this UI and just drive it via the keyboard. It's why so many people end up using neovim.
Forcing sticky scroll made me ressurect tge editors that raised me. (yes, i know you can disabe it, but why is it on in the first place)
Good video, salute to you for creating these amazing videos 🫡
Hey , guess who re-designed their landing page !😂
And it almost looked familiar... (*wink)
I know!!
Hi! A content suggestion, can you do like tutorial or discussion how do you usually do your thought process and building the brand design and etc.
Also as a beginner designer like me can you teach us how to use autolayout properly??
Those are good ideas many people have asked me for that I think it's time I make it happen
@@DemystifyingDesign yes please
@@DemystifyingDesign just a new suggestion content btw haha teach us how you do your local styles and how you effectively use it. Im in love with your processss
On it 😎
Really nice work, man ❤❤
Appreciate you
I’d pay for this theme.
Great design. I might be able to create a custom code editor with that design, but I would need your permission first.
Someone already did! Check @JoshLawson's comment below
@@DemystifyingDesign sadly couldn't find the comment
I think it's in the reply to my pinned comment
It's also called "visual code 2.0" in the VSCode plugins menu
@DemystifyingDesign no no, I don't mean as a plug-in, but rather from scratch
mann ur video did a high number and now has ads!!!! im proud to be at 100 views haha
Oh really?? Damn!
Some portfolio design for freshers please
as a frontend developer I can said there I would love to write the code for that design. Excellent job man! 👏
Cool now i can appreciate for 2 more second before scroll down and click download
please vs hire this guy
Can you do a video redesigning photoshop, you can do their landing page, software, or both. You could also do something with redesigning the adobe website.
Oh man, that would be a doozy. So much custom iconography!!
Segoe UI is my favorite, and segoe ui variable too
I don't know if it's just me, but you practically transform vs code into JetBrains Webstorm 😅
when i'm installing vscode is cause i need it in that moment. never really cared about the landing page