Let’s sit back for a while and admire the truly satisfying geometrical wonders of the universe. Out with squares, circles and other absolutely boring shapes, and in with cleverly crafted and charming bits and pieces! Lucky for you, we have had the extreme pleasure of stumbling through the interwebs, dodging stray triangles and dodecahedrons, on a quest to find the best shapes just for you at no cost whatsoever! That’s right, we’ve decided to bring to you 20 of the best FREE Photoshop shape set downloads!
The Banners and Scrolls shape set from Obsidian Dawn adds an exceptional charm to your work. Take your designs back to the days of parchment, ink and quills as you indulge in this PhotoShop shape set! Banners and Scrolls
Let your imagination fly with these magnificent custom shapes from lukeroberts! Soar through chirpy designs like never before as you implement these bird shapes into your work. Birds
Add some extra jazz to your work with this fantastic urban pack from Obsidian Dawn! From barbed wire to skyscrapers and all sorts of urban designs in between, this shape set is perfect for designing concert posters or simply adding a little something to a logo design. Urban Designs
Transform your work into a thing of elegance and beauty with these many butterfly variations. Flutter on over to Dezignus to download this elegant set! Butterfly Shapes
These natural leaves and bushes made by the Vector Lady are absolutely perfect for any green designs you happen to be creating. Can you imagine just how fantastic logos would look with plantlife growing from them! Natural Leaves/Bushes
What better way to add personality to your work than to use these people shapes! This pack contains a large variety of many different people doing various things. These would look lovely in logos, posters, business cards or anything else your creative mind can conjure up! People Silhouette
Glide through projects gracefully with this diverse wing shape set! Add any type of wing to your creations and watch the magnificence soar! This set is a must have for anyone wishing to implement elegance and beauty into their work. Vector Wings
Feeling a tad bit fancy? Well these are just for you then! The elegant floral shape set is a pleasure to use and works extremely well with designing logo’s, posters or business cards. They would also do well on fancy invitations. Elegant Floral
You will love simply LOVE these various heart shapes. Who needs cupid when when you have PhotoShop? These would be great for creating cute stationary designs, or a letter for your love. There are many styles to choose from, so this time you’re allowed to be picky! This pack comes with brushes too! Valentines
This arrow set by Magdalena M Proszows really points to success. The many cartoonish styled arrows would most definitely add a little something to a logo or poster. They would even fit in with graphic novel design, if thats up your alley. Dont be fooled by these arrows though, the rest of the article is actually below! Smooth Arrows
Splash this shape set on your designs for a grungy look. The set contains a very impressive 173 various splash shapes and so chances are you’ll like at least one of them! These shapes could look effective on any sort of graphic design so don’t hesitate to download the set and get splashing! Grunge Splashes
Add a twirl to your work with this fantastic and vast set of PhotoShop Shapes. From small sprouts to extravagant floral shapes, this set has it all!! With 258 spirals, curves, and arcs, this set is almost a necessity! Floral Shapes
For some fantastic fairytale shapes, check out this set by dmitryseliv! The floral intricacy blended with old parchment really makes this pack something special! If ever you need a magical title bearer, you know where to go. Bear in mind that it is only for Personal Use though! DS Decor Shapes
Fancy a portrait of yourself in a nifty frame? Or perhaps you want to frame a splendid picture you drew? Look no further! Download Shelby Kate Schmitz‘ Free Frame and Border Shapes and get to it. These shapes would look great on invitations, logos and whatever else you can think of. Frame and Border Shapes
Throw yourself a grand ball with this delightfully detailed shape set by hotpinkscorpion. Be a bit fancy and use these shapes to decorate posh invitations or whatever else you find is lacking the rich factor. Chandelier Shapes
Go back to your childhood, where anything you could find was your canvvas and crayons were your tools of wacky art! This pack by hikaridrops is full of cute and nostalgic shapes perfect for designed aimed for children. Stationary, birthday invites or a nostalgic gateway, this pack is waiting for you to download right away! Kiddy Stuffs
Add a little charm and a lot of extravagance to your designs with these impressive shapes by eurochronix! You won’t regret downloading this set. It comes with 5 equally impressive floral banners ready to add text to. Floral Banner Shapes
Having a zoo of shapes at your fingertips will prove to be useful to you again and again. UnidentifyStudios did a fantastic job in capturing sufficient detail whilst still retaining a nice simple style. Animal Shapes
Watch the cogs of graphic design come together with these gear shapes! These are a must have for your shape arsenal. And the best part? There’s 90 of them!! Gear Shapes
And to finish off, here is a massive assortment of various shapes from naderbellal. The set contains over 850 shapes so there’ no doubt something in there that will tickle your fancy. 850 Assorted shapes
The number of people browsing the Web from a mobile device has more than tripled since 2009, and it is sure to continue growing, with browser platforms such as iOS and Android offering mobile browser support that is almost identical to what we have come to expect from a desktop experience. As the mobile consumer market continues to grow, so will the aspirations of individuals and companies who look to embrace what the mobile Web has to offer.
With this in mind, many website owners have begun to develop a strategy for providing information and services to their mobile visitors. However, mobile strategies can vary massively from website to website, depending on what the company wants to offer visitors. For example, eBay’s strategy will be very different from an individual’s strategy for a portfolio website, which might simply be to improve readability for those viewing on a mobile device.
Increasing mobile support could lead to a better experience, but at what cost?
So, as website owners define the level of support they aim to provide, a scale of support for mobile devices emerges. Picking where on the scale your website should sit can be quite tricky; each level of support is not without its pros and cons. Let’s take a look at some of the more common approaches:
Approach A: Tweak What You Have
The most basic and, thus, quickest option is to do only what is required to get the website to work on mobile devices. I use the word “work� loosely here because it can be very subjective, but the main goal is to ensure that the website displays and functions properly on mobile devices and perhaps similarly to the desktop experience.
Sure, delivering a desktop experience on a mobile device is not ideal by any stretch of the imagination, but this option simply offers the minimum required to get the website to function and display OK. With modern mobile devices offering good CSS support and zooming functionality, visitors should at least be able to access the information they need.
How to Implement This Approach?
Simple tweaks could include adjusting the viewport and text size, which will affect the way the website displays on a mobile device. The default viewport dimensions should work well for most layouts, but we can make adjustments using the meta element:
Text size can also be adjusted for some mobile devices using the CSS text-size-adjust property which specifies a size adjustment for displaying text content:
html {
-webkit-text-size-adjust: auto; /* Automatically adjusted for Safari on iPhone. */
-ms-text-size-adjust: auto; }
Different text-size-adjust values demonstrated on the iPhone.
More information on the text-size-adjust property is available in the Safari Developer Library. With a small number of tweaks, you should be able to optimize your website to appear as usable as the desktop experience.
Be careful when making any adjustments to the CSS for mobile visitors: you do not want desktop users ending up with a 200% font size by default! If you think this might happen or you want to further improve the experience, consider putting the CSS in a separate file:
<link rel="stylesheet" href="…" media="handheld, only screen and (max-device width: 480px)" />
Pros:
Quick to implement;
Minimal work required to replicate the desktop design;
Strong brand identification with basic consideration for mobile visitors.
Cons:
Mobile users could suffer from a poor experience;
Slow due to users downloading styles and large assets;
Content and navigation path are not optimized for mobile visitors.
Most modern browsers, including mobile ones, should now be able to query such things as width, height, device width and height, orientation and more. This has led to more people using media queries to provide responsive designs to their visitors:
Hicksdesign demonstrates adaptive layouts using media queries.
For older browsers, including Internet Explorer 6 to 8, several solutions are available that add some level of support for media queries, such as Respond.js by Scott Jehl.
How to Implement This Approach?
We can target specific resolutions and device sizes. For example, we could target mobile devices with a maximum device width of 480 pixels, such as the iPhone:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" />
Or we could put the same media query in our CSS file:
@media only screen and (max-device-width: 480px) {
// insert styling here…
}
Adaptive layouts need to work with the content already available on your website. This means that the source order and mark-up can play a vital role in providing a logical order to content when linearized for narrow layouts. You will also need to take into account that images will need to scale to fit as their containing elements adapt to different layouts. One way to achieve this is to specify a maximum width:
img { max-width: 100%; }
You could consider providing the mobile experience as the default and the desktop experience through media queries, an idea discussed by both Luke Wroblewski and Peter Gasston. Combining this approach with something like Adapt.js or 320 and up could improve performance for mobile visitors.
However, making the mobile experience the default isn’t without its own problems. Always consider your audience, and review visitor data before finalizing your approach.
Pros:
Quick to develop, especially when considered from the start;
Cheap to produce because minimal additional design is required;
Can result in improved readability and experience for mobile visitors.
Cons:
Older mobile and desktop browsers, including Internet Explorer 8, do not natively support media queries;
Visitors could face a short learning curve if the navigation and layout are altered;
Rendering could potentially be slower as images and non-critical content in the HTML are being downloaded.
Both approach A and approach B beautifully embrace the “One Web” philosophy which sees the Web as one universal medium that should adjust itself to the different environment of its users. Using mobile tweaks and media queries can help to keep the website a standalone, universal entity optimized for both mobile and desktop user experiences. As Jeremy Keith writes in his article,
“Recent developments in areas like performance and responsive design means that we can realistically pursue that vision of serving up content at a URL to everyone to the best ability of their device. At the same time, the opposite approach—creating multiple, tailored URLs—is currently a popular technique.”
A website dedicated to mobile users aims to deliver an optimized, and often very different, experience to visitors. These micro or mobile websites can take on a life of their own and often require a lot of research and analysis in order to prioritize and deliver the most important content to users.
Mobile websites from the likes of eBay and Amazon show a very different strategy than their desktop equivalents because screen space and file sizes are at a premium.
How to Implement This Approach?
A dedicated mobile website will normally reside on its own domain or sub-domain, such as mobile.twitter.com:
The main Twitter home page and the mobile version on an iPhone.
Redirecting mobile traffic to a dedicated website ensures that visitors arrive in the right place. But if you do this, provide a link to allow visitors to access to the full version! Also make sure that mobile users are redirected to the correct page when deep linking from another source.
Assets such as images should be kept to a minimum. And popular content, common tasks and key navigational paths should be highlighted to give users exactly what they want. More often than not, there is no room for advertisements in mobile versions.
Despite the extra work, the result can be a faster, more streamlined experience that puts the most important features and content at the user’s fingertips.
Pros:
Greatly improved performance;
Optimized paths make it easy and fast for users;
Enhances your support of and appeal to growing mobile consumer market.
Cons:
Relatively expensive to build and maintain;
Time-consuming because assets must be optimized and content prioritized;
Higher learning curve if the layout and content are very different from the desktop versions.
Finally, another option to consider is a native app. Apps can be the ultimate in an optimized, streamlined journey for visitors, and they often have native controls. Several properties, such as eBay, Twitter and Amazon, have clear user goals and have therefore invested time and effort into creating native apps that provide the best possible experience on a wide range of devices.
How to Implement This Approach?
A native app should provide the best possible experience for users on the go, while taking full advantage of device-specific features and controls. This approach is very different from the others described, and the project could be considered “ad hoc� development, correlating more closely to the user’s goals than the content or features on your website.
If this appeals to you, consider using an SDK, such as the ones available from PhoneGap and Appcelerator. These SDKs enable developers with a Web background to create applications and tap into native APIs that are not always available in the browser. Native app development can be quite bespoke and is sometimes undertaken parallel to the main website.
Facebook, which offers a native app, is a good example of how a integrated approach can ensure that content is accessible through full, mobile, touch and app versions, each optimized for the best possible experience.
Facebook can be accessed through full, mobile, touch and native app interfaces.
Pros:
Streamlined journeys;
Device controls are native and optimized for platform in terms of speed and performance;
Incredibly lightweight, with minimal bandwidth usage.
Cons:
Requires bespoke development;
Creating and maintaining apps for a range of devices is time-consuming;
Third-party approval is required before the app is available in stores.
Approach A and Approach B offer varying levels of support and often could be considered as a “quick win� strategy. Consider them if you want to improve the experience and optimize readability for mobile visitors at minimal cost.
A strongly related design strategy would be to start with a mobile layout of the website first, having a strong focus on content and navigation and then extend the mobile experience to larger desktop experiences. You can find some interesting workflow techniques for this strategy in Luke Wroblewski’s conference notes of Ethan Marcotte’s talk The Responsive Designer’s Workflow. For instance, you might need to consider using server-side media queries as well as fluid images in the development process.
Approach C requires considerably more time to develop and maintain but results in a faster, more streamlined website for task-oriented visitors. Approach X requires significantly more time to develop and approval from third-party app stores. But it might be ideal if your brand has many mobile users who expect a flawless experience. The main problem with these two approaches is that they aren’t scalable as new mobile devices might require new versions of the websites which increases costs and makes maintenance more difficult.
Ultimately, your approach should be guided by your content, objectives and visitors. What might work in theory doesn’t necessarily work in practice. A bit of digging in your analytics might show that a large proportion of visitors are on mobile devices, and so the extra time spent improving their experience would be worth it. Once you have all of the data, you can make an informed decision about which approach will benefit you — and more importantly — your visitors.
CSS tools are essential for web developers because they act like a sort of magic lamp that can simplify the job at hand. Most development tools are time savers that are there to help developers create stylish, functional and optimized websites with a few shortcuts.
CSS tools and generators are available in such large numbers that a developer can choose from a range of them to make their projects go smoother. Here is the collection of around 50 useful and handy CSS tools and generators that every developer should know about. Enjoy!
CSS Colors Tools
Color Scheme Designer This tool provides colors in the form of a color wheel that offers mono, complement, traid, tetrad, analogic and accented analogic color variations in the percentage ratio; and it also highlights the same with the suitable scheme chosen.
Ultimate CSS Gradient Generator It is a CSS gradient editor and generator that lets you create CSS gradients having cross-browser support.
CSS Color Codes This tool offers two options for furnishing the hexadecimal and RGB color codes. You can pick the color from the color picker and then copy its hexadecimal value from the bottom field.
Colors Pallete Generator This is a powerful tool that generates a color palette derived from the primary colors of the image that you upload. It is a useful tool for rapidly grabbing a particular color within an image for inspiration. With this, you can also generate Photoshop swatches and CSS styles.
CSS Colors This color chart offers more than 16 million colors with both RGB and hexadecimal color modes.
Gradient Image Maker This tool allows you to easily generate a gradient image of 3 types with on the spot previewing. With this tool you can create gradient images that you can use everywhere in your web page design.
CSS Layouts Tools
templatr It is a template generator that lets you create beautiful templates for your blog and web design without requiring any HTML and CSS knowledge.
Free CSS Template Code Generator It is a free HTML – CSS template generator that generates a three column layout without using any Tables. This template generator produces a custom-made template that can be used to control the look and feel of an entire website.
CSS Layout Generator – CSS Portal Another layout generator with which you can create a fluid or fixed width column layout, with up to 3 columns, header, footer and menu.
CSS Layout Generator Another CSS Layout Generator that allows you to create your own template by using HTML and CSS. You can create a template with up to 3 columns and a header and footer.
Layout Generator This tool generates multi-column and grid layouts with CSS 2.0 techniques by using pixels, percentage or em.
CSS Layout Generator With this tool, you can modify the header, footer, sidebars and layout width and can set the document type as XHTML or HTML strict or transitional to see the preview in the same page.
YAML Builder This tool is designed for visual development of YAML based CSS layouts.
CSS Grids Tools
The 1KB CSS Grid It is a lightweight tool with which you can streamline page templates for content management systems.
Variable Grid System It is a quick way to generate an underlying CSS grid that is based on the 960 Grid System.
GRIDINATOR This tool allows you to generate grids for the 960.gs, Golden Grid, or 1KB Grid. You can even generate a basic generic grid.
Blueprint Grid CSS Generator With this tool, you can generate more flexible versions of Blueprint’s grid.cs and compressed.css and grid.png files.
CSS Grid Calculator This calculator allows you to envision page layouts and draw grids in a variety of ways. You can have an accurate visual feedback on how text blocks and page divisions will appear within a browser window. You can also return style declarations for divisions and text to copy and paste into style sheets.
Grid Designer This tool allows you create design grids by giving you options to customize Columns, Pixels, Gutters and Margins.
Em Calculator Em Calculator is a JavaScript tool that lets you design scalable and accessible CSS design. This tool converts pixels to their relative em units based on a text size.
CSS Menus and Buttons
CSS Menu Maker This tool allows you create custom, cross browser compatible website menus.
CSS Menu Generator This menu generator lets you generate CSS and HTML codes which you need to create an appealing set of text based navigation buttons.
My CSS Menu This tool provides an easy way to create cross browser compatible CSS menus. With this tool, you can create Horizontal, Vertical, Drop-down web navigation.
Tabs Generator Another CSS navigation Tab Menu generator that allows you tweak size, colors, corners and more to generate unique designs that can be downloaded for your use.
List-O-Matic With this tool, you can choose the content, layout and presentation of your list-based navigation menus.
Button Maker Online This tool creates XHTML valid micro buttons (80×15). You can also create larger 88×31 buttons.
CSS Button & Text Field Generator This tool is a CSS button and text field generator that lets you easily create with just a click of the mouse.
Fonts and Text CSS Tools
Fonttester This is an amazing tool that lets you edit loads of CSS properties including inline height, font weight, font style and variant, text indent and transform, and word and letter spacing.
CSS font style You can use this tool to set the style of the font to italic or oblique.
Typetester This application provides a comparison of the fonts for the screen. Since the new fonts are packed into operating systems, the list of the common fonts will be updated.
CSS Font and Text Style Wizard You can use this wizard if you want to experiment with the fonts and text styles in order to generate sample CSS style source code. Dynamic HTML is used in this wizard that changes the style of the table in-situ, without loading another page.
CSS Type Set This is a typography tool that allows designers and developers to test and learn the ways to style their web content.
CSS Generator & Optimizer
CSS Generator This tool lets you choose a style for your web page. You can select different Cascading Style Sheet properties with live preview. You can choose color, HTML tag, click the field you would like to insert color into and color them.
CSS Generator This tool gives you a live preview of the color that you select from the palette. You can directly specify colors and other design attributes. This tool helps you select a face color for your new web project straight away!
Cascading Style Sheet CSS Generator This is a free tool that lets you create cascading style sheets for your web page. You can add as many style sheets as you want.
Clean CSS This is a CSS optimizer and formatter that takes your CSS code and makes it cleaner and more concise.
Simple CSS This tool lets you create unique Cascading Style Sheets from scratch. You can also modify your existing CSS.
Regex Patterns for Single Line CSS While formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate.
CSS Sprite Tools
CSS – Sprit.es With this tool, you can easily generate CSS and HTML code by uploading the file you want to use in your CSS sprite and then click the button that join all your images into a single file. With this tool, you can also achieve any rollover effects.
Spritegen CSS Sprites This tool allows you create your sprite by letting your upload your image and then add more images. You can also set the output of your images as in PNG, JPEG or GIF.
CSS Sprites With this tool, upload any number of images and click Generate button to create your CSS sprites with ease.
Website Performance (CSS Sprite Generator) It is a tool that allows you to upload your source file in order to create the sprite image and CSS. This tool works by ignoring duplicates, resizing the source images, setting the sprite and other CSS options like horizontal and vertical offset, background color, class prefix, CSS suffix etc.
Spritebox It is a WYSIWYG tool that is helpful for the web designers who want to quickly create CSS classes and IDs from a single sprite image. This tool works on the principle of using the background-position property to line up areas of a sprite image into block elements of a web page.
Other CSS Tools
SlickMap CSS This tool displays your site maps directly from HTML unordered list navigation. This is appropriate for the websites that want to accommodate up to three levels of page navigation and extra utility links that can be easily modified to meet personal requirements, branding, or style preferences.
CSS3 Please! This tool displays the output of your code instantaneously. It is a simple yet powerful tool for the web designers and developers.
CSS Sorter CSS Sorter is a tool that sorts CSS files and rules alphabetically so that you can easily manage your CSS files.
Sky CSS Tool Sky CSS lets you create CSS classes without requiring any manuscript code. In order to work properly, it needs a JavaScript compatible browser.
CSS Table Wizard This wizard helps you generate style source code and allows you to do experiments with table border styles.
Csstxt Csstxt is a powerful tool that illustrates numerous ways to add a style to a text with ‘a’, ‘p’ or div tag.
MinifyMe It is a small AIR application that packs together multiple CSS and JavaScript files into one and runs on your desktop.
Password Generator This tool generates all the compulsory codes required to password protect a directory, or selects files within it on your site by means of .htaccess. This tool works by encrypting your desired password and then put the outputs inside your .htaccess and .htpasswd files.
XHTML/CSS Markup Generator This is a simple tool that lets you quickly generate XHTML Markup and a CSS frame; shorten syntax so that you can directly jump to the elements styling. This tool significantly speeds up your work.
It’s been quite a while since I read a new book on CSS. It seemed like most books on the subject had already been written. But then browsers started implementing CSS3, and developers started using it.
And that’s where this book comes in. The Book of CSS3, written by Peter Gasston, is all about CSS3 just as the title says. And it’s a book you more than likely should have, even if you think you already have a pretty good handle on everything CSS.
Marcin Wichary’s fascination with the relationship between humans and machines began at an early age. As a boy in Poland, he was mesmerized by the interaction between arcade patrons and the video games they played. Years later, Marcin would help shape the way that millions of computer users interact with some of the world’s most popular websites. He would even recreate one of those arcade games for the Web.
Marcin is Senior User Experience Designer at Google, but his numerous roles and broad influence at the company are not conveniently definable. His fingerprints are on the code of Google products ranging from Search to Chrome. He gained publicity for his work on the Google Pac-Man Doodle, which he co-created with fellow Googler Ryan Germick. According to Ryan, “Marcin is a genius. He’s a UX designer but he’s also maybe one of the best front-end programmers on the planet.�
Marcin joined Smashing Magazine author Dan Redding for a conversation regarding his professional career, his interest in photography and a curious creation known as the Crushinator.
The Interview
Question: Hi, Marcin! I understand that you’re involved in a variety of departments and projects at Google. Can you summarize your professional roles at the company?
Marcin Wichary: Sure. So, I’ve been at Google for the past five and a half years, and I’ve always been kind of a weird mix of a user experience designer and a developer. I guess I kinda grew more comfortable with it as time went by. I started working on the Internal Tools team, working on our Internet — or the experience of our Internet — and some of the tools that Googlers use that you can’t really show to anybody outside, programs that you can’t tell your Mom, “Hey, this is what I did this week!â€� I’d been doing that for about two and a half years, and then I moved to kind of the proper User Experience team, the global team that works on products that actually people can use. I’ve been on Search for, well, two and a half years as well, I think.
Question: And you also work on the Doodles, for example, right?
Marcin: Yeah! So, that has always been kind of on the side. And then I just joined the Chrome team this year. So, that is kind of my second or third big change within Google. Google is great because it allows you to do a number of things, kind of as your twenty percent project, and one of mine has always been this ongoing collaboration with the Doodle team, as a… I don’t even know what to call it… a “technology consultant� collaborator! [Laughs]
Video of Google’s Martha Graham doodle in action. Art by Ryan Woodward. A fan recreated the original doodle.
Question: What was your involvement in the Martha Graham doodle?
Marcin: I developed a technique to animate it. The proper visuals had been done elsewhere. There’s a number of technologies that you could think of if you wanted to put something on the Google home page that’s animated, right? There’s an animated GIF. It could maybe be a YouTube video, and we’ve done that. It could be a number of other techniques. But all of them have pros and cons.
For this particular doodle, none of the ones we knew of were good enough. Especially on the home page, we have a number of constraints. You know, we need to serve it to the user as fast as possible. We really care a lot about speed. And we also wanna make sure that it’s gonna work on every possible platform. So, for example, that would exclude Flash animation, just because a number of touch-based devices wouldn’t support that.
When I look at Web development, a lot of what’s necessary is weird ingenuity, where you look at the limited number of tools at your disposal and try to put them together in a funny way. Eventually, I developed this technique to create this big sprite. Instead of just having hundreds of frames and sending them down the wire and possibly costing a lot of bandwidth, you would just construct a sprite with the smallest possible rectangle that contains the difference between two frames. It would be kind of like you had a first frame and then every other frame would be the delta. And there was this little mechanism to construct it and then play it back. It worked pretty well, so we were happy. I’m not an illustrator: I’m a designer, but I cannot draw. I’m the worst Pictionary player ever. So, I won’t ever be allowed to draw anything on the home page, for the good of humanity.
As a designer, in many cases, I’m invisible. I can help with technology, but the technology is ultimately invisible. Many people really did enjoy the Martha Graham doodle, and I’ve got the quiet satisfaction that I helped make it possible.
Marcin says, “This is from the San Diego Zoo, 2009. I don’t photograph living creatures often, but when I do, it’s usually a lot of fun.� (Image: Marcin Wichary)
Question: What is the Crushinator?
Marcin: [Laughs] Okay, so that’s actually the [name of the animation] technique that I just described. I’m trying to convince the Doodle team to set up a proper blog where they can talk about stuff like this, both as artists and technologists. The great thing about the Web is that you can always right-click, “View source� or “Inspect element� and try to figure it out. And, as a matter of fact, I do recall there being a blog post somewhere on the day that the Martha Graham doodle came out, where somebody reverse-engineered the whole thing to figure out how it works. They didn’t know that the technique was called Crushinator because that’s my stupid Futurama reference.
Question: I think that the Crushinator, as you call it, and this style of JavaScript-powered sprite animation are actually a very innovative animation style that is lightweight and available cross-browser, as you’ve said. Do you see the potential for that technique to become a widely adopted tool for animation on the Web?
Marcin: I don’t think about it that way, because it’s kind of what I do. I’ve been doing Web development for many, many years. A lot of Web development is, as I mentioned, putting [technologies] together and seeing what happens. After a while, I developed an attitude that pretty much nothing’s impossible. You know that with HTML5 around and all of these cool things happening in the browser, something’s probably gonna help you. So, I do a lot of putting things together, and they actually don’t seem like that big a deal to me because that’s what I do. And sometimes you just throw [your experiment] at random people inside Google, and some of them become more popular, and others nobody cares about. So, I don’t think I’m the right person to talk about whether anything that I hack together has more utility than anything else. A lot of what I’m hoping to do with this kind of random hackery is figuring out, how can we push HTML5 further this week? You know, just hoping to inspire some people.
Question: Well, I think you should give yourself some credit. Some of the work you guys are doing is very innovative. And it’s also very visible; it gets a lot of attention. There’s potential there for you to be a real influencer of these kinds of technologies.
Marcin: I’m kind of recognizing that, for better or worse, people sometimes come to me and treat me as if I know something about what I’m doing. [Laughter] And maybe I do. Sometimes I feel like it’s my first day with a new video game, and I’m just randomly pressing buttons and things happen on the screen and I don’t know exactly why, but it’s cool, right? Because HTML5 is cool.
“This is a photo a friend and I took of me against a Cylon replica. This is a dramatic recreation of my typical day.� (Image: Marcin Wichary)
Question: What is the most useful usability or user experience finding you have learned recently?
Marcin: There are a number of those, but unfortunately, I can’t really talk about them because they are internal.
But… this is going to sound funny. A while back, there was this report that came out — from Princeton University, I think — that said using Comic Sans will make your material easier to remember. The harder your typeface is to read, the better the chance that people will remember what you wrote. And everybody I know perversely sends me links to this study, even literally last week, because they know how much I hate Comic Sans… [Laughter] … with passion. And people are sending this study to me, saying “You were wrong, and we were right.â€� You know, tongue in cheek.
But of course, that really isn’t what the study is about. First of all, you don’t have to use Comic Sans. Second of all, it’s just one factor, the same way there’s typically always a battle between usability and security, right? In order to make things more secure, sometimes it means you have to make them less usable. Like the simple fact that whenever you type a password, you can’t see it. It’s asterisks or dots or whatever, because it makes it harder for other people to eavesdrop on you. But it also makes it easier for you to mistype. So there’s a ton of these kind of choices that you have to make. You have to find a nice medium between security and usability. Those decisions are really, really hard and require a lot of thought. So, the same thing with Comic Sans and that study. You could use another font. Or use Comic Sans — it will make the learning easier. That‘s cool. But if your students develop an intense hatred for typography in general or design or, I don’t know, the universe, [Laughter] I don’t think you’ve won much. I‘m kind of tongue in cheek now, too. But not really.
Question: When did your interest in code and computer programming begin?
Marcin: It actually all kind of ties together in a number of funny ways. When I was very little, my dad had the best job ever… for a nerd like me. His job was fixing arcade games and pinball machines. So, I could follow him to all of these little arcade parlours in Poland, where I’m from. I could play for free, first of all, which was awesome. But actually, I much preferred watching other people play games. Of course, I would play games — I loved games and still do. But I could also get a little sneak peek — if you opened the arcade game, what happens there? If you went into debug mode or testing mode, which many of the arcade games had, there were a number of tools, if you had access to them, to see the graphic elements in the video game, the sound effects and all of the settings. And I was fascinated! It was like looking under the hood of a car — except, you know, a much cooler car. Maybe that’s what got me into computers.
As I was finishing my computer science degree in Poland, working on my Masters, I discovered this whole area of human-computer interaction — which people work on for a living, and it’s important, and it matters, and you can make a career out of it. That was a revelation to me. Suddenly, the past God-knows-how-many years that I was doing [amateur computer programming] were cast in a very different light.
Marcin says that photos like this one are an attempt to “anthropomorphize machines.� (Image: Marcin Wichary)
Question: Do you think that when you were in that arcade in Poland, when you were a kid, and you were watching a patron play Space Invaders, that you were monitoring the user experience by watching that person play?
Marcin: Maybe! It’s an interesting thing. I used to be fascinated by books by the Polish author StanisÅ‚aw Lem. Probably my favorite book of his is called Tales of Pirx the Pilot. I was fascinated by it because it’s about space and aliens and the future — it was awesome for a kid. But reading this book today, the whole theme is Pirx interacting with machines. The machines are robots, or spaceship A.I., but it really is about human-computer interaction. And the question now is whether I was already interested in that when I was very little. Or maybe the books actually shaped me. Or maybe it was both. And the same maybe with the arcades. Maybe I was watching people play and kind of thinking about what it meant. Or maybe I was so inspired by how much fun you could have with technology and how much delight that I started trying to do it myself in whatever way I could — and today it happens to be HTML5. And who knows what’s gonna happen ten years from now.
Question: What do you think the Internet might look like at that time?
Marcin: That’s always pretty tricky! I actually make a point of not trying to predict the future because I’m really terrible at that. But I can tell you one thing I’m excited about. A number of things are happening right now that get me really excited about the idea of computer-user interfaces that for the first time don’t feel like they’re coming out of a computer. One idea is that the retina display and other technologies that will probably arrive make it very easy to put something on the screen that mimics the imperfections of the real world. Maybe the typography doesn’t have to be so perfect, because it’s never so perfect in books. Maybe there’s gonna be something with interfaces being actually broken in some way — broken to mimic real life, not broken because we’re bad at developing things.
I’m especially excited about the implication of this in relation to typography. Over the course of hundreds of years, we built up [a typographic practice] with total nuance, with a lot of history, and we arrived at this very rich era where typography is amazing, right? It can do so much. There’s so much history there and so much beauty. And then the computer came around in the nineteen eighties and took all that away! [Laughter] You got monospace fonts and “underlineâ€�… Now we’ve got Unicode, and HTML5/CSS3 allow you to use different typefaces, and maybe, slowly, we’re gonna get all of this back again — and maybe even more. Maybe we’ll get all of the things we love in books and all of the things we love in computers combined.
Question: Can you give me an example of a day in the life of Google’s UX design team?
Marcin: There’s really no template for a day. Probably the most important part of my day, and the one I treasure most, is just talking to other designers. Either ranting like we do about everything that has to do with design, [Laughter] or showing them something I’m working on and getting feedback. We have so many amazing kinds of designers here.
For me, a lot of the day is spent staring at a computer. In my case, it’s a lot of HTML5, so some kind of text editor is in front of me — or, in some cases, Photoshop. I’ve spent so much time in HTML5 that it’s actually easy for me to just treat it as a design tool.
Question: What else can you tell me about your set-up and workflow at Google?
Marcin: I’ve always had a kind of low-level, old-school approach. I coded one site in FrontPage many, many years ago. [Laughter] But ever since then, I’ve pretty much coded everything by hand, from scratch, in a very simple text editor. These days it happens to be TextMate, although I don’t actually use any of the advanced TextMate features. I feel that gives me more control.
I actually make a point of starting things from scratch, even if they have been written elsewhere, or even by me before, because it allows me — you know, in a fast-moving environment where HTML5 and CSS3 change a lot — it allows me to learn all of those new things, to try a different approach, to think about how I did it the last time and try to do it differently, just for the sake of doing it differently. And that always feels really great. That approach probably only works for, like, little projects, little goofy experiments that I do. I don’t know… you can’t really rewrite Gmail every single month from scratch. [Laughter] But it’s kind of been working for me.
Other than that, it’s really very simple. Browser in one window, TextMate in another window, and a lot of Command-Tab’ing and a lot of Command-R’ing. You know, simple old habits. Muscle memory.
I have a couple of little tools that I made for myself and others at Google that I should open source, and I feel really bad for not having done that. One of them has another funny name. It’s called Transmogrifier, which is a nod to Calvin and Hobbes, which I love a lot. It’s a little tool that allows me to very easily test different types, or different parameters of my prototypes. You know, JavaScript is not very good at CGI parameters, so Transmogrifier gives me this nice UI, and I don’t have to worry about the innards and switching and hiding the options panel. I just plug in one line of JavaScript, and the tool takes care of most of that for me.
A number of other tools are floating around at Google that are pretty great, and I helped with some of those. And writing tools is actually a cool experience, too. You can learn a lot. Like, for example, writing a tool that you can embed in another page and it doesn’t ever break that page. This should be super-easy, but it’s not, with cascading styles just waiting for you to trip up. So, you can learn a lot of different skills.
Question: Google has a reputation for reliance on data and intensive testing of products and design. How does this affect the user’s experience of Google websites?
Marcin: We’ve historically been very focused on the efficiency of user experiences. For a lot of the products we have, including Google Search, our main consideration was the efficiency of getting to the proper response as fast as possible, and the answer being as precise as possible. We’ve gotten a lot of different comments over the years, with people suggesting that we don’t design our interfaces, that they kind of just are — they just exist. In most cases, the most deliberate design decision on our part is for our interfaces not to feel like they’re designed. They will seem more objective. Less editorialized. Relying on data is a very important part of this.
We’ve been looking at this in more detail recently. We’ve been thinking that, maybe for some of our projects that we’re working on currently, we should approach design a little bit differently. It’s going to be very interesting to see what happens.
Question: How did your interest in photography come about?
Marcin: I’ve always dabbled in photography. Back when I was in Poland, we had one of the first digital cameras — you know, a very primitive one with half a megapixel or whatever. But I never really considered myself a photographer. Really, it was kind of an impulse buy in late 2007, as I was heading out on a trip to New York. I started chatting with a friend of mine who is a photographer, and I ended up overnighting my first DLSR with my first lens, and I kind of fell in love with it.
“I am sure no one played [this piano] seriously for a long, long time, so I did. I just sat down and started playing — the sonatas I’ve learned, the things I’ve put together myself. I had to be a bit creative, since some of the keys no longer worked.â€� (Image: Marcin Wichary)
I play piano occasionally, and I’m terrible at it. I think I’m good at being terrible at it, trying to figure it out on my own. When playing piano, the most interesting part to me is emotion. Can I learn to play things that mean a lot to me? Or can I compose something in which I evoke a certain emotion in other people — or even in myself? It’s less to do with technical proficiency.
In photography, what I realized is that the technology is the driver for me. A big part of me is fascinated with the technology of photography. I know that’s not true for other people. Maybe other people are interested in emotion or some other things.
Photography has been around for much, much longer [than computers], and it’s great to realize that there’s so much to photography that you could pretty much learn something new forever. Not only is there already so much that’s happened, but it’s also still happening right now. We’re at this really, really amazing time when digital photography is becoming commonplace — it’s already commonplace. What that means is that first of all, we have photographers everywhere, which is great. It’s gonna be exciting to see what happens in the next couple years, or ten years, or twenty years. And that’s another thing that gets me excited about photography in the same way I’m excited about HTML5 — because the best is yet to come.
The Banners and Scrolls shape set from Obsidian Dawn adds an exceptional charm to your work. Take your designs back to the days of parchment, ink and quills as you indulge in this PhotoShop shape set!
Glide through projects gracefully with this diverse wing shape set! Add any type of wing to your creations and watch the magnificence soar! This set is a must have for anyone wishing to implement elegance and beauty into their work. Vector Wings
Feeling a tad bit fancy? Well these are just for you then! The elegant floral shape set is a pleasure to use and works extremely well with designing logo’s, posters or business cards. They would also do well on fancy invitations. Elegant Floral
You will love simply LOVE these various heart shapes. Who needs cupid when when you have PhotoShop? These would be great for creating cute stationary designs, or a letter for your love. There are many styles to choose from, so this time you’re allowed to be picky! This pack comes with brushes too! Valentines
This arrow set by Magdalena M Proszows really points to success. The many cartoonish styled arrows would most definitely add a little something to a logo or poster. They would even fit in with graphic novel design, if thats up your alley. Dont be fooled by these arrows though, the rest of the article is actually below! Smooth Arrows
Splash this shape set on your designs for a grungy look. The set contains a very impressive 173 various splash shapes and so chances are you’ll like at least one of them! These shapes could look effective on any sort of graphic design so don’t hesitate to download the set and get splashing! Grunge Splashes
Add a twirl to your work with this fantastic and vast set of PhotoShop Shapes. From small sprouts to extravagant floral shapes, this set has it all!! With 258 spirals, curves, and arcs, this set is almost a necessity! Floral Shapes
It’s been quite a while since I read a new book on CSS. It seemed like most books on the subject had already been written. But then browsers started implementing CSS3, and developers started using it.
