Finding Alternative Sources Of Typographic Layout In Our Surroundings

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



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

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

The Framework Of Sources For Typographic Layout

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

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

[Offtopic: by the way, did you 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:

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

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

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

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

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

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

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

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

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

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

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

Finding Inspiration In Your Surroundings

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

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

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

What About Web Design?

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

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

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

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

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

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

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

Schematicwebpage in Finding Alternative Sources Of Typographic Layout In Our Surroundings

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

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

Fauborg in Finding Alternative Sources Of Typographic Layout In Our Surroundings

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

Crowley2 in Finding Alternative Sources Of Typographic Layout In Our Surroundings

Crowlye in Finding Alternative Sources Of Typographic Layout In Our Surroundings

Exploring Web Design With Webkit

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

Linearabstractiontext in Finding Alternative Sources Of Typographic Layout In Our Surroundings

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

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

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

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

Conclusion

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

References

(al)

Tweet


© Alma Hoffmann for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | <a href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Finding%20Alternative%20Sources%20Of%20Typographic%20Layout%20In%20Our%20Surroundings'%20http://www.smashingmagazine.com/2010/09/14/finding-alternative-sources-of-typ…” title=”Tweet us!”>Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Posted in Uncategorized | Leave a comment

iPhone App Designs Reviewed: Critique Board and Lessons Learned

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



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

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

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

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

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

1. Foobi

“Alex,

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

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

— Remy”

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

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

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

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

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

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

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

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

Summary Information Is Hidden

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

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

Summary Information Is Not Well Designed

Additionally, the summary is not informative enough.

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

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

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

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

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

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

One More Thing

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

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

2. Budget Planner

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

— Alex Sabonge”

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

Here’s an overview of how Budget Planner works:

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

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

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

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

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

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

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

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

Here are some downsides to the calendar view:

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

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

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

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

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

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

Next Steps

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

This capability could help users think through their options:

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

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

3. Units United

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

— Meils Dühnforth”

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

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

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

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

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

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

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

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

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

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

Send Your App For A Free Review!

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

(al)
Tweet


© Alex Komarov for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | <a href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'iPhone%20App%20Designs%20Reviewed:%20Critique%20Board%20and%20Lessons%20Learned'%20http://www.smashingmagazine.com/2010/09/15/iphone-app-designs-reviewed-crit-b…” title=”Tweet us!”>Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , , ,

Posted in Uncategorized | Leave a comment

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

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



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

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

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

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #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?

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

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

What is it?

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

What is it good for?

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

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

Export features

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

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

Formats support

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

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

Highly extensible

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

The Showcase Of Fireworks Illustrations

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

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

1. David Hogue

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

{01} Golden Compass illustration

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

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

{02} Quartz Watches illustration

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

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

2. Matthew Inman

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

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

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

{03} 15 Things Worth Knowing About Coffee

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

{04} 20 Things Worth Knowing About Beer

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

{05} How a Web Design Goes Straight to Hell

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

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

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

{07} Duck in Coffee illustration

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

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

3. Ryan Hicks

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

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

{08}😄 Brownbag Poster series

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

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

This illustration is just one example of a series from the 😄 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}😄 Lunchbox poster

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

{10}😄 Beet poster

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

{11}😄 Mackerel poster

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

{12}😄 Salad poster

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

{13}😄 Brownbag poster

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

4. Rogie King

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

{14} rogieking.com personal site illustrations

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

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

{15} Logo for rainboxx.de

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

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

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

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

{16} Mad Mimi Illustrations

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

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

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

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

{17} Adaptive UI icons

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

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

5. Xiao Cai

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

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

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

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

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

{18} DCP2 Fireworks illustration

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

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

{19} DCP3 Fireworks illustration

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

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

{20} DCP4 Fireworks illustration

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

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

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

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

{21} DCP8 Fireworks illustration

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

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

6. Jon Hicks

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

{22} Mozilla Firefox logo

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

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

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

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

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

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

7. Fabio Sasso

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

{23} Apple Air banner

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

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

{24} Light Effects illustration

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

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

{25} The Abduzeetles Rockband website design

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

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

8. Lucian Dragomir

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

Lucian also loves to share his work at deviantart.

{26} Vectorizer illustration

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

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

{27} Anger Management illustration

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

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

{28} iCry illustration

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

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

{29} TakeOFF illustration

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

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

9. Fred Michel

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

{30} Porsche Carrera illustration

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

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

{31} Cadillac illustration

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

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

{32} Mercedes SLA concept car illustration

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

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

{33} VW Tiguan illustration

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

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

10. Mikko Vartio

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

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

{34} Bears illustration

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

{35} Sealife illustration

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

{36} Longboard illustration

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

{37} Surprise illustration

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

{38} Darth Android illustration

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

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

{39} Magic Mushroom illustration

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

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

11. Angelo Sabal

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

{40} Colt gun illustration

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

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

{41} Candle illustration

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

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

{42} Dragon shield illustration

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

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

{43} Iron Man 2 helmet illustration

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

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

12. Craig Erskine

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

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

{44} Mac Mini illustration

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

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

{45} Apple remotes illustration

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

Created in Fireworks CS4, all vectors (aaaa

Posted in Uncategorized | Leave a comment

Showcase Of Web Design In The Arab World

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



Smashing-magazine-advertisement in Showcase Of Web Design In The Arab WorldSpacer in Showcase Of Web Design In The Arab World
 in Showcase Of Web Design In The Arab World  in Showcase Of Web Design In The Arab World  in Showcase Of Web Design In The Arab World

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.

800px-Folio From A Koran 8th-9th Century-e1283430637989 in Showcase Of Web Design In The Arab World
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:

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.

Beirut in Showcase Of Web Design In The Arab World
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 in Showcase Of Web Design In The Arab World
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.

252 in Showcase Of Web Design In The Arab World
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.

103 in Showcase Of Web Design In The Arab World
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.

86 in Showcase Of Web Design In The Arab World
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.

85 in Showcase Of Web Design In The Arab World
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?

212 in Showcase Of Web Design In The Arab World
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.

87 in Showcase Of Web Design In The Arab World
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.

222 in Showcase Of Web Design In The Arab World
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.

55 in Showcase Of Web Design In The Arab World
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

102 in Showcase Of Web Design In The Arab World

Maghribi Style design agency

Orocco in Showcase Of Web Design In The Arab World

Kharabeesh

Khar in Showcase Of Web Design In The Arab World

EMKW

Emkw in Showcase Of Web Design In The Arab World

Altareekh

112 in Showcase Of Web Design In The Arab World

alrasekhoon

54 in Showcase Of Web Design In The Arab World

mbc3

92 in Showcase Of Web Design In The Arab World

Integrated Wood

621 in Showcase Of Web Design In The Arab World

Cocolicious

58 in Showcase Of Web Design In The Arab World

Twofour 54

202 in Showcase Of Web Design In The Arab World

Wissam Shawkat Studio

232 in Showcase Of Web Design In The Arab World

Bait Alherafieen

65 in Showcase Of Web Design In The Arab World

Makan House

821 in Showcase Of Web Design In The Arab World

Qas w Lasq

302 in Showcase Of Web Design In The Arab World

Mo3jam

323 in Showcase Of Web Design In The Arab World

ikbis

332 in Showcase Of Web Design In The Arab World

Patchi

343 in Showcase Of Web Design In The Arab World

kammelna

312 in Showcase Of Web Design In The Arab World

Zain

362 in Showcase Of Web Design In The Arab World

Shankaboot

382 in Showcase Of Web Design In The Arab World

Jordan Pioneers

59 in Showcase Of Web Design In The Arab World

Filaty

392 in Showcase Of Web Design In The Arab World

Madrasati

531 in Showcase Of Web Design In The Arab World

Pierre Katra

512 in Showcase Of Web Design In The Arab World

Media Plus

541 in Showcase Of Web Design In The Arab World

Sabeel Water

56 in Showcase Of Web Design In The Arab World

Atelier White

57 in Showcase Of Web Design In The Arab World

Hair Code World

60 in Showcase Of Web Design In The Arab World

Children’s Museum

611 in Showcase Of Web Design In The Arab World

Nahfat Ailetna

63 in Showcase Of Web Design In The Arab World

Aljazeera Children

123 in Showcase Of Web Design In The Arab World

Saudi Aramco World

70 in Showcase Of Web Design In The Arab World

Hyper Stage

412 in Showcase Of Web Design In The Arab World

Bonnon Coffee

77 in Showcase Of Web Design In The Arab World

Nina Kreidie Portfolio

811 in Showcase Of Web Design In The Arab World

Mawkoos

83 in Showcase Of Web Design In The Arab World

Beshoy Designs

921 in Showcase Of Web Design In The Arab World

Leather Export

93 in Showcase Of Web Design In The Arab World

Saad Creative

98 in Showcase Of Web Design In The Arab World

Fatafeat

172 in Showcase Of Web Design In The Arab World

Noor Islamic Bank

99 in Showcase Of Web Design In The Arab World

The Tamz

100 in Showcase Of Web Design In The Arab World

She7ata

105 in Showcase Of Web Design In The Arab World

NBK

108 in Showcase Of Web Design In The Arab World

Al Aali Complex

imgimgimgimg

Posted in Uncategorized | Leave a comment

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

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



Smashing-magazine-advertisement in What Is The Worst Design or Programming Mistake Youve Ever Made?Spacer in What Is The Worst Design or Programming Mistake Youve Ever Made?
 in What Is The Worst Design or Programming Mistake Youve Ever Made?  in What Is The Worst Design or Programming Mistake Youve Ever Made?  in What Is The Worst Design or Programming Mistake Youve Ever Made?

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.

Workatnight in What Is The Worst Design or Programming Mistake Youve Ever Made?
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.

Related Posts

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

Measure3 in What Is The Worst Design or Programming Mistake Youve Ever Made?
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.

Setup in What Is The Worst Design or Programming Mistake Youve Ever Made?
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).”

