Author: Design Guru

Modern Version Control With Git

The benefits of using a “version control system” are many. It can improve software quality, facilitate collaboration and even help you become a better developer or designer. In this three-part series, I will introduce you to the increasingly popular Git version control system. I’ll discuss the main benefits and features of Git and finally demonstrate how to integrate it into your workflow. In this article we will cover the basic background information for understanding how  —  and more importantly, why  —  to use Git. Later we will take a closer look at Git’s features, including branching and merging, and discuss how to use it in your own design and development projects. Git: Born Of Necessity Linus Torvalds was unsatisfied: none of the version control systems (VCS) available in 2005 met his requirements. Once the proprietary version control system BitKeeper changed its license agreement, it couldn’t be used to manage the Linux kernel project anymore. An alternative had to be found, one that was distributed, scalable and — above all — fast. The Linux community took action by starting two new projects: Git and Mercurial. Both have their origins in this emergency, and they are among today’s leading distributed version control systems. Git is now used in countless well-known open-source projects: the Linux kernel, jQuery, Ruby on Rails, Symfony, CakePHP, Debian, Fedora, Perl and many more. The large number of tutorials and tools, including...

Read More

What Web Designers Can Learn From Video Games

Games are becoming more Web-like, and the Web is becoming more game-like. If you need proof of this, you have only to look at Yahoo Answers. Random questions are posed, the top answer is chosen, and credibility points are given to the winner. It’s a ranking system that accumulates and unlocks more and more features within the system. It works because of the psychology of achievement and game mechanics and thus encourages interaction. This raises the question, what can a Web designer learn from games, or — more specifically — video games? Good game interfaces have to be highly usable and intuitive, capable of handling a lot of repetitive actions in the fewest clicks possible. They need to be attractive and engaging. They need to be likeable. A good game interface adds to and enhances the user’s experience. In a game, people want the content delivered to them in a way that doesn’t break the fantasy. Any dissonance with the interface will cause an otherwise great game to fail. Even in older games, as in Prince of Persia (displayed above), the limited system capabilities enforced designers to come up with creative and innovative design patterns. With more capabilities available today, we are able to find more advanced design techniques in modern video games. In the same way, website users want their content delivered to them in a way that...

Read More

20 Professional E-Commerce Icons [Freebie]

Quick Summary Today, we are glad to release a set of 20 high quality E-commerce Icons in 64×64px, available in .png-format. This set was designed by Web Icons Set with the purpose to be used in e-commerce websites and has been exclusively released for Smashing Magazine and its readers. The set includes icons such as Empty Basket, Full Basket, Credit Cards, Delivery, Secure Payment, Checklist, Gifts, Shop Open, Shop Closed, Contact, Wallet and...

Read More

Dear Clients, The Web Has Changed. It's Time To Use CSS3 and HTML5 Now.

Whatever you call them — blocks, boxes, areas, regions — we’ve been dividing our Web pages into visible sections for well over a decade. The problem is, we’ve never had the right tools to do so. While our interfaces look all the world like grids, the underlying structure has been cobbled together from numbered headings and unsemantic helper elements; an unbridled stream of content at odds with its own box-like appearance. Because we can make our <div>s look but not behave like sections, the experience for assistive technology (AT) users and data-mining software is quite different from the experience enjoyed by those gifted with sight. Now that HTML5 has finally made sectioning elements available, many of us greet them with great reluctance. Why? Partly, because we’re a community which is deceptively resistant to change, but also because of some perceived discrepancies regarding advice in the specification. In truth, the advice is sound and the algorithm for sectioning is actually easier to use than previous implementations. Some developers are just very married to their old workflow, and they think you should be too. There’s no good reason why. Make no mistake: Sectioning elements help you improve document structure, and they’re in the spec’ to stay. Once and for all, I will be exploring the problems these elements solve, the opportunities they offer and their important but misunderstood contribution to the...

Read More

Examples And Tips For Using Illustrator’s Warp Tools

Adobe Illustrator is one very useful program for creating vector artwork. The tools and features available in Illustrator make it easy to create digital illustrations, whether from scratch or by tracing a photograph. But this is not all Illustrator can do. Businesses can create impressive graphs using Illustrator’s Graph tools. Marketers can use the impressive Type tool and other type features to design single-page ads. Designers create logos and other marketing graphics that need to be scalable in Illustrator. In short, Illustrator is a comprehensive vector program that is difficult to master. The aim of this article is to provide one more resource for those of you yearning to learn more about Illustrator. We’ll look at one of the less-mentioned features: the Warp tools, also known as the ‘Liquify tools’. For you Photoshop gurus, these are similar to Photoshop’s Liquify tool, except that the Liquify effects seen in Photoshop are broken down in Illustrator into seven different tools: Warp, Twirl, Pucker, Bloat, Scallop, Crystallize and Wrinkle. These seven tools are all a part of Illustrator’s Liquify package. At first glance, some of these tools may look the same, but each has a special effect. And we’ll explore the various effects by creating an ornamental illustration involving branches, vines and flowers. You’ll be able to save and add each of the design elements to your collection of Illustrator symbols as...

Read More