Archive for September, 2010
ProCSSor
ProCSSor. An advanced CSS Prettifier with some unique formatting styles and several customizable options.
Eye-Candy For The Weekend: Particle Animation Music Videos
  |
Just like a couple of weeks ago, this weekend again we’ve got something unusual and creative to lift up your spirits and challenge your creativity over a lousy Sunday. Particle animation is a beautiful concept from motion graphics. Using specialized software, you can simulate the movements of particles depending on the environment — for instance, music rhythm.
In today’s post we present selected particle animation music videos. Be prepared: the page may take a while to load. Please make sure to visit the sources of videos to enjoy the viewing experience in HD, and don’t forget to turn on your hi-fi-system. We also feature some tutorials in the end of this post: and here you go — now you have something fun to do over the weekend!
[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]
Beautiful Particle Animation Videos
Procedural Particles from Matthias Müller
Vestige – Siggraph CAF 2009 Opening version
SPIRE / Corporate Identity Launch Video
Red Smoke – Particle animation to Music
Tutorials and Further Resources
Particle Animation to Music
This tutorial is a detailed example of visualizing music through the formation of particles.
Extensive Guide For Particle Animation
An extensive guide for working with Trapcode Suite to generate videos with animated particles.
Solar, with lyrics
This tutorial will lead you to the process of particle animation created with Processing, audio by Goldfrapp.
How To Create A Surreal Outer Space Nebula
An impressive tutorial on creating a surreal outer space nebula provides you with the details regarding particle animation synchronized with music.
Particle Explosion
In this tutorial you will learn how to build a complex particle system using CC Particle World and Synchronize the particle blast to shatter a title.
Building Up Particles
This tutorial demonstrates the creation process of particles to simulate a disintegrating hot air balloon using Trapcode Particular and Adobe After Effects.
Make a Particle Explosion Effect
The author of this tutorial has broken down the process of developing an in-game particle effect into a series of steps. This technique is mostly used for a particle explosion effect in a video game.
Trapcode Gallery on Vimeo
A user-submitted gallery of videos created with Trapcode Suite.
iPhone App – Magnetosphere
This iPhone app helps you create particle animation easily.
Particle Animation Software
A detailed overview of various particle animation applications, with ratings, reviews and screenshots.
Last Click
Particle collection
A remarkable collection of various particle animation effects from Matthias Müller.
Would you like to see more similar posts on SM on weekends?
© Bhanu Ahluwalia for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: animation, Graphics, Inspiration, motion, video
Using Accessibility and Usability to Increase Conversion Rates
There is a plethora of ways to increase conversion rates, but a couple of ways are often disregarded as important, when they truly are. In order to show the importance of accessibility and usability, here we’re going to take a look at a variety of tips that’ll help increase conversion rates through them.
Accessibility
Flexible
Accessibility is all about flexibility in design. The design should be able to stretch and cope to resolution sizes. The reason this is important in accessibility is that if the design does not cope for many different resolutions, it becomes unbearable for users to use or browse about, making it inaccessible indirectly.
Cross Platform
A website is all about being cross platform compatible. The website should be able to easily work on mobile devices ranging in size as well as large displays and other mainstream devices. In addition to making your website cross platform compatible, you should also bring your service to different platforms so your users can take your service wherever they go.
Take Netflix’s online service as an example. It started as an online service for instant streaming, and then it was brought down to mobile devices via native applications, and so on and so forth. This allowed them to increase conversion rates from their online service as it became accessible and native to many devices they utilize.
Touch Safe
Mobile devices are migrating from stationary qwerty keyboards and keypads to touch screen interfaces. This also means your website needs to be touch screen safe and compatible as a part of accessibility. Small links and navigations make it impossible for touch screen mobile platform users to easily navigate about. With that said, assure your website is scalable and adjusted for different platforms as a part of accessibility.
Weight Adjustable
Weight adjustability refers to the weight of the available content on your website. As different users access your website from different devices and platforms, the weight of your content should adjust to the real estate or screen space available, getting rid of unimportant content, and leaving that of which makes your website important, such as the shopping of goods as well as the purchases of goods, and getting rid of latest news and other unnecessary items and or content.
Printable
Many disagree about the fact that accessibility includes making pages printer friendly. However, accessibility refers to the availability of content, which includes making certain pages printer friendly. If users need to print out their invoice or receipt, the page needs to be customized specifically for printing for best results. Therefore, printability categorizes under accessibility.
Usability
Usability is all about making your website and or service easy to work with, use, and navigational. Imagine having an instructional booklet on putting together a personal computer. If the instructional booklet is not clear on its instructions, you are bound to make mistakes as a first timer to personal computer building.
Similarly, if a website is not clear and easy to browse about, users will most likely leave the site, which loses potential customers or clientele, which decreases conversion rates. To show the importance of usability, we cover several tips that are sure to get you started on making your website and or service more usable or user friendly.
Clean Layout
A clean layout is always the first step to usability. Getting rid of unneeded clutter, organizing elements and objects across the design grid, helps make the website easier to navigate about and reduces eyestrain for the users who cannot handle too much information and very tiny content.
Feature Filled yet Simple
Users love features, but they also love simplicity. What this means is, when implementing features to your service or website, usability should be top and key on your list when adding new features to improve your service or website.
Generally speaking, features should be very easy to use and not require instructions to get them working or to get your users to use them about. Therefore, focus on the complexity of the feature in the back-end, but for the user or front end, make sure it appears as simple as possible, yet satisfying feature wise.
Easy To Understand
Your website’s layout should be speaking for itself. What this means is, you can display as much content as necessary on many different pages, but the layout of how the content is displayed should be clear and precise in terms of understanding.
A user does not want to spend time searching through clutter to get to a piece or feature they were looking for, and they also do not want to go through many navigational links to get there. Therefore, make everything easy to understand as if they have put the layout together themselves, knowing every corner, and where everything is in an instant.
Versatile
If your website or service is designed for users to access or use it on Earth and on Mars, make it versatile and adaptable so it works well on Earth and on Mars.’
What I mean is, your website or service should be able to adapt between many different situations and platforms, and be very useable as it would be, being viewed on the intended platform and resolution.
Expandable
Your audience could anyone, folks who are losing their eyesight, others who are dyslexic or color blind to certain colors. What this means is, your website should offer features that allows them to expand on your website. For example, many users do not tend to stick to the text size you initially designed your website around and use their browser’s tools to expand it.
This not only destroys the layout, it is also very tacky and more difficult. Instead, make your layout or design expandable to such changes, and offer a feature that allows your users to increase or decrease the font size. The same principle applies for font colors, or background colors.
Add a nice color palette of which users can choose from to change the background or foreground colors, it gives them the flexibility and adaptability they need without having to leave your website or use a third party service to do so, increasing conversion rates, and returning customers or visitors.
Generative Digital Art: Tutorials and Inspiration
 |
