Top Articles On The Web Design Billboard In September’09

A per­fect lay­out, A Good Design and Nice Resource can pro­duce a cre­ative out­put. Lay­out, tex­tures, typog­ra­phy and pat­terns are used more often than one may think but the out­come of dif­fer­ent com­bi­na­tion can result ver­ity of excel­lent designs. Pro­fes­sion­al­ism is built upon knowl­edge and expe­ri­ence. How­ever, When it comes to selec­tion of right resources you need to be very care­ful and spe­cific about needs.

In this round-​​up, you’ll find num­ber of top resources, tuto­ri­als, free­bies which left deep impres­sion on web design com­mu­nity, as the month of Sep­tem­ber had a lot of inter­est­ing arti­cles pro­duces by dif­fer­ent sources.

The more time and effort you ded­i­cate for use­ful and cre­ative resources, the higher are your chances for get­ting bet­ter results.

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

• Top Arti­cles On The Web Design Bill­board In August’09
• Top Arti­cles On The Web Design Bill­board In July’09
• Cor­po­rate Web­site Designs For Design Inspi­ra­tion — Part I, Part II
• Sin­gle Page Web­site Designs For Design Inspi­ra­tion — Part I, Part — II
• 90 Cre­ative Back To Top Links and Best Practices

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 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 Design, Graphic Design, Web Design | Comments Off

40+ Desert Island Web Development Tools

What would you do if you were sud­denly stranded on a desert island in the mid­dle of nowhere, with only a USB drive, a dial-​​up inter­net con­nec­tion, and a bare­bones com­puter with no soft­ware out­side the oper­at­ing sys­tem installed? Of course, you’d use the inter­net con­nec­tion to call for help first, but what about after that? How would you keep your design busi­ness going?

Okay, maybe a sce­nario that’s a bit more likely would work bet­ter. What if your com­puter crashed, wip­ing out all of your data and pro­grams, and you have a dead­line in two days? Or maybe you want to be able to pick up and leave at a moment’s notice with­out tak­ing any­thing more than a change of clothes and a USB drive. If you have the apps below, nei­ther of those sce­nar­ios would be much of a prob­lem.

The apps on this list can help you with every­thing from cod­ing to graph­ics to run­ning your busi­ness and man­ag­ing your projects, all from a sin­gle USB drive. And while USB dri­ves are get­ting big­ger all the time (last I checked a 64GB one wasn’t too badly priced, and that’s 4GB more stor­age than my cur­rent Mac­Book has), you still need spe­cial pro­grams in most instances to have true porta­bil­ity. The apps below are just that: truly portable and small enough to fit on a USB drive (often a very small USB drive).

Cod­ing

Notepad++ Portable Edition

Notepad++ Portable Edi­tion is a cod­ing appli­ca­tion that includes all the fea­tures you’d expect in a cod­ing app. It’s writ­ten in C++ and runs on Win­dows. It’s open source and was released under the GPL license.

The portable edi­tion includes all the fea­tures of the reg­u­lar ver­sion. It has multi-​​view, sup­ports a multi-​​language envi­ron­ment, a WYSIWYG edi­tor, auto-​​complete, syn­tax high­light­ing and fold­ing, and macro record­ing and play­back, among its other fea­tures. It’s a great light­weight cod­ing app.

Nvu Portable

Nvu Portable is the portable edi­tion of Nvu Web Author­ing Soft­ware. It includes a WYSIWYG edi­tor and pow­er­ful file man­age­ment. It’s aimed at users who might not be par­tic­u­larly tech­ni­cally savvy and only have a lim­ited knowl­edge (or none at all) of HTML and CSS.

The portable edi­tion has all the fea­tures and capa­bil­i­ties of the reg­u­lar ver­sion. It works on Win­dows sys­tems, and was released under the open source GPL license.

Oiko CSS Editor

Oiko CSS Edi­tor is a full-​​featured CSS, (X)HTML and XML edi­tor in a portable for­mat. It works on Win­dows 98 through XP. It’s a fairly robust edi­tor, with an easy-​​to-​​use inter­face, grouped view of prop­er­ties and selec­tors, a tree view of your CSS’s struc­ture, and includes active pre­view in both IE and Mozilla browsers.

Graph­ics and Multimedia

Blender Portable

Blender Portable is a portable ver­sion of the Blender 3D ren­der­ing pro­gram. It works with the PortableApps​.com plat­form. The portable ver­sion includes all the fea­tures of the reg­u­lar ver­sion of Blender.

Blender has a range of fea­tures for rig­ging, mod­el­ing, ani­mat­ing and ren­der­ing 3D images. It has a fully cus­tomiz­able win­dow lay­out and a non-​​overlaping, non-​​blocking UI. And it includes a built-​​in text edi­tor for anno­ta­tions and edit­ing Python scripts.

GIMP Portable

GIMP Portable is a good alter­na­tive to Adobe Pho­to­shop in a portable for­mat. While GIMP’s user inter­face takes a bit of get­ting used to com­pared to other photo edit­ing pro­grams, it’s actu­ally quite flexible.

The portable ver­sion of GIMP has all the fea­tures of the full ver­sion, includ­ing lay­ers and fil­ters. It can also be extended and expanded, just like the full version.

Lightscreen Portable

Lightscreen Portable is a portable app that runs on Win­dows and lets you take screen­shots of the desk­top of what­ever com­puter you’re on. It will per­form five con­fig­urable actions (to cap­ture win­dow, screen, etc.) and each has its own hotkey.

Lightscreen will save images in PNG, JPEG and com­mon other image for­mats. It also has a delay func­tion for tak­ing screen­shots. It runs as a hid­den back­ground process and is acti­vated with one or more hotkeys.

Portable Audac­ity OS X

Portable Audac­ity is portable audio edit­ing soft­ware for Mac OS X. Audac­ity has tons of fea­tures, includ­ing the abil­ity to record live audio, edit (includ­ing the abil­ity to edit and mix an unlim­ited num­ber of tracks), add effects to audio files, and work with a vari­ety of dif­fer­ent file formats.

While the full ver­sion of Audac­ity is avail­able for Win­dows, Mac OS X, and Linux machines, the portable ver­sion is only avail­able for Mac OS X. But con­sid­er­ing it’s open source, it makes sense that a portable ver­sion for Win­dows or Linux would be devel­oped if there’s enough demand.

Portable Inkscape OS X

Portable Inkscape is a portable vec­tor graph­ics edit­ing pro­gram. Inkskape has fea­tures sim­i­lar to other vec­tor graph­ics pro­grams, includ­ing Illus­tra­tor, Corel­Draw, and Xara X. It saves graph­ics in SVG (Scal­able Vec­tor Graph­ics) format.

There is exten­sive doc­u­men­ta­tion avail­able for Inkscape on their web­site, a big plus if you’re new to using it. The portable ver­sion is only avail­able for Mac OS X, though the full ver­sion is also avail­able for Linux and Windows.

Fast­Stone Capture

Fast­Stone Cap­ture is a portable screen cap­ture util­ity. You can cap­ture any­thing on your screen: win­dows, full screen, rec­tan­gu­lar regions, objecs, free­hand regions, and even scrolling win­dows (a big plus over many other screen-​​capture pro­grams, portable or not).

Other fea­tures include the abil­ity to add text anno­ta­tions to cap­tures, resize them, and use hotkeys for spe­cific func­tions. Fast­Stone Cap­ture only works on Win­dows sys­tems, but is com­pat­i­ble with Windows98 right up through Vista.

Fotografix

Fotografix is a portable graph­ics pro­gram that lets you both edit and cre­ate images. There are brush tools, sup­port for cus­tom brushes, layer and chan­nel sup­port (includ­ing adjust­ment lay­ers and mask­ing), and a vari­ety of other tools included.

One of Fotografix’s biggest advan­tages, though, is it’s tiny file size: it’s only 367KB. If you want a really light­weight and easy to use graph­ics edi­tor, Fotografix might be the right choice for you. How­ever, it’s not as robust as a pro­gram like Pho­to­shop, so keep that in mind.

Artweaver

Artweaver is a portable, free­ware paint pro­gram. It lets you cre­ate sketches right from pho­tos and includes a wide vari­ety of brushes. It also lets you cre­ate new brushes and cus­tomize exist­ing ones.

Artweaver also sup­ports trans­parency and lay­ers, and a vari­ety of image for­mats (JPG, PNG, PSD, and more). It’s expand­able via plu­g­ins, too. Artweaver works on Win­dows 2000, XP, or Vista.

VLC Media Player Portable

VLC Media Player Portable is a portable media player for using audio and video files. It will play MPEG-​​1, MPEG-​​2, MPEG-​​4, DivX, WMV, MP3, and a host of other file for­mats. And, in addi­tion to play­ing your var­i­ous media files, it can also act as a media server to stream in uni­cast or mul­ti­cast in IPv4 or IPv6.

Winamp Lite

Winamp Lite is the portable ver­sion of Winamp MP3 player soft­ware. Skins and plu­g­ins are also portable, mak­ing this another great solu­tion for lis­ten­ing to MP3s on the go. Portable setup is a bit involved but not par­tic­u­larly complicated.

File Man­age­ment

FileZilla Portable

FileZilla Portable is another PortableApps​.com appli­ca­tion for FTP. It sup­ports FTP, FTPS, and SFTP file trans­fers, as well as man­age­ment for trans­fer­ring large files (over 4GB). There are tons of con­fig­u­ra­tion options. It also sup­ports HTTP/1.1, SOCKS5 and FTP-​​proxy, and includes log­ging to file, syn­chro­nized direc­tory brows­ing, and remote file search.

Win­SCP Portable

Win­SCP Portable is an FTP pro­gram for Win­dows that includes SFTP and SCP pro­to­cols and direc­tory syn­chro­niza­tion. It’s been around for awhile but per­forms all com­mon file oper­a­tions and has an inte­grated text edi­tor. It also sup­ports batch file script­ing and a command-​​line inter­face in addi­tion to a GUI.

7-​​Zip Portable

7-​​Zip Portable is a PortableApps​.com pro­gram that lets you com­press and uncom­press a vari­ety of archived file types, includ­ing 7z, ZIP, GZIP, BZIP2, TAR, and RAR files. It also sup­ports cre­at­ing encrypted 7z and ZIP archives and includes a pow­er­ful file man­ager. There are local­iza­tions for 63 lan­guages avail­able with the portable edition.

Tou­can

Tou­can lets Win­dows users back up and sync data between two dri­ves (like your hard drive and USB drive). It’s com­pletely portable and free to down­load. There are a vari­ety of advanced backup set­tings you can use, includ­ing incre­men­tal back­ups with com­pres­sion and advanced rulesets.

Test­ing

XAMPP

XAMPP is a com­plete, portable web server pack­age of Apache, MySQL, PHP and Perl. It’s pre­con­fig­ured, so all you need to do is unzip and install it. It includes php­MyAd­min, FileZilla FTP Server, SQLite, the Zend Opti­mizer, and MiniPerl, among other fea­tures. It’s a com­plete web, FTP and data­base server in a sin­gle pack­age. There’s also a lite ver­sion that includes Apache, MySQL, php­MyAd­min, SQLite, and their related packages.

Portable Fire­fox

Portable Fire­fox is the portable edi­tion of Mozilla Fire­fox. It’s a great app to take with you for work­ing on other people’s com­put­ers, as you can store and access your own book­marks, pass­words, and pref­er­ences. The portable edi­tion doesn’t leave any­thing behind on the com­puter you’re using, so you can be secure in sav­ing your pass­words and other infor­ma­tion. It even appears to work with any exten­sions you install. It’s a PortableApps​.com app, so it’s only avail­able for Win­dows machines.

Don’t for­get if you’re using Portable Fire­fox to also make sure you’ve down­loaded some of the use­ful web devel­op­ment add-​​ons available.

• Fire­bug – For view­ing and on-​​page edit­ing of HTML, CSS, and JavaScript.
• CSS Viewer – A basic CSS prop­erty viewer.
• HTML Val­ida­tor – An HTML val­ida­tor tool­bar for Firefox.
• Web Devel­oper – Adds a menu and tool­bar with var­i­ous tools for web developers.
• Code­Burner – An HTML and CSS ref­er­ence guide built into Firefox.

Instant Rails

Instant Rails is a Ruby run­time solu­tion with Ruby on Rails, Apache and MySQL, all ready to run. All you have to do is put it in the direc­tory you choose and run it; there are no instal­la­tion files.

Server2Go

Server2Go is a server pack­age avail­able with a vari­ety of dif­fer­ent con­fig­u­ra­tions. There are pack­ages that include Apache, PHP and SQLite; Apache, PHP, SQLite, and MySQL; Apache, PHP, SQLite, MySQL, and Perl; as well as mini pack­ages (with only the needed files) and a “plain vanilla” pack­age that doesn’t include PHP, Perl, or MySQL).

Portable Chrome

Portable Chrome is the portable vesion of Google’s Chrome browser. It includes all the fea­tures of the reg­u­lar Chrome browser, includ­ing bet­ter sta­bil­ity and speed, tabbed brows­ing, and search right from the address bar.

Opera@USB

Opera@USB is a portable ver­sion of the Opera web browser. It’s very sim­i­lar to the desk­top ver­sion, though the dif­fer­ences aren’t expounded upon in the doc­u­men­ta­tion for the app. The full ver­sion (and pre­sum­ably the portable ver­sion) includes tabbed brows­ing, a pass­word man­ager, an inline spell checker, and sup­port for sav­able brows­ing sessions.

MoWeS Portable

MoWeS Portable is a portable web server for Win­dows. It’s been tested on Win­dows 98 through Vista. It’s free and released under the GNU/​GPL license. The server is based on Apache, MySQL, and PHP. The biggest dif­fer­ence between MoWeS and many other portable server pack­ages is that you can down­load MoWeS pre­con­fig­ured with a vari­ety of soft­ware options, includ­ing TYPO3, Word­Press, PHP­MyAd­min, OS Com­merce, Dru­pal, Mambo, Joomla!, and others.

Plan­ning and Productivity

Dia Portable

Dia Portable is a dia­gram­ming app sim­i­lar to Microsoft Visio. It’s more focused on infor­mal dia­grams than Visio, though, and is great for casual use. It works with XML files, and also includes the abil­ity to export files to EPS, SVG, PNG, WMF, and XFIG files. Dia also lets you print dia­grams (includ­ing multi-​​page ones).

It’s com­pat­i­ble with Linux, Unix, and Win­dows sys­tems. It can be used to draw UML dia­grams, flow­charts, and other types of diagrams.

Mozilla Sun­bird, Portable Edition

Mozilla Sun­bird, Portable Edi­tion is a Win­dows and Linux com­pat­i­ble cal­en­dar appli­ca­tion. It’s a full-​​featured, stand-​​alone cal­en­dar appli­ca­tion, per­fect for sched­ul­ing and sim­ple project management.

ToDoList

ToDoList is a portable project man­age­ment and task list man­ager. It lets you sub­di­vide tasks an unlim­ited num­ber of times to make them more man­age­able. And it saves your task lists in XML for­mat so that you can for­mat them with stylesheets.

ToDoList is under con­stant devel­op­ment and is suit­able for IT project man­age­ment as well as more gen­eral task man­age­ment (like the GTD method). There are French and Span­ish ver­sions avail­able in addi­tion to English.

Task Coach Portable

Task Coach Portable is another task man­ager that lets you man­age your to-​​do list and tasks on the go. Fea­tures include an easy-​​to-​​use UI that makes it easy to cre­ate, orga­nize, and man­age tasks, as well as the abil­ity to set a bud­get for par­tic­u­lar tasks, set start dates and dead­lines for each task, and more.

Busi­ness

Gnu­Cash Portable

Gnu­Cash Portable is another PortableApps​.com appli­ca­tion. It’s an open source finan­cial man­age­ment app with most of the fea­tures of com­mer­cial finance pro­grams. It works with double-​​entry account­ing, stock/​bond/​mutual fund accounts, and can han­dle invoices and accounts payable and receivable.

Gnu­Cash is per­fect for small busi­ness account­ing and book­keep­ing. It uses a checkbook-​​style reg­is­ter to make it eas­ier for new users to learn. It also han­dles reports and graphs, mul­ti­ple cur­ren­cies, state­ment rec­on­cil­i­a­tion, and more.

OpenOf​fice​.org Portable

OpenOf​fice​.org Portable is the PortableApps​.com ver­sion of the open source OpenOf​fice​.org suite of busi­ness pro­grams. It includes all of the reg­u­lar OpenOf​fice​.org appli­ca­tions: Writer (a word proces­sor), Calc (spread­sheets), Impress (pre­sen­ta­tions), Draw (graph­ics), and Base (database).

OpenOf​fice​.org is a great alter­na­tive to Microsoft Office and pro­vides much of the same func­tion­al­ity in a free and open source pack­age. It’s very easy to use in com­par­i­son with many other office suites, and it’s free.

Abi­Word Portable

Abi­Word Portable is a word proces­sor that can open a vari­ety of files from other word pro­cess­ing pro­grams, includ­ing Microsoft Word, Word Per­fect, Open Doc­u­ment (OpenOf​fice​.org), Office Open XML, RTF, HTML, and more. It includes all the basic func­tions you’d expect in a word proces­sor, includ­ing spelling and gram­mar check and mail merge.

The portable ver­sion is built on the PortableApps​.com plat­form and works on Win­dows 2000, XP, or Vista. There are plu­g­ins avail­able to extend AbiWord’s functionality.

Other Use­ful Apps

Suma­tra PDF

Suma­tra PDF is a light­weight, portable, free PDF viewer for Win­dows. It’s designed to be portable, so there’s no “portable ver­sion” per se. It works with a vari­ety of key­board short­cuts, and can be con­fig­ured as your pri­mary PDF viewer.

Eraser Portable

Eraser Portable is a portable ver­sion of the Eraser secu­rity app. Eraser allows you to com­pletely delete files from your hard­drive by over­writ­ing them mul­ti­ple times with pre­de­fined pat­terns. It’s free and open source (under the GNU Gen­eral Pub­lic License). This is a par­tic­u­larly use­ful app to have if you work with sen­si­tive infor­ma­tion on a reg­u­lar basis, as it can be used to com­pletely remove any traces of an orig­i­nal file.

Oper­a­Tor

Oper­a­Tor com­bines Opera and Tor to let you browse anony­mously from any com­puter. No data is stored on the com­puter you’ve plugged your USB drive or other portable device into, mak­ing it par­tic­u­larly use­ful if you’re using a pub­lic com­puter. It also includes Polipo, a caching web proxy, adding an extra layer of anonymity and security.

Portable Win­dows Live Mes­sen­ger 2009

If you need to keep in touch with your col­leagues or clients, then Portable Win­dows Live Messenger2009 is a great way to do it. It’s a fully func­tional ver­sion of Win­dows Live Mes­sen­ger 2009, just in a portable for­mat you can use from any USB drive. It’s use­ful for a lot more than just instant mes­sag­ing though: you can use it to share doc­u­ments, and com­mu­ni­cate via voice and video.

Foxit Reader v3.0

The Portable Free­ware Col­lec­tion offers Foxit Reader V3.0. Use Foxit to open and read PDF doc­u­ments on the go. Just be aware that accord­ing to the com­ments on the down­load page, it can be dif­fi­cult to install and configure.

KeeP­ass

KeeP­ass is a pass­word man­age­ment pro­gram for Win­dows. It’s free and open source and can help you keep track of all your pass­words for FPT accounts, email, web­site pass­words, and more. It saves every­thing in a sin­gle data­base file that you can open either with a key or key file.

True­Crypt

True­Crupt is a portable encryp­tion pro­gram that will cre­ate a vir­tual encrypted disk and mount it as a real disk. You can encrypt an entire par­ti­tion or USB flash drive. It uses par­al­liza­tion and pipelin­ing to let data be accessed as fast as if the drive wasn’t encrypted. Be aware that True­Crypt does require admin­is­tra­tor priv­i­leges in order to access files, which is a major draw­back if you may need to use pub­lic computers.

Pid­gin Portable 2.1.0

Pid­gin Portable is the portable ver­sion of the Pid­gin instant mes­sag­ing client (for­merly Gaim). It sup­ports AOL, MSN, ICQ, Jab­ber, and Yahoo IM. You can add encryp­tion plu­g­ins to it to enable secure messaging.

WinPT Portable

WinPT Portable lets you encrypt files on your flash drive and then unlock them with­out hav­ing any spe­cial soft­ware installed. It’s still in devel­op­ment, so it’s not entirely bug-​​free, but accord­ing to most reports it’s a very pol­ished build. The only thing it requires to run is GnuPGP, which is also avail­able as a portable app.

Tril­lian Anywhere

Tril­lian Any­where lets you use the Tril­lian IM client from a USB drive or disk. It lets you take your con­tact list and pref­er­ences with you wher­ever you go and use a full-​​featured but portable ver­sion of Tril­lian from any com­puter with an inter­net connection.

Fur­ther Resources

• 100 Portable Apps for Your USB Stick (for Mac and Win)
  This is an excel­lent roundup of use­ful apps from makeuseof​.com, though it’s not spe­cific to devel­op­ment and design apps.
• PortableApps​.com Suite and PortableApps​.com Plat­form
  Many of the apps in this post are built on the PortableApps​.com Plat­form. PortableApps​.com offers a huge vari­ety of pro­grams for use on a USB drive or other portable media. The suite includes a web browser, email client, office suite, calendar/​scheduler, and other use­ful programs.M
• FreeSMUG
  FreeSMUG offers free open source soft­ware for Mac users. Some of their apps include Adium, Cyber­duck, Vienna, and Newspeak.
• Linux for Trav­el­ers
  Linux for Trav­el­ers offers a ton of infor­ma­tion on portable com­put­ing for Linux users.

About the author

Cameron Chap­man is a pro­fes­sional Web and graphic designer with over 6 years of expe­ri­ence. She also writes for a num­ber of blogs, includ­ing her own, Cameron Chap­man On Writ­ing. She’s also the author of Inter­net Famous: A Prac­ti­cal Guide to Becom­ing an Online Celebrity.

© Cameron Chap­man for Smash­ing Mag­a­zine, 2009. |
Perma­link |
7 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 Magazine

Post tags: portable, soft­ware, tools

Posted in Graphic Design | Comments Off

Search Results Design: Best Practices and Design Patterns

If you’ve been assigned to design or pro­vide the archi­tec­ture for a large e-​​commerce project or other information-​​heavy web­site whose suc­cess depends on con­tent find­abil­ity, it is vital that the design and lay­out of the search func­tion­al­ity for that web­site is con­sid­ered carefully.

The search results page is the prime focus of the search expe­ri­ence, and can make or break a site’s con­ver­sion rates. There­fore, bridg­ing the gap between a user and the con­tent or prod­ucts they seek is a cru­cial fac­tor in the suc­cess of any large web­site. The respon­si­bil­ity to design an effec­tive search results page is best con­sid­ered after a thor­ough exam­i­na­tion of some of the fea­tures and func­tions found on search results pages from a num­ber of pop­u­lar niches.

In this arti­cle, we’ll look at a num­ber of trends and prac­tices incor­po­rated on a vari­ety of web­sites. From this exam­i­na­tion, we’ll con­clude with a sum­mary of the best prac­tices learned from the exam­ples those sites have set.

1. Trends In Search Engines

Google’s search result page sets the pat­tern for all the search result pages we’ll be con­sid­er­ing. We’ll list the pri­mary fea­tures of Google’s page, and then we’ll point out some addi­tional unique fea­tures found on other search results pages, includ­ing those found on the other pop­u­lar search engines.

Google

Below are the pri­mary fea­tures of Google’s search results page:

• Search box, with searched words, remains promi­nent at top
• Option to view an “advanced” search page
• Total num­ber of results shown at top
• Ajax-​​driven auto-​​complete for typed follow-​​up searches
• Spon­sored links at top and right
• Pag­i­nated results
• Results titles are large, bold, and hyperlinked
• Searched words are shown in bold in a page snip­pet, in context
• URLs shown in a dif­fer­ent color under each result
• Each result allows options to view “sim­i­lar” and “cached”
• Vis­ited links are in a dif­fer­ent color
• Related search phrases listed at bottom
• Search box with search terms repeated at the bottom
• “Show options” link opens a side­bar for fur­ther fil­ter­ing of the results

In the search engine niche, the other web­sites we’re con­sid­er­ing fol­low very sim­i­lar pat­terns as those set above by Google, with a few vari­a­tions. Here are some unique fea­tures of those search results pages that are not found on Google’s.

Bing

Microsoft’s new search engine Bing lists the user’s “search his­tory” in the side­bar (out­lined in red above), allow­ing the his­tory to be cleared or turned off. The search his­tory remains intact even when the browser is closed and the page is revisited.

Another help­ful fea­ture on Bing is shown below:

The pag­i­na­tion unit at the bot­tom of the results page is more user-​​friendly than Google’s ver­sion. While Google’s ver­sion con­sists of “blocked” table cells, which some­what help the click­a­bil­ity of these units, Bing’s is much cleaner and a clearer dis­tinc­tion is made between pag­i­nated units. Also improv­ing the usabil­ity, Bing’s pag­i­na­tion units have a hover effect, which Google’s doesn’t, mak­ing Google’s con­fus­ing as to which unit is being clicked.

Yahoo’s search results page includes a cou­ple of JavaScript-​​driven enhance­ments that improve on fea­tures of Google’s and Bing’s pages:

Yahoo

The search results page on Yahoo dis­plays an Ajax-​​driven slide-​​down unit that appears below the search box when a search query is being typed. This is sim­i­lar to the Ajax drop-​​down fea­tured on Google and Bing, but with a few extra enhancements.

Also, Yahoo offers two fea­tures still in Beta: “Search Pad”, which allows the user to record notes on searches; and “Search­Scan” to help pro­tect from harm­ful websites:

Google, Microsoft, and Yahoo have the expe­ri­ence and indus­try exper­tise to enable them to design an effec­tive search results page. The pat­terns and trends they have set are wor­thy of con­sid­er­a­tion when design­ing your own search results page. Even if many of their fea­tures are out of your project’s bud­get and scope, the prin­ci­ples behind those fea­tures can be con­sid­ered and incor­po­rated in prac­ti­cal ways.

2. Search Results In Video Shar­ing Sites

Search results pages on video-​​sharing web­sites have set impor­tant pat­terns worth not­ing. The search results page on top video-​​sharing sites con­tain many of the fea­tures that we’ve already men­tioned under the “Search Engines” sec­tion, plus some addi­tional fea­tures shown below.

YouTube

YouTube has easily-​​accessible fil­ter­ing options near the top of the search results page, shown above. Addi­tion­ally, each item on a YouTube search result page lists detailed infor­ma­tion, includ­ing a thumb­nail pre­view, run­ning time of the clip, user rat­ing, and age of the item:

Also, if a par­tic­u­lar item is part of a series, this is indicated:

Meta­cafe

Meta­cafe (above) includes many of the fea­tures that YouTube offers, plus an XML feed for a par­tic­u­lar set of results, an option to enable or dis­able a “fam­ily fil­ter”, and a “more” link that takes the user to a search for related content.

Veoh

Veoh’s search result page (above) dis­plays the items in grid for­mat, which dif­fers from the one-​​item-​​per-​​row or “list” for­mat of the search results pages we’ve con­sid­ered so far. Veoh also includes a but­ton to “add to inter­ests”, as well as a “Related Searches” box at the top of the results (although those related items were never very prac­ti­cal in the searches I conducted):

Break

Break.com’s search results page (above) includes a “Top 10 Searches” box on the right side of the page, allow­ing the user to view what oth­ers have been search­ing for.

3. Search Results in Social News & Mini-​​Blogging

Many sites that offer user-​​driven news, mini-​​blogging, and book­mark­ing offer search results pages with unique fea­tures. Here are a few examples:

Twit­ter

Twit­ter (above) offers a very clean, intu­itive JavaScript-​​driven inter­face that includes “Real­time” results. Their page also offers a list of “Trend­ing top­ics” and a “Search tip” box:

Addi­tion­ally, Twit­ter gives the user the option to refresh the page after it detects addi­tional results in real time, shown in the yel­low box below:

Digg

Each result on the Digg search results page (above) includes the num­ber of com­ments that have been posted for that par­tic­u­lar story, in addi­tion to other fea­tures that are unique to Digg, includ­ing “share” and “bury”.

Deli­cious

Deli­cious lists search results in a very sim­ple, list for­mat that includes tags asso­ci­ated with each result, plus the num­ber of times the result has been bookmarked.

4. Search in Mer­chan­dise & E-​​Commerce