Further Reading

Here are a few relevant articles you might want to check out. Definitely worth reading if and when you get the chance.

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)


© Robert Bowen for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | <a href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'What%20Is%20The%20Worst%20Design%20or%20Programming%20Mistake%20You%E2%80%99ve%20Ever%20Made?'%20http://www.smashingmagazine.com/2010/09/10/what-is-the-worst-design-or-progra…” title=”Tweet us!”>Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Posted in Uncategorized | Leave a comment

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

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



Smashing-magazine-advertisement in What Is The Worst Design or Programming Mistake Youve Ever Made?Spacer in What Is The Worst Design or Programming Mistake Youve Ever Made?
 in What Is The Worst Design or Programming Mistake Youve Ever Made?  in What Is The Worst Design or Programming Mistake Youve Ever Made?  in What Is The Worst Design or Programming Mistake Youve Ever Made?

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.

Workatnight in What Is The Worst Design or Programming Mistake Youve Ever Made?
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.

Related Posts

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

Measure3 in What Is The Worst Design or Programming Mistake Youve Ever Made?
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.

Setup in What Is The Worst Design or Programming Mistake Youve Ever Made?
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).”

Further Reading

Here are a few relevant articles you might want to check out. Definitely worth reading if and when you get the chance.

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)


© Robert Bowen for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | <a href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'What%20Is%20The%20Worst%20Design%20or%20Programming%20Mistake%20You%E2%80%99ve%20Ever%20Made?'%20http://www.smashingmagazine.com/2010/09/10/what-is-the-worst-design-or-progra…” title=”Tweet us!”>Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Posted in Uncategorized | Leave a comment

Upcoming Web Design and Development Conferences in 2010

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



Smashing-magazine-advertisement in Upcoming Web Design and Development Conferences in 2010Spacer in Upcoming Web Design and Development Conferences in 2010
 in Upcoming Web Design and Development Conferences in 2010  in Upcoming Web Design and Development Conferences in 2010  in Upcoming Web Design and Development Conferences in 2010

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

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

Fitcm-2010 in Upcoming Web Design and Development Conferences in 2010

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

Aea-2010 in Upcoming Web Design and Development Conferences in 2010

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

Ldf-2010 in Upcoming Web Design and Development Conferences in 2010

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

