UPDATE! Looks like since I uploaded this, VSCode actually updated their landing page....and it looks *surprisingly* similar to my recommendations. Coincidence? You decide...
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.
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
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.
@@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
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 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.
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. 👀👀
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!
Your Concept towards the VS code editor. It's nice, but there are some absence of, the tab which consist of files, edit, selection, run and much more and some missing of refresh, remote and "ctrl + p" or "ctrl + shift + p" tab. I am happy with your concept, but there are many missing features Let me take more space to adjust the IDE.
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.
@@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.
@@DemystifyingDesign Great redesigns by the way. Very thoughtful approaches to each change. I would download your version over the current version of VSCode. I think tools that try to be everything to all people are useless to everyone. But that is my own rhetoric. I believe that tools that are focused on activities for a particular task work best.
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.
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 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
I actually think Segoe UI was a good font to use for text. Using Plus Jakarta Sans doesn't really look fitting as I think it's more good as a display font rather than it being used both for display and text.
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 ;)
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'm a developer, not a designer, but I really don't like many of the changes you're proposing. Having the branch and other git actions in the files tab doesn't make sense to me. Editing/writing/fixing code are very different work flows compared to doing branch work like merging, rebasing etc. Having all that in a different tab with just a small branch indicator at the bottom of the editor makes much more sense to me. How would the search element in the files tab behave when clicking into it and starting to search? Would the files tab suddenly become the search tab? Would the file list just be filtered (instead of searched)? Theres much more to it than just placing a simple search box and button there. Having expanded folders be slightly brighter feels like horrible design to me. Why should it be highlighted just because it's expanded? Highlighting places emphasis and doesn't communicate state to me. Besides, the opposite, being greyed out, already has a meaning (ignored by git), so it's double confusing handling 3 highlighting states that mean very different things. Sorry, but your suggestions seem nice looking at a glance but are not well thought through, imho.
> How would the search element in the files tab behave when clicking into it and starting to search? Would the files tab suddenly become the search tab? Would the file list just be filtered (instead of searched)? Theres much more to it than just placing a simple search box and button there. Yeah I should have spent more time showing the nuances in the design, but cut myself short for time. I was expecting that when you were to engage with the search element in some way, you would be taken to a "search" context, where you could search between files and text. Obviously not as useful to simply type out my expectations here than show it in Figma! > Having expanded folders be slightly brighter feels like horrible design to me. Why should it be highlighted just because it's expanded? Highlighting places emphasis and doesn't communicate state to me. Besides, the opposite, being greyed out, already has a meaning (ignored by git), so it's double confusing handling 3 highlighting states that mean very different things. Are you referring to the highlighted background? Or the lighter color itself? > Sorry, but your suggestions seem nice looking at a glance but are not well thought through, imho. As I've mentioned in a few other comments, if one were redesigning this in the real world, you'd need to start with wireframing, do a bunch of prototyping and user testing. Since this is an experimental redesign for RUclips, I took a few liberties to embellish things and try some more unique approaches. I understand some of them may not be the best UX (because I haven't tested them with real humans), but it makes the video more interesting, and that's my main goal for these. Thanks for your feedback! Always appreciated
Ad more head space for tabs and cluttering the files panel shrink space for code and file structure respectively, though the design looks pleasing to the eye, but it's not really practical, specially for smaller screens. These are my perspectives as a developer.
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.
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.
My first time here, I like your editing skills, and also your articulation. But I'm having a little trouble hearing you talk with the music in the background being a little too loud for me. Anyway you deserve my subs.
The workspace tabs, I hate it. I'm a programmer, I work one project at a time, not twenty like tabs in a browser, I already have a bunch of files open per project and my workspace is saved there just fine. I also dislike how you shrunk the console windows and disregarded the branch info in the footer to clutter up the file structure. It all feels more click focussed than keyboard and productivity focussed. The only thing I really like is the file path breadcrumbs. Makes it a lot clearer which x.ts file I'm in. But I feel like this design might interfere with my sticky code nesting.
Valid feedback! One thing that sucks about Figma is the interface is really hard to test until you get it into a clickable proto. So much of what you're saying here would be likely handled in user feedback sessions down the line
Tbh, I think your UI, as clean as it may look, strafes too far from vscode's ux, which is to be as minimal as possible so that you have more screen real estate for the important stuff, and as simple to use as possible. You've missed the minimality
@@DemystifyingDesign Yeah, The entire design is perfect. EXCEPT the tilt of the Product UI, It looks disoriented. Probably because it is a tilt in all three x, y and z axis. The co-pilot UI could have stuck to the same orientation except that it is in the other direction making both of them look awkward. I would have preferred it the image is rotated on exactly one dimension. and that both screens use the same rotation with one on top of the other
What if we started to change VS Code to fell like this? Well, VS Code is under MIT license. So we could really modify it to match with your design. 'cause, for real, this design you made is fire. Tbh, I didn't like some things - like the terminal position, often I have 2 terminal side-by-side, and this design seems not to be so good to have 2 terminal side-by-side - but the majority is REALLY good!
For a designer trying build a brand image, you sure play fast and loose with the actual brand name - “Visual Studio Code” is a distinct product. Throughout the video you called it “VS Code” (my favorite), “Visual Studio” (which is a different product - yes, MS sucks at naming, but it is what it is), “Visual Code” - just NO!
i am sorry, but a secondary tab bar to a primary one is just an ux nightmare. it is second only to a modal opening a modal... also, you can not just simplify "vscode" to "visual studio", as they are two totally different products.
@@DemystifyingDesign well, yeah, generally that is right, but i say that from experience in years of ux development and testing. we've done those tests, and they failed every single time.
One thing you learn very early in UX is that you have to be careful to leave your own bias at the door and let the design work for itself. I've had countless flows that seemed to be "bad UX" upon inspecting urn out to be extremely easy to use somehow
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
@@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🤣
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
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
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...
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!
You need to call it visual studio code becuase microsoft already have visual studio
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
doesnt seem like much of an improvement
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.
woah! that Plus Jakarta font choice shocks me, I don't know it was that popular!
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
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 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 really like the workspace folders you put on the top, it feels better to work with multiple projects in a single window.
great lighting! you've come a long way, sir
Haha getting a wee bit better every time
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. 👀👀
Vs code is already a titan among ides
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
wanted to say that they updated their page and its looks like it took some "clues" from you :D
i love this redesign, it actually looks modern now!
Thank you 🙏
Your Concept towards the VS code editor.
It's nice, but there are some absence of, the tab which consist of files, edit, selection, run and much more and some missing of refresh, remote and "ctrl + p" or "ctrl + shift + p" tab.
I am happy with your concept, but there are many missing features Let me take more space to adjust the IDE.
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
@@DemystifyingDesign Great redesigns by the way. Very thoughtful approaches to each change. I would download your version over the current version of VSCode. I think tools that try to be everything to all people are useless to everyone. But that is my own rhetoric. I believe that tools that are focused on activities for a particular task work best.
clicked assuming this would be another click bait but damn wish if vscode looked like that great channel btw subbed and liked.
Welcome!n
INSANE. ABSOLUTELY AWESOME.
You're awesome 😎
the current UI of vscode is just fine I think.
Agreed
that was so good, you are very good in it
Thank you 🙏
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
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
In the next episode: "We teach Messi how to play football" 💀💀
I actually think Segoe UI was a good font to use for text. Using Plus Jakarta Sans doesn't really look fitting as I think it's more good as a display font rather than it being used both for display and text.
(as a side note, the current CEO is Satya Nadella, not Bill Gates)
Well yeah but Bill Gates is an easier target for jokes :)
@@DemystifyingDesign fair enough.
probabaly i am ready to user your design
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 😂
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
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)
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!
This is awesome!
I'm a developer, not a designer, but I really don't like many of the changes you're proposing.
Having the branch and other git actions in the files tab doesn't make sense to me. Editing/writing/fixing code are very different work flows compared to doing branch work like merging, rebasing etc. Having all that in a different tab with just a small branch indicator at the bottom of the editor makes much more sense to me.
How would the search element in the files tab behave when clicking into it and starting to search? Would the files tab suddenly become the search tab? Would the file list just be filtered (instead of searched)? Theres much more to it than just placing a simple search box and button there.
Having expanded folders be slightly brighter feels like horrible design to me. Why should it be highlighted just because it's expanded? Highlighting places emphasis and doesn't communicate state to me. Besides, the opposite, being greyed out, already has a meaning (ignored by git), so it's double confusing handling 3 highlighting states that mean very different things.
Sorry, but your suggestions seem nice looking at a glance but are not well thought through, imho.
> How would the search element in the files tab behave when clicking into it and starting to search? Would the files tab suddenly become the search tab? Would the file list just be filtered (instead of searched)? Theres much more to it than just placing a simple search box and button there.
Yeah I should have spent more time showing the nuances in the design, but cut myself short for time. I was expecting that when you were to engage with the search element in some way, you would be taken to a "search" context, where you could search between files and text. Obviously not as useful to simply type out my expectations here than show it in Figma!
> Having expanded folders be slightly brighter feels like horrible design to me. Why should it be highlighted just because it's expanded? Highlighting places emphasis and doesn't communicate state to me. Besides, the opposite, being greyed out, already has a meaning (ignored by git), so it's double confusing handling 3 highlighting states that mean very different things.
Are you referring to the highlighted background? Or the lighter color itself?
> Sorry, but your suggestions seem nice looking at a glance but are not well thought through, imho.
As I've mentioned in a few other comments, if one were redesigning this in the real world, you'd need to start with wireframing, do a bunch of prototyping and user testing. Since this is an experimental redesign for RUclips, I took a few liberties to embellish things and try some more unique approaches. I understand some of them may not be the best UX (because I haven't tested them with real humans), but it makes the video more interesting, and that's my main goal for these.
Thanks for your feedback! Always appreciated
Mind blowing bro ❤❤❤
Damn! Looks so good. Can you redesign my life😍
I’d pay for this theme.
Redesign their main website also!
@VSCode... Please add the modern design changes pls
Ad more head space for tabs and cluttering the files panel shrink space for code and file structure respectively, though the design looks pleasing to the eye, but it's not really practical, specially for smaller screens. These are my perspectives as a developer.
Thank you for sharing - this is solid feedback!
they need something like productivity and the workflow of VS Code and the newest UI of InteliJ
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.
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.
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!
Hot take, Smojo is one of the best general programming language ever. What do you think? 🤔
Never heard of it 😅
when i'm installing vscode is cause i need it in that moment. never really cared about the landing page
Someone please tell me how to tag the visual studio code design team. They have to watch this video.
Segoe UI is my favorite, and segoe ui variable too
My first time here, I like your editing skills, and also your articulation. But I'm having a little trouble hearing you talk with the music in the background being a little too loud for me.
Anyway you deserve my subs.
Yep, gotta work on my audio for sure
You just made a JetBrains IDE.
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! 😀
Personally, I’d finally use it over the others
The workspace tabs, I hate it.
I'm a programmer, I work one project at a time, not twenty like tabs in a browser, I already have a bunch of files open per project and my workspace is saved there just fine.
I also dislike how you shrunk the console windows and disregarded the branch info in the footer to clutter up the file structure.
It all feels more click focussed than keyboard and productivity focussed.
The only thing I really like is the file path breadcrumbs. Makes it a lot clearer which x.ts file I'm in. But I feel like this design might interfere with my sticky code nesting.
Valid feedback! One thing that sucks about Figma is the interface is really hard to test until you get it into a clickable proto. So much of what you're saying here would be likely handled in user feedback sessions down the line
@@DemystifyingDesign yup, indeed
Can you port it for Android (like VHE Editor)
What do you mean?
I guess some people are so used to the static webs for the these kind of software
What do you mean?
do DAWN news website next please
Added it to the list!
Hey , guess who re-designed their landing page !😂
And it almost looked familiar... (*wink)
I know!!
I came to the video when I saw that they updated the page LOL
Loved it ❤
13:06 Wordpress is the best programming language
Unronically believed by just about every marketing agency I've ever worked with 😅
meanwhile I'm CURL-ing the download.
Exactly
i really love this design. keep going bro
How did you manage to clutter VSCode? How man? Also, we don't care about copilot
Lmao 🤣
Tbh, I think your UI, as clean as it may look, strafes too far from vscode's ux, which is to be as minimal as possible so that you have more screen real estate for the important stuff, and as simple to use as possible. You've missed the minimality
Still a good UI though
Yeah that's fair! It's tough to make a redesign meaningful enough to be a good video without making sweeping changes though!
it looks like tailwind now
Your very talented
Thank you for the kind words 🙏
very nice redesign
Thank you 🙏
My god, this is one sexy website! I am definetely going to steal some ideas here 🙂
Steal away I won't tell 😉
0:28 I think you never acces distro watch kkkkkkkkkkkkk
well done
Love it ❤
You had me up untill you tilted the product ui and again when you tilted the copilot UI in the OTHER direction
Not sure I'm following
@@DemystifyingDesign Yeah, The entire design is perfect. EXCEPT the tilt of the Product UI, It looks disoriented. Probably because it is a tilt in all three x, y and z axis.
The co-pilot UI could have stuck to the same orientation except that it is in the other direction making both of them look awkward.
I would have preferred it the image is rotated on exactly one dimension. and that both screens use the same rotation with one on top of the other
Bro you can’t open multiple projects on the same VSCode instance its gonna coz hella confusing especially with git and npm so don’t
Ok I won't 😬
awesome ❤
Nice
What if we started to change VS Code to fell like this?
Well, VS Code is under MIT license. So we could really modify it to match with your design.
'cause, for real, this design you made is fire. Tbh, I didn't like some things - like the terminal position, often I have 2 terminal side-by-side, and this design seems not to be so good to have 2 terminal side-by-side - but the majority is REALLY good!
Do 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
Glad this guy never went to Vim webpage
It's up next 😉😉
this is cool
😎😎😎
This looks amazing but i use Neovim
I am not worthy!!
you actually have to say visual studio code cause visual studio is something else
as a frontend developer I can said there I would love to write the code for that design. Excellent job man! 👏
"You for sure have it installed on your computer already" Uh honestly no, moved to neovim myself lol
What a chad
great idea, but i think it has less coding space than the original
Yeah fair enough - definitely room for testing and iteration here 👍
Just starting the video, it's funny first thing you do is replacing Microsoft owned font by a google font 🤣
Get rekt Microsoft 😅
For a designer trying build a brand image, you sure play fast and loose with the actual brand name - “Visual Studio Code” is a distinct product. Throughout the video you called it “VS Code” (my favorite), “Visual Studio” (which is a different product - yes, MS sucks at naming, but it is what it is), “Visual Code” - just NO!
It hurt my feelings, that the example js code is a package.json
I'm a developer, I don't need fancy designs
Sorry, you can no longer opt out 😉
This literally looks like zed
just so you know
you wrote "visual studio" in your thumbnail... visual studio and visual studio code are different apps.
Uh oh.......
i am sorry, but a secondary tab bar to a primary one is just an ux nightmare.
it is second only to a modal opening a modal...
also, you can not just simplify "vscode" to "visual studio", as they are two totally different products.
Unfortunately you can't assess UX without testing this with users, the double nav is definitely something you'd want to test quite a bit
@@DemystifyingDesign well, yeah, generally that is right, but i say that from experience in years of ux development and testing.
we've done those tests, and they failed every single time.
One thing you learn very early in UX is that you have to be careful to leave your own bias at the door and let the design work for itself. I've had countless flows that seemed to be "bad UX" upon inspecting urn out to be extremely easy to use somehow
I dislike the project switching tab ui...
Copilot needs to be an optional thing that can be turned off.
Agreed!
Vs code to vs Explorer
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🤣
Nice