The business of building websites is one of constant change, adaptation and strategy. The way designers and developers build websites is often informed by the methods of others and their own trial and error. In light of this, we can draw a number of parallels — some philosophical, to a certain extent — between Web professionals and one of the oldest and most popular board games of all time (counting traditional and digital games). This game is chess.Image creditIn this article, we’ll explore the relationship between the game of chess and the Web industry. We’ll learn fundamental lessons from the pawn, rook, knight, bishop, queen and king, and we’ll highlight the factors — both offline and online — that determine best practices. The game is beloved by many professionals, so it seems fitting to apply its great strategy and elegance to the digital age; certain practices might help you lead a more successful working life.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]PawnsOf all the pieces on a chessboard, the most abundant and least strategically useful are the pawns. Acting as soldiers on the front line, these men of honor advance across the board in an attempt to reach the end of the opponent’s side and transform into a more useful piece (i.e. another queen). While this doesn’t happen often, pawns nevertheless play a fundamental role in shielding higher-ranking pieces from attack, and these simple pieces are also used at the outset to gain positions of advantage.Always Move ForwardPawns can only move forward. They can get a quick start; players have the option of moving the pawns up to two spaces on their first move and subsequently moving them one space at a time. When you work on projects in a business environment, the principle of moving forward without back-tracking is an inspirational perspective. If you cease to constantly drive your ideas forward, they can become stagnant; progress is critical to a website’s development.Here are some tips you can use to adopt this mindset:Don’t get stuck using deprecated practices when structuring website code.Examine your community to determine needed features for future upgrades.Change a website’s interface only if it would benefit the user experience.Be Willing to SacrificeThe ideal of giving something up in exchange for a greater good is realized by pawns, which, though limited in function, are plentiful and can protect others. In design, shielding the end user from issues that can damage the usability of the website is a worthwhile sacrifice. Having to let go of something that took time and energy is always unfortunate, but knowing when to say goodbye could mean the difference between success and failure.Here are some tips for internalizing this attitude:Ensure that your Web layouts are flexible enough to meet the needs of various devices.Weigh the benefits of features against their pitfalls before eliminating them.Content is more valuable than design; never dilute its quality for eye candy.Aim for ChangeThe pawn’s greatest moment is arriving at the opponent’s side of the board. Striving for betterment and aiming for your goals are behavioral ideals firmly upheld by professionals. This requires dedication and careful planning. When undertaking a creative project, it’s important to think beyond the current ask and consider the long-term project.Here are some tips to get into this mode:The website-building process is never complete; ensure that you maintain a steady flow of updates.Think of ways to enhance the website to better cater to your visitors’ changing needs.It never hurts to have a business plan when scoping out a Web-based project.RooksRooks (or castles, as some people call them) are fortresses of strength that move across the board either horizontally or vertically. Their nature is similar to that of bishops in that they move in a straight line (although bishops move diagonally). Progress can be hindered by barriers, and interaction with other pieces is sometimes required, but the rook’s overall benefit is stamina and longevity.When working on Web projects, we often put a great deal of thought into things like conventions and patterns and their theory and implementation. The nature of semantics and following recognized pathways in order to structure a document properly is reminiscent of the way that chess pieces such as the rook have a particular function and invariably carry out unique tasks. Only with logical thought can we hope to change the ultimate goals of an event and avoid obstruction.Structure With PurposeA rook represents strength and structure. The castle of stone might be restricted in its interactions on the chessboard, but its value is in its character. Websites need to be constructed well in order to survive the trials of everyday use. Considering how such needs should be met will ensure a sturdy and durable display of data. Take great care when structuring your work to reduce “illegal moves” and syntax.Here are some tips for strengthening your outlook and code:Always validate your code; it will reduce the number of bugs.Use the right element for the job to improve your code’s semantic value.Keep code minimal to reduce file size and loading time.Assist Those in NeedLike the other pieces on a chessboard, the rook is always on hand to help out by attacking or defending. Working with others to accomplish a task is only part of their job. In a Web environment, the same is true: if you take the time to assist those who use your website or service, not only will you increase your value, but you will gain the gratitude of the visitors, whom your website requires in order to keep running.Here are some tips that might be of assistance:Providing ways for people to contact you is important to maintaining trust.Negative feedback can still be constructive; don’t dismiss it as “bashing.”Provide social interaction aids to help visitors feel involved in your community.Take PrecautionsSometimes things don’t go as planned, in which case you’ll want to hold the strongest position possible. Rooks, like all other critical pieces, are only tools to protect other pieces in play, but caution is fundamental to remaining in a position of power. Thinking of how future scenarios might challenge your strategy can help future-proof your work from obvious flaws. You don’t want visitors to encounter obstacles that make them miss out on the benefits of your website!Below are some tips for fortifying your website:Turn off scripts and styles to test whether your website is still usable.Test your websites on mobile devices, a market that is proliferating.KnightsKnights are unique in their movement, going forward two spaces and then taking a single side-step. This means they can weave past other pieces and take up positions of singular advantage. Strategically, knights are most often used to pin hard-to-reach pieces in place through a clever attack. While this unique movement has its advantages, the knight does not replace the other pieces, which have their own strategic benefits.Our uniqueness, whether as it is applies to our creative process, our products or our ability to solve common problems, is something we as professionals take for granted. We are able to incorporate creative flourishes when we forge applications, flourishes that can be tracked through the code (such as conditional comments, which give stylistic flavor to Internet Explorer). Like a white knight saving our sanity, our uniqueness helps us side-step issues that could otherwise become complicated.Be Brave in AdversityMythology has taught us the familiar attributes of the knight: bravery, strength and honor. Thoughtful reflection on the Web-building process teaches us to be courteous to others and brave, while sticking to our guns when faced with the prospect of compromising in order to gain market share.Here are some tips to make yourself more knight-like:Never take criticism personally; negative feedback is often the most useful kind.Don’t resign in the face of competition; the only failure in life is to quit trying.Try to rally support for your project; there’s strength in numbers.Have a Selling PointThe knight is the only chess piece that move in two directions in one turn; even the queen can’t do this! This attribute teaches us the value of having a selling point. Selling points give visitors a reason to choose one product or service over others that perform the same function.Here are some tips on finding your selling point:Draw from other people’s work, but never steal anything outright.Improving on existing services is a kind of innovation in its own right.Be focused in what you offer; reinventing too much increases complexity.Avoid Barriers to AccessThe knight is the only piece that can pass over others in its movement. This ability to navigate past barriers is somewhat reminiscent of standard recommendations for accessibility, which ask us to remove barriers to access on our websites. The goal is to allow freedom of movement and access to content.Below are some tips on removing barriers:Consider the types of people who are not as able as you are online.Testing your work on an audience is better than going solo.Make sure your website works in different browsers to avoid serious breakages.BishopsThe bishop is a piece that moves diagonally across the chessboard. The bishop scans the board for its next move, minding pieces that block its path, in the same way that a visitor scans content until a barrier prevent their progress. A bishop cannot step off the tile color to which it was initially assigned, ensuring a kind of vendor lock-in.As Web professionals, we tend to get caught up in arguments about whether frameworks are useful, given their disadvantages (and even with graceful degradation, for example). The benefits of frameworks for certain situations occasionally outweigh their downsides (like trapping users in the environment), so make the most of what you have; dismissing less powerful options is not always the best way to go — in fact it could increase the amount of work required.Have Faith in Your WorkThe bishop, of course, is religious in nature, an agent in the battle between two sides. Faith in a religious sense is not needed to practice Web design, but as a quality of character it does play a part in one’s identity. Faith affects motivation and makes you believe in the project you’re spending so much time and effort on. If you have no faith in your craft, the job is doomed from the outset.Here are some tips for building faith in your work:Create a list of benefits to focus on your website’s potential.Set realistic, structured goals to achieve success.Encourage visitors to recommend your work to people they know.Know Your LimitsIt may seem frustrating that each bishop is trapped on its own color, limited in impact. But if you make the most of it, bishops can still be useful. Know your own strengths and limitations, so that you don’t attempt the impossible or unachievable — if you do, the result will surely be flawed.Here are some tips on knowing your limits:Get external support or advice when you hit a wall.If something can’t be achieved the way you hoped, look for alternatives.Reduce your weaknesses by learning new skills regularly.Stick to Your GunsWhile being able only to move diagonally may seem like a disadvantage, this can prove useful on occasion. Having sheer determination to carry out a job in a certain way is admirable. We humans are sometimes stubborn, and we stick to our guns when possible. This can cause us to make mistakes… or motivate us to persevere.Here are some tips on being determined:Reflect on a project’s overall goals whenever possible in order to reassess a plan’s feasibility.Mistakes happen, and no one is perfect, but that’s no reason to stop trying.The QueenThe queen is the second-most important piece on the chessboard. She can move horizontally, vertically and diagonally across any distance, and her power spans the entire board. She is the king’s most agile bodyguard, and losing her can be devastating. You have to use your power responsibly, both on the chessboard and in your profession; misusing your tools could cause you to lose visitors to the competition.Sometimes we find ourselves swatting a fly off a nuclear warhead. Knowing exactly what to use, when to use it and how to use it appropriately is what ultimately distinguishes professionals from amateurs. In addition, taking advantage of the powerful tools at our disposal can speed up progress and eliminate the complexities that come with attempting the impossible with simple tools.Realize Your PotentialA potent force, the queen moves freely about the chessboard, with few restrictions. The queen is a powerful piece and reminds us to exert the greatest effort to reach our potential. Rather than staying in our comfort zone, we must always learn new skills and achieve more than what is expected of us.Here are some tips to stretch your skills:Everyone has the capacity to learn; keep your skill set up to date.Push yourself to become a better professional and to exceed your own expectations.Try not to let any of your skills go to waste when creating something.Cover All BasesIn our work, we try to minimize error by viewing every situation from multiple angles — this is important. In chess, players use the queen in much the same way, exploiting her power yet shielding her from harm. In the creative process, your only real limitation is being blind to critical elements, which is why getting some perspective from outside testers and users never hurts.Here are some tips to cover your bases:The more time you spend planning a project, the better the results usually will be.Information architecture is your friend; make use of wireframes and mock-ups.Spend time testing your website intensively for critical flaws.Strategy and LearningYou have two knights, two rooks, two bishops and many pawns, but only one queen. Her value lies in her singularity; each move of the queen requires strategy and consideration of consequences. We become better players — and professionals — through trial and error, constant learning and foresight. Being cautious in the game teaches us to be wise in business.Here are some tips to help you strategize:Read blogs, books, tutorials, magazines and anything else that can help guide you.Analyze your target audience to get ideas on what your website might need in future.Researching the competition gives you a sense of what potential visitors need.The KingNo piece is as important as the king; it is the one piece that must evade capture. The king moves only one space at a time, in any direction, and whenever it is in immediate danger, either a piece must be moved to block the attack or the king must be moved to avoid it. The king has no equal and cannot be restored by a pawn — sacrifice, and so prevention is imperative.Web professionals have to protect what is important, too. We deal with payment details, databases, passwords and other sensitive information. If we lose any of that through carelessness or a lack of preventative measures, we end up losing something greater: the customer. Establishing trust takes time, but it can be lost as quickly as a surprise checkmate!Avoid TrapsProtecting the king is the primary concern of every chess player. Gaining advantage to prevent loss is important. While Web professionals usually have no reason to evade capture (unless they’re doing something wrong), the benefit of avoiding common traps (the equivalent of “foolsmate” in chess) becomes apparent when testing the cross-browser functionality of a website.Here are some tips on avoiding traps:Try to reduce the intrusiveness and obtrusiveness of your website to enhance the visitor’s experience.Actively seek out errors in your work to improve your service.Internet Explorer is a pain. Watch out for its rendering faults.Value and ImportanceA common tactic in chess is to weigh the value of the pieces against the benefits they represent. The king is critical because the game is lost without it. Comparing value has an important role in the Web industry, too, especially when losing mission-critical features would undermine the entire process. Comparing value also helps when prioritizing maintenance work or scheduling upgrades.Here are some ways to tip the scale:Accurately pinpoint the value of your service.Upgrades are avoidable, but reduce downtime as much as possible.Price your service fairly; prices that are either too high or too low create problems.Know When to ResignSometimes we get so excited — or stressed, as the case may be — about complex or next-to-impossible projects that we forget the option of saying “no.” We never like to resign or throw down our sword; we feel as though we have failed because we couldn’t meet the client’s needs. But firing bad clients and knowing when to scrap weak ideas is a part of being a professional. You can’t win every fight.Here are some tips on recognizing when to throw in the towel:Trust your instincts when deciding whether to undertake a project.Salvage something from anything you work on.Learn how to deal with “clients from hell.”ChessboardChess players focus on the pieces in play and on capturing the king, but they must also understand the chessboard as a battleground on which this drama plays out. This relates to the website-creation process (and to a lesser extent, the Web industry): lessons are to be learned from the chessboard itself.Image creditLight and DarkLike a chessboard, the Web industry is full of light and dark, good and bad. We weigh benefits and pitfalls when performing our roles. A chess game tells a story; likewise, the fruits of our labor and our highlights and disappointments all appear online.Think AheadOne of chess’ biggest lessons is to think ahead, instead of in the moment. Being able to predict how your opponent will move helps you gain advantage. This is also true of the website-building process. Unjustified decision-making leads to problems, whereas well-planned strategies that entice people to visit and use your service lead to faster results and greater rewards.Weigh Your OptionsIn chess, there are literally millions of ways a game can play out, and with every move the number of potential outcomes decreases. Knowing your options and which route affords the best opportunity for success is a critical skill. Website creators have many different methods of production and implementation as well, but missing the mark with scalability or usability can diminish a website’s user-friendliness and jeopardize its success.Make Your MoveDecision-making can be tricky; in chess, a wrong move can cause you to lose a piece, a good position, an advantage or even the game. The same could be said of building a website. Preparing for different projects, services and eventualities is one thing, but having the courage, skill and understanding to carry them out successfully takes practice. After examining your options, make your move: put all your careful planning into action.Checkmate!So many useful lessons can be learned from chess. If you haven’t played it before, visualizing what we’ve gone over might be hard, but the fundamental principles of the game — how the pieces interact and the role of strategy in the big picture — should not be ignored. The game actively promotes logical thinking and strategy — both useful skills.>More lessons could certainly be drawn from the game, but hopefully this article will serve as a source of inspiration, especially if you feel your goals are out of reach. We often learn the most from making mistakes, losing a battle and then returning to win the war. Nowhere is this been truer than in chess, where a mixture of practice, skill and occasional luck is required to become the grandmaster.So many aspects of the Web industry (such as syntax, design and ideals) change constantly, but the fundamental principles of learning, growing and trying your best often mean the difference between failure and success. Try to incorporate lessons from the chessboard into your own work; while having all the pieces doesn’t guarantee victory, having the basic skills will give you the confidence and awareness that you need to succeed.(al)© Alexander Dawson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

  They say the first bite is taken with the eye. If so, these appetizing restaurant websites succeed in whetting our appetites, inviting us to a savoury next bite. In these designs, color scheme and introductory copy show vastly different aspects of the restaurant experience. Moody warm tones create atmosphere, vibrant greens underscore freshness, and earthy colors communicate a relaxed, friendly attitude.Because customers are increasingly using mobile browsers to make decisions on the spot, restaurant websites are doing a better job of communicating core information quickly. Similarly, full Flash websites with no mobile alternatives are seeing some decline. Especially interesting is how these businesses are improving their online menus by replacing PDF-only downloads with Web-optimized alternatives that are more readable and easier to navigate.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]Showcase Of Restaurant DesignsGeogeske This design has printerly qualities, with its eye-catching oranges and whites and oversized headings. Everything works together to establish a relaxed yet smart urban atmosphere. The JavaScript effects (sectional fades and spring-loaded logo introduction) are used sparingly and effectively. Simple navigation and short copy make scanning easy while putting the focus on the strong menu-worthy photography.Jam Restaurant Upscale modernist and classical elements are used consistently on this website and in the menu and restaurant interior. The vibrant typographic header looks stunning while enhancing usability by prominently displaying a phone number and hours. Another nice touch is how the body scrolls beneath the stationary translucent header.Benito’s Hat Named after a celebrated Mexican president, this restaurant communicates authenticity and freshness with a green cilantro backdrop and clear devotion to its culinary roots. At times, the backdrops on the interior pages eat the foreground text; a little contrast and spacing would help in spots. Overall, an offbeat feel that works.Pizzeria Napolicentrale This website uses horizontal navigation to guide the user through photos of mood-setting rustic Italian elements. The beige picnic pattern adds just enough visual interest without competing with the copy. But in some sections, the taller content makes horizontal scrolling a bit floaty.Barley’s A cozy design rich in grainy colors and sturdy serifs. Small touches—like the roll-overs, and lighting effects such as in the logo hover state—give a handcrafted feel. Do not miss the nice, readable menu and beer list that feature stylishly simple beer ratings.State With nocturnal tones and pictures of people having a good time, the State uses a hip design to say that it’s a cool sociable night spot. Perhaps intentionally, there seems to be little focus on food; for example, the menu section feels skimped (disjointed navigation and flimsy type for the buttons). More photos of the restaurant and food might enhance the personality of this website. Also, the home page seems a tad cluttered. In general, a little more depth in the sub-pages would round out what is a good-looking piece.Farinella Bakery Fun and disarmingly honest, Farinella Bakery takes the cake in blending personality and usability. The bold header and fun footer become bookends for the spot-on copy and photos. Notice the slight head bob when you click on the navigation and the magnification when you roll over menu items; a tasty browsing experience. What makes this a winner is that the integrity and consistency of the design can be found in the smallest elements.Sono Authentic Japanese design elements and atmospheric audio effects work well to create mystique on this Flash website. A few usability concerns pop out: for example, the flaky JavaScript for the “Back” button and the small text that is in a cramped box with a small scroll bar.The Little Cake Parlour This more conventional website shines with gorgeous photography that almost seems edible. The design has a strong focus on typography, with various elements embedded in the elegant pink multi-column layout. Some design elements probably shouldn’t be images and would work better as simple plain text, though. Also, because all visual elements have a similar pink tone, they may be a bit difficult to recognize at first glance — for instance, the pink PayPal-button in the footer of the site.Pizza Luce With playful tattoo-like scribbles and quirky photography, Pizza Luce makes clear its immutable place in Minneapolis’ food culture. Check out the oddly captivating home page illustration. For all of these strengths, the community section feels slapped together and in need of a bit of refinement.La Vista The clever use of the Flash overlay here adds intimacy and life to the crisp photography. The menu is noteworthy: simple to browse and very clean.Georgian Wine Society The backdrop feels like a matte painting that draws us into the headspace. With that, we are receptive to the interesting narrative about Georgia’s role in wine-making. The e-commerce system is well integrated; a more generous margin between elements would augment the shopping experience.Catered by Kate This website’s “About” page is one of the top in this showcase. It opens with Kate smiling warmly, giving the page a welcoming human touch. Next, it summarizes (in only two sentences) three very compelling reasons why you would use Kate for your catered event. Just one distracting but easy-to-fix minus: a call-out to an empty Flickr page that is supposed to hold more images.Can Jubany This clean layout on deep chocolate brown feels elegant even while containing a surprisingly large amount of content. The home page sets the right tone with the large yet quick-loading video that tells a story. Two more unique touches are the simple sliding navigation and the tantalizing, well-written recipe section.Caravan This simple and savvy composition uses negative space to focus on the coffee while adding depth with subtle textures. If the placeholder is this solid, then our expectations are high for the full website!Chipotle Humor, earthy tones and engaging (and notably non-Flash) animations make for an experience that is engaging and relaxed yet expertly crafted. Consistent with its corporate message of “Food with integrity,” Chipotle focuses much of the website on its brand rather than the burritos. Be sure to tug the rope in the footer for some hidden and delightful interactivity.Le 28 Thiers Here are tangerine and rose hues mingled with crisp photographic elements and textures. The simple wooden table distinguishes the layout and grounds the content visually. Subtle gradients in the typography, quality photography and the curved navigation inject elegance and dimension.Brooklyn Fare This playful design achieves a unique charm through imagery that consists of real employees, bookish serifs and a stylish seafoam background. Especially nice is the consistent layout, with its cheerful copy and gritty photography, which avoids appearing repetitive.Canela Canela (Portuguese for “cinnamon”) employs a conventional layout, energetic reds and generous imagery to give a sense of flavor and sophistication. The three-column PDF-only menu makes browsing on a mobile device more challenging.Last ClickBrew Shop The Brew Shop is not really a restaurant website, but it is still worth mentioning. The site establishes personality at first sight with a hilarious photo and beery good humor. It backs the funny with substance, such as a very usable e-commerce system, effective copy and scannable icon-enhanced navigation. Especially nice are the swaths of red as call-outs and the subtly scrambled type.Related PostsYou may be interested in the following related posts:Corporate Website Design: Creative and Beautiful SolutionsShowcase of Sweet Chocolate WebsitesShowcase Of Delicious Coffee Websites(al)© Sam Wilson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  Today we are glad to release iCandies Icon Set, a set with 60 high quality icons in 64×64px, 48×48px and 32×32px, available in .EPS, .AI and .PNG. The set is designed by the talented folks from IconEden on a sole purpose of giving your projects a sleek and geeky style or provide crisp, attractive icons for your modern and fashionable-looking interfaces. All the icons in this pack — 60 icons in total — are designed in Round Rectangle shape.Download the icon set for free!You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.large previewdownload the set (.zip, 5.1 Mb)A word from the designersAs always, here are some words from the designers of the set:Dear Smashing Magazine readers, IconEden’s 2nd birthday is coming! And we’re as excited about it as you’re. To celebrate our two years of rocking the icon design world, IconEden collaborated with Smashing Magazine to craft a small set of 60 wonderful icons called “iCandies”! And it’s all yours. Similar to previous collections, iCandies comes in vector and pixel formats and can be immediately be built into your projects at no cost. You can use the icons for any commercial and personal projects. Thank you very much, guys! We appreciate your efforts.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]Related PostsYou may be interested in the following related releases:The Ultimate Free Web Designer’s Icon Set (750 icons, incl. PSD sources)Free Medical Icons Set (60 Icons)Yummy! Free Food and Cakes Icon Set (20 Icons)Quartz Icon Set (90 clean sharp icons)gCons: Free All-Purpose Icons for Designers and Developers (100 icons + PSD)© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Freebies, Icons

  In celebrating the merits of free software and the excitement over this radical networked production method, an important truth is left unspoken. Networked collaboration shines in the low levels of network protocols, server software and memory allocation, but user interface has consistently been a point of failure. How come the networked collaboration that transformed code production and encyclopedia-writing fails to translate to graphic and interface design?The following is an investigation into the difficulties of extending the open-source collaboration model from coding to its next logical step: interface design. While we’ll dive deep into the practical difference between these two professional fields, the article might also serve as a note of caution to think before rushing to declare the rise of “open-source architecture,” “open-source university,” “open-source democracy” and so on.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]The ChallengesScratching an ItchBy going open-source, coders are fulfilling a need to change software, to make it their own. They might have different motivations, but if you’re already modifying something for yourself, answering the “Why share?” question is really easy with “Why not?” By the time the code executes correctly, the immediate users of the software—that is, the coders themselves—are already familiar with the software and can operate it even without a delicately crafted user interface.Therefore, the motivation to take an extra step and invest in a usable interface that would extend the user base beyond the original geek-pool is not obvious. The interface already works for me, so what itch am I scratching by working hard to make it usable for others who can’t help me code it?For the designers themselves, what is their incentive to make the design process more collaborative? Will others make my design better? Will they be able to communicate my ideas better than I can?Beyond that, open-source interface design suffers from a chicken-and-egg problem: most designers don’t use open-source tools, and so it doesn’t occur to them that they could make the software better. As a result, open-source software suffers from an inferior interface that makes designers shy away from it and stick to their proprietary tools. The cycle repeats…GranularityBoth software and wikis are made of granular building blocks, namely characters. This makes every typo an invitation to collaborate. My first Wikipedia edit was a typo correction, my second was adding a reference link, my third was writing a whole paragraph, and that led me to more substantial contributions, like adding a whole new article and so on.Each granular step gets you closer to the next granular step. This ladder of participation makes each successive step easier. It also allows you to compare changes easily, giving you transparency, accountability, moderation and an open license to try and possibly fail, knowing you can always revert to the previous version.You don’t get that with design, because the changes are not granular and are not as easily traceable. The first step is steep, and a ladder is nowhere to be found.Encoding/DecodingIn his 1980 article “Encoding/Decoding,” cultural theorist Stuart Hall defines communication in terms of code. To describe it briefly, let’s imagine a spoken conversation between Alice and Bob. Alice encodes her framework of knowledge into the communicable medium of speech. Assuming Bob can hear the sounds and understand the spoken language, he then decodes the sounds into a framework of knowledge.Both encoding and decoding are creative processes. Ideas are transformed into messages that are then transformed into ideas again. The code that Alice uses for encoding is different than the one Bob uses for decoding. Alice could never telepathically upload ideas into Bob’s brain. (We can all agree that that is a good thing.)Let’s entertain Hall’s ideas of encoding and decoding in software. Alice is an open-source hacker, and Bob is collaborating with her as a designer. Alice is writing software code; she knows when it executes and when it doesn’t because the program communicates that through error messages. When she is happy with the result, she uploads the code to an online repository.Bob then downloads the code to his computer, and because it has executed on Alice’s computer, it also executes on his. When Alice and Bob collaborate through a programming language, they are literally using the same code for encoding and decoding.Alice always chooses one of her three favorite programming languages. Being a designer, to communicate a message visually Bob starts by defining a visual language—graphics, color, layout, animation, interaction… If Alice or any other developer had to reinvent a new programming language on every single project we would be speaking about FLOSS now.Bob needs to define a graphic language, a standard for the collaboration. Doing that is already a major part, possibly the most important part of the creative work. Whoever works with Bob will need to accept and follow these standards, relinquish control and conform to Bob’s predefined graphic language. These artificial constraints are harder to learn and conform to than the constraints of a programming language. While constraints and standards in technology are the mother of creativity, in design they can often feel artificial and oppressive.Beyond that, within a collaboration, when Bob tries to argue for the merits of his design, unlike in the case of Alice’s code he cannot prove that it executes flawlessly, or that it is faster or more resource efficient. The metrics are not as clear.It is important to remember, in collaboration on code Alice and Bob have a third collaborator, one that cannot be reasoned with – the computer. This collaborator will simply not execute anything that doesn’t fit its way of work. On the other hand, as long as it is syntactically correct and satisfies the inflexible collaborator even “ugly code” executes and muddles through.  And so, the different voices expressed in code are flattened into a single coherent executed application.For better or worse, we lack this inflexible collaborator in design. It doesn’t care about our communicative message and it doesn’t level the playing field for communicative collaboration. And so, the different voices in design simply spell inconsistent multiplicity that dilutes the communicative message.One might turn to Wikipedia as a testament to successful non-code-based collaboration, but Wikipedia enforces very strict and rational guidelines. There is no room for poetry or subjectivity within its pages.Is It Simply Impossible?Not necessarily. If we step out of the technical construct of the open-source methodology, we can identify quite a few networked collaborations that are transforming and often improving on the design process.Viewing free culture and the free sharing of media as evidence of collaboration is tempting, but the availability of work to be remixed and re-appropriated does not necessarily imply collaboration. Sharing is essential to collaboration but is not enough.WordPress, the leading free blogging software, is an interesting example. Looking to redesign the WordPress administration interface, Automattic, the company leading the WordPress community, hired HappyCog, a prominent Web design firm. And in March 2008, WordPress 2.5 launched with a much improved interface. Through a traditional design process, HappyCog developed a strong direction for the admin interface. Eight months later, Automattic released another major revision to the design that relied on HappyCog’s initial foundation but that extended it far beyond.One of the interesting methodologies that HappyCog used to get the WordPress community involved in the design process was a call for icon designers to provide a new icon set for the interface. Within two weeks, the six leading icon sets were up for voting by the community.But rather than just casting a blanket “Like” or “Dislike” vote, community members were invited to provide a detailed assessment of consistency, metaphor coherence and so on. Some icon designers in the running even acknowledged the superiority of other contributions and voted against their own sets. The icon set that was ultimately chosen, though, was a collaborative effort, because some of the icons changed based on inspiration from the other sets.Another example is the evolution of grid systems for Web design. Half a century after the rise of Swiss-style graphic design, some design bloggers suggested that some of its principles might apply to Web design. Those suggestions evolved into best practices, and from there into Blueprint CSS, an actual style sheet framework. The framework became popular and inspired other frameworks, such as 960.gs.Similar processes happen in interaction design. One example is the pop-up window evolving into the elegant lightbox or modal window modules, and then changing and being modified again and again in open-source code libraries.Other design-oriented experiments in free software, such as the ShiftSpace platform, challenge the Web interface power structure. ShiftSpace allows users to interact with a website on their own terms by renegotiating the interface and proposing different interactions on top of the page. Projects like ShiftSpace aim to expand the limited participatory paradigm of the Web beyond user-generated content to include user-generated interfaces.Make It Happen!There are ways to make open-source design work without falling into the traps often characterized as “design by committee.” We are already seeing designers scratching their own itch and contributing creative work to the commons.Lecturing designers (or users) and demanding that they use bad tools for ideological reasons is counter-productive. Designers often use free tools (or use proprietary tools in unauthorized ways) only because they are free as in free beer. So, to win over new users, free software should be pitched on the full range of its merits rather than on ethics alone. While the ethics of “free as in free speech” are convincing to those who can “speak” code, the openness of the source to those who lack the skill to modify the code is a weaker selling point.Free software tools have won on their broad merits many times, and not only on low-level system and network fronts. Wikis and blogging software (which are interaction and communication tools) that have been invented by the free software community have maintained a lead over proprietary competitors. Networking and collaboration are the bread and butter of free software, and the community should leverage these advantages.Just as Wikipedia extends the free-software collaboration model by leveraging the granularity of characters, so can design. When possible, using code for design collaboration is preferable. Beyond that, versioning both code and image files should be adopted more by design collaborators. Rather than hanging its hat on inferior clones, the free software community can come up with new collaborative paradigms for versioning and collaborating on files—even ones built as features for otherwise inferior clones! It need not be an all-or-nothing game.Finally, There are ways for us to better analyze the encoding and decoding of the communicated message. We can formalize processes of collaborative encoding. We can start by conducting networked design research using existing research tools; in this way, we might come up with design decisions collaboratively. We can define modular and extensible languages that embody design decisions but still allow for flexibility and special cases (like Cascading Style Sheets). We should also learn how to document our design decisions so that they serve other collaborators. Designers have been doing this for many years in more traditional and hierarchical design contexts when they have compiled documents such as branding books or design guides.For the decoding part, we should realize that many design patterns are rational or standardized and can leverage common ground without compromising the creative output. For example, underlined text on the Web almost always implies a hyperlink. We could choose to indicate a link otherwise, but if we try to use this underline styling, say, for emphasis, we can expect users will try to click on it.User experience research, technical aspects of design, best practices in typography, icon use, interaction paradigm—these are all aspects of design that can be researched and assessed according to measurable parameters. Thorough research of these can provide a basis for consensus for shared expectations of how a message will be interpreted. A lot of this work is already taking place on design blogs, which have published a lot of research on the subject over the past few years.Finally, the substantial parts of design that still cannot be easily quantified or assessed on shared rational ground should be managed through trust and leadership. A resilient community of practice must be able to develop design leadership whose work and guidance is respected and appreciated even without the convenient meter of coding meritocracy.Scaling SubjectivityIt comes down to the deep paradox at the heart of design (whether for interface, architecture, product, etc.). We are trying to create a subjective experience that scales—a single personal scenario that can be multiplied repeatedly to fit a wide array of changing needs by a vast majority of users. The thing is, subjectivity cannot be scaled—that’s what makes it subjective—therefore, the attempts to create a one-size-fits-all solution are bound to fail, along with the attempts to customize the solution to each individual user in each individual use case.Chris Messina gives a great example for this paradox by comparing Apple’s Magic Mouse to the OpenOffice mouse. While Apple’s solution is a slick, clean one-button device, the OOMouse has “18 programmable mouse buttons with double-click functionality; analog Xbox 360-style joystick with optional 4-, 8- and 16-key command modes; 63 on-mouse application profiles with hardware, software and autoswitching capability…” and more. While the Magic Mouse embodies Apple’s commitment to design leadership at the price of user choice, the OOMouse embodies the free software community’s preference for openness and customization over unified leadership.Successful open-source projects have always benefited from a mix of the two approaches, a combination of openness and leadership. Finding a similarly nuanced approach in other fields is required if we ever hope to extend the open-source model beyond code. We cannot sprinkle the pixie dust of open source on everything and expect wonders. The same goes for design. Hopefully, though, we can make some progress by demystifying the process and by collaborating wisely when it makes sense and coming up with new ways when it doesn’t.“Can Design By Committee Work?” by Collaborative Futures is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. Based on a work at http://www.booki.cc. This essay is also featured in the Collaborative Futures book, written collaboratively, published for free and released under the CC-BY-SA license.(al)© Mushon Zer-Aviv for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

  Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That’s why we have decided to supply you with smashing wallpapers over 12 months. And to make them a little bit more distinctive from the usual crowd, we’ve decided to embed calendars for the upcoming month. So if you need to look up some date, isn’t it better to show off a nice wallpaper with a nice calendar instead of launching some default time application?This post features 75 free desktop wallpapers, created by designers across the globe. Both versions with a calendar and without a calendar can be downloaded for free.Please notice:all images can be clicked and lead to the preview of the wallpaper;you can feature your work in our magazine by taking part in our desktop wallpaper calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?So what wallpapers have we received for September 2010?[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]Tension9"I made a 9 on the fence with nails and woolen to express the tension. It has come to the ninth month of 2010. Still working hardly and stressfully? Take it easy!" Designed by Ssu-Hua Chen from Australia.previewwith calendar: 1024×768, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×1024, 1440×900, 1680×1050, 1920×1200Autumn Skyview"Laying on field watching the sky above, leaves are falling, autumn is coming." Designed by Jaro Mlkvy from Slovakia.previewwith calendar: 1024×768, 1280×800, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1680×1050, 1920×1200Symbian World"Scene from Symbian World." Designed by Anna Alfut from UK.previewwith calendar: 800×600, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2048×1152without calendar: 800×600, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2048×1152Melancholic Painting"September always makes me melancholic, not sure why." Designed by Alex Roman from Romania.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200Autumn Paper"Autumn is the season that’s most calming to me. Perfect weather, an array of colors, and a great source of inspiration to designers." Designed by Bogdan Lazar from Romania.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200Blue Fall"A fun and intricate Illustration for the month of September inspired by Canadian scenery and the colors of fall" Designed by Avid Muse Design from Canada.previewwith calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200, 2560×1600without calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200, 2560×1600Gold autumn"When the leaves begin to change it means that autumn comes and schoolyear begins." Designed by cheloveche.ru from Russia.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200My Daisy"Do not under estimated the beauty of a little daisy." Designed by Esther Lau from USA.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Colourful Relaxation"A design based on a photograph by Olivia Bell – I ended up altering it a fair bit, but I just loved the original so I wanted to base a design on it. I hope you like it!" Designed by Sasha Bell from England, UK.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200Memorial Tribute"This wallpaper is a memorial tribute to the heroes of 9-11-2001,remembering the events of that September day and the innocent victims of the whole matter." Designed by Nishith from India.previewwith calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200Summer’s End"The Month of Ramadan is a time for many in which we fast, worship, and evaluate ourselves in order to strive to become a better person. Summer came and now it is leaving, the month of Ramadan came and now it is also leaving us and so this design is to show the tranquility, beauty, and spirituality of this month but at the same time show the power of these last ten nights." Designed by Arif Huda (Ihsaan|Fusion) from USA.previewwith calendar: 320×480, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200without calendar: 320×480, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200My Chilly Beach"Although autumn is calling, the beach is still a gorgeous place – even if chilly. Just a little reminder of summer and the fun it has brought – I hope you all have had a lovely summer (or winter for those in Australia etc) and have a wonderful new season, whatever it may be! Happy September :)" Designed by Olivia Bell from England, UK.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 2560×1600without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 2560×1600Hues of Autumn"As summer turns to fall, we enjoy watching the colors around us change to beautiful shades of orange. Enjoy this fun wallpaper on your desktop this season!" Designed by thunder::tech from USA.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050Origami flight"Grab some paper, fold yourself a plane, and take flight!" Designed by Chris Alexander (Yipori) from England.previewwith calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440without calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440Far Far Away"Wherever you go, no matter what the weather, always bring your OWN sunshine. (Anthony J. D’Angelo, The College Blue Book)" Designed by Juanita Ooi from London, UK (Originally Malaysia).previewwith calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Ending of Summer"Summer feels like it is truly finishing in the UK, we’ve gone from 20 degree weather to the 12/15′s and have spent an entire week immersed in rain! This photograph was taken during a brief dry spell – I thought it was a good representation of what we’re moving towards? even the grass looks sad!" Designed by Olivia Bell from England, UK.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 2560×1600without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 2560×1600Wake Me Up"This is how Green Day’s “Wake Me Up When September Ends,” makes me feel." Designed by Umer Tahir from Canada.previewwith calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Love Birds"Celebrate love and be free. Happy September to everyone!" Designed by Martina Skender from Croatia/Israel.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200The Browser"Meet the Browser-The Rockstar of the Internet. Preloaded with vibrant colors, he is all ea_rss to the happenings of the world wide web. Ask him about anything and you’ll get a reply, so quick that will make you go-ogling at him. He is the happening cool dude with a goatee in all the chatrooms, forums and social networks. So Click Him! ;)" Designed by Pixel Pundits from India.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600Back To SchoolDesigned by Irene from Spain.previewwith calendar: 320×480, 1024×640, 1280×800, 1440×900, 1920×1200without calendar: 320×480, 1024×640, 1280×800, 1440×900, 1920×1200Wear & TearDesigned by Christopher Lee from USA.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200The Cobweb Field"For a week we were immersed in a cloud. You couldn’t see into the distance at all, it was miserable but it did give us a wonderful chance for this photograph. I titled it “The Cobweb Field” as when I looked closer, it was literally covered in them. Quite amazing! Thank you to my models Sasha Bell and Rosanna Bell, without them this photograph would be empty! Enjoy September Smashing Magazine readers! :D" Designed by Olivia Bell from England, UK.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 2560×1600without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 2560×1600International Day of Peace"The International Day of Peace, also known as the World Peace Day, occurs annually on September 21. It is dedicated to peace, or specifically the absence of war, such as might be occasioned by a temporary ceasefire in a combat zone. It is observed by many nations, political groups, military groups, and peoples. The first year this holiday was celebrated was 1981." Designed by Darshan Kore from India.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Colorado WildflowersDesigned by Kari Andresen from USA.previewwith calendar: 320×480, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1280×800, 1440×900, 1680×1050, 1920×1200Victorian newspaper"I am interested in typography and ornamental Victorian style.I wanted to present this calendar as a Victorian newspaper.Je m’int?resse ? la typographie ornementale et de style Victorienne.J’ai voulu pr?senter ce calendrier comme un journal d’?poque Victorienne." Designed by Sandrine Abraham from Paris, France.previewwith calendar: 1024×640, 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200Earth Wind and Fire September"I was born a hippie at heart and am completely in love with the old Fillmore posters from the 60s and 70s. Have a happy September with this Fillmore-style illustration featuring the lyrics to Earth Wind & Fire’s song “September.” Look closely into the disco lights for lyrics." Designed by Allison Doty from USA.previewwith calendar: 320×480, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1280×800, 1440×900, 1680×1050, 1920×1200Friends"Cat and mouse, a contrived action involving constant pursuit, near captures, and repeated escape. We can do better than that, let’s start this month!" Designed by VCO Studios from The Netherlands.previewwith calendar: 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600without calendar: 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600Mexico 1810-2010"Commemorating Mexico’s bicentennial." Designed by Alicia Ramirez from Canada/Mexico.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1600without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1600Nat 2010"Nat 2010 stands for Nature 2010. A graphical representation of what nature will become during the start of this years autumn." Designed by Alec Leigh from France.previewwith calendar: 800×480, 1024×640, 1280×800, 1680×1050, 1920×1200without calendar: 800×480, 1024×640, 1280×800, 1680×1050, 1920×1200Talk like a pirate day"Ahoy, semptember 19th be th’ speak like a scurvy pirate day. Be a jolly scurvy pirate ‘n on 19th o’ Semptember speak like a scurvy pirate th’ whole day. Gar, Where can I find a bottle o’rum?" Designed by Vladimir Remenar from Croatia.previewwith calendar: 1280×720, 1280×800, 1440×900, 1680×1050without calendar: 1280×720, 1280×800, 1440×900, 1680×1050Summers End"Take a look out of my little Forest." Designed by Christopher Krahlisch from Germany.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200Mimimi"It’s September, the Summer will end nearly? Don’t make Mimimi, and appreciate the last summer days." Designed by Sandra Heinzen from Germany.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200A Tale"Un poco de fantas’a no le hace mal a nadie :)" Designed by Srpn from Spain.previewwith calendar: 1280×800, 1440×900, 2560×1600without calendar: 1280×800, 1440×900, 2560×1600Parallel Universe"The most tolerant ladybug ever :)" Designed by Bruna Šuligoj from Croatia.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Spring Origami"Flying origami birds in the spring." Designed by Paula Laneri from Argentina.previewwith calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200Ramadan Kareem"I have design this wallpaper for the holy month of Ramadan Kareem." Designed by Waqas Khna from Pakistan.previewwith calendar: 1024×768, 1152×864, 1280×720, 1280×800, 1280×960without calendar: 1024×768, 1152×864, 1280×720, 1280×800, 1280×960Oh JoyDesigned by Valerie Morgan from USA.previewwith calendar: 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1600without calendar: 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1600Wet"Raindrops Keep Falling on My Leaves! Photo by Daniel Furtado." Designed by Wezen Design from Brazil.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Iran Guilan"Guilan, is one of the provinces of Iran that have very desirable weather with beautiful nature.It lies along the Caspian Sea. This photo shows one of the beauty of this region." Designed by Arash Zad from IRAN.previewwith calendar: 320×480, 1024×640, 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080without calendar: 320×480, 1024×640, 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080Bridge to reflections"Autumn is that dreamy time when we remember all the good things happened through the summer." Designed by Jaro Mlkvy from Slovakia.previewwith calendar: 1024×768, 1280×800, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1680×1050, 1920×1200Meditation"We just got back from a camping trip where we spent severaldays in a tent, surrounded by redwood trees. It’s easy to forget there’s aworld outside our computer monitor sometimes, a world with only the noise ofwater dripping onto leaves and gentle breezes, a world that isn’t dividedinto pixels and margins. It’s important, sometimes, to take a step away fromthe blue haze of our monitors and step into the real world just to keep ourown sanity." Designed by Arcane Palette Creative Design from USA.previewwith calendar: 320×480, 1152×864, 1280×800, 1280×960, 1440×900, 1600×1200, 1920×1200, 768×1024without calendar: 320×480, 1152×864, 1280×800, 1280×960, 1440×900, 1600×1200, 1920×1200, 768×1024Back to School"When I would get a little bored in class I would doodle these little characters on my notebooks. Now that I am no longer in school, I still find myself doodling whenever I’m brainstorming for a project or need a little break from what I’m working on." Designed by Amy Vitale from Gilbert, AZ USA.previewwith calendar: 320×480, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Wake me up when September… ends"A little friend hibernating. When the right time comes, he will rise & shine again." Designed by Alecsandru Grigoriu from Romania.previewwith calendar: 320×480, 1024×768, 1280×800, 1440×900, 1680×1200without calendar: 320×480, 1024×768, 1280×800, 1440×900, 1680×1200SeptembARR"Just a little something for Talk Like a Pirate Day!" Designed by Carly Dybka from Canada.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Sweet September"My last September was so sweet with lots of memories with my best friend. So i decided to design a wallpaper for her. And here it is…" Designed by Aswani from India.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200ChestnutDesigned by Barney from Slovakia.previewwith calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Cool Cat"A literal wallpaper, this is an illustration of the coolest cat: the one and only, James Dean." Designed by 3 Roads Media from USA.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Domo At The Playground"I

  A few years ago, you might not have pointed out during a meeting with a potential client that you maintained a blog. Over time, though, blogs have evolved from the being a personal hobby to a serious work tool. In fact, today, web designers are supposed to know much more than just how to design and build websites. Customer’s expectations have increased, and unless you are in position to choose your favourite clients, meeting them requires hard work.Hence, it’s important to keep learning about the variety of design-related fields every single day — be it marketing, psychology, business, copywriter, publisher or blogger. This article doesn’t cover “traditional” web design discipline as we know it, but goes a bit beyond it, exploring various copywriting, blogging and online publishing strategies. Apart from that, we present some useful writing style guides that may help you educate your clients on copywriting for their upcoming project.Image credit.Good news: you don’t have to reinvent the wheel every time you are about to start and run a blog. Many bloggers have already shared their best tips on how to run a blog efficiently. One of those tips is to set up an editorial agenda. Blogging may sound like a spontaneous activity, but it can also be planned. While this might sound obvious to professional bloggers, applying the idea to less regular posting schedules is not a bad idea. Some will benefit greatly from looking ahead. Writing and posting according to your inspiration is great creatively, but it doesn’t exactly make for consistent work. While planning can have its drawbacks, it does come with many positive effects.Compiling a list of brilliant posts waiting to be published is not enough, though. Polishing the quality of the posts is important, too. Unfortunately, spelling is not the only thing to check. Style guides are useful to many people other than those who run newspapers and magazines, and certainly to bloggers. In reality, this is what it takes to conquer the world.[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]Editorial CalendarAn editorial calendar outlines the editorial content that is planned for the coming few weeks. Financially speaking, it can be useful for advertisers to know on which day to run a particular ad, but in this article we’ll consider only the benefits for you and your readers.Creating discipline will change your relationship to your blog, and in visible ways. An editorial calendar will affect both your writers and your readers. The key is consistency. Calendars don’t have to be extensive to be efficient, even though newspapers and a few blogs have calendars that cover as much as an entire year.Why Is It Useful?From the writer’s point of view, a calendar has numerous advantages. First, seeing the long term encourages them to look at the big picture, an excellent habit. It also helps establish credibility because all your content will have to make sense in the context of that schedule.Secondly, by knowing which articles will be published when, you are able to better plan your personal work schedule. If you want to write an upcoming article now, great. If not, you now know when you’ll have time. By exercising discipline, you are able to focus on the things that matter, which Jonathan Thomas calls a good blogging habit:You’ll create a production state of mind, meaning that you’ll get in the habit of writing a post a day, or even writing them all in one day and scheduling them to post. This will make the creation process much easier to begin and end.Why not exploit this window of opportunity by tackling some in-depth articles or developing an interview series? Imposing deadlines on yourself lets you organize research to support your writing or to contact experts for commentary. Planning ahead this way makes it easier to write features stories and to deliver higher-quality content to readers. It also helps you grow faster professionally.A lot of it has to do with motivation. You have to recognize that finishing your posts on time while dealing with all of other tasks is do-able. Motivation is critical to writing more and planning content ahead. It’s a virtuous circle. Rather than juggling ideas for hundreds of post a week, you will focus on a few and actually work on them. Organizing content helps you to organize ideas, and by the end, you’ll likely end up with even more interesting ideas in the editorial plan.DrawbacksOf course, calendars do have their drawbacks, otherwise every single blog would be using one. The most obvious drawback is that sticking to the plan can be hard. Having a plan on paper is great, but what happens when your Thursday post isn’t ready? Readers won’t be pleased that you’ve broken the unspoken contract. You’ll want to think about who has access to the schedule. Keeping it mainly to yourself and revealing it only occasionally can be a good idea and can generate a little excitement.Readers won’t be the only ones disappointed. In most cases, an editorial plan functions as a kind of pledge by the blogger to follow a better workflow. A calendar can certainly raise the bar, but it should be motivating and not too difficult to keep up with. This is why having reasonable deadlines is important. Even if you miss one, remember that stuff happens, and it’s not the end of the world.Which brings us to the last point: flexibility. A calendar shouldn’t restrict a blog’s potential, especially if the blog has more content than it needs. If a great story comes along that is time-sensitive, so be it: calendars can and should be adjusted. Content trumps all else.Getting StartedSit down, take a sheet of paper and list the themes and topics you will be covering. Starting an editorial plan takes time. The more precise you are, the easier it will be to organize.Define your categories and tags. While simple to do, a few rules will make the process more efficient:Use only as many categories as you really need—don’t overload them;Make the labels short, unique, descriptive and reader-friendly;Assign one category to a post, and then use tags for more description;Use sub-categories only if you really need them.Balance both form and content. Mixing feature with shorter articles is good because it lightens your workload without sacrificing regularity, and also because it’s easier for readers to follow. Bear in mind that you have already defined your categories, and now is the time to figure out how to mix them. Keep in mind also that a diversity of content is always appreciated by readers.Determine your themes. Now you can spice things up by creating themes for the days or weeks. This has two benefits. First, it puts readers on a schedule. If they know what to expect and when, they will be more inclined to return. Secondly, it saves you from having to think of a theme or idea for each day. Here are some examples you could use:Tutorial and how-toReviewShort tipsBookmarks round-upsAsk the blogger, reader Q&AColumnsListsDebates and pollsFeaturesOngoing seriesDecide when to publish. Consider two things. First, when will you have time to write? If you’re behind schedule, on what day would you most likely have time to write a feature story? When will you be busy and have time to write only a short article? Secondly, some days are slower than others, so you might want to save your brilliant feature for the middle of the week. Here is an idea of what you could do:Monday: short tutorial A helpful tutorial is a good start to the week.Tuesday: feature Show the world your big story. It’s a good day for visibility.Wednesday: tips A post that doesn’t take much time to write and prepare will be good for you in the middle of the week.Thursday: review The weekend is coming, and if your work is not done, Thursday can be stressful. Time for a quick-and-dirty review.Friday: list The weekend is here. Time for a list from which readers can quickly take what they need.Saturday: poll Take advantage of the weekend to pose question to your readers.Sunday: useful links You could post the links that you collected during the week.Setting a ScheduleWhen you set up your schedule, be fair to yourself and realistic. Ask yourself honest questions. And always remember your goals: realistic objectives, diversity of content and forward-thinking.How long ahead should I plan? Normal practice is about two weeks ahead.How often should I post? It could be once or several times a day, a few times a week, whatever works for you.How often should each category appear? Try to balance the categories so that the content is varied.How to balance features and shorter articles? Depending on your blog’s purpose, you may want to publish a feature every day or every week.Who does what and when? If you have multiple authors, make sure everyone knows what is expected.How much quality content can I ensure?Whether your scheduling tool is as simple as an Excel sheet or as sophisticated as dedicated software, the important thing is that you feel comfortable with it. You can download a weekly spreadsheet template for 2010 for OpenOffice or Excel. Of course, creating your own calendar could work even better: just a few columns with succinct information. You could use the following headings:ID or number,Date of publication,Title of post,Category and/or tags,Basic intro,Description or main points,Links and resources used.Taking it a step further, by maintaining an SEO-friendly editorial calendar, you would be organizing the blogging process in a way that supports your SEO strategy.Going FurtherIt makes sense to start blogging when you have at least a week of content ready, preferably more. And then you can’t rest on your laurels. Keep an eye on what’s coming up; you should constantly be collecting ideas in an efficient way. When are you most likely to think of great post topics? If in the morning, then wake up 10 minutes early to write down your ideas. Constantly searching for new topics is great, but writing them down is even better. If you make a habit of adding topics and basic points to your list, then you will be able to just pick one and write a post.A little of strategy goes a long way. Even if you have a lot of content and ideas, don’t rush. Save some back-up posts for busy weeks. There are times when you will be relieved to have content ready to publish so that you can focus on other work. This is what Kian Ann calls a “buffer” in his article “6 Steps to Consistent Blogging.” Another reason not to publish all of your content at once is the difference in traffic it would make. How would publishing two articles a day instead of one change traffic flow? How much will it cost you? Is it worth it?As with all else, constantly looking to your users for feedback is critical. Find out if they’re happy with the frequency and quality of your content, and adjust to them accordingly. If you have many readers, you could use a tool such as Twitter or a polling service.You could go even further by including in your calendar a way to keep old posts alive. ProBlogger has an excellent “5 Tips for Getting Readers Viewing Your Old Blog Posts” video on this issue. The advice includes creating a “best of” or “popular posts” section, linking related content as well as updating and reposting old content. You could also see out opportunities in the offline world. A lot of events are probably happening in your field. If you’re interested, you could easily find ready-to-write subjects and prepare first-hand news reports.UI And Editorial Style GuidesPurposeAs emphasized, consistency is one of the strongest assets a blog can have, which is why style guides are so helpful. Style guidelines created for a particular organization are called “house style.” On the Web, their main purpose is to ensure consistency across websites by standardizing design and content. Other advantages are that they facilitate group collaboration and are useful for training new members on a product team.Beyond imposing proper grammar and spelling, an editorial style guide sets the voice and tone of the content. If you are the only writer on your blog, you might think that your voice is always the same… but don’t be so sure. If you run a blog with multiple authors, a style guide is all the more important.An interface style guide is helpful for documenting a website’s design and informing clients and content editors of branding guidelines, including rules for typography, color and images. Development standards are no less important: the style guide for them keeps development smooth and efficient, and it often accompanies the design style guide.ResourcesHere is a list of online style guides that can be used as a starting point.A List Apart: Style Guide A great example of a short but efficient style guide, covering such things as tone of voice, punctuation and CSS style.NYPL: Style Guide This style guide for the New York Public Library explains the mark-up and design requirements for all Web projects of branch libraries, along with various standards and best practices.The Guardian style guide A detailed A–Z online edition of the style guide used by writers at The Guardian, Observer and guardian.co.uk.Web Style Guide This guide to Web publishing and writing style by Patrick J. Lynch and Sarah Horton is available with complete text and illustrations online. It is a comprehensive guide to issues affecting website designers, including a complete chapter on “Editorial Style.”Princeton Web Editorial Style Guide The Web Editorial Style Guide was created by Princeton’s Office of Communications as a quick reference tool to help the school’s communicators follow a style that is consistent and appropriate to websites. The guide follows conventions outlined in the Associated Press Stylebook, but there are exceptions specific to the university. Short but efficient.BBC News Styleguide This page links to BBC’s policies, standards and guidelines and is intended primarily for those undertaking or wishing to undertake work for the BBC as content providers.The Times Style and Usage Guide This version of The Times Style and Usage Guide (published in book form in January 2003) provides writers and sub-editors with a quick reference to contentious points of grammar and spelling and guides them through specialized areas where confusions have arisen in the past. The alphabetical list has been augmented by seven specialist sections on the armed forces, the arts, the churches, the courts, politics, sport and titles.The Chicago Manual of Style (not free) Excerpts and the full text is available online by subscription. The CMS is published in hardcover and online. The online edition includes searchable text of the 15th edition, with features such as tools for editors, a citation guide summary, and searchable access to a Q&A in which University of Chicago Press editors answer readers’ style questions. An annual subscription is required for access to the manual.AP Stylebook (not free) Excerpts and the full text is available online by subscription and in print.Setting Your Own RulesGoing through a few respected style guides is only a start, because each blog should establish its own rules. Defining them might take a while but is worth it in the end. Style guide not only maintain consistency but reflect an identity. So, this is the time to remind yourself or your writers of what you generally expect:What is your blog’s purpose?Should the writing exhibit any particular style?Are there any sentences or expressions you don’t want to be used?How specific should a post be? Who should it target?Do you allow personal remarks? How formal should the writing be?An editorial style guide should reflect the blog’s writing style, and a good way to be precise is to look at your old posts and compare them to your current writing:What has changed?Which do you like better?A user interface style guide includes mostly formatting elements but can include pretty much anything else:How will you deal with images? How will you cite them? At what size should they be displayed?How long should titles be? How will you capitalize them?How long should posts be? How should the content look?How will you format links? How will you display quotes and photo credits? What terms and copyright licences should photos be used under?Should author bios follow a particular format?For more resources on creating a style guide, see a nice example of a personalized style guide on Writing an Interface Style Guide, and read some tips on avoiding problems in “Guidance on Style Guides,” by the Society for Technical Communication.ConclusionEditorial calendars and style guides are only guidelines. They are great for ensuring consistency, but they have to evolve with your objectives and should not constrain your workflow. Update them to fit your needs.We would love some feedback from you. Do you use calendars and style guides or think they’re too much of a headache? If you have followed them in the past, did you have to adjust them? How so? Please share your tips and advice with us and readers.Further ResourcesTemplates2010 Blog Editorial Calendar Template The worksheets are broken down by week for all of 2010, including one at-a-glance worksheet broken down by topic. There is also a worksheet for each month for more detailed information like category, target URL and keywords.User Interface Style Guides Some useful links to style guides followed by large websites, corporations and news agencies. Also discusses editorial guidelines, quality guidelines and online standards.AARP Bulletin: Style Guide A set of images on Flickr about one style guide redesign.Plug-InsScribeFire Blog Editor ScribeFire is a full-featured blog editor that integrates with your browser and lets you easily post to your blog.WP editorial calendar This editorial calendar lets WordPress administrators and editors manage dates for multiple posts at once. You’ll see all of your posts in a calendar view, and can arrange them via an easy drag-and-drop interface.SEO Blogger: Optimize Your Posts as You Write SEO Blogger lets you find the most sought-after keywords for your subject without ever leaving the blog editing screen.Further ReadingHow Should You Select Categories for Your Business Blog? Some more tips on handling post categories.My Blog Editorial Calendar, by Kian Ann A great example of weekly features that can be implemented on a blog.A Blogging Editorial Calendar and ProPlanning for Content Thought on what went wrong with one calendar’s content, how the author adjusted and how she implemented her new strategy.How to Develop a Niche Blog Content Plan Goes over why having a content plan for your niche blog is good and how to develop it?How to Make an SEO-Friendly Editorial Calendar for Your Blog Taking it a step further, an SEO-friendly editorial calendar simplifies and brings discipline to the process of writing blog posts in a way that supports your SEO strategy.Create a Style Guide for Your Blog, by The Blog Herald A great article about style guides for blogs.Typography Rules, Typesetting Guidelines Become familiar with the basic rules of typography and general typesetting guidelines. Avoid beginner mistakes when setting type and using fonts.Grammar Gang An interesting blog dedicated to grammar.(al)© Jessica Bordeau for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: blog, calendar, consistency, editorial, plan, planning, style guide, styleguide

  In this post we release a yet another freebie: Academica WordPress Theme, a free WordPress theme designed specifically for educational websites such as universities, schools etc. It’s a flexible and versatile free theme that can be easily customized and branded for any university, academy or non-profit organization. The theme is designed by ProudThemes and released for Smashing Magazine and its readers. As usual, the theme is free to use in private and commerical projects.Download the theme for free!The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.live demolarge preview (.jpg, 0.6 Mb)download the theme (.zip, 0.12 Mb)download the .PSD Logo (.zip, 42Kb)release on the developer’s siteIf you want to be informed when an update to Academica theme will be released, consider signing up with ProudThemes (free).FeaturesThe theme was developed for WordPress 3.0 (compatible with 3.0.1)Modern, three-column clean designSetting up Academica Theme is easy and takes just a few seconds. The theme can be uploaded directly from the Dashboard > Appearance > Themes page. No need to edit any files — everything can be done from the Theme Options page.5 built-in icons to share and link to your profiles on Twitter, Flickr, Facebook, LinkedIn and YoutubeThe theme allows enabling/disabling of a jQuery-based content slider on the homepage for showing your photosAcademica Theme uses a jQuery-based drop-down menu with a fade-in effect9 sidebars (widget areas) and 3 custom widgets developed for this theme3 custom page templates and 2 custom post templatesDynamic image resizing (TimThumb script)Support for Custom Menus (WordPress 3.0+).ScreenshotsDrop-down navigation menu. See live demo.Content blocks in the sidebar, defined with a custom widget. See live demo.News archive page. See live demoComments area with threaded comments (“reply”-functionality). See live demo.Behind the design processAs always, here are some insights from the designers:“Most theme developers create a lot of magazine and portfolio themes for WordPress, however the education niche is mostly ignored. We decided to do something about it, and create a flexible and versatile free theme that can be easily customized and branded for any university/academy or non-profit organization. Of course, the theme can be used in other niches as well, no restrictions or whatsoever. After reviewing a ton of web-sites of educational institutions, our eyes fell on the web-site of Massey University of New Zealand. With a rather general layout and color palette, we decided to make the navigation and all styling pure-CSS, without any gradients, so that the theme can be customized much faster and easier.”Thank you for your great work, guys. We appreciate your work, your time and your contributions to the design community.© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: free, Freebies, themes, wordpress

  To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details.In this post, we’ve prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. We’ve carefully selected the most useful kits and resources to get you going in the early stages of a project.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]Free Mobile GUI PSDAndroid GUI PSD This Android GUI PSD is based on elements of the Android 1.5 GUI and was made to help the open-source community with its Android application mock-ups. Most of the elements and phone illustrations are done in vector paths and so are easily resizable. Android Sans was used for the text.RIM Blackberry PSD A complete PSD file with layer styles, this has 135 layers of Photoshop goodness.Android Sketch Stencil Version 1.0 A Sketch-style Android OmniGraffle template. The purpose of the sketch style wireframe is to prevent the audience from thinking about visual design and encourage them to focus instead on functionality and behavior.All elements of Maemo 5 GUI in PSD This downloadable PSD file contains GUI template elements for the Maemo platform. These are indispensable for prototyping GUI applications running on Maemo devices.iPhone 4 GUI PSD (Retina Display)GUI PSD kit for creatives who design for the retina display (640×960). The file is huge, both in file size (62.7MB) and dimension (4074×2986). You’ll need to work at 25% – 50% even on the largest screens to roughly grab elements before zooming into 100% for the actual work.iPad GUI Kit in PSD This version offers a canvas size true to the iPad at 768×1024. In addition, most of the graphical elements are provided in vector format, allowing you a lot of room to scale up for high-resolution presentations. This version is layered in Photoshop, making it easy for you to go nuts with your mock-ups and client presentations.Android 1.6 Wireframe stencil for Omnigraffle Download this beautiful wireframe stencil add-on for OmniGraffle 5.x. Use this toolkit to wireframe Android-based apps and websites on the 1.6 Donut SDK.Google Android GUI PSD Here are the GUI elements of Android, built using vectors to scale.iPad GUI PSD Kit This pack includes full size graphics, as well as 256, 128 and 64 pixel icon sizes. The pack includes four sizes of the iPad graphic in PSD, PNG and Mac ICNS formats.Google Android PSD A stencil set for Google Android prototyping.Fireworks template for Android In this Fireworks template, Android UI elements have been redrawn as vector images. In the folders, the elements have been mostly labeled according to the Android vocabulary.Sexy Vector Cell Phone This phone can be scaled to any size. Easily add your own image to the screen with the included object mask. All objects are layered, grouped and labeled for easy customization.iPad Stencil for Omnigraffle Contains backgrounds, title bars, buttons, selectors and other iPhone UI elements. The text is fully editable in lists, title bars, buttons and scroll wheels.iPhone App Wireframe TemplateMobile – iPhoneiPhone GUI Elements Some beautiful iPhone elements. All graphics are layered Photoshop files.iPad and iPhone Design Design your application for the iPhone, iPod Touch and iPad with this exhaustive set of stencils. All stencils were created by hand with native OmniGraffle shapes, and groups and can be scaled, resized and exported to other vector formats in Graffle.Design Stencil for iPhone and iPad A stencil for designing OS applications for the iPhone, iPod Touch and iPad. The stencil for now is targeted at developers familiar with the default characteristics of the views and controls provided by UIKit.Apple iPad fully editable PSD A fully editable Apple iPad in PSD format. Every element you see is editable via vector masks, and everything is scaleable.Palm Pre GUI PSD This set contains a PSD to help designers pitch and develop polished concepts using Photoshop.iPhone UI Vector Elements Most visuals for applications start out as vector mock-ups in Adobe Illustrator. So, here are some cool iPhone UI vector elements. And there are even a few good Photoshop resources and even a nice OmniGraffle iPhone UI file or two in there.iPad Vector GUI Elements: tabs buttons menus icons This set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard and balloons. Useful for designers and developers, it includes scalable and totally editable vector versions (AI).Free Social Networking GUI PSD KitsFree Full-Layered Facebook GUI PSD Kit The idea behind this kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, sparing you from drawing all the comps and letting you customize all the text, buttons and data as you need. The kit is free to use in all projects, without any restrictions.Facebook GUI Free PSD Resource A Facebook graphic user interface (FBGUI) resource kit for Photoshop to make your work easier.Facebook Applications A sizable collection of elements for creating wireframes for Facebook applications.Omnigraffle Twitter Widget Stencil This set includes a selection of useful Twitter widgets and badges.Wireframing KitsBest Practice UX Forms Stencil v1.1 A comprehensive release of stencil that follows best practices for UX form design, providing three different ways to lay out forms, each with its own benefits. This version also provides different button layouts, a progress indicator, a Captcha code input field, labels and more.Form Elements UI KitForm elements stencil from the Design Stencil kit in the Yahoo! Design Pattern Library.Wireframe Shapes Here is a set of shapes for making wireframes in OmniGraffle version 5.x ( forMac OS X). It consists of most of the basic elements you’ll need to create user interface specifications.Wireframe kit for UI DesignersA set of various wireframes, such as product details, list of items, front page, mobile phone.MBTI sketching paper for ideation MBTI sketching paper for ideation sessions. It helps you think inside the box of four personality traits. Describe a design challenge and the problem to solve on every piece of paper. There’s also space for annotations.A4 sketching paper This sketching paper can be used after generating ideas for functionality. Design preliminary screens based on the ideas you come up with.Wireframe Magnets (DIY Kit) This DIY magnet template is based on the Konigi wireframe stencils, and it includes three sheets of elements that might be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, optionally laminate them if you intend to use with dry-erase markers, and then cut them out.Paper wireframe templates The finished product include seven variations, as well as PSDs.Wireframe template A useful print-and-sketch template available for downloading.iPad Idea Sheet A total of three sheets: one full size (landscape), one at 70% reduction (vertical) and one at 50% reduction (landscape). The 80 tiny dots make it easy to split the screen horizontally and vertically.Scenario, Taskflow and Grid Sketch Sheets A set of beautiful printable sheets for ideas and sketchingFree Photoshop browser template Need a clean browser screenshot for a design presentation? Look no further. These free professional Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and all kinds of flavors.Interactive Sketching Notation 0.1 The idea behind this notation is to visualize user interface states as well as user actions in a clear and rapid manner.MobileMe Full iPhone GUI For use with WinterBoard, this is a beta release, so there may be unthemed elements.Android Wireframe Templates (PDF)Free Keynote UX StencilsAdvertising Stencil Kit A set of very useful advertising stencils.Dragnet website wireframes kit v 0.9 Dragnet website wireframes kit v0.9 is a common library for Adobe Fireworks and contains over 25 objects that are useful for rapid prototyping of websites. It is completely free to download and use. The kit contains common Web design elements, such as scrollbars, buttons, menus and alerts.User Interface Design Framework This pretty and comprehensive design framework contains a GUI library of hundreds of vector elements for interface design. This minimal UI icon set has 260 vector icons and a library of 200 styles for Illustrator.Browser Form Elements PSD Included here is a set for Firefox 3 for Mac and another for IE7 on Vista.Sketching and Wireframing Kit Here is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.Photoshop Form Element Templates This set includes all common form fields and mouse and link pointers, optimized for ease of use.Web Browser Elements This excellent and useful kit contains pull-down menus, input fields, radio buttons, check boxes, buttons, text fields and scroll bars, all in an easily editable PSD file.UI Design Kit This Web UI template kit is made completely with shape objects, which in some cases convert to SmartObjects, so they’re totally scalable.Wireframe Symbols This download contains a symbols library and a full Adobe Illustrator file, with all of the elements spread out on the art board. To install this library, just drag and drop the Wireframe Symbols.ai file into your Illustrator Symbols directory. Once you are in Illustrator, go to your Symbols palette, and load the library.Web UI Element Pack This pack, in PSD format, contains 19 elements including loading bar, default and clicked-state buttons, button toggle, icons for “Close,” “Next” and “Previous,” paging icon and slider.Wireframe Kit for Google DrawingsOmniGraffle Stencil for Ext JS v3.0 This updated version of Ext JS Omnigraffle stencil contains many improvements and additions, namely the recreation of most Ext JS elements as Graffletopia shapes or groups, especially helpful for resizing titles, tables cells and so on.Flex 3 Stencil Includes all Flex components from the Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tooltips and errors.Aqua GUI A series of elements inspired by the GUI Design Palette 1.2 and the Mac OS X interface stencils, based on Aqua, and mainly intended to make simple window designs.Flex Darkskin PSD UI A beautiful set of 16 PSD files.Web Wireframe Kit Here is a simple way to plan a layout and a cost-effective, time-saving wireframe kit for Web designers.UI Buttons and Icons This set contains 165 high-quality UI icons and buttons in five different colors. Available in AI, JPEG and SVG formats.Quommunication Stencil Kit This beautiful set contains design elements for wireframing, RSS feeds, colors, advertising units, browser windows and grids.Mac OS X Interface 2 A Leopard-y interface stencil kit that makes extensive use of tables for maximum flexibility while maintaining pixel precision.OmniGraffle UX Template The OmniGraffle Pro (v. 5) template for interface design. Includes shared layers for basic UX document needs (e.g. title page, wireframes, storyboards).Template for Blueprint CSS Comps This template allows you to create visual design comps to be implemented using a CSS layout framework. The Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint.Apple Elements for OmniGraffle Stencils of Apple hardware and miscellaneous networking components. Excellent for creating physical diagrams.DeviantART ID PSD Kit These 15 professionally designed, fully customizable templates include MINI and Original ID templates.Browser Screens and Website Elements Here is a useful set of vector assets you can use to mock up client projects, present your work or get a quick visual while laying out a website.960 Grid Template for OmniGraffleControl of different browsers for designers (download link)A PSD library of controls in browser interfaces of Mozilla Firefox, Opera, Internet Explorer and Safari.Useful ArticlesThe Importance of WireframingA comprehensive article on how wireframing plays an important role in information architectureThe Future of Wireframes As we move into the next decade of Web design, it’s time to re-evaluate our understanding of wireframes, a tried and tested user experience staple.Wireframing Is Not a ReligionWireframes are an indispensable tool for design thinking, a digital sketch pad ready to be drawn and erased, scrapped or resurrected at any moment.Five Commandments for WireframingPaul Boag is a wireframes fanatic and believes they are an indispensable part of the development process. He espouses five unbreakable rules.20 Steps to Better Wireframing Possibly the biggest mistake made in any development project is failing to plan. This article goes over why.Resources and Round-UpsI Love WireframesA tumblog dedicated to wireframes, prototypes and mock-ups.Wireframe ShowcaseThis site is a place to look at websites based on wireframes and analyze how the designers transformed mock-ups into working designs. Because the wireframes and designs were submitted by their creators, Wireframe Showcase includes a short explanation of each piece. Most of the websites grew out of digital mock-ups, which have the advantage of being easy to tweak and rearrange. The result is a pleasing and informative collection of wireframes.

