Website Performance: What To Know and What You Can Do

Web­site per­for­mance is a hugely impor­tant topic, so much so that the big com­pa­nies of the Web are obsessed with it. For the Googles, Yahoos, Ama­zons and eBays, slow web­sites mean fewer users and less happy users and thus lost rev­enue and reputation.

In your case, annoy­ing a few users wouldn’t be much of a prob­lem, but if mil­lions of peo­ple are using your prod­uct, you’d bet­ter be snappy in deliv­er­ing it. For years, Hol­ly­wood movies showed us how fast the Inter­net was: time to make that a reality.

Even if you don’t have mil­lions of users (yet), con­sider one very impor­tant thing: peo­ple are con­sum­ing the Web nowa­days less with fat con­nec­tions and mas­sive com­put­ers and more with mobile phones over slow wire­less and 3G con­nec­tions, but they still expect the same per­for­mance. Wait­ing for a slow web­site to load on a mobile phone is dou­bly annoy­ing because the user is usu­ally already in a hurry and is pay­ing by the byte or sec­ond. It’s 1997 all over again.

Per­for­mance is an expert’s game… to an extent. You can do innu­mer­able things to make a web­site per­form well, and much of it requires in-​​depth knowl­edge and bor­ing test­ing and research. I am sure a poten­tial mar­ket exists for web­site per­for­mance opti­miza­tion, much like there is one now for search engine opti­miza­tion. Inter­est­ingly, Google recently announced that it will fac­tor per­for­mance into its search rank­ings, so this is already hap­pen­ing. That said, you can do a lot of things with­out hav­ing to pay some­one to point out the obvious.

Know Your Per­for­mance Blockers

Per­for­mance can be mea­sured in var­i­ous ways. One way is tech­ni­cal: see­ing how fast a page loads and how many bytes are trans­ferred. Another is per­ceived per­for­mance, which ties into usabil­ity test­ing. This can only be mea­sured by test­ing with users and see­ing how sat­is­fied they are with the speed of your inter­face (e.g. do they start click­ing on your JavaScript carousel before it is ready?).

The good news (and hard truth) about per­for­mance is that 80 to 90% of poor per­for­mance hap­pens in the front end. Once the browser gets the HTML, the server is done and the back-​​end devel­oper can do noth­ing more. The browser then starts doing things to our HTML, and we are at its mercy. This means that to achieve peak per­for­mance, we have to opti­mize our JavaScript, images, CSS and HTML, as well as the back end.

So here are the things that slow down your page the most.

Exter­nal Resources (Images, Scripts, Style Sheets)

Every time you load some­thing from another server, the fol­low­ing happens:

1. The browser opens up the Internet’s address book and looks up the num­ber asso­ci­ated with the name of the server that’s hold­ing the things you want (i.e. its DNS entry).
2. It then nego­ti­ates a delivery.
3. It receives the deliv­ery (wait­ing for all the bytes to come in).
4. It tries to under­stand what was sent through and dis­plays it.

Every request is costly and slows down the load­ing of the page. This is also caused by browsers load­ing things in chunks (usu­ally four at a time) rather than all at the same time. This is akin to order­ing a prod­uct from a web­site, choos­ing the cheap­est deliv­ery option and not being at home between 9:00 am and 5:00 pm. If you include sev­eral JavaScript libraries because you like a cer­tain wid­get in each, then you’ll dou­ble, triple or even quadru­ple the time that your page takes to load and display.

Scripts

JavaScript makes our web­sites awe­some and fun to use, but it can also make for an annoy­ing experience.

The first thing to know about scripts that you include in a doc­u­ment is that they are not HTML or CSS; the browser has to call in an expert to do some­thing with them. Here is what happens:

1. When­ever the browser encoun­ters a <script> block in the doc­u­ment, it calls up the JavaScript engine, sits back and has a coffee.
2. The script engine then looks at the con­tent in the script block (which may have been deliv­ered ear­lier), sighs, com­plains about the poor code, scratches its head and then does what the script tells it to do.
3. Once the script engine is done, it reports back to the browser, which puts down its cof­fee, says good-​​bye to the script engine and looks at the rest of the doc­u­ment (which might have been changed, because the script may have altered the HTML).

The moral of the story is to use as few script blocks as pos­si­ble and to put them as far down the doc­u­ment as pos­si­ble. You could also use clever and lazy JavaScript, but more on that later.

Images

Here is where things get inter­est­ing. Opti­miz­ing images has always been the bane of every visual designer. We build our beau­ti­ful images in Illus­tra­tor, Pho­to­shop or Fire­works and then have to save them as JPG, GIF or PNG, which changes the col­ors and dete­ri­o­rates the qual­ity; and if we use PNG, then IE6 arrives as the party-​​pooper, not let­ting us take advan­tage of PNG’s cool features.

Opti­miz­ing your images is absolutely nec­es­sary because most of the time they are the biggest files on page. I’ve seen peo­ple jump through hoops to cut their JavaScript down from 50 KB to 12 KB and then hap­pily use a 300 KB logo or “hero shot” in the same doc­u­ment. Per­for­mance needs you!

