Welcome to EMC Consulting Blogs Sign in | Join | Help

Felix Corke's Blog

  • Microsoft Surface - Q&As from VBUG developers to a designer

    Matt Bagwell, Michelle Flynn and I hosted the VBUG (professional developers using Microsoft technologies) event for the first time here at Conchango last night, and it was pretty successful despite torrential rain outside.

    Everybody was interested in the device and had a good play with all the demo apps, and tolerated us two creative non-techies for a couple of hours over beer and pizza. As one guy said on leaving, we didn't show a single line of code! Probably a first for a VBUG event :)

    The most interesting bit of the evening for me was when Matt asked people to write down any questions they had while we talked through some slides, the range of questions were very interesting as I've been working so closely with it that I sometimes take for granted what an unusual, modern and unique bit of kit this is.

    So, here are the questions asked, and answered to the best of my knowledge from my first-hand experience.

    What more would my B2B users get from Surface?

    Planning PokerMulti-user collaboration is the unique selling point of this device. We demo'ed an app we're building which enables a scrum to get together around a device and collaboratively estimate sprint backlog items - a boring task made fun and engaging through multiuser interactivity
       
    How mature is the SDK? Especially in regards to WPF controls and Direct X? How's the IDE integration?
    What's the SDK like?

    The SDK is pretty solid, it includes Surface app project templates and a host of Surface-specific controls, such as Scatter panel, Surface sliders/listboxes/toggle buttons etc. You build directly from Visual Studio/Expression Blend directly into a software emulator which recognises multiple inputs (mice, generally).

    It looks very low-res?

    It is. As a designer I'd say that's one of the biggest drawbacks, at 1024x768 at about 30" you can see the individual pixels, so for example text under 16pt (and normally rotated) looks unsatisfactory. On the flip side, this is not a device for watching HD movies or working in Office :)

    How often does it break?

    Surprisingly rarely, our box has travelled more than I have in the past year and still works fine. The Shell is as robust as the apps written for it. The worst that happens is a slow down when too many apps are open simultaneously as any computer would, but that's easily fixed with a restart of the shell.

    Do you need to know mathematics to develop for Surface?

    Depends which aspect of it you are developing. For XAML front-ends, not at all. For C# apps, not unless you are doing your own physics. For XNA apps, definitely.

    What technology can be used to develop apps for Surface?

    We write all ours in WPF C#/XAML, I don't know if it is possible to use VB for example.

    What is the competition up to?

    There is a great deal of homebrew and open source multitouch going on at the moment, for example

    These guys have tons of examples
    http://nuigroup.com

    Build your own!
    http://www.maximumpc.com/article/features/maximum_pc_builds_a_multitouch_surface_computer

    http://labs.ideo.com/2008/08/15/our-home-brew-multi-touch-system/

    Can it be used for web?

    In terms of browsing, not really, but like any WPF app it can consume any data/web service and display it in a rich way.

    Are there emulators available if we can't afford the 10k price tag?

    Not that I'm aware of, you need to actually own a Surface device or be a partner to get the SDK and emulator.

    What's the learning curve/cost?

    Personally, I do a lot of WPF/Silverlight work, and therefore I already knew XAML so I could literally jump in and start building apps. Our dev guys are all C# anyway so it was a similar story for them. The biggest learning curve is the user experience aspects, e.g. which way are people facing? How does it work when three people are using it at once? What are the best navigation methods?

    Any new design patterns or best practice?

    We tend to use MVC patterns, but really the same as any WPF app.

    Is it a 'closed' product? Can competitors create compatible Surfaces?

    It is closed.

    What is the Operating System?

    Windows Vista

    Can non-Microsoft technologies be used with Surface?

    Not as far as I am aware of.

    How expensive is it?

    About £10,000-£8,500 according to http://www.microsoft.com/surface/How-to-Buy.aspx

    Any security concerns? Is it safe to stand near it?

    Ha, yep - this guy had seen the demo's where you could put your mobile/camera on the Surface and it would draw out all the data :) No, it's as secure as any Vista box, and like them, any device would have to be correctly paired.

    Do you enjoy prototyping with it?

    Definitely. The speed of development is awesome, we can turn around really compelling futuristic apps in under a week, and to be so cutting edge using our existing skills is very rewarding.

    How have you found transitioning from designing for web to designing for Surface?

    They are totally different. Clear your mind of buttons, menus, navigation bars, reams of text etc. And embracing multiple users, with multiple inputs and multiple angles is a challenging and unique way to design.

    Is it a distraction in the office?

    Only the bloody piano app and the Identity Mine air hockey app. They are very noisy indeed.



  • Expression Newsletter Article - A Step-by-Step Introduction to Styling, Templating, and Animating in Expression Blend

    Just a note to say my first part of a six part Silverlight tutorial for Expression Newsletter has just been sent out, you can read the full tutorial here:

    http://expression.microsoft.com/en-us/dd279541.aspx

    - hopefully after this tutorial you will be familiar with the basic concepts of styles, templates and storyboards within Blend and produce a styled control like this:

     

    Next time, we'll add some advanced styling and animations, but this should be a gentle introduction to Blend for noob designers and developers interested in designing for Silveright, WPF and Surface!

    Please let me know how you get on with the tutorial, this is how my colleague Sari approached the tutorial - showing how free you are to be creative in Blend!

      i
  • Silverlight and Flash side-by-side font display comparison

    Nothing too exciting about this, I am building a Silverlight project for a client and thought I'd compare how the Flash player and the Silverlight plugin handle font display.

    Without tweaking any advance settings, here they are - guess which is which then right-click to see the answer ;)

    The font used is FF DIN Medium, embedded. 

     
  • Designing a Silverlight 2 Beta 2 Skin with Blend - Free download (with source files!)

    Silverlight 2 Beta 2 Skin

    Click here to view the Silverlight Skin demo
    You will need the Beta 2 plugin from here.

    Since Silverlight 2 Beta 2 came out and trashed my Beta 1 skin that I'd lovingly hand-crafted in code view, and with the new June preview version of Expression Blend with the super-helpful Visual State Manager (VSM) I decided to have another crack at the skinning process using the new tools and controls available.

    First up was a look at the VSM, using Scott Gu’s handy walkthough – this seemed simple enough, basically it allows you to visually style controls as you would in WPF, rather than all hand-coded like you had to with the previous versions of Silverlight. One of the biggest helps was that all the applicable/available states for the controls are listed for you in VSM, and adding transition times to state groups as well as individually was a real help.

    Also the new controls merit a quick intro, the ones I looked at were the Tab Panel & Tab Items and the Grid Splitter (See Tim Heuers post on how to add them to your project as they aren’t included by default). Also available are the Date Picker and the DataGrid, although I didn’t skin those as for now you can’t style them visually in Blend – as CorrinaB says in her post:

    Next, ToolTip is no longer stylable. I plan to create my own ToolTip control that is stylable in the near future, but until then you'll have to make do with the default style we provide for you. Lastly, you cannot style the Calendar, DatePicker, or DataGrid controls in Blend. In fact, you can't include style xaml for Calendar and DatePicker in a project you plan to open in Blend or none of the UI will render (this problem will be fixed in the future).

    I may come back and add custom styles later in code but it seems like it may be quite time-consuming. Talking of Corrina B, I can’t emphasise how helpful and informative her blog is. If you want to get started in Silverlight styling, download her skin and get dabbling. I used her Slider control xaml as a basis for mine as I found that particular control quite tricky to get right on my own.

    Default vs Custom preloader screensOne cool new feature is that you can customise the loading screen so rather than the boring default loading screen you can brand it and style it and give it a meaningful progress bar. You can read about how to make your own here: silverlight.net/quickstarts/BuildUi/SplashScreen.aspx

    All in all, Silverlight 2 Beta 2 is a big improvement, and the VSM & June edition of Blend will make Silverlight a lot more approachable to visual designers.

    You can view a demo of my skin here and download the project here (.zip 2.5Mb)

  • silverlight streaming test!

    My first attempt at 3D animation using Maya, hosted with silverlight streaming

  • Remixing Mix - how I redesigned VisitMix.com with CSS

    Final Page

    Microsoft MIX is a trade show for emerging Microsoft technologies. It differs from most trade shows by lavishing millions of dollars on parties, scantily clad ladies and a hefty bunch of nerding and talking about nerding, in Vegas. Basically, if you're going to be at a computer software corporate event, this is probably going to be one of the better ones.

    So, trying to avoid the £3,000 or so the trip will cost, I'm optimistically entering the MIX08 redesign compo which, in the same vein as Zen Garden, you have to take their html and without touching it recreate the page using your own CSS & images; a valuable lesson on how using clean HTML means you can take any well architected page and completely redesign it with just one style sheet.

    There have been some fantastic entries in the gallery so far - my money is on the brilliant MIXos by nate bates.

    View my entry online visitmix.com/2008

    So, here's how I did it starting from the top:

    The logo

    Logo redrawn in Adobe IllustratorI always start with the branding, I normally like to redraw the logo in Illustrator (why does no-one ever have a vector version of their own logo?), this gets me into the brand vibe and means I get transparency and scaleability. This mix logo was an easy one, only four shapes and some text, easily redrawn using a grid.

    Layout

    Rough layout in Adobe IllustratorThen I had a play with the existing stylesheet to see what could be done with the xHTML elements - as you are not allowed to touch the code you are constricted by the quality of the structure and by the dynamic areas that have to have elastic heights such as the news feeds. After figuring out a rough layout idea, I drew a grid in an illustrator document, to fit into a 960px wide container suitable for 1024px resolutions.

    Then I did one of my favourite little tricks, in my web browser I went to the MIX homepage and File > Print > Save page as a PDF. This gives me all the editable text and layout of the current site in a document that illustrator supports natively.

    Once open in Illustrator, I tidied the text into blocks and copied them over to my layout document, and positioned them in my grid.

    Graphics - First stage

    Colour paletteWith my layout roughly defined and my logo redrawn, I was starting to get an idea for the look and feel of the page. I worked out a neon colour palette based on the pink of the logo, offset with a black background. I took a load of the cubes from the redrawn logo, coloured them in the new palette and randomly scaled/rotated/postitioned them into a cluster. This would set the theme and the tone of the site.

    CSS - First stage

    Initial CSS styling

    With my framework in place, I had a good base and style to work from, the rest of the job was divided into refinement and build, normally concurrently. First, to sort out the text and the layout. Using the brilliant SKedit html editor on my mac and Expression Web on my pc, I started a project and copied down all the template files and created a new css. I always use css reset, and have a handy snippet that I always use as a base for new sites to clear all the default styles that I have developed over the years, although Yahoo (developer.yahoo.com/yui/reset) and Google (code.google.com/p/blueprintcss) offer resets which are also a very good starting point.

    That done, I created a MIX stylesheet containing all my new styles. I set all the text to SegoeUI, serif and set the background to black, and the width to 960px. Using the excellent Firefox extensions Web Developer Toolbar (chrispederick.com) and Firebug (getfirebug.com) and IE developer toolbar - all free and all essential plugins - I laid the divs out using floats/blocks/widths/heights as per my design.

    Graphics - Second stage

    3D The black was sitting too heavily, so I lightened it to #555. I also had a flash of inspiration, and decided to go down the 3D route. Rather than firing up Maya (overkill for this project) I decided to use Illustrators 3D Extrude and Rotate filter. It took about an hour to do all the blocks and get them looking just right. Once done, there wasn't enough definition or contrast between the cubes, so I added a large black glow to the shapes.

    rssIcon3DI used the same technique for the RSS logo so it would fit in better. I also used some of the 3D blocks to make a new register button, Signal image, and for another cluster in the footer.

    The design was really starting to take shape, and it was time to look at the layout of the body text and news. Dark background shapes really separated the sections and defined the areas. I used this technique in the navigation bar too. I added some detail with icons and the RSS logo. I also added the new TAO, Signal, blog bling and keynote speakers images.

    It was going to be a heavier-weight page than I would normally create with all these images, but I guessed the target audience would be mostly tech savvy and therefore likely to have broadband.

    RegisterSignal

    CSS - Second stage

    Final Page

    It was time to add all the background images to the stylesheet, and tweak them until they looked like the layout. I set the Participation <P>'s and H3s to display as blocks and to float next to each other, rather than in a list to give it a unique yet elastic layout should new/longer articles are posted. I added more colour and a 1px dotted border to surround and separate elements, and added icons as background images to headers.

    starI used some underused css tricks such as text-indent to lay the icons out so they wrap well, and font-variant: small-caps to change the Venetian text to look more formal. I then set the :visited, :hover and :active states of the links which can be overlooked, but are vital for usability and it gives a nice bright green flash of confirmation when a link is clicked which looks great on the padded links of the nav bar.

    I used quite a lot of transparent PNGs as link backgrounds, with darker versions of the same image on :hover to give a roll-over effect without resorting to javascript.

    After a little more polish I checked the CSS using the w3C.org CSS validator and fixed a couple of bugs until it validated, then checked the design on IE 6, IE7, FireFox, Safari, and Opera on Mac & PC. Unsurprisingly, IE6 didn't take a shine to the transparent PNGs and gave them a solid white background. It also had some box model issues and broke the layout. As the developer who built the HTML page hadn't included an IE6 javascript transparent PNG fix, I decided to go down the controversial * html element {} hack which only IE6 uses to set all the background images to none, and narrowed some column widths. This is hardly a perfect solution but it degrades pretty well and looks a damn sight better than it did before. The site also scales pretty well across all browsers without wrecking the layout much - good for accessibility (and for my dad who whacks his text-size up to massive so he doesn't have to use his glasses to browse the web).

    I would like to have tidied the CSS and removed some redundant styles, and optimised it a bit more, but it worked, it validated and it was cross-browser compatible and I was running short of time.

    Conclusion

    To make this competition easier next time round, I would ask that the HTML supplied would include an IE6 javascript transparent PNG fix as mentionned above, dropped the use <br> tags (I had to flatten these using line-height:0;), tried to avoid the overuse of .reStyle classes, and more semantically split up the content and divs (I would have grouped the news and events items into div.newsItem or similar) to give greater control over the page.

    Otherwise, it was an interesting and satifying exercise in re-skinning a site, and having spent the last year focussing mostly on XAML/WPF/Silverlight and Flash, it's been great to practice CSS and restriction-free design again. So, best of luck to all the entrants, there are some brilliant redesigns - and who knows, maybe I could meet the winners there - fingers crossed!.

  • Essential freeware


    Here are a few free apps - mostly design oriented - that I have come to rely on over the years which really increase general productivity.

    launchy
    http://www.launchy.net

    Absolutely essential shortcut/launcher app that sits in the background, and is called up on  Alt+Spacebar. When you hit this shortcut, a list of applications/recent docs/control panel items will appear from the first character you type, eg, typing mi will show Microsoft Excel, Word, Powerpoint and recent files made with this software

     Launchy screengrab


    shellxt
    http://free.firmtools.com/shellextension

    Again, essential for all designers on XP, this extension adds a preview of any bitmap graphic file (JPEG, TIFF, PSD, PNG, GIF, BMP, etc) in your context menu, from your desktop, file browsers and even open and save dialogue boxes. This is great for checking images before you write over them

    ShellXT grab 


    ps hot launch
    http://www.pssoftlab.com/pshl_info.phtml

    This is a file/folder launcher, it crosses over slightly with launchy. I use it to launch my file server, my documents, my desktop and a couple of browsers. Once you get used to it, firing up your browser from Ctrl+Num0 for example will become completely subconsious

     Fonbrowser grab


    font browser
    http://www.stcassociates.com/lab/fontbrowser.html

    A 22Kb .swf file that you can keep on your desktop that previews all your installed fonts at a glance

    Fontbrowser screengrab


    send to ftp
    http://www.snapfiles.com/get/sendtoftp.html

    Another context menu extension which once you set up an ftp address, you can right click any file and upload it your server in an instant. Great for hosting screenshots for example

    SendToFTP Screengrab


    PSPad
    http://www.snapfiles.com/screenshots/spad.htm

    A very powerful HTML editor - see the link above for screens 


    pixie
    http://www.nattyware.com/pixie.html

    A great lightweight (9Kb!) colour picker, which lets you copy to your clipboard a hex-colour from anywhere under your cursor

    pixie grab 


    jruler
    http://www.spadixbd.com/freetools/jruler.htm

    Another lightweight tool for measuring screen distances

    Jruler grab 


    quicksilver (mac only)
    http://quicksilver.blacktree.com

    If you have a mac, install this. It will change the way you work for ever, and it's only a matter of time Apple introduce something like this into their OS. It acts and works like Launchy (see above) only infinitely more powerful and customisable 


    doodim (mac only)
    http://www.lachoseinteractive.net/en/products/doodim/download/

    A cool app which darkens your screen to various degrees, only revealing the front most window - ideal for watching movies or when you want to concentrate on the document in hand and hide the background clutter.

     

    Note: I have only tested these on XP and OS X 10.4 where applicable so your mileage may vary depending on your setup.

Powered by Community Server (Personal Edition), by Telligent Systems