An effec­tive and user-​​friendly search results page is cru­cial to the suc­cess of an e-​​commerce web­site, since that is the means by which most users will attempt to find con­tent. Let’s look at some unique fea­tures on search results pages from pop­u­lar e-​​commerce sites.

Ama­zon

Amazon’s search results page (above) allows for the results to be sorted based on a vari­ety of meth­ods, includ­ing “Best­selling” and “Avg. Cus­tomer Review”. This is done by means of a <select> box that adds or removes sort­ing options based on the depart­ment the user is cur­rently viewing.

When dis­play­ing results for books, Amazon’s results page indi­cates if a book has the “Look Inside” fea­ture. There is also a brief excerpt from each book, plus links to view other edi­tions of the same item:

eBay

eBay’s search results page (above) allows for easy fil­ter­ing via tabs at the top. eBay also pro­vides a unique fea­ture at the bot­tom of the page: the option to view the thumb­nail pre­view images in a dif­fer­ent size:

Other fea­tures unique to eBay’s search results page are the options to change the amount of items dis­played per page and the abil­ity to go directly to a spe­cific page by enter­ing a num­ber into a text box:

Wal­mart

Walmart’s search results page clearly dis­tin­guishes between prod­ucts avail­able in-​​store and those only avail­able online, allow­ing the user to fil­ter items through a tabbed interface.

There is also an option to tog­gle the search results view between “grid” and “list”:

The bot­tom of Walmart’s search results page includes links to items that were pur­chased after other shop­pers con­ducted the same search. There is also a feed­back option offered, indi­cat­ing that Wal­mart is con­duct­ing ongo­ing analy­ses of user inter­ac­tion with their search features:

In addi­tion to the fea­tures on the e-​​commerce search pages dis­cussed in the pre­vi­ous sec­tion, below are some exam­ples of prac­ti­cal fea­tures found on a few less-​​popular e-​​commerce sites.

Coast

Coast’s search results page (above) includes a “new” indi­ca­tor to inform the user which items have been added recently.

Shoon

Shoon lists prod­ucts on their search results page in grid for­mat, and allows the option to view the same results in list for­mat or “win­dow” for­mat. “Win­dow” for­mat puts all items into a JavaScript-​​driven scrolling window-​​like ele­ment. Shoon also lists alter­na­tive color options for the indi­vid­ual prod­ucts. Click­ing a new color option changes the prod­uct photo dynam­i­cally via JavaScript.

Eddie Bauer

Eddie Bauer opens details for an item inside of a JavaScript light box. Inside the light box win­dow the user is able to take advan­tage of a num­ber of prac­ti­cal func­tions includ­ing prod­uct zoom­ing, size selec­tion, related prod­uct dis­play, and shop­ping cart options.

5. Search Results on Photo Shar­ing Sites

Photo shar­ing sites offer a few help­ful fea­tures on their search results pages. Below are some examples.

Flickr

Flickr (above) dis­plays results by default in a sim­ple grid-​​based for­mat, and they include some of the fil­ter­ing options we’ve already dis­cussed. Flickr also allows the images to be dis­played either in a detail-​​heavy list-​​style view or inside of a Flash-​​based slideshow gallery.

Pho­to­Bucket

Pho­to­bucket (above) allows fil­ter­ing of search results by “Most viewed” and “Most com­mented”. It also includes a link strangely titled “Fol­low”, which allows the user to enter their email address to receive noti­fi­ca­tions when the results for a par­tic­u­lar search term are updated. A more appro­pri­ate title for this fea­ture would be “Sub­scribe”, or similar.

6. Search Results on Technology-​​Related Sites

Nat­u­rally, tech­nol­ogy and web-​​related sites should have strong usabil­ity and func­tion­al­ity on their search results pages. These types of sites can incor­po­rate more com­plex func­tion­al­ity due to their tech-​​savvy read­er­ship, how­ever, care should be taken to make sure any com­plex fea­tures are prac­ti­cal and do not hin­der the user experience.

Adobe

Adobe’s search page (above) includes the size in kilo­bytes of the indi­vid­ual pages that appear in the results, as well as the run­ning time of a video that appears on the results page.

Apple

The Apple search results page (above) includes pro­mo­tional boxes dis­play­ing fea­tured items related to the search terms entered by the user. Then, under the pro­mo­tional boxes, list-​​style results are dis­played under dif­fer­ent head­ings (”Prod­ucts”, “Down­loads”, etc) so that results are asso­ci­ated with rel­e­vant sec­tions of the website:

CNET

CNET (above) allows users by means of check­boxes to select mul­ti­ple items on a search results page for a side-​​by-​​side comparison.

Site­Point

SitePoint’s search page includes a sim­ple, but prac­ti­cal tip to help refine results. Also, the tip itself links to a popup win­dow that lists fur­ther search tips.

7. Search Results in News Websites

Main­stream news web­sites rely heav­ily on search, and so they incor­po­rate many of the prac­ti­cal func­tions we’ve already dis­cussed. Below are a few more fea­tures from well-​​known sites worth noting.

FOX News

FOXNews (above) includes video results in their search results page, with an indi­ca­tor show­ing at what time in the video the entered search terms appear. The results also offer a brief quote from the video, with search terms under­lined in context.

The Guardian

Guardian​.co​.uk (above) dis­plays to the right of search results a side­bar that allows items to be refined by “Date”, “Sec­tion”, “Pub­li­ca­tion”, and more. The side­bar also indi­cates by means of num­bers in paren­the­ses how many pages appear under each refined head­ing. Also, as shown above, the search results are dis­played under sec­tion head­ings, and the search term (in this case “Google”) is high­lighted in con­text in the text snip­pet that appears for each result.

New York Times

NYTimes​.com (above), in addi­tion to some com­mon fil­ter­ing options, includes the author name and/​or sec­tion in which each search result appears.

The Wall Street Journal

The Wall Street Journal’s search results page (above) includes a “save this” link next to each search result. This option allows users to orga­nize, per­son­al­ize, and share saved content.

Sum­mary of Best Practices

For easy ref­er­ence, here is a list of some of the best prac­tices that have been gleaned from the dif­fer­ent search results pages con­sid­ered in this article:

• User should have easy access to the search box for follow-​​up searches
• Where pos­si­ble, search terms should be clearly indi­cated at the top, and in con­text in the results
• Related spon­sored links can be included below the search box, near the bot­tom, or on the right
• Titles should be click­able and clearly dif­fer­en­ti­ated from details
• Vis­ited links should be indicated
• Pag­i­na­tion units should be vis­i­bly block-​​shaped and have a hover effect, to eas­ily dif­fer­en­ti­ate from one another
• Related prod­ucts, tags, or key­words should be dis­played in a non-​​obtrusive section
• E-​​Commerce sites should allow the “view” to be tog­gled between “list” and “grid”
• Advanced search options should be eas­ily accessible
• Should allow re-​​sorting or fil­ter­ing of results
• Where pos­si­ble, results pages should have RSS feeds or “sub­scribe” options
• For com­plex inter­faces, clear, easy-​​to-​​access search tips or instruc­tions should be provided
• Sort­ing and Fil­ters should be JavaScript or Ajax-​​driven, where possible
• Pop­u­lar­ity or star-​​ratings should be shown for indi­vid­ual results
• Include an option to increase the num­ber of results per page
• To mon­i­tor future improve­ments, request feed­back from users after searches are conducted
• If results span dif­fer­ent sec­tions of the web­site, indi­cate this by sub-​​headings or other dividers

Con­clu­sion

This arti­cle has looked at a wide vari­ety of fea­tures, options, and func­tions found on search results pages in a num­ber of indus­tries and niches. It is not pos­si­ble, and nei­ther is it prac­ti­cal, to include all these func­tions in your own search pages.

After con­sid­er­ing tar­get audi­ence, bud­get, and tech­ni­cal lim­i­ta­tions, some of these fea­tures and their under­ly­ing prin­ci­ples can thus be incor­po­rated with a view towards improv­ing the user expe­ri­ence in the area of search.

Fur­ther Reading

• Search Results – Inter­ac­tion Design Pat­tern Library
• Search Behav­ior Patterns
• Best Prac­tices for Design­ing Faceted Search Filters

About the Author

Louis Lazaris is a writer and free­lance Web Devel­oper based in Toronto, Canada. He has 9 years of expe­ri­ence in the Web devel­op­ment indus­try and posts web design arti­cles and tuto­ri­als on his blog, Impres­sive Webs.

© Louis Lazaris for Smash­ing Mag­a­zine, 2009. |
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 Magazine

Post tags: search

Posted in Graphic Design | Comments Off

Showcase of Designs Optimized for iPhone

Over the last cou­ple of years, mobile devices have man­aged to gain main­stream pop­u­lar­ity. With iPhone, mak­ing mobile Web appli­ca­tions finally usable by broad masses, web design can now be applied to mobile appli­ca­tions as well. In this post we are focus­ing on designs that are specif­i­cally opti­mized for mobile devices, in par­tic­u­lar iPhone.

Though iPhone’s Safari browser is able to ren­der any web­site just like you would see it on a desk­top browser, the avail­able screen area is much smaller than in com­mon “clas­sic” dis­plays. This poses a new chal­lenge for design­ers and devel­op­ers who now can reach mil­lions of users that use mobile Web. Web­sites that are specif­i­cally opti­mized for the iPhone uti­lize the screen to the fullest extent, and use less band­width (which is nec­es­sary, because the con­nec­tiv­ity is not always optimal).

The iPhone brows­ing expe­ri­ence is quite dif­fer­ent than the reg­u­lar brows­ing expe­ri­ence. The but­tons and hyper­links have to be big­ger because our fin­gers are not as sharp as the mouse pointer. Opti­miz­ing a web­site for iPhone is not rocket sci­ence. It’s the same HTML, CSS and JavaScript that you already know. The only major dif­fer­ence is the screen size.

