Njwebdesignfirm's Blog

Finding Alternative Sources Of Typographic Layout In Our Surroundings

njwebdesignfirm — Sun, 19 Sep 2010 21:36:00 +0000

Finding Alternative Sources Of Typographic Layout In Our Surroundings

via Smashing Magazine Feed by Alma Hoffmann on 9/15/10

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 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.]

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:

(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:

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.

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.

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:

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:

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:

Screenshot of Peter Pearson’s website.

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:

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:

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:

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:

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.

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

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

Jonathan Snook, author and Web designer and developer
The Art of the Web
Greg Dizzia, creative director of Daricca Group
Stage Six Project In Progress Project
Jeff Waymire, senior software engineer at SoftVu LLC
Wucius Wong, Principles of Form and Design, Wiley, 1993

(al)

iPhone App Designs Reviewed: Critique Board and Lessons Learned

njwebdesignfirm — Sun, 19 Sep 2010 21:35:31 +0000

iPhone App Designs Reviewed: Critique Board and Lessons Learned

via Smashing Magazine Feed by Alex Komarov on 9/16/10

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.

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”

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:

To record what food they consume,
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.

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.

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.

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:

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:

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:

Users input their monthly salary info and plug in their fixed monthly expenses (utilities, phone, car payment, etc).
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.

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:

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:

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”

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:

Go to “Categories,”
Select meters for the “To” unit,
Select feet for the “From” unit,
Type in 456 on the number pad,
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:

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):

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)
Tweet

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

njwebdesignfirm — Sun, 19 Sep 2010 21:35:04 +0000

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

via Smashing Magazine Feed by Michel Bozgounov on 9/17/10

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 #1 is Professional Web Design, 242 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?

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

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

{02} Quartz Watches illustration

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

{04} 20 Things Worth Knowing About Beer

{05} How a Web Design Goes Straight to Hell

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

{07} Duck in Coffee illustration

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

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

{10} XD Beet poster

{11} XD Mackerel poster

{12} XD Salad poster

{13} XD Brownbag poster

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

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

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

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

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

“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

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

{20} DCP4 Fireworks illustration

“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

“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

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

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

{24} Light Effects illustration

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

{25} The Abduzeetles Rockband website design

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

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

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

{28} iCry illustration

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

{29} TakeOFF illustration

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

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

{31} Cadillac illustration

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

{32} Mercedes SLA concept car illustration

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

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

{35} Sealife illustration

{36} Longboard illustration

{37} Surprise illustration

{38} Darth Android illustration

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

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

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

{41} Candle illustration

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

{42} Dragon shield illustration

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

{43} Iron Man 2 helmet illustration

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

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

{45} Apple remotes illustration

