Working with people can be hard. But get it right, and you’ll be able to produce stunning work more smartly and quickly than ever before.

With methodologies such as agile and lean influencing how design teams work, some interesting challenges lie ahead. Iterative and collaborative practices vary greatly across work environments and even projects, and they can, and most likely will, bring your time-honed workflow to its knees.

A shared understanding of the tools (and the way you use them) is crucial, then. By sharing assets, constructing files systematically and generating objects using core techniques, the team is freed to focus on crafting concepts and solving problems, rather than fighting unwieldy file structures and obtuse working practices. This shared understanding should underpin everything the team works on, becoming part of an ever-evolving process of refinement and learning.

In this article, we’ll see how to start that journey by creating a stronger foundation for collaboration, even before the design process begins. I’ll also explore some techniques that are unique to Adobe Fireworks and that have the potential to transform your collaboration. (While these techniques involve Fireworks — my team’s tool of choice — you could apply them to your own workflow, even if you use another UI design tool.)

The Right Tools For The Job

You don’t have to listen too hard to be deafened by the passionate war cries of designers defending their program of choice, or else ditching it altogether. With Adobe’s decision to cease active development of Fireworks, focusing on this design tool might seem strange. However, neither Photoshop nor Illustrator can yet be used to design interfaces and Web graphics as efficiently.

The open extension architecture of Adobe Fireworks keeps its pulse beating, enabling the wider community to pick up Adobe’s slack. (The article “The Present and Future of Adobe Fireworks” covers this topic in depth and is well worth digging into.)

When it comes to UI design, Fireworks still has numerous advantages and is without doubt my team’s preferred design tool. In fear of repeating others, I’ll refrain from describing every Fireworks feature, focusing instead on what works best for us and on how Fireworks improves our workflow.

To get primed, consider reading some of Smashing Magazine’s other detailed articles about Fireworks, covering such essentials as vector graphics, direct selection, master pages, symbols, prototyping and extensions:

• “Developing a Design Workflow in Adobe Fireworks,” Joshua Bullock
• “Useful Fireworks Techniques and Features for Large Design Teams,” Kris Niles
• “iOS Prototyping With TAP and Adobe Fireworks,” Part 1, Part 2, Part 3, Shlomo Goltz
• “Optimizing the Design Workflow With Fireworks Extensions,” Part 1, Part 2, Part 3, Ashish Bogawat

What we’re really interested in is how best to exploit what’s available to improve collaboration. Below is a rundown of the juiciest parts.

Multiple Pages in a Single Document

Fireworks PNG (*.fw.png) is a neat, self-contained editable file format that contains all of a website or section’s layouts. This affords us a couple of advantages because we can apply a common page and layer structure to all pages in a document by using master pages and shared layers.

Multiple pages in Fireworks help to organize your workflow. (Image credit: Trevor Kay)

Multiple pages also help with cross-device design, because each page can have its own dimensions. You could have laptop, tablet and mobile phone screens all in one file, and even 1× and 2× versions that share assets and styles!

Using Symbols for Common UI Elements

By turning common UI elements into symbols, we can reuse them throughout the document. Update once and the changes will propagate everywhere!

Symbols can also make any transformations to a rasterized image non-destructive. Import an image, turn it into a symbol and then scale without a care.

Note: When using symbols to make bitmaps lossless when rescaled, you are still limited by the original image size. Scaling a symbol larger than the original will obviously introduce artifacts. Turning a bitmap into a symbol only facilitates lossless rescaling, as long as the symbol is as large as or smaller than the original.

External Libraries

With the Common Library, you can save a group of symbols outside of your PNG files to be reused across projects — think browser scroll bars, social icons and other handy stuff. Adobe Fireworks already comes preinstalled with a selection of symbols, ranging from fair to best forgotten. Unfortunately, these (and any libraries you create) must be saved locally in a particular folder on your computer, so sharing them with the team could be painful.

Fear not. This workflow can still be useful, and we’ll walk through a way that is not as well documented. Avoiding many of the limitations mentioned above, we can create a Fireworks master document: a single self-contained file that houses all of your shared symbols and that will feed all of your separate artwork files.

Export, Import and Update Graphic and Typographic Styles

Similar to other Adobe programs, Fireworks allows you to create a library of styles. Save any color, typographic style (font family, font weight, font color, etc.) or combination of live filters into a preset. Then, at the click of a button, the selected element will adopt the styles you’ve defined. These styles may be grouped, exported and imported between documents and, again, updated globally.