In the show­case below we present some of the inter­est­ing, inter­ac­tive and beau­ti­ful designs that are opti­mized for the iPhone. You will also learn about some handy tools that will help you opti­mize your web­site for the iPhone.

Also con­sider our pre­vi­ous articles:

• How to Cre­ate Your First iPhone Application
• iPhone Apps Design Mis­takes: Over-​​Blown Visuals
• 100 (Really) Beau­ti­ful iPhone Wallpapers

1. News /​ Enter­tain­ment

Sevnth Sin
The unique nav­i­ga­tion makes this site very inter­ac­tive. Nice con­cept, nice colors.

Blip​.tv
Per­fectly suits the theme: video enter­tain­ment! Clean and clear typography.

NBC
The YouTube-​​style design makes it very easy to nav­i­gate and find shows.

Zinio
That’s a kit of mag­a­zines, all one-​​touch away!

Spin The Bot­tle
A sim­ple bot­tle spin­ning game. Good use of graphics.

Daily Wall­pa­per
Sim­i­lar to Zinio, but 2 thumb­nails in a row make it more easy to nav­i­gate around.

AOL Horo­scopes
Very well designed for a horo­scope site. Match­ing color scheme throughout.

Yahoo Omg!
Fresh look, vibrant col­ors and lively typog­ra­phy make this design fun to browse and easy to read. The design also matches the celebrity gos­sip theme.

2. Busi­ness /​ Cor­po­rate

DPTO
Dif­fer­ent tones of red make this design look very attrac­tive on the iPhone. The 3D menu looks very nice — per­fect for a mar­ket­ing and design agency.

Mind Medium Cre­ative
The use of gra­di­ents make the over­all site look very shiny on the iPhone. The menu is very to-​​the-​​point. A nice com­po­si­tion and execution.

Red­hawk Invest­ment Advi­sors
This design has a very cor­po­rate feel to it. Good use of colors.

Nike Lab
Just what to expect from Nike. Sporty and ener­getic design.

Pro­cab Stu­dio
Pro­cab stu­dio show­cases their work port­fo­lio and other infor­ma­tion about the agency. Well placed con­tent. The font size is a bit too small, though.

Hotel Mon­ter­illa
The design makes you want to go there for a vaca­tion. The design has a very com­fort­ing feel to it. A per­fect color scheme.

Viget Labs
A blue back­ground, appro­pri­ate padding and rounded cor­ners make this sim­ple design look vibrant and attractive.

Batali Asso­ciates
This is one of the good exam­ples of design opti­miza­tion for the iPhone. It clearly looks like it was really made for the iPhone, not just duplicated.

Ready For iPhone
A com­pany that pro­vides iPhone opti­mized web­site solu­tions. The fin­ger on the “Go” looks intuitive.

Ele­ment Fusion
Another show­case web­site that pro­vides design ser­vices. Looks like a cut-​​down ver­sion of the actual website.

Volk­swagon
A show­case gallery for Volk­swagon. Easy to nav­i­gate around. Clean and clear content.

3. Shop­ping /​ E-​​Commerce

Torn Robes
A nice exam­ple of a mobile e-​​Commerce site. Just touch your favourite design, have a look at it and buy it. Looks very vibrant.

Coosh
A single-​​product e-​​Commerce site. Branded very well.

Wal­mart
This design doesn’t really meet the expec­ta­tions from Wal­Mart — how­ever, the design is still in beta. The usabil­ity is good, though: it is very easy to search for prod­ucts and stores. You can also cre­ate shop­ping lists.

4. Port­fo­lio /​ Blog

World End­ing Blog (Japan­ese)
Although we did not under­stand a word there, it is very well designed for the iPhone. Every page is opti­mized and pro­vides a good brows­ing experience.

Sig­nal Ele­ment
Sim­ple and clean design: just 3 pages, but very well designed.

One Crim­son Splash
This is the port­fo­lio of James Fin­ley. The choice of col­ors and con­tent place­ment are very good.

5. Edu­ca­tion /​ Con­tent

MIT
What else to expect from MIT? Sim­ple, clean, user-​​friendly.

101 Cook Books
Not really a fancy design, but it’s the sim­plic­ity and clar­ity of con­tent that makes it appear in this showcase.

Please Fix The iPhone
A good design that pro­vides the desk­top brows­ing expe­ri­ence. It is very easy to find what you are look­ing for.

1881
The Nor­we­gian tele­phone direc­tory online. The com­bi­na­tion of bright blue, orange and white looks really good.

AOL Food
Heaven for those who love to cook. Just keep your iPhone with you in the kitchen, and let this nice design help you make a deli­cious dinner.

Deviant Art
A nice way to browse art on the iPhone. The color scheme is good, and it makes the art­work look promi­nent. Very easy to nav­i­gate and search. Also, appro­pri­ately sized thumbnails.

Last but not least, some words of wisdom…

Tools to design a web­site for iPhone

There are some libraries and kits avail­able to help you iPhoneize your design.

• iPhoney
  iPhoney gives you a pixel-​​accurate web brows­ing environment—powered by Safari—that you can use when devel­op­ing web sites for iPhone. It’s a per­fect tool to see how your web cre­ations will look on iPhone.
• Test iPhone
  A web browser based sim­u­la­tor for quickly test­ing your iPhone web designs.
• iWe­bKit (Demo)
  iWe­bKit is a file pack­age designed to help you cre­ate your own iPhone and iPod Touch com­pat­i­ble web­site or webapp. Comes with var­i­ous ready-​​to-​​use themes.
• iUI
  iUI is a frame­work con­sist­ing of a JavaScript library, CSS, and images for devel­op­ing iPhone web designs. It makes your web designs look and feel like iPhone’s native applications.
• Inter­squash (Demo)
  Not really a help­ful tool for design­ing, but you can instantly cre­ate an iPhone com­pat­i­ble site from your RSS feed url.
• WPtouch
  For Word­Press users: WPtouch trans­forms your Word­Press blog into an iPhone application-​​style theme, com­plete with ajax load­ing arti­cles and effects, when viewed from an iPhone or iPod touch.
• Jaipho Gallery (Demo)
  If your web­site fea­tures a photo gallery, Jaipho will opti­mize it for iPhone users.

Fur­ther Resources

Don’t stop here. Check out these other great tuto­ri­als and guide­lines.

• iPhone Ref­er­ence Library
  Apple’s offi­cial iPhone ref­er­ence library for devel­op­ers. It has every­thing you need to get started: guide­lines, code-​​examples, tuto­ri­als, etc.
• How to build a web­site for iPhone
  This step-​​by-​​step tuto­r­ial includes every­thing you need to do when build­ing a web­site for iPhone. Instruc­tions for ori­en­ta­tion direc­tion also included.
• iPhone Com­pat­i­ble CSS lay­outs
  Free web­site lay­outs which work in all the com­mon web browsers includ­ing Safari on the iPhone and iPod touch.
• iPhone Inter­face Sam­ples
  This includes sam­ples for iPhone inter­face ele­ments like but­tons, fonts, text, design pat­terns, hacks 6 more.
• iPhoneWeb­Dev Exam­ples
  Very help­ful exam­ples for alot of things. Direc­tion change, events, fonts, com­pres­sion, etc.
• iPhone Appli­ca­tion UI Design Patterns

About the author

Adeel Raza is a young entre­pre­neur with over 10 years of expe­ri­ence on the web. He spe­cial­izes in user inter­face, user expe­ri­ence and beau­ti­ful design. He loves find­ing gems out of dirt and show­cas­ing them on his gallery Inspire Mix. Fol­low him on Twit­ter to say hi!

© Adeel Raza for Smash­ing Mag­a­zine, 2009. |
Perma­link |
5 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 Magazine

Post tags: inspi­ra­tion, iphone

Posted in Graphic Design | Comments Off

Ultimate Round-​​Up Of Beautiful iPhone Wallpapers

We all love wall­pa­pers as they always come in handy and you will always find a wall­pa­per to express your feel­ing or mood. But what about iPhone wall­pa­pers. I know some of my friends who keep chang­ing their iPhone back­ground almost on a daily basis. Unless like me, who rarely change their iPhone wall­pa­per. So, How about you? When was the last time you changed iPhone background?

In this post we present an amaz­ing col­lec­tion of iPhone wall­pa­pers related to nature, pho­tog­ra­phy, pat­terns, illus­tra­tions, HDR as well as some abstract and fantasy-​​related con­cepts. Hope­fully, every­body will find some­thing inter­est­ing to spice up their iPhone. All wall­pa­pers can be down­loaded for free from their orig­i­nal source.

You may be inter­ested in the fol­low­ing wall­pa­per and images related arti­cles as well.

• 99 Amaz­ing Widescreen Wall­pa­pers To Spice Up Your Desktop
• 115 Amaz­ing Dual Screen Wall­pa­pers To Spice Up Your Desktop
• 121 Amaz­ing Triple Mon­i­tor Wall­pa­pers To Spice Up Your Desktop
• Enjoy Moments Of Reflec­tive Pho­tog­ra­phy — Part I, Part II
• Rain­bow Col­ors Inspired Pho­tos and Pic­tures — Part I, Part II
• Strange and Fan­tas­tic Build­ings Archi­tec­ture — Part I, Part II

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 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 Design, Graphic Design, Web Design | Comments Off

Beautiful Examples of Kinetic Photography

When you hear the word ‘kinetic‘ for the first time, prob­a­bly the first thing that comes to your mind is motion. Kinetic Pho­tog­ra­phy, also well known as ‘cam­era toss­ing‘, is a tech­nique of shoot­ing pho­tos with the actual phys­i­cal move­ment of the cam­era. How­ever, it does not nec­es­sar­ily involve toss­ing of cam­era — you can also shake, bounce, swing or spin it, or move it in any other way you want to; the goal of the tech­nique is to obtain unpre­dictable results which are some­times fas­ci­nat­ing, always abstract and rarely boring.