The hotel industry is one that seems notorious for its horrid design. Fortunately there are those that show it doesn’t have to be the case. Enjoy this set of sites that truly make you wish you could visit them. http://inspiredology.com/paradise-on-the-web-examples-of-beautiful-hotel-and-resort-websites/

  Recently, A/B testing has come under (unjust) criticism from different circles on the Internet. Even though this criticism contains some relevant points, the basic argument against A/B testing is flawed. It seems to confuse the A/B testing methodology with a specific implementation of it (e.g. testing red vs. green buttons and other trivial tests). Let’s look at different criticisms that have surfaced on the Web recently and see why they are unfounded.[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]Argument #1: A/B Testing And The Local MinimumJason Cohen, in his post titled Out of the Cesspool and Into the Sewer: A/B Testing Trap, argues that A/B testing produces the local minimum, while the goal should be to get to the global minimum. For those who don’t understand the difference between the local and global minimum (or maxima), think of the conversion rate as a function of different elements on your page. It’s like a region in space where every point represents a variation of your page; the lower a point is in space, the better it is. To borrow an example from Jason, here is the issue with the local vs. global minimum:As even Jason acknowledges in his post, this argument isn’t really concerned with A/B testing, because the same methodology could be used to test radical changes to get to the global minima. So, calling it an A/B testing trap is unfair because it doesn’t have anything to do with A/B testing. Rather, the argument uncovers the futility of testing small changes.So, if A/B testing is not the culprit, is the real issue the local minima? No, even the theory of discounting local minima is flawed. The image above shows you a very simple one-dimensional fitness landscape. You can imagine the x-axis as the background color and the y-axis as the bounce rate. Jason’s argument goes something like this: if you tested dozens of shades of blue, you might decrease your bounce rate, but if you tried something completely different (such as a yellow), you might achieve the absolute lowest bounce rate possible on your page.There are two problems with this argument…1. You Never Know for Sure Whether You’ve Found the Global Minimum (or Maximum)The global minimum (or absolute best) exists only in theory. Let’s continue with the example of an extreme yellow background giving you the global minima (in the bounce rate). Upon further testing, what if you found that no background color at all gave you a lower bounce rate? Or better yet, that a background full of lolcat images gave you an even lower bounce rate? The point is, unless you have reduced the bounce rate to 0% (or the conversion rate to 100%), you can never be confident that you have indeed achieved the global optimum.There is another way to determine whether you have found the global optimum: by exhausting all possibilities. Theoretically, if your page didn’t contain anything other than background color (and you couldn’t even add the background image because, well, your boss hates it), then you could cycle through all background colors available and see which one gave you the lowest bounce rate. In exhausting all possibilities, the color that gives you the lowest bounce rate should be the one that is absolutely the best. This brings us to the second point…2. It’s Not Just About the Background Color, My FriendWhen optimizing a Web page, you can vary literally hundreds or thousands of variables (background color being just one of them). Headline, copy, layout, page length, video, text color and images are just a few such variables. Your goal for the page (in terms of conversion or bounce rate) is determined by all of these variables. This means that the fitness landscape (as seen in the images above) is not one-dimensional and never as simple as it appears. In reality, it is multi-dimensional, with a ton of variables affecting the minima and maxima:Again, imagine the peaks as your conversion rate (or bounce rate) and the different dimensions as the variables on your page (only two are here, but in reality there are hundreds). Unlike a one-dimensional case, exhausting all possibilities in a real-world scenario (i.e. in conversion optimization) is impossible. So, you are never guaranteed to have found the global maxima (or minima). Lesson to be learned: embrace local minima.Argument #2: A/B Tests Trivial ChangesRand Fishkin of SEOMoz, posted an article titled Don’t Fall Into the Trap of A/B Testing Minutiae in which he reiterates Jason’s argument to not waste time testing small elements on a page (headline, text, etc.). His main argument is that getting to the local maxima (by testing trivial changes) takes up too much energy and time to make it worthwhile. See the image below, reproduced from his blog but modified a little to make the point:Large view.The first point to make is that the opportunity cost is not the time required to run the test (which is weeks) but rather the time needed to set up the test (which is minutes). Once you have set up the test, it is pretty much automated, so you risk only the time spent setting it up. If an investment of 15 minutes to set up a button-color test ultimately yields a 1.5% improvement in your conversion rate, what’s wrong with that?Many A/B testing tools (including Visual Website Optimizer—disclaimer: my start-up) make setting up small tests a no-brainer. They also monitor your test in the background, so if it isn’t a winner, it is automatically paused. What’s the risk then of doing such trivial tests? I see only the upside: increased sales and conversions.To make his point, Rand gives the example of a recent Basecamp home page redesign, by which Basecamp managed to increase its conversion rate by 14%. Can you imagine the kind of effort that went into such a redesign (compared to a button-color test)? In fact, because the fitness landscape is multi-dimensional (and very complicated), a total redesign has a much higher probability of performing worse. A complex design can go wrong in many more ways than a simple button color can. Because we never hear of case studies of redesigns gone wrong (hello survivorship bias), we shouldn’t conclude that testing radical changes is a better approach than testing minutiae (especially because radical changes require a huge investment in effort and time compared to small red vs. blue tests).With the local minima (or maxima), you at least know for sure that you are increasing your conversion rate, which leads directly to increased profit. This isn’t to say that we should give up on our hunt to achieve the global optimum. Global optimum is like world peace: incredibly hard to achieve, but we have to keep moving in that direction. Lesson to be learned: the ideal strategy is a mix of both small (red vs. blue) tests and radical redesign tests. By jumping across the mountains in the conversion rate fitness landscape, you ensure that you are constantly seeking better conversion rates.Argument #3: A/B Testing Stifles CreativityJeff Atwood compares the movie Groundhog Day to (surprise, surprise) A/B testing and concludes that because the protagonist failed in the movie, A/B testing must also fail. Stripped of all (non-)comparisons, Jeff suggests that A/B testing lacks empathy and stifles creativity. He goes on to cite a tweet by Nathan Bowers:A/B testing is like sandpaper. You can use it to smooth out details, but you can’t actually create anything with it.Whoever claimed that A/B testing is good for creating anything? Creation happens in the mind, not in a tool. The same flawed reasoning could be applied to a paint brush:A paint brush is like a stick with some fur. You can use it to poke your cat, but you can’t really create anything with it.A/B testing, like a paint brush, is a tool, and like all tools, it has its properties and limitations. It doesn’t dictate what you can test; hence, it doesn’t limit your creativity. A/B testing or not, you can apply the full range of your creativity and empathy to coming up with a new design for your website. It is up to you whether to go with your gut and implement it on the website immediately or to take a more scientific approach and determine whether the new design converts better than the existing one. Lesson learned: A/B testing is a tool, not a guidebook for design.SummaryTo reiterate the lessons learned from the three arguments above:Because you can never achieve the global minima, embrace the local minima. Testing trivial changes takes a few minutes, but the potential outcome is far greater than the cost of those minutes.Constantly explore the best ways to increase your conversion rate by performing both trivial tests and radical redesign tests at regular intervals.A/B testing is a tool and does not kill your imagination (in fact, you need your imagination most when designing variations).Lastly, don’t feel guilty about performing A/B testing.(al)© Paras Chopra for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

  jQuery plug-ins provide an excellent way to save time and streamline development, allowing programmers to avoid having to build every component from scratch. But plug-ins are also a wild card that introduce an element of uncertainty into any code base. A good plug-in saves countless development hours; a bad plug-in leads to bug fixes that take longer than actually building the component from scratch.Fortunately, one usually has a number of different plug-ins to choose from. But even if you have only one, figure out whether it’s worth using at all. The last thing you want to do is introduce bad code into your code base.[Offtopic: by the way, did you already get your copy of the Smashing Book?]Do You Need A Plug-In At All?The first step is to figure out whether you even need a plug-in. If you don’t, you’ll save yourself both file size and time.1. Would Writing It Yourself Be Better?If the functionality is simple enough, you could consider writing it yourself. jQuery plug-ins often come bundled with a wide variety of features, which might be overkill for your situation. In these cases, writing any simple functionality by hand often makes more sense. Of course, the benefits have to be weighed against the amount of work involved.For example, jQuery UI’s accordion is great if you need advanced functionality, but it might be overkill if you just need panels that open and close. If you don’t already use jQuery UI elsewhere on your website, consider instead the native jQuery slideToggle() or animate().2. Is It Similar to a Plug-In You’re Already Using?After discovering that a particular plug-in doesn’t handle everything you need, finding another plug-in to cover loose ends might be tempting. But including two similar plug-ins in the same app is a sure path to bloated JavaScript.Can you find a single plug-in that covers everything you need? If not, can you extend one of the plug-ins you have to cover everything you need? Again, in deciding whether to extend a plug-in, weigh the benefits against the development time involved.For example, jQuery lightbox is a nice way to enable pop-up photos in a gallery, and simpleModal is a great way to display modal messages to users. But why would you use both on the same website? You could easily extend one to cover both uses. Better yet, find one plug-in that covers everything, such as Colorbox.3. Do You Even Need JavaScript?In some situations, JavaScript isn’t needed at all. CSS pseudo-selectors such as :hover and CSS3 transitions can cover a variety of dynamic functionality much faster than a comparable JavaScript solution. Also, many plug-ins apply only styling; doing this with mark-up and CSS might make more sense.For example, plug-ins such as jQuery Tooltip are indispensable if you have dynamic content that requires well-placed tooltips. But if you use tooltips in only a few select locations, using pure CSS is better (see this example). You can take static tooltips a step further by animating the effect using a CSS3 transition, but bear in mind that the animation will work only in certain browsers.Avoid Red FlagsWhen reviewing any plug-in, a number of warning signs will indicate poor quality. Here, we’ll look at all aspects of plug-ins, from the JavaScript to the CSS to the mark-up. We’ll even consider how plug-ins are released. None of these red flags alone should eliminate any plug-in from consideration. You get what you pay for, and because you’re probably paying nothing, you should be willing to cut any one a bit of slack.If you’re fortunate enough to have more than one option, these warning signs could help you narrow down your choice. But even if you have only one option, be prepared to forgo it if you see too many red flags. Save yourself the headache ahead of time.4. Weird Option or Argument SyntaxAfter using jQuery for a while, developers get a sense of how most functions accept arguments. If a plug-in developer uses unusual syntax, it stands to reason that they don’t have much jQuery or JavaScript experience.Some plug-ins accept a jQuery object as an argument but don’t allow chaining from that object; for example, $.myPlugin( $('a') ); but not $('a').myPlugin(); This is a big red flag.A green flag would be a plug-in in this format…$('.my-selector').myPlugin({ opt1 : 75, opt2 : 'asdf' });… that also accepts…$.myPlugin({ opt1 : 75, opt2 : 'asdf' }, $('.my-selector'));5. Little to No DocumentationWithout documentation, a plug-in can be very difficult to use, because that is the first place you look for answers to your questions. Documentation comes in a variety of formats; proper documentation is best, but well-commented code can work just as well. If documentation doesn’t exist or is just a blog post with a quick example, then you might want to consider other options.Good documentation shows that the plug-in creator cares about users like you. It also shows that they have dug into other plug-ins enough to know the value of good documentation.6. Poor History of SupportLack of support indicates that finding help will be difficult when issues arise. More tellingly, it indicates that the plug-in has not been updated in a while. One advantage of open-source software is all of the eye-balls that are debugging and improving it. If the author never speaks to these people, the plug-in won’t grow.When was the last time the plug-in you’re considering was updated? When was the last time a support request was answered? While not all plug-ins need as robust a support system as the jQuery plug-ins website, be wary of plug-ins that have never been modified.A documented history of support, in which the author has responded to both bug and enhancement requests, is a green flag. A support forum further indicates that the plug-in is well supported, if not by the author then at least by the community.7. No Minified VersionThough a fairly minor red flag, if the plug-in’s creator doesn’t provide a minified version along with the source code, then they may not be overly concerned with performance. Sure, you could minify it yourself, but this red flag isn’t about wasted time: it’s about the possibility that the plug-in contains far worse performance issues.On the other hand, providing a minified, packed and gZipped version in the download package is an indication that the author cares about JavaScript performance.8. Strange Mark-Up RequirementsIf a plug-in requires mark-up, then the mark-up should be of high quality. It should make semantic sense and be flexible enough for your purposes. Besides indicating poor front-end skills, strange mark-up makes integration more difficult. A good plug-in plugs into just about any mark-up you use; a bad plug-in makes you jump through hoops.In certain situations, more rigid mark-up is needed, so be prepared to judge this on a sliding scale. Basically, the more specific the functionality, the more specific the mark-up needed. Completely flexible mark-up that descends naturally from any jQuery selector is the easiest to integrate.9. Excessive CSSMany jQuery plug-ins come packaged with CSS, and the quality of the style sheets is just as important as the JavaScript. An excessive number of styles is a sure sign of bad CSS. But what constitutes “excessive” depends on the purpose of the plug-in. Something very display-heavy, such as a lightbox or UI plug-in, will need more CSS than something that drives a simple animation.Good CSS styles a plug-in’s content effectively while allowing you to easily modify the styles to fit your theme.10. No One Else Uses ItWith the sheer volume of jQuery users, most decent plug-ins will probably have something written about them, even if it’s a “50 jQuery [fill in the blank]” post. Do a simple Google search for the plug-in. If you get very few results, you might want to consider another option, unless the plug-in is brand new or you can verifiy that it is written by a professional.Posts on prominent blogs are great, and posts by prominent jQuery programmers are even better.Final AssessmentAfter you’ve given the plug-in the third degree, the only thing left to do is plug it in and test how well it performs.11. Plug It In and SeeProbably the best way to test a plug-in is to simply plug it on the development server and see the results. First, does it break anything? Make sure to look at JavaScript in the surrounding areas. If the plug-in includes a style sheet, look for layout and styling errors on any page that applies the style sheet.Additionally, how does the plug-in perform? If it runs slowly or the page lags considerably when loading, it might be important to consider other options.12. Benchmarking With JSPerfTo take your performance review to the next level, run a benchmark test using JSPerf. Benchmarking basically runs a set of operations a number of times, and then returns an average of how long it took to execute. JSPerf provides an easy way to test how quickly a plug-in runs. This can be a great way to pick a winner between two seemingly identical plug-ins. An example of a performance test run in jsPerf.13. Cross-Browser TestingIf a plug-in comes with a lot of CSS, make sure to test the styling in all of the browsers that you want to support. Bear in mind that CSS can be drawn from external style sheets or from within the JavaScript itself.Even if the plug-in doesn’t have any styling, check for JavaScript errors across browsers anyway (at least in the earliest version of IE that you support). jQuery’s core handles most cross-browser issues, but plug-ins invariably use some amount of pure JavaScript, which tends to break in older browsers.14. Unit TestingFinally, you may want to consider taking cross-browser testing even further with unit tests. Unit testing provides a simple way to test individual components of a plug-in in any browser or platform you want to support. If the plug-in’s author has included unit tests in their release, you can bet that all components of the plug-in will work across browsers and platforms.Unfortunately, very few plug-ins include unit test data, but that doesn’t mean you can’t perform your own test using the QUnit plug-in.With minimal set-up, you can test whether the plug-in methods return the desired results. If any test fails, don’t waste your time with the plug-in. In most cases, performing your own unit tests is overkill, but QUnit helps you determine the quality of a plug-in when it really counts. For more information on how to use QUnit, see this tutorial An example of a unit test run in QUnit.ConclusionWhen assessing the quality of a jQuery plug-in, look at all levels of the code. Is the JavaScript optimized and error-free? Is the CSS tuned and effective? Does the mark-up make semantic sense and have the flexibility you need? These questions all lead to the most important question: will this plug-in be easy to use?jQuery core has been optimized and bug-checked not only by the core team but by the entire jQuery community. While holding jQuery plug-ins to the same standard would be unfair, they should stand up to at least some of that same scrutiny.Related PostsYou may be interested in the following related posts:Commonly Confused Bits Of jQuerySpicing Up Your Website With jQuery GoodnessjQuery and JavaScript Coding: Examples and Best Practiceshttp://www.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/(al)© Jon Raasch for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Coding, javascript, jquery

  What do corporate websites have in common with other people’s children? Three things: they have their charm, like finger-paintings on the refrigerator; they can be useful, if infrequently; they are usually admired only by the people who created them.While designers know that a user’s experience on a website has a large impact on the way that customer will interact with them, impressing that concept on the corporate establishment has taken a very long time. Trends in design are making their way into corporate web, albeit slowly; with patience and a little luck, businesses will soon start to consider carefully coded and appropriately functional design as important as their mission statement and recent sustainability reports.One unfortunate fact is evident above all else: despite having plenty of money at their disposal, many corporations are lost in sterile MS Word-esque designs that are more stagnant than a museum exhibit… though at least museums have dinosaurs and mummies and stuff. Here’s hoping we all will get new corporate clients soon.Below, we present some interesting corporate websites, although the insight they offer may not be immediately apparent. This review is not about aesthetics or visual appeal, but rather about the design solutions the sites exhibit. In fact, corporate websites aren’t as visually arresting as you might think, so if the appeal isn’t immediately apparent in the previews below, take a moment to visit and interact with each of them.[Offtopic: by the way, did you already get your copy of the Smashing Book?]Beautiful Corporate WebsitesLevi Strauss & Co With its website, Levis demonstrates that it has not only a strong flair for style and interactivity, but a rich sense of history. Hover over or click the photographs to see some of the company’s defining moments; ever known for its sense of identity, Levis draws you into its past, present and future, excellently breaking through to customers and inviting them to stay.McDonald’s By simplifying and softening the navigation, McDonald’s opens the entire screen up to use as canvas for their product. Harmonious colors in the typography complement the food (and exploit the visual association with hamburgers), while the vivid photography does not obscure surrounding elements.Starbucks Gentle colors and careful hierarchy of elements aside, Starbucks’ strength is in the details. The navigation exhibits an attention to hierarchy not often seen on corporate websites, while offering alternative destination links, should you find yourself in the wrong section. Such consideration for the user would be a welcome trend in design going into 2011.Sony You’ll see that this is a link to Sony Canada’s website. While the navigation and theme is the same as its American counterpart, the experience here is different: here you can see short films in which people relate their experiences of how Sony technology has enriched their lives. Best of all, a floating meter lets you sort stories into categories, giving you control of the content. Brilliantly executed.The Ones You Would ExpectAdidas Few websites employ a grid design that is at once so rigid and flexible. Individual modules expand and contract to allow for dynamic exploration—a lot of fun, particularly because the website has so many parts to explore. The only thing to note is that images do not obviously reflects the content they open to display, necessitating the standard top-menu — an important point in usability.Citroen While the technique of using tiny images to fill a shape has been done a million ways, Citroen takes an old technique to the next level. Draw your cursor across the world to see the photos dance around it, beckoning you to select a region. An excellent use of a landing page, effectively drawing in users without information inundation.Fender Guitars While you may need to be a guitar player to fully appreciate the beautiful lines and tones of Fender products, you need only a pair of eyes to appreciate the simplicity and functionality of Fender’s website. Unobtrusive navigation at the top and hot links lower down make way for a large stage on which Fender can showcase the stars of its website: its beautiful instruments.Heinz One of the most recognizable brands in the world, Heinz has intelligently focused its website on its consumers. Rotate the globe by clicking on photos to see simple recipes from around the world. A design brilliantly suited to users of any skill level, Heinz has found a new means to engage their customers and entice them to visit more.Prologue Films Any company that designs opening credits and effects for movies needs a keen aesthetic sense, and Prologue Films’ visual dynamic is evident on its website. A clean grid with gray tones puts the company’s custom type and effects (an impressive collection) front and center, the same technique made famous by artists and photographers. Using a pop-up window for the content, though, is ill-advised.Rolex The beauty of this website is in Rolex’ masterful attention to detail. With the gorgeous products on display, the eye almost misses the clever tricks contained therein, such as the clock face that adjusts to your time zone. The intuitive user experience reinforces the notion that great design blends together. When it works right, it’s seamless.Steinway & Sons Lucky for us, Steinway invests as much effort into its website as it does into its pianos. Elegant type and warm subtle imagery grace this design and project an image of quality, undoubtedly the intended effect.The Ones You Should Have Thought OfAflac While a blue and white palette is nothing new, Aflac has mastered the use of subtle gradients to enhance type. Smartly assembled, this site is intuitive and easily digestible. The clever part is the horizontal scrolling frame, a visual hook aptly used here to display customer testimonials.American Standard A gorgeous website; American Standard exemplifies grid design, employing the majority of frame as a news scroller. Intelligent use of color, elegant type and thoughtful spacing make this website particularly easy on the eyes.Avery Dennison At first glance, this might look like the website of any old manufacturer of office supplies. At second glance, though, brilliant little touches leap out:: the subtle grid, the attention to readability, the side-scrolling frame that harmonizes type, color and imagery. Oddly dissonant, the side and top navigations make this website looks almost as if it were a composite of different designs over time, a curiosity.Con Edison While the Con Edison website doesn’t have much to look at, the section for the annual report has been capably executed. Great attention to space, clean type and subtle movement are all used to great effect in this section where Con Edison addresses its corporate responsibility.Grow Interactive Most interactive firms don’t have exciting websites, which makes Grow stand out all the more. Grow demonstrates an expert use of type and illustration, moving your eye in perfect circles over the page, and nuances like the small interactive animals along the footer make it stand out among its peers.PGI (formerly Premiere Global) Here is another rare instance of a Canadian version surpassing its regional siblings. A playful take on the boxed blog/corporate theme, the website for PGI puts an interactive panel into the fold, an attractive way to draw users further into the website. The layout and color elements are evidence of authentic design acumen.Rohm and Haas This Fortune 500 company knows how to engage visitors online, with interactive features coming from every angle. The innovation in its products is reflected in the playfulness of the website, which encourages users to explore. Careful, effective use of otherwise familiar textures and themes support an engaging concept, to good effect.Society for Environmental Graphic Design While the inclusion of an organization of graphic designers in this showcase is no surprise, SEGD shines in its presentation of simple yet powerful elements. As any designer can attest, bold colorful shapes can easily run a design off course, but that isn’t the case here. SEGD has married vivid color with effective usability, creating a website that is smooth and wonderfully user-friendly.Virb Recently rebranded and redesigned, Virb demonstrates a capable grasp of visual elements even in this placeholder page: good typography, ample white space, soft shapes and forms — akin more to social media than standard corporate toadery, excellently indicative of the target demographic.The Ones You Might Not Know AboutAcro Media A Web development firm that knows exactly when to stick to the grid and when to break boundaries. The most impressive parts of this website are the way certain elements react to hovering, such as the company name in yellow at the top left. Mousing over it flips the logo around to display a toll-free number. Clever.AgencyNet Interactive The spirit of AgencyNet is clearly the team of creatives behind its work. Showing the team at work (and play) behind the scenes in the office is refreshing, well executed and a great way to engage viewers to learn about the company.AmoebaCorp A small creative firm, AmoebaCorp shows expert use of type on its website. The type establishes a strong hierarchy, enabling the content and navigation to coexist on the left without confusing the user about functionality.Imaginary Forces Less is more with Imaginary Forces, which displays its brilliant work as prominently as possible by cluttering the screen as little as possible. Even without the showcased work, the website would stand out: take away the grand images, and you’d still have a clever arrangement of type and navigation, which is more than can be said of most websites.Kurylowicz & Associates This Polish architecture firm has produced a website that bleeds inspiration from every pixel. Elegant in its use of gray tones, this website combines line, shape and space in a way no other website does. Perhaps it took an engineer to think abstractly enough to design with such abandon, but the result is brilliance online, from start to finish.Vancouver Convention Centre Aside from the harmonious colors and subtle grid that frames the content, the Vancouver Convention Centre succeeds by going the extra mile to make its website visitors feel local: the “Cheers!” factor in action. Not many websites impart a sense of belonging with their welcome; that this one does makes a strong case for using heart as a design tool as much as shape, color and texture.What Have We Learned Today, Bobby?Finding beautiful corporate websites proved to be quite a challenge, and we had to make a number of unusual choices along the way. We sought regional versions of international websites, for instance, because multi-national companies present a number of differences among their sister websites. Bizarrely, did you know that many Fortune 500 companies don’t even have websites? Or worse, have non-working ones?Admittedly, the word “corporate” is pretty loose in definition here. For the sake of impartiality, we did not discriminate by industry or field. We were more interested in collecting websites that employ interesting techniques. Because innovative and fresh stand out on the Web whatever the industry, putting aside traditional definitions is crucial.For further reading on corporate websites and design, you may be interested in Corporate Blog Design: Trends and Examples, published August 2009.Would you like to see more similar showcases on SM? Would you like to see more similar showcases on Smashing Magazine?customer surveys (al)© Bobby Foley for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: showcases

  Today we are glad to release a yet another freebie: Polaroid Magento Theme, a professional design skin for the shops powered by the popular open-source ecommerce web application Magento. The theme was designed by eCommerce-Themes and released for Smashing Magazine and its readers. As usual, the theme is absolutely free to use in private and commerical projects.Download the theme for free!The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.live demolarge preview (.png)installation guide and documentationdownload the .zip-package (zip, 1.1 Mb)release on the developer’s siteFeaturesThe Polaroid theme includes the following features:the Polaroid effect is made with CSS3. The product grid displays products in random orientations.Product zoom: the category page was spiced up by adding a zoom functionality to the product grid. When you mouse over a product, it zooms in to show the product in more details.The .zip-package also contains additional modules “Best Sellers”, “Features Products”, “New Products”, and “Multi Shipping”.Home (large preview)Category (large preview)Behind the designAs always, here are some insights from the designers:We wanted to go beyond the boundaries of Magento and break the usual design patterns. We really wanted to try something new, add rich CSS3 features to the Magento theme and experiment a bit with its different features. We are very pleased to share this theme with the community, especially with Smashing Magazine readers.Thank you, guys. We appreciate your work and your good intentions.[Offtopic: by the way, did you already get your copy of the Smashing Book?]Related PostsYou may be interested in the following related posts:HelloWired: A Free Magento ThemeSigyn SM: A Free Magento Theme25 Magento Templates For Your E-Commerce Business© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Freebies, magento

  Product photography could well be the single most important design aspect of any e-commerce website. Without the ability to touch, hold, smell, taste or otherwise handle the products they are interested in, potential customers have only images to interact with. Ultimately, the softer, tastier, flashier and more attractive your products look to shoppers, the more confident they’ll feel about purchasing from you and the better your conversion rate will be.While any product can look great in a photo (sometimes deceptively so), keep in mind that your images should match your website’s overall aesthetic and your company’s image. Let’s start with a few great examples of how online retailers have incorporated high-quality product photos onto their websites. In this article, we will focus on images of actual items, rather than models, events or landscapes.[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]Examples Of Beautiful Product PhotographyUncrate Uncrate is probably the best-looking men’s shopping blog, and a lot of the credit goes to the product photos in its posts. One of the criteria for its blog posts seems to be for product photos to be incredibly well shot. This is a great place to get inspired for your own product photography project.Ties.com Ties.com has years of experience with dress-tie photography and has improved the quality of its photos over the years. Now it uses a lightbox effect to offer close-ups of its ties. The layout of the website is similar to that of Amazon. As with any website of this nature, super-clear photos are essential to compensate for the customer’s inability to feel the ties.Made.com Turning to furniture, UK website Made.com does a great job of showing its products from multiple angles and perspectives without cluttering the website or making the images feel redundant. Its lamps, for example, can be viewed up close or at a distance within the same frame, while its tables and desks can be viewed from both eye level and low angles. Again, the selective use of color throughout the website directs attention to the products themselves, while giving the overall design a sleek minimalist feel.Harry Winston High-end jewelry website Harry Winston emphasizes the brilliancy and luxury of its products by integrating them in a relatively stripped-down website. The sharp, vibrant images of colored gemstones and sparkling crystals command the viewer’s attention on every page, without overpowering the other elements of the design. The brilliant reds, greens and oranges of these products contrast with the neutral black, white and gray color scheme, while complementing the refined cursive and rolling script scattered throughout the website.Louis Vuitton Another up-market website, Louis Vuitton also uses wonderful high-res product shots and zooms for its non-clothing items, such as calendars and wallets. While this website predictably has numerous photos of models posing with the products in lifestyle and fashion vignettes, it also does an excellent job of emphasizing the craftsmanship and quality of its items.Moben Kitchen designer Moben has a much busier website, using pictures and videos of its products in various locations. The photos here show potential customers the innovative design and style of these products in a unified setting, while still offering detailed shots of individual items. This is a great strategy for e-commerce companies that sell large products or that sell services that are difficult to visualize.Weber Moving out of the kitchen and into the backyard, Weber, a well-known maker of grilling and other cooking equipment, has a fine product photography area on its website. The website itself is pretty basic, as you might expect, without much in the way of attractive text or icons, but the sharp images and high-quality close-ups add a lot of visual appeal. If nothing else, this is a good example of how good images can help a website overcome a mediocre design.Bang & Olufsen Turning to a website that at first glance seems a bit less inviting, audio-video manufacturer Bang & Olufsen opts for a harder, more architectural aesthetic than some of the other websites we’ve looked at. While there is plenty of black, gray and white throughout, this website is far from cold and sterile, thanks to the side-sweeping product photos, which are bright but do not compromise the futuristic feel of the design. The pages of Bang & Olufsen’s collection have another nice touch: product thumbnails glow when you hover over them.Leica As you might expect from one of the world’s biggest names in photography and imaging technology, Leica has some high-quality images, especially of its camera equipment. You won’t find a ton of photos here, but in keeping with the brand’s no-frills, no-nonsense approach, the pictures you do see are high-res and sharp, a perfect example of how to do more with less.Victorinox Another brand known for precision equipment, Victorinox has an impressive range of visual content on its website, especially in the product area. The sliding photo gallery in the “Timepiece” section, for example, captures both the mechanical and aesthetic beauty of the brand’s watches: you can really imagine how it would feel to hold and wear the watch, while still being able to see the complexity of its internals. The website is also notable for its great examples of selective focusing and dramatic lighting, which really make the products eye-catching.CuffLinks.com CuffLinks.com clearly puts effort into photographing its vast selection of cufflinks. It offers customers a good view of its cufflinks from all angles. It also shows the packaging or box that the cufflinks will ship in, giving us a well-rounded impression. Fortunately for this company, the size and inflexibility of cuff links make them a relatively easy product to photograph. Take a look at their many other products and the different angles the shots have been taken from.Ties ’n’ Cuffs Ties ’n’ Cuffs is another e-commerce store with a large selection of cufflinks, ties and other accessories. Like CuffLinks.com, it offers a handful of photos for each product. But Ties ’n’ Cuffs lets customers also zoom into its cufflinks, giving a super-clear picture of product details that one might miss in a wide shot and showing how the crystals reflect the light. Browse around this website to see how they’ve implemented their zoom function for many different products.Chocomize Chocomize lets chocolate lovers make their own custom chocolate bars by allowing them to select from a variety of ingredients. Here is a great example of using photos for products that offer a high degree of customization, without bogging down viewers with too many choices and images. The pictures on Chocomize—bright, glossy piles of candy, nuts, berries and decorations that can be added to a milk, dark or white chocolate base—are relatively uniform in size and shape yet distinctive enough to be unique and noticeable. It also has detailed photos of each ingredient.Threadless.com The t-shirt giant Threadless.com has a particular culture, and it has done a great job of keeping that culture intact with its photos, while still keeping the product itself front and center. Check out the many creative ways that it displays its t-shirts.Designbyhumans.com Another great t-shirt company. It has a super-clean website and keeps the product well in focus, despite the human models (which can sometimes distract from the product).Apple While it sounds cliché, the product photos at Apple would make anyone want to purchase an iPad or iPhone. With a limited number of images and a simple twistable 360-degree viewing mode, the designers behind this website visually sum up Apple’s mantra of simplicity and fun.Four Steps Of Product Photography1. Prepare ProductTo take quality photographs, the complexity and time required will depend greatly on the type of product you’re shooting. Some of the easiest products to photograph are solid objects such as cups and toys; you may just have to give them a good polish before shooting.Clothing, textiles and other items that can bend, stretch and wrinkle are much harder to photograph and could require hours of ironing and arranging to get a perfect result. Details, like whether a shirt collar is straight, will determine whether the photographs look like they were shot in a serious studio or by an amateur with a point-and-shoot camera.Whatever the product, inspect it carefully for tears, stains, chips and other imperfections before beginning.2. LightTo get a great-looking photo, lighting is crucial. Fortunately, with many products, you don’t need much equipment to get a well-lit balanced exposure. For objects the size of a digital camera or smaller, you can use an EZcube light tent with two small 30-watt bulbs on either side. For larger items, such as clothing, two 60-watt soft boxes on either side of the product should suffice. Also consider using a light reflector to get rid of any shadows and obvious highlights.3. Set Your CameraWatch out for noticeable light reflections on shiny surfaces. Even though most product photos look very staged, you don’t want yours to look too artificial.Obviously, you’ll need a camera to take pictures, so make sure you have one. It doesn’t have to be the best or most expensive on the market, but it should at least have manual focus and shutter and aperture controls. These are all standard on most SLR cameras.Once you’ve arranged the product and lighting equipment, take a few test shots until you get an exposure that isn’t too bright or too dark. Keep track of the shutter speed and aperture settings of your best photos, and use them again in future to maintain consistency. If you aren’t sure how things like shutter speed, aperture and lens focal length affect images, you might want to do some basic research.If you understand the basics of photography but your photos still don’t look quite right, don’t worry, because you may have to change several in-camera settings before getting the kind of shots you want.If your pictures look soft or don’t enlarge well, make sure the ISO setting on your camera is as low as possible. The ISO setting affects the light sensitivity of a camera’s photo sensor. By setting yours to 100 or 200, you’ll get a higher-resolution shot with less grain and pixellation. While you’re at it, change the camera’s image size to the highest possible setting. Most cameras default to a medium-sized resolution (around 1500 x 850 pixels).Next, make sure the white balance is set to handle the kind of light you’re working in. Most cameras have modes for incandescent, fluorescent, direct sunlight and cloudy environments, and you should adjust your camera’s white balance according to these different conditions. If the white balance controls are off, your images might either look too bright or have a sickly yellow cast, especially if your product is white.Color control settings are important to consider as well. Most digital cameras allow you to select several degrees of color saturation, ranging from muted to normal to vibrant. If your product is already colorful (flowers, for example), a less saturated setting would probably work better. This is especially true with red, which many digital cameras (even high-end ones) have difficulty processing.Finally, make sure the image format is appropriate. If you’re just putting the photos online, high-resolution JPEGs are probably fine. RAW files, on the other hand, carry more data because they aren’t compressed like JPEG or TIFF files, and they carry fewer digital artifacts; but they take up more space and require special codices and converters to be viewed and edited. Some cameras have a “RAW + high-res JPEG” setting, which gives you both compressed and uncompressed versions of an image. Do a little research on your camera when deciding which format to use, because some models are automatically set to give a softer focus in JPEG mode.4. Edit the PhotosThis is the final and perhaps most important step of product photography. This is when you really take your photos to the next level and make them pop. If you’ve gotten the lighting right and your camera properly configured, then you are well on your way to great photos. Factors such as unwanted colors and objects that couldn’t be removed during the shoot, though, will require some adjustment.Surrounding a product in white space is common practice. This makes the photo convenient to use on websites and in catalogs because it won’t clash with other elements. To make a product float freely in white space, you have to remove the background with masking in your photo editing program. As common as it is, it is often done poorly, making an otherwise fine photo look amateurish. Masking properly takes time, especially when you are not working with straight lines. Photoshop CS4 has a great “Refine edge” tool that makes it much easier to correct crooked lines.Many people also use a variety of artistic effects in Photoshop and other bitmap editors to subtly manipulate their photos. One such effect is the soft or selective focus, which, as the name implies, softens a portion of the photo while leaving other areas sharp. This is great for creating the illusion of depth and size, and the trick is often used for pictures of food, jewelry and watches (see the examples above). Depending on your lens, you can get a similar in-camera effect by setting the aperture low and zooming in on the product from a distance.Also, depending on the product and the look you’re aiming for, you could also experiment with the perspective controls in Photoshop. Most people assume this tool is only good for tall buildings and scenes with noticeable vanishing points, but you can also use it to make geometric objects such as tables and desks appear overpowering, especially when photographed from a low angle (see Made.com for examples).Additional TipsBlend Photos With DesignWhen putting together a collection of product photos, ask yourself if the images you’re taking will match the color scheme and aesthetic of your website. The easiest way around such a challenge is to just keep things simple and minimalist.Use a Gray CardA gray card is a middle-gray reference that you can set your camera to for accurate and consistent color rendering, especially on older cameras that have limited controls for white balance and color. A gray card gives a more realistic depiction of your product’s color and reduces the amount of post-exposure color adjustment you have to make later. They can be bought at any photography store and for about $10. Most cameras have a function for taking gray card test photos; read through the owner’s manual carefully.Get a Flexible and Sturdy TripodTaking sharp, consistent and professional product photos is nearly impossible without a good tripod. It can be any regular tripod, but if you are shooting a product on the floor from above, you’ll probably need a horizontal extension: as the name implies, this tool extends horizontally from the head of the tripod so that you can position your camera directly above and parallel to the product itself. This prevents linear distortion, vanishing lines and uneven image depth.The tripod you need will depend on the size of your camera. If you have a heavy-duty SLR with a long horizontal extension, you’ll need a solid tripod to support the weight of the camera and prevent shaking.If you put your tripod in storage, make sure you are able to reset it to the same height and position for your next shoot. Measure the legs of the tripod, and mark with tape where the feet of the tripod should stand on the ground.Use Light ReflectorsAs mentioned, light reflectors give photos an even spread of light and a fresh look. They come in many sizes and shapes. A medium-sized light reflector, one as big as a large pizza, should be more than enough for product photography. Anything bigger is more appropriate for videography or photographs of people.Reflectors come with three different surfaces: silver foliated, gold foliated and white. The gold- and silver-sided reflectors usually reflect the most light, while white reflectors give a softer, warmer glow.Define the Decision-Making ProcessIf your standard of quality is high or you’re working on a team, the lack of a decision-making process can waste a lot of time. Set clear criteria for what you’re looking for, and make sure your workflow allows all parties to follow the criteria without constant interruption.Outsource When AppropriateIf your product is easy to shoot, then outsourcing is a great option. The most important points to discuss with the photographer beforehand are quality and their willingness and ability to contribute to the editing process.The quality of the photos will depend on the time spent editing them. Some photographers don’t want to get involved with this part, feeling that image masking and other such tedious tasks are below them. Cover all your bases before starting with the photographer, otherwise the process could turn out to be more expensive and time-consuming than you expected.Further ResourcesIf you liked this article, then read Smashing Magazine’s recent article How to Use Photos to Sell More Online for another look at photography and e-commerce.Also consider these:An extensive practical guide to photographing various products.A guide to photographing watches, jewelry and other products.Zachary Lowell contributed to this article.(al)© Peter Crawfurd for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: ecommerce, product photography

