Tag: Inspiration

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.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

…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. José Rivera

José is a very active member of the FireworksGuru forum and he also runs a personal blog dedicated to Fireworks. You can also check his deviantart profile.

{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, José Rivera 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: , , ,


Eye-Candy For The Weekend: Particle Animation Music Videos

Smashing-magazine-advertisement in Eye-Candy For The Weekend: Particle Animation Music VideosSpacer in Eye-Candy For The Weekend: Particle Animation Music Videos
 in Eye-Candy For The Weekend: Particle Animation Music Videos  in Eye-Candy For The Weekend: Particle Animation Music Videos  in Eye-Candy For The Weekend: Particle Animation Music Videos

Just like a couple of weeks ago, this weekend again we’ve got something unusual and creative to lift up your spirits and challenge your creativity over a lousy Sunday. Particle animation is a beautiful concept from motion graphics. Using specialized software, you can simulate the movements of particles depending on the environment — for instance, music rhythm.

In today’s post we present selected particle animation music videos. Be prepared: the page may take a while to load. Please make sure to visit the sources of videos to enjoy the viewing experience in HD, and don’t forget to turn on your hi-fi-system. We also feature some tutorials in the end of this post: and here you go — now you have something fun to do over the weekend!

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Beautiful Particle Animation Videos

Max TV Color Artist

Fire Flower by Pierre Michel

Procedural Particles from Matthias Müller

Audio visual Halo

We Own The Sky

Solar, with lyrics.

Vestige – Siggraph CAF 2009 Opening version

VITAL “Airport”

Particle Garden

Particle Objects

Particle Monster

Let yourself feel

SPIRE / Corporate Identity Launch Video

Particle art

Weird Fishes: Arpeggi

The stars are projectors

Red Smoke – Particle animation to Music

Particle Visualisation

Particle Playground

Tutorials and Further Resources

Particle Animation to Music
This tutorial is a detailed example of visualizing music through the formation of particles.

Extensive Guide For Particle Animation
An extensive guide for working with Trapcode Suite to generate videos with animated particles.

Solar, with lyrics
This tutorial will lead you to the process of particle animation created with Processing, audio by Goldfrapp.

How To Create A Surreal Outer Space Nebula
An impressive tutorial on creating a surreal outer space nebula provides you with the details regarding particle animation synchronized with music.

Particle Explosion
In this tutorial you will learn how to build a complex particle system using CC Particle World and Synchronize the particle blast to shatter a title.

Building Up Particles
This tutorial demonstrates the creation process of particles to simulate a disintegrating hot air balloon using Trapcode Particular and Adobe After Effects.

Make a Particle Explosion Effect
The author of this tutorial has broken down the process of developing an in-game particle effect into a series of steps. This technique is mostly used for a particle explosion effect in a video game.

Trapcode Gallery on Vimeo
A user-submitted gallery of videos created with Trapcode Suite.

iPhone App – Magnetosphere
This iPhone app helps you create particle animation easily.

Particle Animation Software
A detailed overview of various particle animation applications, with ratings, reviews and screenshots.

Last Click

Particle collection
A remarkable collection of various particle animation effects from Matthias Müller.

Would you like to see more similar posts on SM on weekends?



© Bhanu Ahluwalia 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: , , , ,


The Ugly Showcase of Military, Intelligence And Defense Websites

Smashing-magazine-advertisement in The Ugly Showcase of Military, Intelligence And Defense Websites
 in The Ugly Showcase of Military, Intelligence And Defense Websites  in The Ugly Showcase of Military, Intelligence And Defense Websites  in The Ugly Showcase of Military, Intelligence And Defense Websites

Members of military and intelligence forces around the world risk their lives daily to defend their countries and assist in peacekeeping and aid missions both at home and abroad. The men and women who make up the world’s defense forces make sacrifices that most civilians wouldn’t consider to serve their countries.

So, with everything they do for us, shouldn’t they be represented online by website designs that reflect the honor and responsibility they undertake every day? Unfortunately, that’s not the case in many countries out there. Many military websites out there are some of the worst designs in any industry. Whether they’re outdated, broken or designed by amateurs, some of the websites showcased below are bad enough to make you cringe.

There are some good ones, though. A number of countries have obviously dedicated the time and resources necessary to project a professional and polished Web presence for their members. A number of other websites have obviously put in some effort and are pretty close. If you know of examples of other great military or intelligence websites from around the world, please add them in the comments!

[Offtopic: by the way, have you ever visited Smashing Magazine's List of tags? There might be something interesting for you.]

The Outdated

The websites featured here might have looked great 10 or more years ago (which was likely when they were created). But either their designs haven’t been updated in a very long time or their designers are still borrowing conventions from the late ’90s.

Ministry of Defense of the Republic of Argentina
Everything from the color scheme to the header image to the skinny three-column layout dates this design.

Argentinamod in The Ugly Showcase of Military, Intelligence And Defense Websites

Royal Bahamas Defence Force
This website wouldn’t look quite so dated if it weren’t for the drop-shadows behind the content blocks.

Bahamasdefenceforce in The Ugly Showcase of Military, Intelligence And Defense Websites

Bolivian and Venzuelan Ministry of Defence
The overall layout of this website screams early-2000s.

Venezuelamod in The Ugly Showcase of Military, Intelligence And Defense Websites

Ministry of Defence of the Republic of Belarus
Very minimalistic website with a solid background, gradients, tiny links and many &nbsp-empty spaces.

Belarus in The Ugly Showcase of Military, Intelligence And Defense Websites

Colombian National Police
Here’s another great example of a website that would have looked right at home in the late ’90s or early 2000s.

Colombiannp in The Ugly Showcase of Military, Intelligence And Defense Websites

Hellenic Navy
The thing that dates this website the most is its width: it would look right at home on a screen with a resolution of 800×600.

Greeknavy in The Ugly Showcase of Military, Intelligence And Defense Websites

Macedonian Ministry of Defence
The layout, the partially rounded corners and the drop-shadow against the background all date this website.

Macedonianmod in The Ugly Showcase of Military, Intelligence And Defense Websites

Pakistan Maritime Security Agency
Using an image like this one as a background was very popular in the ’90s.

Pakistanmsa in The Ugly Showcase of Military, Intelligence And Defense Websites

Serbian Ministry of Defense
The layout here is almost grid-like, but it doesn’t quite make it. The color scheme is the most outdated, though.

Serbianmod in The Ugly Showcase of Military, Intelligence And Defense Websites

Slovenian Armed Forces
Another website that would have been current 8 to 10 years ago.

Slovenianaf in The Ugly Showcase of Military, Intelligence And Defense Websites

Spanish Armada
The rounded colors and glossy buttons would have looked great a few years ago, but now they just harken back to the earliest days of the Web 2.0 style.

Spanisharmada in The Ugly Showcase of Military, Intelligence And Defense Websites

The Russian Federation Ministry of Defence
The design has a striking resemblance to traditional Google AdSense blocks, and the line-height property for the content area certainly should be increased..

Russia in The Ugly Showcase of Military, Intelligence And Defense Websites

Sri Lanka Ministry of Defence
The color scheme and typography here are definitely reminiscent of Web design 5 to 10 years ago.

Srilankamod in The Ugly Showcase of Military, Intelligence And Defense Websites

U.S. Federal Bureau of Investigation
The skinny layout, color scheme and overall look of this website feel at least 6 to 7 years old.

Usfbi in The Ugly Showcase of Military, Intelligence And Defense Websites

U.S. National Reconnaissance Office
This website screams late ’90s and early 2000s, especially the navigation and typography.

Usnro in The Ugly Showcase of Military, Intelligence And Defense Websites

Uruguayan Air Force
This looks like it was based on a standard template from 5 to 10 years ago.

Uruguayanairforce in The Ugly Showcase of Military, Intelligence And Defense Websites

The Poorly Coded

These websites might not have been so bad if they were cross-browser compatible and adhered to Web standards even a little. But they are all so poorly coded that they don’t render correctly in browsers such as Firefox or Safari.

Luckily, there aren’t too many of them.

Brazilian Army
The coding on this website isn’t noticeably horrible… except for all the thin white lines running through the backgrounds and borders of the content blocks.

Brazilianarmy in The Ugly Showcase of Military, Intelligence And Defense Websites

Pakistan Navy
I don’t even want to begin figuring out how they got the rounded-corner background to repeat like that in the main content area.

Pakistannavy in The Ugly Showcase of Military, Intelligence And Defense Websites

South African Army
This website wouldn’t be so bad if it wasn’t for the giant gray bar running down the main column, effectively blocking half the content.

Southafricanarmy in The Ugly Showcase of Military, Intelligence And Defense Websites

United States Special Operations Command
The headers for all the content blocks here are fine, except the one for the news feeds, which prefers to be higher up on the page.

Ussocom in The Ugly Showcase of Military, Intelligence And Defense Websites

The Poorly Designed

These websites are just poorly designed. Some look like they were based on stock templates… bad ones. Others look like they were designed in programs aimed at hobbyists or those needing to set up personal websites (in any case, definitely not appropriate for government agencies).

Bolivian Army
Between the color scheme, the header (which doesn’t come close to spanning the whole design) and the broken icons, this website just doesn’t look good at all.

Bolivianarmy in The Ugly Showcase of Military, Intelligence And Defense Websites

Cuban National Defence
I’m not sure where to begin with this one…

Cubannd in The Ugly Showcase of Military, Intelligence And Defense Websites

Egyptian Armed Forces
It looks like they couldn’t decide whether they wanted a minimalist website.

Egyptianaf in The Ugly Showcase of Military, Intelligence And Defense Websites

Republic of Fiji Military Forces
This looks like your classic template website, with minor modifications.

Fijimilitaryforces in The Ugly Showcase of Military, Intelligence And Defense Websites

Ministry of Defence of Georgia
This wouldn’t be so bad if the content areas weren’t so disjointed.

Georgiamod in The Ugly Showcase of Military, Intelligence And Defense Websites

Indian Air Force
This might have been salvageable, except for the horrible alignment.

Indianaf in The Ugly Showcase of Military, Intelligence And Defense Websites

Kenyan National Security Intelligence Service
The padding and margins in this website aren’t adequate, and the alignment is off in places. The concept is sound; it just needs to be better executed.

Kenyannsis in The Ugly Showcase of Military, Intelligence And Defense Websites

Lebanese Army
This website might not have been so bad if the colors complemented the camouflage background, rather than clashed with it.

Lebanesearmy in The Ugly Showcase of Military, Intelligence And Defense Websites

The Philippine Marine Corps
This is another one for which I’m not even sure where to start.

Philippinemarines in The Ugly Showcase of Military, Intelligence And Defense Websites

Polish Land Forces
Forget for a moment how amateurish this one looks. Notice how the text doesn’t even match up with the navigation buttons.

Polishlandforces in The Ugly Showcase of Military, Intelligence And Defense Websites

Portuguese Army
From the header alone, it’s not so bad. It’s the lower area of this website that doesn’t seem to have any aim.

Portuguesearmy in The Ugly Showcase of Military, Intelligence And Defense Websites

Romanian Land Forces
I’m still trying to figure out if that white bar across the top of each column is supposed to be there. Beyond that, they should have paid more attention to how the header colors go with the rest of the color scheme.

Romanianlandforces in The Ugly Showcase of Military, Intelligence And Defense Websites

Royal Thai Army
There’s just way too much going on here, and no focal point to grab your attention.

Royalthaiarmy in The Ugly Showcase of Military, Intelligence And Defense Websites

Turkish Air Force
This almost made it into the “Not So Bad” category below, except that it doesn’t have any focus, and the alignment of some elements is off.

Turkishairforce in The Ugly Showcase of Military, Intelligence And Defense Websites

Ministry of Defence of Ukraine
The ads on this website should be better integrated in the overall design. Other than that, the design looks very dated.

Modukraine in The Ugly Showcase of Military, Intelligence And Defense Websites

United Arab Emirates Ministry of Defence
Where’s the content?

Uaemod in The Ugly Showcase of Military, Intelligence And Defense Websites

Zimbabwe Ministry of Defence
There’s no color scheme here, and the entire thing looks like something a kid did in class.

Zimbabwemod in The Ugly Showcase of Military, Intelligence And Defense Websites

The Not-So-Bad

The websites here aren’t terrible. In most cases, only minor things hold them back. Most of them could be great with just a bit more work.

Ministry of Defence of The Republic of Armenia
Other than the width of this website (which is a bit narrow for even an 800 x 600 display), it’s not a terrible design.

Armeniamod in The Ugly Showcase of Military, Intelligence And Defense Websites

Australian Secret Intelligence Service
This design is just fine, other than being a bit boring. And the text could be slightly enlarged for easier reading.

Australiansis in The Ugly Showcase of Military, Intelligence And Defense Websites

Ministry of Defense of Bosnia and Herzegovina
If more attention was paid to the baseline or vertical rhythm, this would be a reasonably good design.

Bosniamod in The Ugly Showcase of Military, Intelligence And Defense Websites

British Secret Intelligence Service
The angles in this design should either be better incorporated into the other elements or removed altogether. Other than that, it’s not bad.

Britishsis in The Ugly Showcase of Military, Intelligence And Defense Websites

Brundeswehr
This is one of those websites that doesn’t have anything particularly wrong with it. It’s just underwhelming.

Brundeswehr in The Ugly Showcase of Military, Intelligence And Defense Websites

Ministry of National Defense of the People’s Republic of China
The elements on this website don’t quite have enough continuity, but the color scheme and overall layout are good.

Chinamond in The Ugly Showcase of Military, Intelligence And Defense Websites

Ministry of Defence of the Republic of Croatia
This website is also underwhelming. Nothing particularly “wrong” with it, but not impressive either.

Croatiamod in The Ugly Showcase of Military, Intelligence And Defense Websites

Ecuadorian Army
The header here is great, but the rest of the website doesn’t quite match up, and it feels a bit like a generic template.

Ecuadorianarmy in The Ugly Showcase of Military, Intelligence And Defense Websites

Ecuadorian Navy
Parts of this website are great (the slidehow in the header, for instance) but other parts don’t quite match up, particularly the buttons on the right-hand side and the off-center navigation elements.

Ecuadoriannavy in The Ugly Showcase of Military, Intelligence And Defense Websites

Armed Forces of Honduras
This website isn’t bad. But again, nothing makes it stand out.

Hondurasaf in The Ugly Showcase of Military, Intelligence And Defense Websites

Norwegian Ministry of Defense
Another example of a website that doesn’t do anything to stand out.

Norwegianmod in The Ugly Showcase of Military, Intelligence And Defense Websites

Peruvian Air Force
The idea here is good, but the result isn’t very interesting.

Peruaf in The Ugly Showcase of Military, Intelligence And Defense Websites

Portuguese Ministry of Defense
Another inoffensive yet unimpressive website.

Portugalmod in The Ugly Showcase of Military, Intelligence And Defense Websites

Portuguese Navy
This would be great, but it has just a little too much going on. Some negative space would make a huge difference.

Portuguesenavy in The Ugly Showcase of Military, Intelligence And Defense Websites

Saudi Arabian Ground Forces
This website is more interesting than some of the others here, but it doesn’t quite pull it together.

Saudiarabiangroundforces in The Ugly Showcase of Military, Intelligence And Defense Websites

Sri Lanka Navy
Here’s another website that looks like a template. The use of white space could be better and makes everything look a bit disjointed.

Srilankanavy in The Ugly Showcase of Military, Intelligence And Defense Websites

Swiss Army
Another underwhelming, uninteresting design. At least it looks professional.

Swissarmy in The Ugly Showcase of Military, Intelligence And Defense Websites

US Air Force
A professional yet boring design. But maybe that’s how military websites should look?

Usairforce in The Ugly Showcase of Military, Intelligence And Defense Websites

US Central Intelligence Agency
This website is way too narrow, and overall it’s just not eye-catching.

Uscia in The Ugly Showcase of Military, Intelligence And Defense Websites

US Department of Defense
Too much is going on here, and the social media links (the icons especially) on the left look out of place.

Usdod in The Ugly Showcase of Military, Intelligence And Defense Websites

US Navy
The icons and banners in the header don’t really fit the rest of this design.

Usnavy in The Ugly Showcase of Military, Intelligence And Defense Websites

A Few Good Sites

The websites below are the stars of this post. They are well designed, easy to use, professional and worthy of representing the armed forces and intelligence services.

Austrian Armed Forces
This one’s clean and well laid out, with plenty of white space and a great color scheme.

Austrianaf in The Ugly Showcase of Military, Intelligence And Defense Websites

British Army
A professional-looking website, with a background that’s more interesting than most.

Britisharmy in The Ugly Showcase of Military, Intelligence And Defense Websites

British Royal Air Force
Another website with an interesting background and a clean overall design.

Britishraf in The Ugly Showcase of Military, Intelligence And Defense Websites

British Security Service MI5
The color scheme here is great, as is the overall aesthetic, which is a cross between minimalist and magazine-style.

Mi5 in The Ugly Showcase of Military, Intelligence And Defense Websites

Ministry of Defence of the Republic of Bulgaria
A clean, well thought out design that makes good use of textures and gradients.

Bulgariamod in The Ugly Showcase of Military, Intelligence And Defense Websites

Chilean Navy
The header here is fantastic, and the rest of the layout works well.

Chileannavy in The Ugly Showcase of Military, Intelligence And Defense Websites

Ministry of Defence and Armed Forces of the Czech Republic
Another great header design: this one doubles as navigation. Each section of the website has a different color scheme, while maintaining the same basic look.

Czechmod in The Ugly Showcase of Military, Intelligence And Defense Websites

Defence Command Denmark
A minimalist layout that leaves plenty of white space.

Defencecommanddenmark in The Ugly Showcase of Military, Intelligence And Defense Websites

The Finnish Defense Forces
A clean and organized design, with double-tabbed navigation bars.

Finnishdf in The Ugly Showcase of Military, Intelligence And Defense Websites

Netherlands Ministry of Defence
The purple color scheme here is unexpected, but it works well and sets the website apart.

Netherlandsmod in The Ugly Showcase of Military, Intelligence And Defense Websites

Polish Ministry of National Defense
This is one of the nicest designs in this post, especially because of the header.

Polishmond in The Ugly Showcase of Military, Intelligence And Defense Websites

Swedish Armed Forces
A good clean design with a minimalist aesthetic and great typography. The transparent titles over the images on the right really take it up a notch.

Swedishaf in The Ugly Showcase of Military, Intelligence And Defense Websites

US National Security Agency
Professional, easy to use and coherent: everything an intelligence website should be.

Usnsa in The Ugly Showcase of Military, Intelligence And Defense Websites

US Army
The US Army website brings together a lot of content of various types while maintaining a usable and consistent user interface.

Usarmy in The Ugly Showcase of Military, Intelligence And Defense Websites

US Marine Corps
This website stands out mostly because of the grid used for the main content area and the ample white space everywhere else.

Usmarines in The Ugly Showcase of Military, Intelligence And Defense Websites

(al)


© Cameron Chapman 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:


Fantastic Roach Paper Art by Cliff Maynard

Advertisement in Fantastic Roach Paper Art by Cliff Maynard
 in Fantastic Roach Paper Art by Cliff Maynard  in Fantastic Roach Paper Art by Cliff Maynard  in Fantastic Roach Paper Art by Cliff Maynard

Cliff Maynard is a 38 year old male artist from Pittsburgh, United States. He is a maestro in Chronic Art, or — to be more specific — Roach Paper Art. Unusual but true, he uses unrolled roaches for his designs. His work is very original because his concept is unique and he has experimented with portraits from Jesus Christ to Bob Marley. The result is truly remarkable. Maybe that’s the reason why his art work always seizes attention. You can find more information about the artist and his work on Cliff Maynard’s website.

Roach Paper Art

Bob Marley

Bobmarley in Fantastic Roach Paper Art by Cliff Maynard

Jimi Hendrix

Jimmyhendrix in Fantastic Roach Paper Art by Cliff Maynard

Creation

Creation in Fantastic Roach Paper Art by Cliff Maynard

Seattle Hempfest

Seattlehempfest in Fantastic Roach Paper Art by Cliff Maynard

Jack Herer……The Hemperor

Jackherer-the-hemperor in Fantastic Roach Paper Art by Cliff Maynard

Cheech & Chong

Cheech-chong in Fantastic Roach Paper Art by Cliff Maynard

Jesus Christ

Jesus-christ in Fantastic Roach Paper Art by Cliff Maynard

Jim Morrison

Jim-morrison in Fantastic Roach Paper Art by Cliff Maynard

Fossil

Fossle in Fantastic Roach Paper Art by Cliff Maynard

Jerry Garcia

Jerry in Fantastic Roach Paper Art by Cliff Maynard

Addiction

Addiction in Fantastic Roach Paper Art by Cliff Maynard

John Lennon

Johnlennon in Fantastic Roach Paper Art by Cliff Maynard

Snoop Dog

Snoopdogg in Fantastic Roach Paper Art by Cliff Maynard

Method Man

Methodman in Fantastic Roach Paper Art by Cliff Maynard

Sacred Heart

Sacredheart in Fantastic Roach Paper Art by Cliff Maynard

Sativa

Sativa in Fantastic Roach Paper Art by Cliff Maynard

All images presented in this post were given permission to be published by the artist himself.


Showcase Of Big Online Stores

Advertisement in Showcase Of Big Online Stores
 in Showcase Of Big Online Stores  in Showcase Of Big Online Stores  in Showcase Of Big Online Stores

By Tomas Laurinavicius

The main task of any store is to sell its products, so there is an important usability and user experience factor, making conversion rates and selling figures a primary consideration. However, marketing objectives often tend to conflict with design goals which way too often results in clumsy, overcrowded and busy e-commerce websites.

For this article, we researched current design patterns among the biggest and most popular online stores as well lesser known but professional outfits. The showcase below may not be very pretty, and we do not know how effective in terms of conversion rates they are, but because they exist, it is very likely to assume that they work one way or another.

Below, you’ll find 40+ online stores, with short observations on their design and usability. We hope this list helps you better understand the world of online shopping.

Content Sliders

Content sliders, also called slideshows or carousels, allow designers to squeeze more content into a block without cluttering space. They are also interactive.

Staples
Staples has a lot of white space and red accents. This store stands out for the unusual location of its navigation: the menu for its main products is in the left sidebar.

43-large-shopping-houses in Showcase Of Big Online Stores

DealExtreme
DealExtreme uses mainly orange and blue in its design. All products appear with a short overview of the essential information.

41-large-shopping-houses in Showcase Of Big Online Stores

Target.com
Target is an American retail company founded in Minneapolis, Minnesota, in 1902 as the Dayton Dry Goods Company. Target is the second-largest discount retailer in the US behind Walmart. Its design is very minimalist: a lot of white space and emphasis on big pictures.

21-large-shopping-houses in Showcase Of Big Online Stores

HSN.com
The Home Shopping Network is a 24-hour basic cable shopping network that is accessible on cable, satellite and some terrestrial channels in the US. The company also operates HSN.com, an e-commerce operation. Its design is simple and colorful. On the main page is a big slider with pictures and special offers. To help you find what you want, HSN offers horizontal drop-down navigation at the top.

19-large-shopping-houses in Showcase Of Big Online Stores

Very
Very.co.uk has a dark background with its logo repeated. We also get a big slider with the latest offers.

12-large-shopping-houses in Showcase Of Big Online Stores

Puma Online Shop
Puma has some good design elements such as white space, large images and contrast. The modern drop-down navigation at the top makes it easy to find what you’re looking for.

10-large-shopping-houses in Showcase Of Big Online Stores

Real.de
Real.de looks refreshing and catchy with its variations of blue. The easy modern navigation at the top and the slider on the home page beckon the user to take action.

09-large-shopping-houses in Showcase Of Big Online Stores

Play.com
Play.com is an online retailer of DVDs, CDs, books, gadgets, video games, DRM-free MP3 downloads and other electronic products, as well as clothes and accessories. It has a very colorful and playful layout. Two colors dominate: blue in the logo and horizontal navigation (on hover), and orange also in the logo and in the product names and top navigation. The “Shopping Basket” is set off in light green.

05-large-shopping-houses in Showcase Of Big Online Stores

Simplicity

The philosophy less is more is also followed by online stores. Simplicity done well highlights products and make them more attractive. It also creates contrast between less important and more important products.

ShopNBC
ShopNBC uses white space and gray gradients to make its design simple and easy to navigate.

42-large-shopping-houses in Showcase Of Big Online Stores

Liverpool
Liverpool uses an extremely slim layout and a playful pink and white combination. Liverpool demonstrates that less is more while remaining professional.

48-large-shopping-houses in Showcase Of Big Online Stores

Ozon.ru
Ozon.ru is light and simple. Browsing products is easy, but the small font sizes make it a little confusing.

47-large-shopping-houses in Showcase Of Big Online Stores

Ashford
Ashford looks elegant and projects a high-end image. The simple silver, white and red keep the design tasteful.

40-large-shopping-houses in Showcase Of Big Online Stores

Overstock
Overstock has a clean and simple layout, similar to that of Tesco. At the top is a big search field that lets users easily find the search options.

24-large-shopping-houses in Showcase Of Big Online Stores

Next
Next has a dark layout with big pictures. For a fashion store, its layout is clean and elegant.

22-large-shopping-houses in Showcase Of Big Online Stores

Dean & Deluca
Dean & Deluca is different than the other online stores here, with its unusual fonts and subtle dark-green and white combination.

15-large-shopping-houses in Showcase Of Big Online Stores

NBA Store
This layout retains the NBA’s three essential colors: white, red and blue. One can find a lot of team logos. The store is easy to navigate, thanks to the drop-down navigation at the top and the useful menu on the left.

13-large-shopping-houses in Showcase Of Big Online Stores

Argos
Argos is the largest general goods retailer in the UK, with 750 stores. It is unique among major retailers in the UK because it promotes goods to customers primarily through its catalogue.

11-large-shopping-houses in Showcase Of Big Online Stores

Rounded Corners… Again

Good or bad: rounded corners are still popular and are used for an attractive and playful look. They are friendlier and less aggressive than sharp rectangles. Almost all stores use more than one color on rounded-corner elements.

eForCity
eForCity has bright fresh colors—orange, light green and blue—which help customers easily find darker-colored products.

39-large-shopping-houses in Showcase Of Big Online Stores

Dial a Phone
Dial a Phone’s layout is colorful and confusing. A lot of offers are shown, and each of them is in a different color.

29-large-shopping-houses in Showcase Of Big Online Stores

eToys.com
eToys’ layout is playful and reminds one of childhood with its red and blue combination. Toys are shown without ads or special offers—just the essential information.

25-large-shopping-houses in Showcase Of Big Online Stores

QVC.com
QVC is a multi-national corporation that specializes in television home shopping. Its name stands for quality, value and convenience, the three pillars of the company’s vision. QVC uses big font size at the top for its navigation and a breadcrumb, helping users find what they want.

20-large-shopping-houses in Showcase Of Big Online Stores

Lidl
Lidl is similar to ALDI (mentioned below) with its red, green and yellow combination. Lidl differs with its rounded corners and darker background.

17-large-shopping-houses in Showcase Of Big Online Stores

Pixmania
Pixmania is a pan-European e-tailer of digital photography and consumer electronic goods. Pixmania has a colorful layout and broad category list, to the point of looking a bit confusing.

07-large-shopping-houses in Showcase Of Big Online Stores

Walmart
Walmart is a US-based chain of large discount department stores. It is the world’s largest publicly incorporated company by revenue, according to Fortune Global 500’s 2008 report. Walmart’s online layout is slim compared to that of the other big online stores, which is good if the user is on a lower-resolution browser. Walmart also has breadcrumbs at the top, helping users remember where they are.

02-large-shopping-houses in Showcase Of Big Online Stores

Portals

E-commerce portals are the most common design trend among e-commerce websites today. Shops are using a two or more columns layout, colorful illustrations, sliders and big navigation menus to make shopping online more easier.

ALDI
ALDI has subtle gradients and a simple layout. Clients can easily find what they’re looking for using the simple navigation at the top.

04-large-shopping-houses in Showcase Of Big Online Stores

REWE
REWE stands out with its beautiful background and catchy product illustrations. The call-to-action buttons make this store really impressive.

06-large-shopping-houses in Showcase Of Big Online Stores

Pigu.lt
Pigu.lt is the biggest online store in Lithuania. The layout is in a Web 2.0 style, with a lot of white space. The left sidebar is a little confusing, and the information is bit too much.

14-large-shopping-houses in Showcase Of Big Online Stores

ASOS.com
ASOS is the UK’s largest online-only fashion and beauty store. Aimed at 16 to 34 year olds, it offers over 19,500 own-label and branded fashion goods. The design is minimalist and clean.

16-large-shopping-houses in Showcase Of Big Online Stores

Zappos
Zappos is an online shoe and clothing store. It stands out with its “alphabetical brand index” navigation at the top and big footer.

18-large-shopping-houses in Showcase Of Big Online Stores

Tesco
Tesco stands out from other stores with its unusual navigation. The design is clean and easy to navigate. The images in the navigation help users find what they want fast.

23-large-shopping-houses in Showcase Of Big Online Stores

Macy’s
Macy’s design is minimalist. The small font size is risky because it takes longer to notice the links.

26-large-shopping-houses in Showcase Of Big Online Stores

Comet
Comet’s design is fresh because of the dominant yellow. The layout is wide, allowing the company to display more information about its products.

27-large-shopping-houses in Showcase Of Big Online Stores

Karstadt
Arcandor AG (formerly KarstadtQuelle AG) is a holding company located in Essen, Germany that oversees companies involved in mail order and Internet shopping, department stores and tourism services. Arcandor has a big slider on its home page to display special offers. The header has a city landscape, making this store stand out from the crowd.

28-large-shopping-houses in Showcase Of Big Online Stores

Best Buy
Best Buy’s layout is slim and colorful. Everything looks good, except the sometimes annoying advertisement at the top.

30-large-shopping-houses in Showcase Of Big Online Stores

Carphone Warehouse
This layout is clean and has a lot of white space. The breadcrumb at the top lets users know where they are.

31-large-shopping-houses in Showcase Of Big Online Stores

Zazzle
Zazzle has a dark header that highlights the navigation and creates contrast. Essential information is contained in the dark header, and products are shown against a light background to make them pop.

32-large-shopping-houses in Showcase Of Big Online Stores

Buy.com
Buy.com’s layout is simple and clean. Effective use of white space and good product pictures make for a simple and professional look.

33-large-shopping-houses in Showcase Of Big Online Stores

Eastbay
This layout looks a bit confusing with its small details and busy colors. Its strengths are the modern sliders and lightboxes.

34-large-shopping-houses in Showcase Of Big Online Stores

Sears
Sears looks fresh and clean. Web 2.0 colors, a wide layout and white space makes this store easy to navigate.

35-large-shopping-houses in Showcase Of Big Online Stores

Shoes.com
Shoes.com effectively uses slab fonts and fresh colors like pink, light blue, orange and green. The simple and minimalist navigation at the top is functional and easy to use.

36-large-shopping-houses in Showcase Of Big Online Stores

Onlineshoes.com
Compared to Shoes.com, the color scheme for Onlineshoes.com is similar, but with a dominant orange. The store stands out for its unusual left alignment.

37-large-shopping-houses in Showcase Of Big Online Stores

Currys
Red and blue dominate this design. Currys uses Web 2.0-style navigation at the top and various sliders.

38-large-shopping-houses in Showcase Of Big Online Stores

Office Depot
Office Depot is similar to Staples in its use of white and red, but different in its placement of the navigation and search field.

44-large-shopping-houses in Showcase Of Big Online Stores

NikeStore
NikeStore is a leading online store. Subtle colors, contrast, beautiful typography and Flash elements make you feel that you’re in right place.

45-large-shopping-houses in Showcase Of Big Online Stores

Newegg.com
Newegg uses blue and light orange as its main colors. The wide layout keeps the page from looking overloaded, letting users find products easily.

46-large-shopping-houses in Showcase Of Big Online Stores

Further Resources

Here are some other articles and resources related to e-commerce:

(al)

About the author

Tomas Laurinavicius is a design blogger from Lithuania. He’s interested in web/graphic design, Photoshop, WordPress and social media. He runs a design blog called WebDesignFan. You can follow him on Twitter.


  • Sponsored Links

  • May 2013
    M T W T F S S
    « Apr    
     12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
  • .

    Copyright © 1996-2010 Answer My Query. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress