Design

The Power of Adobe Fireworks: What Can You Achieve With It?

Smashing-magazine-advertisement in The Power of Adobe Fireworks: What Can You Achieve With It?Spacer in The Power of Adobe Fireworks: What Can You Achieve With It?
 in The Power of Adobe Fireworks: What Can You Achieve With It?  in The Power of Adobe Fireworks: What Can You Achieve With It?  in The Power of Adobe Fireworks: What Can You Achieve With It?

Our recent article covering the new features of Adobe Fireworks CS5 provoked a very interesting and intense debate. But because comments ranged from “Fireworks is the best tool for screen design!” to “What exactly is Fireworks?”, we thought that another article on this topic might be very useful to Smashing Magazine readers.

However, this time the article will not focus so much on the tool itself, but rather on what can be achieved with it, and more specifically — what can be achieved with its visual/graphic design capabilities. We also hope that the following showcase of inspiring illustrations, created entirely in Fireworks, will not only be interesting to our readers, but will also help put an end to the common misconception that Fireworks is mostly a prototyping tool – and – that for “serious” design you must switch to other tools, namely Photoshop or Illustrator.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

…What Exactly Is Fireworks?

Finding the answer to this question is not so easy. Is it a prototyping or wireframing tool? Or is it a powerful graphics editor? Is it a Photoshop competitor, but for Web design only? Is it none of these, or all of the above?

Fireworks-cs5-splash-screen Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Perhaps presenting you with a quick overview of some of the key features of Fireworks will help you decide the answer to that question yourself.

What is it?

Fireworks is a bitmap and vector graphics editor formerly developed by Macromedia and since 2006 developed by Adobe. The main purpose of Adobe Fireworks is for creating expressive, highly optimized graphics for Web, screen and various devices (it should be noted that because of its main purpose, Fireworks has certain limitations: it supports only RGB/RGBa colors and the maximum canvas size of its files is approximately 10,000×10,000 pixels).

What is it good for?

With Fireworks you can make websites, user interfaces and rich Internet application (RIA) interfaces which are editable in both vector and bitmap modes. Fireworks has Pages/Master Pages, Layers, States and Symbols – all features that considerably speed up development of Web designs. You can also use it to create wireframes and interactive prototypes — you can apply behaviors to objects to simulate interactivity; you can add text, symbols, images and also import Illustrator and Photoshop assets; and once ready with the design you can export the files as clickable PDF mock-ups for approval.

Fireworks can turn a graphic design project instantly into an interactive Web prototype — simply export a Fireworks single-page or multi-page PNG file as HTML, CSS and images. You can then send such an interactive prototype to a client for approval; or you can further edit the exported code (which is almost standards compliant and uses an external style sheet) in Dreamweaver, Coda or any other code editor of your choice.

Export features

Fireworks can export to JPG, GIF/GIF-animated, PNG8/24/32, TIFF and a variety of other graphic formats. The Fireworks compression algorithms are on par with, or even better than, Photoshop’s. Not only this but Fireworks can also export graphics directly to PNG8 alpha+index transparency format with true cross-browser compatibility (this means the exported PNG files will display correctly even in Internet Explorer 6 and 7). This is one of the areas where Fireworks excels and Photoshop still lags behind. Fireworks also shows excellent compression options for the iPad and iPhone PNG formats.

You can also export Fireworks PNG files as Adobe AIR application prototypes or FXG 2.0 files for development in Flash Catalyst and Flash Builder (FXG 2.0 also allows a much better integration with Illustrator and Photoshop). You can create skin components such as buttons, menu types and form elements for use in Flash Builder (previously known as Adobe Flex Builder).

Formats support

Because the native file format of Fireworks is editable PNG (it simply stores additional metadata for layers, animation, vector data, text, effects) and Fireworks is primarily a vector application, development for the iPhone is easy and effective in Fireworks. There exist a variety of toolkits and rich symbol libraries for Fireworks iPhone development and they can speed up your work measurably.

Fireworks can open/import native Photoshop (.psd) and Illustrator (.ai) files with high fidelity of layers, effects and blend modes; you can also import native Adobe Flash vector objects (you may first need to convert them to .ai, though). And from Fireworks you can readily transfer graphic assets back to Illustrator and Photoshop. You can also take your design into Adobe Flash Professional and preserve layer states and symbols for animation interactivity development.

Highly extensible

Fireworks is also highly extensible — this makes possible the developing of amazing extensions (such as TweetFire, which lets you instantly tweet the image/design you’re currently working on without leaving Fireworks), complex panels, commands and auto shapes.

The Showcase Of Fireworks Illustrations

So now that we know what Fireworks is capable of, let’s see what designers across the globe are actually doing with it!

The following selection of vector illustrations, logo and icon designs – created in Fireworks – is limited to 19 designers. To make the most of this article, we have made available some Fireworks editable PNG files (.fw.png) which you are welcome to download and deconstruct.

1. David Hogue

Dave Hogue is the Director of Information Design & Usability at Fluid, a design and development agency located in San Francisco. His areas of interest include user experience design, usability, interaction design and information design. Dave speaks regularly at the Web Experience Forum and Adobe MAX. He is very active in the Adobe Fireworks community and he regularly posts useful Fireworks tips and tricks on his Twitter account.

{01} Golden Compass illustration

Compass Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS4, all vectors, and inspired by this tutorial made for Adobe Illustrator (download editable PNG).

{02} Quartz Watches illustration

Quartz-watches Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS5, all vectors, and inspired by a photo of a real quartz watch (download editable PNG).

2. Matthew Inman

Matthew is a designer and illustrator who runs the highly successful comics, The Oatmeal. He lives in Seattle, Washington, and uses Adobe Fireworks to draw all the comic strips.

Fireworks is intended for web design, but it’s also a very capable vector editing tool and it works beautifully if your work is going to end up on a website. …I don’t use Photoshop and I’m actually pretty terrible with it. I also have Illustrator and I was using it for a few months, but I ended up going back to Fireworks simply because I’m more comfortable with it and it’s better for creating web content.

Following here is a very short selection of only 5 comic strips — all made with Fireworks (but of course you’re welcome to explore the full Oatmeal collection):

{03} 15 Things Worth Knowing About Coffee

Theoatmeal-1 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{04} 20 Things Worth Knowing About Beer

Theoatmeal-2 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{05} How a Web Design Goes Straight to Hell

Theoatmeal-3 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{06} Why working at home is both awesome and horrible

Theoatmeal-4 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{07} Duck in Coffee illustration

Coffee-duck Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Matthew does not use Fireworks only for drawing his comic strips — for example, see this beautiful “There’s a duck in my coffee” vector illustration, created entirely in Fireworks (see screenshot from the process). Check Matthew’s portfolio if you’d like to see more of his works.

3. Ryan Hicks

Did you ever wonder what happens behind the closed doors of Adobe? How their design teams are working? What applications are creating the icons and splash screens of the various Adobe apps? Ryan could tell us a lot about this subject, since he’s currently working at Adobe as Design Manager, and prior to that he was Senior Experience Designer at Adobe and Experience Designer at Macromedia. His list of clients also include Polygram Music, Wired Magazine and many others (see Ryan’s portfolio).

Let’s take a look at some of his design and illustration work.

{08} XD Brownbag Poster series

Xd-fwcs3-poster Th in The Power of Adobe Fireworks: What Can You Achieve With It?

After posting it to the Adobe Developer Connection | Fireworks website, Ryan shared the following about this illustration:

This illustration is just one example of a series from the XD Brownbag seminars at Adobe (XD is the Experience Design team at Adobe). The poster art is drawn up at screen resolution and later scaled, because this enables me to build up the shapes more quickly and get into the “drawing light,” which is where the real magic of Fireworks comes in. Its incredibly intuitive gradient opacity controls and the Ellipse gradient’s multi-handle directional controls allow a drawing approach that mimics the real behavior of light. Solid objects have a primary base color and separate slices of cast light, bright highlights, and shadows to build up volume and surface.

After the illustration is completed, it is scaled up to print resolution in Fireworks (eat a snack during this process, as big resolutions is one thing Fireworks isn’t entirely happy with). This large Fireworks PNG illustration is then taken through Adobe Photoshop to output a transparent PSD, and finally into Adobe Illustrator for layout, typography, and output for the final, print-resolution 24″ x 36″ poster.

Download the Fireworks PNG file.

{09} XD Lunchbox poster

Xd-lunchbox Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{10} XD Beet poster

Xd-beet Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{11} XD Mackerel poster

Xd-mackerel-poster Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{12} XD Salad poster

Xd-salad-poster Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{13} XD Brownbag poster

Xd-brownbag-poster Th in The Power of Adobe Fireworks: What Can You Achieve With It?

4. Rogie King

Rogie King is the guy behind Komodo Media. He is a web designer, illustrator and blogger. Lately Rogie started a series of tutorials on Fireworks that are becoming more and more popular every day.

{14} rogieking.com personal site illustrations

Rogie-king-redesign Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Composed entirely of vector artwork in Fireworks, this is a piece of art for the new and upcoming tumblog for rogieking.com.

{15} Logo for rainboxx.de

Rainboxx-logo-1 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Rainboxx-logo-2 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Rainboxx-logo-3 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created for Matthias Dietrich for his PHP development shop, Rainboxx, this logo was created entirely in Fireworks as vectors. Matthias wanted an evolution to his brand and a professional 3D icon evolution of his current Rainboxx identity. You can view more info about the process, the related dribbble shot, and you can learn more about the particularly interesting brushed metal effect in this video tutorial.

{16} Mad Mimi Illustrations

Mad-mimi-1 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Mad-mimi-2 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Mad-mimi-3 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

These are just a couple of illustrations from a series created for the redesign of Mad Mimi. The illustrations are composed entirely of vectors with the additional use of Fireworks symbols for repeating shapes (such as the boxes).

{17} Adaptive UI icons

Adeptiv-ui-icons Th in The Power of Adobe Fireworks: What Can You Achieve With It?

A custom icon set designed entirely in Fireworks for andCulture who wanted an icon set that was smooth, silky and that fit in with the aesthetic of their Flex web application (see a screenshot from the work in progress).

5. Xiao Cai

Xiao currently lives and works in Melbourne, Australia. He’s currently building his portfolio and preparing for the RMIT University. He does not have a personal website but you can check his profile in deviantart where he posts some of his works.

Xiao shared with me a bit more details concerning his very interesting technique, which he uses in Adobe Fireworks:

During my free time, I looked through a lot of online tutorials on the use of software like Fireworks, Photoshop and 3DS Max. It is quite amazing that you can learn pretty much anything yourself as long as you put theory and practice together. At the beginning, I created a few simple wallpapers using Fireworks, to get familiar with its tools and options. Then I read an article about creating Chinese painting-like pictures in Adobe Fireworks. I tried a few times and then came up with a style of my own, something like Digital Chinese Painting, and was quite happy with the results. Since then I went deeper and deeper with Gongbi (a meticulously detailed painting style) and Shuimo (a water color style) paintings and re-created them with Fireworks. I was trying different tools and effects to get the right one, then compared these pictures with real Chinese painting reference photos and modified them, until I was satisfied with the end result.

Sometimes, I am also using Fireworks to create icons and other design elements.

Next, you’ll see four of Xiao’s digital drwaings, each one has a short description added by the author.

{18} DCP2 Fireworks illustration

Dcp2-novelekehe Th in The Power of Adobe Fireworks: What Can You Achieve With It?

“My first complete painting by using Fireworks. I did everything piece by piece, from background to stamen, with the pen tool, then adjusted the colors and effects. Not really a technical one, but did take me a lot of time. This painting is also featured in “2 Faces Apart”, Vol.1, published by King Ink (ISBN: 978-91-85807-05-5).”

{19} DCP3 Fireworks illustration

Dcp3-novelekehe Th in The Power of Adobe Fireworks: What Can You Achieve With It?

“Created in Fireworks, in a bit different style. And with the experience from the previous one, it was finished easily.”

{20} DCP4 Fireworks illustration

Dcp4-novelekehe Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Dcp4-novelekehe-element1 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Dcp4-novelekehe-element2 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

“Here I tried to focus on the flower, and at the same time combine two different styles together (Gongbi and Shuimo). However, I think I still need to work on the composition.”

{21} DCP8 Fireworks illustration

Dcp8-novelekehe Th in The Power of Adobe Fireworks: What Can You Achieve With It?

“One more illustration in the same style; it also has a night version.”

6. Jon Hicks

Jon Hicks (hicksdesign.co.uk, @hicksdesign) is a designer we need not introduce. Among other things, he is the maker of the Firefox, Thunderbird & Mailchimp logos and lately he was Senior Designer at Opera Software, before returning to freelance work this year.

{22} Mozilla Firefox logo

Firefox-logo-in-fireworks Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Firefox-logo-screens Th in The Power of Adobe Fireworks: What Can You Achieve With It?

The logo of Mozilla Firefox, one of the leading modern Web browsers, was originally created in Macromedia Fireworks in 2004. (Note: Later Jon Hicks re-created the logo also in Adobe Illustrator, so that it could be transferred to print more easily).

Currently, Jon Hicks admits that he both loves and hates Fireworks, one of the reasons for which was apparently Fireworks version CS4, which initially proved to be very unstable on MacOS X and Adobe were quite slow to release two stability patches for it.

When I e-mailed Jon a couple of days ago, he was kind enough to share the following with me:

Apart from the first version of the Mozilla Firefox logo, I do all my illustrations in Adobe Illustrator, rather than Adobe Fireworks. I would often use Fireworks for small icons and mocking up site designs, but anything larger and more complicated would be done in Illustrator. The next higher res [resolution] version of the Firefox logo was created in Illustrator — that’s not to say it’s impossible in Fireworks, but I find Illustrator easier for that kind of thing, and it’s then simple to create high res CMYK versions for print, as well as screen.

7. Fabio Sasso

Fabio is a graphic and web designer from Porto Alegre, Brazil. He’s the founder of Abduzeedo, a blog about design, and he and other designers have published there many tutorials on Fireworks. Fabio acknowledges that Fireworks is his favorite and most versatile tool for Web design with its amazing vector capabilities and good bitmap editing options as well.

{23} Apple Air banner

Apple-air Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Done entirely in vectors; there’s also a related tutorial as to how it’s done in Fireworks.

{24} Light Effects illustration

Abduzeedo-lights Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Done entirely in vectors; there’s also a related tutorial as to how it’s done in Fireworks.

{25} The Abduzeetles Rockband website design

The-abduzeetles Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Hilarious — this tutorial will teach you how to create a colorful and funny website design for the Abduzeetles Rockband — all with the power of Fireworks vectors! ;)

8. Lucian Dragomir

Lucian Dragomir from 2313 Studio is a 20-year-old freelance branding and web designer who is currently studying art and visual technology in Virginia. Graphic design is his passion and Fireworks is what feeds his hunger for design. He likes Fireworks for its user-friendly interface and advanced vector engine which, combined, create good results for fast prototyping, Web design and occasionally even print.

Lucian also loves to share his work at deviantart.

{26} Vectorizer illustration

Vectorizer-color-powered Th in The Power of Adobe Fireworks: What Can You Achieve With It?

This is an illustration that won first prize at the 2009 Fireworks Wallpaper Contest, organized by Adobe and FwZone. It was created in Fireworks CS4 and is 100% vector work. To see the full complexity of this illustration, you can download the Fireworks PNG file.

{27} Anger Management illustration

Anger-management-1 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Experimental 3D render of a fire extinguisher and a lighter using only vectors (Fireworks 8).

{28} iCry illustration

Icry Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Experimental characters and lighting/shadow/reflection simulation, 100% vector work in Adobe Fireworks.

{29} TakeOFF illustration

Takeoff Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks 8 with the help of the Alien Skin Splat plugin.

9. Fred Michel

Fred Michel is 30 years old and a freelance graphic and web designer, currently living in Montréal, Canada. He first made his way into the graphic design world through being inspired by Fireworks. An interesting fact is that he is color blind. So how does he manage to put the colors together? He says that this is a secret!

{30} Porsche Carrera illustration

Porsche-carrera Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Originally created in Fireworks in 2004 and is all vector work (download Fireworks PNG).

{31} Cadillac illustration

Cadillac Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks, all vector work (download Fireworks PNG).

{32} Mercedes SLA concept car illustration

Mercedes-sla Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Mercedes SLA concept car — originally created in 2005 in Fireworks, all vector work (editable PNG is available for download). A curious fact is that the concept of the Mercedes SLA car is as old as the year 2000, however, Mercedes did not yet create such a car — it only remains a concept till now.

{33} VW Tiguan illustration

Vw-tiguan Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS3, in 2010, and is all vector work (you may download the editable PNG). One of Fred’s most complex vector illustrations made in Fireworks.

10. Mikko Vartio

Mikko Vartio is a visual web designer from Helsinki, Finland. He uses Adobe Fireworks as a primary tool for creating websites, illustrations, for UI Design and wireframing. When he’s not working with Fireworks he’s reading old sci-fi books and cruising the streets with a longboard.

For Mikko, Fireworks is the perfect tool for delivering ideas destined for screen because of its extensibility, native .ai/.psd support and pixel-perfect accuracy. Mikko can be found on Twitter and Flickr (where he often posts Fireworks illustrations).

{34} Bears illustration

Bears Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{35} Sealife illustration

Sealife Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{36} Longboard illustration

Longboard Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{37} Surprise illustration

Surprise Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{38} Darth Android illustration

Darth-android Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Made in Fireworks CS5 in less than an hour, this funny Darth Vader + Google Android mashup can be also seen as a live design session recorded at 5x speed. Worth watching!

{39} Magic Mushroom illustration

Magic-mushroom Th in The Power of Adobe Fireworks: What Can You Achieve With It?

All 100% Fireworks vector work — the original Fireworks PNG file will be available for download as a freebie later at Mikko’s personal blog.

11. Angelo Sabal

Angelo Sabal works and lives in the Philippines. He’s been an avid freelance graphic designer since 2002, specializing in logos, layouts, digital art and multimedia presentations. Fireworks is his design tool of choice.

{40} Colt gun illustration

Colt-gun Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS4, all vectors (download editable PNG).

{41} Candle illustration

Nice-candle Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS3, all vectors (download editable PNG).

{42} Dragon shield illustration

Dragonshield Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS4, all vectors (download editable PNG)

{43} Iron Man 2 helmet illustration

Ironman2-helmet Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS5, all vectors (download editable PNG).

12. Craig Erskine

Craig Erskine was born, and is still working, in Green Bay, Wisconsin. He has a passion for designing and building standards compliant, stylish and accessible websites.

Craig is using Fireworks on a daily basis and has also published quite a lot of Fireworks tutorials. You may find him on dribbbble and Twitter.

{44} Mac Mini illustration

Mac-mini Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS4, all vectors (download editable PNG).

{45} Apple remotes illustration

Apple-remotes Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS4, all vectors (download editable PNG).

13. Pete Lacey

Pete Lacey is an English graphic designer and artist based in Copenhagen, Denmark. He’s working in the field of graphic design, illustration, photography, video editing, motion-graphics, web development, art direction and even audio recording. When it comes to Web design, Fireworks is one of his programs of choice.

When not working with a computer, Pete can often be found behind a drum kit or a guitar instead. And on Twitter, too.

{46} Fireworks icons

Chopeh-fireworks-icons Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks for a client, 100% vector work.

14. David Brooks

David is a UX designer at Fellowship Technologies and also a photographer. He currently lives and works in Dallas, Texas (USA). You can find him on dribbble and Twitter.

One of his tools of choice is Fireworks.

{47} Camera-Phone illustration

Camera-phone-a Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks for pure fun; all vectors.

{48} Northward Compass website illustration

Northward-compass-site Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Everything (except the map, which is an imported bitmap), is done as vectors in Fireworks.

15. Tomas Gajar

Tomas Gajar is a senior user interface designer. He has been using Fireworks in his daily work for about 7+ years. All designs that you’ll see in his DigitalLabs Portfolio has been made in Fireworks. You can also find Tomas on Twitter and SofaSurfer.

{49} DigitalLabs website design

Digital-labs Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{50} Beck’s design concept

Digital-labs-becks Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{51} SofaSurfer website design

Digital-labs-sofasurfer Th in The Power of Adobe Fireworks: What Can You Achieve With It?

16. Vincent Tremblay

Vincent Tremblay is currently studying computer programming at Bois-de-Boulogne College in Montreal, Canada. He spends most of his free time coding desktop applications, but he also loves working with his favorite web design software, Adobe Fireworks. Vincent can also be found at deviantart.

{52} Neos Carbon 2 logo prototype (neOS Sapphire logo)

Neos-carbon2 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS5, all vectors.

{53} iCompanion logo prototype (iTunes Companion logo)

Icompanion Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS5, all vectors.

17. Mike Taylor

Mike Taylor is a very active member of the FireworksGuru forum and he also runs a personal blog dedicated to Fireworks.

{54} Twitter icons

Twitter1a Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Twitter2a Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Twitter icons, all re-created in Fireworks vectors.

{55} The iPhone, in Fireworks PNG (.fw.png) format

Iphone-in-vectors Th in The Power of Adobe Fireworks: What Can You Achieve With It?

The idea to fully vectorize the iPhone is not new — for example, you may check this excellent tutorial on how to create the iPhone frame in Adobe Fireworks.

However, Mike went one step further and offered the iPhone in Fireworks full vector format for free download (download iPhone in editable PNG format). It should be fully compatible with Fireworks versions CS4/CS5 (and even lower).

18. Nick Isenberg

Nick is a Web and graphic designer who lives and works in Boise, Idaho (USA). You may check his portfolio and deviantart profile, where he publishes some of his illustrations made with Fireworks.

{56} Spiral Notebooks illustration

Spiral-notebooks Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS3, all vector work (download the Fireworks PNG).

{57} Le Petit Porcelet illustration

Lepetitporc Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS3, all vector work (download the Fireworks PNG).

{58} Safari Dock icon

Safari-dockicon Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS3, almost 100% vector work (download the Fireworks PNG).

19. Adobe CS5 Branding

Next you’ll see more details about the whole Adobe CS5 branding, which — it shouldn’t be actually a surprise — was not made in Photoshop, but mainly in Fireworks.

{59} The Adobe CS5 branding

Adobe-cs5-branding Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{60} The Adobe CS5 branding — the icons

Adobe-cs5-branding-icons Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{61} The Adobe CS5 branding — the splash screens

Adobe-cs5-splash-screens Th in The Power of Adobe Fireworks: What Can You Achieve With It?

The Adobe CS5 Branding work was conceived and executed by Ryan Hicks (lead), Shawn Cheris and Dave Nelson. There’s a very interesting article at Veerle Pieters’s blog dedicated to the “making of”. I highly recommend reading this as well as Ryan’s thoughts on the matter too:

Producing assets for nearly a hundred separate software products takes enormous discipline. Discipline in what a few people can commit to executing in terms of fancy design, and discipline in coordinating and scheduling a hundred separate engineering development cycles and their deadlines. And to keep things interesting, Dave bails just before our production schedule was set to kick off. Shawn and I are now an army of two.

Our survival was dependent on the carefully-hewn master files we created for all the hand-built primary assets such as app icons and splash screens. The files leveraged clever layer structures and the attributes management Adobe Fireworks does best.

We have become, in so many words, an outrageously efficient icon factory, pumped up on caffeine, razor sharp pixels, and a couple AIR apps.

CS5 is my third iteration of Adobe’s product identity system. The project was one of the most enjoyable and satisfying I’ve had in my nearly seven years of working at Macromedia/Adobe.

All splash screens and many of the icons of the CS5 apps were made in Fireworks — and most of them exist in various formats including .fw.png and .ai.

So, how good is Fireworks for Web design?

Fireworks is a solid application for creating Web graphics and as John Nack from Adobe Photoshop team says: “Photoshop’s vector shapes & layer effects (strokes, gradients, etc.) are mainstays of Web & mobile design work, but they haven’t gotten updated in a while. If the Photoshop team were to improve this area of the app, what improvements would you find the most important?”

John then lists all features that could probably be added to the next version of Photoshop (CS6?). Let’s take a look at his list — I have marked the features that are proposed to be included in the next version of Photoshop but already exist in Adobe Fireworks (version CS5 or even lower) in italics.

  1. Enable “real” vector shapes (stroke & fill directly editable, without reliance on layer effects or a dialog box).
  2. Support dashed— and dotted—line strokes.
  3. Enable smart shapes — preserve corner roundness when scaling rounded rectangles; support other parameterized shapes (e.g. stars with an adjustable number of points; lines with arrowheads).
  4. Make various layer effects enhancements — apply effects at the layer group level?; re-order effects; duplicate effects (e.g. apply multiple strokes per layer); enable panel-based editing of effects (instead of relying on a dialog box); add/edit effects on multiple selected layers at once; make graphical styles “live� (i.e. if edit the style definition, all styled objects update).
  5. Enable layer search (i.e. type to filter by layer name or attributes).
  6. Improve snap-to-pixel behavior.
  7. Improve text rendering (this is possible in Fireworks with the ClearType Styles extension).
  8. Export text & graphical styles as CSS* (this is already partially possible in Fireworks – it can export a Web graphic design as HTML/CSS code and also can quickly “translate” some objects’ properties into CSS via extensions such as “Copy CSS Dimensions to Clipboard”).
  9. Support guide sets (e.g. for grid layouts).
  10. Support linked files (i.e. edit one file to update buttons, icons, etc. across multiple PSDs).

As can be seen, almost all future features for Photoshop proposed by John Nack are actually existing features in Fireworks and are used by many designers today. It’ll be certainly interesting to keep tabs on how Adobe develops both Photoshop and Fireworks in the future – and what designers will then achieve.

Conclusion

Adobe Fireworks is a powerful graphic design application that is used by many professional Web and graphic designers, UX designers, illustrators and visual artists. In the right hands, it can produce beautiful results with remarkable speed. You have seen some complex vector designs, various drawing techniques, logos and icons and simply cool illustrations.

Perhaps what is the nicest thing about Fireworks is that if you plan to create artwork in Fireworks, your project development is not limited to Fireworks only. You can easily import multi-layered .psd files, .ai files with multiple artboards and even visual assets from Flash. And then in the other direction, from Fireworks, you can transfer graphic assets to Photoshop, Illustrator, Flash Professional and Flash Catalyst. You can combine the Fireworks speed, vector power, Pages/Master Pages, Symbols and ease-of-use together with the options of both Photoshop and Illustrator and achieve all-round results, faster and with great flexibility.

In my personal opinion, there exists much more than 7 reasons to prefer Fireworks to Photoshop. While Fireworks may be not better than Photoshop, when it comes to designing for the Web and screen, it is faster, easier and can produce results as good as those that can be achieved in Photoshop, Illustrator, and other modern graphic design programs. Fireworks is very close to the real Web design application that Jason Santa Maria was discussing not long ago (although for this to happen, Fireworks would need much more intensive development from the part of Adobe).

{62} Adobe Photoshop CS5 splash screen

Photoshop-cs5-splash-screen Th in The Power of Adobe Fireworks: What Can You Achieve With It?

And there you have our final illustration. Next time you start Photoshop CS5, you may ponder that the “blue fish” splash screen you see was actually created in Fireworks — the lightweight, versatile design application that is responsible for most of the artwork across the Adobe CS5 suite.

If you think that I may have missed someone’s truly great (Fireworks) work, please let us know in the comments, thanks!

(afb)


© Michel Bozgounov for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , ,


Design is in the Details: Using CSS Selection Pseudo-Classes to Declare Your Team Spirit

css3 using selection pseudo-classesI’m hesitant to admit it, but I’m not a huge football fan. My boyfriend, however, loves “his” team — the USC Trojans. And if there’s one thing I’ve learned over the years, it’s that football fans will use any excuse to dress up or decorate with their team colors. Actually, real fans don’t even need a reason to show team spirit.

So, in honor of football fans everywhere and to kick off the fall football season in America, I thought it would be fun to show how to use one of the new tools in CSS3 to decorate a web page with your team colors. Let’s play with the selection declaration.

There are many neat design tricks in CSS3. The selection declaration — ::selection — is a quick way to add some polish onto a design and give a website the “wow” factor that really makes clients happy. Using a .selection class can override the operating system’s default highlight color with any color you specify.

As with so many of the best html and css goodies, browser support varies. Safari and Firefox both recognize the selection declaration, but you’ll need to implement the code a bit differently for each browser. Here’s how to use CSS3′s new selection declaration to add a dash of unexpected color to your web design.(...)
Read the rest of Design is in the Details: Using CSS Selection Pseudo-Classes to Declare Your Team Spirit


© Tutorial Blog, 2010. | Buy iPhone Accessories | iPad App Reviews


How to Choose a Web Design Agency to Build Your eCommerce Site

choose a web design agency to build ecommerce siteThese days, anyone with a computer and an Internet connection can build a website. The question is, what kind of website will you get? Will your new website function well and be able to expand as your company grows? Your website is often the first impression that clients have of your business, so you need a professional web design agency—not some guy who pirated a copy of Dreamweaver with a stack of business cards using a VistaPrint template.

There are a few things which you need to check before signing a contract and handing over a deposit—especially if you are building an eCommerce site. Below are some of the key points to check before deciding which design agency to use.(...)
Read the rest of How to Choose a Web Design Agency to Build Your eCommerce Site


© Tutorial Blog, 2010. | Buy iPhone Accessories | iPad App Reviews


iPhone App Designs Reviewed: Critique Board and Lessons Learned

Smashing-magazine-advertisement in iPhone App Designs Reviewed: Critique Board and Lessons LearnedSpacer in iPhone App Designs Reviewed: Critique Board and Lessons Learned
 in iPhone App Designs Reviewed: Critique Board and Lessons Learned  in iPhone App Designs Reviewed: Critique Board and Lessons Learned  in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Some time ago I started a mobile app design review section on our company’s website. The idea behind this “Crit Board” was simple: if mobile developers want to create apps that people want to buy, they’ll need help with design and usability. But most of the time they can’t afford it. On our Crit Board, developers can send us their mobile apps (iPhone apps, Android apps, Blackberry apps) along with questions and problems, and we (free of charge) will pick apart key usability issues, illustrate our design recommendations and post our findings.

Critboard in iPhone App Designs Reviewed: Critique Board and Lessons Learned

The only condition to get free criticism from us is that you agree for it to be made public, which is why I am able to share several case studies with Smashing’s readers right now. It’s hard to imagine something more relevant: these are real problems facing real developers. I hope these problems and the proposed solutions will benefit others who have similar issues and will be generally relevant to those working in the field.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

1. Foobi

“Alex,

I am the lead designer and developer of Foobi. Foobi was designed to track your diet in a different way; instead of tracking calories and tapping on many drilled-down lists, it works by simply tracking servings per food group and providing an overview of your food intake balance.

Although I have tried really hard not to over-design it by tracing Apple’s footsteps while building custom UI control elements, I would love to hear from you about this subject.

— Remy”

Foobi 1 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Your app is beautiful indeed. And it is also usable and easy, exactly as you describe it: if user knows how to flick, he is already an expert. An expert in what, though?

As stated in the iTunes description, the purpose of this app is to “track and balance your diet.” I understand the two main user goals as follows:

  1. To record what food they consume,
  2. To make sure they stay on the right path with their nutrition, and to have a clear guide to balancing their diet if they veer off that path.

Your app does a good job of fulfilling the first goal: users can easily record what they eat just by selecting the right food group and adding the amount of “servings” consumed.

Foobi 2 New Updated1 in iPhone App Designs Reviewed: Critique Board and Lessons Learned

But what about the second more important goal of tracking progress and adjusting one’s diet? Does the app help customers achieve this goal? Not very well. There is room for big improvement.

There are two main problems with this part of the app.

Summary Information Is Hidden

To access the summary chart, you have to flip the iPhone to the side and view it in landscape mode. But this feature is not communicated through the app’s design, so a user will discover it only by accident. When we talk about fulfilling a major user goal, it is important never to rely on accidents to communicate functionality.

Foobi 3 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Summary Information Is Not Well Designed

Additionally, the summary is not informative enough.

The summary chart doesn’t offer too much to the viewer. Here are the main problems:

  • It’s not clear what the different colors mean, and there is no legend to help.
  • The scale is not flexible. You can view the information only by week, which does not allow users to easily see their big-picture eating habits. (Tip: consider incorporating the pinch gesture to allow users to scale in and out.)
  • Tracking consumption of a particular food group is not possible with this chart but would be valuable to users.

Foobi 4 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Information design is a vast topic. There are a million ways to address the problems that I’ve highlighted and to increase the visibility of useful information for your audience. I recommend reading Edward Tufte’s books, particularly The Visual Display of Qualitative Information.

And here’s an inspiring display of a lot of information. Of course, it’s not tailored to mobile use, but it has a few great ideas:

4 Foobi in iPhone App Designs Reviewed: Critique Board and Lessons Learned
From Google Finance.

One More Thing

When I purchased and downloaded your app, I didn’t quite understand why it was taking so long to download… until I realized that it had already downloaded. I was fooled by the app icon, which makes it look like it is still downloading:

5 Foobi Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

2. Budget Planner

“Alex, please take a look at my app Budget Planner. I have tried everything, and it keeps going up and down. The major issues that people complain about are intuitiveness and slowness. People don’t understand what the software does. But people who do learn it love it.

— Alex Sabonge”

The basic idea of this app is very good, and the App Store description shows off its functionality well:”Budget Planner tracks your bills, budget, calendar and transactions by displaying your balance in a calendar view, letting you know how much money you will actually have on any particular day. Like a balance forecaster.”

Here’s an overview of how Budget Planner works:

  1. Users input their monthly salary info and plug in their fixed monthly expenses (utilities, phone, car payment, etc).

    Budget Planner 1 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

  2. Using this data, the app allows users to track their cash flow and predict the amount they’ll have in the bank on any given day.

    Budget Planner 2 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Most folks would find this extremely useful. So, why are people complaining about the app? Why does it have an average rating of 2.5 out of 5 stars, and why are sales lower than you had hoped?

Let’s look at the main sources of the problem. For now, we’ll set aside lesser (though important) usability factors, such as not following the iPhone UI guidelines and using the standard controls improperly. Let’s start at the beginning. Humans invented money to buy things, right? Your core audience’s main goal is to know what they can afford and when they can afford it, whether it’s a new pair of shoes, a new car or a solid retirement plan.

People don’t prepare a budget just for fun. They make the effort because they hope it will help them make better purchasing decisions (read: buy more stuff that they like), without their rent check bouncing. Your app is getting there. But several key factors are getting in the way of a great user experience. Let’s take a closer look at the app’s “landing screen,â€� the calendar, the main element that differentiates this app from other budget apps.