M2-2010 in Upcoming Web Design and Development Conferences in 2010

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

Dfm-2010 in Upcoming Web Design and Development Conferences in 2010

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

Wd-2010 in Upcoming Web Design and Development Conferences in 2010

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

Nagw-2010 in Upcoming Web Design and Development Conferences in 2010

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

Iavi-2010 in Upcoming Web Design and Development Conferences in 2010

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

Fotb-2010 in Upcoming Web Design and Development Conferences in 2010

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

Bdc-2010 in Upcoming Web Design and Development Conferences in 2010

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

Eeci-2010 in Upcoming Web Design and Development Conferences in 2010

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

Pdw-2010 in Upcoming Web Design and Development Conferences in 2010

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

Idea-2010 in Upcoming Web Design and Development Conferences in 2010

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

Abw-2010 in Upcoming Web Design and Development Conferences in 2010

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

Fowa-2010 in Upcoming Web Design and Development Conferences in 2010

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

Fronteers-2010 in Upcoming Web Design and Development Conferences in 2010

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

Dp-2010 in Upcoming Web Design and Development Conferences in 2010

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

Fid-2010 in Upcoming Web Design and Development Conferences in 2010

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

Php-2010 in Upcoming Web Design and Development Conferences in 2010

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

Wds-2010 in Upcoming Web Design and Development Conferences in 2010

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

Aiga-2010 in Upcoming Web Design and Development Conferences in 2010

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

Vtm-2010 in Upcoming Web Design and Development Conferences in 2010

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

Jqc-2010 in Upcoming Web Design and Development Conferences in 2010

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

Wdw-2010 in Upcoming Web Design and Development Conferences in 2010

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

Acs-2010 in Upcoming Web Design and Development Conferences in 2010

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

Ftc-2010 in Upcoming Web Design and Development Conferences in 2010

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

Bbc-2010 in Upcoming Web Design and Development Conferences in 2010

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

Eecamp in Upcoming Web Design and Development Conferences in 2010

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

Am-2010 in Upcoming Web Design and Development Conferences in 2010

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

Fitcu-2010 in Upcoming Web Design and Development Conferences in 2010

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

Vc-2010 in Upcoming Web Design and Development Conferences in 2010

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.

Wdc-2010 in Upcoming Web Design and Development Conferences in 2010

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

Pdc-2010 in Upcoming Web Design and Development Conferences in 2010

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

Uw-2010 in Upcoming Web Design and Development Conferences in 2010

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

Aeas-2010 in Upcoming Web Design and Development Conferences in 2010

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

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

Htw-2010 in Upcoming Web Design and Development Conferences in 2010

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

Fitce-2010 in Upcoming Web Design and Development Conferences in 2010

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

Edui-2010 in Upcoming Web Design and Development Conferences in 2010

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

Uie-2010 in Upcoming Web Design and Development Conferences in 2010

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

Bc-2010 in Upcoming Web Design and Development Conferences in 2010

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

Ruby-2010 in Upcoming Web Design and Development Conferences in 2010

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

Ff-2010 in Upcoming Web Design and Development Conferences in 2010

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

Fowd-2010 in Upcoming Web Design and Development Conferences in 2010

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

Sws-2010 in Upcoming Web Design and Development Conferences in 2010

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

Dc-2010 in Upcoming Web Design and Development Conferences in 2010

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

Rwx-2010 in Upcoming Web Design and Development Conferences in 2010

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

Nawd-2011 in Upcoming Web Design and Development Conferences in 2010

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

Ixda-2011 in Upcoming Web Design and Development Conferences in 2010

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

Iui-2011 in Upcoming Web Design and Development Conferences in 2010

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

Ias-2011 in Upcoming Web Design and Development Conferences in 2010

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

Sxsw in Upcoming Web Design and Development Conferences in 2010

Related Links

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


© Louis Lazaris for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | <a href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Upcoming%20Web%20Design%20and%20Development%20Conferences%20in%202010'%20http://www.smashingmagazine.com/2010/09/09/upcoming-web-design-and-developmen…” title=”Tweet us!”>Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Posted in Uncategorized | Leave a comment