Joe Kral
Created: Facebook Logo
History: Like the Facebook brand? Well Joe Kral is credited with creating it back in 2005 before Facebook was FACEBOOK.

Name: Milton Glaser
Created: I Love New York
History: Milton created the ubiquitous I Love New York campaign that’s been ripped off by everyone from Philadelphia to NewYoungPonyClub

Name: Lindon Leader
Created: FedEx Logo
History: In the past few years the FedEx logo has become almost more recognizable than the U.S.P.S itself!

Name: Paul Rand (a.k.a Peretz Rosenbaum)
Created: IBM Logo
History: Even after his death in 1996, Paul Rand remains one of the most famous graphic designers in the world. He designed many posters and corporate identities, including the logos for IBM, UPS and ABC.

Name: Paula Scher
Created: Various Album Covers, Citi Group Logo
History: Paula Scher studied at the Tyler School of Art in Philadelphia and began her graphic design career as a record cover art director at both Atlantic and CBS Records in the 1970s.

Name: Ruth Kedar
Created: The Original Google Logo
History: Ruth Kedar is an artist and designer, best known for designing the Google logo. Her master thesis in school was on Playing cards design, and she was commissioned by Adobe Systems to be one of the designers of the Adobe Deck. She went on to design the award winning Analog Deck and Duolog Deck.

Name: Dennis Hwang (a.k.a Hwang Jeong-mok)
Created: Google’s Specialty Logos
History: Hwang’s actual position in Google’s early days was as their webmaster. He began creating custom logos for the company in 2000 at Larry Page and Sergey Prin’s request.

Name: Rob Janoff
Created: The Apple Logo
History: While it is generally accepted to have been in reference to Isaac Newton, a curious urban legend exists that the bitten apple is a homage to the mathematician Alan Turing, who committed suicide by eating an apple he had laced with cyanide. Turing is regarded as one of the fathers of the computer.

What sets PDF Portfolios apart from other solutions like Powerpoint, Keynote, Illustrator and Word is the ease of navigation and customization it applies to ‘files’, where as most other solutions only let you embed content, offering little control over how it’s displayed once embedded. Click the image for a live demo.

CSSTypeset
CSSTypset is handy tool for seeing the effect of CSS code while simultaneously seeing what’s going on behind the scenes with the actual code. It works both ways, you can type code and immediately see it applied to text, or you can type text and use a GUI with sliders to apply CSS to your text. If you have a hard time figuring out the difference between em and px, verdana and helvetica then this is the tool for you.

Text2PNG
Add a few lines of javascript to your header and this nifty web tool converts your headlines to images automatically.

CSSTextWrap
Sick of ‘designing to an invisible grid’? Turn that grid into origami and spice up your layouts with this incredible text wrap tool.

Kotatsu
A wrote a tutorial a while back about how to make XHTML tables that could be marked up with PHP, Javascript or Ajax. If only I had known about this tool then! Essentially it’s a HTML table generator.

GoldenRationCalculator
Divine proportions have been used for all types of creative work, from architecture to print layout to photography. It’s only natural that it also eventually found it’s way into web design. This web generator makes it easy to design using the ‘golden ratio’ as the underlying framework for your website’s design.

Wordpress is a CMS that was built for blogging but many people have repurposed it for magazines, newspapers, blog networks and all sorts of other goodies! But did you know you can hack your Wordpress blog to be a no-cost solution for a social network? Well you can, and here’s fifteen plug-ins that will let you do it.

1. WP-Gravatar
Install WP-Gravatar for adding ‘faces’ to your members and your writers. This plugin lets you use Gravatar, MyBlogLog, OpenAvatar, Wavatar, Identicon, monsterID or Favico.ico files with your comments. Gives you a Widget with your profile info and your gravatar. Let’s you set your own CSS style to use with the Comments section and the author about box.

2. Ajaxed Wordpress
A highly customizable plugin to add AJAX to your blog. AWP uses AJAX to load posts inline, paginate posts, load and submit comments, and more. For that Web 2.0 look and feel.

3. Members Only
A WordPress plugin that allows you to make your WordPress blog only viewable to visitors that are logged in. This is good for protecting your user’s data and your blog content.

4. Profiles
Profiles allows the easy display and management of personal profiles / biographies, or any other similarly periodic information. In particular, it adds a “profiles” tab to the management section and allows you to easily edit information about the profiles as well as associate an image (with optional watermark) with each profile.

5. WP Super Cache
A very fast caching engine for WordPress that produces static html files. When your network does start to receive high levels of traffic, you’ll need this to prevent your site from going down.

6. Post-Plugin Library
Makes calling Similar posts, Recent Posts, Random Posts and Recent Comments easier.

7. Exec PHP
This plug-in is a godsend! It allows you to add PHP markup to wordpress pages and posts. This will give you even greater control over how wordpress looks and acts, allowing you customize with no restriction.

8. Quick SMS
This will allow visitors to send SMS messages to blog owners. It would be ideal for a WordpressMU network as it would allow everyone to stay in constant contact with each other. Could also be hacked to create a “twitter”-like service for all members.

9. UMapper
UMapper plugin is universal mapping platform, which makes it a snap to create engaging maps and add them to your blog posts. Microsoft Virtual Earth, Google Maps, OpenStreet - all are supported by this truly universal (hence the name UMapper - Universal Mapper) plugin.

10. Invite Friends
This plugins main goal was to provide the ability to any of your registered users, to invite more people to the community.

11. NextGen Gallery
Very customizable Gallery option for Wordpress. Turn your blog into a mini ‘Flickr’!

12. Popup Scheduler
If used correctly, a popup is always the best way to achieve great results (be it in sales or subscription rate). It is also the best tool to grab your readers attention. This plugin allow you to customize and schedule a popup to show according to various situation. 1) You can schedule a popup to show a welcome message whenever a new visitor arrives at your site 2) You can schedule a popup to show on the readers returned visit to thank them for reading your blog and invite them to subscribe to your feed/email update. 3) If there is any major changes to your website, you can show a popup to inform your readers of the changes 4) If you are selling products on your blog, you can schedule a popup whenever you have a new product launch 5) During a campaign (such as charity donation drive, blogathon etc), you can schedule a popup to show for a number of days to increase the awareness of the campaign. and many more…

13. SABRE
Sabre is an acronym for Simple Anti Bot Registration Engine. It’s a set of counter measures against spam registration on your blog.

14. Dashboard Editor
This plugin allows you to add whatever you want to the Wordpress dashboard through PHP and HTML even Sidebar Widgets. You can also wipe the entire dashboard or individually remove some of the more irritating sections like the Dev news, Planet Wordpress and the getting started section. This allows for the creation of custom designs for the back end to hide the fact that you’re even using Wordpress!

15. SezWho
SezWho is a distributed context, rating and reputation system for social media sites like blogs, forums, wikis, video/picture sharing sites, discussion boards and anywhere else where people collaborate on the web.

We all love web apps, as long as you’re connected they provide cheap, fast and less resource alternatives to desktop solutions. On top of that they store your data in the cloud, a good place for it if your computer ever crashes or is stolen.

My initial observations…

1) It’s Built on Flex/Flash 9
One thing Adobe has got to be proud of is that so far it looks like all the A.viary apps are being built using many of their products like Flex, Flash and Coldfusion. A while back I speculated that Adobe might simply try to buy these guys out rather than compete. If that’s the case, A.viary did themselves a big favor by using an all Adobe back-end.

2) It’s a Little Slow
One thing that’s always been annoying about Flash-based web apps is that the more robust of them take a long time to load. This isn’t a huge concern but it us annoying. They need to figure out a way to bench mark this app so that more of the loading happens while the user is operating the software, not waiting to use it.

3) You can Import Images from the Web
I used to be a big fan of Picnik.com but now that they charge your separately than Flickr does for a Pro Account, not so much. Since I already own Photoshop, I don’t feel the need to pay to be able to do the same things in a web app. That app should be free, even if it needs to run adds to pay for itself. A.viary (for now) is 100% free and overs a bucketload of functionality over Picnik.

4) It rethinks the ‘Work Window’
One flaw in a lot of new design software applications is that they either clone Adobe’s Photoshop or Corel’s Draw. With A.viary things are reminiscent of existing operands but you can tell the designers tried to diversify a bit. In the end the UI feels more like GIMP than Photoshop.

5. Key commands Work
One of the things that makes this suite so useful is that key commands work as if it were truly a desktop app. This definitely decreased the time it took me to get to know the software, and start using it to make something.

6. Filters / Layers / Effects
Nothing new here, if you’ve used Adobe, you’ve used most of these before. There are some unique ones though. What the heck is Kuwahara?

7. Undo is Fast
The system must cache your every step because Undo/Redo seems almost faster than most desktop apps!

8. Saving is Public/Private
Saving your files takes a page out of the book of most web applications by allowing you either to save your files privately or in the public gallery of A.viary users for all to see. You’re also given the option to allow others to edit. This is cool but I wish there were more granular control. For instance if, I wanted my friend Mike to collaborate with me on a design but not the whole world I’d be out of luck.

All in all the A.viary product line looks impressive and is poised to really disrupt the industry!

Image via Wikipedia

Are people getting spoiled?

In the last two years or so, the number of free design ‘instruction’ and resource sites has exploded. Unfortunately, a lot of people seem to think we live in the Matrix, where ideas can just be downloaded into their heads. Well, it’s 2008 and they haven’t invented that technology yet. Until they do we still have to work to come up with new ideas and to learn how to best execute them.

It takes a little bit of time and experimentation to understand design effects, not just how to do them, but why one might use them and when to use one effect versus another. Every good designer has a ‘method to their madness’ and it’s important to try to get into the same headspace as your favorite designer. This means relaxing a bit an realizing that you may not get everything right the first time, or you may spend a few hours Googling around trying to get everything to make sense. Vandelay Design has some good advice:

One of the things that I like about web design is that there’s always plenty to learn, regardless of how experienced you are. I know that my knowledge really only scratches the surface of web design and development, and I appreciate the fact that seemingly unlimited resources are available to allow me to become a better designer.

The design community is filled with sources of inspiration and helpful sites for encouraging growth in abilities. Each of us needs to take our own unique approach to personal development that works for us.

In my post ‘The Tutorial for all Tutorials‘, I listed the rules I try to follow when making good design tutorials. Now I’m going to share advice on how to follow them…

1. Learn Fundamentals
When you’re trying to follow a tutorial about how to turn your little brother into giant Robeast in Photoshop it might help to know what the difference between the burn tool and the shadow tool. Because design tutorials are so common these days, some writers are going to assume a lot about their audience. This means they may not list every single step because they assume some people will be able to follow them regardless. I know this because occasionally I’m guilty of it. No matter what, you simply aren’t the best designer you can be if you don’t at least try learn the basics of your craft. So if you don’t already know, learn what the photoshop tools do.

2. Know when You’re Out of Your League
It never hurts to ask questions. A few people may ridicule you or they may ignore you or they may be a little hard on you. That’s okay because your asking the question didn’t do anything but show your dedication to getting things right. However, rather than emailing the writer directly, why not post your thoughts as a comment? Essentially by reading design tutorial blogs we are crowd sourcing instruction, why not also crowd source support for those tutorials? If you post comments on developertutorials.com or my other blog rest assured, someone will answer them. It also takes the pressure off the tutorial writer because they know they don’t have to answer the same question fifteen times.

3. Reread Before You Give Up
The other day I was having some trouble figuring out Subversion. I was following a tutorial but for some reason at the time everything was coming out greek and I could not figure out the techniques I was trying to learn. I didn’t give up, I didn’t ask questions but somehow I still got everything working. How? I walked away.

The next day I came back and followed the same tutorial word for word and it worked. The only thing that had changed between the first day and the second day was me. I had new perspective and things started to make sense that hadn’t before. I realized I had skipped a few words that turned out to be critical, I had misinterpreted other sections and a few things I was able to guess at. Remember when your people used to tell you to put a study sheet under your pillow the night before an exam? This is because, contrary to popular belief, you still think in your sleep and sometimes the subconscious can solve problems passively without your being aware.

4. You Do Not Suck at Photoshop
No matter what your profession or hobby is, if you aren’t confident about your own prowess, people are less-likely to believe in you. In “Five Point Form: Mastering Professionalism as a Freelance Designer” I talked about this a bit…

Another thing I’ve learned is that most people are completely incapable from recognizing real talent from anything else that might be put in front of them. If they aren’t designers, they don’t think like designers and they don’t really know what makes one designer better than another. Thus, they need to be convinced. I’ve seen people who choose horrible color palettes and layouts make upwards of $10K while people making photoshop designs that are nothing short of brilliant make pennies. The average client is waiting on you to tell them that you’re great, that you know your stuff and to prove it to the best of their understanding. This is why presenting yourself with confidence (not arrogance) is key to getting class “A” projects.

The bottom line is you need to muster up confidence, this will lead to trying new things and making bold creative decisions that can’t be taught. So don’t believe the hype, you do not suck a photoshop!

Ultimately, we all need to be patient with each other. If a tutorial isn’t 100% up to par, don’t try to demean the person who is essentially offering a free service. Make suggestions. A few people have asked me flat out to revisit my posts on how to Design a Wordpress Tutorial from Scratch. They were polite, and brought up valid critiques that made me realize I didn’t cover things as well as I should have. As a result I’ll be revisiting that series later this month.

Don’t Waste Space

In the early days of the internet there was a lot of discussion about what went on ‘above and below’ the fold. The fold is a term used to describe the break in a web page created when content extends below the visible browser window. Last.fm have probably studied this as a quick look at their interface reveals a tabbed browser that helps keep all their most critical content ‘above’ the fold.

Make it a Utility

Web Applications are just desktop applications in the cloud and as that line blurs even more, it’s important to remember what your goal is…to provide a service. That said, there should never be a question in the users mind about what your product does. Usually, they should be able to tell by looking at it. If not subtle reminders help. Below you’ll see three images of things that you’ll see when looking around a Last.fm user profile page. They all remind me of one thing: I’m here for music.

Simple Colors

Since you want to create a memorable, easy to decipher brand, it’s important to keep your color palette narrowed down to shades of no more than five or so colors. Last.fm only uses three (white, grey, red) which helps to create an easily identifiable identity in the mind of customers. Sure you can use as many colors as you want but beyond looking good will people remember it as being you or your client?

Google has revolutionized the web as we know it! What makes their brand so strong? What makes it identifiable? What makes it useful? Actually, three simple things!

Design for Usability

When you’re designing a strong web application, you need to make sure that the programmers are coding to your design and that you aren’t designing for their code. Computers don’t think like humans do, so in theory a perfectly fine functioning program might not make any sense to the casual computer user. Google recognizes this. While their page could be chock full of boolean queries and statistics, it isn’t. It has no more information than you need to identify the service and use the most basic functions. Anything beyond that you’ll have to look deeper which is great for casual users and even better for the geek who wants to feel like he’s discovering obscure features and tricks no one else has thought of.

Push Your Brand, Then the Product

In part two we taked about the cohesiveness of the 37signals product family. With Google we’ve got a slightly different variation, although the designs are so minimal they could belong to any group, the one thing that you’ll never forget when visiting Gmail.com or Google.com is their red, yellow, blue and green logo. Why? Because it’s the only thing the ever emphasize! Everything else comes secondary when it comes to building a strong and recognizable Google brand.