Created in Fireworks CS4, all vectors (aaaa

Showcase Of Web Design In The Arab World

njwebdesignfirm — Sun, 19 Sep 2010 21:33:52 +0000

Showcase Of Web Design In The Arab World

via Smashing Magazine Feed by Otba Mushaweh on 9/19/10

Sand, magic carpets, Islamic art, Mecca, turban, luxury, camels, incense, Ali Baba and the 40 Thieves, arabesque art and cous cous are just a few of the images that spring to mind when thinking Arab world. But there is actually a misconception of what is the ‘Arab world’. Most often the ‘Arab world’ is thought of as solely the Middle East. The Middle East however is only the geographical area defined by the lands between Egypt and south-west Asia. The Arab world is much much larger. The geographical expanse of the Arab world reaches far wider when it is correctly defined by countries which are Arabic speaking.

That is to say, the Arabic language is the defining element of the ‘Arab world’. In total, the Arab world includes 25 countries and territories with a combined population of more than 358 million. This expanse stretches from the west coast of northern Africa (Mauritania, Western Sahara, Morocco, Algeria etc) across to Qatar, Oman and the United Arab Emirates in the Middle East.

The history of this expansive region is so deep that it is foolhardy to skim over how the past has influenced art and hence inspired, to a degree, modern web design. For example, Islam, the predominant religion of the Arab world, laid the ground stones for Islamic Art. One of the major reasons that Islamic art is rich in patterns and ‘arabesque’ repetition of forms such as geometrical floral designs is because it is feared by many Muslims that the depiction of the human form is idolatry and thereby a sin against Allah, forbidden in the Qur’an.

This denial of figurative art made way for powerful Arabic calligraphy and abstract depictions. Major outlets for artistic expression can be found in architecture, Arabic scripts, paintings and ceramics where intricate patterns adorn.

[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.]

So Old Yet So Very Young

A wealth of history but web design still ‘immature’

With this wealth of calligraphic design for inspiration and the unity of the Arabic language defining the Arab world, one would assume that strong typographic design in the Arab web design world is abundant and advanced. But on the contrary. One sad reality about this rich script-based culture is that the web has failed to deliver enough support for Arabic fonts. That is until recent advances in Internet browser support. There are reportedly very few trusted and faithful fonts that allow for really beautiful typographical-based Arabic web designs. Tahoma is the number-one used font – it is available in Latin and Arabic.

Historical inspiration: Kufic is the oldest calligraphic form of the various Arabic scripts. (Picture: Wikipedia).

So what has then probably most profoundly inspired, but at the same time flummoxed, modern web design in the Arab world is the calligraphic Arabic writing system. Some of our interviewees below impressed the fact that typography for Arab web design is very much Latin-based and the design industry is still very immature. But they are optimistic the latest advances in browsing tools and standards will open the flood gates to more Arabic-based sites.

Quick Overview of Web Design in the Arab World?

When exploring the characteristics of Arabic web design one will find several aspects that make it unique. From the beautiful resources that inspire the designer to the scrolling calligraphy, web design in the Arab world very much has a brand of its own. Below are some interesting points concerning Arabic web design.

While there are some websites that follow CSS standards, Flash is still “considered the default” option for many commercial web design companies.
The web is still transitioning from being thought of as an ‘interactive TV’: “clients will project their expectations from the TV medium onto the web which is a process that destroys any hope of creating a usable website”.
On most international websites Arabic is the secondary language, especially on company and conference websites.
Professional Arab websites generally have the extra effort of offering bi-lingual publishing – English and Arabic.
Freelancing in the Arab world is not generally considered a good way to make a living.
While cost is a major concern for clients around the globe, Arabic web designers report focusing on usability and standards first while improving costs.
One of the most important influences of Arabic designs is arabesque (repetition of forms and patterns) and the various kinds of calligraphy.
The Arab world is made of 25 countries and territories, and has a combined population of more than 358 million people. Due to this large area and high numbers income varies greatly from one designer to another.
There are reportedly very few design schools and design events.

The State Of Affairs

We have asked web designers from various locations within the Arab world a series of 10 questions.

We would like to thank the following for participating in our article:

Fatma Alemadi of Fatma Studio, Qatar
Fouad Badawy of Mo3aser, Egypt
Jennifer Haddad of jennifer Studio, Lebanon
Ahmed Chergaoui and Younes Qassimi of Synergie Media, Morocco
Karim Tarek of Karim’s Portfolio, United Arab Emirates (UAE)
Ghaida Zahran of Ghaida Studio, Saudi Arabia

Question 1

Could you please describe the life of a freelancer, developer and designer in Arab countries?

Fatma Alemadi, Qatar: Where I live freelancing is not a common thing. As a mother I’m very selective. I work on a few projects a year because of lack of time. I’ve discussed this with some other fellow designers and developers and I think chances in achieving a stable financial life as a freelancer in the Arab world are very weak. Web design is still a relatively new market, but I’m very optimistic that the market will boom and within few years this can be changed.

Madeforbeirut Design Agency

Fouad Badawy, Egypt: The way the society in the Arab countries view freelancing is still immature. If he/she works at home all day long on his/her computer, according to Arab societal thinking, this is not a job that can make a living. But because of the lack of suitable job opportunities for young people, many of them are starting to tend to work as a freelancer over the Internet.

Jennifer Haddad, Lebanon: From experience with freelancing life in Lebanon, it can’t be a reliable and only source of income for the designer or developer. It very much depends on the clients a freelancer has, connections and reputation. It’s a life with two faces: on the good side, you have freedom, since no one is being the manager more limiting the creativity, other than the client; and on the bad side, you have the instability.

Chergaoui and Qassimi, Morocco: Most of Moroccan web designers and developers are young (16-30 years old) and have less experience compared to Europe and North America. However, they’ve proved by many occasion that they’re eager to learn more. In many cases, the client doesn’t measure the full potential of Internet. Therefore, the designer/developer deploys more efforts in educating the client rather than building the website. The process takes more time. Some Arab businesses tend to favour dealing with European agencies than trusting young local talents. That leaves us sometimes with the feeling that local designers/developers aren’t considered at their fair value.

Karim Tarek, UAE: I don’t really work as a full-time freelancer, but I think each of us have our own way of doing things and planning. Generally, I don’t think the life of a freelancer in the Arab countries should be different from any other freelancer in the world, but it is really hard to survive as a freelancer in the Middle East.

Ghaida Zahran, Saudi Arabia: I’m currently working fulltime with Rayat Brands and freelanced for only a short while after I graduated. It’s very difficult to get started as a freelancer here in Saudi Arabia. Clients prefer to work with established agencies rather than individual freelancers because it is assumed that if you were skilled enough you would be employed at an agency. Being a freelancer means you are the CEO, Creative Director, Client Servicing, Accountant, and Designer all in one, and requires masterful time management, and the requirements for a successful freelancer in Arab countries is the same as those in the US and Western Europe. The challenge is greater however, because of a lack of local support communities and resources and tools.

Question 2

Are there any regular meetings or events?

Fatma Alemadi, Qatar: Very few.

Fouad Badawy, Egypt: Big technical activities and events are very limited in the Arab region, but with the combination of the following: spread of information technology; growing numbers of companies working in this field; and, young people interested in learning more in this area, the situation improves gradually. Small activities and events organized by youth groups and small technical groups have begun to spread in recent years.

Ftpal.net

Jennifer Haddad, Lebanon: I’ve never heard of any official freelance meeting or events, so, as far as i know they don’t take place. But usually I and fellow designers sit and discuss design topics during our informal gatherings.

Chergaoui and Qassimi, Morocco: There is not yet a main event that brings together Arabic freelancers, developers and designers from Arab countries. We mostly meet in European/American Events. In Morocco, the only event that brings together Moroccan freelancers, developers and designers is the Maroc Blog Awards, an event that rewards the best social media actors from Morocco.

Karim Tarek, UAE: I heard about the “Submit Conference” - it is for entrepreneurs and professionals involved in the Internet industry in the Middle East, focused on many aspects of Web applications, like technology, marketing, design and entrepreneurship. That is the only one I’ve heard of. Maybe there are others but I think they don’t promote and market it enough.

Ghaida Zahran, Saudi Arabia: There are no regular meetings for freelancers. Saudi Arabia is a very private society in that regard but the situation is getting better. A few years ago a local artist group in Jeddah, that met on deviantArt, formed the Jeddah Urban Artists and we had our first exhibit as a group in 2006. There is also a more active group, Riyadh Geeks, which meets regularly in Riyadh and is centered more around technology and software/web development than design.

Question 3

Are there any significant differences between Web designing in Arab countries and and ones in the US and Western Europe?

Fatma Alemadi, Qatar: I think the communities in the US and/or Europe are more active, but that doesn’t mean that we are left far behind. Also, with the Internet I don’t think we can separate designers according to their regions. A lot of Arab designers who I know are already working in international markets selling their products and work around the Internet .

Fouad Badawy, Egypt: There are no significant differences in web design techniques in the Arab region than anywhere else. Any difference is due only to the perceptions and demands of clients which vary from project to project and client to client.

Jennifer Haddad, Lebanon: Yes there is. The mentality of the clients and users in the US and western Europe is different. They are up to taking challenges and don’t set limitations to creating creative designs. This is a big problem in the Arab world especially KSA [Kingdom of Saudi Arabia] and sometimes in Dubai and Bahrain. The web design standards for such countries is totally different – they don’t care about the user experience nor if the website they are requesting is accessible to users or if the website reflects the line of work of the business. They have standards that in most cases don’t follow the worldwide trends in design because they are not well involved in the new innovations and evolution in web design.

29letters

Chergaoui and Qassimi, Morocco: Arabic is written from right to left. That means that many websites need to be redesigned to have an optimized website in terms of usability. Also the coding scheme is different, more design elements are added because Arabic characters are shorter and wider than Latin characters. This gives a different visual appearance to the website.

Karim Tarek, UAE: Yes I think so. Web design in Arab countries doesn’t have an identity yet unlike US and Europe.

Ghaida Zahran, Saudi Arabia: Web design in Arab countries is sorely behind that in the US and Western Europe. Extensive and inappropriate use of flash, nested tables for layout, and non-standard markup plague Arabic websites. Unfortunately the web is viewed as ‘interactive TV’ rather than a medium all of its own, and clients will project their expectations from the TV medium onto the web which is a process that destroys any hope of creating a usable website. Flash is considered the ‘default’ medium for commercial web design, and this leads to great user frustration because internet speeds in Arab countries are much slower than those abroad. For example, here in Saudi Arabia, the fastest speed you can subscribe to is 20 MB, and the cost is unjustifiably great. The trick is to manage client expectations and produce a website that will both “wow” the client and remain usable.

Question 4

Where do you get inspiration from?

Fatma Alemadi, Qatar: I get most of my inspiration from the design community. I read design blogs and visit css and design galleries. I’m also inspired by other forms of art like photography, decor and fashion. I love colors so anything with colors gets my attention.

Fouad Badawy, Egypt: The Arab region as an environment is very rich with wonderful places and resources that are good sources for inspiration. This is reflected in some designers’ works, however the main sources – considered as the easier – are the different images spread on the various photo sharing web sites, tracking CSS exhibits and keeping track of the work of other designers.

Jennifer Haddad, Lebanon: Everywhere, especially online. I always do research online – read design blogs, & books. Inspiration isn’t achieved from one place in particular for me. Sometimes I get inspired from looking at something that is in no way related to the project I’m working on.

Chergaoui and Qassimi, Morocco: Websites like behance.net, flickr.com, dribbble.com. Web design galleries such as inspirationti.me, unmatchedstyle.com, siteinspire.net. Design related blogs & portals : smashingmagazine.com, aiga.org, alistapart.com, ilovetypography.com, thegridsystem.org. Arabic Calligraphy.

Karim Tarek, UAE: deviantart.com, smashingmagazine.com and searching google.

Wael Saad

Ghaida Zahran, Saudi Arabia: I get inspiration from showcase websites such as Best Web Gallery and CSSRemix. I enjoy browsing dribbble for general design inspiration. Video games are a great inspiration for me personally because they have such rich interfaces. I also seek inspiration away from the computer, elevators, television sets, and even non-electronic objects that we interact with daily.

Question 5

What’s the situation on the market? How much do designers earn?

Fatma Alemadi, Qatar: It really depends.We are talking about a lot of countries with a variety of incomes. According to where I live, some people in other Arab countries will think that I have high prices but for people in my country and countries around me my prices can be fair.

Zukhruf

Fouad Badawy, Egypt: When you talk about the Arab region, you are talking about 25 countries/territories that have various living standards. But let me talk about Egypt and the Arab Gulf states, where most of my work is concentrated – the cost of a medium-sized project starts from 400 dollars and up to 1000 dollars.

Jennifer Haddad, Lebanon: It differs based on the client, the project and the reputation of the designer. You have clients that are willing to pay a fair amount for the work of a freelancer and some who think that since they are working with a freelancer, the prices should be low – usually the price expectations are really low. The rate starts of at ~$300 for the price of a static homepage.

Chergaoui and Qassimi, Morocco: The market is still immature. The designers are mainly autodidact and young. We don’t have enough design schools in Morocco. Estimations vary a lot from a region to another; a designer charges by the day, and it’s approximately $200.

Karim Tarek, UAE: This is a tough question, I think each country is a different story. Currently I live and work in UAE. All the companies in the market are mostly foreign companies. It is really rare to find a pure Arabic company and if you were lucky to find one mostly they lack quality, I’m not sure of how much web designers earn but I know that building a website in UAE costs a lot. I would expect that a full-time web designer would get from 10.000 to 25.000 AED (United Arab Emirates Dirham) based on experience, talent, creativity, company and how lucky he/she is.

Ghaida Zahran, Saudi Arabia: Income varies greatly from one designer to another; but the average basic salary for a fresh graduate in Saudi Arabia for example is about 4,000 Saudi Riyals which is about 12,800 USD a year. The variation begins as experience increases and designers with a few years of experience under their belts can earn anywhere from 22,000 USD to 50,000 USD a year.

Question 6

How do you see the status quo of Web design in Arab countries?

Fatma Alemadi, Qatar: If the web design in the Arab world was a human, I would say we are in the “teenage” stage and hopefully this teenage boy/girl will grow up to be a smart and successful adult soon – God willing (as we say in Arabic).

Fouad Badawy, Egypt: Web design in the Arab region is still in its early stages and the Arab production over Internet is small compared to the number of Arabic sites and the number of users. But, with an increasing number of young designers who have creative ideas and have a desire to keep up with everything new in this area, it is improving well.

Colors Lab

Jennifer Haddad, Lebanon: It is evolving. Web design is totally different from they way it was when I started working three years ago. Clients are more open to the trends and breakthroughs in web design. They are more involved in the Internet world. Websites produced have a more professional international look but still you have a fair percentage of clients who still live in a nutshell and don’t like outside-the-box ideas. The good thing is that the percentage of these clients is decreasing each year, more and more.

Chergaoui and Qassimi, Morocco: More than 75% of Arab Internet users are under 35. They heavily use social platforms like Facebook and MSN and play a lot of online games. Arabic websites that have a large traffic focus a lot on content and tend to neglect the design part.

Karim Tarek, UAE: Web design in the Arab countries needs a lot of improvement, which in turn needs a lot of effort from individuals like web designers or web developers plus companies. Though, I don’t think in our countries people have the luxury of doing open source projects or writing high quality articles – every one is busy make a living. Life is hard here.

Ghaida Zahran, Saudi Arabia: Currently “advanced” web design is considered anything that is heavy on animation. Flash is the de facto medium for websites, however more clients are beginning to understand the drawbacks to relying heavily on Flash.

Question 7

Are there any patterns of usability or rules of thumb that are typical of Arabic design? Are the standards of Web design in Arab countries changing?

Fatma Alemadi, Qatar: People are so crazy about Discussion Boards. Sometimes I think that every kid in my neighborhood has his/her own board. When we first had the Internet years ago people knew the Internet as a place to have freedom of speech through boards, places to say things that they can’t say anywhere else due to regimes in some Arab countries. This is starting to change – but slowly. Also, because some technologies don’t support Arab language except in their later versions we are left behind unable to use this technology until Arabic is supported. And if you think that working with your site design for cross browsing is hard, try right to left design where browsers act strange sometimes and IE bugs are more and harder to solve.

Jennifer Haddad, Lebanon: Yes there are patterns of usability that are usually followed but these are not official standards. Unlike web design in English there are no international standards that all English websites somehow follow. Still, the Arabic language in web design is underestimated and not treated the way it’s supposed to be. It is becoming somehow a secondary website language when in reality it should be the primary language that should be treated initially while designing a website. Usually each country has it’s separate guidelines that should be followed, for example, Dubai Government has that. They have there own set of guidelines and rules that should be applied to all websites designed for the Government of Dubai.

Chergaoui and Qassimi, Morocco: Perhaps the most important thing to take into consideration is culture. Sometimes designs are rejected because they contain elements that may be considered as inappropriate or shameful. So rule number one: be aware of the cultural specificities of the region you’re designing for.

Karim Tarek, UAE: With respect to usability, there is no difference between an English design and Arabic design – same rules apply. The web standards in Arab countries should be the same like the international ones and I believe it is changing every day, but not every one follows the latest standards As an example you still find websites using tables to build the structure of the web page, so standards are the same but are we making use of it?

wajhy

Ghaida Zahran, Saudi Arabia: It would seem that a lot of the web design in Arab countries seems to be stuck in the 90s. This however is slowly changing as talented designers are beginning to observe usability principles and web standards more and also as the web is becoming more of a tool than the entertainment medium people assumed it was years ago.

Question 8

And how does all of this work? Is the situation currently good or difficult? Do most customers want to have English-speaking or Arabic-speaking sites?

Fatma Alemadi, Qatar: Most companies want to have two languages, Arabic and English, so in most cases you have to work twice with a lot of the design aspects. For blogs and more personal sites it’s mostly one language Arab or English.

Ahmed Zahran’s Portfolio

Fouad Badawy, Egypt: This depends on the type of client. Most companies and organizations request that they should have their site in both Arabic and English, and others are in English only. However the sites of individuals should often be in Arabic only and are directed mostly to the Arab user only.

Jennifer Haddad, Lebanon: Unfortunately the Arabic speaking sites are treated as a secondary language in most of the websites. The number of websites which cater first for the Arabic style are somehow rare. Arab countries have come far and evolved when it comes to website design and styles. Still, we need to grow a lot to become like the US and European countries.

Chergaoui and Qassimi, Morocco: The main projects in Arabic are currently government and institutional projects. Many Arab businesses appear to search more in English or French than in Arabic and prefer to have English-speaking or French-speaking sites. As the Arab world gets more and more connected to the web, I think more Arabic-speaking sites will be created.

Karim Tarek, UAE: In my opinion the situation is bad , Mostly clients ask for both, though top priority is for the English websites and some clients don’t even care to have an Arabic website – English will do.

Ghaida Zahran, Saudi Arabia: The situation is difficult and like any transition it is challenging but ultimately inevitable. People are beginning to look to the Internet for more than simply looking up a company’s brochure website, but they are starting to see its potential as a valuable tool as well. Thus more web applications such as Qaym and 3aish Jobs are being developed. English speaking websites seem to be the default request by clients as well, even though user demand is great for Arabic websites.

Question 9

How do Arab designers handle typography? Are any font embedding techniques widely used? Is the choice of available fonts big? How vivid is, in your opinion, typography in Arabic web design?

Fatma Alemadi, Qatar: There are a good number of Arab fonts, while still mainly three are widely used. The font most used by designers is Tahoma which looks lovely on windows and loses its lovely curvy look on Mac – still I prefer it for smaller text. Most CSS styling techniques are designed for English (Latin) letter so applying them to Arabic text can make the texts looks funny sometimes . Font embedding technique doesn’t work well with Arabic fonts so this is not used yet. Hopefully we can find a solution for this soon or maybe someone already came up with one and I don’t know

Jennifer Haddad, Lebanon: As an Arab designer i am usually afraid from the Arabic language and it’s a challenge to be able to design a website that looks good and user friendly in Arabic. But it’s a challenge I’m getting good at since the type of projects i work on are 90 % Arabic websites. The fonts used on the web for Arabic are unfortunately still limited to the default Ariel, Verdana, Tahoma and most of the time the font used is Tahoma because it is the most legible on the web. Arabic typography should start to take its rightful place in the web design world. It’s a nice language and it’s our main language in the Arab world. If we don’t treat the language as important and revive it no one else will.

Dubai Media Incorporated

Chergaoui and Qassimi, Morocco: Based on the sites we designed in Arabic, typography is often limited to the list of fonts already existing on the operating systems. It’s mainly due to the lack of typographic variety. A small example describing this : the number of Arabic font families existing in Linotype directory (http://www.linotype.com/en/51438/kategorien-arabisch.html), compared to the number of sans-serif font families (http://www.linotype.com/en/51431/kategorien-serifenlos.html) - 784 versus 40! Font embedding is not very popular. Solutions like Typekit doesn’t yet offer Arabic fonts. That being said, we think it’s just a matter of time before we’ll be able to deliver custom types in websites using these technologies.

Typography is progressing & there’s some high quality type designers, such as Nadine Chahine, who designed the Arabic versions of well known fonts (helveticaneue, frutiger, palatino, etc..)

Karim Tarek, UAE: As to my knowledge there is no font replacement technology like Cufon or sIFR which supports Arabic, so we just use system fonts which makes the Arabic web layouts much less pleasant than the English one. As for fonts, Arabic fonts are extremely expensive and free ones are hard to find.

Ghaida Zahran, Saudi Arabia: The state of Arabic typography on the web is dismal. This makes designing websites in Arabic a gamble, because you could never tell how the website will look on different users’ computers, the short-term solution for this is to use background images for text, which of course is a usability nightmare and many developers simply ignore the issue and hope for the best. There needs to be a standard set of Arabic typefaces that are available on every operating system, the equivalent to Georgia, Arial, etc. in English.

Question 10

What makes an outstanding design agency in Arab countries?

Fatma Alemadi, Qatar: Sometimes creativity and individuality … and mostly connections.

Arabic Rhymes

Fouad Badawy, Egypt: The appropriate prices or the low prices sometimes! Quality of work, quick response to customer requests as well as a Portfolio that contains good-level work. All these factors increase the success and spread of companies at least at the level of individual customers.

Jennifer Haddad, Lebanon: An agency that cares about quality not quantity. An agency that caters for user experience and stay up to date with the design trends and create its own trends. An agency that works on a variety of projects not just one specific type of project. An agency that has and gives good consultancy service to the client and somehow is able, through that, to influence the client in a good way. Finally, an agency that has the right project cycle and treats the project with care and gives it its rightful time to be finished.

Chergaoui and Qassimi, Morocco: Web designs in Arab countries are primarily intended for a particular culture or nation rather than the World Wide Web. Thus, local expertise is the key! The one who thinks big, works hard and overcomes regional challenges will surely succeed.

Karim Tarek, UAE: A team of passionate people who want to do their own thing instead of follow others and selling crap.

Ghaida Zahran, Saudi Arabia: I would say the same qualities that make any design agency outstanding; matching client expectations with user expectations by creating websites that are both usable and attractive.

Selection of Web Designs from the Arab World

MBC4

Maghribi Style design agency

Wissam Shawkat Studio

Nina Kreidie Portfolio

What Is The Worst Design or Programming Mistake You’ve Ever Made?

njwebdesignfirm — Fri, 10 Sep 2010 20:35:34 +0000

What Is The Worst Design or Programming Mistake You’ve Ever Made?

via Smashing Magazine Feed by Robert Bowen on 9/10/10

Mistakes are made every day in the design and development world. It’s nothing to be ashamed of; it happens. In fact, mistakes are one of the most powerful learning tools at our disposal. Our mistakes impart important lessons that we carry with us as we continue to hone our skill set. Own your mistakes. Never shy away from them; they are the milestones in our development.

So often we view mistakes negatively and let them get us down. We believe they indicate failure and that our otherwise perfect record will be forever marred. No one is perfect; we all make mistakes. They indicate failure only if we fail to learn from them.

How often have you stayed late, trying to get something done and did some embarrassing mistake instead? We can learn from our mistakes and mistakes of our colleagues. Image credit

The online design and development community is a wonderful resource in this respect. Not only are members open about their mistakes, they share their experiences as learning opportunities for others — this is helpful for those of us who have not yet suffered through the same bumps in the road.

With this in mind, we turned again to our Twitter followers and Facebook fans to find out about the worst design or programming mistakes they have ever made. Now we share them with you, our readers, so that we can all learn from them and avoid making the same mistakes.

9 Common Usability Mistakes in Web Design is a useful post that covers some common mistakes made when designing for the Web.
Speaking of common mistakes, here is another entry from our archive that lets you in on some problems faced by e-commerce designers: 15 Common Mistakes in E-Commerce Design.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Bait And Switch

The first common mistake we should learn from — and which several of our followers have had to face — is the old bait and switch. It occurs across the spectrum, for the newb and the accomplished professional, because it’s an easy mistake to make as the working hours add up. What is the bait and switch? It happens when you’re working on one version of a website or project and, at some point during the tinkering, you accidentally switch it for the active website or project before it’s ready.

When we’re in a constant back-and-forth workflow, getting mixed up is easy, at which point the bait and switch can happen. And it causes all kinds of chaos and headaches. Awareness and caution are needed to prevent this error from being part of your personal experience. Before you finalize changes or processes, be sure you’re working with the right file and uploading to the correct location. This isn’t a sure-fire prevention plan, but it will certainly improve your chances.

What Our Followers Said

“I accidentally put a half-finished (with massive broken bits) update of a website over top of the current live one without a back-up.”
“I sent $10,000 worth of product to a customer while testing an ordering portal.”
“I deleted an actual repository instead of a working copy. #svn”
“Worst programming mistake: editing off a live server and then uploading an old version of the website. All files lost!”
“Sat on the development FTP for half an hour, being mad that the live website wouldn’t update!”
“Moved the entire directory of websites on a live server into a different folder, then lost it or deleted the in-house CMS”
“Programming mistake: writing data to the wrong database.”
“Uploading to the dev website FTP and wondering why the live website wasn’t changing, which sent me around the bend in the process!”

Falling Behind On Back-Ups

Given that back-up-related mistakes usually come to light once you realize you’ve just pulled a bait and switch, we’ll tackle these next. Problems with back-up files are common in the design and development community, and they are openly lamented. For some reason, though, many of us still find ourselves panicked when we realize we have no current back-ups of the project we’re working on. And it usually hits us just after we lose the active version of the project and need it replaced.

We can take steps to save elements of our work and prevent episodes like this from becoming remorseful blog posts. You can be either low-tech or high-tech when you address this potential problem, but you need to do something. It could be as simple as making a list of details to check daily, and backing up data could be the final step. Alternatively, you could pay for an automated back-up service that guarantees completion of the task. There are several options, each with pros and cons, so find one that works for you and implement it post-haste.

What Our Followers Said

“I moved a dynamic, CMS-contained website across to a new server. Forgot to back up, then deleted templates in the process. D’oh!”
“Mistake: not backing up a compiled Flash slideshow, replacing it, then realizing the new version was completely broken.”

Measure Once, Cut Twice

The next mistake we’ll cover happens fairly often. For any number of reasons, we end up measuring once and cutting twice, so to speak. The measurements we work with vary greatly from project to project and from Web to print, so we need to be alert to what we are sizing and aiming for. Sometimes it isn’t so much the measurements as it is the content that requires a re-cut.

Often calculations, measurements and the concept phase need more time than expected. Turning off the computer and getting back to the sketch board or a notebook is often very useful to avoid mistakes. Image credit

Chalk it up to being overzealous or getting sloppy in our work as we push toward deadlines. If these are the reasons for our re-cuts, prevention is easy: just avoid those things… which is easier said than done. Still, if we mind our p’s and q’s and double-check everything before submitting it, our chances of embarrassment decrease. Follow the carpenter’s old rule of thumb, “Measure twice, cut once” — it benefits us designers and developers, too.

What Our Followers Said

“Mistake: having 20,000 cards printed that didn’t fit into a lanyard card holder”
“Got my colleague’s phone number wrong on her business card… We ordered 2,000.”
“This isn’t really a programming mistake, but the most embarrassing mistake I’ve made in Web design was buying a domain name that had the client’s name in it — but part of the name was wrong. Good thing domains are cheap!”
“I managed to drop an ‘m’ off ‘millimeters’ in InDesign. Ended up with an 88-meter-wide business card. Schoolboy!”
“I think most of us have experienced the horror of hitting ‘Send’ on an e-blast, only to quickly realize it’s wrong.”
“Mistake: when I post something and then two weeks later or more, I find out something’s wrong with it.”
“A couple of years back, I made a beginner’s design mistake with print: envelopes and paper didn’t match.”
“Sent PDF to the printing house for 1000 leaflets. Received them and realized that the phone number was wrong. Then, sent corrected PDF, received leaflets and realized that the wrong PDF was sent. We had 1000 useless leaflets with the right number but with the ‘iStockphoto’ watermark on every (lo-res) picture. Third time it was OK.”
“I dropped an ‘L’ from the word ‘public’ in a school prospectus (and website). Honest mistake!”

Miscommunicate Expectations

Another problem encountered by designers and developers that you can learn from before encountering it is a breakdown of communication with a client or boss. Many of us let things become unclear or slip by, which makes us unsure whether everyone involved in a project is on the same page. Usually this is caused by a lack of confidence in ourselves or fear that asking for clarification would reflect poorly on us. Whatever the reason, we decide not to revisit the issue and instead proceed with a shaky understanding of what we’re supposed to do.

Every time we communicate with our boss or client, we open ourselves up to the possibility that one or two ideas might get lost in translation. We should be as clear and concise as possible in our discussions so that work stays on track… at least on our end — we can’t control others. If we’re dealing with someone who is unfamiliar with the design and development field, understanding what they’re asking for can be tricky. Take notes, and go over them with clients at the end of meetings so that everyone understands where things stand. Good notes prevent communication blunders.

What Our Followers Said

“I underestimated the amount of content that two different clients wanted. Not a clear picture from the start.”
“For my part, I must say, not reading a ticket well enough and spending two days coding something that wasn’t asked for. Over-enthusiastic FTW!”
Emily Buck: “My mistake was telling my current employer than I have some experience in Web design (meaning HTML and some CSS); now it’s part of my job to learn how to code ASP and maintain and redesign our entire e-commerce website. Ugh. I’m a print designer!”
“I’m in the same situation as Emily. Job description and interview included ‘some Web,’ and now I’m trying to learn PHP and run a full searchable retailer list for my company! Thank God for online tutorials!”

Careless Coding

When it comes to coding, we can easily drop the ball. Coding is an in-depth process, in which many different layers are stacked on top of each other, and one can get lost in it. This is one reason why developers comment in their code: so that they leave trails of breadcrumbs throughout their projects. This is a good habit to form, but sometimes it leads to an embarrassing faux pas or frustrating hours of rebuilding, as revealed by our followers.

With just one misfired keystroke, a project can go from a coder’s dream to a virtual nightmare, with no perceptible way out. As if that’s not enough, our coding comments can bite us in the back end, especially if we’ve thrown some nonsensical, fun or unprofessional bits into the code and forgot to remove them. We need to be mindful as we code and avoid distractions as much as possible to avoid burying mistakes so deep that they reveal themselves only after hours of careful combing. Also, take one last look through your comments to be sure you’re not leaving something that you’d rather others not see.

What Our Followers Said

“I left some profanity in a client’s HTML once while testing text-indent (off-screen position). Very, very embarrassing.”
“Accidentally leaving things like ‘Mooooo’ and ‘Baaaaa’ in code that has gone live!”
“I used to write haiku in my code to mark my place, and I think I forgot a few out there somewhere… not anymore!”
“I once did (as root) `rm -rf tmp /` instead of `rm -rf tmp/` on a Friday afternoon. Painful weekend.”
“A typical one: Using = instead of == in an if statement. Always takes quite some time to figure out.”
“Typed rm -rf .* on the server. @wsttn wasn’t happy when I deleted everything.”
“Using a body * { text-align: center; } on a log-in form, but accidentally placing it in the default style sheet instead of the specific log-in style sheet. Our largest customer didn’t like it when it went live.”
“I removed the ID from the ‘Submit payment’ button, and the website failed to take bookings for six hours. Lost £20,000.”
“Forgot the where clause when testing SQL to a user table. No fun, I tell ya!”

Forgetting The Filler

Sometimes we forget to redact our coding comments and leave in an embarrassing tidbit or two. There are also times when we accidentally leave in filler content. That’s not necessarily a problem unless the client does not recognize it as filler, because then they might not remove it either. Remember that clients, especially the less technically savvy ones, are probably extremely paranoid about deleting anything, so any filler you forget to pull will inevitably be published to the masses.

Again, it comes down to vigilance. We can’t stress enough — on top of all the other stresses in the design and development field — the importance of double- and triple-checking all of these elements before labeling anything as complete. Certainly do this before turning anything over to the client. Making a generic checklist for every project you take on will help you avoid these mistakes. Remind yourself somehow to watch for elements that tend to slip through the cracks.

What Our Followers Said

“Forgetting to remove nonsense words (used for testing) in an assignment and losing marks. Otherwise, perfect code.”
“Two words: dummy data. Strictly ‘Lorem Ipsum’ ever since.”
“One time I left an unkind phrase about a client in the comments, and they found it later on.”

Wrong Tool For The Job

The last mistake we’ll discuss in depth usually occurs early on in our experience in the design and development field: using the wrong tool for the job. It does happen, and more often than we’d like. When you’re unfamiliar with a field, you’ll sometimes use the wrong platform yet believe you’re on solid ground. At some point, you find out that the program, a supposed godsend, is not compatible with your client’s program or the program of others involved in the project.

Wrong tools doesn’t necessarily mean your coding or designing applications, it also can mean a wrong environment or computer setup. On the photo above, the setup looks solid and well-organized. Image credit.

Communication can assist in this area, though not as much as research. Find out from your client exactly where the project is going, and contact them yourself to ensure that files will be delivered in the proper format. You can leave this to the client, but you are responsible for ensuring compatibility, so it’s best not to leave it to someone else. Also, as you transition to new areas, research the tools of the trade to avoid making this mistake.

What Our Followers Said

“I tried to deliver my very first program for Notts County FC to the printers in MS Publisher. I cringe even now.”
“The first Photoshop website I ever did was a sliced PSD with all of the content in images… That was back in 1999/2000.”
“Using Drupal to do ‘quick ’n’ dirty’ websites. They were dirty, but they sure weren’t quick.”
“Designing a database app: rather than de-normalizing data, adding/removing table columns on the fly. Long time ago!”
“Hard-coding a navigation across 10 pages instead of using an include. Was new to Web dev at the time.”
“Depending on an external source for data and, because that crashed, our website crashed. Almost cost me my job.”

More Mistakes To Learn From

Below are several more community-contributed pearls of wisdom that we can learn from. We’d like to thank our dedicated followers who revealed their biggest mistakes so that we could benefit from their toil and trouble.

“Mistake: severely undercharging for a massive job. My very first freelancing job. Was not worth the time and effort!”
“There was a time in the ’90s when I thought Papyrus was beautiful. *Hangs head in shame*”
“I once created an iteration of a logo using Comic Sans, and it was chosen! I’m not proud, but I was young and naive at the time.”
“Used Comic Sans for something serious.”
“How about 90,000 alert emails sent to four people over one weekend (myself, a colleague and website owners) = 360,000 emails.”
“Deleted the shopping cart table from a live website instead of deleting one of the records in the table.”
“The worst programming mistake I made was to develop an admin area with cookies only (without other security systems).”

What about you?

What is the worst design or programming mistake you’ve ever made? And if you’d like to participate in other discussions and contribute to articles like this one, follow us on Twitter and like us on Facebook. We are looking forward to your insights!

(al)

What Is The Worst Design or Programming Mistake You’ve Ever Made?

njwebdesignfirm — Fri, 10 Sep 2010 20:35:30 +0000

What Is The Worst Design or Programming Mistake You’ve Ever Made?

via Smashing Magazine Feed by Robert Bowen on 9/10/10

Mistakes are made every day in the design and development world. It’s nothing to be ashamed of; it happens. In fact, mistakes are one of the most powerful learning tools at our disposal. Our mistakes impart important lessons that we carry with us as we continue to hone our skill set. Own your mistakes. Never shy away from them; they are the milestones in our development.

So often we view mistakes negatively and let them get us down. We believe they indicate failure and that our otherwise perfect record will be forever marred. No one is perfect; we all make mistakes. They indicate failure only if we fail to learn from them.

How often have you stayed late, trying to get something done and did some embarrassing mistake instead? We can learn from our mistakes and mistakes of our colleagues. Image credit

The online design and development community is a wonderful resource in this respect. Not only are members open about their mistakes, they share their experiences as learning opportunities for others — this is helpful for those of us who have not yet suffered through the same bumps in the road.

With this in mind, we turned again to our Twitter followers and Facebook fans to find out about the worst design or programming mistakes they have ever made. Now we share them with you, our readers, so that we can all learn from them and avoid making the same mistakes.

9 Common Usability Mistakes in Web Design is a useful post that covers some common mistakes made when designing for the Web.
Speaking of common mistakes, here is another entry from our archive that lets you in on some problems faced by e-commerce designers: 15 Common Mistakes in E-Commerce Design.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Bait And Switch

What Our Followers Said

“I accidentally put a half-finished (with massive broken bits) update of a website over top of the current live one without a back-up.”
“I sent $10,000 worth of product to a customer while testing an ordering portal.”
“I deleted an actual repository instead of a working copy. #svn”
“Worst programming mistake: editing off a live server and then uploading an old version of the website. All files lost!”
“Sat on the development FTP for half an hour, being mad that the live website wouldn’t update!”
“Moved the entire directory of websites on a live server into a different folder, then lost it or deleted the in-house CMS”
“Programming mistake: writing data to the wrong database.”
“Uploading to the dev website FTP and wondering why the live website wasn’t changing, which sent me around the bend in the process!”

Falling Behind On Back-Ups

What Our Followers Said

“I moved a dynamic, CMS-contained website across to a new server. Forgot to back up, then deleted templates in the process. D’oh!”
“Mistake: not backing up a compiled Flash slideshow, replacing it, then realizing the new version was completely broken.”

Measure Once, Cut Twice

What Our Followers Said

“Mistake: having 20,000 cards printed that didn’t fit into a lanyard card holder”
“Got my colleague’s phone number wrong on her business card… We ordered 2,000.”
“This isn’t really a programming mistake, but the most embarrassing mistake I’ve made in Web design was buying a domain name that had the client’s name in it — but part of the name was wrong. Good thing domains are cheap!”
“I managed to drop an ‘m’ off ‘millimeters’ in InDesign. Ended up with an 88-meter-wide business card. Schoolboy!”
“I think most of us have experienced the horror of hitting ‘Send’ on an e-blast, only to quickly realize it’s wrong.”
“Mistake: when I post something and then two weeks later or more, I find out something’s wrong with it.”
“A couple of years back, I made a beginner’s design mistake with print: envelopes and paper didn’t match.”
“Sent PDF to the printing house for 1000 leaflets. Received them and realized that the phone number was wrong. Then, sent corrected PDF, received leaflets and realized that the wrong PDF was sent. We had 1000 useless leaflets with the right number but with the ‘iStockphoto’ watermark on every (lo-res) picture. Third time it was OK.”
“I dropped an ‘L’ from the word ‘public’ in a school prospectus (and website). Honest mistake!”

Miscommunicate Expectations

What Our Followers Said

“I underestimated the amount of content that two different clients wanted. Not a clear picture from the start.”
“For my part, I must say, not reading a ticket well enough and spending two days coding something that wasn’t asked for. Over-enthusiastic FTW!”
Emily Buck: “My mistake was telling my current employer than I have some experience in Web design (meaning HTML and some CSS); now it’s part of my job to learn how to code ASP and maintain and redesign our entire e-commerce website. Ugh. I’m a print designer!”
“I’m in the same situation as Emily. Job description and interview included ‘some Web,’ and now I’m trying to learn PHP and run a full searchable retailer list for my company! Thank God for online tutorials!”

Careless Coding

What Our Followers Said

“I left some profanity in a client’s HTML once while testing text-indent (off-screen position). Very, very embarrassing.”
“Accidentally leaving things like ‘Mooooo’ and ‘Baaaaa’ in code that has gone live!”
“I used to write haiku in my code to mark my place, and I think I forgot a few out there somewhere… not anymore!”
“I once did (as root) `rm -rf tmp /` instead of `rm -rf tmp/` on a Friday afternoon. Painful weekend.”
“A typical one: Using = instead of == in an if statement. Always takes quite some time to figure out.”
“Typed rm -rf .* on the server. @wsttn wasn’t happy when I deleted everything.”
“Using a body * { text-align: center; } on a log-in form, but accidentally placing it in the default style sheet instead of the specific log-in style sheet. Our largest customer didn’t like it when it went live.”
“I removed the ID from the ‘Submit payment’ button, and the website failed to take bookings for six hours. Lost £20,000.”
“Forgot the where clause when testing SQL to a user table. No fun, I tell ya!”

Forgetting The Filler

What Our Followers Said

“Forgetting to remove nonsense words (used for testing) in an assignment and losing marks. Otherwise, perfect code.”
“Two words: dummy data. Strictly ‘Lorem Ipsum’ ever since.”
“One time I left an unkind phrase about a client in the comments, and they found it later on.”

Wrong Tool For The Job

What Our Followers Said

“I tried to deliver my very first program for Notts County FC to the printers in MS Publisher. I cringe even now.”
“The first Photoshop website I ever did was a sliced PSD with all of the content in images… That was back in 1999/2000.”
“Using Drupal to do ‘quick ’n’ dirty’ websites. They were dirty, but they sure weren’t quick.”
“Designing a database app: rather than de-normalizing data, adding/removing table columns on the fly. Long time ago!”
“Hard-coding a navigation across 10 pages instead of using an include. Was new to Web dev at the time.”
“Depending on an external source for data and, because that crashed, our website crashed. Almost cost me my job.”

More Mistakes To Learn From

“Mistake: severely undercharging for a massive job. My very first freelancing job. Was not worth the time and effort!”
“There was a time in the ’90s when I thought Papyrus was beautiful. *Hangs head in shame*”
“I once created an iteration of a logo using Comic Sans, and it was chosen! I’m not proud, but I was young and naive at the time.”
“Used Comic Sans for something serious.”
“How about 90,000 alert emails sent to four people over one weekend (myself, a colleague and website owners) = 360,000 emails.”
“Deleted the shopping cart table from a live website instead of deleting one of the records in the table.”
“The worst programming mistake I made was to develop an admin area with cookies only (without other security systems).”

What about you?

(al)

Upcoming Web Design and Development Conferences in 2010

njwebdesignfirm — Fri, 10 Sep 2010 00:42:15 +0000

Upcoming Web Design and Development Conferences in 2010

via Smashing Magazine Feed by Louis Lazaris on 9/9/10

At the end of last year, we published a comprehensive list of web design and development conferences that might be of interest to Smashing Magazine’s diverse readership. Many readers commented and added links to other conferences and events that weren’t listed, some of which were added to the post. Using the contents of that list along with some other sources, we’ve compiled a list of web design and development-related conferences and events that will be taking place in the next six to eight months.

As always, there is no way for us to be able to include every possible event here, but we’ll be glad to update the list if you provide a comment to an upcoming event that you feel would be of interest to graphic designers or web developers.

While the previous roundup was organized by category, this one lists the events in chronological order starting with the earliest. Jump to an appropriate month using the links below:

September 2010 Events

October 2010 Events

November – December 2010 Events

Early 2011 Events

September 2010 Events

FITC Mobile 2010
FITC Mobile covers all aspects of mobile content development — with presentations, demonstrations, and panel discussions. Covering iPhone/iPad, Android, Flash 10.1, Windows Mobile, HTML5, Unity, Marketing, Usability, and other relevant topics in the mobile world.

When: September 16-18, 2010
Where: Toronto, ON, Canada at the Metro Toronto Convention Centre

An Event Apart D.C.
“From the makers of A List Apart, An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: September 16-18, 2010
Where: Washington, D.C., USA at the Washington Hilton

London Design Festival
“The London Design Festival is a nine-day celebration of design in the world’s creative capital. The Festival is a platform for the widest spectrum of design disciplines, brought together as a unique and accessible programme.”

When: September 18-26, 2010
Where: London, UK at a number of different venues across the city

MOBILE 2.0
“The MOBILE 2.0 Conference is a two-day event focusing on new Mobile Applications and Services, Mobile Ecosystems, and Disruptive Mobile Innovation presented by the Mobile 2.0 Organizing Committee. For Mobile Developers we have designed an entire day for you to hear about the latest developer tools and monetization techniques.”

When: September 20-21, 2010
Where: Silicon Valley, CA, USA at the Grand Hyatt & the Microsoft Silicon Valley Conference Center

Design For Mobile 2010
“Design For Mobile (D4M) is a multi-faceted conference aimed at engaging the mobile community in a shared discussion about the future of mobile and ‘the mobile now.’ This is a conference focused on strategy and tactics for user research, product definition, usability testing, interaction and design. D4M is comprised of both preliminary and advanced workshops that flank three full days of speakers and interactive sessions.”

When: September 20-24, 2010
Where: Evanston, IL, U.S.A at The Hilton Orrington

Web Directions USA
“CSS3, HTML5, Geolocation, mobile web — we’re seeing an explosion of innovation in design and development unlike at almost any other time in the web’s history. To keep you ahead of the curve, Web Directions USA features leading web practitioners, bringing you the freshest technologies, techniques and know-how.”

When: September 21-25, 2010
Where: Atlanta, Georgia, USA at the Loews Atlanta Hotel

National Association of Government Webmasters Conference
“The NAGW National Conference is the premier conference that focuses on local, state and regional government web professionals. Local, regional, state and federal government web professionals join their peers at the conference for two and a half days of education, training and networking in a relaxed professional environment.”

When: September 22-24, 2010
Where: St. Louis, MO, USA at the Millennium Hotel

European Information Architecture Summit
“A summit for anyone concerned with the design of navigation, organization, labeling, and search systems that help people find and manage information more successfully.”

When: September 23-25, 2010
Where: Paris, France at Les Salons de l’Aveyron

Flash on the Beach
“Don’t think that Flash on the Beach is only about Flash. Sure appearing at FOTB in the past we have had the usual suspects — Flash, Flex, AIR, and then some. Open Frameworks, Processing, AJAX, Photoshop, After Effects, Art, Design, Illustration, Animation, Sound and many more. Whether you are a tech-head or a creative, if you are a decision maker or a team manager, if you are in need of a fix of creative inspiration, or want to know the latest how-to’s, Flash on the Beach is where you’ll get it.”

When: September 26-29, 2010
Where: Brighton, UK at the Brighton Dome

BlackBerry® Developer Conference
“The BlackBerry® Developer Conference is a premier showcase for what can be done with BlackBerry apps, attended by thousands of the world’s most enthusiastic developers, BlackBerry experts, and Research In Motion® (RIM®) partners. It’s the place to get technical, code-driven information that can be applied to projects; the place where new tools and technologies can be experienced for the first time; the place for getting your questions answered, or finding the inspiration to go further with mobile applications than you ever imagined possible.”

When: September 27-30, 2010
Where: San Francisco, CA, USA at the Marriot Marquis

The ExpressionEngine and CodeIgniter Conference
“At the ExpressionEngine & CodeIgniter Conference you can meet the experts, be inspired and break new boundaries! This event brings you presentations and workshops from your favorite EE & CI speakers. Both beginners and experienced users will benefit from a variety of topics and sessions: discover how your favourite content management system and PHP framework can bend even further!”

When: September 29 – October 1, 2010
Where: Leiden, The Netherleands at De Stadsgehoorzaal theatre

Forward – Phoenix Design Week 2010
“The beauty of Phoenix Design Week is that it enables us to put Phoenix design on a pedestal. Throughout Design Week, there are many ways this is being executed, but one of the coolest ways we manifest this goal is by giving you options to showcase your own creative prowess.”

When: September 29 – October 3, 2010
Where: Phoenix, AZ, USA at the Phoenix Convention Center plus other locations

IDEA Conference
“IDEA2010 is a design conference tailored for you. This year’s unique mix of traditional presentations with structured activity time assures that you’ll get high-level concepts from big thinkers, and the space to apply them with peers.”

When: September 30 – October 2, 2010
Where: Philadelphia, PA, USA at the Independence Seaport Museum

October 2010 Events

A Better World by Design Conference
“A Better World by Design is a three-day internationally acclaimed conference in Providence, RI that connects students, professionals, and individuals from a variety of disciplines in order to build a global community of socially conscious and passionate innovators. Presenters share engaging stories, workshops teach creative skills, and discussions reframe perspectives.”

When: October 1-3, 2010
Where: Providence, RI, U.S.A at Brown University & RISD Campuses

Future of Web Apps
“The Future of Web Apps is a conference for web developers and entrepreneurs. You’ll learn about cutting-edge tech and exciting new ideas.”

When: October 4-6, 2010
Where: London, UK at The Brewery

Fronteers
“Founded in 2007, Fronteers is the non-profit trade organization of Dutch front-end developers. Its goals include the professionalisation of our trade, (improved) recognition of the front-end discipline, and improving the position of Dutch front-end developers in their company and the web design/development world in general.”

When: October 5-8, 2010
Where: Amsterdam at PathÃ© Tuschinski theatre

DesignPhiladelphia
“Through its events and programming, DesignPhiladelphia showcases the role that design has played historically in Philadelphia, and celebrates the city’s contemporary significance as a center for creative advancement. Through the breadth of our events, DesignPhiladelphia unites the creative disciplines – from architecture to interior design, fashion to product design, multi-media to graphic design.”

When: October 7-17, 2010
Where: Philadelphia, PA, USA at various locations

5D|10 The Future of Immersive Design Conference
“5D | The Future of Immersive Design is the visionary, international conference for all designers, practitioners and students working in the fields of narrative media.”

When: October 8-9, 2010
Where: Long Beach, CA, USA at the Carpenter Performing Arts Center

International PHP Conference
“With its mixture of topics the International PHP Conference provides an ideal resource for all professionals and their successful daily routine within the whole PHP spectrum. Insights into current Web 2.0 technologies, Security, Best Practices for tools and components, Enterprise know-how, databases, architectures and more are presented at the International PHP Conference 2009.”

When: October 11-13, 2010
Where: Mainz, Germany at the Rheingoldhalle

Web Directions South
“Featuring leading web practitioners from across the world, bringing you the freshest technologies, techniques and know-how in web design and development, along with numerous networking and social opportunities. If you work on the web, Web Directions South is the industry event of the year.”

When: October 12-16, 2010
Where: Sydney, Australia at the Sydney Convention and Exhi bition Centre

AIGA Gain
“The premier biennial event for business and design leaders. Attendees will learn how industry leaders addressed business challenges through design—and how they reinvented their businesses, their strategies and even themselves. We’ll hear business, design and thought leaders share their innovative approaches to generating greater return on investment, fostering emotional connections and providing positive brand experiences for customers.”

When: October 14-16, 2010
Where: New York City, NY, USA at The Sheraton New York Hotel and Towers

Voices That Matter iPhone Developers Conference
“You’ll acquire skills for mastering iOS development from leading authors and experts during a weekend of strong educational sessions. Our speakers are eager to share their knowledge, answer your questions and address your application needs. You’ll participate in interactive discussions that provide the perfect environment for an unbiased and effective learning experience. This engaging two-day conference features how-to sessions covering the latest, most intriguing news in application development for the iPhone and iPad.”

When: October 16-17, 2010
Where: Philadelphia, PA, USA at The Hub Cira Centre

jQuery Conference
“The annual conference of jQuery users and developers. There will be talks on jQuery, jQuery UI, plugins, complex application development, and more — all from the top jQuery developers. Speakers include John Resig, Paul Irish, Karl Swedberg, Doug Neiner, and more.”

When: October 16-17, 2010
Where: Boston, MA, U.S.A at the Hilton at Boston Logan Airport

Web Design World
“These are interesting times: a combination of technical innovation, audience growth, and crummy economy. As a web designer, you can’t escape any of the three. But you can learn how to keep up with the innovation, take advantage of the growth, and survive the downturn. That’s where we come in. We take our mantra — provide practical, no-fluff, how-to — very seriously. If you’ve joined us before, you know that. If you haven’t, please check us out.”

When: October 18-20, 2010
Where: Las Vegas, NV, USA at Planet Hollywood Resort & Casino

Do-It-Yourself Usability Testing: The Workshop
“The workshop will include: A complete explanation of how I recommend doing testing (Hint: very simple, very fast, and very cheap); Two live usability tests on attendees’ sites, so you can see the whole process in detail; A chance to practice conducting a test on your own site; Advice on how to interpret your findings and decide what changes to make; Plenty of time to answer your questions about testing or any other aspect of usability.”

When: October 20, 2010
Where: Washington, DC, U.S.A

Front-Trends Conference
“This is a gathering for front-end lovers and professionals to discover the current trends and tools to build a professional career out of innovative front-end development.”

When: October 21-22, 2010
Where: Warsaw, Poland at the Centrum konferencyjno – kongresowe

Brooklyn Beta
“Brooklyn Beta is a collaboration between Analog and Fictive Kin. Our goal for the conference is to inspire you to ‘make your own stuff.’ We’d love to see what the Web would be like if all you talented web people started using your magical abilities to bring your own ideas to life. To help, we’ve put together a conference aimed at turning inspiration into action with talented folks from every web field attending. We want to get all the people who can turn an idea into reality in one place and see what happens.”

When: October 21-22, 2010
Where: Brooklyn, NY, USA at the Invisible Dog

ExpressionEngineCamp
“ExpressionEngine Camp is a collaborative all-day workshop about ExpressionEngine on October 22nd. Learn best practices or share tips about creating web sites with EE.”

When: October 22, 2010
Where: Denver, Colorado, Casselman’s Event Venue

Adobe MAX 2010
“MAX 2010 is an amazing opportunity to learn new skills, explore emerging technologies, and connect with thousands of other industry leaders, Adobe products users, and Adobe teams. The conference offers hundreds of informative sessions and hands-on labs for designers, developers, and decision-makers, and there are countless networking opportunities, from organized events to casual conversations in hallways between sessions.”

When: October 23-27, 2010
Where: Los Angeles, CA, USA at the Los Angeles Convention Center & the Nokia Theatre L.A. LIVE

FITC Unconference @ MAX 2010
“FITC brings together thousands of forward-thinking designers, developers, and business decision makers that are shaping the future of our industry. The Unconference is a way for attendees to convene in a casual setting to share ideas as well as host their own discussion groups. This year FITC has once again been chosen as one of the organizations to run one of the Unconference areas.”

When: October 25-27, 2010
Where: Los Angeles, CA, USA at the Los Angeles Convention Center

View Conference 2010
“VIEW Conference is the premiere international event in Italy on Computer Graphics, Interactive Techniques, Digital Cinema, 3D Animation, Gaming and VFX. VIEW 2010 will continue to focus on exploring the increasingly fluid boundary between real and digital worlds. Through lectures, meetings, tributes, exhibits, screenings and demo presentations VIEW will reveal the new digital frontier sweeping from cinema to architecture, from automotive design to advertisement, from medicine to videogames.”

When: October 26-29, 2010
Where: Turin, Italy, at the Conference center Torino Incontra

Web Developers Conference
“The goal of the Web Developers Conference was to get students engaged with the world of the web and what this beautiful industry offers as well as meeting professionals and making important contacts that could lead to placements and even graduate positions.”

When: October 27, 2010
Where: Bristol, U.K at the UWE Exhibition & Conference Centre.

Microsoft PDC10
“The PDC isn’t just about content and sessions — it’s an opportunity for you to get hands-on access to the latest technologies, have your questions answered by the people who conceived and built the technologies and plan the features and architecture to support your business goals. If you’re a developer, architect or technology leader involved in making strategic technology decisions for your company or organization, you can’t afford to miss the PDC.”

When: October 28-29, 2010
Where: Seattle, WA, USA at the Microsoft Campus

Usability Week 2010
“Many conferences offer cavernous exhibit halls, brief seminars on second-hand discoveries, and a sense of anonymity that can be truly alienating. Usability Week takes a different approach. In place of scattered, shallow talks, Usability Week offers up to 6 days of deep learning as international experts lead full-day tutorials on topics such as: Fundamental guidelines for Web usability; Applying information architecture (IA) principles; Writing for the Web; Application design; Integrating social features on mainstream websites; The human mind (how your users think).”

When: Various dates in October and December.
Where: San Francisco, U.S.A; Copenhagen, Denmark; Edinburgh, UK; Las Vegas, USA

November – December 2010 Events

An Event Apart San Diego
“From the makers of A List Apart, An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: November 1-2, 2010
Where: San Diego, CA, U.S.A at the Westin Gas Lamp Quarter

How to Web 2010 Conference
“Learn to build better web apps and businesses.”

When: November 3-4, 2010
Where: Bucharest, Romania at Hotel Intercontinental

FITC Edmonton 2010
“Back for its second year, FITC Edmonton promises to be jam-packed with presentations, demonstrations, and panel discussions. With some of the most interesting and engaging presenters from around the world, FITC Edmonton will be two days and nights that will leave you inspired, energized and awed!”

When: November 6-7, 2010
Where: Edmonton, AB, Canada at the Northern Alberta Institute of Technology

edUi Conference
“A learning opportunity for web professionals serving institutions of learning. Through a rare speaker lineup, including top innovators and industry peers, we provide inspiration, tools, and techniques to help web professionals serving colleges, universities, museums, libraries, and other institutions of learning address the challenges they share improving the experience of their users online. edUi 2010 offers something for every member of your web team, with sessions on usability, design, programming, rich media, strategy, social media, and more.”

When: November 8-9, 2010
Where: Charlottesville, VA, USA at the Omni Hotel

User Interface Conference
“UI15 is an intense, inspiring 3-day event, masterfully crafted to bring out the best in today’s UX professionals. We’ve assembled an all-star team of design experts to share their latest techniques in interaction design, content strategy, design thinking, and visual communication.”

When: November 8-10, 2010
Where: Boston, MA, U.S.A at the Renaissance Boston Waterfront Hotel

Build Conference
“The hand-crafted web design conference. Build is a small, yet perfectly formed, boutique design conference where interesting, talented web practitioners from all over the world come to share ideas, techniques and inspiration. Some are on stage; some are in the audience. For the second year running, we’ve created the conference we really want to go to. We think you might like it.”

When: November 8-12, 2010
Where: Belfast, Ireland at Waterfront Studio

RubyConf 2010
“RubyConf is the official International Ruby Conference. Founded in 2001, RubyConf has provided an annual venue for the ever-growing Ruby community to meet face to face to share, collaborate, and socialize.”

When: November 11-13, 2010
Where: New Orleans, LA, USA at the Hilton New Orleans Riverside

Full Frontal JavaScript Conference
“Full Frontal is a conference held in Brighton UK, for the front end developers with JavaScript skills ranging from beginner to advanced. If you’ve dabbled with JavaScript in the past and wanted to learn more about how the language works and what makes it tick, then this conference is for you.”

When: November 12, 2010
Where: Brighton, UK at the historic Duke of York’s Picturehouse

Future of Web Design
“The Future of Web Design is coming back to New York in 2010. The newly revitalised event has evolved into a beautiful three full days of essential web learning. A full day conference followed by 2 solid days of in depth workshops, all taught by the best in the industry.”

When: November 15-17, 2010
Where: New York City, NY, USA at New World Stages

Semantic Web Summit East
“How can you create value that will put you ahead of the competition? The Semantic Web Summit, formerly the Web 3.0 Conference, features innovators across industries examining the potential of the semantic web, and how it can transform the way you do business. This won’t be a day and a half of technical jargon — this event is about improving efficiencies in marketing and information management for a positive bottom line effect.”

When: November 16-17, 2010
Where: Boston, MA, USA at the Hynes Convention Center

Design City Graphic Design Expo
“Stay on top of your industry! Visit Design City and see the latest graphic design tools, services, and products from the world’s largest vendors. You’ll see and test software that you’ve been wanting to try, you’ll meet the people that you talk to on the phone every day, and you’ll be wowed by some of the latest technology created for your profession.”

When: November 20-22, 2010
Where: Toronto, ON, Canada, at the Direct Energy Centre

The Rich Web Experience
“RWX 2010 will cover the hot areas of interest in the web space today: HTML5, CSS3, JavaScript, Ajax Libraries, Semantic Web, iPhone, Android, Flex, GWT, NodeJS, Security, and more. RWX 2010 will feature 6 parallel tracks with over 15 speakers and 60 plus technical sessions/workshops. At RWX 2010 you will interact with industry experts, project leads, authors, and top developers.”

When: November 30 – December 3, 2010
Where: Fort Lauderdale, FL, USA at The Westin Beach Resort

Early 2011 Events

New Adventures in Web Design Conference
“This event will be sympathetic to existing and new challenges and opportunities faced by front-end web folks in their day-to-day work and beyond. That said, the content will be beneficial to a broad audience, and a number of attendees and guests represent agencies, organisations, and businesses across varied roles. Ultimately, this event is organised by designers, for designers.”

When: January 20, 2011
Where: Nottingham, UK at the Albert Hall

Interaction Eleven
“The IxDA Interaction conference is the premiere annual event for interaction designers, with content and activities relevant to practitioners, managers, educators, and students. Now in its fourth year, the Interaction conference has hosted leading speakers from consultancies, agencies, corporations, and universities around the world.”

When: February 9-12, 2011
Where: Boulder, Colorado, USA

International Conference on Intelligent User Interfaces
“IUI 2011 is the annual meeting of the intelligent interfaces community and serves as the principal international forum for reporting outstanding research and development on intelligent user interfaces.”

When: February 13-16, 2011
Where: Palo Alto, CA, USA at the Sheraton Palo Alto with workshops at nearby Stanford University

Information Architecture Summit
“The Information Architecture Summit is the premier gathering place for information architects and other user experience professionals. It’s grown from a special interest group’s efforts to define an emerging field, to a rich and expanding community of practice, shaping and informing multiple disciplines. You don’t have to be an information architect or user experience professional to enjoy the Summit. You simply have to love the art and science of structuring information.”

When: March 30 – April 3, 2011
Where: Denver, CO, USA

SXSW Interactive 2011
“SXSW Interactive features five days of presentations from professionals in emerging technology, networking events hosted by industry leaders, and a lineup of special programs showcasing new digital works, video games and innovative ideas the international community has to offer.”

When: March 11-15, 2010
Where: Austin, Texas, USA

What conferences will you attend?

What conference are you going to attend? Let us know — Smashing Magazine is often attending various conferences and events, and we would love to meet you in person!

Do you often attend conferences?online survey

Designing and Producing Creative Business Cards: Techniques and Details

njwebdesignfirm — Wed, 08 Sep 2010 15:55:31 +0000

Designing and Producing Creative Business Cards: Techniques and Details

via Smashing Magazine Feed by Lisa Valuyskaya on 9/8/10

Plenty of creative business card showcases are available out there. Many of these are beautifully done and well thought out, and they serve as inspiration for those who would like their business card to be more than the standard rectangular piece of paper. Yet little explanation accompanies these examples, and figuring out just how to bring your idea to life can be overwhelming, to say the least. This guide is meant to help you decide which technique is right for you, how to correctly prepare the files and what to look for in a printer.

[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.]

General Advice

Content Goes First

I never tire of repeating this to anyone who will listen. Don’t base your business card design on the fact that your printer has a special limited-time offer on round corners or metallic inks.

Think in terms of what the design will add to your message. Tempted to use rounded corners just because the cool kids are doing it? Maybe your card would stand out more by not using this technique.

Why do you want metallic ink? Do you think your name would really stand out in gold, even though your message is all about technology and recent code developments? You may want to rethink that. Or do you sell hand-crafted jewelry and want a design that reflects your latest silver creation? Then the silver ink might be the perfect solution for you after all.

The back of a business card is often ignored, but it can be a great place for extras that make your card even more memorable. Make it relevant to what you do, and make it useful if you can. You could include tips or a quick how-to guide relevant to your product, offer a free consultation, add a reminder for a date when you will offer discounts, or invite loyal customers to collect a stamp every time they purchase from you. Think of something that would make them want to hang onto your business card and consult it often. If you think the back should be reserved for note-taking, why not mark a few dotted lines, titled “Notes,” rather than leave it blank?

Talk to Your Printer

No one knows more about the techniques and materials available—and new ones come out all the time. Generally, printers are more than happy to give you all the industry news and advise you on techniques and materials. (If yours isn’t, you might want to look for a new printer.) If you learn a little about how they operate, they will appreciate it and be even more willing to help.

Size

While this article focuses on custom shapes and sizes, keep in mind standard sizes, too. Card holders are made to fit standard size cards, and I have often heard comments like, “If a business card doesn’t fit in my wallet, I don’t care how beautiful it is, it’s going in the trash.”

The standard sizes are 3.5 x 2 inches in the US and Canada, 85 x 55 mm in the European Union and 90 x 55 mm in Australia, New Zealand and Scandinavia. Or you could use a standard credit card as a reference, which about 85 x 54 mm or 3.34 x 2.25 inches.

Unless you have some other use for your cards in mind (for example, a bookstore’s card that doubles as a bookmark), you’ll want to stay within those dimensions. Smaller is okay, but anything too big won’t fit in most pockets, so consider going bigger only if you have reason to believe your cards will not be stored in wallets or holders.

Do you have the perfect idea but don’t know what to do with it? Maybe you’ve heard about die-cutting, varnishes, metallic inks, letterpressing and special materials but are unsure what they are exactly or which one is for you? Let’s jump into the different techniques!

Die-Cutting

Any card (or any printed material for that matter) that isn’t a standard rectangle or that has holes in it is created by a technique known as die-cutting. A metal template is prepared and is used to cut the paper in the given shape. The easiest way to think about this is to picture a giant hole-puncher, except that the holes are not necessarily round, but rather whatever shape you want them to be.

This means that, in addition to the artwork, you will need to provide the printer with a custom shape to “punch out” your cards.

The result can be as simple a round hole in the center of your card or as complex as a three-dimensional pop-out.

This simple and effective design makes use of the round hole on both sides of the card.

This card takes the shape of the product. Instant recognition!

Preparing the File

I’ll use die-cutting as an example, but most of these guidelines apply to the other finishes as well. The main differences are cited in the respective sections below, and I will provide links to help you read about the techniques in more detail. The guidelines below should give you a good starting point.

The best applications to prepare files for any special print finishes are the industry-standard Adobe Illustrator and InDesign. Photoshop is not suitable because it does not have the precision necessary for this kind of project.

As with any other print document, set up your file to the printed dimensions (i.e. whatever size you want your card to be, whether rectangular or a non-standard size), at 300 PPI resolution, using CMYK as the color space for all the elements of the artwork.

There seems to be a bit of confusion about DPI, PPI, CMYK and RGB. Preparing a file for printing with either Illustrator or InDesign is actually very simple.

In Illustrator, when creating a new document, click on the “Advanced” options tab (in some versions this is already visible). This brings up the options for both the resolution and color space. Set the resolution to 300 PPI and the color mode to CMYK.

Note that PPI, or pixels per inch, is often confused with DPI, or dots per inch. The latter refers strictly to printer hardware and its capability to reproduce dots on paper. When preparing files for printing, don’t worry too much about the DPI. 300 PPI is the magic number. Remember that and you’ll be golden. If you would like to learn more about DPI and PPI, see the link at the end for an article that explains it in much more depth.

InDesign documents are automatically created at 300 PPI. The only thing to make sure of is that the elements you insert in the document (such as photographs) are also at 300 PPI and use CMYK. Check this by selecting your image and bringing up the info window (hit F8).

For example, the image below uses the RGB color space; it should be changed to CMYK:

Even though you can use RGB images, it doesn’t mean you should. Yes, both InDesign and Illustrator are perfectly capable of converting the output to CMYK when you export a file as PDF, but if you ever have to submit your source files to someone or use the images for something else, this extra step could save you hassles.

And please-double check the resolution. Print out the card to check for pixelation. I know this sounds like a no-brainer, but so many people forget to check the printed result. What you see on the screen is not what you will see in print.

Another thing to check is your black text and line art, if you are converting any of them from RGB. They should be 100% K in CMYK color mode to avoid a muddy effect and color halos.

When your artwork is ready, create a new layer above the artwork. Call the layer something like “dieline.” You could be even more specific and name it “Dieline – DO NOT PRINT,” which would be especially helpful if you are not able to speak with the printer before submitting the file (say, if you are using a Web order form or your client is the point person for the printer.)

Now, create the guidelines for how your card should be cut. Make sure your outline for the die-cut uses a custom spot color, not CMYK; this allows the printer to extract the die-cut template when printing separations. To create a custom color, click on the little arrow in the swatches palette, and click to make a new swatch. In the dialog box that appears, choose any color that will stand out in your artwork, and then select “Spot color” from the drop-down menu next to “Color type.” The color can be anything you want. 100% magenta is quite popular because it usually stands out, but saving it as a spot color is important.

Also, remember to set the stroke (if it’s a custom crop shape) and/or fill (if you are cutting out holes) to “Overprint” to avoid knocking out the art below. You can bring up the options for Overprinting in InDesign by going to Window → Attributes, or in Illustrator by pressing F11 to bring up the “Attributes” window.

Let’s say your logo is a cloud, and you want the card to be cut in a cloud shape (not a very creative example but easy to explain). Your file in Illustrator would look something like this:

And your finished card would look like this:

If you wanted to cut out the cloud shape, it would look like this:

And the finished card would look like this:

Notice how the logo has moved from the artwork layer to the dieline layer and is now also filled with the custom spot color.

Make sure your artwork has enough bleed (i.e. it extends well past the edge of the document if the shape is regular or past the die-cut guidelines if custom). Usually 0.125 inch, or about 3 mm, is enough, but I tend to add more to be safe. Both InDesign and Illustrator allow you to add bleed in the “Document setup” options.

I won’t go into too much detail here, because bleed is a rather complex subject that deserves its own guide. For those of you interested in learning more, a couple of links are at the end of this article that explain it more thoroughly.

On the same note, do not put any important elements (such as logo or text) too close to the edge. Leave a buffer margin (again, about 0.125 inch or 3 mm) around the dieline or document, to avoid the risk of something getting cropped.

Usually, either a native file (AI, INDD, EPS) or high-resolution PDF is acceptable as the final file for printing. (Always check with the printer before preparing the final file.) If you prepare a PDF, make sure your custom fifth color is kept as a spot color and is not converted to CMYK. You can check it in the “Ink Manager” window (Export as PDF → Output → Ink Manager):

You can double-check that it appears in the Ink Manager list in the PDF itself (Acrobat Pro) by clicking Advanced → Print Production → Ink Manager:

Printing It

Most big print shops have die-cutting equipment. Check first if you are printing locally. The best way to make sure everything goes according to plan is to ask questions, explain your requirements and look over the proofs in person. Small printers outsource die-cut jobs. If you want more control, look for one that does it in-house.

If you are unable to print locally (for example, because your client is remote), you have two options. One is to find a printer local to your client. Usually, the client will already have one lined up, but I strongly recommend you get in touch with that printer yourself, rather than just pass the files to the client and let them handle it. Ask questions, send over mock-ups, get a proof sent back to you—do what you can to make certain that the job prints the way it should.

Alternatively, you could find an online print shop that offers die-cutting. Again, get in touch with them personally, rather than just submit the file via an online form, and make sure all your questions and concerns are addressed.

Printer Checklist

Need help choosing a print shop and communicating with it? Here are some things to keep in mind.

Before you do anything else, get their phone number or email address and get in touch. Tell them about your project, and ask about technical specifications and any other questions you may have. (This is a good time to request a cost estimate as well.) If you have more than one candidate, rinse and repeat.
Ask to see samples of similar pieces they have printed. Examine them. This could lead to more questions—or inspiration to make your project even better.
The main criteria I use in choosing a printer is how responsive and knowledgeable they are. You want someone who will actually check your file and contact you if there are any problems or questions; because no matter how great a printing deal you find, if your file has an error, that’s money thrown down the drain.
To save some money, you can often do this by asking the printer for advice. Would making the file layout slightly smaller allow them to fit more cards on one sheet? Could you adjust the shape so that there is less wasted paper? How about using fewer colors? Your printer should know the options; just ask!
In my experience, PDF is one of the safest options for prepress. Native Illustrator files work well too, but be sure to check which versions of Illustrator your printer accepts. Always check which versions of any Adobe software your printer uses if submitting native files.
Ask the printer if they have .joboptions files. These files can be imported into Adobe applications and will give you presets for exporting to PDF or EPS. This is the easiest way to make sure that your final files are exactly the way your printer needs them. If they don’t have these files, both InDesign and Illustrator have presets for saving in PDF. Just make the necessary adjustments; for example, you will have to add the bleed to these presets manually (see the links at the end for step-by-step instructions).
If you are not able to speak with the printer, add an email message or a file with instructions. Don’t forget to include your contact information so that they can call or email you if they have any questions!

You’ve probably noticed that most of these tips emphasize the importance of communicating with your printer. I cannot stress this enough: every project is different, and communication is the key to getting the best result possible.

How Much Will It Cost?

While pricing depends on many factors, there is usually a set-up fee when using a die-cut or other special finishing technique. (Remember the giant hole-puncher mentioned above? They need to make one of those, just for you.)

The fee will be the same whether you print 50 or 500,000 cards, so printing larger quantities is much more cost-effective.

This may not be the case with certain popular formats (for example, rounded-corners business cards) because the printer would reuse the same template for multiple jobs, hence the special offers.

Special Finishes

I’ve devoted a big portion of this article to die-cutting because the file preparation and printing process described here is similar to many other techniques. But let’s look at some of them.

Spot UV Coating

This special finish is achieved by applying a clear varnish to an area of the card defined by you. The effect is a slightly raised design element, with a glossy, matte or satin finish. The example below shows a glossy finish:

File preparation is done the same way as for die-cutting, but instead of specifying a stroke, you specify a shape or area to apply the varnish to. This is still done by filling it with a spot color and, in this case, setting the fill to overprint.

Letterpressing

Letterpressing is done by inking a raised surface and then pressing it into the paper, giving the design both color and depth. This technique is suitable for vector images and text, using solid Pantone inks. An article linked to at the end of this article provides more technical detail. Here is an example of a business card done with this technique:

Embossing

Similar to die-cutting, a die is used to press the paper up, creating a three-dimensional raised effect.

Foil stamping

With this technique, a layer of thin foil is applied to an area of the card you specify.

File Preparation for Special Finishes

File preparation for all of these effects is similar to that of die-cutting: you have to define the area to be coated, embossed or whatever the effect is. But you might need to submit two files: one with the artwork, and another with the area to apply the effect to.

Make absolutely certain these two files line up perfectly. The easiest way to do this is to use a file with separate layers: one or more for the artwork, and another for the special finish guidelines (as described for the die-cutting file preparation above). Then, simply save them as separate files by first hiding one layer and then the other.

When using photos for a special finish, create a clipping path in Photoshop before placing the photo in Illustrator or InDesign. Then you can use this same clipping path as the mask for your effect either by choosing to export the clipping paths to Illustrator or by right-clicking (PC) or Control-clicking (Mac) on the clipping path in InDesign and converting it to frame. (You might want to check the options first if it isn’t showing by going to Object → Clipping Paths → Options.)

For example, you can use different masks with this image:

This mask will apply the effect to the entire photo:

While this one will apply it only to the foremost apple:

Special Inks

Additional inks can be used to make your card stand out even more. Metallic, pearlized and fluorescent inks can produce interesting effects. (To better preserve metallic inks, consider putting a varnish on top.) The even more common Pantone colors give a different and more solid effect than their process equivalents because they are opaque.

This one is simple: just find a custom color you like by looking at the Pantone swatches, and add it to your document. Prepare your artwork as you normally would, but make absolutely certain that your output does not convert to CMYK if you are preparing a PDF (as described above).

Note: the easiest way to prepare photos with a special ink is to convert your image in Photoshop first to grayscale and then to duotone. Choose your ink(s) from the Pantone library, and tweak your settings as necessary. (Working with color channels is a complex way to get more control over the result, but I don’t recommend this to Photoshop beginners, and Photoshop experts probably already know how to do this.)

Duplexing and Triplexing

This technique is about using two or more sheets of paper glued together. The effect achieved is commonly referred to as edge-painting or edge-tipping, because a different-colored sheet of paper that is inserted between the two main ones produces colored edges “inside” the card (triplexing), as seen here:

Using only two sheets (duplexing) gives a two-color edge—one on the front and one on the back:

It adds a touch of elegance and makes your card thicker than the standard stock. Combining this technique with die-cutting—budget permitting—gives an even more interesting result.

Scented Inks

You won’t find many examples of this technique on the Internet because it doesn’t exactly translate as a photo. Still, it is an interesting way to make your business card jump out.

Available scents range from chocolate to mildew. If that is not enough (and money is no object), you can create a custom scent for an extra fee.

Special Material

This is a vast subject because the options are countless. We will only touch on this topic. To see and feel the different kinds of material available, visit your printer!

Paper and Cardboard

There are so many varieties that I wonder why most people still use the same white or off-white cardboard stock for their business cards. From soft-as-cloth finishes to cold-pressed textured paper, there are enough options for everyone’s needs. The options are rather hard to describe; I recommend you make a trip to the printer (and give yourself an hour or so to ponder the choices)

File preparation is no different; except with colored paper stock, keep in mind that the colors will not display the same way in your software. To simulate the effect, use a layer of a similar color below the artwork, and set the artwork layer to multiply; or to about 70% opacity with darker color stocks.

Plastic

Transparent, frosted, stretchy—there are plenty of options for a plastic stock.

Plastic is usually printed with a different process, such as screen printing. Check with your printer to see what colors you can use. Special printing processes usually require that you use Pantone inks. Remember to account for any special effects, such as transparency and stretch. Giving general advice on this one is hard, because each material has its own requirements.

Metal

If your service or product is related to a metal, you might want to consider using metal as a material. You could simulate a credit card or computer. Keep the design minimal for a more striking effect.

Again, check with the printer before preparing your artwork to find out what process they use to print on metal and which colors you can safely use.

Other Material

Other options are wood, plexiglass, cloth. You could combine these and use a special finish as well. Hopefully this article has given you some ideas, and you will know how to start researching: by speaking with your printer.

Customizing by Hand

Sometimes, printing a highly customized card is simply not worth it, especially if you need only a small quantity. Does that mean you should dismiss your creative idea and stick with a standard solution? Not necessarily.

All you need is some imagination and a lot of patience. An appetite for crafts or having crafty friends or relatives can be a big plus, too.

You could print a standard card as the base of your idea and then customize smaller quantities by hand. I recommend doing this with fewer than 500 cards, or you will be overwhelmed. If you have crafty friends or relatives who are willing to help, you could tackle more.

Again, keep it relevant to the content. For example, colorful hand-stitching to underline a key phrase or “stitching” your design would be fun for a textile or fashion business:

Gluing on an element would work for crafts stores. Or you could glue a piece of fabric or something else that characterizes your service:

Incorporating something relevant to what you sell is a great idea, and there are plenty of ways to do this. Here is an excellent example:

A paper clip would work for a business supply store or even a business consultant, while a dried or plastic flower would work for a flower or gift shopt. Just about any kind of business can find something relevant to add on.

You could even invite the recipient to customize the card themselves; for example, by including cut and fold lines that transform your card into a unique shape. Simple examples are a paper doll for a children’s store or origami for a stationery store. Just make sure it’s relevant and fun, otherwise your recipients are unlikely to go through the trouble of cutting out and folding the card.

Hopefully this article offers enough information and inspiration for you to make business cards that are as creative as your imagination allows, and on any budget.

Want To Know More?

Here are a few articles that go into more detail on some of the topics covered:

Living in a Die-Cut World
An in-depth article on die-cutting from GoMediaZine.
Display, Printing, DPI and PPI
If you are really curious about the differences between DPI and PPI, this article by Photo.Net is for you.
Brand Spanking New Colors: Making Custom Spot Colors in Illustrator
A step-by-step guide with screenshots.
Page Bleed: What Is It, How Much Is Needed and How to Fix It
An easy-to-understand explanation of why bleed is needed and how much you need.
Adobe InDesign Tips
Tips on setting up bleed and exporting to PDF in InDesign.
Illustrator Tips Tips
Tips on setting up bleed and exporting to PDF in Illustrator.
TheStandard: Prepress
A very thorough guide from TheStandard on preparing your artwork for printing.
PDF Basics: The File Format and Its Use in Prepress.
Everything you need to know about preparing PDFs for prepress.
How to Choose a Printer or Prepress Specialist
Excellent tips from the printers themselves, put together by BoDo.
New Uses for Old Clipping Paths
A detailed explanation from Adobe on using clipping paths as frames in InDesign.
Combining Metallic Inks With Color
Useful tips on using metallic inks.
Creative Business Cards: Uses of Various Shapes and Materials
A showcase of different techniques and materials.

You may be interested in the following related posts:

(al)

Showcase of Interesting Navigation Designs

njwebdesignfirm — Wed, 08 Sep 2010 01:02:05 +0000

Showcase of Interesting Navigation Designs

via Smashing Magazine Feed by Sarah & Adrienne Kahn on 9/7/10

Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues.

If page is long and provides different levels of navigation, will users be able to find their way through the site and use proper navigation quickly? Forcing visitors to use certain keystrokes to navigate, rather than what they’re used to, might be novel, but is that effective if you have to explain instructions prominently on your home page? Here are some examples for your reading pleasure.

[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.]

Made by Water

A JavaScript-Powered Vertical Fun

The large bold headings and modern color palette on Made by Water feel fresh and fun. The grid layout is nice and clear, while the background texture is subtle but interesting. The icons at the top are visually appealing, and the animation makes them fun to click. It’s not immediately apparent what they are for, though. Some text would help to clarify that they are for navigation.

Vertical navigation buttons with icons.

The other problem with the navigation is the yellow “up” arrow that is displayed in the footer of the page. One would expect it to bring you back to the top of the page, but it leaves you more in the middle. The circle of stripes that follows you down as you scroll doesn’t match the background pattern, but we can’t tell if it’s part of the navigation. At any rate, we clicked it to no effect.

Finally, while the text at the top is fun and exciting, finding the “Who am I” section is a bit hard. It’s not immediately clear what the website is about.

Made in Haus

Horizontal Slideshow as Navigation

The large page keeps Made in Haus from feeling unoriginal, and the smooth motion is a bit different from many of the sliders we’ve seen. Bumping the accompanying text up into the body of each slide is a good way to keep it above the fold and visible as the user flips through the slides. The sliders on the sub-pages are also effective, being an easy way to skim through a fair amount of content. Also, nice hover-effects under the slideshow look attractive and give an insight into the work of the agency.

Bold horizontal navigation.

One drawback is that the triangle on the far right of the upper navigation menu is a bit confusing. It appears to link to the home page, as a logo would, but we’re not quite sure why. Also, the arrow on the right side of the slideshow may be a bit too tiny, making it a bit difficult for users to navigate the slideshow. We’ve seen a similar navigation earlier, on Weightshift which is a nice example of an alternative implementation of this technique.

Foundation Six

Animated Text Scrolls Down With the User

Foundation Six features a few big bold screenshots at the center of the page, giving us the impression that they were interactive in some way. The first thing that we did was try to click on the screenshots, but nothing happened (except for the central one which links to the description of the project featured in the center of the page), which was a little frustrating.

Text moves instead of images.

The headings are large and very clear, and the type is handled nicely throughout. The color palette is very soft and clean, and it nicely matches the atmosphere of the site. The call-to-actions buttons are large and easy to find, read and click. The subtle hover effects in the upper navigation enhance the user experience, making it smooth. Additionally, the contact form tracks well and is nicely laid out, while the map is a nice touch. The company scores bonus points for linking to Bring Down IE6.

On the projects page, the way the explanatory text slides down instead of the images is original. But being so unexpected, it could be a little disorienting, which may or may not be a good thing: is explanatory text really the best place to make a statement with moving parts?

Word Refuge

Textual Content in a Horizontal Slider

Word Refuge features an old-fashioned bookish vibe. Because it is a copywriting service, this seems appropriate. The contact form is prominent, easy to find and easy to use. The logo is also nicely done, and the color palette is rich and regal.

Various arguments for the company are organized into slides.

One small point is that the tag lines in the main navigation are effective under some of the menu items but not under others. Some of them feel redundant, as if they’re there only to balance things out. As a rule, if text doesn’t add any explanation, it shouldn’t be there. That said, the text throughout the website is nicely kerned, and while the page is wordy, the text is easy to skim through and read.

Relogik

Animated Horizontal Slideshow Navigation

Relogik is another example of minimalism done well. The logo is understated and sophisticated. Most design elements are semi-transparent and appear on hover. The close-up images are bold and make the content the focal point of the page. The code is clean and well-structured and uses a solid grid layout with pulls to keep everything squared up.

Sliding horizontal navigation.

The classic numeric navigation makes it easy to navigate the slideshow. One weakness is that the contact information has a very low contrast against the background. A darker color would help to highlight it. The project detail pages do a good job of showing rather than telling and of displaying each piece in a real-world context.

Drexler

Horizontal Navigation… If the User Follows Instructions

The horizontal navigation on Drexler works both with the arrow keys and mouse clicks. On the first glance, it’s not clear how to navigate the site: you need to either read the hint in the upper area of the site (“User your arrows”) or experiment with the design to figure it out. To browse blog posts, users need to click on the illustration of the post or use keyboard arrows. The design itself is visually appealing, but the navigation scheme isn’t straightforward.

“Use your arrows” to navigate.

The retro color palette and big bold fonts make the website colorful and energetic, but they also might be a little overpowering. The “t” for Twitter in the upper right is an interesting break from the usual little bird, but the downside of breaking with convention is that you might lose clarity. We didn’t know what the icon was for until we clicked it, and we probably wouldn’t have clicked it if we were merely visiting the website as a normal user. The contact button is amazing indeed, as it claims. The multi-column contact form is an interesting take on the email form. It seems effective, and it tracks very well. This is a design that needs to be explored to be understood — but maybe it was the intention of the designer in the first place?

The logo is simple and clean, but again, it adds a note of confusion. The yellow underline on mouse-over feels unbalanced, because the rest of the logo isn’t highlighted. One other thing to note is that the page changes color to match the project being displayed. This is an unusual take on the portfolio. Usually, projects are displayed uniformly, sometimes to the point of being indistinguishable. This approach makes the projects stand out, in a good way.

Komrade

Vertical Navigation With a Twist

This page allows users to forge their own path through the website. Komrade features original illustrations, a fresh color palette and an original “Choose Your Own Adventure”-style navigation scheme. The navigation has the following cracks in it, though:

The light blue text looks like it’s hyperlinked. One of the first things a user sees upon loading the page is the blue “Who’s Komrade” heading. The first thing we did was click it, but nothing happened. This started the user experience off on the wrong foot. With this unusual scrolling navigation, distinguishing the clickable from the unclickable is extremely important.
The numbered navigation for Komrade’s past work does not stand out enough. The red circles look like yet more flowers, which caused us to pass over them several times before figuring out that they were the navigation. This goes back to the clickable/unclickable issue. Well-placed labels would go a long way here.

“Choose Your Own Adventure”-style navigation.

All For Design

Scrolling Navigation and “Shelf”-Navigation

All For Design feels light and airy, with its crisp woodcut headings and subtle effects such as the Twitter icon that flies on hover. The design os single projects pages is especially nice, making clear exactly what was involved in each project. The section “some inspiration” nicely puts books, useful websites and articles on a “shelf” and has subtle shadow- and hover-effects. The only problem is that the title-attribute is displayed on hover together with the screenshot which makes it a bit difficult to focus on one of them.

“Shelf”-navigation.

Calendar next to the contact form.

The calendar next to the contact form is also a great idea: it sets expectations and makes it easy for potential clients to plot a timeline. While the font is scannable, it still feels a bit too wordy overall, although the shadow effects, subtle borders and custom icons keep the eye flowing down the page.

Digital Labs

Horizontal or Vertical Navigation?

With the prominent screenshots on this website, one would think the page would have horizontal navigation; in fact, the page is static. Digital Labs uses a wide layout, with a nice textured background. The dark colors make it feel spacious without being too spacey. One issue, though, is that the orange ribbon on the right looks like it should be clickable, but it isn’t. The text-based social media widget, which responds to mouse-over, is an interesting touch. The web design scene is full of social media icons, so a text-based widget stands out.

The static screenshots above look like a slideshow.

The other issue is that the “Are you ready to get started?” link at the bottom is a mailto: link, rather than a link to a contact form. This is acceptable, but a drop-down form in that space would really kick things up a notch.

Calobee Doodles

Classic Thumbnail and Lightbox Combination

Calobee Doodles, an illustration-based portfolio website, has fun details, such as the objects and people falling from the sky. The cloud menu items could be clearer, though. At first, we were not sure what “Custom” stands for (it stands for custom design and illustration work). However, the menu benefits from descriptive tooltips and appear on hover. Still, a different wording, for instance “Work”, would have been clearer.

The website uses the classic thumbnail and lightbox navigation.

A thumbnail gallery is a common way to display work, but in this case illustration thumbnails are a bit too small, and they are linked to images. A lightbox may work better in this context. The bottom-up-navigation may be useful for some readers, and the footer is truly remarkable. Also, it would be nice to remove dotted lines appearing on click in the navigation menu. A simple outline: none; for links with proper styles for :focus and :active states would suffice.

Build

Classic Top-Level Navigation

While the overall layout of Build is clean and modern, the content could stand to be more easily scannable, for two reasons for this. A look at that code suggests that the margins and padding are a bit arbitrary. The padding for the main body conforms to a design pattern, but the major content elements do not. Maybe it would be a good idea to use multiples of a set base number for the margins, padding and borders, so that there is a consistent ratio throughout.

Classic top-level navigation.

Secondly, the contrast of the text in the content sections has some problems. The contrast between strong white and strong grey background is very striking, and maybe a bit too strong. The second part of the page looks a bit busy and a bit difficult to scan, probably because the colors of the headings and descriptions are very similar. Maybe if the headings were kept as a serif, the content blocks could be distinguished a bit by making the text lighter and using a sans-serif font. Some textual variation or typographic work might add visual interest as well. Subtle hover effects for links are attractive and fun to click on: nice touch!

We liked the listserv sign-up widget in the footer of the page. A sample email in the relevant field, along with more space on the line, could be a helpful, though. Also, an explanation of what exactly users are meant to type here would be great — for instance, a sample e-mail in the input field. Also, the mouse pointer should change after you click on the submit-button, but in this case it doesn’t. We fumbled a bit at first until we looked at the code.

Mail Chimp

Graphics-Heavy Vertical Page With No Navigation Other Than Browser Scroll Bar

Mailchimp’s promo page is a visually appealing website with a lot of interesting vintage graphics. Some real strengths of this website are the many interesting textures and patterns. The color scheme is modern and appealing. There are, however, a few usability problems. First, there is actually no navigation. We’re as big a fan of shedding unnecessary conventions as the next guy, but if we were an existing customer visiting this website, we would have no idea what to do. The “Sign in” link is obscured at the bottom of the page, with few visual cues to reward the user’s patience as they scroll down. Even a few small links at the top would add some structure and provide some cues for navigation, which would make the whole website make more sense.

Graphics-heavy vertical website.

Secondly, the edgy graphics, while fun and visually interesting, don’t give much sense of what the main point of the page actually is (if you are visiting the site for the first time). The primary message is only delivered in the paragraph towards the middle, and even it is a bit hard to read, with the small white text over the shades of gray. The paragraph would be more effective if it were bigger and had more contrast. The promotional videos are really great and remarkable, though.

Pline Studios

Minimalism in Vertical JavaScript-Based Navigation

Pline studios is an architecture firm, so it makes sense for it to have a spacious vertical layout with graphic touches that are reminiscent of CADD drawings. The big headings are clean and visually appealing and do a great job of leading the eye around. In an unconventional navigation scheme, making it clear where to click is critical, and this website makes it extremely clear. The navigation is repeated in each section, so the user is never stranded and left to scroll.

One problem, though, is the project descriptions; so much focus is on the images and animations that there’s actually very little explanation about the projects themselves.

Minimal vertical navigation.

Transformology

Persistent Toolbar-Navigation

Transformology shows another way to handle navigation on a vertical page. When the user scrolls the page, the navigation menu at the top of the site changes accordingly. The elaborate headings in the text blocks are visually appealing, but almost to the disadvantage of the content that should be showcased. The headings make the content easy to see but more difficult to read. The website has a clean, solid grid layout, but it may not always do an effective job of displaying the content, which sometimes feels overpowering.

Static navigation follows wherever you go.

Burton

Sliding Captions and Tabbed Boxes in a Vertical Layout

The first thing we noticed about Burton is the nice visual details, such as the animated eyes on the “Search and Destroy” search box, and the animated GIF on the mouse-over logo. The jigsaw layout is clean, bold and easy to scan. The mouse-over labels are a good way to display details without overwhelming users with text, and the mini-tabbed layouts inside the content blocks keep things clean and minimal. All of the content is available without being visible all at once.

The scrolling vertical navigation is aided by the jigsaw sections with sliding captions.

A problem with the navigation, though, is the up and down arrows on the side of site’s pages. We expected that they would allow us to move up and down the page; instead, they pop out a text-based navigation menu. Not knowing what sections of the page correspond to the labels (for instance, when you visit the page for the first time), this isn’t very useful. Still, overall very nice, original and memorable design.

New Adventures in Web Design

Fun Shapes That Feel Like Navigation

At the first sight, the interactive shapes in the middle of the New Adventures page feel a bit like navigation, in that they change as you move through the website, providing cues that the page has changed. New Adventures is an example of a clean and solidly structured design. The rainbow of dynamically transforming shapes is fun and original. Adding more color could make the design a bit stronger; the brown palette is calm and professional, but it probably could have been be more interesting with some accent colors.

The shapes move all over the place!

The typography overall is effective, and the line heights and margins make the information very clear and concise. An interesting touch of the design would be to highlight the speaker’s photo when a user hovers over his or her name in the list of speakers. Also, when trying to return to the front page, we clicked on the text logo in the left upper corner (“New Adventures in Web Design”), but it isn’t clickable which is a bit confusing. We had to use the small “Home”-link in the upper left corner instead.

Christopher Kaufman

Wide Horizontal Slider With a Difference

On Christopher Kaufman’s page, the sub-content panels slide up as the slider moves left to right. The layout is clean and organized, the background is colorful and unique, and the slideshow adds plenty of eye candy. The logo is minimal but detailed, and the top-level navigation is clear and effective. One drawback is that the background image is a pretty big file; as it loads, it creates a flashing effect that can be disorienting. One could argue that the height of the slideshow is optimized for larger screens; but scrolling through the slideshow content, some users can see that the content below has changed, yet have to scroll down to read all of it. This isn’t necessarily a big issue, but the slideshow panels could be a bit shorter.

The wide horizontal navigation forces users with small screens to scroll.

Chapolito

Another Example of Tabbed Navigation

Chapolito is really a unique website. The footer animation catches the eye right away, and the abstract shapes in the top-level navigation are original, as is the way the logo is integrated in the navigation, which keeps the brand as a focal point. We do have a suggestion for the sub-navigation in the portfolio section, though. The circles-as-progress indicator probably works best for slideshows of about five pieces of content or fewer. With such an extensive showcase, the user might get lost and not be able to find a particular project again. If numbers were in the circles, that would help.

Interesting top navigation.

Flywheel Design

Sliders and Graphic Tiles That Flip on Mouse-Over

Flywheel Design gives a good overview of its work right on the home page. The hover-over navigation is fun and gives users an incentive to mouse around and explore. The background is simple without being boring, making this a good example of minimal design. One problem for us was the slider navigation on project sub-pages: almost too minimal, because it took us a while to figure out it was there. Making it a little bigger or adding a splash of color might help.

Flip-tile style navigation.

Wishbone Design

Flash-Based Animated Navigation

Wishbone Design is created for kids and parents, so it makes sense for it to be fun and full of Flash animations. The navigation is entertaining but a little hard to use. Having the sub-elements open on hover seems to be the root of the problem; changing it to a click might give users a greater sense of control. Hover navigation should be as speedy as possible. The main slideshow is eye-catching, but you really have to dig to figure out that this is actually a company manufacturing bicycles (among other things). An explanatory blurb or even some slides would help new visitors. Another problem: if you’re going to have audio, please give users a way to turn it off! Overall, the site is truly remarkable, with attention to details. Nice work, this is what Flash is supposed to be used for!

Flash-based navigation.

Basmatitree

Flash-Based Animation That Could Be Navigation

We can’t lie: on first arriving on 60 mq missione casa, we were really hoping that the spoons were the navigation. We were sad to find out they aren’t. That said, this is a pretty fun layout for a food blog. The typography could benefit from some more variation, though. Also, the posts would be easier to scan if some texture or color variation were added to the columns.

Flash-animated spoons are fun!

Minus Five

An Entirely Horizontal Sliding Website

Horizontal navigation can be problematic. In this case, though, Minus Five is larger than life and colorful. The hover-over “Forth” and “Back” controls are large and easy to see, making it abundantly clear where you can click and what you are supposed to do, and avoiding one of the common drawbacks of unconventional navigation.

Entirely horizontal navigation.

For a portfolio, one thing that could confuse users is that the featured websites are not linked to anything. Using images embedded in a Mac frame to convey that they are websites is a good idea, but they make it a little hard to see the details in the designs. Another questionable design choice is positioning the portfolio pieces to the right of the background image. This makes it feel as though the background is the focus, instead of the portfolio pieces themselves. Also, the page is difficult to browse if you don’t have a proper wide screen display, because you see only small chunks of the site at once.

Retinart

Completely Text-Based Navigation

Retinart is a lovely example of a typography-focused website. The nice, even gutters and margins are relaxing on the eyes. One thing that’s a little unexpected is that the “Feedback” tab on the left side doesn’t pop out from the side (as most users would expect), but rather opens a modal window.

The beautiful typography goes well with imaginative language.

Notice the careful attention to language. In conjunction with beautiful type, a designer can really take it to the next level by using beautiful language to emphasize the quailty of the site.

Collision Labs

Classic Tabbed Navigation

Collision Labs is energetic. We immediately wanted to take this design firm’s advice and fasten our seat belts! The large header block is exciting without being overpowering. The portfolio sub-pages are clear and do a good job of both telling and showing what the projects were about. The typography, though, is a little uniform. One thing that confused us was the Twitter icon in the footer navigation: the bird flips upside down on hover. We couldn’t really see the reason for this, so it felt vaguely unsettling. Overall, though, an effective website, and a good example of judicious and not excessive icon usage.

Bold color and traditional navigation.

Summary

In sum, navigation is as much about communicating instructions for finding content as it is about being fun and interesting. There are some points to take away. For instance, if something is clickable, make sure it looks clickable. If it’s not clickable, make sure to communicate that, too. Also, be fun without being confusing. And show, don’t tell. If you have to tell users what to do, then the navigation has failed. After all, the crucial attribute of any truly exceptional website is both aesthetics and the usability of its navigation.

Would you like to see more similar showcases on SM?

Let us know what you think in the comments to this post! And please like this article below if you find it useful and would love to see more similar posts on Smashing Magazine in the future. Thanks.

Showcase of Interesting Navigation Designs

njwebdesignfirm — Wed, 08 Sep 2010 01:02:04 +0000

Showcase of Interesting Navigation Designs

via Smashing Magazine Feed by Sarah & Adrienne Kahn on 9/7/10

Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues.

If page is long and provides different levels of navigation, will users be able to find their way through the site and use proper navigation quickly? Forcing visitors to use certain keystrokes to navigate, rather than what they’re used to, might be novel, but is that effective if you have to explain instructions prominently on your home page? Here are some examples for your reading pleasure.

[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.]

Made by Water

A JavaScript-Powered Vertical Fun

Vertical navigation buttons with icons.

Finally, while the text at the top is fun and exciting, finding the “Who am I” section is a bit hard. It’s not immediately clear what the website is about.

Made in Haus

Horizontal Slideshow as Navigation

Bold horizontal navigation.

Foundation Six

Animated Text Scrolls Down With the User

Text moves instead of images.

Word Refuge

Textual Content in a Horizontal Slider

Various arguments for the company are organized into slides.

Relogik

Animated Horizontal Slideshow Navigation

Sliding horizontal navigation.

Drexler

Horizontal Navigation… If the User Follows Instructions

“Use your arrows” to navigate.

Komrade

Vertical Navigation With a Twist

The light blue text looks like it’s hyperlinked. One of the first things a user sees upon loading the page is the blue “Who’s Komrade” heading. The first thing we did was click it, but nothing happened. This started the user experience off on the wrong foot. With this unusual scrolling navigation, distinguishing the clickable from the unclickable is extremely important.
The numbered navigation for Komrade’s past work does not stand out enough. The red circles look like yet more flowers, which caused us to pass over them several times before figuring out that they were the navigation. This goes back to the clickable/unclickable issue. Well-placed labels would go a long way here.

“Choose Your Own Adventure”-style navigation.

All For Design

Scrolling Navigation and “Shelf”-Navigation

“Shelf”-navigation.

Calendar next to the contact form.

Digital Labs

Horizontal or Vertical Navigation?

The static screenshots above look like a slideshow.

Calobee Doodles

Classic Thumbnail and Lightbox Combination

The website uses the classic thumbnail and lightbox navigation.

Build

Classic Top-Level Navigation

Classic top-level navigation.

Mail Chimp

Graphics-Heavy Vertical Page With No Navigation Other Than Browser Scroll Bar

Graphics-heavy vertical website.

Pline Studios

Minimalism in Vertical JavaScript-Based Navigation

One problem, though, is the project descriptions; so much focus is on the images and animations that there’s actually very little explanation about the projects themselves.

Minimal vertical navigation.

Transformology

Persistent Toolbar-Navigation

Static navigation follows wherever you go.

Burton

Sliding Captions and Tabbed Boxes in a Vertical Layout

The scrolling vertical navigation is aided by the jigsaw sections with sliding captions.

New Adventures in Web Design

Fun Shapes That Feel Like Navigation

The shapes move all over the place!

Christopher Kaufman

Wide Horizontal Slider With a Difference

The wide horizontal navigation forces users with small screens to scroll.

Chapolito

Another Example of Tabbed Navigation

Interesting top navigation.

Flywheel Design

Sliders and Graphic Tiles That Flip on Mouse-Over

Flip-tile style navigation.

Wishbone Design

Flash-Based Animated Navigation

Flash-based navigation.

Basmatitree

Flash-Based Animation That Could Be Navigation

Flash-animated spoons are fun!

Minus Five

An Entirely Horizontal Sliding Website

Entirely horizontal navigation.

Retinart

Completely Text-Based Navigation

The beautiful typography goes well with imaginative language.

Notice the careful attention to language. In conjunction with beautiful type, a designer can really take it to the next level by using beautiful language to emphasize the quailty of the site.

Collision Labs

Classic Tabbed Navigation

Bold color and traditional navigation.

Summary

Would you like to see more similar showcases on SM?

Let us know what you think in the comments to this post! And please like this article below if you find it useful and would love to see more similar posts on Smashing Magazine in the future. Thanks.