These sites get back to nature and theme their design around all things outdoors. http://vandelaydesign.com/blog/galleries/inspired-by-nature/

  There are well-known proverbs that imply (or state outright) that beauty is superficial and limited in what it can accomplish. “It’s what’s inside that counts” and “Beauty is only skin deep” are a few simple examples. Because the Web design industry is now flooded with what is evidently a lot of raw talent, and because virtually anyone can create a “beautiful” website, recognizing a truly beautiful website experience is becoming increasingly difficult. What appears beautiful to the eye might in fact be more of a hindrance.In this article, I hope to provide a clear demarcation between what is perceived by most to be beautiful in Web design and what is truly beautiful, along with some guiding principles to help designers today create websites whose beauty is not superficial, but rather improves and enhances the user experience.[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]Gradients, Drop-Shadows, Reflections, Oh My!A lot of things could fall in the category of “beautiful” or “attractive” in the context of Web design. But a number of factors would make such beauty shallow. Is a website more attractive if it has tastefully placed drop-shadows, gradients or reflections? What if it has an eye-pleasing color scheme? What about big over-designed buttons? Could these be standards by which a design would be deemed beautiful?If you’ve been keeping tabs on the Web design industry in the last five years, you’ve probably at some point visited one of the many CSS galleries. Visiting those inspirational showcases is great, and I’m sure we’ve all done it, but we need to be careful not to fall into the copycat syndrome, whereby we prettify our websites for no other reason than to make them CSS gallery-worthy. Mint.com has everything a client could ask for in a “Web 2.0 design”. Does that mean it’s beautiful?The designers, developers and content strategists who planned and executed many of the websites in those galleries did what they did because they felt it would truly benefit the user experience and their clients’ bottom line. The truly beautiful websites and apps in those showcases are not just visually beautiful; they’re usable, accessible and optimized to benefit both the user and website owner.The Dribbble SyndromeWith the recent popularity of Dribbble, the copycat syndrome might be gaining momentum. On Dribbble, a designer reveals a sample of something they’re working on, and then the style of that small snippet starts spreading. The context and strategy underlying it are unknown, yet the style is still viewed as beautiful in and of itself. The designer may have taken hours, days or weeks to arrive at the decisions that informed the design, but now that it’s out in the wild, the snippet becomes nothing more than eye candy. Dribbble shows out-of-context design shots. Is this a bad thing?Of course, the intent of this article is not to blame those who share their designs on Dribbble, nor to blame those who review these designs and offer feedback. But we mustn’t lose sight of the fact that every design decision should have significant reasoning behind it.The Style-Less ComparisonHow do we measure beauty? If a website is difficult to use, then isn’t its beauty without purpose? Look at the comparison in the image shown below. The Nettuts+ logo and navigation bar.I think Nettuts+ is a very nicely designed website. But is the fancy navigation and logo section shown on top more usable than the plain blue and white version below it? Taken at face value, some might argue that the plain version is more usable (if only slightly) than the “beautiful” one. The Facebook home page.While the Facebook home page shown on top might not appear the most beautiful design to many of us, it still contains attractive aesthetic elements (colors, gradient background, styled buttons, etc.). But when most of these minor elements are made plain, does it really affect the usability?If prettiness is really as important as we think, then the current Facebook home page should perform much better than the plain alternative. How do we know, though, that the plain version wouldn’t outperform the adorned version?What Makes A Design Usable?I’m not about to make a case for bringing back blue links on a white background on every website. In fact, as I’ll explain, both Nettuts+ and Facebook may very well qualify as truly beautiful websites. The examples above were more illustrative, and not meant to criticize the designers who worked on them.Rather, I’m encouraging designers to consider two things when adding “beautiful” enhancements to their designs.Responsive and intuitive page elements,Branding and consistency of theme.Focusing on these two things will give every pixel in a design a purpose and will contribute to the website’s overall usability. Let’s consider both of these, with a few simple examples to illustrate their effectiveness.Responsive and Intuitive Page Elements Make a Design UsableIf a design element makes a website feel more friendly or gives subtle hints as to what’s happening, then this adds to its usability. Look at the simple example below from Design Informer:On the Design Informer website, hover over the search box in the top right, and you’ll notice it brightens up. This is not intrusive in any way, and it looks especially elegant in WebKit browsers, because the brightening animates with CSS3.This very simple effect conveys to the user that this is a usable element, and it makes the search box more inviting. It’s a ridiculously simple technique but has a very powerful effect.But just because you can use an animated effect does not mean you should. If, as in the case of Design Informer, the effect makes the UI more intuitive and responsive, then it is justified. This statement by Stuart Thursby sums it up well:If designers think that using HTML5 and CSS3 makes them a better designer just because they use them, then they’re sorely misguided.Include an element only if it accomplishes some usability-related purpose. If the design is not made more usable by a particular technique (whether via CSS3, JavaScript or something else), then the designer should reconsider whether the extra code is worth the effort. Decoration only goes so far and often has an effect opposite to the one intended, so consider yours carefully before including it in your design.Another example of an animation that enhances usability is found on Soh Tanaka’s new website. Look at the screenshot below from this post on his blog:When you hover over any presentation of code on his website, you’ll notice that the block expands to the right (probably via jQuery, so it would work in every browser).Again, a simple effect, but not just eye candy; it has a purpose. In tutorials, HTML code is often too long to fit in the highlighter, so the code either wraps or creates ugly scroll bars. Tanaka’s solution makes the code more inviting readable, and it decreases the likelihood of wrapping or scroll bars.So whether we’re talking about text links that change color on hover, buttons that move when clicked, AJAX that creates subtle yet intuitive effects, we can take a design beyond mere decoration in many ways and truly enhance its usability.Branding Makes a Design UsableIf an element contributes to a website’s overall branding, image or reputation, then it’s safe to say that it contributes to its usability. Properly planned and executed branding is not superficial or decorative. Carefully chosen colors and graphic elements create an inviting atmosphere that leads the user to make easy decisions and helps them interact with elements smoothly and intuitively.Look at the screenshot below from 10k Apart:The laurel wreath in the background and the distinctive illustration immediately distinguish this website as belonging to A List Apart. Consistency in branding contributes to the usability of this ALA microsite and makes it feel inviting and familiar.And then we have the beautiful and intuitive design for Launchlist:This screenshot doesn’t do justice to the website’s look and feel; you’ll have to poke around to really experience it for yourself. The design might appear decorative and superficial at first glance, but it’s not. The elements work together to create a consistent and inviting atmosphere, extending the “launch” theme throughout with subtle animations.Usable Doesn’t Have To Mean UglyMy purpose here was not to tell designers to forget about slickness, sexiness and beauty. This should be obvious from the beautiful examples shown, which certainly qualify as both usable and attractive. No one expects owners of beautiful websites to suddenly drop their enhancements in favor of the Craigslist look just to make them more usable.Rather, this post is just a reminder that eye candy is important, but it isn’t everything, and that for a design to be truly beautiful, it has to be functional, have purpose and contribute in some way to the website’s intuitiveness, usefulness and branding. All of these things contribute to the overall effect of a design.Related PostsIn Defense of Eye CandyResearch proves attractive things work better. How we think cannot be separated from how we feel. The next time a boss, client, or co-worker scoffs at the notion that beauty is an important aspect of interface design, point their peepers here.Looks Matter Because We All Have FeelingsAn article about the importance of aesthetics in web design.Stop Designing Aesthetics, Start Designing EmotionsGradients and colors and contrast are all good, but there’s a more important side to web design that many people overlook most of the time: Designing emotions. A beautiful article on Web Designer Depot.Stop Inspiration Hunting When DesigningThere is definitely a difference between looking at sites for research purposes when beginning a design versus looking at sites just to find some cool stuff you might be able to use. Nice article on Drawar.Web Design? Screw Aesthetics“When I talk about design I try to do more than mention the aesthetic/visual aspect of it, but it seems people tend to focus on that aspect the most. Web design however adds many more elements to the elegant answer that we are so frantically searching for.” Another interesting article on Drawar.(al)© Louis Lazaris for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Design, usability

  Today we are glad to release a yet another freebie: a beautiful Modernist WordPress theme, designed by Rodrigo Galindez and released for Smashing Magazine and its readers. The theme is based on the design ideas of Jan Tschichold, Josef Müller-Brockmann, Dieter Rams, and other modernists. Beautifully built yet transparent, it was designed with a focus on optimal typography in order to better showcase your content: text, images and video.The theme supports widgets, is SEO optimized, has clean and documented code. It is loading very quickly, and has various WordPress 3.0 features. Works in IE 6+ and all versions of Safari/Firefox/Opera. Includes CSS3 enhancements. As usual, the theme is absolutely free to use in private and commerical projects.Download the theme for free!The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.live demolarge preview (.jpg, 0,14 Mb)download the .zip-package (zip, 0,6 Mb)release on the developer’s siteFeaturesThe installation of the theme is very simple. No plugins required, no extra frameworks required. Just download the theme, upload it to your server and activate it to make it work.WordPress 3.0.1 tested. It works with the latest version of WordPress, and also with previous versions.Embraces Social Media. Modernist has links to share each post to Twitter, Facebook, Delicious Digg, and Reddit. No plugins needed, it just works out of the box.Is SEO optimized. Modernist has been carefully handcrafted in order to produce a clean HTML/CSS template. No unnecessary lines, just pure, semantical, bulletproof code that Google loves.Supports widgets. Modernist has a widgetized sidebar, and WordPress’ default widgets are styled. You can also drop your favorite widgets or plugins without needing to touch a single line of code.Has support for threaded comments, navigation for comments, table styles, header styles and definition lists styles.Is flexible and extensible. Change the color scheme to suit your own taste. All the code is well commented. Personalize the theme by adding your own header or your own images in the sidebar. Use font embedding services such as Typekit to serve different fonts and make the typography look unique!Homepage (large preview)Comments (large preview)Comment Form (large preview)Post (large preview)Search Results (large preview)Main NavSectionThank you, Rodrigo Galindez. We appreciate your work and your good intentions.[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]Related PostsYou may be interested in the following related releases:100 Free High Quality WordPress Themes For 201030 New Free High Quality Free FontsFree Full Layered Facebook GUI PSD Kit© Elja Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Freebies, themes, wordpress

  I love it when a good story is broken down so that even the simplest of minds can understand. I’m not the smartest, fastest or most creative person in the world, so I don’t like using a lot of big words or fancy jargon to try and impress you — but I’m learning every day, and that is what pushes me on. Let me cut the small talk and dive right in.The Current StateWhen I look out on the hillside of design, all I see are copies of what great designers have done before us. The landscape has become so congested with cookie-cutter homes that seeing the real people living inside has become hard. It’s like watching that movie Pleasantville, in which everything is black and white and no one knows any better, and yet there are those pursuing something different, something original.My hope is to inspire you to step away from the computer and open your eyes to the world around you. Expand your mind; think beyond the limits of the liquid crystals staring back at you.[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]Getting StartedThe first step in any recovery process is to admit that there’s a problem. Once we’re comfortable admitting that we’ve been copying each other’s style, we can move on. The next step in this design detox, if you will, is to close the laptop, turn off the monitor, put down the iPhone and go find a pen or pencil and some paper. Not so fast with that Moleskine journal! It won’t help you. You understand that Apple and Adobe products don’t do the work for you, and neither will the Moleskine make you a better [fill in your profession]. Only with time, patience and practice will you begin to refine your skills.Don’t worry if you think you can’t draw. I hear that a lot, and I wish people would remove the word “can’t” from their vocabulary. Maybe you’re not good at drawing people but are amazing at drawing monsters, or maybe you’re not good at drawing buildings but are excellent at sketching wireframes. Just because your drawings don’t look like those of people you admire does not mean your drawings are no good.Live in the MomentTime does not stop — shocker, I know. You can’t fight it. Rather, think of it as the Rolling Stones do: time is on my side. Realize that time will make you better. The get-rich-quick approach is a cheap substitute for an investment of time: it might work for a few people, but it never lasts. Save yourself the trouble and commit to the long-term effort. Better yet, take an art history class and learn how long it took the great artists to achieve success. You’ll find that some were not recognized until after they were dead.Pioneers Of the New FrontierSo where do we turn for inspiration? I always look to artists in other media. I’ll mention a few who have set a high standard — one so high that it hasn’t been beat. Still, I believe you have what it takes to run faster, jump higher and think bigger.Leonardo da VinciLeonardo da Vinci was the original Renaissance Man. Not only was he an amazing painter, he was also an extraordinary mathematician, sculptor, anatomist and writer — and those were just a few of his occupations. His career, which left a legacy that is still unsurpassed, is characterized by a passion for discovery and creation. If for no other reason, da Vinci is an inspiration to us because of his fervent passion for learning.M. C. EscherMaurits Cornelis Escher is a great example to us because he pursued his passion and succeeded, even without a degree. M.C. Escher’s artwork — an excellent source of inspiration for modern design — has a great deal to do with mathematics, but he never had formal mathematical training. Those of us building the Web could learn a thing or two from Escher’s work on symmetry and patterns.Norman RockwellNormal Rockwell defined a generation. His depictions of the American lifestyle in the early-20th century are iconic. If Rockwell were alive today, he would definitely be one of the all-stars posting stuff to Dribbble.Closing WordsThere’s nothing like the feeling of accomplishment that comes from doing something you didn’t think you could. Whether you want to build websites, paint a mural, design icons or draw characters, I encourage you to make time for practice and to get away from the computer at least an hour a day. Pick up a book, take a walk, call a friend — do whatever you can to take your mind off technology. In those moments when we quiet our minds, inspiration comes and we can just be ourselves.P.S.Just one last nugget before you leave: don’t let a lack of inspiration overwhelm you or make you feel like less of a person. I know from personal experience that drowning in inspiration makes me feel unsuccessful. And yet when we judge ourselves against our own work, we hinder our growth. We have to find a balance between being inspired and being true to ourselves. That’s what makes the journey so exciting.(al)© Kyle Steed for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