Let The Audience Work For You

This is probably one of the hardest design tricks to truly master but minimalism makes for simple, unforgettable experiences. That’s because there’s no confusion, little paradox and lots of room to come to ones own conclusions. That’s what Google has done by taking a minimal approach to their company brand. When I go to the Google.com to use Analytics, Apps or Docs, I start building certain expecations in my head before the applications ever even open. This is because I’m familiar with Google and I know that no matter what they produce it will be simple, minimal and functional. Google isnt beating that in my head, their brand conveys it rather unobtrusively.

37Signals are like the MVPs of web developers. Not only did the lead developers here invent the Rails framework for Ruby, but they built a highly successful company out of it that even Jeff Bezos of Amazon.com loves! So what gets their product recognition?

Branding Similar Products

The one thing that 37Signals seem to understand more than anything else is that ‘branding’ a family of products makes them all that much more valuable in the long run. Take a look at the images below:

Although 37Signals have released several strong, unique products that stand alone, they all work together (look similar) and function similarly. Familiarity breeds loyal customers so when it’s time to turn your new app into a sister product, remember not to stray too far from where you found success the first time!

Incorporate the Explanation

Another thing you’ll notice is that all 37signal products incorporate the instructions right into the design of the site. Why ever consult a manual or customer service if your every question is answered before you ask it? This won’t work for every app but I think 37signals have pulled it off well in their product line.

Give the End User Freedom

Customers want to feel like they own the software and not the other way around. One way to do this is to make your application customizable or offer an API that allows users to incorporate your app into their site’s design theme. This versatility is key. Ass you’ll notice above, 37signlas recently began allowing for more customization of color and brand identity than they used to.

Leah Culver is the designer and lead developer of Pownce, a microblogging and file sharing service backed by Kevin Rose and designer Daniel Burka. It began as a project while she was hosting Wink!, a webcast produced by Webshots.

Pownce has since become one of the hottest, most highly scrutinized web applications on the market. Will it go big? Or will it sputter out and die before the masses really find a place for it? Regardless, here are a few things that I note when I see an start-up application like Pownce start to take off…

Choose The Right Framework/Language

When developing Web Apps the biggest thing you can do to save yourself a lot of time and money later on is to choose the right language to build in. Should you use Ruby on Rails, Django, Flash or something else? The decision making process can be tireless, each language has it’s pros and each has it’s cons. Django is very well renown for being built to scale, one of the reasons Leah Culver and Daniel Burka built it, loosely based on the LAMP standard (Linux, Apache, MySQL, and PHP) with Django/Python thrown in for good measure. This will not only affect your choices as a designer, but it will also affect your business model, your content choices and your ability to meet demand. A great example of how not to do this is Twitter, who deployed Ruby on Rails without fully being prepared to scale to meet the demand they received.

Differentiate

Pownce was probably the 100th social network to debut in 2007, a time when social networks were springing up all over the place to take advantage of eager VC’s and investors who were salivating over a second boom in web based business models. What made Pownce different from Twitter and Jaiku (it’s nearest competitors) was not just in function, but in design. Pownce simply looks good. In fact, when I first began using it I was convinced it was a useless application (at the time you could only send messages to your other friends on Pownce) but it looked so damn good I wanted to find a way to use it every day. Did I really need another blogging application? No, but Pownce was around and it was so strikingly good looking I would work it into my activities online. This might sound superficial but in world of a thousand “Me too’s!” sometimes looks might be all you have to stand out from the herd.

Keep it Practical

The other thing that set Pownce out from the crowd was the fact that because its features were minimal, it’s design matched perfectly. There is no excess, no flash, no bling. Pownce seems to pride itself on doing what it does (sharing content) and not being pretentious (del.icio.us) or ugly (yousendit.com) while doing it.