The main rule of kinetic pho­tog­ra­phy is sim­ple: not to hold your cam­era sta­tion­ary! Obvi­ously, it is a quite uncom­mon and bizarre tech­nique of pho­tograph­ing and involves risk of dam­ag­ing your cam­era. The con­cept is extremely sim­ple and really fun to use. Though the out­come is uncer­tain, kinetic pho­tog­ra­phy some­times pro­duces beau­ti­ful abstract, ran­dom and motion blurred images. The results often look like a com­puter gen­er­ated graphics.

Below we present beau­ti­ful exam­ples of kinetic pho­tog­ra­phy for your inspi­ra­tion. All images are linked to photographer’s web­page. You can explore fur­ther works of the pho­tog­ra­phers we’ve fea­tured below. And feel free to add links to some beau­ti­ful works in the com­ments to this post!

Beau­ti­ful Exam­ples of Kinetic Photography

mtnrock­dhh

Matt Gorecki

thinking-​​fish

El Ray

mtnrock­dhh

Dave Gor­man

LeTiger

El Ray

mtnrock­dhh

mtnrock­dhh

hook­strapped

Tomas i Småland

Abizeleth

? ?l?

Right Brain

capcbd

mtnrock­dhh

pan_​tomi

QuakkauQ | Jens Ludwig

click­ykbd

quinet

Matt Gorecki

QuakkauQ | Jens Ludwig

mtnrock­dhh

Right Brain

El Ray

Gal­va­tori

El Ray

baliomega­tron

Jay Ver­sluis

eflon

mtnrock­dhh

El Ray

east­ofnorth

click­ykbd

El Ray

El Ray

xisbe

gspence21

rachie lea

teng­tan

mtnrock­dhh

Click­ykbd

El Ray

mtnrock­dhh

Fur­ther Resources

• Cam­era Toss Flickr Group
• Cam­era Toss – The Blog
  A show­case photo-​​blog for the “best of” cam­era toss­ing and gen­eral mus­ings on this form of kinetic pho­tog­ra­phy. Cre­ated and main­tained by Ryan Gallagher.
• Cam­era Toss Col­lec­tion on Flickr

About the author

Vailan­cio Rodrigues is a col­lege stu­dent, web­mas­ter and web­de­signer who likes to learn new things and share them with oth­ers. He likes to work in the cre­ative field and is con­stantly improv­ing his skills. His field of inter­est are Web Tech­nolo­gies, Pho­tog­ra­phy, Motion Graph­ics, Art and Tech­nol­ogy. You can fol­low Vailan­cio on Twit­ter.

© vail­ro­drigues for Smash­ing Mag­a­zine, 2009. |
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 Magazine

Post tags: inspi­ra­tion, pho­tog­ra­phy

Posted in Graphic Design | Comments Off

SVN Server Admin Issue: Fix It!

A few months ago, Anton Isaykin in col­lab­o­ra­tion with the com­pany 2comrades dis­cov­ered a seri­ous secu­rity prob­lem that is quite typ­i­cal of big projects (we do not name names here). To test it, they obtained the file struc­tures and even the source code of about 3320 Russ­ian web­sites and some major English-​​language web­sites. Seri­ous prob­lems like this aren’t sup­posed to exist nowa­days. Every seri­ous or vis­i­ble exploit is found and fixed quickly. But here we will show you some­thing sim­ple and ordi­nary yet quite dangerous.

What Is It?

Almost every devel­oper has used or is using a ver­sion con­trol sys­tem such as SVN. SVN is an advanced tool for man­ag­ing source code and is used by teams con­sist­ing of any­where from two to hun­dreds of devel­op­ers. In its archi­tec­ture, SVN stores some meta data in a hid­den sub-​​directory (called .svn) of every direc­tory. One of the files in there, named entries, is a list of all of the files and direc­to­ries con­tained in the folder where .svn is located.

It also has a link to the repos­i­tory itself, devel­oper log-​​ins, file sizes and dates. That’s a prob­lem right there, isn’t it? So, if a project was devel­oped using SVN, we could go to draft​copy​.ru/​.​s​v​n​/​e​n​tries and see the project’s root file struc­ture, with all of this information.

And we could go even fur­ther. In the same .svn direc­tory are some text-​​base direc­to­ries con­tain­ing the lat­est ver­sions of all project files. More­over, these files carry the non-​​standard exten­sion .svn-​​base (for exam­ple, index.php.svn-base). So, the files are not run in PHP, Ruby, Python or Perl but are dis­played outright!

http://​draft​copy​.ru/​.​s​v​n​/​t​e​x​t​-​b​a​s​e​/​i​n​d​e​x​.​p​h​p​.​s​v​n​-base

We should note that not all web­sites use SVN this way. We were not able to get the source code in every case.

When we real­ized that this prob­lem has per­sisted for almost nine years, we decided to cre­ate a crawler to check web­sites with Russ­ian top-​​level domains and major .com web­sites to col­lect some sta­tis­tics. But before we report this, let’s go over how to pre­vent such a thing from hap­pen­ing to your own project.

How To Defend Yourself

You can solve the prob­lem in dif­fer­ent ways. The sim­plest solu­tion is to deny access to SVN meta data direc­to­ries from port 80 using a Web server configuration.

Solu­tion for nginx

location ~ /.svn/ {
    deny all;
}

nginx has no global loca­tion sup­port, so we have to apply this solu­tion to every server sec­tion. For the solu­tion to stick, you have to apply it before any other loca­tions with reg­u­lar expres­sions. In most cases, you can use the first location.

Solu­tion for Apache

<Directory ~ ".*\.svn">
    Order allow,deny
    Deny from all
    Satisfy All
</Directory>

Apache is sim­pler. Just add the lines above to httpd.conf, which will secure all of your projects.

Solu­tion Using SVN

The cure for the prob­lem is to use the Web server. Every doc­tor will tell you that pre­ven­tion is eas­ier and cheaper than treat­ment. The best solu­tion, then, is to not let .svn in your Web root. To do this, use svn export. It’s a com­mon good developer’s prac­tice, but appar­ently in many cases some devel­op­ers do not fol­low it.

Let The Robot Do The Work

As we said, we decided to check the Russian-​​language Inter­net for this prob­lem. We estab­lished proxy servers, devel­oped a crawler and got a list of .ru domains.

The first crawler ver­sion ran for two weeks, get­ting web­sites one by one in a thread. When it was fin­ished, we found about 3000 web­sites affected and had about 100 GB of source code. The prob­lem was that the crawler down­loaded every resource, even if the HTTP response code was 500 and not 200, includ­ing images and JavaScript. Also some servers responded with a 200 code even when files were not actu­ally there.

The sec­ond ver­sion was faster. It was multi-​​threaded and launched from two servers. Also it could work with HTTP response codes and check meta data syn­tax. This time, the entire .ru zone was cov­ered in four days. Next, we wanted to check .com, but that would have taken about two years with our resources (there are more than 700,000,000 .com domains, com­pared to only 2,000,000 .ru domains).

So, we part­nered with a good C devel­oper, Andrey Saterenko, who imple­mented a really fast dae­mon that could do the job 200% faster. Unfor­tu­nately, the sum­mer ended and we had jobs to do. We decided not to check the entire .com domain. So, we picked the top web­sites based on Alexa sta­tis­tics and threw in some famous web­sites that we really like.

We had to alert the devel­op­ers involved in all of these affected projects before we pub­lished this arti­cle. We first sent let­ters to the major Russ­ian ser­vices, such as Yan­dex, Ram​bler​.ru, Mail​.ru, Opera​.com, Rbk​.ru, 003​.ru, Bolero​.ru and habra​habr​.ru. Then the remain­ing 3000+ Russ­ian web­sites received their let­ters. After that, we sent emails to the top .com websites.

Some Num­bers

• Domains checked: 2,253,388.
• Projects affected: 3332.

We have no detailed sta­tis­tics on how many projects have been fixed since our report. Per­haps we’ll pub­lish that infor­ma­tion in two weeks. We received replies from six major Russ­ian projects. One .com project sent us thanks. We got an email from Wiki­me­dia, and Ras­mus Ler­dorf of PHP​.net emailed us (imme­di­ately!). Both projects are open source, so their source code couldn’t be “stolen,” but we emailed them just in case. Ten projects ignored our emails, and four fixed the prob­lem with­out replying.

Fun fact: approx­i­mately 10 web­sites with “hack” or “secure” in their domain name are actu­ally not secure.

Cre­den­tials

All of the source code was printed and then burned. Don’t ask us to sell it or pub­lish it. We don’t have it any­more. Please check if your favorite web­site is affected. If it is, write a let­ter to its sup­port team, with a link to this arti­cle. If this arti­cle has helped you find and fix the prob­lem, please send an email to sam [at] rmcre­ative [dot] ru. We’ll be glad to read it.

About the authors

The orig­i­nal Russ­ian arti­cle was writ­ten by Anton Isaykin in col­lab­o­ra­tion with the com­pany 2comrades that spe­cial­izes in Web project ana­lyt­ics, devel­op­ment and support.

Anton Isaykin is pro­fes­sional PHP/​Python devel­oper in Rus­sia who spe­cial­izes in high-​​load projects and archi­tec­ture. Trans­lated and adapted by Alexan­der Makarov, pro­fes­sional Russ­ian Web devel­oper, who is behind RMCre­ative, a Russ­ian blog ded­i­cated to Web devel­op­ers, design­ers and every­one inter­ested in how the Web is built.

(al)

