The organization of everything in blend seems to me to be just as important as the visual aspects of the design.  Labeling, grouping, styling – all of it needs organization.

Some of my first projects done in blend had the obvious mark of “this is what my brain thought of next”.  It took a whole lot of work at the end for me to organize and sort everything to minimal chaos.

With every markup that I’ve done in the past, organization was my my pet peeve.  It has to make sense, load in the correct order, and be easy to jump into later if I need to make edits.  Often, when I have a final product – it is at that moment, a final product.   This means that if I am doing edits later, its months and months later and I don’t have the time or desire to have to familiarize myself with insane coding.  No – it must be organized.  The CSS needs to be in order of type and use, various aspects need to be labelled properly and related classes need to be grouped together.

This ties into Blend work, but Blend is so much more similar to Photoshop, that its insanely easy to just do a million things without a thought to organization – that is – untill you look at the XAML and hand update content that is willy-nilly all over the place.

No no no – organization is the key here as well.  I want the time to design more, so if I’m doing finite updates, they need to be easy to locate.  Sometimes I have no desire to use the split mode in blend, so looking straight at the xaml is often the key to my success, and for that success to even be present – organization is absolutely necessary.

Most common websites are built with some sort of banner, a menu, and content.  Sometimes there are 2 menus, sometimes multiple sections of content, but too frequently you see the 3-part sites and they tend to be the easiest to navigate.

For a site like that, its incredibly easy to build the initial group structure of “Banner” “Content” and “Menu”.

 

Above is a screenshot of Blend 2.5 and a very simple layout with absolutely no organization.  Because there are so few elements, it doesn’t appear too messy – that’s about how you want it.  This is where organization starts.  All of the rectangles that I have are bases for content implementation.  To get it organized at this level, its time to use panels.  The 2 that I’ve read the most on for this are Grid and Canvas.  The “why” is that the content which is placed within either of these can be configured to act as a “child” of either and the dimensions will try to encorporate their properties (i.e. the width, height, layout, margins, etc.) based off of the parent.  The differences between the two seem a little fuzzy at this point, but I’m a complete newbie w/ this software, so I’ll likely get further understanding of the strength and weaknesses of either type and when to use one over the other. 

The msdn descriptive differences are described with the Grid being a strong parent model for items which will be implemented in rows and grids, allowing the flexibility of the star (*) property to allow the child grid to expand to either the width or the height of the remaining space within the grid.  If you gave an element that property without it being contained into a panel type, then you’d end up having it stretch to as much room left in the browser.  This could be a good or a bad thing – just depends on what you’re dealing with.  Personally, I find the ability to have structure to be far more useful.

The Canvas allows for children to have their coordinates plotted based off of the canvas instead of the LayoutRoot.  This might mean absolutely nothing until you need everything pieced together by a software engineer, at that point, you’re going to experience a possible ear-bleed.  They might be really nice in their asking of content to be aligned w/ 0 when creating seperated elements, but that’s just them being nice after they’ve mentally kicked you really hard. 

I put each of my elements into a canvas base.  I’ll likely have further children canvases and grids within these parent panels but  when more specific items get added, but this works for now.  After putting each rectangle into its own canvas, I renamed everything so that it is easy to identify what element is what.

 

The left of the screen shows my rectangles now being contained within canvases.  To rename, you can either right-click and select rename, or click on the user control item and on the right, select the Properties tab.  The first field there is for the name – replace it with something that is more descriptive.  I stuck with the initial naming mentioned earlier.

No idea why, but I’m addicted to testing everything that I do along the way.  It is nice to view in a browser setting.  To do this, either hit F5, or go to Project –> Test SolutionThis displays my base site.  It doesn’t do anything – but it is perty and well… very easy to accomplish.  If your margins are larger than the base structure, you’ll have to go into the Expression Blend solution directory, locate the HTML file and modify its javascript dimensions, or it will cut everything into the standard dimension which is default to Expression Blend Solutions and leave anything to the left and bottom hidden and unviewable.  Once you’ve updated the dimensions for visibility, run the test solution again and then you’ll see the final work.