New wallpapers with Expression Blend before you install Windows 8

1280x800

1440x900

1680x1050

1920x1200

In honor of MIX11, happening now in Las Vegas,
you can SAVE 50% on these ebooks from Microsoft Press:

• HTML5 Step by Step
• Microsoft XNA Game Studio 4.0
• JavaScript Step by Step, Second Edition
• Microsoft Expression Blend 4 Step by Step
• Microsoft Expression Web 4 Step by Step
• Microsoft Silverlight 4 Step by Step
• Microsoft Silverlight Edition: Programming Windows Phone 7
• Microsoft XNA Framework Edition: Programming Windows Phone 7
• Windows Phone 7 Developer Guide
• Windows Communication Foundation 4 Step by Step

Find more info here:  oreilly.com

Use discount code DDM5D in the shopping cart.

Sketched ideas and detailed static mockups look fine on paper, but need interactivity and animation when transferred to the computer. You can scan all the best ideas and import them into SketchFlow projects. Dynamic prototypes enable you to navigate between screens and states, generate sample data, add hand-sketched controls, and interact with the application. The following picture shows the Am7 Guitars image scanned into a SketchFlow project, with working controls added.

SketchFlow tips:  segregate different ideas and create branches in your project

Just segregate your different ideas and create several branches in the SketchFlow Map panel. Add several navigation screens connected to the Start screen in the SketchFlow Map panel. Mark your different ideas with color visual tags. The example below shows one project with several branches. Then, interact with your team members. Show them your ideas and the implemented branches of your prototype. Choose the best idea in the end.

It’s time to draw Expression Wallpapers :) Start Your Day with Expression…

1280x800

1440x900

1680x1050

1920x1080

Wow, that’s really my first book - Microsoft® Expression Blend 4 Step by Step that coming out in late 2010.

Expression Blend 4 is part of Microsoft’s Expression Studio. It is a professional tool for creating cutting-edge user interfaces based on the popular technologies: WPF/ Silverlight. Expression Blend enables designers to easily collaborate with developers.

Book Summary

Microsoft® Expression Blend 4 Step by Step will be for designers and developers who want to learn how to create user experiences for the web and desktop using Expression Blend. Expression Blend 4 Step by Step will teach new users how to create, maintain, and manage Silverlight applications that can be embedded in web pages or as desktop applications. Additionally, this book will serve readers already familiar with Expression Blend, but who want to learn the latest features incorporated into the V4 release.

Authors

Elena Kosinska is a Microsoft MVP (Expression Blend), UX designer
Chris Leeds  is a Microsoft MVP (Expression Web), HTML Writers Guild

Where to pre-order?

You may pre-order Microsoft® Expression Blend 4 Step by Step now and Amazon will deliver it to you when it arrives.

It’s no secret that creating a great user experience takes two types of people, each of which thinks differently: designers and developers. Well, how designer’s role looks like when using Expression Studio to design/develop a Silverlight application? As for me, here are some typical steps in a common design scenario:

1. Providing a design brief to the customer

2. Analyzing the brief, understanding the client’s needs and goals

3. Researching similar design solutions

4. Producing a specification or list of design requirements

5. Generating a range of different possible ideas to satisfy the requirements

6. Creating early sketches with pen and paper

7. Producing a prototype by experimenting with ideas in SketchFlow

8. Interacting with customer(s) and developer(s) to choose the best idea

9. Correcting and finalizing the SketchFlow prototype

10. Choosing an application color scheme to the customer’s requirements or corporate identity

11. Designing application screens and control styles in Expression Design and then exporting the work as XAML files

12. Getting the customer’s approval on the design screens

13. Creating Expression Blend test solution and importing XAML files

14. Creating layouts for application screens, transferring and optimizing background graphic elements, skinning real controls, and adding interactivity

15. Connecting to the source control system and getting the developer’s solution

16. Collaborating with the developer(s), stringing design screens, transferring interactivity and binding data

17. Testing the solution

18. Modifying and correcting the solution

19. Helping to deploy the application to the customer’s environment

This is only my possible scenario. The process followed by any given set of designers may be different: some steps may be ignored, combined, or expanded depending on the particular scenario. Designers will also add or change steps based on their specific requirements, habits, and goals.

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)

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)

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. 

My warm November Wallpapers with yellow colors & Expression.

[1280x800]

[1440x900]

[1680x1050]