The New Visual Studio Code Design

Подписаться 1,5 тыс.

Просмотров 90 тыс.

50% 1

I gave Visual Studio Code a new redesign, using Fluent UI 2.
With a brand new UI, redesigned status bar / status widget, all new extensions page, settings page, and accounts page.
Need help with some code? Ask copilot about it. Right click on an error to find out what it means, all with whatever AI engine you want. Bing AI, Phind (GPT-4), GitHub Copilot, or Google Bard.
The project I featured in the code editor is HQLauncher! I'm making the concept real.
HQLauncher post: www.duckyhq.co...
HQLauncher GitHub: github.com/duk...
This is just a concept, NOT a real product.
I am not affiliated with Microsoft.
---
Music: • The new Outlook for Wi...
---
⭐Get access to behind the scenes, and sneak peaks to my up and coming videos!
/ dukc
Website: dukc.dev
Twitch: / dukcccc
Discord: / discord
Software:
- Figma
- Adobe After Effects
Specs:
- RTX 3060
- AMD 7 3700x
- DDR4 4000, 32GB

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 211

@CahitbeyAdiAlinmis 11 месяцев назад

It looks really good i really would like my VS 2022 looking like this. Also rounded up edges and option to adjust the distance between windows slightly would be really good as well.

@69qwerty 10 месяцев назад

nah. the normal vscode feels far more lightweight than this. this feels like more of an IDE look, but its a great UI for something like webstorm. Good job

@abhikb 10 месяцев назад

It looks very COOL

@ciberman 10 месяцев назад

This could be easily a microsoft product

@jqmsi 11 месяцев назад

i wish this was real :) this looks awesome!

@IamPyu-v 10 месяцев назад

I am an Emacs user but this is sick!

@VarunKadapatti 11 месяцев назад

Hello I really loved this!! Please can you tell me how you edited your video in this manner? What tools did you use and is there any tutorial for the same? I'm assuming you have used Figma for the design. Thank you!

@dukkcc 11 месяцев назад

Thanks, I used adobe after effects to edit this.

@VarunKadapatti 11 месяцев назад

@@dukkcc Okay thank you!

@0xtz_ 10 месяцев назад

woooow this is amazing we need this UI in vscode hhhh. u need to open a pr hhhh

@fish_with_head_1 10 месяцев назад

Как установить или это концепт?

@xanachocolat 9 месяцев назад

I want it

@aniketpriyadarshi2801 11 месяцев назад

Nah, I prefer the more classic look.

@someonesgarbage 11 месяцев назад

unlike other concepts. I really think this one feels the most "microsoft". The music, animation, the design and more. Good job on the video!

@Somecode14 10 месяцев назад

this is literally the music from Microsoft's Outlook Redesign announcement video on their official channel

@someonesgarbage 10 месяцев назад

lmaooo@@Somecode14

@varonex3449 10 месяцев назад

@@Somecode14I was looking for this comment 🙏

@ELEC7RO 10 месяцев назад

And I'd actually use this UI compared to other concepts

@cheesypizzajokes 10 месяцев назад

Very Windows 11-y

@Murphs_Law 9 месяцев назад

Those who want's this irl 👇🏻

@n1ades 10 месяцев назад

I'm so proud that Microsoft doesn't use this, so much space is wasted in this variant. This is good for landing pages but not for IDE.

@dimitrioskoulartsas6184 11 месяцев назад

It looks cool, but there is too much free space around the components. I prefer more compact designs, as they can fit more code in lower resolutions (like 1080p). Closing, I want to point that for me it's very important to start quickly and be responsive. I find VS Code too slow, so I prefer NvChad, especially when I am dealing with big files, or projects that require heavy extensions, like Salesforce.

@vladimirkruzhkov3516 9 месяцев назад

more unused space yeeees less space for code yeeeeeah microsoft fluently goes to kill vscode

@MockupConcepts Год назад

wish this was real, looks awesome!! copilot integrated in vsc is definitely something I’d use a lot too 🎉

@dukkcc Год назад

thanks!

@t3duk Год назад

copilot intergration is alredy t hing

@MockupConcepts Год назад

⁠@@t3dukif you’re talking about GH Copilot that’s not what I mean, otherwise since when was it integrated 😭😭

@BobRossRightHand Год назад

@@MockupConcepts Copilot Chat became available to all Copilot subscribers like Wednesday I think

@bigspeedfpv 11 месяцев назад

@@MockupConcepts copilot chat does the same thing

@innocentrag Год назад

What do you use to edit your vids? They seem very professional and clean

@dukkcc Год назад