© Alexan­der Makarov for Smash­ing Mag­a­zine, 2009. |
Perma­link |
21 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 Magazine

Post tags: secu­rity, svn

Posted in Graphic Design | Comments Off

10 Useful Usability Findings and Guidelines

Every­one would agree that usabil­ity is an impor­tant aspect of Web design. Whether you’re work­ing on a port­fo­lio web­site, online store or Web app, mak­ing your pages easy and enjoy­able for your vis­i­tors to use is key. Many stud­ies have been done over the years on var­i­ous aspects of Web and inter­face design, and the find­ings are valu­able in help­ing us improve our work. Here are 10 use­ful usabil­ity find­ings and guide­lines that may help you improve the user expe­ri­ence on your websites.

Form Labels Work Best Above The Field

A study by UX Mat­ters found that the ideal posi­tion for labels in forms is above the fields. On many forms, labels are put to the left of the fields, cre­at­ing a two-​​column lay­out; while this looks good, it’s not the eas­i­est lay­out to use. Why is that? Because forms are gen­er­ally ver­ti­cally ori­ented; i.e. users fill the form from top to bot­tom. Users scan the form down­wards as they go along. And fol­low­ing the label to the field below is eas­ier than find­ing the field to the right of the label.

Tum­blr fea­tures a sim­ple and ele­gant sign-​​up form that adheres to UX Matter’s recommendation.

Posi­tion­ing labels on the left also poses another prob­lem: do you left-​​align or right-​​align the labels? Left-​​aligning makes the form scannable but dis­con­nects the labels from the fields, mak­ing it dif­fi­cult to see which label applies to which field. Right-​​aligning does the reverses: it makes for a good-​​looking but less scannable form. Labels above fields work best in most cir­cum­stances. The study also found that labels should not be bold, although this rec­om­men­da­tion is not conclusive.

Users Focus On Faces

Peo­ple instinc­tively notice other peo­ple right away when they come into view. On Web pages, we tend to focus on people’s faces and eyes, which gives mar­keters a good tech­nique for attract­ing atten­tion. But our attrac­tion to people’s faces and eyes is only the begin­ning; it turns out we actu­ally glance in the direc­tion the per­son in the image is look­ing in.

Eye-​​tracking heat map of a baby look­ing directly at us, from the Usable­World study.

And now the baby is look­ing at the con­tent. Notice the increase in peo­ple look­ing at the head­line and text.

Here’s an eye-​​tracking study that demon­strates this. We’re instinc­tively drawn to faces, but if that face is look­ing some­where other than at us, we’ll also look in that direc­tion. Take advan­tage of this phe­nom­e­non by draw­ing your users’ atten­tion to the most impor­tant parts of your page or ad.

Qual­ity Of Design Is An Indi­ca­tor Of Credibility

Var­i­ous stud­ies have been con­ducted to find out just what influ­ences people’s per­cep­tion of a website’s credibility:

• Stanford-​​Makovsy Web Cred­i­bil­ity Study 2002: Inves­ti­gat­ing What Makes Web Sites Cred­i­ble Today
• What Makes A Web Site Cred­i­ble? A Report on a Large Quan­ti­ta­tive Study
• The Ele­ments of Com­puter Credibility
• Ele­ments that Affect Web Cred­i­bil­ity: Early Results from a Self-​​Report Study (Pro­ceed­ings of ACM CHI 2000 Con­fer­ence on Human Fac­tors in Com­put­ing Sys­tems, v.2, New York: ACM Press)

We don’t know if Fever app is any good, but the sleek user inter­face and web­site make a great first impression.

One inter­est­ing find­ing of these stud­ies is that users really do judge a book by its cover… or rather, a web­site by its design. Ele­ments such as lay­out, con­sis­tency, typog­ra­phy, color and style all affect how users per­ceive your web­site and what kind of image you project. Your web­site should project not only a good image but also the right one for your audience.

Other fac­tors that influ­ence cred­i­bil­ity are: the qual­ity of the website’s con­tent, amount of errors, rate of updates, ease of use and trust­wor­thi­ness of authors.

Most Users Do Not Scroll

Jakob Nielsen’s study on how much users scroll (in Pri­or­i­tiz­ing Web Usabil­ity) revealed that only 23% of vis­i­tors scroll on their first visit to a web­site. This means that 77% of vis­i­tors won’t scroll; they’ll just view the con­tent above the fold (i.e. the area of the page that is vis­i­ble on the screen with­out scrolling down). What’s more, the per­cent­age of users who scroll decreases with sub­se­quent vis­its, with only 16% scrolling on their sec­ond visit. This data high­lights just how impor­tant it is to place your key con­tent above the fold, espe­cially on land­ing pages.

This doesn’t mean you should cram every­thing above the fold, just that you should make the best use of that area. Crowd­ing it with con­tent will just make the con­tent inac­ces­si­ble; when the user sees too much infor­ma­tion, they don’t know where to begin look­ing. Choose the con­tent that you put above the fold very care­fully so that it deliv­ers the most impor­tant things with­out over­whelm­ing the user.

Base­camp makes great use of space. Above the fold (768 pix­els high), it shows a large screen­shot, tagline, value propo­si­tion, call to action, client list, videos and short fea­ture list with images.

This is most impor­tant for the home page, where most new vis­i­tors will land. So pro­vide the core essen­tials there:

1. Name of the website,
2. Value propo­si­tion of the web­site (i.e. what ben­e­fit users will get from using it),
3. Nav­i­ga­tion for the main sec­tions of the web­site that are rel­e­vant to the user.

Blue Is The Best Color For Links

While giv­ing your web­site a unique design is great, when it comes to usabil­ity, doing what every­one else is doing is best. Fol­low con­ven­tions, because when peo­ple visit a new web­site, the first place they look for things are in the places where they found them on most other web­sites; they tap into their expe­ri­ence to make sense of this new con­tent. This is known as usage pat­terns. Peo­ple expect cer­tain things to be the same, such as link col­ors, the loca­tion of the website’s logo, the behav­ior of tabbed nav­i­ga­tion and so on.

Google keeps all links on its web­sites blue for a rea­son: the color is famil­iar to most users, which makes it easy to locate.

What color should your links be? The first con­sid­er­a­tion is con­trast: links have to be dark (or light) enough to con­trast with the back­ground color. Sec­ondly, they should stand out from the color of the rest of the text; so, no black links with black text. And finally, research shows (Van Schaik and Ling) that if usabil­ity if your pri­or­ity, stick­ing to blue for links is best. The browser’s default link color is blue, so peo­ple expect it. Choos­ing a dif­fer­ent color is by no means a prob­lem, but it may affect the speed with which users find it.

The Ideal Search Box Is 27-​​Characters Wide

What’s the ideal width of a search box? Is there such a thing? Jakob Nielsen per­formed a usabil­ity study on the length of search queries in web­site search boxes (Pri­or­i­tiz­ing Web Usabil­ity). It turns out that most of today’s search boxes are too short. The prob­lem with short boxes is that even though you can type out a long query, only a por­tion of the text will be vis­i­ble at a time, mak­ing it dif­fi­cult to review or edit what you’ve typed.

The study found that the aver­age search box is 18-​​characters wide. The data showed that 27% of queries were too long to fit into it. Extend­ing the box to 27 char­ac­ters would accom­mo­date 90% of queries. Remem­ber, you can set widths using ems, not just pix­els and points. One em is the width and height of one “m” char­ac­ter (using what­ever font size a web­site is set to). So, use this mea­sure to scale the width of the text input field to 27-​​characters wide.

Google’s search box is wide enough to accom­mo­date long sentences.

Apple’s search box is a lit­tle too short, cut­ting off the query, “Microsoft Office 2008.”

In gen­eral, search boxes are bet­ter too wide than too short, so that users can quickly review, ver­ify and sub­mit the query. This guide­line is very sim­ple but unfor­tu­nately too often dis­missed or ignored. Some padding in the input field can also improve the design and user experience.

White Space Improves Comprehension

Most design­ers know the value of white space, which is the empty space between para­graphs, pic­tures, but­tons and other items on the page. White space de-​​clutters a page by giv­ing items room to breathe. We can also group items together by decreas­ing the space between them and increas­ing the space between them and other items on the page. This is impor­tant for show­ing rela­tion­ships between items (e.g. show­ing that this but­ton applies to this set of items) and build­ing a hier­ar­chy of ele­ments on the page.

Notice the big con­tent mar­gin, padding and para­graph spac­ing on The Net­set­ter. All that space makes the con­tent easy and com­fort­able to read.

White space also makes con­tent more read­able. A study (Lin, 2004) found that good use of white space between para­graphs and in the left and right mar­gins increases com­pre­hen­sion by almost 20%. Read­ers find it eas­ier to focus on and process gen­er­ously spaced content.

In fact, accord­ing to Chaperro, Shaikh and Baker, the lay­out on a Web page (includ­ing white space, head­ers, inden­ta­tion and fig­ures) may not mea­sur­ably influ­ence per­for­mance but does influ­ence user sat­is­fac­tion and experience.

Effec­tive User Test­ing Doesn’t Have To Be Extensive

Jakob Nielsen’s study on the ideal num­ber of test sub­jects in usabil­ity tests found that tests with just five users would reveal about 85% of all prob­lems with your web­site, whereas 15 users would find pretty much all problems.

Source: Jakob Nielsen’s AlertBox

The biggest issues are usu­ally dis­cov­ered by the first one or two users, and the fol­low­ing testers con­firm these issues and dis­cover the remain­ing minor issues. Only two test users would likely find half the prob­lems on your web­site. This means that test­ing doesn’t have to be exten­sive or expen­sive to yield good results. The biggest gains are achieved when going from 0 test users to 1, so don’t be afraid of doing too lit­tle: any test­ing is bet­ter than none.

Infor­ma­tive Prod­uct Pages Help You Stand Out

If your web­site has prod­uct pages, peo­ple shop­ping online will def­i­nitely look through them. But many prod­uct pages lack suf­fi­cient infor­ma­tion, even for vis­i­tors doing a quick scan. This is a seri­ous prob­lem, because prod­uct infor­ma­tion helps peo­ple make pur­chas­ing deci­sion. Research shows that poor prod­uct infor­ma­tion accounts for around 8% of usabil­ity prob­lems and even 10% of user fail­ure (i.e. the user gives up and leaves the web­site) (Pri­or­i­tiz­ing Web Usability).

Apple pro­vides sep­a­rate “Tech Specs” pages for its prod­ucts, which keeps com­pli­cated details away from the sim­pler mar­ket­ing pages, yet pro­vides easy access when they’re needed.

Pro­vide detailed infor­ma­tion about your prod­ucts, but don’t fall into the trap of bom­bard­ing users with too much text. Make the infor­ma­tion easy to digest. Make the page scannable by break­ing up the text into smaller seg­ments and using plenty of sub-​​headings. Add plenty of images for your prod­ucts, and use the right lan­guage: don’t use jar­gon that your vis­i­tors might not under­stand.

Most Users Are Blind To Advertising

Jakob Nielsen reports in his Alert­Box entry that most users are essen­tially blind to ad ban­ners. If they’re look­ing for a snip­pet of infor­ma­tion on a page or are engrossed in con­tent, they won’t be dis­tracted by the ads on the side.

The impli­ca­tion of this is not only that users will avoid ads but that they’ll avoid any­thing that looks like an ad, even if it’s not an ad. Some heav­ily styled nav­i­ga­tion items may look like ban­ners, so be care­ful with these elements.

The square ban­ners on the left side­bar of Flash­Den are actu­ally not ads: they’re con­tent links. They do look uncom­fort­ably close to ad ban­ners and so may be over­looked by some users.

That said, ads that look like con­tent will get peo­ple look­ing and click­ing. This may gen­er­ate more ad rev­enue but comes at the cost of your users’ trust, as they click on things they thought were gen­uine con­tent. Before you go down that path, con­sider the trade-​​off: short-​​term rev­enue ver­sus long-​​term trust.

Bonus: Find­ings From Our Case-​​Studies

In recent years, Smash­ing Magazine’s edi­to­r­ial team has con­ducted a num­ber of case stud­ies in an attempt to iden­tify com­mon design solu­tions and prac­tices. So far, we have ana­lyzed Web forms, blogs, typog­ra­phy and port­fo­lios; and more case stud­ies will be pub­lished next month. We have found some inter­est­ing pat­terns that could serve as guide­lines for your next design.

Here, we’ll review some of the prac­tices and design pat­terns that we dis­cov­ered in our case stud­ies in this brief, com­pact overview, for your convenience.

Accord­ing to our typog­ra­phy study:

• Line height (in pix­els) ÷ body copy font size (in pix­els) = 1.48
  1.5 is com­monly rec­om­mended in clas­sic typo­graphic books, so our study backs up this rule of thumb. Very few web­sites use any­thing less than this. And the num­ber of web­sites that go over 1.48 decreases as you get fur­ther from this value.
• Line length (pix­els) ÷ line height (pix­els) = 27.8
  The aver­age line length is 538.64 pix­els (exclud­ing mar­gins and padding), which is pretty large con­sid­er­ing that many web­sites still have body copy that is 12 to 13 pix­els in font size.
• Space between para­graphs (pix­els) ÷ line height (pix­els) = 0.754
  It turns out that para­graph spac­ing (i.e. the space between the last line of one para­graph and the first line of the next) rarely equals the lead­ing (which would be the main char­ac­ter­is­tic of per­fect ver­ti­cal rhythm). More often, para­graph spac­ing is just 75% of para­graph lead­ing. The rea­son may be that lead­ing usu­ally includes the space taken up by descen­ders; and because most char­ac­ters do not have descen­ders, addi­tional white space is cre­ated under the line.
• Opti­mal num­ber of char­ac­ters per line is 55 to 75
  Accord­ing to clas­sic typo­graphic books, the opti­mal num­ber of char­ac­ters per line is between 55 and 75, but between 75 and 85 char­ac­ters per line is more pop­u­lar in practice.

Accord­ing to our blog design study:

• Lay­outs usu­ally have a fixed width (pixel-​​based) (92%) and are usu­ally cen­tered (94%). The width of fixed lay­outs varies between 951 and 1000 pix­els (56%).
• The home page shows excerpts of 10 to 20 posts (62%).
• 58% of a website’s over­all lay­out is used to dis­play the main content.

Accord­ing to our Web form design study:

• The reg­is­tra­tion link is titled “sign up” (40%) and is placed in the upper-​​right corner.
• Sign-​​up forms have sim­ple lay­outs, to avoid dis­tract­ing users (61%).
• Titles of input fields are bolded (62%), and fields are ver­ti­cally arranged more than they are hor­i­zon­tally arranged (86%).
• Design­ers tend to include few manda­tory fields and few optional fields.
• Email con­fir­ma­tion is not given (82%), but pass­word con­fir­ma­tion is (72%).
• The “Sub­mit” but­ton is either left-​​aligned (56%) or cen­tered (26%).

Accord­ing to our port­fo­lio design study:

• 89% of lay­outs are hor­i­zon­tally cen­tered, and most of them have a large hor­i­zon­tal nav­i­ga­tion menu.
• 47.2% of port­fo­lios have a client page, and 67.2% have some form of stand­alone ser­vices page.
• 63.6% have a detailed page for every project, includ­ing case stud­ies, tes­ti­mo­ni­als, slideshows with screen­shots, drafts and sketches.
• Con­tact pages con­tain dri­ving direc­tions, phone num­ber, email address, postal address, vCard and online form,

Other Resources

• 15 Valu­able Usabil­ity PDFs You’ve Never Heard Of
• 15 Impor­tant Research Find­ings You Should Know
• 10 Addi­tional Research Find­ings You Should Know
• Intro­duc­tion To Good Usability
• 11 Strik­ing Find­ings From an Eye-​​Tracking Study
• 25 Incred­i­bly Use­ful Usabil­ity Cheat Sheets And Checklists
• 10 Usabil­ity Find­ings To Increase Sales And Cus­tomer Loyalty
• Web form design guide­lines: an eye-​​tracking study

Have any thoughts on what we’ve cov­ered, or know of other use­ful usabil­ity find­ings? Please leave a com­ment below.

About the Author

Dmitry Fadeyev is the founder of the Usabil­ity Post blog, where you can read his thoughts on good design and usabil­ity. Fol­low Dmitry on Twit­ter @usabilitypost

(al)

© Dmitry Fadeyev for Smash­ing Mag­a­zine, 2009. |
Perma­link |
14 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 Magazine

Post tags: find­ings, research, usabil­ity

Posted in Graphic Design | Comments Off

20 Creative Illustration Advertisements from behance

I have col­lected 20 extremely cre­ative illus­tra­tion adver­tise­ment images. Check out these adver­tise­ments from behance network.

Do you want to be the first one to know the lat­est hap­pen­ings at 2Ex​perts​De​sign​.com just sub­scribe to our rss feed and you can fol­low us on twit­ter as well.

WARID ZAHI

Visit Source

Dtac & Vodafone

Visit Source

Road Safety for Kids

Visit Source

Poster Ads Photo Typograhpy

Visit Source

FANTA

Visit Source

Youd rather take the train

Visit Source

Vodka Putinka

Visit Source

Prime

Visit Source

M&Ms Sta­toil

Visit Source

M&Ms

Visit Source

If you enjoyed this post, please con­sider to sub­scribe to the feed and get future arti­cles deliv­ered to your feed reader.

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

Logo Design Inspiration: 50+ Beautiful Examples

A Logo is a graph­i­cal ele­ment that, together with its logo­type (a uniquely set and arranged type­face) form a trade­mark or com­mer­cial brand. Typ­i­cally, a logo’s design is for imme­di­ate recog­ni­tion. The logo is one aspect of a company’s com­mer­cial brand, or eco­nomic or aca­d­e­mic entity, and its shapes, col­ors, fonts, and images usu­ally are dif­fer­ent from oth­ers in a sim­i­lar mar­ket. Logos are also used to iden­tify orga­ni­za­tions and other non-​​commercial entities.

These types of cor­po­rate iden­ti­ties are often devel­oped by large firms who spe­cial­ize in this type of work. How­ever, if you want to save some bucks and want to design your logo then there are many sources to get logo design inspi­ra­tion. Infect, we might able to help you by pre­sent­ing this show­case of Highly beau­ti­ful, orig­i­nal and cre­ative logo designs for your design inspi­ra­tion.

All of these logos are very cre­ative and fol­low­ing dif­fer­ent trends like PhotoFill, Con­cealed, Vari­Dots, Candy Stripe, Flip Flop, Sequen­tial, but most impor­tantly Tex­ting which is a com­mon ele­ment among all of them. Also, try to catch how they cre­ated using spe­cific col­ors com­bi­na­tion, typog­ra­phy adjust­ments and font selec­tion.

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

• Logo Designs For Design Inspi­ra­tion — Part I, Part II
• 20 Sources To Get Logo Design Inspiration
• Sin­gle Page Web­site Designs For Design Inspi­ra­tion — Part I, Part II
• 100+ Best Web Gal­leries Around for Your Inspiration
• Cre­ative 404 Error Pages Around for Inspiration
• 90 Inspi­ra­tional And Cre­ative Port­fo­lio Designs

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 design inspi­ra­tion that our read­ers may like.

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