First of all, I think the calendar is a great idea. It’s much better than the categorized lists that many other apps have. The calendar is all about how much money you have or will have in future. A list only shows how much you’ve spent. Knowing that your money is gone doesn’t really help achieve a financial goal (purchasing a shiny new laptop, for example).

Here are some downsides to the calendar view:

Budget Planner 3 New Updated2 in iPhone App Designs Reviewed: Critique Board and Lessons Learned

I believe there’s a way to visualize information in the current design so that users are able to uncover “invisible” patterns. Uncovering the details and patterns behind their spending habits enables users to get new ideas, make informed decisions and achieve their financial goals (and praise your app in the process). Users will better understand their bad habits and be able to take steps to correct them.

A graph could provide richer possibilities for visualizing financial information. It’s much more flexible and scalable then a calendar. Using a graph for the landing screen could dramatically increase the density of meaningful data, while reducing visual noise. Here are some ideas we came up with; this is merely a draft we put together to illustrate our points and to get your ideas flowing—it is not a proposal for a final design:

Budget Planner 4 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Budget Planner 5 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Budget Planner 6 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Next Steps

People love apps that help them achieve their goals. What if your app allowed users to input and compare different financial scenarios, shown through several overlaid graphs?

This capability could help users think through their options:

  • If I put my child through this private school, would I still be able to afford the Beemer I’ve always dreamed of?
  • How many hours of overtime would I need to work to be able to afford both?

These are few examples of questions that people ask themselves. If your app can help them get the answers, I think it’ll really catch on, and you’ll soon be driving a shiny new Beemer yourself.

3. Units United

“Unit conversion app, Units United. Yep, yet another one… ;) Can you please review it?

— Meils Dühnforth”

Units United 1 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

The biggest problem with almost every unit converter I have seen is that they require users to submit their query in a format that the computer (or iPhone in this case) can understand. Most unit converters force people to make double the effort to get what they want.

Consider the following scenario: you’re from the US, and you are recounting yesterday’s baseball game to your Icelandic friend. During their last at bat, the Phillies hit a 456-foot home run. Amazing! You punch the value into your unit converter app, but to get an answer you must translate the query into a format that the application understands:

  1. Go to “Categories,�
  2. Select meters for the “To� unit,
  3. Select feet for the “From� unit,
  4. Type in 456 on the number pad,
  5. Double-check that you are converting 456 feet into metres and not vice versa.

Are all these steps necessary? You just wanted to know “What is 456 feet in meters?� But you had to ask the question in robo-speak. You had to select options from a list to be understood. Good software speaks your language. Among the innumerable unit converters, only Google does it right, allowing you to ask your question in plain English:

Units United 2 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Using speech recognition technology is another good idea. Sometimes your hands aren’t free when you need to convert a unit. Say your Icelandic friend is driving on a US highway and needs to convert the 55 miles-per-hour speed limit into kilometers.

Implementing everything described above, your app might look something like this (this quick draft is meant to illustrate the point and is not a design proposal):

Units United 3 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

This application is much easier to use because there’s no more robo-talk: it doesn’t force users to browse categories and sub-categories, and it accepts questions in everyday language.

Send Your App For A Free Review!

Mobile developers are always welcome to send me their apps for a free review. Just use this form. Please remember that your content will be featured on our Crit Board, allowing developers, designers and users worldwide to join the conversation. If you prefer to speak privately about your design, please feel free to contact us directly.

(al)


© Alex Komarov for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , , ,


Finding Alternative Sources Of Typographic Layout In Our Surroundings

Smashing-magazine-advertisement in Finding Alternative Sources Of Typographic Layout In Our SurroundingsSpacer in Finding Alternative Sources Of Typographic Layout In Our Surroundings
 in Finding Alternative Sources Of Typographic Layout In Our Surroundings  in Finding Alternative Sources Of Typographic Layout In Our Surroundings  in Finding Alternative Sources Of Typographic Layout In Our Surroundings

Studying art and design usually starts with a deep exploration of elements and principles. Among these elements, the most basic ones — line, point and plane — usually figure in a work of art or design. Thus, we can abstract art and design compositions to lines, points and planes when analyzing them. Not only is this abstraction useful for understanding the structure of a composition, but it also offers new sources of layout inspiration and experimentation.

The Framework Of Sources For Typographic Layout

According to Wucius Wong in his book Principles of Form and Design (page 42), point, line and plane can be considered conceptual design elements because, although they are not always explicit or visible, they seem to be present by implication. He explains how an angle, for example, implies the existence of a point and how lines, by marking the contour of an object, imply the presence of a plane.

In most art and design classes, students are asked to analyze the structure of a painting or design in order to better understand principles of organization. These linear studies usually have no relevance to the student outside of the class. But these exercises hold an important lesson, which is about learning to abstract images — and even our surroundings — into linear structures in order to learn about layout organization.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Learning To Abstract What We See

Most of us live in a relatively static environment, whether urban or rural. Recognizing that this environment is framed by points, lines and planes will help us abstract the environment. Let’s consider a photo of an urban environment. Below is a photo of a city escape in Chicago:

Buildings1bw1 in Finding Alternative Sources Of Typographic Layout In Our Surroundings
(Photo courtesy of the Urban Studies Department, Wheaton College, Wheaton, Illinois.)

Here we have a worm’s-eye view of buildings. We can already discern interesting spatial relationships. The white space in and of it self has interesting shapes. These shapes alone give us creative ways to apply copy. Let’s see an example of how this space could be abstracted:

Abstraction in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Linear abstraction.

Here, the city escape photo has been abstracted to simple lines. The lines converge at a conceptual point. The lines enclose spaces to create a conceptual plane. Although I did not mark the plane as such, lines that converge at any four points or angles become a plane. Abstracting spaces can, of course, be done in infinite variation. There is no right or wrong. Feel free to experiment!