By Joshua Ellis
Generative art is a sort of blanket term for any sort of art which is created or composed using algorithmic or random processes, such as Brian Eno‘s 77 Million Paintings, which composites Eno’s visual art in such a way that there are literally 77 million possible combinations.
Other generative pieces serve as visualizations or realizations of abstract data sets or other information: one excellent example of this is Robert Hodgin’s "Magnetosphere", which uses incoming audio data to create beautiful abstract animations of stars and planets moving in a complex dance. Hodgin’s piece eventually became the current default visualizer for iTunes.
While this may sound a bit arcane, generative processes can be a valuable addition to any designer’s skillset, particularly for automating tedious tasks like creating “randomized” artwork or simulating realistic natural phenomena that are difficult to intentionally copy, like physical landscapes. It can also be a great way to rethink how you use your existing tools, like Actionscript or Illustrator.
Here’s a list of some inspirational and practical resources to help you explore the rich world of generative art and design.
You might also like to check out our article 45 Amazing Examples of Code Generated and 3D CG Artworks.
Inspiration
Joshua Davis (aka praystation) is one of the earliest artists to begin working with Flash/Actionscript as a generative artistic medium. His work includes the seminal and influential once-upon-a-forest art project as well as commercial generative work for BMW, Motorola and the band Tool. He is also the co-author of the Hype Actionscript 3 framework (see below).
Along with Joshua Davis, Erik Natzke is another generative Actionscript innovator, though his work tends to be more organic and "painterly", as opposed to Davis’ highly graphical style. Natzke recently created a collaborative interactive animation with French artist Genevieve Gauckler for Adobe’s Shortcut To Brilliant site, showcasing their CS4 suite.
Jared Tarbell is one of the founders of Etsy, the popular site that allows artisans to sell their own handmade work, but he’s also a well-known and respected generative artist. Tarbell works in both Actionscript and Processing (see below) to create his delicate pieces, many of which — such as Substrate, seen above — can actually be run directly on his site.
Brian Eno is one of the heavyweights of generative art. The former keyboardist for Roxy Music, creator of the “ambient” music genre and the iPhone Bloom app, and a well-known music producer for acts such as U2, Talking Heads and Coldplay, Eno is also a visual artist and designers whose work has appeared internationally. Recently, his 77 Million Paintings piece was projected onto the curved arches of the Sydney Opera House, as part of the Luminous Festival, which Eno curated.
Eno is also the co-creator of the Oblique Strategies, a deck of card which provides gnomic advice for artists who are creatively stuck.
Karsten Schmidt (aka toxi) is a British-based visual designer and coder whose work often transcends the screen in physical, interactive installations (like the sound-responsive LED floor above, created for the launch of audio manufacturer KEF’s Muon speakers). Schmidt releases much of his code as open-source, including his Processing toxiclibs (see below).
Daniel Shiffman is an Assistant Arts Professor at NYU and an artist and writer on Processing and other generative systems. His Vector3D libraries for Processing (for creating and storing 3D vector data) were so widely used that they were ultimately incorporated into the language as built-in functions. Like Karsten Schmidt, Shiffman’s work often involves real-world physical interaction with digital media, such as Reactive (2003).
Robert Hodgin is a visual Processing/Flash artist and co-founder of the Barbarian Group (which he recently left to devote himself full-time to large scale installation work). As mentioned in the introduction to this article, Robert’s Magnetosphere Processing app became so popular that Apple incorporated it as the default visualizer for iTunes. Robert’s blog, Flight404, features a lot of useful information on both his creative and technical processes.
When he was a software engineering student at MIT in the 1980s, John Maeda became fascinated with the graphic design and typography of Paul Rand and Muriel Cooper. Maeda began to explore the odd landscape where software and graphic design came together, producing generative / algorithmic pieces that were far ahead of their time. In 1999, he was named as one of the 21 most important people of the 21st century by Esquire magazine
After serving for 12 years as associate director of research at the MIT Media Lab, Maeda became president of the Rhode Island School of Design in 2008.
Resources and Tutorials
Processing is a programming language originally developed by Ben Fry and Casey Reas when they were MIT Media Lab students under John Maeda. It’s essentially a dialect of Java, with a custom IDE and specific functions and constructs for visual/aural/interactive design, as well as interacting with external data sources and devices (such as webcams and the Arduino prototyping board). It runs on Windows. Mac OS X and Linux.
Processing is a great place for visual artists and designers to start programming, due to its relative simplicity and ease of use.
NodeBox is a Mac OS X app for creating static or animated visuals using the Python scripting language. Similar to Processing, NodeBox focuses more specifically on generative graphics. A great tool for developers who are already familiar with Python.
Hype is an Actionscript 3 framework developed by Joshua Davis and Branden Hall, designed to facilitate the creation of generative Flash-based artwork by providing pre-built functions for often-used tasks (such as laying objects out on a grid or making an object follow the mouse). There’s no formal documentation as of yet; the existing examples simply have source code displayed, but if you’re an intermediate or better AS coder, the code is clean and easy to follow. Davis and Hall also offer workshops for the framework, which you can register for from the site.
Generator.x is a blog/resource site for generative art. The Tools & Code section of the site features great links to software and code examples to check out. The site also has a Twitter feed and a Flickr group, which are updated more regularly than the blog itself.
Scriptographer is a plugin for Adobe Illustrator (up to version CS4) that allows you to extend Illustrator’s capability via Javascript. Scriptographer can be used to automate boring tasks as well as modify existing and generate new artwork in interesting ways — generating random swirly foliage, for example, or random cubes and cylinders.
Because Scriptographer is an engine for creating tools via Javascript, the possibilities for creating new tools with it is literally endless — and because it’s an Illustrator plugin, it’s easy to incorporate with your traditional workflow.
Flash and Actionscript are the most popular tools for doing generative art — particularly online — and this free PDF tutorial from Computer Arts UK by Chad Udell serves as an excellent introduction to creating generative pieces in Actionscript 3.
ContextFree is a Mac/Windows/Linux app for creating recursive artwork and animation, using a simple scripting language. It’s a deceptively simple tool that can — as seen in the above artwork — produce remarkably complicated effects, as well as extremely useful elements such as generated street/subway maps.
toxiclibs are a set of libraries for Processing/Java by Karsten Schmidt that simplify working with color, geometry, and physics modeling. Well worth the download.
openFrameworks is an open source toolkit that serves a similar purpose for C++ that Processing does for Java and NodeBox for Python, allowing C++ coders to rapidly prototype interactive media projects utilizing audio, video, OpenGL animation, and text. It’s still in pre-release, but you can download it for your platform of choice now.
Further Resources
- 45 Amazing Examples of Code Generated and 3D CG Artworks.
- Generative & Evolutionary Art group on Flickr
- technoligicalproceduralarchitekture playlist of generative video on YouTube
- Generative pieces on DeviantArt
- The Generative Art International Conference (12th annual conference to be held December 15-17, 2009 in Milano, Italy)
- Will Wright And Brian Eno — Wright (creator of Sim City and Spore) and Eno (who composed the music for Spore) discuss generative systems
- The Nature Of Code — an excellent online course for learning generative programming by Daniel Shiffman
About the author
Joshua Ellis is a writer and musician as well as a web designer and developer with over twelve years’ experience. You can find him online at his blog Zenarchery and as jzellis on Twitter. Joshua lives in Las Vegas with a cat, a large collection of books and several odd-looking synthesizers.
What Is The Worst Design or Programming Mistake You’ve 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.
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
- 9 Common Usability Mistakes in Web Design is a useful post that covers some common mistakes made when designing for the Web.
- Speaking of common mistakes, here is another entry from our archive that lets you in on some problems faced by e-commerce designers: 15 Common Mistakes in E-Commerce Design.
[Offtopic: by the way, did you already get your copy of the Smashing Book?]
Bait And Switch
The first common mistake we should learn from — and which several of our followers have had to face — is the old bait and switch. It occurs across the spectrum, for the newb and the accomplished professional, because it’s an easy mistake to make as the working hours add up. What is the bait and switch? It happens when you’re working on one version of a website or project and, at some point during the tinkering, you accidentally switch it for the active website or project before it’s ready.
When we’re in a constant back-and-forth workflow, getting mixed up is easy, at which point the bait and switch can happen. And it causes all kinds of chaos and headaches. Awareness and caution are needed to prevent this error from being part of your personal experience. Before you finalize changes or processes, be sure you’re working with the right file and uploading to the correct location. This isn’t a sure-fire prevention plan, but it will certainly improve your chances.
What Our Followers Said
- “I accidentally put a half-finished (with massive broken bits) update of a website over top of the current live one without a back-up.�
- “I sent $10,000 worth of product to a customer while testing an ordering portal.�
- “I deleted an actual repository instead of a working copy. #svn�
- “Worst programming mistake: editing off a live server and then uploading an old version of the website. All files lost!�
- “Sat on the development FTP for half an hour, being mad that the live website wouldn’t update!�
- “Moved the entire directory of websites on a live server into a different folder, then lost it or deleted the in-house CMS�
- “Programming mistake: writing data to the wrong database.�
- “Uploading to the dev website FTP and wondering why the live website wasn’t changing, which sent me around the bend in the process!�
Falling Behind On Back-Ups
Given that back-up-related mistakes usually come to light once you realize you’ve just pulled a bait and switch, we’ll tackle these next. Problems with back-up files are common in the design and development community, and they are openly lamented. For some reason, though, many of us still find ourselves panicked when we realize we have no current back-ups of the project we’re working on. And it usually hits us just after we lose the active version of the project and need it replaced.
We can take steps to save elements of our work and prevent episodes like this from becoming remorseful blog posts. You can be either low-tech or high-tech when you address this potential problem, but you need to do something. It could be as simple as making a list of details to check daily, and backing up data could be the final step. Alternatively, you could pay for an automated back-up service that guarantees completion of the task. There are several options, each with pros and cons, so find one that works for you and implement it post-haste.
What Our Followers Said
- “I moved a dynamic, CMS-contained website across to a new server. Forgot to back up, then deleted templates in the process. D’oh!�
- “Mistake: not backing up a compiled Flash slideshow, replacing it, then realizing the new version was completely broken.�
Measure Once, Cut Twice
The next mistake we’ll cover happens fairly often. For any number of reasons, we end up measuring once and cutting twice, so to speak. The measurements we work with vary greatly from project to project and from Web to print, so we need to be alert to what we are sizing and aiming for. Sometimes it isn’t so much the measurements as it is the content that requires a re-cut.
Often calculations, measurements and the concept phase need more time than expected. Turning off the computer and getting back to the sketch board or a notebook is often very useful to avoid mistakes. Image credit
Chalk it up to being overzealous or getting sloppy in our work as we push toward deadlines. If these are the reasons for our re-cuts, prevention is easy: just avoid those things… which is easier said than done. Still, if we mind our p’s and q’s and double-check everything before submitting it, our chances of embarrassment decrease. Follow the carpenter’s old rule of thumb, “Measure twice, cut onceâ€� — it benefits us designers and developers, too.
What Our Followers Said
- “Mistake: having 20,000 cards printed that didn’t fit into a lanyard card holder�
- “Got my colleague’s phone number wrong on her business card… We ordered 2,000.�
- “This isn’t really a programming mistake, but the most embarrassing mistake I’ve made in Web design was buying a domain name that had the client’s name in it — but part of the name was wrong. Good thing domains are cheap!â€�
- “I managed to drop an ‘m’ off ‘millimeters’ in InDesign. Ended up with an 88-meter-wide business card. Schoolboy!�
- “I think most of us have experienced the horror of hitting ‘Send’ on an e-blast, only to quickly realize it’s wrong.�
- “Mistake: when I post something and then two weeks later or more, I find out something’s wrong with it.â€�
- “A couple of years back, I made a beginner’s design mistake with print: envelopes and paper didn’t match.�
- “Sent PDF to the printing house for 1000 leaflets. Received them and realized that the phone number was wrong. Then, sent corrected PDF, received leaflets and realized that the wrong PDF was sent. We had 1000 useless leaflets with the right number but with the ‘iStockphoto’ watermark on every (lo-res) picture. Third time it was OK.�
- “I dropped an ‘L’ from the word ‘public’ in a school prospectus (and website). Honest mistake!�
Miscommunicate Expectations
Another problem encountered by designers and developers that you can learn from before encountering it is a breakdown of communication with a client or boss. Many of us let things become unclear or slip by, which makes us unsure whether everyone involved in a project is on the same page. Usually this is caused by a lack of confidence in ourselves or fear that asking for clarification would reflect poorly on us. Whatever the reason, we decide not to revisit the issue and instead proceed with a shaky understanding of what we’re supposed to do.
Every time we communicate with our boss or client, we open ourselves up to the possibility that one or two ideas might get lost in translation. We should be as clear and concise as possible in our discussions so that work stays on track… at least on our end — we can’t control others. If we’re dealing with someone who is unfamiliar with the design and development field, understanding what they’re asking for can be tricky. Take notes, and go over them with clients at the end of meetings so that everyone understands where things stand. Good notes prevent communication blunders.
What Our Followers Said
- “I underestimated the amount of content that two different clients wanted. Not a clear picture from the start.�
- “For my part, I must say, not reading a ticket well enough and spending two days coding something that wasn’t asked for. Over-enthusiastic FTW!�
- Emily B.: “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 anifstatement. 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
whereclause when testing SQL to a user table. No fun, I tell ya!�
Forgetting The Filler
Sometimes we forget to redact our coding comments and leave in an embarrassing tidbit or two. There are also times when we accidentally leave in filler content. That’s not necessarily a problem unless the client does not recognize it as filler, because then they might not remove it either. Remember that clients, especially the less technically savvy ones, are probably extremely paranoid about deleting anything, so any filler you forget to pull will inevitably be published to the masses.
Again, it comes down to vigilance. We can’t stress enough — on top of all the other stresses in the design and development field — the importance of double- and triple-checking all of these elements before labeling anything as complete. Certainly do this before turning anything over to the client. Making a generic checklist for every project you take on will help you avoid these mistakes. Remind yourself somehow to watch for elements that tend to slip through the cracks.
What Our Followers Said
- “Forgetting to remove nonsense words (used for testing) in an assignment and losing marks. Otherwise, perfect code.�
- “Two words: dummy data. Strictly ‘Lorem Ipsum’ ever since.�
- “One time I left an unkind phrase about a client in the comments, and they found it later on.�
Wrong Tool For The Job
The last mistake we’ll discuss in depth usually occurs early on in our experience in the design and development field: using the wrong tool for the job. It does happen, and more often than we’d like. When you’re unfamiliar with a field, you’ll sometimes use the wrong platform yet believe you’re on solid ground. At some point, you find out that the program, a supposed godsend, is not compatible with your client’s program or the program of others involved in the project.
Wrong tools doesn’t necessarily mean your coding or designing applications, it also can mean a wrong environment or computer setup. On the photo above, the setup looks solid and well-organized. Image credit.
Communication can assist in this area, though not as much as research. Find out from your client exactly where the project is going, and contact them yourself to ensure that files will be delivered in the proper format. You can leave this to the client, but you are responsible for ensuring compatibility, so it’s best not to leave it to someone else. Also, as you transition to new areas, research the tools of the trade to avoid making this mistake.
What Our Followers Said
- “I tried to deliver my very first program for Notts County FC to the printers in MS Publisher. I cringe even now.�
- “The first Photoshop website I ever did was a sliced PSD with all of the content in images… That was back in 1999/2000.�
- “Using Drupal to do ‘quick ’n’ dirty’ websites. They were dirty, but they sure weren’t quick.�
- “Designing a database app: rather than de-normalizing data, adding/removing table columns on the fly. Long time ago!�
- “Hard-coding a navigation across 10 pages instead of using an include. Was new to Web dev at the time.�
- “Depending on an external source for data and, because that crashed, our website crashed. Almost cost me my job.�
More Mistakes To Learn From
Below are several more community-contributed pearls of wisdom that we can learn from. We’d like to thank our dedicated followers who revealed their biggest mistakes so that we could benefit from their toil and trouble.
- “Mistake: severely undercharging for a massive job. My very first freelancing job. Was not worth the time and effort!�
- “There was a time in the ’90s when I thought Papyrus was beautiful. *Hangs head in shame*�
- “I once created an iteration of a logo using Comic Sans, and it was chosen! I’m not proud, but I was young and naive at the time.�
- “Used Comic Sans for something serious.�
- “How about 90,000 alert emails sent to four people over one weekend (myself, a colleague and website owners) = 360,000 emails.�
- “Deleted the shopping cart table from a live website instead of deleting one of the records in the table.�
- “The worst programming mistake I made was to develop an admin area with cookies only (without other security systems).�
Further Reading
Here are a few relevant articles you might want to check out. Definitely worth reading if and when you get the chance.
- 43 Web Design Mistakes You Should Avoid
An article from Daily Blog Tips that identifies dozens of mistakes that designers make, so you can avoid them. - The 10 Most Common Mistakes Web Designers Make
A helpful post from the Smashing Network via our sister website Noupe. - 10 Mistakes Freelance Graphic Designers Make When Starting Out
This useful post from WAHM targets beginners. - The Top 12 SEO Mistakes Designers Make
Another informative post that teaches by walking you through the mistakes of others. - Top Mistakes New Designers Make When Learning Graphic Design
Graphic Design Blogs’ post for beginners to help them steer clear of certain mistakes while learning.
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! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: