You know, Expression Blend allows you to prototype data-driven user interfaces without having access to live data. You can easily generate and customize sample data for your SketchFlow applications from Data panel. Expression Blend 3 uses “chairs” as sample images and they are really nice for product lists, but sometimes you need to give your data a new look. If your application displays a list of companies - it’s better to use sample logos or sketch logos.

I’d like to show you how these samples look in my SketchFlow applications.

Figure 1. A list of industry groups with sketch logos

Figure 2. Sketch images and logos.

I’ve also created alphabetic logos in Expression Design by using different effects:

You can use these sample logos in your SketchFlow applications:

It will be much more interesting than chairs, right?

SampleLogos.zip (181.89 kb)

My best wishes and a small gift – Silverlight New Year Card!

Recently I shared Redstyle Template for Expression Web with members of the Expression Community. Many of you asked me about original .design file. So, why not? You can download it here.

Sincerely,
Helen. 

Decided to make some changes to my template. I added some js files, fixed blocks for IE6, replaced an old background with a new abstract “blend paths”.

You can unpack a new template to Microsoft Expression\Web 3\en\WEBS folder. After that you’ll see a template in general list:

redstyle.tem.zip (130.84 kb)

Let’s talk about abstract background image. Find out how to create one of them with a small dot and some interesting operations in Expression Design.

And so, what do we need? Create a New Document 800x600 px and add a Rectangle of the same size. Fill the shape with a gradient - from the rich dark color to the light and bright.

For example, somehow like this.

I chose two gradient colors: #65fef6 and #008a7c. After filling, lock this shape in order not to shift it accidentally. You can do this in the Layers panel by clicking the padlock icon.

Dot.The dot is a small circle, a circle is an ellipse and ellipse is a ...  So, don’t worry and just choose Ellipse tool for drawing. And create a small dot with sizes 10х10 pixels and fill it with a white color (Don’t be afraid of sizes on a screenshot. This dot is really small, I just used Zoom to change the scale).

Another dot . It’s not a problem for you to make another dot. Simply Copy and Paste this shape. Also increase the size twice - this dot needs to be 20x20 pixels.

Dot the i's. Place dots at the great distance from each other, the small dot on the top of the artboard and the big one at the bottom.

Align horizontal centers. Now it is important to align objects with each other. Choose Selection tool and select both dots or just press CTRL + A (in our case we select only dots, because the background is locked). And in the Action Bar panel from the Arrange menu, point to Align, and then click Horizontal Centers. Now the center-points of both dots are aligned.

Blend paths. Don’t cancel the selection of objects.  In the Object menu, click Blend Paths. In the Steps field of the opened dialog box, enter the number 22 (from 20 to 30 – depending on distance between your dots). Make a choice after simple calculations: after applying the operation Blend Paths, bottom dots must touch each other a little bit, and top dots must be at a greater distance, as in this example.

After the previous operation there is a new group of objects in the Layers panel.

 
Press CTRL + A to select all objects. (Two our dots and a new group) From the Path menu of the Action Bar apply command Unite.

 
This command combines all the selected shapes into one compound object. (We've done this to simplify our future work).

Repeat. Now we are going to do the similar operation as stated above, but only in horizontal way. Move the object to the left edge of the background, Copy (CTRL +C) and Paste in Front (or press CTRL+F). Click the mouse, and begin to drag the object horizontally to the right edge while holding down the SHIFT key for precise horizontal alignment.

Select our two objects again and perform the operation Blend Paths. The number of steps is 45 (choose by the same principle as above).

We’ve got the picture:

Then, press CTRL + A again to select all objects (two objects - left and right and a new group).  From the Path menu of the Action Bar apply command Unite.

Fill. Now we are going to apply a gradient fill. You can select the same color as for background and experiment with Gradient Transform tool

OR you can select for gradient two white colors and make one of them a fully transparent and another one - completely opaque.

Then use Gradient Transform tool to set the direction from top to bottom. And as a result there is a nice transition of dots. Remember, we had only one at the beginning :)

The result is in the attached file.

dots.zip (76.68 kb)

Would you like to extend your navigation panel with new functionality, but haven’t proper icons? I created simple draft set of mini icons for Silverlight Navigation Application and Silverlight Business Application. Open file in Expression Design, choose an icon, export to xaml and use in your project :)

Colors of this set are Black&White and Black&Green. In any case, you can change colors.

List of icons:
Folder, Document, Documents, Tree,
Add to DB, Remove from DB, Edit DB structure, Search in DB,
Down, Up, Right, Left,
Stats, Tools, Filter, Refresh,
Info, Search, Zoom out, Zoom in,
Lock, UnLock, Person, Cloud,
Draw, Measure, Relation, Drag.

100% Zoom preview:

200% Zoom preview:

Custom zoom preview:

View some icons in action

SNA_Mini_icons_v2.zip (68.28 kb)

Inspiration comes from many sources. I reviewed my old photos with lunar eclipse and decided to create new Silverlight wallpapers.

As well “See The Light” was an inspiration to me:) You can see the result below. All made in Expression Design. Enjoy!

seethelight_1024_768

seethelight_1280_1024

seethelight_1280_800

seethelight_1440_900

All in one archive

Recently I posted a lovely list of design quotes. Just read part 2. Most of them I found at Flickr Group “’Design Is’…Wallpaper”, you can get design wallpapers with quotes there.

• Design is staying up all night and moving an image two picas.
  
• Design is balance.
  
• Design is knowing when to stop … designing.
  
• Design is simple.
  
• Design is something a programmer should not do.
  
• Design is 1% inspiration, 99% perspiration.
  
• Design is not just do something looks good.
  
• Design is about being a Geek, but with style.

And final:

• Design is what everyone sees but few recognize.

Find inspiration in quotes. Just read and imagine. I found some of them are really cool. How about you?

• Design should never say, “Look at me.” It should always say, “Look at this.”  (David Craib)
  
• Design is an opportunity to continue telling the story, not just to sum everything up. (Tate Linden)
  
• Designers are meant to be loved, not to be understood. (Fabien Barral)
  
• Behavioral design is all about feeling in control. Includes: usability, understanding, but also the feel. (Don Norman)
  
• Technology over technique produces emotionless design. (Daniel Mall)
  
• The difference between a Designer and Developer, when it comes to design skills, is the difference between shooting a bullet and throwing it. (Scott Hanselman)
  
• It’s really hard to design products by focus groups. A lot of times, people don’t know what they want until you show it to them. (Steve Jobs)

With Microsoft Expression Blend 3 Preview, you can create Windows Presentation Foundation (WPF) applications for the desktop and Microsoft Silverlight 3 applications for the web.

Expression Blend 3 Preview is a major new release, taking the product in a number of new, important directions, such as on-the-fly sample data generation. We also added support for several Silverlight 3 features.

Expression Blend 3 Preview is a step on a long journey toward tools that are meant to empower designers to participate in the process of software creation in deep, meaningful, and creative ways.

Using Expression Blend 3 Preview, you, the designers, can make computers easier and more fun to use, and can delight customers with great applications and great content.

Read more at Expression Blend 3 Preview