I used after effects to edit it, and designed the ui with figma

@MWORAAA 9 месяцев назад

Man, if Microsoft do this i will use VSCode forever.

@groophylifefor2122 Год назад

This UI is similar to the template in windows applications, but since vscode is based on electronjs, it would be a very unnecessary effort to write stable UI libraries. there are already a lot of internal UI libraries

@ZeykaFX 11 месяцев назад

Microsoft already made fluent ui for react.

@Pseudo___ 11 месяцев назад

meh

@tux-bu2zv 10 месяцев назад

microsoft needs to hire you bro

@theevilapple_ 11 месяцев назад

Microsoft needs to see thins and make it real.

@cloudwolf3972 9 месяцев назад

I really wished RU-vid had videos about concept designs like these but for Linux, like redesign for KDE Plasma, Gnome or just redesigning Linux apps in GTK or QT design. Microsoft really doesn't give a fuck for UI/UX consistency, even if they start to work on it, they will drop it in the next Windows release when they decide to completely change the Windows visuals, so you're left of with apps with old design and new apps with brand new designs.

@cloudwolf3972 9 месяцев назад

For example, KDE Plasma really need a redesign for its settings window.

@ConceptCentral Год назад

This design is perfection 👌

@dukkcc Год назад

Thanks!

@ivanl7786 4 месяца назад

It doesn't work! I have installed Microsoft Visual Studio Community 2022 (64-bit), Version 17.9.6 on Windows 11. Visual Studio UI Refresh cannot be enabled. There is no “Experimental control styles” in the 'Manage Preview Features' section. I see something similar: 'Experimental Manager UI Refresh'. Unfortunately, even restarting Windows does not give any results.

@zezic 9 месяцев назад

Cringe. Wasted vertical space. Extensions page is already good enough. Status bar sitting in the terminal area and taking 1/4 of window height?

@futured_it 10 месяцев назад

I'm very sorry to author, but this is just inconsistent. I hate Fluent Design 2 by Microsoft overall, but, just, imagine this on 13" laptop (like Surface Laptop or MacBook Air). Maybe it's ok for everybody else but the UX in my opinion is just worst here, like you have way less space everywhere. I hope no one will make real IDE or 3D software with Fluent UI 2.

@mhb3262 9 месяцев назад

It's nice but bad placement for menu items (file, view, ...). They aren't horizontally or vertically aligned with other sections.

@gingeral253 11 месяцев назад

Looks complicated

@beatsbycf 10 месяцев назад

vsc please do this

@HikaruAkitsuki 10 месяцев назад

Well… It gonna be a shame if Frontend/UI/UX designer still using an ugly text editor like VS Code. So we indeed need to revamp it.

@DanniDuck 10 месяцев назад

Sometimes I really wonder who these people hire to make their UIs. Have they never used Figma before? It just feels like it's not very "modern."

@piscopancer 11 месяцев назад

🤮🤮🤮 having margins and rounded corners this shitty design reminds my of new windows media player. What Code currently looks like is the peak of style, what I saw in this video is no comparison

@unjak_x 10 месяцев назад

now lets imagine for a second that this will have to be ported to linux, that's when the problems would start...

@alejob54 4 месяца назад

This should be a theme that we can download.

@saiko4972 10 месяцев назад

What if I don't need Copilot in my code editor. Can I have just only code editor? I don't need IDE. Then why not add the browser inside?

@simonmaracine4721 10 месяцев назад

I don't see a difference. Also VSCode needs to be more performant, as now it's often very sluggish and slow.

@sniffmaster6904 2 месяца назад

Bro who's still using this memory barbeque in 2024?

@kollpotato 11 месяцев назад

Looks worse ngl

@teosfikas8289 10 месяцев назад

nah sorry this is not my mood. But good work from a stylistic perspective. I would think it loses some usability.

@iamdozerq 10 месяцев назад

can you just make it runs faster than 5 seconds and without huge white screen on startup please......

@bukh 10 месяцев назад

I really like it. wish it was real. maybe one day

@gabrielmedeiros9806 9 месяцев назад

And the lagging? Here if I use git lens, my vs code always stop

@aidenwong 9 месяцев назад

I'll pay the price as same as Jetbrains IDEs if VSC is like this.

@5jubs 10 месяцев назад

Instead of VS Code, the VS IDE should be Like this...

@tutatis96 9 месяцев назад

Feels very Microsoft and that would make me switch to vim

@crowvampire 9 месяцев назад

I prefer a clean interfaz like vim, and keeping the rest of tools in my mind

@lewizooo 8 месяцев назад