Find­ing the right bal­ance between visual loss and file size can be daunt­ing, but be grate­ful for the Web pre­view tool, because we didn’t always have it. I recall using Pho­to­shop 4 and then Pho­to­shop with the Ulead Smart­Saver, for example.

The inter­est­ing thing about images, though, is that after you have opti­mized them you can still save many more bytes by strip­ping unnec­es­sary data from the files and run­ning the files through tools that fur­ther com­press the images but are non-​​lossy. The bad news is that many of them are out there, and you’ll need dif­fer­ent ones for dif­fer­ent image for­mats. The good news is that tools exist that do all that work for you, and we will come back to this later. For more advanced opti­mizaition tech­niques feel free to take a closer look at the Smash­ing Magazine’s arti­cles Clever JPEG Opti­miza­tion Tech­niques, PNG Opti­miza­tion Guide and Clever PNG Opti­miza­tion Tech­niques.

Sim­ple Tools You Can Use Now To Improve Performance

All of those com­pa­nies that obsess about page per­for­mance offer tools that allow you to check your own web­site auto­mat­i­cally and make it easy to work around problems.

Test Your Performance

The first thing to do is find out how your web­site can be opti­mized. Here are three great tools (among oth­ers that crop up all the time) to use and combine.

Yahoo’s YSlow

YSlow is a Fire­bug add-​​on from Yahoo that allows you to auto­mat­i­cally check your web­site for per­for­mance issues. The results are ranked like Amer­i­can school grades, with A being the best and F being the worst. The grades are cross-​​linked to best prac­tice doc­u­men­ta­tion on the Yahoo per­for­mance pages. You can test sev­eral set­tings: “clas­sic YSlow,” which is tar­geted to Yahoo-​​sized web­sites, “YSlow 2″ and “small site or blog.” Results are listed clearly and let you click through to learn.

In the com­po­nents view, YSlow lists all of the issues it has found on your web­site and how seri­ous they are:

The sta­tis­tics view in YSlow gives you all infor­ma­tion in pie charts:

The tools sec­tion in YSlow offers a lot of goodies:

• JSLint
  Checks the qual­ity and secu­rity of your JavaScripts by run­ning them through JSLint.
• All JS
  Shows all JavaScript code in a document.
• All JS Beau­ti­fied
  Shows all JavaScript code in a doc­u­ment in an easy-​​to-​​read format
• All JS Mini­fied
  Shows all JavaScript code in a doc­u­ment in a mini­fied for­mat (i.e. no com­ments or white space)
• All CSS
  Show all CSS code in a document
• All Smush​.it
  Auto­mat­i­cally com­presses all of your images (more on this later).
• Print­able View
  Cre­ates a print­able doc­u­ment of all of YSlow’s results (great for show­ing to a client after you’ve opti­mized the page!)

Google’s Page Speed

Like YSlow, Page Speed by Google is also an add-​​on for Fire­bug. Its main dif­fer­ence is that it does a lot of the opti­miza­tion for you and pro­vides the mod­i­fied code and images immediately.

Page Speed’s other extra is that it mon­i­tors the over­all activ­ity of your page, allow­ing you to see when a doc­u­ment loads other resources after it has been loaded and to see what hap­pens when a user rolls over ele­ments or opens tabs and menus that load con­tent via AJAX.

Be care­ful with this fea­ture, though: it ham­mers your browser quite hard.

AOL’s Web­PageTest

Rather late to the game, AOL’s Web­PageTest is an appli­ca­tion with some very neat fea­tures. (It is also avail­able as a desk­top appli­ca­tion, in case you want to check Intranets or web­sites that require authentication.)

Web­PageTest allows you to run tests using either IE8 or IE7 from a server in the US or the UK, and it allows you to set all kinds of para­me­ters, such as speed and what to check for:

Once you have defined your para­me­ters and the test­ing is com­pleted, you will get in-​​depth advice on what you can do to opti­mize. You’ll get:

• A sum­mary,
• Detailed results,
• A per­for­mance review,
• An opti­miza­tion report,
• The con­tent breakdown,
• The domain breakdown,
• A screen­shot.

One very cool fea­ture of Web­PageTest is the visual record­ing you get of how long it takes for page ele­ments to show up on screen for users. The fol­low­ing screen­shot com­pares the results of this blog, Ajax­ian and Nettuts+:

You can even cre­ate a video of the ren­der­ing, which is another very cool thing to show clients.

Once you get the test results, it is time to fix any problems.

Use Image Sprites

Image Sprites were first dis­cussed in an arti­cle pub­lished by Dave Shea and based on the work of Petr Stan­icek. They have been cov­ered exten­sively here before, but under­stand­ing their full ben­e­fit is impor­tant before you start using them:

• All of your images will be avail­able as soon as the main image has loaded (no flick­er­ing on roll-​​overs or other annoyances).
• One HTTP request is made, instead of dozens (or hun­dreds, in some cases).
• Images have a much higher chance of stay­ing cached on the user’s machine because they are con­tained in a sin­gle file.