The workflow described in this article assumes a team of people, but the techniques will save you time even if you work alone.

Creating A Strong Foundation: Boilerplate To The Rescue

We’re going to have to overcome a few hurdles in order to use Fireworks effectively and to prepare a given project for the team. Creating and sharing a common starting point is key. A solid folder structure outside of Fireworks and a boilerplate will enable us to start quickly and to pick up a document where another team member left off, with minimal fuss and fewer headaches.

Creating a Boilerplate

The boilerplate should be the first file your team opens when it starts to design. It needs to be a living document, evolving as you improve your workflow and learn. Every team will have its own preferences, but here are some principles to guide you.

To get started, download the sample boilerplate (ZIP, 200 KB) that I created for this article.

Your boilerplate should be a living document. (Large version)

The sample boilerplate (ProjectBoilerplate_1140_v1.0.fw.png) contains two pages: “1. Blank” and “2. Modular Scale.” I also took advantage of the “Share Layer to Pages…” feature in Fireworks to organize the file.

Structure and Layers

Fireworks layers (identifiable by a folder icon) may contain multiple objects, groups of objects and sublayers.

Fireworks’ Layers panel. Every layer, sublayer and individual object (or group of objects) can be easily renamed.

Keep the base structure high level and abstracted. In my experience, three layers, named “Foreground,” “Background” and “Guides” are usually more than enough. With fewer layers, you will enjoy the benefits of easy object ordering and direct selection. Photoshop users will feel uncomfortable as they try to confine each element to a separate layer group. Resist the urge! It will restrict your flow and efficiency.

Select any object on the canvas with the Selection (the V key is a shortcut) and Sub-selection (A) tools, and rearrange the stacking order easily with Control/Command + up/down or Control/Command + Shift + up/down. Manipulating objects in this way is incredibly quick. Note that an object may be arranged only within the current layer; so, the higher the number of layers, the more restricted an object’s movement will be. If you find yourself working with the Layers panel for specific actions, like naming, visibility and masking, then try to simplify your file structure by reducing the number of layers (perhaps by consolidating layers).

Labelling

That being said, don’t get (too) lazy. Labeling (or renaming) symbols and locking objects are still important. Because the naming of object groups is non-persistent, there is little point in going over the top.

Use the Pointer tool (i.e. the Direct Selection tool — V) and Subselection tool (A) to highlight the objects you’re working with and to work more quickly. The Pointer tool is usually used to select an individual object or a group of objects, while the Subselection tool will select an object in a particular group of objects.

When working with more complex objects, the Select Behind tool (press V twice) might be handy, too.

Important: Once a group of objects that you have named is ungrouped, the name will be lost, even if you regroup them. To help you work with groups, John Dunning has created a smart set of commands. These commands enable you to add elements to existing groups, to easily ungroup objects without losing the attributes of the individual objects within the group, and more.

Grids

There are no hard and fast rules about grids. Different grids suit different briefs, technologies and situations. Test different systems, though, to get a quick start when you need one. Use both solid shapes and guides (Control/Command + ; or View → Guides → Show Guides) to define horizontal spacing and gutters. Some great Fireworks extensions for creating grids are covered in Ashish Bogawat’s article “Optimizing the Design Workflow With Fireworks Extensions, Part 1” (see the sections on “Grids Panel” and “Guides Panel”).

Common Viewport Dimensions

By creating a small library of graphical silhouettes that match the dimensions of common monitor resolutions, you can quickly sense-check your layouts (and page folds) by toggling their visibility. The silhouettes can also help you frame content when designing long pages.

Baseline

Make a vertical baseline with the Grid tool (Alt + Control/Command + G), and turn on “Snap to Grid.” Now, when you resize elements, you’ll find that snapping their height to the baseline value becomes natural. This enables you not only to run the baseline down the canvas infinitely, but to control each one independently, viewing it separately or alongside the horizontal grid.

Modular and Typographic Scale

As part of creating a coherent design, you will be defining the space between page elements. Not only is this a necessary element of a design system, but it enables the design team to make informed decisions going forward.

Normally, these values settle into multiples of 10. Why? Because that is the number of pixels that the extended nudge command (Shift + down/up/left/right) moves in most of Adobe’s applications (Fireworks, Illustrator, Photoshop and so on). And, realistically speaking, who doesn’t prefer to deal with nice, clean round numbers? As convenient as that may be, though, it makes little sense. Defining a modular scale up front will help here. Like a musical scale, a modular scale is a prearranged set of harmonious proportions that run through the design, forming relationships between elements and pulling them into a balanced whole. Because the Web is primarily a medium for textual content, our scale should be driven by typography.

The website Modular Scale is incredibly useful both for defining a typographic scale and for gathering a set of proportions to define spacing and size. Use solid shapes in the proper dimensions as measurement guides to lay out the design.

Like all rules, these too may be broken. But by educating your design and development teams and by giving them logical, predictable rules to follow, they will find their own efficiencies and achieve wonderful things. If this piques your interest, you can find out more from the following resources:

• “More Perfect Typography” (video) Tim Brown, Build Conference
• “More Meaningful Typography,” Tim Brown, A List Apart
• “Composing the New Canon: Music, Harmony, Proportion,” Owen Gregory, 24 Ways
• “R(a|ela)tional Design,” Billy Whited, 8th Light blog

Common Folder Structures and Naming Conventions

Any folder that is accessed and organized by many hands has the potential to get ugly, and fast. Agree on common folders and file-naming conventions for templates, assets, source PNGs and documents, and then stick to the system. The team should adhere to the rules, or at least try to maintain some level of discipline.

Tip: Try numbering your project’s folders to order them according to your agency’s convention or creative process. It also forces people to think about structure before offloading their files.

If you’re using Fireworks CS6, then you’re probably aware that the file names of artwork you save now include .fw before the .png file extension (i.e. *.fw.png). If you’re using an older version of Adobe Fireworks (CS5.1 or lower), get into the habit of manually following this convention. Not only does it immediately distinguish an editable PNG file from a regular (flattened) PNG, but it also fixes an old bug when opening Fireworks documents in Photoshop.

Version Control

Versioning software can be incredibly powerful for a team. It can certainly help to kill the final_final_finalv8_last schema that we all know and love. But popular technology such as SVN and GIT have their downsides. They are not developed with a designer’s needs at heart, instead treating our files like any other flat asset and preventing us from accessing individual pages. We also can’t visually browse the history of our artwork, and we often need a certain level of technical knowledge to use them comfortably.

But things are changing. Services such as LayerVault, Pixelapse and Beanstalk (with its design preview) are now releasing the potential of version control. They keep things simple and streamlined, and they can show the evolution of a design through every save and comment (comments are tied to particular versions). If you have not considered version control, now is the time to introduce it into your workflow.

Visual version control

Style Guide-Powered Visuals

Like most graphic design apps, Fireworks was built from the ground up for individual users. Only one designer can open and work on a given file at any time. You will more than likely fall into the natural habit of separating a file into sections, saving individual PNGs that reflect the website’s architecture. This will enable other designers to work on the project at the same time.

There is a downside. When you split a project into separate files, you lose many of Fireworks’ advantages — namely, shared layers, master pages, symbols and more. This is where the Common Library saves us a lot of heartache by keeping things consistent across multiple documents.

Fireworks Library Panels

Fireworks has two library panels: the Document Library and the Common Library.

The Document Library panel (Window → Document Library or Alt + F11) lists any symbols that you create, import and use in the active document.

The Document Library panel.

The Common Library panel (Window → Common Library or F7) holds non-project symbols that have the possibility of being used across multiple projects or in more than one document.

The Common Library panel.

The name of this panel — “Common Library” — sometimes causes confusion. The panel is simply a way to navigate and select symbols that are available across any (and all) Fireworks documents at any time (think of a common library of symbols). A symbol taken from the Common Library panel will appear in the Document Library panel (for that file) only after it has been selected and included from the Common Library.

Let’s make things a little clearer by creating a Common Library symbol. First, draw a simple shape and turn it into a symbol (F8 or Modify → Symbol → Convert to Symbol).

Creating a Common Library symbol.

Name your symbol, and make sure to check the Common Library box (see the screenshot above).

You should now be presented with a “File Save…” dialog box. (Notice that the file name ends in *.graphic.png, which is how Fireworks defines a Common Library symbol, although the graphic part isn’t strictly necessary.) To include this symbol with the other assets available in the Common Library panel, we need to save it to a particular folder in the Fireworks config folder on your computer. Here are the exact paths for Fireworks CS6:

