Facingblend.com – splash screen

Posted on

The other day, I was going here to the site to post another blog article, but was completely derailed from my entire train of thought when I accidentally mistyped the URL to my blog and instead went to www.facingblend.com

The surprise that I saw there was… *cough* surprising.

A few months ago, there was someone, a local glass blower/artist, who was interested in having a revamp done for his website.

He’d previously been working with someone who appeared to have not decided whether he or she wanted to be an asp.net developer or an integrator… the guy/gal definitely was not anywhere close to a designer and towards the end of the project flaked out without finishing and things were broken as well. It was very very broken and very… 90s. It appeared to be like something that I had done back in 1998 when I was just learning HTML and using the online generated button makers…

But it was apparent that the site was built using a lot of raster-based images done as sort of highlights of the glass artist’s work.

In any event, he’d posted on Craigslist as a trade – he’d create a few glass pieces, and the person who he worked with would design and publish his site. Sounded like a pretty good setup to me, and I really love the colors and things that can be done with glass – it looks incredible whether its a photograph or graphically done.

So I created a few mockups and sent him the links. He didn’t respond, so I’m guessing he went with someone else – however what I didn’t realize was that godaddy decided that it was going to use the image and quick code index.html to use that image as the background.

I wonder how long THAT’S been there.

So instead of posting a blog about faking shadows (will come later) – I ended up working on a quick splash screen for people to view if they ever were interested in viewing facingblend.com.

Took about an hour to do and 35 min to code the html/css. So check it out if you’re curious. I like it – came out pretty nice and overall, its a whole lot better than the random rough mockup that I’d designed a few months ago.

and for the record – I am well aware of how tacky “under construction” or “coming soon” pages happen to be, but weighing in the pros and cons, I think having a splash screen is far better than having some potential customer’s mockup used to represent my .com

OMG gimme more screen!

Posted on

Just a short mention of 1 thing that drives me absolutely nuts.

Yes – vector based UI is pretty cool, but dangit!  I want the dang thing to get smaller when I change my resolution so I can have more screen space!

Solution?  Dual monitors.  Menus on the right, screen on the left. 

Problem?  Why the heck must there be an absolute paramount NEED for dual monitors just to have some dang space.  I want all of my menus for quick use AND enough space to work with.

Summary: I want to have my pie and eat it too.

*Click* Rant off.

Cleanliness

Posted on

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.

 

Purpose and direction

Posted on

The plan was to release everything along with this blog in conjunction with a spiffy purely xaml based site and the site was designed by me and made “alive” by my good friend David – but the last few years I’ve done a whole lot of consultation work, and not a lot of original pieces – and that is leaving the portfolio section bare in a very extreme way.

So until I have more content to put there – it isn’t going up. It stinks and will likely drive David up the wall while he waits for it to go up, but sometimes life happens and things just don’t go according to plan.

So in the mean time, I’m going to use this blog as sort of a catalogue for myself to quick reference as well as possibly help others who are diving head-first into using the expression tools. For someone like me, who has known the world of design and UI through notepad and photoshop – there are a lot of things that some people take for granted who are already “in the world” that I’m poking my head into, so if you’re already there and I’m blogging about things that you do in your sleep, its quite possible that this blog is not targeted at you.

Facing Blend… The site. The Experience. My brain.

Posted on

Facing Blend was a fun idea that came to my mind one day when learning how to use blend. It has many meanings in the name, so I’d like to paint a picture for you.

I’ve always loved design. In highschool, I took the first class to ever be part of our highschool which was dedicated to programming – HTML.

I know, I know – HTML is markup, not programming. To me, it was the closest that I was going to get with a highschool education back in the late 90s and I was one of the first to sign up for it. The class started out in such a way that gave all who signed up for the class the ability to get on the same track. We started, not in HTML coding, but in good research techniques using the most popular search engines on the net. We’re talking goto.com, altavista.com, webcrawler.com, yahoo.com, search.aol.com, oh, and yes, the baby – google.com. There were a few others, but those were the most popularly used. My favorite? Goto.com. *sigh*

Anyhow, from that class, I got my feet wet into design. I was interested in the art of it all, the complete picture. How you could take separate elements, put them together, and either make something incredible, or absolutely horrid. Most of the people in the class created sites that were overfilled with animations, difficult to navigate… the typical story for people who aren’t necessarily used to layouts and artistic use in usability. Myself, being an artist and having a logical perspective on most things, coupled those together and that is where I started with design.

Now, my stuff back then was absolutely aweful, but at least you could navigate easily, locate the information you were looking for, and it wasn’t over-inundated with animated gifs just for the sake of having animated gifs.

Somewhere along the lines I picked up a few other skills, CSS, basic XML, a little javascript, lots and lots and lots of photoshop work, and I need to mention photoshop again – as that program can do almost anything, short of cook my dinner (though its caused me to miss several meals. Blame the program, not the person. It’s easier that way for all of us.)

So that along with illustrations and a few other things is my “start” in design. I took a few side roads and worked at a photography studio, worked as a sales person and then a computer technician at the local CompUSA, then moved to being an IT Servicedesk Technician, but on the side, I’ve done projects for various organizations, individuals and companies throughout the years designing flyers, logos, paintings, and webpages.

A friend of mine mentioned while assisting him with illustrating the cover of his book, that I should take a look at Microsoft’s Expression Blend. I’m quite familiar with Photoshop, have dabbled with Corel Draw, and 3dsmax, but had never heard of Expression Blend, and quite frankly, was a little… ok, a lot, intimidated by it.

So after watching several videos, I accidentally downloaded a few of the tutorial videos for Expression Design – which acted a whole lot like Photoshop, but with a few things made easier and more specifically, the program seemed more like a tool that web designers would love. So instead of immediately diving into Expression Blend, I tinkered around with Expression Design for a while. In my opinion, I’d like to give a capitol A, Two thumbs up, and 5 gold stars to the people who created the program. It has quite a lot of functionality, and for myself, who specializes in UI that makes sense and web design, this program was easy to pick up and go with a very small learning curve. It’s one of those things that is quick and easy to learn how to use, but would take the right person to master.

I finally got up the courage to dabble with Expression Blend after a weekend with Design – to find that it wasn’t intimidating at all. Yay me for making a mountain out of a mole hill.

During my initial orientation to the program, I became thoroughly frustrated. Blend has a lot to offer and a lot of functionality. Since my specialty has always been driven towards the web, I felt that I should dedicate my time designing within Blend creating Silverlight apps. There are quite a few people who have been familiar and creating in full application based XAML, but not as many who specialize in the silverlight side with all of its limitations. I think I’ll just sit in the pretty Silverlight box and be happy with my walls and restrictions and see just how much I can fit into that box and how well I can use it.

Blend is in beta. Silverlight is… in beta. *sigh* Let’s just say, a lot of things aren’t as they might seem when trying to do what you wish to do. User controls for one thing, integrated, and custom controls – pain in the rear…

——-

So this is me. I enjoy design, completely geek over well-done interface – the things most people overlook when done right, and am starting this blog and site as a way for others to join me on my journey as I learn more about what I can do within Expression Blend, programing, design in general, and more.

What is Facing blend to me? It is me tackling a mountain, to discover a molehill. It is me sitting with tools and the endless possibilities. It is interfacing gone web… inter – facing… get it? It is Facing Blend.

– Ariel Leroux