Shea’s arti­cle points out a lot of cool resources for cre­at­ing CSS Sprites but misses one that was released not long ago. Sprite Me was pro­duced by Google (under the super­vi­sion of Steve Soud­ers) and allows you to cre­ate Sprites auto­mat­i­cally from any web­site, even via a book­marklet. It ana­lyzes the images on a page and offers you var­i­ous options before gen­er­at­ing the Sprite and CSS for you.

Here’s a video of Steve show­ing Sprite Me in action:

Opti­mize Your Images

You know now that Page Speed can auto­mat­i­cally opti­mize your images. Another way to do this is with Yahoo’s Smush It, which is a set of image opti­miza­tion tools that ana­lyze your images, cre­ate the small­est pos­si­ble ver­sions and sends you a ZIP file of them all.

You can use Smush​.it directly in the browser or auto­mat­i­cally from YSlow. The web­site tells you how many bytes you can save by opti­miz­ing your images. This is yet another cool thing to show poten­tial clients when pitch­ing for a job.

Col­late Scripts and Load Scripts on Demand

As noted, try not to spread your <script> nodes all over the doc­u­ment, because the browser stops when­ever it encoun­ters one. Instead, insert them as far down in the doc­u­ment as possible.

You could even col­late your scripts auto­mat­i­cally in one sin­gle include using back-​​end scripts. Edward Eliot wrote one of these in PHP a while ago. It lets you cre­ate a sin­gle JavaScript include for all of your scripts and one for your CSS files, and it even ver­sions them for you.

JavaScript can be added dynam­i­cally to the page after the page has loaded. This tech­nique is called “lazy load­ing,” and sev­eral tools are avail­able to do it. Jan Jar­falk has one to lazy load jQuery plug-​​ins.

Some JavaScript libraries let you import only what you really need, instead of bring­ing in the whole singing-​​and-​​dancing library. YUI, for exam­ple, has a con­fig­u­ra­tor that allows you to pick and choose what you need from the library and either gives you a sin­gle URL where you can get the dif­fer­ent scripts or cre­ates a JavaScript that loads them on demand:

Notice that a tab tells you what the over­all size of the library will be.

The main trick in lazy load­ing is to dynam­i­cally cre­ate script nodes with JavaScript after the page has loaded and only when they are needed. I wrote about that two years ago on 24ways, and it has been a best prac­tice for dis­play­ing badges and wid­gets for a long time now.

Use Net­work Dis­trib­uted Hosting

If you use a library or CSS pro­vided by a library, make sure to use the hosted ver­sions of the files. In the case of YUI, this is done for you if you use the con­fig­u­ra­tor. And you can pick from Yahoo or Google’s network.

For other libraries, there is a Google code repos­i­tory of AJAX libraries. This is use­ful for a few reasons:

• Vis­i­tors to your web­site will get the JavaScript and CSS from the server that is as geo­graph­i­cally close to them as pos­si­ble and won’t have to wait for your server to send the infor­ma­tion from around the globe.
• There is a high prob­a­bil­ity that these servers are faster than yours.
• Vis­i­tors who have vis­ited other web­sites that use the same includes will already have them on their com­put­ers and won’t need to load them again.
• You save on band­width and can eas­ily upgrade the library by chang­ing the ver­sion num­ber of the include.

While you prob­a­bly wouldn’t be able to afford dis­trib­uted host­ing for your own files, Coral makes an inter­est­ing offer to dis­trib­ute your data onto a net­work of servers for an afford­able $50 a month.

Watch Some Videos

If you want to see how some of this work, check out the fol­low­ing videos, espe­cially Nicole Sullivan’s, which shows some very cool CSS tricks:

• Using YSLow 2.0
• Using Google Page Speed
• Nicole Sul­li­van tells you not to blame the rounded cor­ners but to design for fast websites
• Steve Soud­ers show­ing Sprite Me
• Dou­glas Crock­ford on AJAX per­for­mance.

Fol­low The Leaders

To learn more about web­site per­for­mance, here are some resources and peo­ple to fol­low. (Be warned: some of the con­tent is tech­ni­cally tough.)

• The Yahoo Devel­oper Net­work Per­for­mance Sec­tion
  Home of YSLow and prob­a­bly the first offi­cial per­for­mance research website.
• Per­for­mance Planet
  A col­la­tion of all per­for­mance blogs and posts in one RSS feed.
• Steve Soud­ers (@souders)
  Ex-​​maintainer of the per­for­mance sec­tion of Yahoo, now at Google. Author of the biggest per­for­mance books. And orga­nizer of the Veloc­ity conference.
• Nicole Sul­li­van (@stubbornella)
  Ex-​​team mem­ber of the per­for­mance group at Yahoo and co-​​creator of Smush​.it. Also CSS per­for­mance god­dess with great tips for design­ers. Cur­rently work­ing on mak­ing Face­book per­form better.
• Stoyan Ste­fanov (@stoyanstefanov)
  Coder of Smush​.it and mem­ber of the per­for­mance team at Yahoo. Cre­ated his own advent cal­en­dar of per­for­mance tips this year, and runs Per­for­mance Planet, as men­tioned above.
• Ed Eliot and Stu­art Colville
  Builders of the CSS Sprite Gen­er­a­tor.
• Jake Archibald (@jaffathecake)
  Lead devel­oper of the BBC’s Glow library. Deliv­ered a great talk on per­for­mance at this year’s Full Frontal conference.
• Phillip Tel­lis (@bluesmoon)
  Per­for­mance junkie at Yahoo.
• And me, their fan­boy and per­son ask­ing for fea­tures: Chris Heil­mann (@codepo8).

(al)

© Chris­t­ian Heil­mann for Smash­ing Mag­a­zine, 2010. | Perma­link | Be the first to com­ment | Add to del​.icio​.us | Digg this | Stum­ble on Stum­ble­Upon! | Tweet it! | Sub­mit to Red­dit | Forum Smash­ing Mag­a­zine
Post tags: opti­miza­tion, per­for­mance

Posted in Graphic Design | Comments Off

Creative Use of Handwriting Fonts in WebDesign

A beau­ti­fully use the hand­writ­ing fonts on a web­site add unique feel to the whole design. Design­ers use hand­writ­ing fonts and graph­ics as dif­fer­ent ele­ment in web design some use in logo, nav­i­ga­tions, with or with­out icons and even in main con­tent. This type of ele­ment can be used for small details or even for the whole site layout.

In this post I’d like to take a look at many great exam­ples of hand­writ­ing that surely affect the design of a web­site. The list includes a great deal of vari­ety. Regard­less of what you per­son­ally pre­fer, there should be some inspi­ra­tional exam­ples in here for you, obvi­ously can­not cover all the best from the web, but we have tried to cover as much as possible.

If you don’t want to miss out our next posts, you can Sub­scribe to the 2Experts Design Blog or fol­low us on twitter

Leweb­defi

Thi­sis­brand­new

Social­snack

Mark­for­rester

Camel­lie

Thomasprior

Kidacne

Kreati­vaun­lim­ited

84Colors

Tour­dust

Asim­ple­mea­sure

Elliot­jay­stocks

Free­lenz

TShirt Blog

Project365

FREE FONTS RESOURCES

20 Free Hand­writ­ten Fonts And Resources

50 Free Hand­writ­ten Fonts for Web Design­ers and Logo Artists

Enjoy this Post? Sub­scribe to the 2Experts Design Blog or fol­low us on twitter

Our blog is updated reg­u­larly with con­tent related to web design, inspi­ra­tion, tuto­ri­als, word­press, free­bies and much more. If you don’t want to miss out on future posts, you can sub­scribe by RSS or Email

Posted in Graphic Design, Resources, Web Design | Comments Off

Build It With Me Help You Bootstrap Ideas Into Actual Apps

Build It With Me is a great appli­ca­tion to brings all the design­ers, devel­op­ers and entre­pre­neurs under one roof. Get­ting fund­ing for your app idea is hard and often unre­al­is­tic; it will help you boot­strap your ideas into actual apps.

Have you ever had an idea for a web­site or appli­ca­tion that you just couldn’t develop your­self? How many times have you just let that idea fall to the back of your mind to pos­si­bly get lost for­ever – just because you couldn’t get the right fund­ing or couldn’t find the right peo­ple to work on it? By using the Build It With Me pow­er­ful tools that sim­ply enable users to improve how they work and share ideas together.

More from Build It With Me:

“Build It With Me is a tool that con­nects design and devel­op­ment entre­pre­neurs. It exists to make cre­at­ing apps eas­ier by con­nect­ing you with like-​​minded design­ers and devel­op­ers with the same goal: cre­ate cool and use­ful apps.”

“Get­ting fund­ing for your app idea is hard and often unre­al­is­tic. Most of the time you may just need to con­nect with a part­ner who has a skill set you lack to fin­ish off your app. This is where Build It With Me is comes in, con­nect­ing you to those peo­ple. Skip the fund­ing. Build It With Me will help you boot­strap your ideas into actual apps.”

Enjoy this Post? Sub­scribe to the 2Experts Design Blog or fol­low us on twitter

Our blog is updated reg­u­larly with con­tent related to web design, inspi­ra­tion, tuto­ri­als, word­press, free­bies and much more. If you don’t want to miss out on future posts, you can sub­scribe by RSS or Email

Posted in Graphic Design, Resources, Web Design | Comments Off

25 User Experience Videos That Are Worth Your Time

We’re all mostly accus­tomed to edu­cat­ing our­selves by read­ing arti­cles. Rare are the oppor­tu­ni­ties to attend con­fer­ences or watch live shows on sub­jects that we’re inter­ested in. That’s why we are pre­sent­ing here phe­nom­e­nal videos and related resources on the topic of user expe­ri­ence (UX) by dif­fer­ent pre­sen­ters at dif­fer­ent events. We have focused on cur­rent con­tent but have included some older videos that are still rel­e­vant. It will take you more than 16 hours to watch all of these videos. So, make some pop­corn, turn off the lights and enjoy.

User Expe­ri­ence Videos

The State of User Expe­ri­ence
Jesse James Garett, founder of Adap­tive Path and author of the book The Ele­ments of User Expe­ri­ence, speaks on what UX and UX design is, what UX looked like before and what are some of the chal­lenges peo­ple are encoun­ter­ing now. He cites engage­ment as the main goal of UX design and, through some fan­tas­tic exam­ples, shows that engage­ment is an uni­ver­sal qual­ity achieved through visu­al­ity, sound, touch, smell, taste, body and mind. One of the most impres­sive moments from the ses­sion is when Jesse com­pares Beethoven to an expe­ri­ence designer, accom­pa­nied by the Ninth Sym­phony. Dura­tion: 40 minutes.

UX Best Prac­tices
In this excel­lent video ses­sion, Nick Finck pries open the most pop­u­lar web­sites today, includ­ing eBay, Ama­zon, Toy­ota, Flickr, Twit­ter and Net­flix, to explain user expe­ri­ence best prac­tices. Nick dis­cusses both the good and bad expe­ri­ences on these web­sites on the basis of visual design, infor­ma­tion archi­tec­ture, inter­ac­tion and ease of use. For those unfa­mil­iar with UX, Nick explains the basic con­cept and con­tribut­ing fac­tors. The last 20 min­utes of the ses­sion are reserved for Q&A, and some very inter­est­ing ques­tions and great answers come up. Dura­tion: 1 hour 32 min­utes. There is no video of the ses­sion, only 75 slides with an aud­tio track.

The Three Ways That Good Design Makes You Happy
In this short but fan­tas­tic lec­ture, Don Nor­man, known to many as the author of The Design of Every­day Things, explains visual, behav­ioral and reflec­tive design and the ways in which each of them affects peo­ple. In his witty way, Done shows exam­ples from every­day life. Dura­tion: 13 minutes.

5 Min­utes on Imi­ta­tion in Design
In this bril­liant short talk, Jef­frey Veen explains what is meant by “Good artists copy, great artist steal.” By way of an inter­est­ing short story about World War II and the Amer­i­can army’s con­tact with natives of the Pacific Islands, he also explains “cargo cult” and how it still present today. A truly bril­liant video. Dura­tion: 6 minutes.

UX Team of One
In this half-​​hour ses­sion held at the IA Sum­mit 2008, Leah Buley of Adap­tive Path shows what it means to be a UX team of one by telling her own story and recount­ing a real-​​life exam­ple. Leah explains the con­cept of gen­er­a­tive design, which is the process of cre­at­ing and sketch­ing a lot of dif­fer­ent ideas and then refin­ing them. The slides are amaz­ing because Leah drew them by hand. Dura­tion: 32 minutes.

Expe­ri­ence Is the Prod­uct
Peter Mer­holz explains why it is impor­tant to focus not on tech­nol­ogy or fea­tures but on the prod­uct and the expe­ri­ence you want to cre­ate. The ses­sion is rich in good and bad exam­ples drawn from real life. Dura­tion: 43 minutes.

Behav­ior Is Our Medium
In this fan­tas­tic ses­sion, Robert Fab­ri­cant talks about inter­ac­tion design beyond com­put­ing tech­nol­ogy. His exam­ples include the fam­ily tree and one par­tic­u­larly inter­est­ing tree that his daugh­ters drew. His exam­ples from his­tory, espe­cially ancient his­tory, are amaz­ing and put inter­ac­tion design in a broader con­text beyond the com­puter inter­faces we’re so used to. Dura­tion: 61 minutes.

Web Form Design
If you think Web forms suck (because you have to fill them in every day), then you must see this video. This talk by Luke Wrob­lewsky at MIX 09 is based on years of expe­ri­ence in usabil­ity test­ing and study. Luke shows exam­ples from the real world and addresses the major prob­lems with Web form design today. You will see how some of the biggest web­sites have failed and what you can do to pre­vent such fail­ures in your Web forms. Dura­tion: 75 minutes.

User Expe­ri­ence Design for Non-​​Designers
In this short mini-​​breakout ses­sion, Shawn Konopin­sky explains what UX design is at a very abstract level. He shows three dif­fer­ent types of user inter­faces and how UX design applies to all three. He explains basic con­cepts such as con­cept ideation, inter­ac­tion design and visual design and empha­sizes the impor­tance of an “Agile” approach to projects. Dura­tion: 18 minutes.

The Impor­tance of Iden­tity and Vision to UX Design­ers on Agile Projects
If you watched the pre­vi­ous video, you will know why the Agile approach is impor­tant in UX design. This video and the slides go deeper into the Agile approach, rely­ing on research done at Lon­don uni­ver­sity. Johanna Koll­mann explains the research and the results. Dura­tion: 32 minutes.

Learn­ing IxD from Every­day Objects
“Inspi­ra­tion sur­rounds us in every­day objects.” This is how Bill DeR­ouchey begins this bril­liant talk about inter­ac­tion design. We use icons, words or shapes to cre­ate a lan­guage of inter­ac­tions. If we use the wrong lan­guage, the inter­ac­tion becomes con­fus­ing, and this is what Bill shows, using many com­mon objects and devices. One of the most inter­est­ing slides is the one that shows how users “hack the inter­face.” Dura­tion: 45 minutes.

Two videos: Infor­ma­tion and Archi­tec­ture
In these two short videos, Mickey McManus explains related con­cepts: infor­ma­tion and archi­tec­ture, using every­day objects, such as cup of tea, to illus­trate his argu­ment. The videos are part of a short arti­cle in which Mickey draws these con­cepts together to explain what infor­ma­tion archi­tec­ture is. Dura­tion: a few minutes.

Wire­frames for the Wicked
Nick Finck, along with Michael Angels and Donna Spencer, goes over wire­fram­ing basics via short easy ques­tions. What are wire­frames? Why use wire­frames? What does the process of wire­fram­ing look like? The three of them also explain the dif­fer­ent types of wire­frames and show exam­ples of their work. Dura­tion: 1 hour 5 minutes.

Design Pro­to­typ­ing: Bring­ing Wire­frames to Life
Dan Har­rel­son explains the pur­pose of pro­to­typ­ing, why it is impor­tant and how it dif­fers from wire­frames and visual comps. With wire­fram­ing, instead of see­ing how a con­cept func­tions or works, we see how it actu­ally feels, which con­tributes to bet­ter usabil­ity test­ing. The video, like all videos from MIX 09, has “dou­ble view”: while look­ing at the large slides, you have a syn­chro­nized inset video of the speaker. Dura­tion: 60 minutes.

Jour­ney to the Cen­ter of Design
Does user-​​centric design really exist? In this funny keynote, Jared Spool asks whether user-​​centric design (UCD) has lost its way and needs to evolve into some­thing else. Iron­i­cally, as stud­ies have shown, many great projects have suc­ceeded with­out UCD. Jared sug­gests three key attrib­utes of great expe­ri­ence design that can replace UCD. Dura­tion: 1 hour 14 minutes.

User-​​Centered Design 101
In this Web sem­i­nar, Frank Spiller demys­ti­fies the par­a­digm of UCD. He explains the dif­fer­ence between usabil­ity and UCD, which has con­fused many. From the per­spec­tive of the devel­op­ment process, he com­pares UCD to the Agile and Water­fall processes. At the end, he shows some UCD suc­cess sto­ries. Dura­tion: 58 minutes.

The Mint​.com Expe­ri­ence
Aaron Forth of Mint​.com speaks of the impor­tance of align­ing your user expe­ri­ence and busi­ness objec­tives. He goes over the chal­lenges of deliv­er­ing such a user expe­ri­ence at Mint, what the com­pany did to attract brand inter­est and how Mint became one of the best personal-​​finance soft­ware tools today. Inter­est­ing fact: Mint dis­con­tin­ued IE6 sup­port because it spent almost 20% of its time design­ing for the browser. Dura­tion: 40 minutes.

Mobile User Expe­ri­ences
Rachel Hin­man start her talk about mobile user expe­ri­ences with a provoca­tive thought: that tech­nol­ogy dis­en­gages us from real life. She says we should rethink our rela­tion­ship to devices and use them in the con­text of con­crete tasks. Dura­tion: 24 minutes.

Tap Is the New Click
“Sev­eral years ago, Minor­ity Report was a sci-​​fi movie, and now we’re already there with [the touch wall].” At the begin­ning of his ses­sion, Dan Saf­fer shows a cou­ple of exam­ples of touch-​​screen tech­nol­ogy that marks the begin­ning of a new era of inter­ac­tion in which ges­ture and touch replace mouse clicks. He explains how to design for these tech­nolo­gies by going over how touch-​​screens dif­fer from tra­di­tional web­sites and devices. Dura­tion: 67 minutes.

10/​GUI
This is a fan­tas­tic exper­i­ment that exam­ines cur­rent mouse-​​driven user inter­faces and their lim­i­ta­tion while offer­ing a com­pletely new way of inter­ac­tion. Although key­board and mouse were really great inno­va­tions in past cen­tury, Clay­ton Miller think we shouldn’t stop there but rather inno­vate fur­ther. Dura­tion: 8 minutes.

The Least You Can Do About Usabil­ity
Steve Krug, known to many as the author of Don’t Make Me Think, here tries to con­vince peo­ple to do their own usabil­ity test­ing. Con­firm­ing Jacob Nielsen’s advice, that devel­op­ers can do it them­selves, Steve iden­ti­fies the min­i­mum require­ments to make usabil­ity test­ing mean­ing­ful. At the end of the ses­sion, Steve per­forms a short usabil­ity test right in front of the audi­ence, which makes this ses­sion truly out­stand­ing. Dura­tion: 60 minutes.

AJAX Usabil­ity
Kelly Nor­ton talks about a very inter­est­ing, and often for­got­ten, sub­ject: AJAX usabil­ity. He cov­ers usabil­ity basics and how to design AJAX appli­ca­tions for humans. Full of real-​​life exam­ples, he offers sev­eral con­crete sug­ges­tions on how to improve usabil­ity in AJAX appli­ca­tions. Dura­tion: 55 minutes.

Jason Fried of 37signals Speak­ing at Busi­ness of Soft­ware 2008
In this short amaz­ing ses­sion, Jason Fried shares his thoughts and expe­ri­ences from 37Signals. Ideas are agile, some even rad­i­cal. This video is inter­est­ing because many of Jason’s thoughts con­trast with wide­spread opin­ion. In the sec­ond half of the ses­sion, Jason uses audi­ence ques­tions to explain his ideas in more detail. Dura­tion: 55 minutes.