• Mac OS X
  ~/Library/Application Support/Adobe/Fireworks CS6/Common Library/…
• Windows Vista, 7, 8 and 8.1
  [system drive]:Users<USERNAME>AppDataRoamingAdobeFireworks CS6Common Library…
• Windows XP
  [system drive]:Documents and Settings<USERNAME>Application DataAdobeFireworks CS6Common Library…

Save the symbol, and then return to the Common Library panel. Hit “Refresh” in the bottom-right of the panel, and your new custom symbol should appear, ready to be used across any number of documents!

The refresh button in the Common Library panel.

On the face of it, this seems pretty useful. Yet it has some significant limitations for large teams:

• Each symbol must exist as a separate Fireworks PNG file, which means it will show no context of the design around it.
• There is no easy way to alter the location of the graphic files, which makes it difficult for a team to share and update the symbol files.

Let’s dig a little deeper.

How To Create A Fireworks Style Guide (Symbol Library)

Although there is little in the way of documentation, there is another way to implement a Common Library, one that is far more useful: by leveraging a single external library, which can feed any number of symbols to multiple PNGs, which, in turn, can be updated globally. If this gets you excited, just wait till I show you its potential to become more: a master document, a backbone for your project, all driven from your multi-paged style guide. Exciting times!

The Configuration

From this point on, it will help to work with an established design, once you’ve agreed on the direction and have an initial framework in place.

Create a new Fireworks PNG file, which will act as a source file for your external library and style guide. Enlarge the canvas and save the file (for example, as styleguide.fw.png). If you’re part of a team, then save the file on a shared space or common server.

Adding Objects

Our empty document isn’t exactly fulfilling our hope of it being a global style guide. Let’s add some of our design elements.

Select a component from your artwork. Copy and paste it into your style guide. To turn this object into a shared asset, convert it into a symbol. And this time, leave the “Save to Common Library” box unchecked.

Reminder: If you add any symbols in the style guide, remember to leave the “Save to Common Library” box unchecked.

At this point, following a naming convention when creating the symbols would be useful. I like to use prefixes like Global_, Form_ and Btn_ to categorize symbols, but you can follow your own convention, of course. Prefixes makes it easier to find the right asset when you later need to import it back into your original artwork files.

Note: You can also split the document into a number of pages and add supporting graphics. It won’t affect how we import the symbols into our artwork.

Importing Symbols

Returning to the original file, open the Document Library panel (F11), and select “Import symbols” from the drop-down menu in the top-right of the Document Library panel.

Importing a symbol into the current Fireworks PNG file.

In the file browser, navigate and select the style guide library file that you have just saved (styleguide.fw.png). You will be presented with a list of all of the symbols available to be imported from your style guide. Select the symbols you need and click “Import.”

Selecting a symbol (or symbols) to import

Once they’re imported, you’ll find the symbols in the Document Library panel, with an _imported suffix. From this point on, you can treat them like any other symbols. You can drag and drop them into your current Fireworks artwork file, rename them and so on.

Summary: Creating a New External Library of Symbols

1. Create a new Fireworks source file for your external library and style guide (for example, styleguide.fw.png).
2. Copy the assets and symbols from the working design document(s) to the styleguide.fw.png file.
3. Convert the assets and objects in the styleguide.fw.png file into symbols (if they are not already symbols).
4. Save the styleguide.fw.png file in a location that will not change.
5. Create a new working design file.
6. Open the Document Library panel and choose “Import” from the context menu.
7. Navigate to and select the styleguide.fw.png file, then open it.
8. Choose the symbols that you want to import from the styleguide.fw.png file.
9. Import the symbols, which will now appear in the Document Library. Done!

Updating The Style Guide

We’ve created our style guide library (styleguide.fw.png), identified the elements to share between documents and started rolling out templates across multiple Fireworks PNG files. But wait! What happens when we need to change one of our components?

Remember that we’re feeding all of our artwork Fireworks PNGs from our external library, so any changes need to originate from there.

Open the style guide file, double-click the symbol that needs to be updated, apply the corrections, and resave the file. Next, return to your current artwork; in the Document Library panel, select the imported symbol(s) that you wish to update (holding Shift to select multiple items); and, from the drop-down menu in the top-right of the panel, select “Update…”

Updating a Symbol in Fireworks.

Adobe Fireworks will look for the file that the symbol was originally imported from, automatically updating the relevant symbols in your artwork, regardless of how many pages it contains. Repeat this step for any Fireworks PNG artwork files that source symbols from the same library.

Note: For large files, the updating process might take some time. When the process is complete, Fireworks will display a success message.

Summary: Updating the External Library

1. Amend the symbols you wish to change in your style guide file.
2. Save the changes to the file.
3. Navigate to and open your artwork file(s).
4. Open the Document Library, and select the symbols you wish to update.
5. Choose “Update…” from the context menu.
6. Wait for the success message to appear.
7. Repeat for all of the artwork files you wish to update.

Your style guide will now serve as a single reference library, accessible to everyone on the team, and detailing all of your designs components and development notes. It will also serve as a master symbol library, powering all of your artwork files.

Things to Be Aware Of

Nesting a symbol within another symbol is possible. With this method, both symbols will be imported, and the symbols will be displayed as separate items in the Document Library panel. But if you enable the “Select Unused Symbols…” option, it will highlight the nested symbol to be deleted, not recognizing that it’s being used in the active document canvas. So, I wouldn’t recommend nesting symbols.

Tips And Tricks

By keeping your source files clean, deleting unused symbols, grouping complex objects and doing regular housekeeping, you’ll keep Fireworks from getting too hungry for system resources. But if you find yourself running into problems and Fireworks slows down, there are few tricks worth knowing.

Pages (Un)limited

Multiple pages are a great feature in Fireworks but at times can give you some trouble.

There is no limit to the number of pages you can add to a document. (In his article “Interactive Prototypes and Time-Savers With Adobe Fireworks,” Trevor Kay mentions that he was able to use Fireworks PNG files with more than 150 pages.) But the more complex each page is, the more memory Fireworks will need.

Add too many pages, and there’s a good chance Fireworks will use too much RAM and slow down a bit (or even become unresponsive or crash). So, for complex designs, I recommend keeping Fireworks PNG files to under 25 pages. And if you mostly use lightweight simple vectors, you can push that number to 40. Staying within these limits will prevent frustration down the line.

Tip: While there is no upper limit to the number of pages you can add to a document, there is a small bug with page numbers when you create more than 100 pages. Adobe planned for only two digits in the page-number field; so, 98-99-100-101 becomes 98-99-10-10 and so on (i.e. the third digit cannot be displayed). Luckily, you would rarely need more than 100 pages.

Learn to Love Control/Command + S

This could be said of any application, but you should really learn to love Control/Command + S in Fireworks. Save your files regularly! On Mac OS X, if you forget to save regularly and Fireworks crashes for some reason, it will try to restore a backup copy of your Fireworks PNGs on the desktop — but don’t count on it.

If auto-saving is your thing, a number of great free extensions are available:

• Auto Save
  This panel automatically saves the active document at an interval of your choosing (for example, every 5 or 10 minutes). An updated and improved version of it is also available, hosted on Project Phoenix.
• Auto Backup
  This small AIR extension backs up all of your open documents, saving the copies in separate folder at an interval of your choosing. Sarthak Singhal has more about the extension.

Temporarily Lock Complex Assets

Group and lock heavy, complex vector shapes. Locking assets in a document can speed up rendering of the canvas substantially. When you do it, Fireworks will “know” that you’re unable to select that thousand-pointed vector object and will free up a fair bit of resources as a result. You’d be surprised by how much better Fireworks performs once you master this simple tip.

Of course, once you need to edit an object again, you can unlock it at any time.

Unused Symbols

Throughout the creative process, things change and elements are added, expanded and removed. If you are doing things right, you will be turning a lot of these elements into symbols. But symbols hang around, taking up memory and filling the document library. Solution? Simple yet effective, you can clean up the garbage by selecting the context menu in the top-right of the Document Library panel and then hitting the “Select Unused Symbols” option. Fireworks will automatically highlight all symbols that are not in use on any pages in the document. Now, you can easily delete them. Reducing the overall file size is a good housekeeping practice.

Clear Your History

If you really find yourself in a tight spot, clear the undo history from the History panel’s context menu, saving the Fireworks PNG file immediately after.

Conclusion

Taking the time to create a broad foundation is a simple and effective way to enhance understanding among team members. It is an important first step to unlocking better collaboration and facilitating the future involvement of other designers. It also provides an opportunity for discussion and a point of focus for iterations on a design.

By exploiting Fireworks’ libraries to their full potential, we can improve our workflow and roll out our artwork more quickly. When we adapt the master symbol library into a global style guide, we create a single entity with multiple facets of use. In fact, the majority of the workflow we’ve covered here could theoretically be applied to any graphic design application that supports symbols in a way similar to Fireworks!

So, why not try implementing this for your next team project? And if you have any other collaboration tips or any questions, we’d love to hear them in the comments below!

(mb, al, ml)

The post Collaborating With Adobe Fireworks On Large Design Teams appeared first on Smashing Magazine.

We met Rajashree last Fall semester and we thought it would be a good idea to revisit our researcher's again to promote the hard work that she has been working on.

 Rajashree is a Bioinformatics & Computational Biology major and an undergraduate researcher at the Howard Hughes Medical Institute. Her research probed into the micro-biological world of protein interaction which is essential to understand function within cells, pathways and relationship to diseases.

Read more about Rajashree's research here... 

Design is an imprecise term. Especially when used in regular language.

For instance, someone who believes "design" is quantified solely by a product’s visual appeal might be disappointed when they get a set of gray boxes and lines — a wireframe — as a deliverable created by a talented designer.

Design is not principally measured by a product’s visual appeal; its aesthetic qualities.

It’s also measured by how it was planned and articulated, how it was built, how it functions. It’s about the design’s ability to improve upon the current reality.

The commonplace view that a "good design" is anything that is beautiful and visually appealing is wrong. It’s wrong because a good design is more than that. The visual quality of a good design is just a portion of the equation.

Steve Jobs explains this point well, once saying:

"People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works."

Gmail has a good design because it’s able to intelligently discern between contextually-relevant emails versus ones you may not want to see right now, and because it gives you the ability to search thousands of archived emails accurately and quickly.

But you will never find Gmail being featured in any web design gallery, even though these galleries purport to have the goal of inspiring designers toward creating good designs.

Dropbox has a good design because it works flawlessly in the background without any fussing about, and because it ambitiously tackles a huge everyday problem people have.

Airbnb has a good design, not because the site is on all the popular web design galleries, but because of the company’s ability to reliably and conveniently provide a new form of accommodation for travelers.

Design is the creation of a plan for the construction of an object; a plan that represents how the product should be built.

Design lies at the crossroads of art and science, but both roads are equally important, so design is also about how we deal with that challenge.

A product’s visual appeal — its aesthetic attributes — is merely a part of its design.

Related Content

• The Difference Between Good Design and Great Design
• Staying Passionate and Motivated as a Web Designer
• When Flat Design Falls Flat

About the Author

Marcin Treder is a UX designer, the CEO of UXPin, and author of several UX design books (such as UX Design for Startups).

The post What Design Really Means appeared first on Six Revisions.

Being a user centered designer means a significant portion of my responsibility involves prototyping concepts to gain feedback for various designs that solve actual business problems. That means iteratively sketching or wireframing ideas early and often in the design process to generate conversation, and more importantly, to gather feedback from stakeholders.

My goal is to ultimately mesh user goals with business goals for a win-win situation that is mutually beneficial from both perspectives. Therefore, I’m always interested in any tool that enables me to not only be more effficient, but more effective in that process.

If what I’ve said so far begins to resonate, you may be interested in the following prototyping tools that can assist you in walking your stakeholders through your vision on the way to your final product.

iMockups for iPad ($7)

If you have an iPad and prefer working on it, iMockups may be worth a look. Although iMockups is designed exclusively for the iPad, it has a presentation view for sharing your vision with a larger audience by connecting your iPad to a big screen. You can place hotlinks on various elements in the wireframe for actual navigation from one wireframe to the next.

If you’re a Balsamiq Mockups user or work with someone who is, it is convenient that iMockups files can be exported to Balsamiq BMML format. With that said though, collaboration and sharing is limited to emailing either editable project files or PNGs.

Flinto ($20.00/month—30 day free trial)

From PNGs to prototypes in 45 seconds is Flinto‘s pitch. That said, however, you still need to create those PNGs outside of Flinto unlike some other prototyping services. Some people might look at that as a negative, but I actually like having the ability to use my favorite graphic editor instead of being confined to using yet another built-in interface that I have to learn how to use before I can do anything. And I don’t think I’m really stepping out on a limb when I say if you’re in the business of creating apps, you probably already have your preferred graphic editor ready to go at a moment’s notice.

Where Flinto really excels is with its integrated Share & Install feature. It allows you to share your prototype link with others who can install the prototype on their homescreen-both iOS and Android-to use like a live working app. You can make it as realistic as you want it to be with recreated iOS and Android transitions, fixed headers and footers, and screens that scroll vertically.

Briefs ($199—free trial)

Built for visual thinkers, Briefs provides a way for you describe your mobile app to others. You’ve got an app design in your head, and Briefs is here to help you get that idea into the heads of others, which includes more that just sharing a demo. Briefs for Mac allows you to see your design and even test it live on actual devices while you design. It uses native animations and interactions so you can gain a really strong appreciation for how it will feel. Like other competing services, you can apply hotspots to flat files that link between “pages” but Briefs gives you the flexibility to use either your own assets created outside of the app or you can build pages right in the app using their library of interface elements.

Briefs separates itself from the rest when it comes time to share your work. Using what they call briefs, you package all of your mobile design timelines into one brief that can be viewed on the free Briefscase iOS app by clients or teammates on their own devices. But what’s especially nice is Briefs for Mac streamlines the exporting of your assets to your developer(s), where you can provide a detailed blueprint that represents your app design.

POP — Prototyping on Paper (free)

If you prefer the tried and true method of sketching wireframes on actual paper or the proverbial back of a napkin, of which I am personally a fan, then have we got an app for you. You literally sketch out your ideas, take pictures of them with your phone, and then upload them into Prototyping on Paper where you can then begin to stitch together your sketches using hotspots.

Yes it’s basic, but that’s the beauty of it. You don’t need any complicated software, just a pencil and piece of paper. After you’ve created your scenario, you can share and demo your rough prototype on an iPhone, iPad, or even in your web browser.

Marvel (free)

Running completely off DropBox, updating your prototype is as simple as updating your design files: Marvel automatically recognizes whenever you save changes to your assets and updates your prototype in the background without the nuisance of re-uploading your files. And unlike much of the competition, Marvel not only supports mobile (iOS and Android), but web and gaming devices as well.

Another standout feature is while you could convert your Photoshop files to images (PNG, JPG, GIF), you don’t need to unless you want to, because Marvel supports PSD files and also claims it will be supporting Sketch soon.

InVision (free–$22/month)

Built for agile iterations, the power of InVision is in its collaboration platform, making it a great choice for distributed teams. Obviously, like many other prototyping services and apps, you can create a clickable demo by linking up sketches, wireframes, or high fidelity designs. And such prototypes can be shared and viewed through a browser or a mobile device for an instant touchable demo. I don’t mean to gloss over these facts, but I just want to get to what sets it apart from other prototyping services.

Unless you’re a one-person team designing apps only for yourself, then you’ve probably experienced some of the difficulties collaborating with clients and teammates, keeping track of who said what about what, and organizing all of the comments and recommendations in a digestible format.

Any designer who has been buried in feedback and struggled to organize all of it will appreciate InVision’s design collaboration tool, LiveShare, which enables real time in-browser collaboration with no downloading required. LiveShare is much more than a screen sharing application as evidenced by visible name tag pointers for everyone in the meeting, voice chat, private conference line capabilities, text chat, sketch mode, and even whiteboard mode where everyone has a pencil with which to draw on a shared virtual whiteboard.

Of course, there is no one size fits all prototyping tool. Many factors determine what might be right for you or your team.

Massive Discounts on Stock Photos – 90% off!

This article walks web developers through the basics of cross-origin resource sharing in HTML5.

A midst the rising obesity epidemic there seems to be one city doing it right:

Boulder, Colorado. 

Boulder claims the lowest obesity rate in the nation: 12.4% compared to 27.1% nationally. 

You must be thinking, of course Boulder.

Its a city overpopulated with health nuts and triathletes, where the 300 plus days of sunshine and average 65 degree weather make it hard not to exercise.

Additionally, Boulder residents are generally highly educated with a keen awareness of the elements of a healthy lifestyle. 

But there’s something less obvious that sets Boulder apart: their prominent local food movement. 

Boulderites consume a high percentage of locally grown food in restaurants, schools, and homes. The government puts great emphasis on sustainable, organic, and locally grown agriculture. In fact, they are on track to having 20% of leased open-space lands in organic food production by 2020.

