BlogmyQuery – BMQ

In the following Adobe Illustrator tutorial you will learn how to create a detailed scanner illustration. We’ll start with a bunch of simple shapes, some basic vector shape building techniques, several effects and the round any corner script. Once we have our starting shapes we’ll continue with some Pathfinder options, several new effects plus some basic masking techniques. For the final touches we will use some simple blending.

Before we get started, here is a preview of the illustration we’ll be creating.

Step 1

Hit Control + N to create a new document. Enter 600 in the width and height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before your click OK. Now, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a grid every 5px. Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box.

You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Pick the Rectangle Tool(M), create a 480 by 345px shape, fill it with a flat green then grab the Direct Selection Tool(A). Select the left anchor point and move it 80px to the right then select the right anchor point and move it 80px to the left. This will turn your rectangle into a trapezoid. Next, you’ll need the Round Any Corner script. You can find it in this article.

Save it to your hard drive, return to Illustrator and continue with the Direct Selection Tool (A). Select the bottom anchor points (highlighted in the second image) and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 50px Radius and click OK. In the end your shapes should look like in the third image.

Step 3

Reselect the shape created in the previous step and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Effect > Warp > Bulge. Again, enter the data shown below, click OK and go to Object > Expand Appearance.

Step 4

Pick the Rectangle Tool(M), create a 410 by 270px shape, fill it with a flat yellow and place it as shown in the first image. Grab the Direct Selection Tool(A) and focus on this new shape. Select the left anchor point and move it 65px to the right then select the right anchor point and move it 65px to the left. Again, you’ll need the Round Any Corner script.

Continue with the Direct Selection Tool (A), select the bottom anchor points (highlighted in the second image) and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 10px Radius and click OK. In the end your shapes should look like in the third image.

Step 5

Reselect the shape created in the previous step and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Effect > Warp > Arc Upper. Again, enter the data shown below, click OK and go to Object > Expand Appearance.

Step 6

Reselect the shape created in the previous step and go to Object > Path > Offset Path. Enter a 3px Offset and click OK. Fill the resulting shape with black.

Step 7

Reselect the black shape created in the previous step and make a copy in front (Control + C > Control + F). Select this copy along with the green shape, open the Pathfinder panel and click on the Minus Front button. Once again, you’ll need the Round Any Corner script.

Grab the Direct Selection Tool (A), select the four anchor points highlighted in the second image and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 3px Radius and click OK. In the end your shape should look like it does in the third image.

Step 8

Pick the Rectangle Tool(M), create a 300 by 20px shape and place it as shown in the first image. Select it along with the black shape and click on the Minus Front button from the Pathfinder panel. Move to the Layers panel and drag the resulting, black shape below the yellow one.

Step 9

Reselect the green shape and replace the flat color used for the fill with the linear gradient shown below. Move to the Layers panel, double click on this shape and name it "main".

Step 10

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Reselect "main" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and hit the up arrow twenty times (to move it 20px up). Reselect both copies and click on the Minus Front button from the Pathfinder panel.

Move to the Layers panel and you will find a group with three new shapes. Select it, ungroup it (Shift + Control + G) and delete the two, top shapes. Select the remaining shape and fill it with the linear gradient shown in the third image. Move to the Layers panel and name it "mainBottom".

Step 11

Reselect "mainBottom" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 12

Reselect "mainBottom" and make two new copies in front (Control + C > Control + F > Control + F). Select the bottom copy and move it 3px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=199 G=203 B=203.

Step 13

Focus on the shapes created in the last two steps. Select the first one and go to Effect > Blur > Gaussian Blur. Enter a 4px radius and click OK. Select the second one and go to Effect > Blur > Gaussian Blur. Enter a 2px radius and click OK. Reselect both shapes and group them (Control + G). Next, you need to mask this group. Reselect "main", make a copy in front (Control + C > Control + F), fill it with white and drag it above the group (in the Layers panel).

Open the Transparency panel. Select the fresh, white shape along with the group, open the fly-out menu of the Transparency panel and simply click on the Make Opacity Mask button. In the end your masked group should look like in the sixth image. Move to the Layers panel and lock it.

Step 14

Reselect "mainBottom" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=175 G=175 B=175.

Step 15

Reselect "mainBottom" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 16

Reselect "mainBottom" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a compound path (Object > Compound Path > Make), fill it with R=100 G=100 B=100 and lower its opacity to 5%.

Step 17

Reselect "mainBottom" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Again, turn the resulting group of shapes into a compound path (Object > Compound Path > Make), fill it with R=100 G=100 B=100 and lower its opacity to 5%.

Step 18

Reselect "mainBottom" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=100 G=100 B=100 and lower its opacity to 10%. Unlock the masked group created in step #13 then select "mainBottom" along with all the shapes created in the last seven steps and group them (Control + G).

Step 19

Reselect "main" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and open the Transform panel (Window > Transform). Check the middle, top reference point and the "Constrain Width and Height Proportions" button then simply enter "385" in the height box.

Step 20

Select this resized copy along with the other copy created in the previous step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the second image.

Step 21

Reselect "main" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 25px up and 12px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a compound path (Object > Compound Path > Make), fill it with R=242 G=245 B=245, lower its opacity to 20% and change the blending mode to Soft Light.

Step 22

Reselect "main" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 25px up and 12px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a compound path (Object > Compound Path > Make), fill it with R=242 G=245 B=245, lower its opacity to 20% and change the blending mode to Soft Light.

Step 23

Reselect the black shape and replace the flat color used for the fill with the linear gradient shown below. Move to the Layers panel, double click on this shape and name it "interior".

Step 24

Reselect "interior" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px to the down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=70 G=70 B=70.

Step 25

Reselect "interior" and make two new copies in front (Control + C > Control + F > Control + F). Select the bottom copy and move it 2px to the down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=235 G=235 B=235.

More on Page Two

We are only halfway through the tutorial. There is still more to come over on page two.

Good Web designers know what many others might not realize: that creating a truly beautiful website requires care, time and craft. And similar to how a craftsperson molds their creation by combining raw materials, skill and unwavering focus on the vision, a beautiful design is planned and executed with exceptional focus on what is to be achieved by the website.

It is important, however, not to confuse a beautifully crafted website with one that simply brushes over the content with attractive visuals. This article provides a small selection of tried and true methods that Web designers regularly employ to give a website that bespoke look and feel (think a tailor who carefully cinches a suit here and there to ensure a perfect fit).

Make no mistake: these methods do take extra time, and they often result in improvements that the untrained eye might not consciously register. But the payoff is a better overall experience for the user. Users will leave with a smile and a lasting impression or relationship with your website, even if they can’t quite put their finger on why.

Start From Scratch, Every Time

For a truly customized design, always start with a blank slate.

Whenever possible, avoid cobbling together work from old designs. Every website should be treated as unique, regardless of its type (e-commerce, author website, blog, etc.). The very best websites are designed to fulfill a defined purpose. Building your design from the ground up fosters clarity, focus and commitment to the design.

At every step in the design process, ensure that everything in the layout has a deliberate purpose; you should be able to explain your thought process behind every element on the page. If something has no reason to exist on the page, then consider removing it because it could simply distract visitors from more important content.

Every element on the page should have a reason for existing.

Simply copying and pasting elements from previous designs is a crutch that prevents you from experimenting, learning and growing as a Web designer. This isn’t to downplay the value of iterating on previous design elements, which can be a useful exercise and which can challenge you to get creative and experiment.

Invest In Custom Icons And Graphics

Spotify uses custom icons and graphics, rather than relying on stock images, to give their design soul and character.

Custom illustrations, imagery and iconography make for a unique experience on a website. While stock photography and vectors do save a ton of time, a photo of a smiling sales rep wearing a headset just feels phoney to visitors when they’ve seen the same image on five other websites.

Invest time in creating custom icons and graphics to preserve the look and feel of your website, as well as the authenticity of your message.

Spotify is a perfect example of this. Its lighthearted, “sketchy� illustration style sets its apart from all the other music services, and it leaves a lasting, positive impression on visitors.

Some other examples of great websites with custom icons and illustrations:

• Captain Dash
• SlideDeck
• Axure

Remove Friction That Impedes Scrolling

Encourage scrolling by removing obstacles.

As screen resolutions expand and touchscreens multiply at every turn, we’re encountering longer pages and smaller website footprints. And with good reason: a user who has to scroll down the page will encounter far less obstruction than someone who has to click a link and wait for the new page to load. Removing this obstruction will not only simplify the navigation, but help to tell a cohesive story, without the interruption of page loading.

As Paddy Donnelly’s excellent article “Life Below 600px� explains, the fear that users will ignore any content unlucky enough to fall below the fold afflicts designers much less today. And the proliferation of devices of different resolutions makes it almost impossible to determine where exactly the fold lies.

“Life Below 600px� is an excellent essay that dispels the myth of the fold.

Weave a cohesive story concept by getting creative with connecting individual page sections. This will promote a natural flow for the user, encouraging them to explore deeper into the page, building momentum in their experience and making it easier to get all the way through the page. You can even tie radically different styles of content together on the same page by adding small visual cues at the bottom of each section to indicate that more content awaits — much like how different rooms in a house can have entirely separate functions yet retain a common theme. If each section on the page comes to an abrupt end or looks like a footer, then users will be less likely to reach the end.

In fact, scrolling has become such a natural interaction on most Web-enabled devices that Apple did away with the scroll bar in OS X Lion.

The Dangers of Fracking and Slavery Footprint deserve hearty mentions. Both websites drive the user to scroll down with incredibly creative parallax effects and compelling stories.

More awesome examples of mega pages:

• Night Stand HD
• Diablo Media
• Courier
• Rdio

Make The Design Invisible Through Interactivity And Functionality

After more than 20 years of evolution, the paradigms of the print world still provide the fundamental building blocks of the way we present content online. Think about the terms we use to describe the Web: pages, headlines, columns, scrolling. These are band-aid metaphors that we’ve adopted to make the Web more understandable to the public. But the medium itself is capable of so much more. Static text and images are usually fine, but human beings by nature crave varied stimulation, and the Web is capable of feeding that craving with a much more interactive and richer experience.

Joyride uses “Pit stops� of interactivity to keep the visitor engaged with the website.

Providing clear points on the page where users can interact with the design, rather than passively consume it, will help to relieve the burden of wading through long passages of copy. Visitors will experience the invisible part of a design; content sliders, tooltips, lightboxes, modal windows and other points of interaction give them something to do and can propel them further along in the story, much like how a good museum exhibit mixes methods of conveying information. Of course, swing too far to the extreme of too much interactivity and you’ll distract users, so be cautious of how much you build in. All interaction points should serve the overarching goal of the page.

Joyride is a great example of this approach. While the page has plenty of content, Joyride does a great job of guiding the user around the page and highlighting points of interest to come back to later. (And the little surprise at the end will leave you grinning.)

Great examples of engaging users with interaction on the page:

• CircleMe
• Path
• Second Story
• La Moulade

Pay Attention To Detail

Whether you’re going for clean minimalism or complex and illustrative, pay special attention to the details of every element on the page. Even slight inconsistencies will be picked up by users subconsciously, thus diminishing their experience or confusing them.

A few common pitfalls to watch out for:

• Typography gone wild
  Each typographic treatment in the design should be consistent with its function. Headings in one part of the page should look the same as headings elsewhere on the page, and indeed throughout the rest of the website.
• Buttons, buttons everywhere
  Be conscious of where a button style is called for, as opposed to plain text links. Overusing buttons diminishes their overall effectiveness.
• Changing gradients
  If your design has gradients, use them consistently, with the same shades across like elements and with the same gradation.
• Mind the gaps
  Consistent spacing and alignment between page elements will make the layout feel refined and high quality.

Thoughtfully questioning each element in the layout is key to achieving a highly polished design. The burden is on you to prove that an element has a reason to be there and is not superfluous to the experience. At the end of the day, don’t fall into the trap of thinking “No one will notice,� because the chances are high that someone will!

As Antoine de Saint-Exupéry once said:

Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.

Consider whether the elements on the page have the right amount of detail to fulfill their purpose. Does that button have the right texture and color treatment to serve its role? Does it need texture at all? Simplicity is key and is relative to the purpose of the element.

Polished designs can be found across the Web, if you look closely.

Polished touches lie all around the Web if you look. Little Big Details rounds up some details from the Web and other interfaces that many of us encounter every day but don’t notice.

To see a truly polished design, head over to PixelResort. To describe it in one word: sumptuous. No detail has been spared for each element. The entire experience has a weight and tangibility that stays with the user.

Some other excellent examples of polish on the Web:

• Wunderkit
• Metalab
• Outside

Bringing It All Together

Creating a truly beautiful and memorable website ain’t easy. You’ll need to make a significant investment of time and effort, focused in key areas for maximum payoff:

1. Design the entire layout specifically for the given website. Putting a new coat of paint on an old template won’t give you the most compelling design possible.
2. Create your own graphics to give the design a unique personality.
3. Motivate visitors to scroll by weaving a story across the page that compels them to finish.
4. Engage visitors with variety. Adding “rest stops� of interactivity will keep them actively thinking about the experience that you’re leading them through.
5. Finally, polish, polish, polish! Think about every detail in the design. Make sure nothing is missed.

There you have it: five solid techniques to ensure that your website is a beautiful and memorable experience. This roundup is by no means comprehensive, but the techniques will pay you back with returning visitors, high engagement and user satisfaction.

Do you have any tips on adding beauty to a design? Feel free to post them in the comments!

(al) (jc)

© Jason Amunwa for Smashing Magazine, 2012.

Many people think of PHP, Ruby on Rails or Python and Django when choosing a language to create a new website or when choosing a language to learn to get that exciting new job. .NET, however, seems to occupy a space somewhat apart from this playground of cool kids. It’s always the last to be picked for team sports; it was shouting “Wassup!â€� at parties well after 2000; and it has been just plain left out in the cold.

I’m not one of these people. In fact, I’m quite a fan of .NET and have found it great to develop with since moving away from PHP in the early days of my career. With its great tools, large community and broad applicability (mobile, Xbox, desktop and Web) it’s both powerful and fun.

Let’s be honest, though. I’m probably already playing devil’s advocate. So, let’s see if I can convince you, a seasoned non-.NET developer, to try it out.

If you’re already a .NET developer, you might still find something new in the code sample, so I urge you to take a look.

.NET?

Let’s be clear on what we mean by .NET, as opposed to IIS (which is a Windows Web server), C# (one of the .NET languages) and ASP Classic (the previous interpreted ASP from back in the day). First, the decision to become a .NET developer is not necessarily a choice of language. Although the majority of developers out there work with C# and most jobs are for C#, you can also code using the .NET framework in Visual Basic (VB), F#, IronRuby, IronPython and others, taking advantage of the same base libraries. Admittedly, paid work for ASP.NET is mainly done with C# and VB. For fun, though, and to show how many options you have when developing on the .NET platform, the code sample below will include some of the more obscure methods of rendering a Web page using .NET.

So by “.NET,� we really mean the Common Language Runtime (CLR) (and/or the Dynamic Language Runtime for Iron* languages), which is essentially the virtual machine that the various languages accompanied by the base class libraries can run on. Frameworks are then built on top of that for Windows, Xbox, mobile and Web.

What Does This Mean?

Knowing that .NET is a runtime, we can infer that it is not inherently tied to a particular platform. Of course, the Microsoft CLR is the most common, but Mono is an open-source implementation that runs on Mac and Linux. The mono project also provides us with mod_mono (Apache), monotouch (iPhone) and monodroid (Android) as alternate platforms on which to run our C# code.

To differentiate it further, unlike scripting, interpreted per request languages such as classic ASP and PHP, C# is compiled. This means you don’t have to worry about including files or following naming conventions and folder structures to ensure auto class loading, nor do you have to rely on modules or add-ons to provide such things as RAM-based caching. In fact, the integration goes deeper, allowing you to write modules for IIS (which is the Web server itself) in C#.

So, if you take the time to get to grips with .NET, you can take advantage of these ancillary benefits. Maybe make a game for Windows or Xbox using XNA, or make a app for Windows Phone 7 or Surface. Not to say that every .NET developer is doing these things, but by knowing C# and the wider .NET world, you can very easily jump around the ecosystem trying them out, all using the same tools and core languages and all rounding you out well as a developer.

To see examples of .NET in the wild, take a look at Stack Overflow, Wired.co.uk, GoDaddy, aspects of the Sims and Unity 3. It’s not just for big enterprise B2Bs or people who are still running IE 6. And you can work with commercial products beyond just EPiServer and Kentico. The mono projects mentioned above are open source; and so, too, are a plethora of apps (e.g. Umbraco) and libraries (often found via the NuGet package manager).

Before we get too much into advertising territory, let’s be realistic. Plenty of negative opinions about .NET are out there. Some of these are myths, some are problems that have been addressed, and some are genuine problems that you’ll have to balance against the pros.

Tools

Most people have heard of Visual Studio. It’s pretty awesome. Yes, you do have to pay for it, but you can also get a free version. In fact, you can get it pretty easily using the Web Platform Installer, which will also install the IIS Express Web server and a SQL Server Express database if needed. (“Expressâ€� means “small-scaleâ€� and “freeâ€� in the world of Microsoft.)

If you want the full versions but don’t want to pay, then consider applying to Microsoft BizSpark (or, if you’re a student, DreamSpark). You’ll get access to the Microsoft stack for free for three years (after which, your business will be thriving and you can pay for it, or else it’s not and you’ll pay a $100 exit fee graduate). But to be honest, you probably won’t need it, particularly in the early days or if you’re a hobbyist.

Of course, these are all Windows tools. If you’re not on Windows, then you might opt for Mono Develop.

You could even go half and half: running VS as your IDE, coding in C#, but connecting to a MySQL or Postgres database. Nothing stops you, and support is available. This will even save you from having to consider the cost of production SQL server licenses.

Servers And Hosting

The Microsoft tax comes back to bite us here. But it doesn’t amount to a huge difference in cost. For example, for a VPS with the UK hosting provider Memset, a Windows box is £4 per month more than a Linux one. And the Microsoft website lists other hosts. Of course, you could go with Linux hosting, get yourself a VPS and configure mod_mono for your website.

What will hurt your wallet is licensing standard editions of SQL server. With this, you’ll have to balance the pros and cons of tight integration with the rest of the Microsoft ecosystem. You may, for example, go with the half-and-half approach to save on costs if you aren’t eligible for licensing discounts or if you are not happy with the restrictions put on SQL Express (such as the number of processors, RAM, etc).

A Brief Interlude

Is Mono Really an Option?

Mono has been around for a long time, but Microsoft doesn’t support it in the same way that it supports its own platform. Additionally it is usually slightly behind the C# developments coming out of Microsoft because the team has to catch up. The Mono website lists the areas of compatibility between the two. As you can see, the amount of coverage is large.

Finding shared hosts that provide for Mono might be hard, so you could find yourself configuring it on a VPS manually.

Actual Coding?

This is where we really get into some of the myths surrounding .NET. In my experience, many Web developers have a very negative perception it:

• Bloated markup,
• Lack of control over element IDs,
• Large base 64-encoded form elements,
• One form to rule them all,
• An odd paradigm that mirrors Windows development.

However, many of these issues actually apply to ASP.NET Web forms, which, although joined only recently by ASP.NET MVC (and even more recently by the Web API in MVC4), was never the only platform for serving Web pages using the ASP.NET base libraries. Not only are there mini frameworks out there, but you could use “Web forms� and just implement some of your HTML output and templates in another way; for example, with XSLT. Or you could even stick with Web forms but use libraries, such as the CSS control adapters, or restrict yourself to repeaters as opposed to grid views, etc. In fact, with the relatively recent additions to WebForms, we are seeing efforts to address these markup concerns.

This may not mean a lot to you if you haven’t used those systems, and I don’t want to get into it too much. The bloated markup was a sign of over-reliance on “controls”, where the final HTML was effectively hidden from the developer, and extras such as viewstate were added to mask the stateless nature of the Web. The paradigm itself was quite different from “normal Web development,â€� with a very desktop-style event-based approach: server-side button_click events, etc. This was useful for Windows developers who were migrating, but it often made Web developers, including me, balk.

The demo below uses an ASP.NET MVC project, but be aware that some of those old prejudices against using the Microsoft stack could be a more narrow dislike of old Web forms, rather than of C# or .NET generally.

Finally, The Example

Rather than patronize you with a step-by-step guide to installing tools using a GUI (the Web platform installer), I’ve created a sample project that you can access via GitHub. There is no data access (that topic could cover a whole series of articles). The aim is to give you a taste of ASP.NET pages, to show your range of options, and to provide a look at the code layout and tools so that you can try things out for yourself.

Tooling Up Your Development Machine

The easiest way is to get your hands on the following:

• Windows
• The Web platform installer
  • Install “Visual Web Developer 2010 Expressâ€� or a Visual Studio 2010 trial (note that there are different Expresses, such as an Express for Phone).
  • Install “ASP.NET MVC 3 (Visual Studio 2010).â€�
• If you want to run the IronPython demo, then you will also need to install IronPython
• If you want to play with the F# examples (and you are using Express, rather than a trial or standard edition Visual Studio), then you will need these:
  • Visual Studio 2010 Shell
  • The most recent F# CTP

Pull the project from the demo page and open it in your newly installed Visual Studio IDE. You should see something like this:

The DotNetDev project in Visual Web Developer Express

The DotNetDev project open in Visual Studio Standard

The only difference between the two is that I’ve used a feature of the paid for Visual Studio to add “Solutionâ€� folders for readability.

If you want to see the demo code running, I’ve put a copy of it on my server. As you’ll see, the demo pages include additional notes and highlighted code sections to explain the inner workings.

DotNetDev C# MVC example running in Chrome

Although the code looks like a lot here, the examples are extremely simple. In fact, each Web project simply outputs a classic “Hello world� phrase. However, each project uses either a different language or framework for the task. Hopefully, this should give you some insight into the options available to you.

If you want to immediately run any of the examples, simply right-click on the project that you want to run and choose Debug → Start new instance. Visual Studio will launch the website in your default browser, powering the code with the built-in Web server that comes bundled with Visual Studio (you will also see this little server running in your system tray).

Notes On The Examples

ASP.NET MVC C# and VB (Two Separate Projects)

These two projects show the most well-known and most used methods of website creation in the .NET framework.

The following are the two key areas in the non-database-driven ASP.NET MVC (C# code shown):

1. Routes (Global.asax)

routes.MapRoute(
		"Default", // Route name
		"{controller}/{action}/{id}", // URL with parameters
		new { controller = "Message", action = "Index", id = UrlParameter.Optional } // Parameter defaults
	);

This is the initial entry point of the website. With some simple pattern matching of URL strings, we can transpose a request to an instance of a controller and an action method upon that controller. Additional parameters relate directly to those required by the method. For example, {controller}/{action}/{id} will work for /messages/edit/1 (i.e. message controller → edit action → sending 1 as the ID parameter to the method) or products/index (i.e. products controller → index action).

2. Controllers (MessageController.cs)

public class MessageController : Controller
    {
        public ActionResult Index()
        {
            return View(new Message { Text = "Hello C# ASP.NET MVC World!" });
        }
    }

The MessageController is an IController class instantiated by the ASP.NET engine per request when the above route is matched. A method matching the action name will be called.

3. View Models (Message.cs)

public class Message
    {
        public string Text { get; set; }
    }

Although passing data to a view via a dictionary (the ViewBag) is possible, it is generally considered a better practice to package up the data that is required by a particular view into a “View Model,� used as a transfer object between the model and template.

4. Views (index.cshtml)

@model Message

<h2>Dot Net Dev</h2>

@Model.Text

The templating engine used in these examples is known as Razor. The approach of Razor is to have minimal impact on the code. The @ symbol is used to denote the beginning of code. If followed by a view model variable, it will be outputted to the HTML.

F#

open System
open System.Web.Mvc

open DotNetDev.Mvc.FSharp.ViewModels

[<HandleError>]
type MessageController() =
  inherit Controller()

  member x.Index() =
    x.ViewData.Model <- new Message "Hello F# ASP.NET MVC World!"
    x.View()

The F# example shows a slightly different take on the .NET framework. In this case, the functional F# language (often used in the financial sector) is used to define the routes, controllers and models in a class library project. To be fair, the example used here is simple enough (as is my knowledge of F#) that the code is still reasonably imperative.

Also, note that the F# example shows how F# and C# can be used together, allowing you to, if appropriate and useful, use libraries of each in the other.

One point to note if you are trying to run this example via Web Developer Express is that F# library projects are not supported. However, you can use the also free VS2010 Shell and F# CTP to view the source, compile it and then run the Web project (DotNetDev.Mvc.FSharp.Web) from Express itself using that compiled library.

IronPython

class MessageController(Controller) :
    def __init__(self):
        self.ActionInvoker = DynamicActionInvoker(self)
    def Index(self):
        return self.View("index", Message("Hello IronPython ASP.NET MVC World!"))

The IronPython example shows how the DLR can be used to execute Python code from within a .NET application. The PythonControllers.py file contains all of the Python code needed to do this. Again, as with F#, multiple languages can work together in a .NET project.

Experienced .NET developers might be interested to look at the implementation of the DynamicActionInvoker that I’m using, which allows the use of dynamic controllers to serve the request (where traditional reflection to find the controller method would fail).

C# Using the Nancy Framework

The final example shows that we don’t need to use Microsoft’s framework(s) to render a website using C#. Here, I’m using the minimalist Nancy framework (inspired by Ruby’s Sinatra), one of a number of open-source .NET Web frameworks.

Almost all of the Nancy example is contained within the following code snippet:

public MessageModule()
	: base("/")
{
	Get["/"] = x =>
	{
		dynamic model = new Message { Text = "Hello Nancy World!" };
		return View["message_index.cshtml", model];
	};
}

Here, we can see the route pattern being defined and matched to a method in the same line, using a C# lambda (or inline anonymous function) assigned to a dictionary in the message module. This means that when a GET request comes in for /, the function body gets executed, and all it does is create a Message model, assign it to a dynamic variable and return it with the view’s name.

An Aside

The Nancy example also shows another useful feature of .NET. If you are used to tools such as PEAR, then you will be aware of the concept of package management. Essentially, using [project] right click → Manage NuGet Packages from Visual Studio, you will be able to search online through a myriad of open-source and free libraries to use in your projects. In this case, I've used Andreas Hakansson et al's Nancy Web framework.

Some Context (Headscape)

This article has been a bit of a whistle stop tour through the .NET ecosystem. The intention was to ground experienced developers in what .NET is about, at least from my perspective, enticing you to make small changes to the sample code to see how you fare. Although I'm not suggesting that you make your controllers in IronPython or F#, hopefully I've shown how easily these languages can be used in a .NET project, whether it be to reuse some existing logic or to take a more dynamic or functional approach to an aspect of your work. It should also now be clear that .NET is embracing open source. Not only do some of its own offerings carry open-source licenses, but the default MVC project includes jQuery and Modernizr, and people are contributing frameworks and applications.

To give some context to all of this, I work as the lead back-end developer at Headscape, a design and development agency in the south of England. Although I wouldn't identify ourselves as a “.NET house,� we do use it extensively, having grown from using ASP Classic to using the technologies that Microsoft grew it into. We even started out using the free Express editions of the tools. Our projects over time have been created in Web forms, VB and C#, but we do not shy away from using other technologies. We also use WordPress, Magento and other non-.NET projects. Playing around in the .NET ecosystem, however, has enabled me to have a go at XNA game development, to play with Python in a framework that I already know, and to look into mobile development in my downtime.

Please do run the code, play with it, check out the full demo (with additional notes on how this stuff all works), and let me know what you think.

Resources

• DotNetDev
  The running demo
• DotNetDev on GitHub
  The source code
• Microsoft Web Platform Installer
  The tools
• Microsoft BizSpark
  The licenses
• IronPython
• The Mono Project

(al) (km) (jc)

© Craig Rowe for Smashing Magazine, 2012.

Do you want to get better at what you do? Well, getting feedback is the most important step in doing that. The world is much more social and information is flowing faster than ever before. We can’t afford to be doing things without listening to our followers or users. The only way we can survive and even stand out is by shaping ourselves with the help of others. So let’s get our customers involved in building our business better, with some feedback tools and services.

Now don’t get confused with all these feedback tools and services. Knowing what each tool is good at will help you get feedback more effectively. We’ve categorized each method of getting feedback into 7 different concepts to narrow your search.

• Voice of Customer Feedback – Get visitors to complain or give feedback by using widgets
• Process Level Feedback – Feedback forms trigger when an action is taken in the site
• Web Design Feedback – Get opinions for design mockups, ideas, or projects
• Crowd Sourcing Feedback – Build forums and communities for bugs, requests, or praises
• User Testing / UX – Test what you want and get feedback about it
• Surveys – Collect user opinions with multiple questions
• Website Chat – Get instant feedback about any situation

Voice of Customer Feedback Tools and Services

Wishbox
By pressing a button, it takes a screenshot of the current page, goes to the feedback wizard, and then allows users to paint, write, draw, blackout, crop, and give comments to show exactly what they want.

BugMuncher
Highlight a specific area on the web page, blackout unnecessary stuff, write a description, and check out the feedback preview before sending in the feedback.

WebEngage
A classic feedback widget which you usually see on the sides of a website. Start by setting up a basic feedback form, customize the fields, add some CSS styling to the feedback window, integrate it with code, and wait for the feedback to come in.

OpinionLab
Arrange the feedback places on any part of your touch/curiosity points and start collecting customer feedback.

Feedbackify
Create & customize your feedback form and put it on your website easily. Put custom scripts on your feedback form to pop up automatically in certain places.

UserEcho
Customers can vote on their favorite bit of feedback so you can track which changes are working, monitor feedback with a statistical system, and organize your content with an automatic duplicate search system.

GrabFeedback
Sign-up with the service, manage your forms, and put it on your site with a piece of code. Check out the analytics of your feedback in 3 different dashboards.

KissInsights
Target your questions to any customer type, keep questions short, and get results privately if you prefer to be exclusive.

Process-Level Feedback Tools and Services

Kampyle
The system triggers when a unique action takes place such as downloads, checkouts, uninstalling etc.

Webreep
Collects customer feedback in three ways. A feedback button, a direct invitation, or when users leave the website.

ForeSee
Measures satisfaction throughout the web experience across the purchase lifecycle (from browse to checkout, purchase, post-purchase, etc.), across brands, and across a lot of points to find out where a user fails to succeed in your specific pages or actionable items.

Web Design Feedback Tools and Services

Notable
Captures websites and makes it useful for web designers and developers to check up on their work, get constructive criticism, and improve their projects.

Concept Feedback
Post your landing pages, mockups, wireframes, apps, and interfaces and get feedback from experts with real world experience.

ProofHQ
Proofreaders will be able to see each others’ comments and be able to work more effectively while managing conflicting feedback.

ConceptShare
Visually review print, web, and video assets with markup tools like a pointer, pen, crop, highlighter, shapes, and images. Comment pins allow you to see a “heat map� of commenting activity on an asset.

Redmark
Upon uploading a design, an automatic e-mail is sent to clients which makes it easier to receive fast feedback.

Bounce
Grab a web page, give feedback, and bounce your idea around the web.

Launchly
Test your ideas, designs, and services from an audience that is passionate about new websites.

Crowd-Sourcing Feedback Tools & Services

Get Satisfaction
Engage customers on Facebook, your website, searches, or on any mobile device to build better relationships.

SuggestionBox
Create unlimited categories for suggestions such as, feature requests, bugs, in progress, and so on. Makes sure you don’t lose track of them.

User Voice
A feedback forum to maintain customer satisfaction and support. Answer feedback instantly on the platform or on your favorite mail service.

Sitepoint Reviews and Critiques Forum
Sitepoint review and critiques forum has a large community which is available to help fellow designers out by providing feedback on their design elements and website reviews.

IdeaScale
Create a feedback community by giving your customers a platform to share, vote, and discuss feedback.

SparkBin
This tool works for your employees rather than your customers. It can quickly gather ideas and drive your employees to submit ideas more frequently.

Gripe
Helps users complain with a location-aware mobile app to one of any 100 million+ local businesses or service providers worldwide.

Zendesk
Get customer satisfaction ratings, advanced analytics, and open your customer service up to social media like Twitter and Facebook.

User Testing / UX Tools & Services

FiveSecondTest
Upload a screenshot/mockup, prepare questions, and wait for people to give feedback.

UserTesting
Select your participants from specific demographics or choose your own customers to perform tasks that you want.

Usabilla
Test designs at any stage by selecting popular predefined tasks or creating your own tasks.

Userfly
Implement to your site with a single line of code, start testing immediately, and watch your users’ mouse movements and clicks.

Feedback Army
With a cost of $20 submit your URL and arrange questions you want to get answered by an army of feedback people.

OpenHallway
Create tasks, share the link with your participants, and then watch and listen to the recorded sessions anytime, anywhere.

Loop11
A remote usability testing site which requires no coding and no downloads. Create a usability test, invite participants, and analyze data with quality metrics.

Userlytics
Handpick any demographic from age, gender, hobbies, occupation, etc. and get qualitative research results in a matter of days or hours.

WhatUsersDo
Prepare some sets of tasks for your users, their demographics, and watch them complete the tasks, or not.

UTest
Choose a test from a variety of user testing types and learn more about the process and engagements.

Survey Tools and Services

Confirmit Survey Software
Create surveys fitted with your company branding, and send them to your customers or employees.

SurveyMonkey
Create surveys by choosing question types, survey templates, skip logic, and many more customization options. Get responses and analyze with analytics.

4QSuite
Use an invitation rate to control the impression rate of the surveys. Upon completion, get real-time results and reach out to your respondents.

Zoomerang
Create surveys, send them out, get responses in real-time, and monitor the results.

SurveyGizmo
Combine 26 basic question types with customizable options for research, insights, tracking, and marketing automation. Use logic, branching, and jumping to make your survey dynamic.

JotForm
Drag and drop form fields to create any type of survey, embed to your site with a single code, or share it via a link.

Website Chat Tools

WebsiteChat.net
Put a live chat button on your site and wait for a user to click on it.

Mibew Web Messenger
This open-source live support application enables one-on-one chat assistance in real-time directly from your website.

Chatango
Add to your site including Facebook, Blogger, or many other social networks. Have control over the chat group where you can ban users, delete messages, add moderators, and even ban words.

Olark
Know who’s on your site, chat with them, and improve your business.

AjaxIM
Open-source extensible, customizable, instant messaging framework with an easy installation.

To Wrap It Up

We’ve got lots of feedback tools and services and tried to cover them all for curious and passionate listeners. However, if you know other tools, methods, or even experiences that might fall into this article range, feel free to comment below.

(rb)

As interface designers, we’re often required to demonstrate the look and feel (and interactions) of the interfaces we design. We often begin with a series of flat images, and while these may be pixel perfect and show some amazing detail, they lack the context of the user experience.

Without context, it would be difficult for your clients to understand the flow of an app or website in the way you originally planned it. The best way to introduce context is by adding interactivity. By providing an interactive prototype (or interactive mockup), your clients can play around with it to their hearts’ content to get an idea of how the app will work and to test the interactions.

The tool for creating interactive prototypes that wins hands down is Adobe Fireworks. Fireworks focuses on designing, prototyping and exporting for the Web, and it has a few hidden features that can easily add interaction to your prototypes and that will speed up your workflow.

But first, a little introduction. My name’s Trevor Kay and I’m a designer for Exvo. At Exvo, we create a range of Web apps, from small widgets to full desktop-like Web apps. Using Adobe Fireworks has increased our efficiency in designing and maintaining our app prototypes. “How?�, you may ask. The answer is simple: pages and symbols: the best kept secrets in interface design!

Prototyping In Code Vs. Prototyping In Fireworks

There are many prototyping techniques, and the one you use will depend on your level of technical skill in coding, the speed at which you need to produce the prototype, and the level of visual fidelity needed. Lately, prototyping in the browser has become a popular trend. So, do we still need visual tools such as Photoshop and Fireworks, or can we start right in the browser?

The answer is, it depends! Sometimes prototyping in code is best, and sometimes designing (and prototyping) in the browser is certainly not the answer.

When the prototype needs only simple interactivity, must be created quickly or requires detail and polish in its appearance, then Adobe Fireworks is the perfect tool because you don’t need to know any code to make a live prototype in very little time.

Why not Photoshop? While both Fireworks and Photoshop are excellent design tools (and often compared in UI design), Fireworks can take you one step further and produce a live prototype right from your design. In this article, we’ll cover this subject in more detail.

Fireworks is also very good when you need to create graphics for more complex prototypes that are created in development environments or even in the browser, because it can quickly slice, optimize and export graphic assets and can even help provide the CSS code for layout and text styles.

On the other hand, if you are proficient with code and need to make a prototype with complex interactivity, then prototyping in the browser might be the better option.

Now, let me show you why Fireworks works so well for me in both the prototyping and design phases of my projects!

PNG, Pages, Master Pages

Pages (and PNG)

Fireworks’ best friend is the PNG file format. Together, they achieve some pretty cool things, such as storing a multi-page document in one Fireworks PNG file (known as a Fw PNG). But I hear you say, “PNG is a flat file format!� While this is generally true, a PNG can also be extended to include various types of meta data. By using this ability to add meta data, Adobe Fireworks can store multiple pages in one PNG file, while maintaining complete editability within Fireworks itself (of vectors, bitmap objects, pages, layers, live filters and so on).

The benefit of this is two-fold. First, editable PNG files are usually very small, much smaller than comparable Photoshop PSD files. The actual difference in size can be stunning, as some designers report: one Fireworks PNG editable file with approximately 30 pages (equivalent to 30 separate PSD files or one PSD file containing 30 layer comps) can be as low as 9 MB in size, while in some cases a three-page PSD file (with layer comps, which can partially simulate pages) can be as big as 100 MB or more! A small size also means that Fireworks’ editable PNG files are easy to share and quick and simple to sync, even over a slow Internet connection.

Secondly, by storing all of the screens of your app’s prototype as pages in one file, nothing gets lost, and sending the file itself to coworkers and clients is easy.

One Fw PNG file may contain many pages.

Pages give you almost unlimited freedom. You can have many pages in one PNG file, and each page can have its own unique settings. You can also give each page its own name (just like you can rename layers and states). Naming your pages clearly will help you when you make the prototype interactive.

Pages actually enhance the layer model that you might already be familiar with from working with Photoshop, because each page in Fireworks is like a separate file: each page may have its own size, optimization settings, and unique content as well as shared content from other pages. Fireworks also uses layers and states.

Think of each page as a flat canvas for you to place objects on. You can move these objects around and reorder them easily, because you can interact with them directly on the canvas (just as you would with objects in Illustrator), and not through the Layers panel, which can speed up your workflow considerably!

Master Page

Fireworks also has a master page feature, which is a template for all of the other pages in your prototype. Let’s say that the same toolbar appears on all pages of your app: simply place the toolbar on the master page, and it will appear on every page. This eliminates the need to constantly duplicate elements and can save you many hours. Creating a master page is easy: just right-click on any page in the Pages panel and select “Set as Master Page.�

If you need to update an element that appears on all pages, edit it on the master page and it will be automatically updated on all other pages!

Note that objects placed on the master page will appear at the same coordinates on all other pages connected to the master page. You cannot move or change the position of master-page objects on a per-page basis.

You can also share layers to pages, which is an alternative to using a master page. However, the master page always shares all of its layers to all pages, whereas sharing a layer from a page allows you to select which pages the contents of the shared layer should appear on.

Select Behind Tool, Subselection Tool, Symbols

Fireworks also provides two powerful tools to help you avoid touching the Layers panel (and work more efficiently): the Select Behind tool and the Subselection tool.

(A layer in Fireworks is a container for objects (much like a group in Photoshop), whereas a layer in Photoshop is an individual object.)

Select Behind Tool

The Select Behind tool (located in the Tools panel or by pressing V twice) enables you to select a top-most object, and, with repeated clicking, select each of the elements directly beneath it in turn. This is yet another feature that helps you work more efficiently by not requiring you to awkwardly navigate the Layers panel, searching for an object either by name or tiny thumbnail.

In this example, five individual objects are placed on the canvas. With the Select Behind tool, selecting any object beneath another object is easy.

Subselection Tool

The Subselection tool (located in the Tools panel or by pressing A) enables you to select individual objects that are part of a group. This speeds things up because you won’t have to continually ungroup and regroup objects.

In this example, five objects are grouped together. With the Subselection tool, selecting any object inside the group is easy.

Once you get into the habit of working with pages and objects, you will feel a weight lift from your shoulders. The Select, Select Behind and Subselection tools make it a breeze to interact with the elements in your design!

See the article “Using Pages, States, and Layers in Fireworks CS4� by David Hogue for an excellent explanation of how all three elements interact with each other in Adobe Fireworks.

Symbols

Symbols are another powerful feature in Fireworks, and they complement pages and master pages quite nicely. A symbol is a special graphic group that gives you “edit once, update everywhereâ€� functionality, which saves a lot of time, too. Any object, layer or group of objects can be turned into a symbol simply by pressing F8 or by going to Modify → Symbol → Convert to Symbol in the menu. (We’ll talk about symbols in detail later.)

Want to learn a bit more about symbols in Fireworks? Watch the useful video tutorial “The Power of Symbols in Adobe Fireworks� by Rogie King.

How To Create Interactive Prototypes

All of the Fireworks workflow improvements mentioned so far are important on their own, but the real magic happens when you start making interactive prototypes. Fireworks was originally created by Macromedia as a tool targeted specifically at Web designers, and Adobe continues to develop Fireworks in this direction. It covers a lot of the things we need: pages, master pages, symbols, styles, bitmap- and vector-editing tools, and one of the best image exporting and compression features. But Fireworks has another feature that the Web has pretty much forgotten about: image maps.

Image Maps and Hotspots

Fireworks uses hotspots to generate image map areas. An image map encompasses multiple areas, which are referred to as “hotspots.â€� Adding a hotspot is as simple as selecting an object on the canvas, right-clicking on it and selecting “Insert Hotspot.â€� Alternatively, you can use the shortcut Control/Command + Shift + U, or in the menu go to Edit → Insert → Hotspot. You can also manually add hotspots with the Hotspot tool (found in the Tools panel).

Hotspots may be rectangular, circular or polygonal, but the best practice is to use rectangular hotspots because you can’t replicate circular or polygonal hotspots with normal links, which the final product will have. Also, if you decide to export the prototype to a PDF, only the rectangular hotspots will export.

Two hotspots (notice the blue-colored overlay).

Once added, a hotspot will appear as a blue-colored overlay above everything else. If you wish, you can change the color of a hotspot in the Properties panel. Hotspots exist in the Web Layer, which always resides at the top of all layers in the Layers panel.

Inside the Web Layer.

Note that when you export a prototype to HTML, the names that you gave to the pages in the Fireworks PNG document will become the names of the exported HTML files.

Manipulating Hotspots

When a hotspot is selected, the Properties panel will change and give you the option to add a link to the currently selected hotspot, as well as to specify how that link should open (in the same window or a new one, for example). The link could point to an external website (such as http://www.smashingmagazine.com) or to an internal Fireworks page. By linking to an internal page, you have taken the first step in making your prototype interactive.

The Properties panel when a hotspot is selected.

The selector for link: is divided into two sections, separated by a horizontal divider. Below the divider are the pages in the current Fireworks file; above the divider are all links currently in use in the open Fireworks document, and they may be either internal or external links.

A list of URLs in the Properties panel.

Now, all you have to do is go through the rest of the prototype and add the links. Remember, anything may be a linked hotspot. Need that button to open a new page? Done. Need that image in the slideshow to look like it progresses to the next image? Done. Achieving these effects really is that simple, and it will change the way you present your design prototypes. Also, you don’t have to worry if the names of your pages change; Fireworks will handle that for you as well and will automatically change all relevant hotspot links so that nothing becomes unlinked.

Export the Prototype

Once you have created all of your hotspots, how do you go about sending your clients the interactive prototype? Of course, you wouldn’t send them the editable Fw PNG file. While the PNG file contains all of your pages and links, it isn’t interactive. Clicking on a hotspot in Fireworks would not take you to the linked page; it would just select the hotspot. To make the prototype interactive, you need to export it to HTML files. These HTML files are what your clients can view and click through. They can be opened in any browser (Firefox, Safari, Chrome, Internet Explorer, Opera), so you don’t need to worry about compatibility.

The Export dialog in Fireworks.

When exporting an interactive prototype, use the default option of “Put images in Subfolder� to keep everything neat and organized. This has the added benefit of allowing you to easily send only the images to the client, if required. The exported images may be in any common image file format: PNG8, PNG24, PNG32, JPG, JPG Progressive, GIF. Note that the default format of the exported images is determined by their page’s optimization settings and then overridden by any slice’s individual optimization settings, which gives you a fair amount of control and flexibility.

Fireworks Pages: What Is Their Limit?

Pages allow for the efficient creation of prototypes, but what happens if they become too efficient?

Handling a Fireworks PNG Document With Many Pages

I don’t know what the record is for a Fireworks document with the most pages in it, but I currently have one with over 150 pages, and it is still growing! While this is a complex file with a large number of objects, it shows how awesome Fireworks’ PNG file format is: the file’s actual size is only 16.6 MB!

150 pages in one Fireworks PNG document? Possible!

Why would anyone need a prototype that big? The simple answer is that I’m designing a complex app (Exvo’s Web app), and many intricate parts need to be covered by the prototype, so I’ve let it keep growing and growing.

While Fireworks can handle that many pages, it is certainly not recommended, for performance reasons. Try to keep your documents to fewer than 50 pages inside. Once you get past 50 pages, you might notice that Fireworks starts to use more RAM and opens and saves the document more slowly than usual. Performance also depends on each page’s canvas size, the number of objects and more, so keep the pages to a reasonable number to maintain an efficient file.

Pages Under Control: Splitting a Complex PNG File

Should our Fireworks PNG file become too large and unwieldy, how do we reduce the number of pages and optimize it? Because we are now relying on Fireworks’ ability to link pages and hotspots to create an interactive prototype, the hotspot links need to remain intact, even if we split the complex Fireworks PNG into several files. So, how do we proceed? Is it possible?

First, go through the prototype and make sure it is structured as defined sections. If the prototype is properly structured, we can split it up into smaller, more manageable pieces. To do this, we will need to count how many sections are in the prototype. If there are 10 main sections, for example, we would duplicate the file 10 times.

After that, we rename the duplicated files to match the sections of the prototype. Then, we open each of the duplicated prototype files and simply delete the pages that are irrelevant to that section; this will take some time and you have to be careful, but it is worth the effort. And… that’s it! You have now successfully split up your massive project file into more manageable pieces.

We also have to ensure that the smaller prototype files keep things together so that the exported HTML continues to link up correctly. To do this, we have to make sure that all of our top-level page names stay the same. While the relevant links will be changed within the single prototype file to make sure there is no unlinking, the other files will not update and will thus become unlinked. If you do opt to change the name of a top-level page, you would have to go through all of the other Fw PNGs and alter the hotspot links by hand.

If you do opt to split up a Fireworks PNG into multiple PNGs, then the master page and symbols will become unlinked. If you make a change to one PNG file, you will need to make the same change in all corresponding PNG files.

The prototype (Fw PNG) is now split into several smaller files.

The massive prototype file we had is now split up into smaller pieces, so you will surely want to export it to be interactive. This is still possible and made easier if you still have the original large prototype file. Export the large prototype to a folder so that all pages are in the one folder. Keep this folder around because when you make changes to your smaller prototype files in the future, all you will have to do is export to this folder and overwrite the old files. Because all of our top-level links are still the same, everything will link up correctly as long as all of the exports are saved to the same folder.

Symbols

While pages facilitate file management and enable us to easily make interactive prototypes, Fireworks gives us other workflow improvements, too, such as symbols. Symbols originate in Flash and are an easy way to build a library of reusable elements. If UI design has one defining characteristic, it is reusable elements. Here are a few things that make symbols in Fireworks so powerful:

• Once a symbol is created, you can save it to the Fireworks Common Library;
• Fireworks symbols allow for intelligent scaling with the use of 9-slice scaling guides;
• Symbols can be scaled as much as you like without losing quality.

Let’s take a close look at these features.

Reusability of Symbols

One of the best features of symbols in Fireworks is their reusability.

Symbols can be document-specific or available globally through the Common Library panel. Saving symbols to the Common Library means that no matter what document is open, all of your symbols will be available to use. The benefit is that you don’t have to recreate common UI elements across each prototype. If all of your apps have the same theme, then once your symbols have been created and saved to the Common Library, you will save yourself a lot of time by not having to redraw everything from scratch. This is an amazing time-saver because now all of your UI elements can be simply dragged and dropped into the current project!

The Document Library contains all of the symbols that have been used in the current document; these could include symbols selected from the Common Library, as well as symbols created specifically for that document. A benefit of the Document Library is that anyone who opens the Fireworks file will have access to all of the symbols being used in that document, including any symbols that were not created on their computer.

The Fireworks libraries of symbols: Common Library (left) and Document Library (right).

9-Slice Scaling Guides

Symbols may also include 9-slice scaling guides. These guides make it possible for you to define how a symbol will scale intelligently in all directions, and they reduce the number of times you need to manually edit vector points in order to change the object’s size. You can learn more about 9-slice scaling in a video tutorial by Jim Babbage and in a detailed article by Sarthak Singhal.

The 9-slice scaling guides are optional and are not included by default. You can decide whether to use them based on the type of object that you’re converting to a symbol. To make things even easier, Fireworks also gives you the option to activate or deactivate the guides for any existing symbol.

When you edit a symbol for which the 9-slice scaling guides are enabled, Fireworks presents you with the graphic for the symbol as well as four guides overlaid on top. These guides effectively divide the symbol into nine slices, with each determining how a particular part of the symbol will transform when scaled:

1. Corner slices
   All corners will not resize and will stay the same size no matter what. This is very effective for buttons made out of rounded rectangles.
2. Left and right slices
   These two slices will transform vertically but not horizontally.
3. Top and bottom slices
   These two slices will transform horizontally but not vertically.
4. Center slice
   This slice will transform both horizontally and vertically.

A Symbol in symbol-editing mode.

The ability to reuse and resize symbols without losing quality is what makes them so powerful. You will have a common set of elements ready to be dragged and dropped into your prototypes. The amount of time this alone will save you is amazing.

Just as Fireworks uses PNG as its primary file format, symbols are also stored as PNG files. All Common Library symbols can be found in the following location:

• Mac OS X
  ~/Library/Application Support/Adobe/Fireworks CS5/Common Library
• Windows XP
  C:\Documents and Settings\*username*\Application Data\Adobe\Fireworks CS5\Common Library
• Windows Vista and 7
  C:\Users\*username*\AppData\Roaming\Adobe\Fireworks CS5\Common Library

(If you are using a different version of Fireworks, just replace “CS5� with the version you’re using.)

If you ever need to migrate to a new machine or give a coworker access to your symbols, all you need to do is copy your symbols to the new location and Fireworks will recognize them instantly!

The Common Library in Fireworks.

Download A Sample Fireworks PNG File

Want to jump right into pages and symbols and easily make an interactive prototype with Fireworks? To help you, we have created a three-page prototype of an iPhone music player for you to download. You can open the music-player-demo.fw.png file in Fireworks and export it to a small interactive prototype.

• Download the Fireworks music player prototype (ZIP, 4.0 MB)

The sample Fireworks PNG not only will show you how hotspot links and pages work, but will give you a chance to play around with symbols. To export the Fireworks PNG as “HTML and Images,â€� just go to File → Export. Set the “Exportâ€� type to “HTML and Imagesâ€� and set “Pagesâ€� to “All,â€� and then select where on your computer to export it to. After the export, open one of the HTML files in a browser and try interacting with the prototype, navigating through the app by clicking the links.

When you’re testing the file, make sure the following panels are open in Fireworks: Pages, Layers, Document Library and Properties. Feel free to experiment with the prototype, add more hotspots and pages, and navigate around to see how the file is organized and how the pages inside are linked together. (Seeing which parts will be clickable once they’re exported is easy because the hotspots are marked in blue.) The file also makes use of symbols (stored in the PNG file itself — see the Document Library panel), shared layers and a master page.

Further Reading

• “Interaction Design and Rapid Prototyping With Fireworks,â€� David Hogue, Adobe Developer Connection
• “Rapid Interactive Prototyping With HTML, CSS, and JavaScript (Using Fireworks and Dreamweaver),â€� Dave Hogue and Mariano Ferrario, Adobe Developer Connection
• “Prototyping in Code,â€� Alex Morris, Mark Boulton Design
• “Designing in the Browser Is Not the Answer,â€� Andy Budd
• “Pages, Layers and States in Adobe Fireworks,â€� Dave Hogue, Adobe Developer Connection
• “Scale Objects With 9-Slice Scaling in Fireworks,â€� Jim Babbage, Adobe TV
• “Improved 9-Slice Scaling in Fireworks,â€� Sarthak Singhal, Adobe Developer Connection

(al) (jc)

© Trevor Kay for Smashing Magazine, 2012.