This is a nice twist to the standard menu and navigation collection. These sites all make use of icons in their navigation in one way or another. http://spyrestudios.com/20-great-examples-of-icons-in-navigation-design/

  It’s hard to believe that a year has passed since our last WordPress theme collection, but there you have it — the time has come again. Once a year we feature the most useful and interesting WordPress-themes that we are collecting over months and present them in a nice quick overview. The collections from 2007, 2008 and last year are still useful, but some of the themes are outdated or updated now.Looking back over these previous theme articles, you can clearly see how and why WordPress has rapidly matured into the CMS powerhouse it is today. With all of the features that have been added and improvements made with every new WordPress version and with its ever-increasing popularity among the design and development community, the quality of free themes is evident. Developers are continually pushing WordPress’ boundaries, giving us today’s outstanding free theme collection.Today, we present a fresh collection of useful WordPress themes. Please notice that some themes are a bit older, but they are included because we haven’t featured them last time. This round-up picks up where we left off last year: most themes below were released between June 2009 and August 2010. We’ve also split this collection into the following categories: gallery and portfolio themes, themes for bloggers, e-Commerce WordPress themes, clean themes, magazine-style themes, minimal themes, mobile themes; pre-launch themes; and finally “Themes That Take WordPress Beyond.” [By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]Gallery And Portfolio ThemesCumulus (Free version) (demo)Cumulus is a very clean and calm portfolio theme. It contains a large block for featured projects and images and a nifty blog posts navigation in the sidebar.Imbalance (demo)Free wordpress theme in modern-minimalist style. Imbalance is a very user friendly, jQuery powered theme which looks really well under any browser and OS. Perfectly fits for your blog, online magazine or portfolio websites. It is optimized for high-loads, contains WordPress 3.0 menu support, Twitter widget, jQuery-based gallery and WP Post Thumbnails support.Shaken and Stirred Theme (demo)This theme is perfect for you if you’re in need of a gallery/portfolio website or if you just want a website with a unique grid layout that not many websites have taken full advantage of yet. “Shaken Grid” uses the jQuery Masonry plugin which “arranges elements vertically then horizontally according to a grid.” The result is a gap-less layout even if you have varying post heights.AutoFocus+ (demo)The theme is designed on an 800px, 8 column grid layout that truly allows your images to shine. The theme boasts a sharp typographic approach with a 22px baseline grid, and a Garamond/Helvetica (Times/Arial for you PC users) font stack that’s much easier to read.Fotofolio Landscape (demo)A nice dark WordPress theme with sidebar navigation and jQuery-powered lightbox for images. A good choice for photographers who want to feature their works in an online portfolio.FolioGrid (demo)This theme contains a fluid grid-based layout, jQuery-based transitions and automatically resizing thumbnails. Also, you can choose between various page tamplates, and the theme has a widget-enabled area, too.Mansion (demo)Mansion is a free photoblogger’s theme for WordPress. It features a flexible-width thumbnail grid for both images and photo journal entries. Mansion is perfect for those who want to primarily showcase their photographs and occasionally write blog posts.PhotoView (demo)PhotoView was designed for displaying photos and videos in a simple and clean manner. The theme has an integrated lightbox. Also, a PSD file is included for easy customization.SimpleFolio (demo)SimpleFolio is a portfolio theme that includes a blog and a very extensive option page that allows you to exclude all your portfolio items from the blog page. It also includes a front page slider. It has 2 different widget areas and threaded comments, and also supports paged comments and has 2 different page templates for advanced usage. The control of images is done from the post page.Smashing Multimedia (demo)This theme was designed especially for podcasters, photographers and users who can now easily embed videos and images, rate them and showcase them in their own WordPress-based blog. It has a parent theme and an easily customizable child theme. This WordPress Theme comes with layered PSD source files, a visual help guide and is fully localized ready for you to translate it into your target language.Fullscreen Photo and Multimedia (demo)Fullscreen is a free one-column photography and multimedia theme for WordPress that can be used for portfolios, photoblogs, videoblogs, and virtually anything else where you want your content to be front and center. It provides visual artists a unique way of presenting their latest work online using a minimalist side-scrolling homepage.Brave Zeenat (demo)A clean Portfolio Theme ideal for photographers, artists and designers to showcase their portfolios.Monokrome (demo)This grid-based theme is widget ready and has a Twitter stream and Flickr integration. The column width adapts to the width of the images and the width of the browser viewport.Portfolio WPESP Theme (live demo)Portfolio – WPESP Theme is a “minimalist” Theme based on the idea of portfolio created by DAILYWP. The Theme is a starting point in the creation of portfolios, using WordPress as CMS.Selecta (demo, WordPress 3.0+ compatible)Selecta’s rounded edges and bold, modern color palettes make for a fresh theme that’s best suited to blogs where video will be the main focus. The wider-than-usual frames around thumbnails and videos bring to mind the retro-cool of Polaroid photographs and old home movies.Work-a-holic (demo)Work-a-holic is a free two and three column WordPress theme that focuses mainly on showcasing portfolios for artists, web designers, photographers and illustrators.BlueBubble WordPress Theme (demo)The theme is clean and simple, contains a theme options page, uses post image thumbnail plugin, has 2 widget ready sidebars and uses jQuery/PHP-based contact form with easy customization. Requires WordPress 2.9+.WordPress Themes For BloggersLap of Luxury (demo)This theme uses gold in the logo, and white and black are used as the main colors. The 2-col theme contains a sidebar on the right that allows for a large square ad up top, and splitting into 2 columns below that. Comes fully widgetized. A special feature of this theme is the logo changer.Katana (demo)This theme has a simple layout based on anime or game niche. Theme will be suitable for blogs of such niches. Theme has features like featured post section, post thumbnails, banner ads, adsense, twitter widgets etc. Theme uses custom fonts for various titles. It has an intuitive theme option page which lets you configure the theme.Koi Theme (demo)Koi is a simplified version of N.Design Studio’s theme (2009 redesign). Key features: multi-level dropdown menus, social media buttons, threaded & paged comments, and sidebar widget plus three footer widgets. This theme includes an option page to manage dropdown menus, favicon, footer tracking code, and social media buttons. Requires WordPress 2.9+.Bueno Bueno is a clean, minimalistic design which sophistication in both its typography and structure. It uses a grid-based design, has integrated banner ad management, widgetized sidebar and 7 different color schemes. Also, the theme is packaged wth a .po file for easy theme integration.Notepad Theme (demo)The theme is inspired by the iPhone’s Notes.app. This new theme is widget compatible with threaded comments, social media buttons, and multi-level dropdown menus. It has been tested on WordPress 2.9 with Firefox, Chrome, Safari, and IE7+. It also includes some nice CSS3 enhancement such as rounded corners and drop shadow.Strukture (demo)Peacekeeper (demo)The Seven Five (demo)A minimalist blogger/social theme including several customization and layout options.Simplo (demo)Galaxy (demo)The Galaxy WordPress theme is a two column theme that supports banner ads and the WP-PageNavi plugin. Perfect theme for personal blogs.Aparatus (demo)Zexee (demo)Cyangant Elegant (demo)Obscure (demo)A dark magazine wordpress theme suitable for any site nitche and best fit for community-based sites.MonkeyPr (demo)Designpile (demo)Obscorp (demo)The Side Blog Theme (demo)A free blogging theme with all sorts of customization and content management options.E-Commerce WordPress Themese-Commerce Theme: Kelontong (demo)The theme has a simple layout, clean, professional look, is integrated with WP e-commerce and features a slideshow for products.Dangdoot (e-commerce theme: free version) (demo)Dangdoot is a free e-commerce theme for WordPress and requires the e-Commerce plug-in.AppCloud (e-commerce theme: free version) (demo)AppCloud is another free e-commerce theme for WordPress. (It too requires the e-Commerce plug-in).Clean WordPress ThemesBlissful Blog (demo)The Ideal WebsiteThe Ideal Website is designed to fit Fibonacci’s Golden Section – otherwise known as the divine proportions. These measurements are said to be the most pleasing to the eye, and have been widely used for everything from judging beauty of a face, to the design of bank notes.Un.complicated Theme (demo)The layout is minimalist, clean, and organized into three 320px columns. This theme, are built on Starkers and implements the The Golden Grid. here is a wigetized sidebar, which looks like a regular three column row. I have also integrated twitter within the theme, using javascript. All the user has to do is find this line in the index.php page.Voidy (demo)Voidy is the perfect theme for your great blog. It is clean, clear and beautiful. It is minimalistic two-cloumn theme with the widgets all arranged in the right sidebar. Voidy was designed to make your content stand out and make everything else get out of the way.Clear (demo)Clear is the perfect theme for great authors. It is clean, clear and beautiful. It is minimalistic one-cloumn theme with the widgets all arranged at the bottom. Clear was designed to make your content stand out and make everything else get out of the way.Delicate (demo)Boldy (demo)A free theme that includes support for WordPress 3.0 Menu Management, has in-built slideshows, jQuery-based forms and live form validation as well as a widget for Twitter.Smooth (demo)Inuit Types (starter edition) (demo)Titan Theme (free edition) (demo)YouAre Theme (demo)Simple Organization (demo)Neutra (demo)Neutra is a simple and elegant theme for WordPress. Grid-based with focus on simplicity and typography.The Erudite (demo)A theme for writers who want readers, not visitors, traffic, click-throughs, CPMs or what-have-you. Carefully crafted typography and generous use of whitespace lets your writing shine. Version 2 includes a dark theme option.Magazine-Style ThemesThe ColumnistThe Columnist WordPress theme is inspired by traditional newspaper layouts and the grid structures and typography techniques they employ. It has WordPress thumbnail support, widget support, CSS3 column structure, jQuery animations, custom fields for images and featured latest post area.The Structure Theme (demo)The Structure Theme is a free WordPress theme with a modern minimalist design. There are 4 themes included with the Structure Theme download; a white theme, black theme, two column blog and a single column blog design. The theme was created with a simple and clean aesthetic meant to easily adopt the style of the content added to the site. The Structure Theme is also designed with customization in mind. Meaning, with a little work, the theme can be completely personalized to suit your brand.Aurelius (demo)Tanzaku (demo)The WhatsUp (demo)WPCount (demo)Maimpok (demo)Malleable (demo)Furvious (demo)A nice theme coming with 5 color styles, powerful admin framework and featured posts area.Newspress (demo)Minimal WordPress ThemesModernistReptileWP-Notes (demo)Clear (demo)Satoshi (demo)Ulap Theme (demo)ManifestThe goal with Manifest was to create a clean and streamlined theme that focused on the content and not the distractions. It utilizes a single column, 500 pixel wide layout. No sidebars. No widgets.Miniml Press Theme (demo)Functionalism (demo)LifeStreaming White (demo)Un.complicated (demo)Vostok (demo)Vostok is for those who don’t want attention to be distracted from content. Colors and typography have been carefully chosen to achieve maximum legibility with minimum eye fatigue. Also, code has been written with extreme care for web standards and accessibility.Mini (demo)Mobile Themes For WordPressWordPress Mobile Pack (demo)WordPress Mobile PackThe WordPress Mobile Pack includes the following: a mobile switcher to select themes based on the type of user visiting your website; a selection of mobile themes; extra widgets; device adaptation; and a mobile administration panel to allow users to edit the website or write posts while out and about.WordPress Mobile ThemeThis is a minimalist theme that can be used to target mobile users. The theme works with any mobile phone of any resolution. And with its light weight, it also drastically reduces loading times.MöbiusMöbius is compatible with iPhone (and iPod Touch), Android, BlackBerry, Windows, Palm Pre and Symbian touchscreen mobile phones.News Press MobileThe News Press theme is a simple and elegant solution for creating an iPhone-friendly news, blog or other text-centric WordPress website. It comes complete with all the standard WordPress blog features: search, log-in, categories, tags, archives, photos and more.Carrington MobileCarrington Mobile is an elegant mobile theme that supports advanced touchscreen browsers (iPhone, Android, BlackBerry, Pre) and that is also backwards-compatible with older mobile devices.Pre-Launch WordPress ThemesBEBACKWP (demo)Ice Breaker (demo)Ready2Launch! (demo)WP BlueprintThemes That Take WordPress BeyondGuruQ (demo)GuruQ is a basic theme designed to be used for Q&A websites. Visitors post questions to the guru, and the guru answers via the WordPress admin screen.P2 (Like Twitter in a Box)P2 is a theme for WordPress that transforms a mild-mannered blog into a super-blog, with features like inline comments on the home page, a posting form right on the home page, inline editing of posts and comments, real-time updates (to display new posts and comments without reloading) and much more.Driftwood Contact Manager (demo)Driftwood is a contact manager theme built for WordPress. This easy-to-use theme gives you an effortless way to track interaction with your clients and contacts.Aggregator (demo)Aggregator is a theme that aggregates feeds of any kind in one place and in an attractive format.GTD (private theme for teams to collaborate)MiniCard (demo)The MiniCard theme supports hCard and vCard microformats, it supports a ton of social networks, it can accommodate some portfolio items (optional), and it does much more, all from the dedicated theme configuration page.LiveTwit (demo)WordPress Theme ToolsElastic Theme EditorThe awesome Elastic is a visual theme editor and engine for WordPress. It takes a completely innovative approach to theme development. To get an idea of what it can do, check out this video:Divine (Convert PSD to WordPress) Divine is a Photoshop plug-in that allows you to assign WordPress roles to your main elements (e.g. #footer, #header, etc.). The plug-in then prepares all the files you need. Once you set up FTP access, the tool uploads the theme automatically to your server. Look at this video for insight into how Divine works:WordPress Debug ThemeThe WordPress Debug theme allows you to check early on for any possible issues you might have with your WordPress installation. It is quite simple for now, doing only a few things, but it does them very effectively.Starter And Blank WordPress ThemesStarkers HTML5 WordPress Theme KitStarkers is a bare bones WordPress theme created to act as a starting point for the theme designer… Free of all style, presentational elements, and non-semantic markup, Starkers is the perfect ‘blank slate’ for your projects, as it’s a stripped-back version of the ‘Default’ theme that ships with WordPressWP-ConstructorWordPress Constructor is a many-in-one theme. It contains 6 sidebar variations and three layouts (and you can create new is easy). You can configure colors and fonts. The theme also has post thumbnails (WordPress 2.9+) and navigation menu customization options (WordPress 3.0+).Buddymatic Theme FrameworkBuddymatic is a highly extensible theme framework for WordPress and WordPress MU blogs, including BuddyPress-enabled home and member blogs.ET Starter Theme for WordPressThe ET starter theme lets you easily choose between a one-, two- and three-column layout. It supports the WP-PageNavi, Twitter Tools and Contact Form 7 plug-ins and also includes a built-in jQuery drop-down menu.WordPress Skeleton ThemeThe feature-rich WordPress Skeleton Theme has been developed to speed up and streamline your WordPress development. One of its outstanding out-of-the-box features is CSS support for the iPhone and iPad (both portrait and landscape); simply edit the iPhone.css and iPad.css files.Paintbox CMS (demo)Paintbox CMS is a grid-based CMS theme layered on my actual theme-canvas Paintbox. It comes with a smooth 960 grid layout plus some creative jQuery effects for content loading.BLANKBlank is a theme with all the functionality of a typical WordPress theme but almost none of the styling. The idea is that using this as your base theme is far easier than using one that is already styled.(al)© Paul Andrew for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: themes, wordpress