In looking at the linear abstraction above, we see several lines converge at a certain point, which is towards the right and a bit off center. We can call this a point of hierarchy. Let’s clean up the abstraction and take another look.

Linearabstraction2 in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Linear abstraction #2.

Now we have a cleaner and clearer version of the first abstraction, perhaps making it a bit easier to start thinking about a possible typographic layout. So, let’s experiment with type placement.

Linearabstractiontext in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Typographic layout using the linear abstraction as a grid.

As you can imagine, we could do hundreds of variations of this. We can also play with the intersection of some of the lines and points in the layout:

Linearabstraction3 in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Typographic layout using the linear abstraction as a grid and as visual punctuation.

These simple exercises in layout composition help us see how a photo of an urban landscape holds unexpected inspiration. Now, how do we use this for other applications? What if an article that we need to design does not have interesting or arresting photographs? One way to solve this is to think about the subject matter and find your own sources for inspiration.

Finding Inspiration In Your Surroundings

This is simpler than it sounds. It requires only that you be curious and get your dusty old camera out of the closet. You can find interesting shapes and arrangements in your kitchen drawer. Look out a window and study how its frame interacts with the space, or walk outside to look at the trees and branches. If you’re in the country, invite inspiration from the expansive landscape. Take photos of or sketch the most obvious linear connections you can find. If you’re in the city or suburbs, find the most obvious linear connections there. I find that buildings are an incredible source of inspiration with their strong vertical and horizontal lines.

Other sources of inspiration are people moving, dancing and exercising. Here is an example of how a photo of a dance performance inspired my design of a calendar for the Iowa State Dance Department. I used the dancers’ strong movement to the left as the basis for the calendar’s grid:

Calendarpage1 in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Dance calendar for Iowa State University Dance Program, Ames, IA, 2004
(Copyright: Alma Hoffmann)

What About Web Design?

Browser capabilities for manipulating website layouts are still a bit limited, but not for long. On some websites — The Art of the Web, for example — you can find information and sources for experimenting by rotating elements. The Art of the Web recommends downloading the Webkit nightly build for your browser. It explains that, “Webkit is the rendering engine used by Safari. The Webkit nightly build browser, then, is a preview of what’s to come in Safari and other browsers and devices that use the same engine.â€�

Few websites use text rotation because of spotty browser support. If you know of any, please share them below in the comments. So then, how can we push layouts a bit more on the Web? What kind of sources can we use for inspiration? Two come to mind: architecture and landscapes.

Architecture gives us horizontal and vertical structures and spatial divisions from which we can take cues. We can play around with it in our horizontal and vertical grids on the Web. Services such as 960 Grid System let us download grids and experiment with spacing for Web designs.

Translating landscapes to the Web by using horizontal scrolling accomplishes two things: it puts the user in control of the navigation, and it evokes an expansive panorama. Peter Pearson’s website (screenshot below) takes full advantage of horizontal scrolling. It gives us a sense of landscape through photography and in the navigation itself. A humorous touch can be found in the invitation to the user to “Let’s go that way,â€� followed by “Gaspâ€� in parentheses below:

Peterwebpabe in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Screenshot of Peter Pearson’s website.

Peterwebpabedetail in Finding Alternative Sources Of Typographic Layout In Our Surroundings
A detail of Peter Pearson’s website.

Other websites push the use of landscape by letting users choose the direction to take. Some allow us to zoom out to see where we want to go, much as we do in a natural landscape. See this example of Schematic:

Schematicwebpage in Finding Alternative Sources Of Typographic Layout In Our Surroundings

We stand before this website’s navigation much as we stand at a crossroad, choosing our direction. Allowing users to control their path engages them.

Other websites take advantage of the x-index to create a sense of depth and combine it with horizontal scrolling. In this way, the metaphor of landscape is even stronger and perhaps makes more sense, because the natural environment does have depth. The website for Fauborg (below) does both, while also providing a drop-down menu and hand icon for the horizontal scrolling:

Fauborg in Finding Alternative Sources Of Typographic Layout In Our Surroundings

Crowley, a small ad agency in New York, does not use horizontal scrolling, but rather selectively magnifies the menu and text to create perspective and depth. The arrangement has a sense of playfulness, and the user is engaged by seeking the little treasures stowed away in the links:

Crowley2 in Finding Alternative Sources Of Typographic Layout In Our Surroundings

Crowlye in Finding Alternative Sources Of Typographic Layout In Our Surroundings

Exploring Web Design With Webkit

The ability to rotate text opens yet more possibilities for layout design on the Web. Browser support is still inconsistent but catching up to newer coding capabilities, such as HTML5, which allows for three-dimensional effects, and Webkit. With Webkit, I attempted to reproduce the layout discussed at the beginning of this article. Here is the original:

Linearabstractiontext in Finding Alternative Sources Of Typographic Layout In Our Surroundings

Below are screenshots of my experimentation with code and Webkit to reproduce the text rotation. Close, but not quite the same. The angles require just the right coding combination, because one block will inherit the values of the one above it.

Textrotation21 in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Text rotation using Webkit. (Alma Hoffmann © 2010.)

Here is another example in which the title is rotated in the opposite direction of the title in the original layout:

Textrotation in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Text rotation #2 using Webkit. (Alma Hoffmann © 2010.)

Conclusion

Abstracting the structures, spaces and people around us into simple line structures gives us infinite layout possibilities that can be applied to print and Web design. As technology keeps advancing and browser support continues to grow, Web design layout will continue to be more experimental and less restricted to horizontal and vertical alignments. As in the print industry, Web technology will continue to grow to accommodate more and more experimental layouts. These possibilities will offer designers more freedom and versatility. However, design essentials — such as learning to analyze composition and to abstract spaces — remain vital to our ability to translate the three-dimensional world in two dimensions, and vice versa.

References

(al)


© Alma Hoffmann for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress