Adobe Fireworks is the Swiss Army knife for many developers and Web, UX, UI and graphic designers. The application is known for its versatility, excellent blend of vector and bitmap tools and powerful built-in wireframing and prototyping options. Also, according to the SoDA 2010 Digital Marketing Outlook survey, Fireworks has become an important tool for many digital agencies: it now has the same standing as other core Adobe products, such as Flash, Flex and Dreamweaver (to the question “Which technical skill sets, if any, will you look to hire or contract in 2010?”, approx. 12% of the survey respondents replied “Fireworks”, and to the question “Which tools/products will you or your organization use in 2010?”, more than 44% of the survey respondents replied that they will be using Fireworks).A lot of official Adobe pages cover the latest version of Fireworks, CS5, in detail: for example, the new Fireworks CS5 product page; the Fireworks CS5/CS4/CS3 comparison chart; and the pages that highlight Fireworks CS5’s Web workflows and design workflows.But none of these official Adobe pages actually answer the question that so many design professionals are asking in the first place: is Fireworks CS5 really better? Will it save you time and effort? Are the new features worth the upgrade price? This article gives detailed answers to these questions. We’ll present a neat list of Fireworks CS5’s new features and improved workflows, along with examples of how they will make your work much more efficient. [By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]1. Better PerformancePerformance ImprovementsOne of the most notable (and welcome) improvements in the latest version of Fireworks is performance. Fireworks CS5 is faster and more lightweight, it uses less RAM and it is much more stable than any previous version of Fireworks.For example, look at the following performance graph. Testing was done on a five-year-old Lenovo ThinkPad, with a 1.5 GHz Intel Pentium-M CPU and 1.5 GB of DDR memory. Performance graph of start-up times.Notice that start-up times are much better for the CS5 version, and Fireworks CS5 may need less than 4 seconds for a “warm” start on a five-year-old machine; some Mac users already report similar performance improvements.More performance stats:“Cold” launch times improved by 3 to 9% (average)“Warm” launch times improved by 30 to 32% (average)Memory (RAM) usage reduced by 2 to 16% (average) Graph of general performance improvements.So, while major new versions of Adobe applications are usually more resource-hungry than their predecessors, seeing that this is actually the opposite case with Fireworks is a pleasant surprise.Better Handling of FilesFireworks CS5 opens and saves PNG files faster, better and more reliably.It also allows you to open multi-page Fireworks PNG files much more easily, because the open dialog shows a preview of all of the pages inside. Multi-page preview in the “Open” and “Import” dialog boxes.(NOTE: Files created in Fireworks CS4 (and earlier versions) will not have the preview option available by default; a Fireworks PNG file must be saved at least once in Fireworks CS5 so that the multi-page preview becomes available for this file.)Integrated Recovery OptionsFireworks CS5 is much stabler than its predecessor. Still, in case the worst happens and Fireworks CS5 suddenly crashes on your Mac, it automatically places a recovered copy of the file in a Recovered Files folder on your desktop. Windows users are protected, too: they can use the AutoBackup extension, which works perfectly with both Fireworks CS4 and CS5. The extension works on Windows and Mac and automatically saves copies of all opened PNG files at a user-specified interval inside a folder named FWAIRBackup (which is located on the same path as the original file). Fireworks CS5 Windows and Mac users are protected from data loss.2. PI Panel ImprovementsThe powerful property inspector (or PI) panel has always been the core of Fireworks and one of its best features. From this panel, you can instantly change almost any available property for almost any selected object on the canvas: vector object, bitmap object, text object, a group of objects, etc. The new PI panel in Fireworks CS5 (overview).In Fireworks CS5, the PI panel has been largely improved. It now responds much faster, and compared to CS4, the “refresh” times are reduced, especially on Windows. It also has many new features. Let’s look at the four most important ones:New “Constrain Proportions” Option for Resizing ObjectsNo need to use the Numeric Transform tool anymore when you want to resize an object and keep its proportions locked. The new “Constrain Proportions” option on the PI panel simplifies this and saves you time (and a few extra clicks). The PI panel option to lock the proportions of an object.New Dithering Option for GradientsGradient Dithering is a new feature introduced in Fireworks CS5. When working with gradients, switching the Gradient Dithering option “on” or “off” is now just a click away. PI panel option for switching Gradient Dithering on and off.New Stroke Alignment OptionsNeed to change Stroke Alignment properties? You don’t need to open the Stroke options anymore — just use the new Stroke Alignment icons, right on the PI panel. The Stroke Alignment options on the PI panel.New Compound Shape ToolsFireworks CS5 has a powerful new feature: Compound Shapes (more on this feature later). Creating and editing them is done easily from the PI panel, too. Editing Compound Shapes on the PI panel.3. New Text Engine FeaturesFireworks CS5 has a much better text engine, with many new features and tiny enhancements that will help in your routine work with text. Here’s a quick list of the enhancements:Kerning, tracking and leading between characters in a text block can now be easily controlled using only the keyboard (simply put the cursor in between characters and use the keyboard arrow keys).The slider value for kerning and tracking has been increased to 200.If you open a PNG file created in Fireworks v. CS3 or lower, the kerning and tracking values will be automatically mapped and the look of the text will be preserved.A new option (unique to Adobe Fireworks) allows you to multi-select characters and words in a text box and then style them together at once. This is complemented by another new option that allows you to auto-select similarly styled characters, words or paragraphs inside a text block, and then modify their styles at once.An editable and auto-completing font list box feature has been added (Windows version only).Now, you don’t need to restart Fireworks after installing a new font (Windows version only).Undoing (Ctrl/Cmd + Z) and redoing (Ctrl/Cmd + Y) at the character level is now possible while you’re in text-editing mode.Double-clicking selects the word, and triple-clicking selects the entire paragraph.In the Layers panel, text object layers are now marked with a tiny “T” icon, for easier recognition.A Text Overflow indicator appears when extra characters (that don’t fit the text-in-path or text-on-path) exist.Copying and pasting text from any version of Microsoft Office into Fireworks is much improved.The number of characters that can be copied and pasted into a Fireworks text block at once has been increased from 2000 to 8000.(We may highlight and explain text engine improvements in Fireworks CS5 in greater detail in a future article.)4. Improved Adobe CS5 IntegrationIntegration of Fireworks CS5 with other Adobe CS5 applications is much improved.Fireworks CS5 now supports ASE swatches, the same color file format supported by Illustrator, Photoshop, InDesign and Kuler. The .ASE support will allow designers to easily exchange color schemes between Fireworks and other Adobe products.Fireworks CS5 has very good integration with Adobe Illustrator CS5. Fireworks CS5 can import graphic assets from Illustrator CS5 almost perfectly, and copying and pasting directly from Illustrator CS5 into Fireworks CS5 is possible with a high level of fidelity and editability, too (there exist only a few exceptions to this).Fireworks CS5 can export in the new FXG 2.0 file format, and FXG 2.0 files can be imported into Illustrator CS5, Flash Catalyst CS5 and other Adobe programs with almost no loss in editability.Fireworks CS5 is integrated with Adobe Device Central CS5 (read the article about Adobe Fireworks CS5 and Adobe Device Central titled “Mobile workflows using Fireworks CS5 and Device Central CS5“).The integration with Adobe Photoshop CS5 is excellent, too. Fireworks CS5 can import graphic assets from Photoshop CS5 very well. Fireworks CS5 has much better support for Photoshop PSD files. Adjustment Layers in a PSD file now retain their appearance when opened or imported in Fireworks. Gradient round-tripping is now possible between Fireworks and Photoshop.5. Miscellaneous New Tools And FeaturesCompound ShapesFireworks CS5 has powerful new vector tools in its toolset, called Compound Shapes.Compound Shapes are special vector groups that give you greater vector power. You can create new compound shapes out of existing vector objects and you can also draw in several compound shape modes.A Compound Shape group allows the editing and styling of several vector objects as one, while preserving the original vector objects inside the group. The individual objects can be easily re-edited or ungrouped at any stage.To use the new Compound Shapes, simply select several vector objects together, and then use one of the available Compound Shape operations (found on the PI panel): Add/Union, Subtract/Punch, Intersect, Crop.After you have created a Compound Shape group, editing individual objects within the group is easy: simply use the Subselection tool (white arrow) to select and modify any individual object. To edit the Compound Shape group as one object, switch to the Pointer tool (black arrow).Here’s a simple example: Example of Compound Shapes.The introduction of Compound Shapes in Fireworks CS5 gives designers even more flexibility, because the standard vector combine workflows (Modify → Combine Paths → Join/Split/Union/Intersect/Punch/Crop) can be complemented by the new non-destructive combine vector workflows.Compound Shapes are also fun for all kinds of creative artwork: “Monsters,” a creative use of Compound Shapes (illustration by molif.com).Dithering Option for GradientsFireworks CS5 now has a Dithering option for gradients, which almost completely reduces any “banding” in radial or linear gradients. The new Gradient Dithering option reduces “banding” in gradients.NOTE: The Gradient Dithering option is available for Radial and Linear gradients only. For now, other types of gradients in Fireworks are not supported.Reverse Option for GradientsFireworks CS5 allows you to easily reverse the direction of any kind of gradient, which can save time. Reverse Gradient option.Snap-to-PixelSnap-to-Pixel is a new feature in Fireworks CS5 that allows you to fix instantly almost any blurriness in a vector object (or a group of objects), after some complex transformations have been applied to it.To apply this command, use Modify → Snap To Pixel, or the Cmd/Ctrl + K shortcut.This is one of the best and most useful new features in Fireworks CS5.TemplatesFireworks CS5 introduces Templates. Now you can easily create and share your own PNG templates inside a small or large design team.To use this new feature, simply select File → New from Template to open an existing template, or File → Save as Template. Templates options in the File menu.Fireworks CS5 comes with several pre-built templates (neatly organized in a few groups: Grid Systems, Mobile, Web, Wireframes, etc.). Users can extend these easily by creating and saving their own templates.Better CSS Export OptionsFireworks CS5 has much better CSS and HTML exporting options. Here are some highlights:A new option to export multiple pages as CSS, HTML and images at once; a great feature for quickly exporting your designs as dynamic, clickable prototypes.It is now possible to tag text objects by tag name to output the text with a particular HTML tag.A Text Area symbol has been added for improved HTML-form prototyping.There is a List Item symbol to allow for the creation of unordered lists (both normal text lists and lists with links).Font sizes are now in percentages to allow for easy and flexible text resizing in all browsers.Divs with set heights now have min-height equivalents to allow for text resizing and any amount of content.Many other small and big improvements have been added to the CSS Export script.Global Preference for GridsIn Fireworks CS5, preferences for grids are now global and can be overridden for individual documents. Global preferences for grids.Redesigned Align PanelThe Align panel is improved and more powerful. It now remembers the most recent settings used and is more usable. Align panel options.New “Copy to Clipboard” Option for ColorsYou can use standard option for copying color values of any selected color, or use the new option for one-click copy of the color value. Copying color #hex values is now easier.New “Don’t show again” Option for Resample DialogWhen you copy and paste objects between files that have different resolution (dpi setting), Fireworks will ask you if you want to resample the pasted vector or bitmap object. While it is certainly useful to have this option, experience have proved that leaving the original dpi setting of the object to be pasted is often the best choice and leads to better results.So now in Fireworks CS5, you can select the “Don’t Resample” option and check the “Don’t show again” checkbox. Setting will be remembered and in the long run, this new option may save you time. Better paste options for documents with different dpi settings.6. Early (P)reviewsFireworks CS5 was released just a few days ago, but the (p)reviews thus far have been largely positive. Let’s read some of them:Fireworks CS5 is a very strong release.… For Fireworks CS5, more than with any other release in our history, we listened to our users. They told us that we needed to make sure Fireworks had rock-solid stability and reliability, and that we needed to refine the existing features before thinking about new ones. That’s exactly what we did, and the results are impressive.— Bruce Bowman, Fireworks Product Manager at AdobeI’ve had the unique opportunity to spend some time working with the new Adobe Fireworks CS5, and it has been a pleasure. The stability improvements are immediately noticeable, and although this has been described as a “stability release,” there are some very useful new features that should not be overlooked.… Overall, Adobe Fireworks CS5 is a fantastic release. Stability, new features and a smoother workflow with other Adobe products keep it as the front-runner when designing for pixels on the screen.— David Hogue, Director of Information Design and Usability at Fluid, Inc.Aside from the major performance, stability, install and memory enhancements… there are tons of tweaks under the hood of Fireworks CS5!— Darrel Heath, freelance web designer and developerAdobe has published a really extensive piece surrounding the details behind Fireworks CS5. I’ve talked about it with a few designers, both Fireworks and Photoshop users, and had a gut feeling that it would be mostly a bug-fix release. While every Adobe product under the sun needs at least one full version release consisting of mostly bug fixes, I gladly welcome Fireworks CS5. The fixes mentioned in the piece have me really excited to put more time into working with the application after it’s released.— Jonathan Christopher, front-end developer at Overit MediaFireworks CS5: improved performance, more precise control over the pixel placement of design elements and a streamlined, accelerated workflow.— Webdesigner DepotAdobe Fireworks CS5 is better than ever. The engineers searched high and low to find ways to make Fireworks faster, more stable and easier to use. I know I’m impressed and I hope… you will be too!— Jim Babbage, author at Lynda.com (Part 1, Part 2)Enjoy the increased stability and polish in Fireworks CS5. If you haven’t upgraded in a while and passed over CS4 as some people I know have done, don’t pass on CS5. It will make your current workflows much smoother and does add a few welcome new features. I highly recommend it!— Stéphane Bergeron, freelance Web designer at Webfocus Design7. ConclusionSo, is Fireworks CS5 really better? For me, it is. Fireworks CS5 may not be absolutely perfect or contain any “wow” features. But at the same time, it is a very welcome release — fast, stable, polished, with lots of tiny refinements and additions that will make your design work more efficient.I wasn’t able to list all of the new features and improvements in Fireworks CS5, but I hope your curiosity now is piqued enough that you will want to try Fireworks CS5 soon. If so, grab the 30-day free trial or order Fireworks CS5 from Adobe (either separately or as part of Web Premium CS5, Design Premium CS5 or Master Collection CS5).Finally, check out other recent articles about Adobe Fireworks published on the Smashing Network:The Ultimate Round-Up of Fireworks Tutorials and ResourcesAdobe Fireworks Tutorials and Downloads: Best ofAn Explosion of Adobe Fireworks ResourcesWe hope to see more smashing Fireworks-related articles in the next few months, so if you have questions, feel free to share them in the comments!(al)© Michel Bozgounov for Smashing Magazine, 2010. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:
-
I posted to smashingmagazine.com
Adobe Fireworks: Is It Worth Switching to CS5?
http://feedproxy.google.com/~r/SmashingMagazine/~3/6ECIVQlcPYc/
- Tags:
- design
May 22 2010, 1:48am | Comments »
-
I posted to designmeltdown.com
Login forms
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/CimWE8v7JUM/
Login forms are yet another minor detail in the overall build out of a site it is no wonder they often end up not getting as much attention as they might warrant. They are such a critical usability point that it only makes sense to carefully consider their structure. This set of samples demonstrates various approach to this often overlooked element. http://www.webanddesigners.com/25-login-page-design-for-inspiration
- Tags:
- Login Forms
May 21 2010, 5:00am | Comments »
-
I posted to smashingmagazine.com
Web Design Trends 2010: Real-Life Metaphors and CSS3 Adaptation
http://feedproxy.google.com/~r/SmashingMagazine/~3/KLue-ruxCr8/
May 20 2010, 10:03am | Comments »
-
I posted to designmeltdown.com
One page goodness
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/HyzJzprYoF4/
Another fine collection of the ever popular one page site. http://www.themeflash.com/68-fresh-and-great-examples-of-single-page-website-design-inspiration/
- Tags:
- One Page Site
May 19 2010, 5:00am | Comments »
-
I posted to smashingmagazine.com
The Beauty Of Typography: Writing Systems And Calligraphy Of The World
http://feedproxy.google.com/~r/SmashingMagazine/~3/cQ1ho0YMEA8/
The beauty of typography has no borders. While most of us work with the familiar Latin alphabet, international projects usually require quite extensive knowledge about less familiar writing systems from around the world. The aesthetics and structure of such designs can be strongly related to the shape and legibility of the letterforms, so learning about international writing systems will certainly help you create more attractive and engaging Web designs.Pick any language you like: Arabic, Chinese, Japanese, maybe Nepali? Each is based on a different writing system, which makes it interesting to figure out how they work. Today, we’ll cover five categories of writing systems. This may sound tedious and academic, but it’s not. If you take the time to understand them, you’ll find that they all give us something special. We’ve tried to present at least one special feature of each language from which you can draw inspiration and apply to your own typography work. We’ll cover: East Asian writing systems, Arabic and Indic scripts (Brahmic). If you are interested, we will cover Cyrillic, Hebrew and other writing systems in the next post.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]East Asian Writing SystemsObviously, the Chinese uses Chinese characters (where they are known as hanzi). But Chinese characters are also used in various forms in Japanese (where they are known as kanji) and Korean hanja). In this section, we will look at four East Asian writing systems: Chinese, Japanese, Korean and Vietnamese.Chinese CharactersChinese characters are symbols that do not comprise an alphabet. This writing system, in which each character generally represents either a complete one-syllable word or a single-syllable part of a word, is called logo-syllabic. This also means that each character has its own pronunciation, and there is no way to guess it. Add to this the fact that being literate in Chinese requires memorizing about 4,000 characters and you’ve got quite a language to learn. Fortunately for us, we don’t need to learn Chinese in order to appreciate the beauty of its writing.Because many commonly used Chinese characters have 10 to 30 strokes, certain stroke orders have been recommended to ensure speed, accuracy and legibility in composition. So, when learning a character, one has to learn the order in which it is written, and the sequence has general rules, such as: top to bottom, left to right, horizontal before vertical, middle before sides, left-falling before right-falling, outside before inside, inside before enclosing strokes.The Eight Principles of YongThe strokes in Chinese characters fall into eight main categories: horizontal (一), vertical (丨), left-falling (丿), right-falling (丶), rising, dot (、), hook (亅) and turning (乛, 乚, 乙, etc.). The “Eight Principles of Yong” outlines how to write these strokes, which are common in Chinese characters and can all be found in the character for “yǒng” (永, which translates as “forever” or “permanence”). It was believed that practicing these principles frequently as a budding calligrapher would ensure beauty in one’s writing.Four Treasures of the Study“Four treasures of the study” is an expression that refers to the brush, ink, paper and ink stone used in Chinese and other East Asian calligraphic traditions. The head of the brush can be made of the hair (or feather) of a variety of animals, including wolf, rabbit, deer, chicken, duck, goat, pig and tiger. The Chinese and Japanese also have a tradition of making a brush from the hair of a newborn, as a once-in-a-lifetime souvenir for the child.Seal and Seal PasteThe artist usually completes their work of calligraphy by adding their seal at the very end, in red ink. The seal serves as a signature and is usually done in an old style.Horizontal and Vertical WritingMany East Asian scripts (such as Chinese, Japanese and Korean) can be written horizontally or vertically, because they consist mainly of disconnected syllabic units, each conforming to an imaginary square frame. Traditionally, Chinese is written in vertical columns from top to bottom; the first column on the right side of the page, and the text starting on the left.In modern times, using a Western layout of horizontal rows running from left to right and being read from top to bottom has become more popular. Signs are particularly challenging for written Chinese, because they can be written either left to right or right to left (the latter being more of a traditional layout, with each “column” being one character high), as well as top to bottom.Different StylesIn Chinese calligraphy, Chinese characters can be written in five major styles. These styles are intrinsic to the history of Chinese script.Seal script is the oldest style and continues to be widely practiced, although most people today cannot read it. It is considered an ancient script, generally not used outside of calligraphy or carved seals, hence the name.In clerical script, characters are generally “flat” in appearance. They are wider than the seal script and the modern standard script, both of which tend to be taller than wider. Some versions of clerical are square, and others are wider. Compared to seal script, forms are strikingly rectilinear; but some curvature and influence from seal script remains.The semi-cursive script approximates normal handwriting, in which strokes and (more rarely) characters are allowed to run into one another. In writing in the semi-cursive script, the brush leaves the paper less often than with the regular script. Characters appear less angular and rounder. The characters are also bolder.The cursive script is a fully cursive script, with drastic simplifications and ligatures, requiring specialized knowledge to be read. Entire characters may be written without lifting the brush from the paper at all, and characters frequently flow into one another. Strokes are modified or eliminated completely to facilitate smooth writing and create a beautiful abstract appearance. Characters are highly rounded and soft in appearance, with a noticeable lack of angular lines.The regular script is one of the last major calligraphic styles to develop from a neatly written early-period semi-cursive form of clerical script. As the name suggests, this script is “regular,” with each stroke written slowly and carefully, the brush being lifted from the paper and all strokes distinct from each other.A rather different writing system is Japanese, which is syllabic, meaning that each symbol represents (or approximates) a syllable, combining to form words. No full-fledged script for written Japanese existed until the development of Man’yōgana (万葉仮名), an ancient writing system that employs Chinese characters to represent the Japanese language. The Japanese appropriated Kanji (derived from their Chinese readings) for their phonetic value rather than semantic value.The modern kana systems, Hiragana and Katakana, are simplifications and systemizations of Man’yōgana. Thus, the modern Japanese writing system uses three main scripts: Kanji, which is used for nouns and stems of adjectives and verbs; Hiragana, which is used for native Japanese words and written in the highly cursive flowing sōsho style; and Katakana, which is used for foreign borrowings and was developed by Buddhist monks as a shorthand. In Japan, cursive script has traditionally been considered suitable for women and was called women’s script (女手 or onnade), while clerical style has been considered suitable for men and was called men’s script (男手 or otokode).The three scripts are often mixed single sentences.As we can see, the modern kana systems are simplifications of Man’yōgana. It is interesting to see how they have been simplified. Development of hiragana from man’yōgana. Katakana, with man’yōgana equivalents. (The segments of man’yōgana adapted into katakana are highlighted.)Korean SquaresKorean is itself a very different writing system. It uses Hangul, a “featural” writing system. The shapes of the letters are not arbitrary but encode phonological features of the phonemes they represent.Hangul has existed since the middle of the 15th century (approximately 1440). But tradition prevailed, and scholars continued to use Classical Chinese as the literary language, and it was not until 1945 that Hangul became popular in Korea.Jamo (자모; 字母), or natsori (낱소리), are the units that make up the Hangul alphabet. “Ja” means letter or character, and “mo” means mother, suggesting that the jamo are the building blocks of the script. When writing out words, signs are grouped by syllables into squares. The layout of signs inside the square depends greatly on the syllable structure as well as which vowels are used.initialmedialinitialmedialinitialmed. 2med. 1initialmedialfinalinitialmedialfinalinitialmed. 2med.finalinitialmedialfinal 1final 2initialmedialfinal 1final 2initialmed. 2med.We won’t get into the detailed rules, but here is an example for inspiration:Vietnamese RotationThe Vietnamese writing system in use today (called Chữ Quốc Ngữ) is adapted from the Latin alphabet, with some digraphs (i.e. pairs of characters used to write individual phonemes) and nine additional diacritics (accent marks) for tones and certain letters. Over the course of several centuries—from 1527, when Portuguese Christian missionaries began using the Latin alphabet to transcribe the Vietnamese language, to the early 20th century, when the French colonial administration made the Latin-based alphabet official—the Chinese character-based writing systems for Vietnamese gradually became limited to a small number of scholars and specialists.However, the Chinese philosophy still exerts a strong influence. The stylized work above is by painter Tran Dat, who introduced a harmony between the shapes of Chinese and Vietnamese characters. If you rotate the first image 90 degrees counter-clockwise, you can make out the Vietnamese words. It is meant to be displayed vertically so that it appears as ancient Chinese text at first.ArabicHere we’ll explore the beauty of Arabic, which has many styles and techniques. The Arabic alphabet was developed from the Nabataean script (which was itself derived from the Aramaic script) and contains a total of 28 letter. These 28 letters come from 18 basics shapes, to which one, two or three dots are added, above or below the letter. Arabic uses a writing system that we haven’t seen yet: an abjad, which is basically an alphabet that doesn’t have any vowels—the reader must supply them.Contextual ShapingThe shape of these letters changes depending on their position in the word (isolated, initial, medial or final). Here, for example, is the letter kaaf:DiacriticsThe Arabic script is an impure abjad, though. Short consonants and long vowels are represented by letters, but short vowels and long consonants are not generally indicated in writing. The script includes numerous diacritics, which serve to point out consonants in modern Arabic. These are nice and worth taking a look at.Alif as a Unit of ProportionGeometric principles and rules of proportion play an essential role in Arabic calligraphy. They govern the first letter of the alphabet, the alif, which is basically a straight vertical stroke.The height of the alif varies from 3 to 12 dots, depending on the calligrapher and style of script.The width of the alif (the dot) is a square impression formed by pressing the tip of the reed pen to paper. Its appearance depends on how the pen was cut and the pressure exerted by the fingers.The imaginary circle, which uses alif as its diameter, is a circle within which all Arabic letters could fit.Different StylesArabic script has many different styles—over 100 in fact. But there are six primary styles, which can generally be distinguished as being either geometric (basically Kufic and its variations) and cursive (Naskh, Ruq’ah, Thuluth, etc.).Kufi (or Kufic) is noted for its proportional measurements, angularity and squareness.Tuluth means “one third,” referring to the proportion of the pen relative to an earlier style called Tumaar. It is notable for its cursive letters and use as an ornamental script.Nasakh, meaning “copy,” is one of the earliest scripts with a comprehensive system of proportion. It is notable for its clarity for reading and writing and was used to copy the Qur’an.Ta’liq means “hanging,” in reference to the shape of the letters. It is a cursive script developed by the Persians in the early part of the 9th century AD. It is also called Farsi (or Persian).Diwani was developed by the Ottomans from the Ta’liq style. This style became a favorite script in the Ottoman chancellery, and its name is derived from the word “Diwan,” which means “royal court.” Diwani is distinguished by the complexity of lines within letters and the close juxtaposition of letters within words.Riq’a is a style that evolved from Nasakh and Thuluth. It is notable for the simplicity and small movements that are required to write in it, thanks to its short horizontal stems, which is why it is the most common script for everyday use. It is considered a step up from the Nasakh script, which children are taught first. In later grades, students are introduced to Riq’a.Teardrop-Shaped CompositionHere is an animation showing the composition of the Al Jazeera logo:Bi-DirectionnalityWhen left-to-right text is mixed with right-to-left in the same paragraph, each text should be written in its own direction, known as “bi-directional text.”Material UsedIn case you want to try, you’ll want to know what material to use. There is a lot of typical tools, such as brush pens, scissors, a knife to cut the pens and an ink pot. But the traditional instrument of the Arabic calligrapher is the qalam, a pen made of dried reed or bamboo. “The traditional way to hold the pen,” wrote Safadi in 1987, “is with middle finger, forefinger and thumb well spaced out along the [pen's] shaft. Only the lightest possible pressure is applied.”As for the ink, you have many options: black and brown (often used because their intensity and consistency can be varied greatly) as well as yellow, red, blue, white, silver and gold. The important thing is that the greater strokes of the composition be very dynamic in their effect.A Few TechniquesThe development of Arabic calligraphy led to several decorative styles that were intended to accommodate special needs or tastes and to please or impress others. Here are a few outstanding techniques and scripts.Gulzar is defined by Safadi (1979) in Islamic calligraphy as the technique of filling the area within the outlines of relatively large letters with various ornamental devices, including floral designs, geometric patterns, hunting scenes, portraits, small script and other motifs. Gulzar is often used in composite calligraphy, where it is also surrounded by decorative units and calligraphic panels.Maraya or muthanna is the technique of mirror writing, where the composition on the left reflects the composition on the right.Tughra is a unique calligraphic device that is used as a royal seal. The nishanghi or tughrakesh is the only scribe trained to write tughra. The emblems became quite ornate and were particularly favored by Ottoman officialdom.In zoomorphic calligraphy, the words are manipulated into the shape of a human figure, bird, animal or object.SiniSini is a Chinese Islamic calligraphic form for the Arabic script. It can refer to any type of Chinese Islamic calligraphy but is commonly used to refer to one with thick tapered effects, much like Chinese calligraphy. It is used extensively in eastern China, one of whose famous Sini calligraphers is Hajji Noor Deen.Perso-Arabic Script: Nasta’liq ScriptThe predominant style in Persian calligraphy has traditionally been the Nasta’liq script. Although it is sometimes used to write Arabic-language text (where it is known as Ta’li, with Farsi used mainly for titles and headings), it has always been more popular in Persian, Turkic, and South Asian spheres. It is extensively practiced as a form of art in Iran, Pakistan and Afghanistan. Nasta’liq means “suspended,” which is a good way to describe the way each letter in a word is suspended from the previous one (i.e. lower, rather than on the same level).The Perso-Arabic script is exclusively cursive. That is, the majority of letters in a word connect to each other. This feature is also included on computers. Unconnected letters are not widely accepted. In Perso-Arabic, as in Arabic, words are written from right to left, while numbers are written from left to right. To represent non-Arabic sounds, new letters were created by adding dots, lines and other shapes to existing letters.Indic Scripts (Brahmic)The Indic or Brahmic scripts are the most extensive family of writing systems that we haven’t looked at yet: abugidas. An abugidas is a segmental writing system which is based on consonants and in which vowel notation is obligatory but secondary. This contrasts with an alphabet proper (in which vowels have a status equal to that of consonants) and with an abjad (in which vowel marking is absent or optional).Indic scripts are used throughout South Asia, Southeast Asia and parts of Central and East Asia (e.g. Hindi, Sanskrit, Konkani, Marathi, Nepali, Sindhi and Sherpa). They are so widespread that they vary a lot, but Devanagari is the most important one.Devanagari Ligatures and MatraHindi and Nepali are both written in the Devanāgarī (देवनागरी) alphabet. Devanagari is a compound word with two roots: deva, meaning “deity,” and nagari, meaning “city.” Together, they imply a script that is both religious and urban or sophisticated.To represent sounds that are foreign to Indic phonology, additional letters have been coined by choosing an existing Devanagari letter that represents a similar sound and adding a dot (called a nukta) beneath it. It is written from left to right, lacks distinct letter cases and is recognizable by a distinctive horizontal line running along the tops of the letters and linking them together.In addition, a few other diacritics are used at the end of words, such as the dots illustrated below and the diagonal line, called virama, drawn under the last letter of a word if it is a consonant. One interesting aspect of Brahmic and in particular of Devanagari here is the horizontal line used for successive consonants that lack a vowel between them. They may physically join together as a “conjunct,” or ligature, a process called samyoga (meaning “yoked together” in Sanskrit). Sometimes, the individual letters can still be discerned, while at other times the conjunction creates new shapes.Here is a close-up of a nice ligature, the ddhrya ligature:A letter in Devanagari has the default vowel of /a/. To indicate the same consonant followed by another vowel, additional strokes are added to the consonant letter. These strokes are called matras, or dependant forms of the vowel.Thai Stacking DiactriticsThe writing system of Thai is based on Pali, Sanskrit and Indian concepts, and many Mon and Khmer words have entered the language.To represent a vowel other than the inherent one, extra strokes or marks are added around the basic letter. Thai has its own system of diacritics derived from Indian numerals, which denote different tones. Interestingly, like many non-Roman scripts, it has stacking diacritics.Tibetan MantrasThe form of Tibetan letters is based on an Indic alphabet of the mid-7th century. The orthography has not altered since the most important orthographic standardization, which took place during the early 9th century. The spoken language continues to change. As a result, in all modern Tibetan dialects, there is a great divergence of reading from the spelling.The Tibetan script has 30 consonants, otherwise known as radicals. Syllables are separated by a tseg ་, and because many Tibetan words are monosyllabic, this mark often functions almost as a space.As in other parts of East Asia, nobles, high lamas and persons of high rank were expected to have strong abilities in calligraphy. But the Tibetan script was done using a reed pen instead of a brush. As for a mantra, it is a sound, syllable, word or group of words that is considered capable of “creating transformation.”The use of mantras is widespread throughout spiritual movements that are based on or off-shoots of practices from earlier Eastern traditions and religions. The mantras used in Tibetan Buddhist practice are in Sanskrit, to preserve the original mantras. Visualizations and other practices are usually done in the Tibetan language. Vajrasattva mantra in Tibetan.SummarySo what should you take away from this article? We have seen that Arabic and Chinese calligraphy have many different scripts variations. From geometric to cursive to regular script, there is no such thing as one calligraphic style for a language.Sometimes there is even no such thing as one script per language. This is why Japanese is interesting: it is written in three different scripts that mix nicely. The construction of the Korean language is also fascinating: characters are grouped into squares that create syllables. Writing systems are ultimately diverse in construction, which makes them so interesting.Many languages also have various components that can be used in our typography. Arabic and Thai, among many others, have a large system of diacritics. Arabic has a decorative aspect. Ligatures are directly related to our Latin alphabet but can be quite elaborated in such scripts as Devanagari.You could do a lot to spice up your own designs. Did you catch the red Chinese seal, which contrasts with the usual black ink. Have you thought of rotating your fonts to give them a whole new look, as Vietnamese calligraphers do? What about the Arabic teardrop-shaped writing? If you missed all of this, you have no choice but to scroll back up and take a closer look.Bonus: How to Integrate These Languages on a Website?Working with foreign languages in international design projects can get a bit tricky. Obviously, studying the specifics of the language that you are supposed to work with will help you better anticipate user’s needs and avoid embarassing problems or misunderstandings. Tilt.its.psu.edu presents general guidelines for integration of various international languages in websites. Below you’ll find references to specific pages that cover details for writing systems presented in this article.JapaneseArabicChineseDevanagariThai TibetanVietnamese(al)© Jessica Bordeau for Smashing Magazine, 2010. | Permalink | 9 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: arabic, art, calligraphy, chinese, hindi, iranien, japanese, nepali, tibetan, typography
May 18 2010, 11:25am | Comments »
-
I posted to designmeltdown.com
Clean and Light!
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/zbEKg-kEf8c/
This is a style I really love; super clean and easy to use. I often refer to this as an ultra clean style, but it is often easy to dub these as minimal sites. http://sixrevisions.com/design-showcase-inspiration/60-beautiful-clean-and-light-web-designs-for-inspiration/
May 18 2010, 5:00am | Comments »
-
I posted to smashingmagazine.com
HTML5 And Flash: Why It’s Not A War, And Why Flash Won’t Die
http://feedproxy.google.com/~r/SmashingMagazine/~3/tgKeq-6EyMA/
With all of the buzz going on in our Web community about HTML5 and Flash, I’ve decided to dive into the fray and offer my thoughts as a 10-year veteran of both Web design and Flash development. Let me preface by saying that this article is opinion-based, and that information is certainly out there that I am not aware of, and that none of us truly knows what the future holds.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]Use Of Flash Till NowWhen Flash broke on the scene, it was a fairly revolutionary tool… and much simpler to use than it is today. I first started using it in 1999, when it was being produced by Macromedia. The current version then was 4. The simple benefit was that it allowed the average computer user to design graphics and create simple user interactions with almost no skill: quite a feat in the messy and over-complicated world of Netscape and IE4.People didn’t take long to start using Flash as an engine to create full and complete websites, especially as the versions continued their march upward and ActionScript gained footing. Quite simply, it sped up development time and wow’ed all users with its animations—a far cry from the static-text Geocities websites around them.But Flash started to be overused soon after. One can compare it to HTML tables, a framework that revolutionized the industry for a time, became overused and then receded to its proper role (which in this case was to structure data points rather than website columns).Why They Don’t Have to FightI’ve read a lot of blog posts lately about HTML5 taking on Flash like a prize fighter and kicking it off the scene in some epic battle of Web standards and pragmatism. But this is a false scenario: HTML5 and Flash are not meant to be fighting in the same ring, or to be fighting at all. Each has its proper place on the Web and in the graphic community.Flash’s PlaceInterestingly enough, Flash’s place is not entirely on the Web at all, and certainly not to take over full website designs (or those dreaded Flash intros either). While bits of Flash will continue to be used in Web design for advertising and gaming, it will truly shine in two primary areas.The first area is the corporate setting. I work part-time as a Web developer on the multimedia team of a major international telecommunications company. The majority of the team consists of Flash developers, and there is a huge demand for more of them. So, while Flash may be shrinking in the Web industry, it is booming at the corporate level through rich media, training and learning solutions, Intranet applications and the like.While Flash may be simplistic and annoying for a website, its capabilities for database interaction, PHP integration, XML sourcing, external ActionScript 3, extensible plug-ins and import and export functionality make it an extremely robust tool that far outweighs the competition for certain uses. Flash has a profitable future in corporate settings.The second area is still budding and turbulent: mobile platforms. Web content aside, if Flash could be used to produce applications and rich interaction on a variety of mobile platforms, it would empower designers and developers everywhere to contribute to a booming mobile industry (and give us the opportunity to make a sweet profit while we’re at it).Why would Flash do so well in the mobile space compared to Web-based tools and frameworks? First of all, because Flash is a powerful development tool, beyond its graphic and animation capabilities. ActionScript 3 has brought serious improvements to the overall structure and functionality of applications, allowing developers to create powerful apps.Secondly, Flash being used across multiple platforms brings a much higher probability of consistency and compatibility. Even if comprehensive Web standards were supported across all mobile devices, there is no guarantee that we wouldn’t run into the same cross-browser headaches on the variety of mobile browsers. If Flash were supported on all mobile devices, I could be reasonably certain that my Flash module would run smoothly on each one.It’s like my parents fighting. I love Adobe. I love Apple. This really sucks.— Terry RansonThe Adobe and Apple cat fight disagreement may be discouraging, but consider that Android is releasing a Flash-enabled framework, and Adobe is releasing Flash Player 10.1 for smartphones, and Research in Motion has joined Adobe’s Open Screen Project, essentially committing the BlackBerry to Flash in the near future.Flash should never have been used to the extent that it was purely for Web design. But it has capabilities beneath the hood that make it an extremely valuable resource for certain uses, particularly in the mobile space.HTML5’s PlaceHTML5’s place, on the other hand, is entirely on the Web. And this is an outstanding development. I remember switching from table-based designs to CSS, a liberating move that gave Web designers a freedom that only we could truly appreciate. Moving forward with standards-based browsers and rich functionality via CSS3 and HTML5 will take our industry to new heights and lead to a flourishing of gorgeous websites and functionality that we’ve never before witnessed.Plenty of articles and resources outline the capabilities and benefits of HTML5 (I won’t cover them here), but rest assured that it is the future, and a sweet future at that.The Web In Two YearsWhere will the chips fall when the Web design industry reaches its next stage? I may be idealistic, but I would like to see (and I think we will see) the following:HTML5 and CSS3 as the new Web standard;All browsers being compatible and standards-based;Flash being used more limitedly as a tool for multimedia and gaming and interaction, both online and offline;Mobile platforms and mobile content development being the newest and fastest-growing subset of the industry:Sporting Flash capabilities for robust application development across all platforms;And offering HTML5, CSS3 and complex JavaScript capabilities for mobile browsing.ConclusionFlash has been misused and overused for the past eight years, spreading its tentacles too far into the fabric of Web design. But rather than getting beaten out of the picture by these practical new Web frameworks, Flash will retreat to its proper place: those niche areas where it belongs and can truly excel. The first niche is multimedia and learning solutions for the corporate space. Only time will tell if Flash finds its second niche on mobile platforms.(al)© Luke Reimer for Smashing Magazine, 2010. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: flash, html5
May 18 2010, 3:33am | Comments »
-
I posted to designmeltdown.com
Faceted Navigation
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/f1FNioizVX0/
A List Apart has a nice article on what they call Faceted Navigation; which is really more easily described as an easy way to filter content based on various parameters like on Amazon.com. http://www.alistapart.com/articles/design-patterns-faceted-navigation/
- Tags:
- Faceted Navigation
May 17 2010, 5:00am | Comments »
-
I posted to smashingmagazine.com
Resurrecting User Interface Prototypes (Without Creating Zombies)
http://feedproxy.google.com/~r/SmashingMagazine/~3/xItCwgNaI2s/
Every user interface designer is familiar with this procedure to some extent: creating a prototype and evaluating it with potential users to understand how the user interface should look and behave. Users will tell you what nags them and should therefore be improved before you code. So, at the beginning of any UI design process, you can expect your prototype to have to be modified in order to work.Because you (and your client) want the changes to be as cost-efficient as possible, you are better off adopting change-friendly prototyping methods and tools. This is especially true in the early stages of the project, when your ideas for potential solutions are rather vague. In this early phase, most often you don’t even know the exact problem for which you are hunting for a solution. You are still analyzing more than designing.To work change-friendly and cheap, then, it’s wise to start the prototype roughly (maybe as a paper sketch) and make it more sophisticated as you understand the requirements—that is, assessing what users will need (or what they won’t need) and how willing your client is to give it to them (yes, those are not always in line).Finally, when the prototype has reached a certain level of expressiveness, it could even serve as a “living specification” for developers, to tell them how the front end should look and feel. These are sometimes referred to as high-fidelity prototypes. As soon as the developers know exactly what to code, your high-fidelity prototype can die in peace. It has no future… Or does it?While this approach is plausible and indeed makes perfect sense for many situations, it needs to be slightly reconsidered in the context of new UI paradigms.A New ChallengeThink of what is nowadays commonly called “natural” user interface (NUI). These fancy multi-touch (and similar) playgrounds are on their way to replacing (or at least augmenting) our good old graphical user interfaces (GUIs), just as GUIs replaced command line interfaces (CLIs), lowering the burden for users to interact with a system, because everything is now more direct than it was with a mouse and pointer.UIs Become Natural… Well, AlmostWith multi-touch apps, you just tap directly on what you want to manipulate or make a gesture on it, and there you go. NUIs are not solely about multi-touch either: a speech recognition system is a NUI, too. Just say what you want and the system will do it for you.Let’s forget for a while that, though called “natural” user interfaces, they are still far from being truly natural. They just feel more natural than before. With multi-touch systems, most gestures are implicit, and you don’t get any convincing tactile feedback so far. Talking to a machine (like one with a speech-recognition system) can be pretty embarrassing. Nonetheless, NUIs are brilliant stuff and will conquer the world.A Nightmare (to Come) for DevelopersUnfortunately, what is brilliant for the user can be a nightmare for the developer. Admittedly, we are still ramping up the hype cycle (especially for multi-touch technologies), and yet programmers are already so fascinated by the possibilities that they are burning the midnight oil to get the job done. This enthusiasm won‘t last forever: NUIs will become common, as will their implementation. The problem that seems exclusive to developers is, in fact, a problem for UI designers, too: what’s hard to develop for the front end is also usually hard to design, prototype and specify.Multi-touch UIs are especially delicate: so many nifty details influence the user experience that capturing them comprehensively takes a lot of effort. Which gesture will trigger which action? How many fingers should be needed to perform a particular gesture? How fast should the fingers move? How should a manipulated object or scene behave after a long time to keep up a proper cause-and-effect interplay?Prototyping Becomes More Expensive…As long as you concentrate your design efforts on a simple photo-sorting application, you won’t run into problems. You can easily prototype this experience by… well, sorting real photos. But multi-touch applications will become more complex, and gestures will occur in greater variety and (hopefully) help to solve more realistic problems. This gives the UI designer an unfamiliar challenge. Prototyping cheaply and, in the process, learning about the experience of solving a complex problem using gestures is almost impossible if there’s no suitable analogy in real life.Of course, you could prototype parts and approximate a decent design, but then you would have that nagging feeling that you missed something and would doubt that you really translated what you intended. So, to design amazing interaction experiences for NUIs, you have to be prepared to rack your brain by performing more and smaller prototyping-feedback cycles. Creating an expressive prototype requires more time and expertise. Christopher Alexander has said:Things that are good have a certain kind of structure. You can’t get that structure except dynamically. Period. In nature you’ve got continuous very-small-feedback-loop adaptation going on, which is why things get to be harmonious. That’s why they have the qualities we value. If it wasn’t for the time dimension, it wouldn’t happen. Yet here we are playing the major role creating the world, and we haven’t figured this out. That is a very serious matter.As a building architect, Alexander has nothing to do with GUIs or NUIs. Still, his words are so universally true that they can be translated to the context of user interface architecture. The more natural and harmonious a UI designer wants a user interface to be, the more time and more iterations he will need to get there.Good designers might require fewer iterations than poor designers, but they couldn’t do it without any (unless they made a one-to-one copy taken straight from nature itself). We can use simple deductive reasoning: good UI designs in the future will require more feedback loops; more feedback loops will make prototyping more expensive; and the more expensive prototyping is, the higher the burden of throwing a prototype away.… Too Expensive to Throw Things AwaySo, instead of throwing it away, what else can you do with your prototype? You could, of course, develop it over time, which means building on what you have and just adding or modifying the things that you’ve learned from feedback are missing or need to change. Even after development has finished, you can put the prototype on hold and get back to it later, as necessary. And let’s not deceive ourselves: even when you’ve gotten the requirements, the day will come when one of them will become invalid, at which point you will need to dig up your almost-forgotten creation to make changes.But how effective is it really to evolve prototypes this way, and is the process enough to address the challenges that modern UI paradigms pose? To answer this, let’s look at what support a modern prototyping tool can give the UI designer. After all, not being able to do something with a prototyping tool may render the approach impractical. In the second part of this article, I’ll shed light on Expression Blend, because it now handles the widest set of possibilities we have faced so far for squeezing the most out of a prototype.[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]Prototype Recycling with Expression BlendLet’s say you want to make use of Blend to design a NUI that is based on Silverlight or WPF and that lets you easily manipulate items on the screen. In the beginning, you wouldn’t even touch the tool at all; rather, you would “invent” whatever gesture you think is intuitive to perform this operation. Most likely, you would do this in your head or on a whiteboard. You’ll discuss and refine the design with teammates or potential users.At this stage, everything is still low-fidelity, so throwing out things isn’t costly yet. When you have a good feeling about the rough design, you can start prototyping in higher fidelity, to be really sure that your idea works. To simulate the intended interaction experience, every single detail is critical in later prototyping stages.Defining BehaviorsFirst of all, defining how an item behaves during manipulation is interesting. In fact, Expression Blend allows you to attach such “behaviors” to an object, telling the object how to move, resize or do anything else according to a certain user input. The nice thing about behaviors is that they are self-contained software objects that you can use out of the box, without needing to know exactly how they work.Because a growing community of developers already codes behaviors and publishes them on the Web free of charge, searching first for an existing behavior that approximates what you want to achieve is a good idea. In some cases, you may need to tweak the behavior to suit your needs; you do this either by yourself (if you’re one of those rare “designer/developers”) or by asking another developer for quick help.Caring About Every DetailBecause you really want to engage users with your UI design, you may want to add stunning animation and other visual effects to the item being manipulated. Expression Blend offers a timeline for creating an animation storyboard, as well as a lot of properties to change the style of an item.With animation, for example, an object that lethargically follows the path of your finger feels very different than one that organically accelerates and decelerates according to physical properties of the real world.Everyone with an iPhone loves the “elastic strap resistance” behavior they get when scrolling through a list. To get such an immersive, engaging and to some extent natural experience, you have to perfectly coordinate all parameters, including location, speed, size, color, shape, etc.. Thus, you can elicit the precise emotional response in users that you’re aiming for only by composing, tweaking, testing usability, tweaking again, animating, styling, re-testing usability, modifying the styles, etc.Usability testing, then, does not always need to happen a grand scale. Involving as few as two to three people can also yield quick valuable feedback. Still, you cannot do entirely without usability testing.Getting RealAs soon as the prototype is finished, you will have to really implement it. Even though it took blood, sweat and tears to build it, it’s still just a prototype, after all, not a real application. You need the supports of developers to realize it.So, how do you manage to implement the prototype while preserving all of the nifty details that you put together with painstaking effort? One way is to say to the developer:Hey, could you please implement this part of the application exactly as shown in the prototype? It should behave exactly this way: same behavior, same animation speed, same visual style…”You might possibly get the following answer:What kind of an idiot do you think I am? You just want me to blindly rewrite what’s there? That isn’t challenging in any way. It just takes a lot of time. Go ask a monkey to do it.Large versionSo, you may have to change your strategy:Could you please take my stuff as is and incorporate it into the production environment? You don’t need to change anything. Everything behaves exactly as required.To which the developer replies:Are you crazy? This thing is cobbled together like Frankenstein’s monster. No way will I put this into a production environment. It will screw up the entire architecture.Large versionA big question mark might now magically appear over your head, because you cannot seem to get it right for the developer either way, and you don’t know why. Admittedly, we are exaggerating and simplifying here; if you are on a team, you wouldn’t put the request in yourself, nor would the developer be so offended by you. Still, the developer is justified both ways: he is right not to rewrite everything you’ve done, and he is right to worry about jeopardizing the system architecture. Here’s why.Architecture, and Its AbsenceYour prototype, as impressive as it looks and feels on the outside, has gone through several cycles and has accumulated a messy internal structure. It has copy-and-pasted spaghetti code from several community programmers, each of whom has a different level of expertise and follows a different coding convention (or worse, no convention at all). All kinds of software artifacts have been duplicated, thus violating the appropriately abbreviated “DIE” principle (“duplication is evil”). Also, the prototype would be memory-hungry and would perform poorly if it ran with real data. To summarize: the problem with your prototype’s inner architecture is that it has no inner architecture.Yoder describes this kind of un-architecture as a big ball of mud, and that’s a good way to put it: adding a big ball of mud to clean stuff makes dirty stuff in result. Exactly the same thing happens when you hand over a big ball of mud for the developer to integrate into a cleanly organized architecture. Frankenstein’s monster is another apt analogy: if you try to keep your prototype alive as is, with body parts taken from different sources, at some point it will come around to bite you in the rear.Preparing For The Recycling ProcessSo, how do you reincarnate your prototype as a living element in the production environment, instead of letting it die disgracefully or creating a zombie? Can this be achieved at all?Quick Diversion: The Packaging IndustryTo answer this, let’s look at the packaging industry. In the packaging industry, most waste is reused, for either the same or a different purpose. This is what we commonly call recycling. For this to work effectively, products are created from parts that consist of different materials or layers. A yogurt cup, for instance, is made of plastic, while the label may be cardboard.So, after you’ve eaten your tasty dessert, each part finds its own way through the recycling process. Some of the materials are processed into new products, while others are thrown away. The key thing here is that the packaging industry separates a product into different components beforehand to be able to reuse as much as possible afterwards.Now, how can this approach be adapted to UI prototyping and creating software? Borrowed wholesale, this would mean separating the prototype into several fragments during creation so that some of them can be used in the final system (either as they are or modified), while others are thrown out. Let’s see how Blend supports us here.Back in Blend: Fundamental ConceptsIf you use Expression Blend, splitting a UI prototype into different layers this way is easier than it sounds. Blend already has all of the bells and whistles to do it; for example, it has a bunch of clearly contoured and complementary concepts, such as control templates, behaviors, converters, styles, dependency properties, data bindings, triggers, etc. So, a control template would allow the designer to completely redefine a control’s visual elements without changing its fundamental behavior, while a behavior makes an object do things it would not do on its own, independent of how it looks.This large set of orthogonal concepts was not created to annoy designers. It was designed to support them, by making their work more organized and formal and without restricting their creative freedom, which in turn allows for healthier collaboration between the designer and development team. After all, the development team has to get the job done in the end, or else the design team is doomed to languish on Prototype Island.In fact, when you follow Blend’s concepts strictly, you create a number of artifacts that developers can reuse. Take a control template: a UI designer who does not want their UI to look standard will at some point have to create a control template. The good thing is that, because a control template is essentially about defining a UI’s visual elements, the designer can’t go wrong here: his job is to define visual elements. In turn, every single control template could likely be reused as is in the application. In other words, the “look” layer can be separated from the messy stuff below and therefore survive without causing any harm.An Example: Why Use Value Converters?For control templates, it is pretty clear why they can survive. Other concepts are not as clear but just as applicable. Let’s look at the concept of converters. A converter is a simple software class that takes one value and spits out another. What does this have to do with UI design?A lot, because among other things, you will likely benefit from converters when you want cleanly formatted labels. As a practical example, think of email messages displayed in a table. Each row shows a single email message, with all its details, including subject, sender, date and time received, etc. For formatting, the date and time detail is the most interesting, as modern mail applications like Thunderbird and Apple Mail illustrate.Thunderbird displays the date only for messages older than the current date, otherwise it just shows the time. Apple Mail displays “Today” instead of an absolute date if the email was received on the current date.The intention is clear: get rid of any information that is not absolutely necessary. By doing so, you reinforce the important information by making it more scannable.A good UI design is in the details. Converters can help improve how well a piece of information is detected and understood. Of course, you could just fill in the information “by hand”—in the case of our email example, typing “Today” in each cell as needed. But if you will have to evaluate alternative designs and formats with users, tweaking the converter is much quicker than manually typing uniquely formatted text in each cell. What’s more, just like behaviors, converters are self-contained, which will motivate community developers to write and share them with you, allowing you to use them out of the box.Increasing Your Prototyping SpeedAs you can see, by aligning the internal structure of the prototype with these different concepts, not only will you increase your prototyping speed in the long run, but you will end up with different parts that you can choose individually whether to throw away.With converter, you may still encounter bad coding and naming conventions (which is sometimes the price of tapping community resources). In that case, you wouldn’t be able to use it because it would violate the internal structure of the final system. The good thing is, being a distinct concept, a converter is pretty agnostic in relation to the rest of the prototype, so you will have a clear idea of where to look to remove problems in the converter’s internal structure.The converter itself, then, can be recycled instead of thrown away. And you can decide individually whether to reuse, recycle or throw away every distinct concept in your prototype.The Recycling Process, Or “Rising From The Dead”While the designer’s job when building a prototype is to follow Blend’s concepts, the developer’s job is to look after the recycling. But if you use the word “recycling” with a developer, he may look puzzled. In developer terms, this is actually called “refactoring.”Refactoring: The Big Spring CleanRefactoring means improving the internal structure of a system without changing its observable behavior. This is not voodoo magic. It just means that the developer has to change bad names to good names (while adhering to certain coding conventions) and that all of the duplications from your copy-and-paste orgies have to be centralized in a single location.Renaming objects sounds tedious, but it’s not. Because the developer can open the same Expression Blend project that you worked on in Visual Studio, he can rename objects almost automatically without fear of breaking something.Of course, the deeper the developer’s changes, the greater the risk of breaking something. This could lead to a good internal structure but a UI that does not look or behave as intended. An example of a deep change is centralizing duplicated code. Developers, though, especially those of the Extreme Programming school, have a way of avoiding such risks.Avoid Risk With Test CasesDevelopers would likely write some test cases before touching a prototype’s structure. A test case confirms a certain output or reaction whenever a certain input or interaction occurs. If it’s confirmed, the test case is considered a success; if not, it is considered a failure. The developer can tell exactly what output will result from what input just by using the prototype and discussing some of details with you (for example, determining what didn’t work as intended because you didn’t have the necessary time or skill).Once the test cases are written and all of them have run successfully, the developer can begin the refactoring process. Whenever a fundamental refactoring step has finished, he will likely check the test cases again to see whether they still run successfully. If they don’t, he will need to undo his most recent changes and perform the step again. At the end of the process, if all of the test cases have run successfully, you will probably have a final application that has a clean internal structure and that looks and behaves as your prototype does. After refactoring, the prototype can be thrown away for good… but without shedding a tear, because every piece of it lives on in the final system.And then the next time you have to make minor changes to your design (for example, because a requirement has changed), you will be working on the actual application, not the dead prototype. This allows you to benefit from everything the development team has done so far (such as performance optimization). Also, your and the developer’s work will not go out of sync, as would happen if your prototype and the actual system were being run simultaneously.Although the refactoring process sounds complex and time-consuming, it is common practice in most development projects. Don’t be vain about it: the developer is not doing this just for you; he does it to keep the system maintainable and extensible.Wrapping UpTo create a good user interface design, prototype your concepts and evaluate them with real users. The more natural you want the user interface to feel, the more details you will have to take care of. This makes prototyping more challenging and time-consuming than the conventional notion of prototyping, which is to “build something rapidly and cheaply.”For this reason, some designers are tempted to simply turn their high-fidelity prototype into the actual system, as is. After all, throwing it away would be such a shame. But this approach is not advisable because it jeopardizes the system’s integrity, mainly because of the prototype’s messy internal structure, which arose as a result of the many changes that you implemented in response to user feedback.Fortunately, modern prototyping tools such as Expression Blend allow you to create prototypes using different orthogonal concepts. They make it possible to split a prototype into parts and decide whether to throw out or keep each part individually.For those parts that you cannot reuse as is, you can at least recycle or, to use the parlance, refactor them. Refactoring cleans up the messy structure of your prototype without changing its look and feel. The developer’s test cases ensure that everything is preserved as you intended.So, if you are open to recycling prototypes, what are you left with? You get a user interface that looks and behaves exactly as intended, but that’s actually live. Also, you and the developer get to work on the same thing without conflicting with each other. Both of you do what you’re good at, and you generate something you can appreciate: you generate a nice UI, and the developer generates a clean system architecture.And yet, all of this is possible only if your prototyping tool of choice supports it. It’s not always about “people over tools.” Sometimes it’s the other way around: pick the right tools, use them correctly and then see how people from different disciplines gel as a team.Further ReadingEffective Prototyping The website to accompany the book Effective Prototyping for Software Makers by Jonathan Arnowitz, Michael Arent and Nevin Berger. The book provides broad and useful information on prototyping in general.User Interface Prototypes in Usability Engineering A blog article on the process of creating prototypes in the early stages of a project.Hands-on Natural User Interfaces The website for the book Multitouch on Windows: NUI Development with WPF and Silverlight by Joshua Blake. The book is not finished yet but looks promising.Designing Gestural Interfaces The website for the book of the same name by Dan Saffer.Big Ball of Mud A brilliant article on architecture and evolution, by Brian Foote and Joseph Yoder.How Buildings Learn The Wikipedia entry for Steward Brand’s book.Refactoring The Wikipedia page on the meaning and purpose of (code) refactoring. As for books on the topic, Martin Fowler’s Refactoring: Improving the Design of Existing Code is highly recommended.Extreme Programming Explains extreme programming (XP).The New Iteration The subtitle of this book by Karsten Januszewski and Jaime Rodriguez is “How XAML transforms the collaboration between developers and designers in Windows Presentation Foundation (WPF).”Electric Beach The website of Christian Schormann, product manager of Expression Blend.Modern User Interface Design Tools A blog article comparing Microsoft Expression Blend and Adobe Flex Builder.(al)© Thomas Immich for Smashing Magazine, 2010. | Permalink | One comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: interface, prototype, prototyping, ui, user
May 17 2010, 1:07am | Comments »