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

  Рет қаралды 78,967

Demystifying Design

Demystifying Design

Күн бұрын

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

Пікірлер: 417
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
UPDATE! Looks like since I uploaded this, VSCode actually updated their landing page....and it looks *surprisingly* similar to my recommendations. Coincidence? You decide...
@TalhaBalaj
@TalhaBalaj Ай бұрын
It's still the same :/
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Hmmm, really? Maybe I got an a/b test
@TalhaBalaj
@TalhaBalaj Ай бұрын
@@DemystifyingDesign Yeah probaly.
@Fojony1985
@Fojony1985 Ай бұрын
Actually landing page is updated month ago.
@NFSCsapat
@NFSCsapat Ай бұрын
@@DemystifyingDesign You can still look at it from waybackmachine, its the second to last snapshot, ngl it looks clean
@ramsey2155
@ramsey2155 Ай бұрын
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
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Idk, Sublime is preeeety fast and lightweight....
@shivamshandilya5059
@shivamshandilya5059 Ай бұрын
​@@DemystifyingDesign sublime doesn't have as much extension support as vscode.
@Trizzi2931
@Trizzi2931 Ай бұрын
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.
@ramsey2155
@ramsey2155 Ай бұрын
@@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.
@markjohnmalanteno4655
@markjohnmalanteno4655 Ай бұрын
​@@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🤣
@justanaveragebalkan
@justanaveragebalkan Ай бұрын
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.
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
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!!
@brightlyvirya7500
@brightlyvirya7500 Ай бұрын
Visual Studio Code and Visual Studio is two different product
@arthurvanleeuwen9650
@arthurvanleeuwen9650 Ай бұрын
Yea I found that name change weird too.
@user-ml5em9eo2e
@user-ml5em9eo2e 16 күн бұрын
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
@nalstudio_official
@nalstudio_official 5 күн бұрын
Yeah I would've rather had the logo with "Code" written beside it instead of "Visual Studio"
@calcoph.
@calcoph. Ай бұрын
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.
@akatsukilevi
@akatsukilevi 5 күн бұрын
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
@DemystifyingDesign
@DemystifyingDesign 5 күн бұрын
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. 🤣
@akatsukilevi
@akatsukilevi 4 күн бұрын
@@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
@Shibi-graphics
@Shibi-graphics Ай бұрын
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.
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
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!
@TalhaBalaj
@TalhaBalaj Ай бұрын
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)
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Sublime does all of that too! But right now, if you want to use copilot, it's a hassle unless you use VSCode
@TalhaBalaj
@TalhaBalaj Ай бұрын
@@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.
@yaci8330
@yaci8330 Ай бұрын
@@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
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Yep, a few years back. We're in a different world now and the main differentiator *now* is native copilot integration.
@TheRevTastic
@TheRevTastic Ай бұрын
@@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
@MattiasMagnusson
@MattiasMagnusson 2 күн бұрын
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!
@tanguilouedec1052
@tanguilouedec1052 8 күн бұрын
"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
@DemystifyingDesign
@DemystifyingDesign 8 күн бұрын
Got to make sure you're awake
@Sky_theidiot23
@Sky_theidiot23 2 күн бұрын
​@@DemystifyingDesign😢it's 3 in the morning mann
@opposite342
@opposite342 Ай бұрын
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).
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Yeah that's a good point. I'll blame Microsoft for this and call it a day
@budgetarms
@budgetarms Ай бұрын
@@DemystifyingDesign yeah, its annoying indeed
@putdownthegun721
@putdownthegun721 Ай бұрын
great lighting! you've come a long way, sir
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Haha getting a wee bit better every time
@user-tb4ig7qh9b
@user-tb4ig7qh9b Ай бұрын
You need to call it visual studio code becuase microsoft already have visual studio
@msahu2595
@msahu2595 Ай бұрын
Awesome ❤ Loved the changes
@gianatiempo
@gianatiempo Ай бұрын
I would love a VSCode theme that looks like your redesign! I NEED IT!!!
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
We can dream 🥲
@thripnixe
@thripnixe Ай бұрын
@@DemystifyingDesign cant you give that via extension?
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
I could but I'm not going to - would take me like 3 weeks to build this out and include all the edge cases
@sobhanbhowmick
@sobhanbhowmick Ай бұрын
​@@DemystifyingDesign well... someone gotta do it 🤞
@Josh_Lawson
@Josh_Lawson Ай бұрын
@@sobhanbhowmick I'm working on one at the moment. I'll update once it's finished...
@samuelbarboza7574
@samuelbarboza7574 Ай бұрын
INSANE. ABSOLUTELY AWESOME.
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
You're awesome 😎
@eliecyammine
@eliecyammine Ай бұрын
And now I NEED THIS!!!
@imerence6290
@imerence6290 3 күн бұрын
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.
@crypso1526
@crypso1526 Ай бұрын
So satisfying to see your videos reaching a wider audience! Great insights on design choices yet again!
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Thank you! 🙏
@lditzel
@lditzel Күн бұрын
Disgustingly beautiful 😍, you need to send a proposal for this man. This needs to be the next visual studio code refactor
@madhurchaturvedi5551
@madhurchaturvedi5551 Ай бұрын
Great Work man appreciated
@kirsanov2008
@kirsanov2008 Ай бұрын
I like this UI of vscode, I would like to have it the way it showed in this video
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
What do you mean??
@Elgrecos
@Elgrecos 20 күн бұрын
​@DemystifyingDesign that he prefers your redesign of VS Code
@DemystifyingDesign
@DemystifyingDesign 20 күн бұрын
Ah thank you!
@manankanani321
@manankanani321 Күн бұрын
Loved it ❤
@itaamelia6715
@itaamelia6715 7 күн бұрын
that multi windows is absolutelly a must have future feature
@kamafozilov
@kamafozilov Ай бұрын
I love it!
@OwaisAthar1
@OwaisAthar1 Ай бұрын
Mind blowing bro ❤❤❤
@bardourbano
@bardourbano Ай бұрын
Man, you really made me like the actual vscode ui. Are you really designing for devs? Give me keyboard shortcuts and a CLEAN interface
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Boom! Keyboard shorcuts are now active
@iamgly
@iamgly Ай бұрын
I really like the workspace folders you put on the top, it feels better to work with multiple projects in a single window.
@maxwebstudio
@maxwebstudio 3 күн бұрын
Nice job !
@TobCraft
@TobCraft Ай бұрын
Great video!
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Thank you!
@jaskaransingh4704
@jaskaransingh4704 Ай бұрын
Love it ❤
@DanelonNicolas
@DanelonNicolas Ай бұрын
as a frontend developer I can said there I would love to write the code for that design. Excellent job man! 👏
@shad-intech
@shad-intech Ай бұрын
This was so satisfying. Great design.
@webapplicationsengineer
@webapplicationsengineer Ай бұрын
awesome ❤
@amine2196
@amine2196 Ай бұрын
i really love this design. keep going bro
@HenriAGS
@HenriAGS Ай бұрын
I would 100% download this!!
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Hell yeah!
@Markadown
@Markadown Ай бұрын
Really nice work. This would almost tempt me to us VS code. A really cool redesign.
@maurolimaok
@maurolimaok 22 күн бұрын
Nice video. Thanks.
@moussazraidi2859
@moussazraidi2859 Ай бұрын
very nice redesign
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Thank you 🙏
@em11l
@em11l Ай бұрын
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.
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Yeah like I said in the video, the editor itself doesn't really need a redesign, thank you for your honest feedback 🙏
@kpatterson395
@kpatterson395 Ай бұрын
The horizon separator is veryyyy nice!
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
It truly is the cutest little thing I ever saw
@petembugua
@petembugua 25 күн бұрын
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...😆
@DemystifyingDesign
@DemystifyingDesign 25 күн бұрын
Hahaha do it!!
@kvk812
@kvk812 24 күн бұрын
Congrats! You made it look really cool but you also just made the webpage look like any other developer brand website
@mr_snowman69
@mr_snowman69 Ай бұрын
Thanks, now I can spend the next 2 weeks customizing vscode to look exactly this
@Tintin-hh1gf
@Tintin-hh1gf Ай бұрын
if you do make guide ill fallow it
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Hell yeah
@4RV1DDesigns
@4RV1DDesigns Ай бұрын
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
@DemystifyingDesign Ай бұрын
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.
@4RV1DDesigns
@4RV1DDesigns Ай бұрын
@@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
@rasyasejati
@rasyasejati 20 күн бұрын
woah! that Plus Jakarta font choice shocks me, I don't know it was that popular!
@jason.zubiate
@jason.zubiate 23 күн бұрын
well done
@codewithfelix3940
@codewithfelix3940 Ай бұрын
i love the website u designed.. its what shud hv been there for real
@Ashaduzzaman21
@Ashaduzzaman21 17 күн бұрын
Vs code design is just superb
@scottfrost317
@scottfrost317 15 күн бұрын
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
@DemystifyingDesign
@DemystifyingDesign 15 күн бұрын
I did change the look on the main page, are you referring to another page?
@raevod6361
@raevod6361 3 күн бұрын
NO WAY THEY UPDATED THE PAGE IT LOOKS THE SAME!!
@hamburger--fries
@hamburger--fries Ай бұрын
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.
@karomba123
@karomba123 Ай бұрын
i love this redesign, it actually looks modern now!
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Thank you 🙏
@mazwrld
@mazwrld Ай бұрын
this is cool
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
😎😎😎
@shayantriedcoding
@shayantriedcoding Ай бұрын
Nice
@UTJK.
@UTJK. Ай бұрын
Now I need your Visual Studio Code organization. Damn! I would love a floating terminal though.
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Gah! Didn't think of that
@UTJK.
@UTJK. Ай бұрын
@@DemystifyingDesign When they'll copy your design of this video, you could propose it as the next iteration lol :D
@prodbyeagle
@prodbyeagle Ай бұрын
This looks so much better haha. i want that design lol🤣
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
You and me both!
@Art_holics
@Art_holics Ай бұрын
please do more redesign!!!! and also upload consistently plss so i have something to watch and learn
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Haha thank you I'm trying these videos are so hard to make!
@Art_holics
@Art_holics Ай бұрын
@@DemystifyingDesign hahaah i agree! i am also a ui ux designer, ( a beginner) i learn alot from this haha! welcomee!
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
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!
@UmarHamza
@UmarHamza 25 күн бұрын
Your very talented
@DemystifyingDesign
@DemystifyingDesign 25 күн бұрын
Thank you for the kind words 🙏
@nicolasmoises2720
@nicolasmoises2720 Ай бұрын
Really nice work, man ❤❤
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Appreciate you
@ego-lay_atman-bay
@ego-lay_atman-bay Ай бұрын
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?
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
They don't! But there are clear usability & messaging problems that if corrected will make the site more sensible and effective.
@lazarom9998
@lazarom9998 19 күн бұрын
In the next episode: "We teach Messi how to play football" 💀💀
@DanteMishima
@DanteMishima 15 сағат бұрын
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)
@cristinelcostachescu9585
@cristinelcostachescu9585 5 күн бұрын
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.
@DemystifyingDesign
@DemystifyingDesign 3 күн бұрын
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.
@moritzberg6722
@moritzberg6722 Ай бұрын
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
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Hell yeah that was the plan!
@tailwindmastery
@tailwindmastery 16 күн бұрын
probabaly i am ready to user your design
@alexdefoc6919
@alexdefoc6919 25 күн бұрын
Great job bro. You now have a finger print on a Microsoft site/app
@DemystifyingDesign
@DemystifyingDesign 25 күн бұрын
It's crazy!
@that_guy1211
@that_guy1211 29 күн бұрын
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
@GCoder-sl1sq
@GCoder-sl1sq Ай бұрын
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!
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Dude that'd be so cool keep me posted fo sho
@kinggrey2511
@kinggrey2511 Ай бұрын
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 ❤
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
I think this will satisfy my redesign needs for at least the next few weeks 😅 thanks mate!
@Retrosen
@Retrosen Ай бұрын
please vs hire this guy
@AbdulWahab-pk4jx
@AbdulWahab-pk4jx Ай бұрын
Good video, salute to you for creating these amazing videos 🫡
@Rikaisan
@Rikaisan Ай бұрын
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!
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Thank you! What do you disagree with out of curiosity?
@Rikaisan
@Rikaisan Ай бұрын
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
@DoNsMaK190
@DoNsMaK190 18 күн бұрын
clicked assuming this would be another click bait but damn wish if vscode looked like that great channel btw subbed and liked.
@DemystifyingDesign
@DemystifyingDesign 18 күн бұрын
Welcome!n
@echobucket
@echobucket Ай бұрын
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.
@MaxPlayle
@MaxPlayle Ай бұрын
Phenomenal improvements! Why not submit a PR to the VS Code UI, would really like to see this!
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
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 ;)
@MaxPlayle
@MaxPlayle Ай бұрын
@@DemystifyingDesign I reckon they should, you know! 😂 Wayyyyy better than what they’ve currently got going on 😂
@hexxt_
@hexxt_ Ай бұрын
doesnt seem like much of an improvement
@naranyala_dev
@naranyala_dev Ай бұрын
there are a lot of apps need to redesign, more please
@biplabmahato5562
@biplabmahato5562 Ай бұрын
Is there a way to make vs code look similar to the design shown in the video by maybe injecting css?
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Maybe? I'm sure a custom theme can be made but I have no idea
@cristoslaher
@cristoslaher 18 күн бұрын
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!
@DemystifyingDesign
@DemystifyingDesign 18 күн бұрын
Yeah fair enough I can totally understand a use case for new projects in new windows
@charlesdotdev
@charlesdotdev 19 күн бұрын
Can you give me that design guide you had in the file the one with the typography and color pallette?
@DemystifyingDesign
@DemystifyingDesign 19 күн бұрын
It's in the Figma file in the description
@42pe
@42pe 5 күн бұрын
I’d pay for this theme.
@lazarom9998
@lazarom9998 19 күн бұрын
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. 👀👀
@meno437
@meno437 20 күн бұрын
Bro just turned vs code into a saas startup
@DemystifyingDesign
@DemystifyingDesign 20 күн бұрын
Just a hard days work
@fgpreviews
@fgpreviews 17 күн бұрын
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.
@DemystifyingDesign
@DemystifyingDesign 17 күн бұрын
Context switches as a UI designer are just as expensive, yet Figma still has tabs. Do you think that's a mistake too?
@fgpreviews
@fgpreviews 11 күн бұрын
@@DemystifyingDesign Categorically, yes. Also last time I checked, Figma has tabs for within projects, not tabs of projects.
@matsecrafter304
@matsecrafter304 Күн бұрын
Is it possible to get the vscode redesign as theme or something or is it just figma?
@DemystifyingDesign
@DemystifyingDesign Күн бұрын
Yeah search for VSCode 2.0 in the plugin marketplace - a subscriber of mine made one!
@matsecrafter304
@matsecrafter304 Күн бұрын
@@DemystifyingDesign Thanks for the fast reply but the extension is far from being as satisfying as your design but also probably because of technical limitations
@syedmuhammadsameer8299
@syedmuhammadsameer8299 3 күн бұрын
I didn't die with cringe because the software is quite good, and I just downloaded the product without thinking about how the landing page looks. Plus it has been 5 years since I did it. Later versions were just downloaded from the command line or the app store
@syedmuhammadsameer8299
@syedmuhammadsameer8299 3 күн бұрын
Clearly I typed this at the start of the video. I love the redesigned website, although I would probably still not scroll it. As far as the editor goes, I feel like its perfect as it is apart from the default color theme which I have obviously changed. The problem with keeping a small terminal pane is that I wouldn't be able to open multiple terminals side by side which are helpful when working with mono repos and you wanna have the server and client running side by side. Also, this makes the terminal smaller which would make it harder to read logs while debugging, which wouldn't be a good UX. I'd rather have all the terminal space to read the weird data I have my APIs reading I can even if it isn't the most aesthetic choice out there.
@DemystifyingDesign
@DemystifyingDesign 2 күн бұрын
Thank you for the solid feedback 🙏
@kenshiro1992
@kenshiro1992 Ай бұрын
My god, this is one sexy website! I am definetely going to steal some ideas here 🙂
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Steal away I won't tell 😉
@minecraftjohn727
@minecraftjohn727 Ай бұрын
Segoe UI is my favorite, and segoe ui variable too
@jwstinthesky2677
@jwstinthesky2677 Ай бұрын
I don't know if it's just me, but you practically transform vs code into JetBrains Webstorm 😅
@clickadelic7681
@clickadelic7681 Ай бұрын
Now, where is the download link to the visually appealing VS-Code Version 😀?
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
😬😬😬
@Art_holics
@Art_holics Ай бұрын
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??
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Those are good ideas many people have asked me for that I think it's time I make it happen
@theMadZakuPilot
@theMadZakuPilot Ай бұрын
@@DemystifyingDesign yes please
@Art_holics
@Art_holics Ай бұрын
@@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
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
On it 😎
@patahgaming
@patahgaming 17 күн бұрын
Cool now i can appreciate for 2 more second before scroll down and click download
@nerdg2
@nerdg2 Ай бұрын
Hi, do you mind if i patch vscode with your design ? I'm currently on a ricing run :D Great design btw! Looks clean.
@DemystifyingDesign
@DemystifyingDesign Ай бұрын
Go for it! 😀
@lourencorosado9097
@lourencorosado9097 3 күн бұрын
Project switching tab seems a great ideia. I would like to try it out. But I can see some concerns around memory
@DemystifyingDesign
@DemystifyingDesign 2 күн бұрын
Totally fair
@user-bw6lh5xk2x
@user-bw6lh5xk2x Ай бұрын
when i'm installing vscode is cause i need it in that moment. never really cared about the landing page
@rappingtornado1417
@rappingtornado1417 26 күн бұрын
Anyone know editor used to make this redesign?
@DemystifyingDesign
@DemystifyingDesign 25 күн бұрын
Figma!
@alexanderminev
@alexanderminev Ай бұрын
Personally, I’d finally use it over the others
@jwankrho
@jwankrho 3 күн бұрын
Great design. I might be able to create a custom code editor with that design, but I would need your permission first.
@DemystifyingDesign
@DemystifyingDesign 3 күн бұрын
Someone already did! Check @JoshLawson's comment below
@jwankrho
@jwankrho 3 күн бұрын
@@DemystifyingDesign sadly couldn't find the comment
@DemystifyingDesign
@DemystifyingDesign 3 күн бұрын
I think it's in the reply to my pinned comment
@DemystifyingDesign
@DemystifyingDesign 3 күн бұрын
It's also called "visual code 2.0" in the VSCode plugins menu
@jwankrho
@jwankrho 3 күн бұрын
@DemystifyingDesign no no, I don't mean as a plug-in, but rather from scratch
@SarimAshrafi
@SarimAshrafi 5 күн бұрын
Redesign their main website also!
@mdev790
@mdev790 18 күн бұрын
You just made a JetBrains IDE.
How to Properly Layout A Website (For Beginners)
14:50
The Website Architect
Рет қаралды 533 М.
Reacting to 21 Design Portfolios in 22 Minutes
22:41
Flux Academy
Рет қаралды 510 М.
100❤️
00:19
MY💝No War🤝
Рет қаралды 21 МЛН
KINDNESS ALWAYS COME BACK
00:59
dednahype
Рет қаралды 145 МЛН
*Next-door 10x Software Engineer* [FULL]
4:50
Programmers are also human
Рет қаралды 338 М.
This GitHub CSS Exploit Is WILD
6:25
Theo - t3․gg
Рет қаралды 140 М.
I REDESIGNED the Arc Browser from Scratch
6:10
Nikhil Kulkarni
Рет қаралды 34 М.
Cool Tools I’ve Been Using Lately
23:11
Theo - t3․gg
Рет қаралды 211 М.
My Minimal and Beautiful VSCode Setup
10:55
Josh Cirre
Рет қаралды 28 М.
7 Portfolio Websites designers NEED to see
6:14
Andres The Designer
Рет қаралды 164 М.
The Secret Science of Perfect Spacing
9:40
Chainlift
Рет қаралды 369 М.
Watch me hack a Wordpress website..
28:52
Tech Raj
Рет қаралды 133 М.
I tried 10 code editors
10:28
Fireship
Рет қаралды 2,9 МЛН