Wait, no one can create a VSC Theme with this design?

@Dino-Kupinic 11 месяцев назад

wastes alot of space matches windows 11 but not very effective

@juanfernandoechavarria2457 9 месяцев назад

You can search a specific word in a specific scope but not in all file ?

@ecengclub7196 10 месяцев назад

Not bad but this is more like IDE than an code editor.

@throwaway-lo4zw 9 месяцев назад

menu and tabs look weird because theyre not aligned

@echtertill 10 месяцев назад

Nice concept, but it's too much Microsoft-ish in my opinion

@maurolimaok 9 месяцев назад

I'm on my first steps on Odin Project, at 56yo, so a complete newbie! I would love to install this theme on VSCode. Great job. Aesthetic is important for productivity.

@dukkcc 9 месяцев назад

Thanks, this video is just a concept but I found this extension that kind of replicates the look marketplace.visualstudio.com/items?itemName=leandro-rodrigues.fluent-ui-vscode

@kurushimee 11 месяцев назад

Would be even better if more compact, which you can do while preserving Fluent 2 design

@feris0 11 месяцев назад

And rewrite to Tauri, electron is slow

@Hexality 9 месяцев назад

too muh wasted space on spaces though.

@ReDesigns Год назад

wow, VERY nice, also I am very impressed by the amount of views and likes it got in only 1 day. BTW, what song is it?

@dukkcc Год назад

thanks! I took the music from a Microsoft ad, it’s in the description

@KidusDawit-j9f Месяц назад

Maybe you should provide a css file for the design and use the custom css and js extension for vscode

@KidusDawit-h9g Месяц назад

You could also make an extension for it

@lokomen9 11 месяцев назад

DO NOT MAKE IT A NATIVE APP. ALL OF EM SUCKS

@AndresJoaquinNino 9 месяцев назад

It makes sad that this is just a concept :(

@xcrap 11 месяцев назад

I love it, i really like the spacing and "breadability" if that's a thing. A beautiful designed environment also helps me coding :)

@colebot 10 месяцев назад

I think this is really well-made. Although I'm starting to get sick of the Windows 11 look already, and I don't think I would like VSCode to look just like the calculator app. Also, I really, really hope that Microsoft does not add any copilot and AI bloat into this app. AI is great, but not great enough that it should be integrated as a chat sidebar in every single app. If the user wants that kind of AI, they can pull up the copilot thing natively in Windows, or open a browser tab with Bing. VSCode definitely needs more space, though, and a redesign like this makes everything comprehensive to access.

@thomasjodt 9 месяцев назад

This is real? Can it be used at this time?

@a-yon_n 11 месяцев назад

All I wish is that VScode can consume fewer system memories.

@Coms_Productions 9 месяцев назад

Would it be possible to somehow get this UI onto VS Code? This looks clean as shit, lovin it.

@dukkcc 9 месяцев назад

Thanks, this extension I found kind of replicates the look marketplace.visualstudio.com/items?itemName=leandro-rodrigues.fluent-ui-vscode

@CaptainDawah 9 месяцев назад

I wish it to be real. Oooga Booga

@Jelte_Dijkmans 11 месяцев назад

Why not make this a extentions, to do some of these things

@spxctreofficial 10 месяцев назад

As a Neovim user, this scares me

@the_Kriko 10 месяцев назад

I need it now

@zanylyf 2 месяца назад

@microsoft watch thiss

@jvne_ 10 месяцев назад

I wish microsoft would pick one design philosophy and just stick with it lol

@dukkcc 10 месяцев назад

yes

@W1L7dev Год назад

Wow I just wanna code this 💀. This is awesome!

@dukkcc Год назад

thank you!

@geomorillo 11 месяцев назад

Imagine this made with rust

@xsamueljr 10 месяцев назад

This couldn't be done via an extension? It would be so popular

@dukkcc 10 месяцев назад

There is one that changes some of the ui, not fully though. (It’s just called Fluent UI for Visual Studio Code)

@winchester2581 11 месяцев назад

It would be great if Microsoft ported VSCode to their WebView2 engine using something like Tauri, like they did the same thing with their Teams app using their own WebView2.

@ivanovchin 10 месяцев назад

i why when trying to install node js dependencies happened this error? npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead npm WARN deprecated asar@3.2.0: Please use @electron/asar moving forward. There is no API change, just a package name change npm WARN deprecated electron-osx-sign@0.6.0: Please use @electron/osx-sign moving forward. Be aware the API is slightly different npm ERR! code E404 I am tried node js 17 version and last 20 version. Can u help me?