Did you know that you have an amazing tool for designers staring you straight in the face – you just need to make a few important changes and then get it into the hands of every designer you can find.
Let's face it, you already have developers and they are amazing – but you are leaving the UI and UX to them as well (scary, I know), this is all because designers don’t have the best tools available for designing app for Windows on Windows.
Beautiful code is great to look at when you are a developer, the problem is that code doesn’t create excitement like an elegant design does – and this is a major piece that is hurting Windows as a platform.
I go look at sites like Dribbble.com, I see a ton of iOS and Android designs of cool apps – if you go on the web and search for iOS and Android apps you will also see awesome websites for those beautiful apps. This doesn’t happen for Windows – you have virtually ZERO visual presence online which in return creates ZERO excitement in the platform.
You must get every designer excited about Windows again, how do you help make that happen? Give them the right tools…
Blend for Visual Studio
Most people use Photoshop to create their concept designs, then they convert them to html/css/XAML, etc. as code and then hand to a developer to do the backend. While this is still a valid way of doing frontend UI it’s slow and tedious, especially with there being so many types of devices and platforms to design for today.
One notable app has already started this new way of designing UIs, it’s called Sketch and I know there are countless designers who love this app. The problem is that it’s only available on a Mac and they have said they have no interest in bringing it to Windows.
This got me thinking that this might be an interesting project, re-build Sketch but for Windows – while a daunting task, it would be amazing for us designers on Windows. The more I explored the idea and thought about it, the more I realized it kind of already exists – Blend for Visual Studio
In a quick compare and contrast between the two apps I discovered that Blend already has many of the core pieces in place – however, there are some critical pieces that still need to be integrated to fulfill my needs.
Here are the existing features already in place:
- Project Based
- Vector Based
- Layer Based
- Pre-Defined Objects/Controls
- Though could be refined
- Object Properties
- Margin / Padding
- Pre-Defined Device sizes
- Flexible toolbar menu
- Sample Data
- Snap to Grid
- Shapes and Containers
That is hardly a complete list, but 90% of what I would want for designing apps as a replacement for Photoshop already exists in Blend, so what’s missing?
Much Needed Features
There are a couple ways this could be implemented, potentially you could do it either way.
- Keep the individual page model in that each page actually exists in the project – but have a “Artboard” view that allows me to view/edit any pages I want in one view on a (infinite canvas)
- Any changes I make would automatically be applied to the actual page.
- This would allow me to quickly see how may pages look side by side and quickly allow me to make adjustments or re-use elements as needed
- This would also allow me to see the “Flow” of the application
- The other option would be to only have an infinite canvas (just like Sketch does) but with multi-sized artboards
- It’s possible as a designer that I wouldn’t necessarily want to have multiple pages for concepts, for instance I might have a login page and I’d maybe want to show inactive state, active state and alternate layouts. I certainly wouldn’t want a whole new page file for those but I would want to see it as it’s only artboard.
- The third option is to have a combination of both, start with an infinite canvas, and then right-click on an artboard and say “generate file/page” – and let me pick and choose which ones actually create a true page.
One possible idea would be that a Visual Studio Project would have two “views”, a Designer view which has all my artboards and such, and then a Developer view that shows all the individual pages that the designer has deemed important enough to be generated into an actual page ready for coding.
Additional Pre-Defined Device Templates
- Right now there are only a handful of device sizes listed as options, it would make sense to have presets for iOS, Android, Windows (Desktop, Tablet, Phone, Watch, etc.) sizes.
- This will help bring non-windows designers into the world of Blend
- Custom Device Sizes would be nice as well
Better Alignment Tools
While there are some alignment options in Blend, they need some work
- When I drag a shape around, I want to see smart guides when the edges line up with another shape, this sort of works now, but for some reason there is a 40px gap between edges when the guide shows up.
- When moving a shape or control, and the center points align, I want a smart guide to show up and have it snap automatically
- When I re-size a shape and it reaches an edge or middle of another shape I again want it to snap and show smart guide.
Long story short, I want alignment options exactly like you have I PowerPoint (yes that PowerPoint) – they are surprisingly super powerful.
- For the love of all things holy, please fix the order of Margin and Padding value boxes to match the order of what you would do in CSS
- Right now they are (Left, Right, Top, Bottom), in CSS it’s (Top, Right, Bottom, Left) – it should be this order in the XAML as well.
- We need a more user-friendly way of viewing/editing global object Styles
- We need an easier way to edit control templates, it’s too hard to edit all the XAML code for a specific control (especially for a designer).
- More filter effects (blur, drop shadow, blending modes, etc.)
- Support for repeating patterns
- I want to see an easy way to define colors palettes, control styles, etc.
- I want all colors I am using throughout the app to be in a color palette automatically
- I should be able to easily access those things as well in an elegant visual way
- I want to be able to pull in assets from various online services
- Fonts, Icons, Color Pallets, even other layouts that people have created for general use
- Need an easy way to quickly build grids to display repeating content, Sketch does a great job of this.
- I should be able to export to any image format (jpg, png, maybe even PSD)
- Export to SVG, XAML and iOS storyboards and Android formats
- Export to HTML / CSS – certainly not all values would be able to work between XAML and HTML/CSS but you could align many of the properties to still make it useful.
- I want to see my UI on any device I have connected to my local network (per approval) in real time
- I want to be able to use my finger on said devices and tweak the UI ON THE DEVICE
- I want this tweak to automatically know that the device is a phone that falls within a particular defined visual state and have it apply only to that visual state, not the desktop or tablet state as well (but would want the option to apply to all states)
While it seems like there is a lot that is missing, I think the core concepts are in place and if you can add a couple of these other features in every 4-6 months (starting with Artboards) I’d be a pretty happy designer and my workflow would speed up considerably.
This tool needs to be free, it needs to work for Windows, iOS and Android UIs and it needs to have some UX improvements to make designers feel comfortable. Just look at what you are doing with Visual Studio Code (a streamlined tool that works on all platforms), take that idea and bring it to Blend.
Designers on Windows