I spent 10 DAYS redesigning Visual Studio Code... | Speed UI Design
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 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
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🤣
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!
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
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.
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!!
So satisfying to see your videos reaching a wider audience! Great insights on design choices yet again!
Thank you! 🙏
I really like the workspace folders you put on the top, it feels better to work with multiple projects in a single window.
i love this redesign, it actually looks modern now!
Thank you 🙏
great lighting! you've come a long way, sir
Haha getting a wee bit better every time
You need to call it visual studio code becuase microsoft already have visual studio
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
This was so satisfying. Great design.
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
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...
Awesome ❤ Loved the changes
i really love this design. keep going bro
Really nice work. This would almost tempt me to us VS code. A really cool redesign.
as a frontend developer I can said there I would love to write the code for that design. Excellent job man! 👏
INSANE. ABSOLUTELY AWESOME.
You're awesome 😎
And now I NEED THIS!!!
i love the website u designed.. its what shud hv been there for real
Great Work man appreciated
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!
Mind blowing bro ❤❤❤
The horizon separator is veryyyy nice!
It truly is the cutest little thing I ever saw
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
I love it!
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
Great video!
Thank you!
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!!
Love it ❤
Vs code design is just superb
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 looks so much better haha. i want that design lol🤣
You and me both!
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
Congrats! You made it look really cool but you also just made the webpage look like any other developer brand website
I would 100% download this!!
Hell yeah!
awesome ❤
woah! that Plus Jakarta font choice shocks me, I don't know it was that popular!
Nice video. Thanks.
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 🙏
very nice redesign
Thank you 🙏
Can you give me that design guide you had in the file the one with the typography and color pallette?
It's in the Figma file in the description
Great job bro. You now have a finger print on a Microsoft site/app
It's crazy!
Is there a way to make vs code look similar to the design shown in the video by maybe injecting css?
Maybe? I'm sure a custom theme can be made but I have no idea
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
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
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!
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.
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!
Good video, salute to you for creating these amazing videos 🫡
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
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 😂
Now, where is the download link to the visually appealing VS-Code Version 😀?
😬😬😬
well done
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
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
there are a lot of apps need to redesign, more please
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!
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. 👀👀
probabaly i am ready to user your design
Hi, do you mind if i patch vscode with your design ? I'm currently on a ricing run :D Great design btw! Looks clean.
Go for it! 😀
Really nice work, man ❤❤
Appreciate you
Which icon library did you use?
It's a cheeky wee library called Feather Icons from a plugin in Figma
Anyone know editor used to make this redesign?
Figma!
Segoe UI is my favorite, and segoe ui variable too
At around 13:30 you say “we’ll add an emphasised blade…”. Where does the term “blade” come from here? The only reference I can find is to Laravel, which uses the term for its templating stuff.
I think this is an American term for a horizontal "section" of content, particularly on a marketing site. Picked it up from marketing agencies with whom I've subcontracted...for better or worse 😅
when i'm installing vscode is cause i need it in that moment. never really cared about the landing page
clicked assuming this would be another click bait but damn wish if vscode looked like that great channel btw subbed and liked.
Welcome!n
please vs hire this guy
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
Your very talented
Thank you for the kind words 🙏
this is cool
😎😎😎
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 😎
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!!
they need something like productivity and the workflow of VS Code and the newest UI of InteliJ
I think that your design is fawesome and refreshing for vscode, but there are some UI elements that just take up useful space! The more useful information you see the better experience you have. I would remore "search" and "git" panels - these 2 are just taking space for 3 more items and the features they provide are not going to be used often. Also you must have removed menubar becuase it takes like 2 or 3 lines of code in a couple with "project tabs". Have we already forgotten about good ol' alt + tab? And also could someone explain for me what does these arrows at the start of the files navigation do? Do we really need them?
The arrows let you move back and forth through files. So, if youre working in line 354 in one file and line 4 in another, you can quickly toggle between them 👍
You do it using shift + tab or alt + left or right, clicking isn't a quick way to do something when you're typing
Nice
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.
I don't know if it's just me, but you practically transform vs code into JetBrains Webstorm 😅
Engineer here. The tabs decision is bad. Our context switches are (mentally) EXPENSIVE and don't want to be switching projects. Furthermore, a lot of us navigate tabs with the keyboard. We don't want the IDE to switch projects when we want to switch tab.
Context switches as a UI designer are just as expensive, yet Figma still has tabs. Do you think that's a mistake too?
@@DemystifyingDesign Categorically, yes. Also last time I checked, Figma has tabs for within projects, not tabs of projects.
Cool now i can appreciate for 2 more second before scroll down and click download
Really love your design, hope Microsoft will reach to you for this design
Given that I bashed them like 8 times in this vid I hope they don't see it lmao
Can you design microsoft store like that ? Their store is somewhat old fashioned compared to steam. I think it might move to production because currently they don't have comments, rating, discussions, friend list and a lot of stuff like that is missing which could be solved fast with your design.
That's a great idea! Popped it on the backlog
Someone please tell me how to tag the visual studio code design team. They have to watch this video.
My god, this is one sexy website! I am definetely going to steal some ideas here 🙂
Steal away I won't tell 😉
Bro just turned vs code into a saas startup
Just a hard days work
@VSCode... Please add the modern design changes pls
I guess some people are so used to the static webs for the these kind of software
What do you mean?
Personally, I’d finally use it over the others
Can you port it for Android (like VHE Editor)
What do you mean?
You just made a JetBrains IDE.
They should have designed it this way to begin with. I've always had some gripes with vscode personally. The layout isn’t intuitive, it hides a lot of commonly used functionality, and often you need to resort to editing json files manually for configuration that moat IDEs do for you. VS proper has the opposite problems. Neither of them are really all that responsive with larger or even mid sized projects either. If you can't tell already I'm more of a JetBrains guy.
Hot take, Smojo is one of the best general programming language ever. What do you think? 🤔
Never heard of it 😅
Cool UX improvements, but naive design. The thing with user interfaces is not what happens in designing tool. The thing is what happens in real life cases: how UI behaves when there are lot of files open, that need to be easily navigable; how do I know which open file to select if I have 10 with same name; what if tree of directories is open 10 levels deep, how it behaves on different resolutions etc.
I would rather see improvements around hard cases, not the easy one like a padding or border radius.
Cool!
index.js highlighted in the context but gastby-config.js highlighted in the content really bothered me. The redesign is awesome though!
Ah my bad!
it looks like tailwind now
Visual studio is already another ide from microsoft so it can't be visual studio, it has to be visual studio code
bro i was disappointed seeing this is some small channel not a fulltime content creator when i saw the video quality first 😂
Thank you friend 🙏