Bonus videos

Sketch­ing User Expe­ri­ences
In this keynote from MIX09, the first 25 min­utes are taken up by Bill Bux­ton, known to many as the author of the book Sketch­ing User Expe­ri­ences. In an opti­mistic talk, he explains why now, in these days of cri­sis, is a good time to pay atten­tion to design and what key fac­tors are required to revi­tal­ize the user expe­ri­ence. Dura­tion: 25 minutes.

Inter­view With Don Nor­man on UX Week 2008
In a relaxed atmos­phere at UX Week 2008, Don Nor­man answers inter­est­ing ques­tions and share his thoughts on var­i­ous aspects of design. One of the best bits comes at the begin­ning, when Don speaks of his “cru­sade” to replace the word “users” with “peo­ple.” Will we ever have “Peo­ple Expe­ri­ence”? Do we already have it? Find the answer in this fan­tas­tic inter­view. Dura­tion: 53 minutes.

(al)

© Janko Jovanovic for Smash­ing Mag­a­zine, 2010. | Perma­link | 28 com­ments | Add to del​.icio​.us | Digg this | Stum­ble on Stum­ble­Upon! | Tweet it! | Sub­mit to Red­dit | Forum Smash­ing Mag­a­zine
Post tags: usabil­ity, user expe­ri­ence, ux

Posted in Design, Graphic Design | Comments Off

30 Best Movie Posters of 2009

Movie posters are known for a brief intro­duc­tion of what the movie all about. Every movie has a poster for its pub­lic­ity and mar­ket­ing pur­pose. Now over the past few years, we’ve con­tin­u­ously seen a boom of posters and DVD cov­ers con­tin­u­ing to appro­pri­ate the style.

A good poster is a very easy job for an reg­u­lar artist but a cre­ative poster takes a lot amount of time and think­ing for one or more group of artists which how­ever, reaches beyond the sim­ple adver­tise­ment work to a piece of art and the out­come is so won­der­ful then a reg­u­lar movie poster that it made movie mem­o­rable. Still there are excep­tions in which movie rat­ing was really low but the posters are really inspirational.

In the Pre­sen­ta­tion below, we col­lected Best Cin­e­matic Poster Arts that fairly cre­ative and dare to be dif­fer­ent, all from 2009 films.

You may be inter­ested in the fol­low­ing related arti­cles as well.

• A Col­lec­tion of Pixar Ani­mated Short Films
• 29 Cre­ative Movie Posters of 2008-​​09
• 42 Cre­ative Movie Posters of 2009
• 25 Movies That Tried Their Best To Destroy The World
• 77 Excel­lent Pho­to­shop Tuto­ri­als For Design­ing Posters

Please feel free to join us and you are always wel­come to share your thoughts even if you have more ref­er­ence links related to more cre­ative posters that our read­ers may like.

Don’t for­get to sub­scribe to our RSS-​​feed and fol­low us on Twit­ter — for recent updates.

Posted in Graphic Design, Web Design | Comments Off

90+ Useful jQuery Plugins for Designers and Developers

jQuery can help design­ers and devel­op­ers cre­ate impres­sive ani­ma­tions and inter­ac­tive web­sites that are appeal­ing and acces­si­ble to the widest range of browsers.

Here are 90+ use­ful jQuery plguins focus­ing on gallery and slideshows, nav­i­ga­tions and fur­ther resources to reduce time and effort while increas­ing your audi­ence.

If you don’t want to miss out our next posts, you can Sub­scribe to the 2Experts Design Blog or fol­low us on twitter

Acces­si­bil­ity

Stylesheet and text size switcher.

Accor­dion

Accor­dion inter­face with a few variations.

AlphaNu­meric

Pre­vent users from input­ing spe­cial characters.

Ajax File Upload

Load­ing graphic dis­plays while file is uploaded.

Append­Dom

Write HTML with JavaScript, great for dis­play­ing Ajax results.

Append­Text

Con­verts text into post friendly html.

BlockUI

Cre­ate a mes­sage over­lay while block­ing user inter­ac­tion on ele­ments or the entire page.

Bogo­Fold­ers

View text through a ‘file menu’ interface.

BogoTabs

Basic tabbed interface.

Bub­ble

Demo high­lights selected table rows in groups of tables..

Cal­en­dar
Aids date entry.

Check­box manip­u­la­tion
Select, uns­e­lect and tog­gle checkboxes.

Chili

Syn­tax high­light­ing for dis­play­ing code on webpages.

Choose Com­po­nent
Select data from a table row through a modal window.

Click Menu
Gen­er­ates drop­down menus.

clueTip
Tooltips with many variations.

Color Ani­ma­tions
Add color ani­ma­tions to div backgrounds.

Color Picker
Pass in color choices and attach cus­tom events to each color block.

column­Hover
High­light table rows and columns.

colum­n­Man­ager
Add, remove and tog­gle table columns.

Con­textMenu
– Menus that show when you right click spec­i­fied elements.

Con­firmer
Adds a lis­tener to check if user con­firms their action.

Cycle

Add flash-​​like image effects to rotat­ing image galleries.

date picker
Aids date entry.

Deli­cious
Read deli­cious book­marks from a user to dis­play on a webpage.

Dimen­sions
Get accu­rate win­dow and doc­u­ment attrib­utes across browsers.

Equal­ize Columns
Make columns the same height as the longest column.

FCKEd­i­tor Plu­gin
Adds a rich text edi­tor to a textarea.

Field
Expand the abil­ity to retrieve and set val­ues in forms.

Form

Change HTML forms to sub­mit via Ajax.

Gallery Viewer
JavaScript image gallery.

getUrl­Param
Func­tion to get url parameters.

Google Feed Plu­gin
Dis­play any RSS feed to a webpage.

Gra­di­ent
Adds a gra­di­ent to a div with­out need­ing an image.

Grid Col­umn Siz­ing
Table col­umn drag­gable resizing.

Grid Row Siz­ing
Expand and col­lapse table rows.

hov­er­In­tent
Pre­vents unin­tended hover events.

idTabs
Add tabbed inter­face to a website.

Impromptu
Cre­ate modal win­dows and messages.

jQuery Local­i­sa­tion
Applies local­i­sa­tion pack­ages based on the user’s lan­guage preference.

jBox
UI dia­log widget.

jCal­en­dar
Aids select­ing of dates inline on a page.

jCarousel Lite
Sim­ple carousel for images and HTML content.

jCode­Viewer
Syn­tax high­light­ing for dis­play­ing code on webpages.

jdMenu Hier­ar­chi­cal Menu
Gen­er­ates drop­down menus.

jEd­itable
Live edit­ing of ele­ments on a webpage.

jFeed
XML feed parser.

jPan­View
Replaces big images with a zoom viewer in HTML.

jqDnR
Drag’n’Resize ele­ments on a page.

jQMaps
Inter­act with Google maps.

jqModal
Dis­play notices, dialogs, and modal win­dows in a web browser.

Treetable
Make a tree view out of an HTML table.

Tree View

Tree view controls.

Sug­gest
Add auto­com­plete to input fields.

YAV
Form val­i­da­tion library.

jqU­ploader
Pro­vides a sta­tus bar for upload­ing images.

jScroll­Pane
Cus­tomize your scrollbars.

jTagEd­i­tor

Turn a textarea into a tag editor.

jVari­a­tions
Cre­ate a con­trol panel to manip­u­late ele­ments on a page.

Key­board Nav­i­ga­tion
Dynam­i­cally deter­mine which ele­ment to focus on based on it’s posi­tion on the screen.

labelOver
Over­lay labels over an input field.

LavaLamp
Nav­i­ga­tion menu with a ‘lava’ effect.

Lazy Load
Only load images that are in the cur­rent window.

Live Query
Adds event lis­ten­ers to elements.

Masked Input
Add mask to inputs to aid user data entry (phone num­bers, etc).

Media

Unob­tru­sive con­ver­sion of stan­dard markup into rich media content.

Extra selec­tors for JQuery
Add more selec­tors to jQuery.

Mouse­wheel
Mouse­wheel event handler.

Mouse­hold Event
Add repeat­ing event as the user holds down the mouse.

Mul­ti­ple File Upload
Select mul­ti­ple files one by one as it adds to a queue list.

new­sticker
Cre­ate a fad­ing news ticker.

Pass­word Strength Meter
Indi­ca­tor to show the strength of a users password.

Pop­up­Win­dow
Cre­ates an pre­view popup of des­ti­na­tion link.

Query String Object
Use­ful for send­ing URL parameters.

Select box manip­u­la­tion
Remove and add options from a select list or drop­down in many ways.

select­Combo
Tool for mak­ing depen­dant drop­downs with Ajax.

Star Rat­ing
Gen­er­ates star rat­ing from input fields

Grid
Dynamic ajax grid control.

slide­Viewer
Image gallery as slides.

Spoil­ers
Hide con­tent behind an image until user action is taken.

table­Hover
Row and col­umn high­light­ing with variations.

table­Filter
Search box is added to each col­umn header to fil­ter table.

table­sorter
Client side table sorting.

Taconite

Eas­ily make mul­ti­ple DOM updates using the results of a sin­gle AJAX call.

Textgrad
Add gra­di­ents to whole blocks of text.

Time Entry
Sets an input field up to accept a time value.

Tooltip
Add tooltips from title page.

Val­i­da­tion

Add live val­i­da­tion to forms.

WYMed­i­tor

Web-​​based XHTML WYSIWYM editor.

Zoomi
Zoomable thumbnails.

XSLT
Trans­form XML/​XSL from JavaScript.

XAP
Ajax library.

Enjoy this Post? Sub­scribe to the 2Experts Design Blog or fol­low us on twitter

Our blog is updated reg­u­larly with con­tent related to web design, inspi­ra­tion, tuto­ri­als, word­press, free­bies and much more. If you don’t want to miss out on future posts, you can sub­scribe by RSS or Email

Posted in Design, Graphic Design, Resources, Web Design | Comments Off