Is locally grown food feasible in a more urban industrialized city? 

New York City’s Gotham Greens is proving so with their innovative urban farm that utilizes the hydroponic technique. They are able to harvest 200 tons of organic, non-GMO produce a year without the use of soil. 

As the world becomes increasingly urbanized, urban farms like Gotham Greens may be the future of food production. In U.S. cities we may see a growth of local, healthy food and maybe Boulder, Colorado will no longer be such an anomaly.  

Mount Everest claimed sixteen new victims in its deadliest ever day last week. 

At least observers can take comfort in the fact that the climbers seized a once-in-a-lifetime opportunity…

Oh, wait. For the sixteen Sherpa guides who perished, it was just another day on the job. 

Native to Nepal, members of the Sherpa ethnic group have long worked as guides for Westerners looking to scale the world’s highest peak. Sherpa guides usually make around $5000 USD per climbing season, many times greater than Nepal’s $230 per capita annual income. 

However, there is a dark side to this relatively lucrative profession: danger. Between 2004 and 2014, Sherpa guides experienced a death rate of more than 4,000 per 100,000 full time workers. In contrast, the most dangerous American job (lumberjack) had a death rate of just under 128 per 100,000. Even guides who survive can suffer climbing-related disabilities. 

In response to this latest disaster, Sherpa guides are threatening to boycott the mountain for the rest of the climbing season.

Their motivation for this action includes both economic demands as well as respect for their dead colleagues.

The Nepalese government is scrambling to end the walkout, fearing millions in lost revenue, and has already made some concessions. However, this does not necessarily mean it will be business as usual on Everest. In the words of guide Migma Sherpa,

“How can we walk through the same path where [our friends] have died?” 

 

Match Education (www.matcheducation.org) operates an elementary, middle, and high school in Boston for inner city students, and run an urban education tutoring program in Illinois in partnership with the Chicago Public Schools and the University of Chicago.

We’re looking for seniors who either

- want to spend a year working closely with students in Boston while training to be a teacher or

- want to spend a year in Boston or Chicago working closely with students before heading off to grad school or another career

Our teacher training program was recently recognized by US Secretary of Education Arne Duncan for its innovation. Program participants receive training on how to become highly effective first-year teachers (there is a near 100% placement rate in high performing urban schools). In addition, teacher residents receive housing and a living stipend while completing their Master’s.

The teacher residency is only available in Boston, but we have tutoring opportunities (for folks just looking to do an urban education gap year) available in both Chicago and Boston.

Below are some links with additional information:

Match Education's "About Us" page

Our Graduate School of Education

Info on our 1-Year Tutoring Program

Info on previous program participants

You can contact the recruiting team directly at Recruiting@MatchEducation.org

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Google has started a new series of videos titled Google Design Minutes http://depot.ly/w9zpA

BMW Logo design by WhiteDesign http://depot.ly/w9wqC  http://ow.ly/i/5mcjT

CleverStack, a modular way to create your Angular & Node web apps http://depot.ly/w4ZY2

And the coding behind @Flickr’s new Hybrid Signed-Out Homepage http://depot.ly/w9sSf  via @Joe19G27

6 Blogs that Make Hiring Technical Help a Breeze http://depot.ly/w9rIc  via @lkr

4 Heartfelt Marketing Campaigns That Made A Difference http://depot.ly/w4ZP8  @justcreative

Flickr got a new website https://www.flickr.com

Coding a Toggle-Based FAQ Page with CSS3 and jQuery http://ow.ly/w4Zkq

Build a Dribbble Portfolio Grid With Flexboxgrid and Jribbble http://depot.ly/w4u3M  *Handy tutorial

Understanding Vector Shapes in Illustrator http://depot.ly/w1ggu

Gamification: How to Raise the Bar on Blog Production http://depot.ly/w1fgC

Big Data Isn’t Just For Big Businesses Anymore http://depot.ly/w1fSY  *Good read via @EntMagazine

Nice read by @jeffgoins: It’s Time to Get Intentional About Blogging http://depot.ly/w1eTN

Managing Multiple Drafts Easily In Jekyll http://depot.ly/vYLKS

A Guide to Optimising Photoshop Performance >> http://depot.ly/vS3Bw

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

Video Course: The Freelance Formula – only $37!