19 Aug 2008 22:47:56 | Vitaly Friedman & Sven Lennartz | Developer s Toolbox,how-to,screencasting,tools | Comments
By Adam Hay
Some companies have made a living creating a sort of “virtual classroom,” allowing members to learn at their own pace when they have the time using video tutorials. The advantages of the classroom setting stem from a one on one experience and the ability of the instructor to show the ideas and theories rather than simply explain them.
Screencasting, or sharing your virtual desktop via video presentation, has exploded in popularity with the advent of podcasting, and gives you the ability to bring the classroom feel to a media presentation that can be delivered over the Internet. The medium of screencasting is readily available to everyone and with a few tools of the trade you can be ready to produce your own.
Why Should You Screencast?
There are several advantages to screencasting both from the user’s side as well as from the creator’s. From the point of view of the audience, the screencast allows them to learn by example, seeing every step in great detail. Learning by watching the host move through the steps enables them to take note of where everything is in the application or presentation. In most cases the ability to pause or rewind also gives the viewer the power to move at their own pace… something a classroom cannot always offer.
For the creator, screencasting offers the capability to explain in detail what may be more confusing when delivered in audio or the written word. Video allows the screencast producer to complete the flow of thoughts or processes without being forced to chop steps into static images, as in a book or slide show. With the combination of video and audio, the creator can mimic the one on one experience of the classroom and deliver clear, complete instruction.
Althought the advantages may seem plentiful, screencasts do have their downside as well. Watching a video requires a commitment of time, and some potential audience members may not have the time to give. While iPods and other portable media players have made video content more portable, a large portion of the population may still rely on books and the printed word for training on-the-go. Screencasting, although not a new technology is still relatively obscure. Individuals that a screencaster is trying to reach may simply not know that the information is available to them.
The technical difficulties of screen capture and exporting can be numerous, and a poorly constructed offering will almost absolutely result in a reduction in audience and exposure. While video and audio quality may not be as important as content, it can make or break the success of a screencast.
Who Can Make a Screencast?
Anyone with something to teach or present can produce a screencast. Required are a good idea, some screen recording software, a microphone, a site for distribution, and a willingness to share your ideas with the world. In seven easy steps you can begin to produce a screencast and deliver it to the world.
Seven Steps to Screencasting
Content is king. If you don’t have something to present, you don’t have a screencast! In most cases, a screencast is produced to teach a process or technique, or get a set of ideas across to an audience. If you cannot keep the attention of the audience, the screencast may be rendered useless. When choosing a topic, start with areas that are within your knowledge base, and can be covered in the time allotted to complete the series.
Planning. A script may or may not be utilized in preparation, but it is good practice to complete a dry run of the presentation before actually hitting the record button. Practice makes perfect, and the more familiar you are with your content, the more polished the final recording will be.
Push the red button. It’s time to shine, and if your preparation went well, this step should be relatively easy. Remember to move at a pace that is comfortable for your audience and speak clearly so as to avoid any confusion. Audio can be added in post production instead of being recorded during the presentation, but this will require an extra editing step and can break the flow of the delivery if not done correctly.
Review the video. Be sure that no steps were left out and that the flow of the presentation makes sense and will be easy to follow for your intended audience. If imperfections are found, you may choose to edit or re-record the video altogether.
Editing. If necessary, edit the video according to your standards. Include any transitions, intros, outros, or other post production items.
Produce. Export your video with the settings that best fit your intended output, whether that will be streaming from a webpage, downloadable media or delivery on a disc.
Distribute the videos. There are several options from hosting your own weblog site and leveraging an RSS feed, to using a service such as screencast.com, YouTube or revver.com.
Capturing Your Screen
As is often the case with software, the options are plentiful for capturing video of your computer screen. The feature sets of these software packages for the most part are comparable, but advanced tools and pricing set a few of them apart from the pack. Below are five screen capture software applications that can be used to create a screencast.
Snapz Pro X (Mac)
Snapz Pro X is a robust offering of settings and compressions for screen captures of all sizes. It is fairly easy to use and captures great quality of video and sound. Video from this application is exported in Quicktime (.mov) format only and Snapz Pro X does not allow for video editing. This is a feature-rich application for a reasonable price of about $70.
iShowU (Mac - Tiger or Leopard)
iShowU offers polished recording quality and plenty of settings and export presets for anything from YouTube formatting to 1080p. Like Snapz Pro X, iShowU lacks ability to encode video to different formats. Videos are saved in Quicktime (.mov) format only and editing is not a feature supported by this application. This is a productive little application and priced for the novice at about $20.
Camtasia Studio 5 (Windows)
If you are looking for an all-in-one screen capture and video editing software package, and you’re using Windows, this is the one for you! Camtasia Studio 5 lets you record the screen, format and compress for multiple outputs, edit and enhance the audio and video, and save in several different formats. A host of other features including themes, transitions, and captions make this product stand out among the pack, but at a price of about $299.
CamStudio (Windows)
CamStudio is a quick and lightweight screen capture application that allows for recording of video and sound to either an .avi or Flash based swf file. It features the ability to place banners/text boxes with supporting text. This application records only and does not allow for editing, but is a very functional screen capture option and is free for anyone to use, provided you are using the Windows operating system.
Wink (Windows)
Wink works a bit differently than the other applications being showcased in this article. Instead of recording a single video file of the motions you perform on the screen, it takes a series of screen image captures and strings them together into a Flash movie file (.swf) upon exporting. This application allows for editing of the screen captures and the audio, whether it is recorded with the presentation, recorded in the editing phase, or imported from an external audio file.
The recording and output settings for audio and video are limited and the quality of audio recorded in Wink is subpar when compared to the other applications reviewed in this article. The final output, however, was suprisingly good given the method for constructing the video from static screen captures, and the price is right (free) for those wanting to try their hand at screencasting!
Screencast.com (Jing) (Mac, Windows)
Screencast.com offers a great way to record screencasts and host them all in one package. They offer a free screen capture application called the Jing project. Jing is easy to use and gives you high quality screen captures that can be saved in the Flash (swf) format.
Downloading Jing requires a sign up with screencast.com who also offers hosting plans from about $7 to $25 per month depending on the amount of space you need, with a free trial account to test the features of the service. All movies exported from Jing can be uploaded to either your screencast.com account, an ftp which you set up, or can be saved to your computer’s hard drive. This application does not allow for editing video.
Tricks of the trade
Screencasting, like many other forms of media can be customized as the producer sees fit. Trial and error may be your best ally in figuring out what formula works best. Here are some tips from current screencast producers that may fit into your template of success.
Expensive equipment is not always the best equipment. While some studio grade microphones will give you excellent audio quality, a decent headset will give you adequate sound and the freedom to work on the computer as you normally would while performing the presentation.
Taking the time to find the suitable settings for your output can be the key to returning your audience. Poor video or audio quality can have a negative effect on the screencast viewing experience.
Editing may be an option, but sometimes its better to simply start over and have a nice flow to the production rather than piecing together snippets of good video.
Think long-term. Are you still going to have content to share via screencast two months from now? How about two years from now? Once you build an audience, their thirst for your content may not fade.
Consider leaving the mistakes in the presentation. Problems may occur in the viewers’ workflow, and watching you solve a similar problem may help in their learning process.
Speak to the World
Once your screencast is ready for an audience, a suitable distribution system is needed to get the content to the people. Using a weblog software such as WordPress allows you to quickly add posts, or customized web pages, and attach your screencast.
Taking things one step further, the weblog automatically produces an RSS feed, which users can subscribe to in a news reader or aggregator such as iTunes, and receive the screencasts each time you add a new one to the weblog. WordPress works in conjunction with a plugin called podPress, which makes it simple to attach your screencast movie to a weblog post.
Alternatively, you may choose to use a service such as YouTube or Revver.com. These websites both allow you to set up a free account, post your video content to their free-of-charge servers and share it with other users who visit the website. These services can be a cost-effective solution as you are not charged for the storage or transfer of your screencasts, and at times have an opportunity to even make money with your videos.
Making Sense Of It All
Screencasting is a media experience that is available to just about anyone, whether there is an interest in viewing them or hosting and producing them. It is an effective way to educate and inform using some simple tools to share what is happening on your computer screen.
It holds many advantages over the traditional methods of teaching and learning, and in many cases is offered free of charge. See the list below for some high quality screencasts that may teach you a thing or two about design and design applications.
18 Aug 2008 23:49:31 | Vitaly Friedman & Sven Lennartz | CSS,clean,code,css,factoring | Comments
By Tony White
Some of you may remember the days when 30KB was the recommended maximum size of a web page, a value which included HTML, CSS, JavaScript, Flash, and images. I find with every new project with even the slightest bit of complexity, it’s not long before that 30 KB ideal is well out of my reach. With the popularity of CSS layouts and JavaScript-enriched web page experiences, it’s not uncommon, particularly for large sites, for the CSS files alone to jump well beyond that 30KB ceiling.
But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization isn’t just minimizing file size — it’s also about being organized, clutter-free, and efficient. You’ll find that the more knowledge you have about optimal CSS practices, smaller file size will inevitably come as an direct result of their implementation. You may already be familiar with some of the principles mentioned below, but they are worth a review. Being familiar with this concepts will help you write optimized CSS code and make you a better all-around web designer.
1. Use Shorthand
If you’re not already writing in shorthand, you’re late to the party. But fortunately, this party never ends. Using shorthand properties is the single easiest practice you can do to cut down your code (and coding time). There’s no better time than the present to start this efficient coding practice, or to review it.
Margin, border, padding, background, font, list-style, and even outline are all properties that allow shorthand (and that’s not even an extensive list!).
CSS Shorthand means that instead of using different declarations for related properties…
… you may use shorthand properties to combine those values like so:
margin: { 10px 20px 30px 40px; }
By specifying a different number of values, browsers would interpret the rules in a specified manner, illustrated in the diagram below.
Illustration of how shorthand declarations are interpreted depending on how many values are specified for a property. This order also applies to padding and border-width among other properties.
Font is another helpful shorthand property that helps save some room and keystrokes.
Examples of the font shorthand property. Note: leaving some values unspecified will mean that those properties will reset to thier initial values.
Those are just two examples of shorthand, but by no means should be considered a comprehensive guide. Even if you are familiar with the rules above, be sure to look at the articles mentioned below for more helpful reminders of those powerful properties that help keep your code succinct. Because of the number of lines and characters saved, going from a previous version of a CSS file which used no shorthand properties to one that makes full use of shorthand can have dramatic effect on file size.
If you’re like me, those words from Peter-Paul Koch’s nearly 5-year-old article may make you feel a little embarrased. After all, who hasn’t served hacks to Internet Explorer 6 and even Internet Explorer 7? As bad as we may want IE6 to lay six pixels under, the truth is it’s far from dead.
But now we know that using conditional comments to serve hacks correctional declarations for IE6 and IE7 is an accepted practice, even recommended by the Microsoft IE development team. Using conditional comments to serve IE-specific CSS rules has the added benefit of serving a cleaner, and therefore smaller, default CSS file to more standards-compliant browsers, while only those browsers that need the hackery daiquri (i.e. IE) will download the additional page weight.
Here’s how to use conditional comments to serve styles only to Internet Explorer 6:
For IE7, you can use the above and substitute “6″ for “7″.
Alternatively, if there is hack-less way of getting the desired result using CSS, with all other things being equal, go for it! The less hacks you have to write, the simpler and lighter the code.
3. Use whitespace wisely
Whitespace, including spaces, tabs, and extra line breaks, is important for readability for CSS code. However, whitespace does add, however miniscule it may be, to page weight. Every space, line-break, and tab you can eliminate is like having one less character.
But this is one area where I would not encourage you to skimp just to get a smaller file. It’s still important that you write in a way that is readable to you (and hopefully to others), and if that includes using whitespace for formatting, so be it. After all, if you can’t read it, you’re going to have a hard time applying the other principles mentioned in this article. Just be aware of the fact that whitespace is like air - you might not be able to see it, but it does weigh something.
The figure below shows two different extremes in formatting style, with much whitespace, and the other with very little. I happen to favor the single-line formatting option without tabs, as I can scan the selectors a little easier, and I develop using the full width of my wide-screen monitor. But that’s just me. You may like your selectors to appear nested, and your declarations on each line.
Illustration of two extremes in CSS formatting: lots of whitespace vs. very little whitespace
Using whitespace effectively is great, and a recommended practice for easy-to-manage code, but be aware that the less whitespace you have, the smaller the file. Even if you choose work with whitespace with your working file, you can choose to remove it for the production version of your CSS file, so your files stay skinny where it really counts.
4. Prune frameworks and resets
Nathan Smith’s 960 Grid System CSS framework uses a reset rule.
If you’ve chosen to use a CSS framework (including ones you’ve written yourself), take the time to review the documentation as well as every line of the CSS file. You may find that the framework includes some rules that you don’t care to use for your current project, and they can be weeded out. Also, you may find that the framework includes a more elegant and concise way of achieving a presentational detail than what you normally use, and knowing about them can help prevent you duplicating rule sets unintentionally.
This goes for resets as well. YUI Grid CSS uses a reset, and Eric Meyer’s Reset is also very popular. Resets are great to use because they help to neutralize a browser’s default style. But if you know the nature of the site you are building, you may find some declarations that you know you’ll never need. and will likely go unused on my Aunt Martha’s recipe blog. A design portfolio probably won’t ever use , , , etc. So ditch what you don’t need. It’s not only ok, it’s encouraged, even by Eric Meyer:
As I say on the reset page, those styles aren’t supposed to be left alone by anyone. They’re a starting point.
Using a framework and/or a reset set of rules can help keep your work optimized, but they should not be accepted in their default state. Considering each declaration and cutting back on unneccessary ones can further help you keep your CSS files lean and readable.
5. Future-proof your CSS
Doug Bowman’s stopdesign.com CSS reveals specially crafted selectors used for layout.
Another way to optimize your code is to separate layout-specific declarations from the rest of your rules. I’ve heard options of separating typography and colors from layout-specific rules in the CSS file. I’ve never been fond of this practice, as I don’t care to repeat selectors just because I have different types of declarations to associate with them.
However, I’m warming up to the idea of separating layout styles from the rest of the styles, and giving layout it’s own file, or at least it’s own section. This is also advocated in Andy Clarke’s Transcending CSS. Within the book, Clarke reminds us of the following:
Full CSS layouts have always been a compromise. The current CSS specifications were never designed to create the visually rich and complex interface layouts that modern Web demands. The current mehtods - floats and positioning - were never intended as layout tools.
Transcending CSS - Andy Clarke.
One way of interpreting this is that floats and positions to establish sidebars and columns are, well, layout hacks. And though we really don’t have an alternative, we hopefully will once a layout standard is agreed upon and browsers start supporting them. When that happens, it should be easy to swap out those hacked up box-model properties for ones intended for layout. Though it will be a while before new layout modules are here, using the right properties to handle layout instead of compensating for the quirks of our current limited set of properties will most certainly help condense page weight.
6. Document your work
David Shea’s markup guide illustrates the proper usage for HTML tags and how those are represented on his site, mezzoblue.com. Even sites without dynamic HTML can have this simple and effective guide (using its own CSS file, of course!) as a starting point of documentation.
For a team of designers, it is extremely important to communicate regularly so that markup and style rules are created in a consistent way, and also to create site standards. For example, if someone comes up with way to markup a tab interface for the site, documentation will keep others from duplicating that effort, preventing code bloat in the HTML and CSS.
Documentation, including markup guides and style sheet guides, is not just for group efforts — they are just as important for a one-man design team. After all, a year after working on other things, revisiting one of your own projects can feel quite foreign. Your future self might appreciate reminder of how your CSS grid framework is supposed to work, or what pages already have a treatment for a secondary action form button, and it will save you or someone else from appending redundant and unnecessary rules to your CSS.
The choice to use documentation has a bonus side effect of being a great place to park explanations that otherwise must be included as CSS comments. CSS comments are great for sectioning off chunks of long CSS files, but verbose comments that are used to explain design choices can add to file size, and might be better suited to a markup and style guide. Documenting your code using CSS comments within your working file is most definitely better than nothing at all, but housing that material in separate documentation is a great way to keep the code focus and free from bloat.
7. Make use of compression
Some great applications have been created to compress and optimize CSS for you, allowing you to serve a human-unreadable but still browser-friendly files that are a fraction of the origional working copies. Applications like CSSTidy and the YUI Compressor can compress whitespace, detect and correct for CSS properties that are overwrite each other, and look for opportunites to use CSS shorthand that you may have missed. (These types of applications are excellent sources to read about, if for no other reason, to learn what things you can further do by hand).
Even popular text editors like BBEdit, TextMate, and TopStyle, can help format your CSS files to your liking. There are also options serve zip versions of your CSS files using PHP. You can find more CSS compressors and optimizers in the post List of CSS Tools.
It is important to note that these applications do their best to minimize errors, but they aren’t always perfect. Also, they work best when browser hacks are not included in the file set (which is yet another reason to keep those hacks external).
There is one last type of application that can help prune CSS file size I’d like to mention. It can crawl a web site and log which CSS rules and declarations are not being applied, then bring these to your attention. Unfortunately, this tool hasn’t been inventend yet, but I would gladly pay for such a application.
I can recall times when I’ve been afraid to delete certain rules because there is no documentation that explains to me that those selectors are leftover from previous iterations of development. If an app can bring those rules to my attention, that will help with maintenance and keeping CSS files lean.
Conclusion
Clean and optimized code is important not just for file size, but for maintenance and readability as well. The principles mentioned above are good considerations not just for CSS, but can be applied to HTML, JavaScript, and other programming languages. CSS files are not as prominent as the rendering of your web site to an end-user, but consideration of the above principles can help with both the user experience (in the form of smaller file sizes) and the developer experience (cleaner code). Apply these principles to your current and future projects, and and you will surely appreciate the efforts.
About the author
Tony White runs the one-man show Ask the CSS Guy, an after-hours blog devoted to peaking under the hood of CSS and JavaScript web-design techniques, as well as troubleshooting CSS-related problems. He resides in Memphis, Tennessee.
18 Aug 2008 00:31:15 | Vitaly Friedman & Sven Lennartz | Monday Inspiration,design,inspiration,interface,technology,ui,user,videos | Comments
Good user interfaces are crucial for good user experience. It doesn’t matter how good a technology is — if we, designers, don’t manage to make user interface as intuitive and attractive as possible, the technology will hardly reach a breakthrough. To gain the interest in a new product or technology, users need to understand its advantages or find themselves impressed or involved.
And here is where creative ideas and unusual interface approaches become important. Innovative doesn’t mean usable and usable hardly means innovative. As usual, it’s necessary to find an optimal trade-off. And some user interfaces manage to achieve just that.
Below we present 10 recent developments in the field of user experience design. Most techniques may seem very futuristic, but some of them are already reality. And in fact, they are extremely impressive. Keep in mind: they can become ubiquitous in the next years.
You may also want to take a look at the related posts:
Over years we’ve managed to get used to traditional 2D gaming experience. Fez provides gamers with a new perspective for a new level of gaming experience. Things start to get interesting on 00:30. [via]
Futuristic Glass
This futuristic concept aims to integrate the capabilities of online-services in our daily life. Since web users can now access the Web everywhere and all the time, one can use their mobility for a number of useful applications. For instance, to provide assistance in a city guide, translate texts, look up some data in encyclopedia etc. A futuristic concept which is likely to become reality in the near future.
Aurora User Interface
Recently Adaptive Path has presented a new browser concept which was developed in partnership with Mozilla Labs and is an ongoing initiative to encourage designers and developers to contribute their own visions of the future of the browser and the Web.
The main idea of the concept is to represent users, places and virtual objects within a three-dimensional user interface (spatial view). The interaction with objects is intuitive and follows physical rules from our daily life: users can grab, lift, pull, push and drop everything.
The interface is event-based as users and updates are displayed on the screen on demand; communication and collaboration is embedded in the browser. Related objects are grouped into clusters which can be navigated using a dock at the bottom of the screen. The concept is released under Creative Commons Attribution-Noncommercial-Share Alike 3.0 license and is available on the Mozilla Labs site. Video Part 2, Video Part 3 [ via ].
jDome: New Level Of Gaming Experience
John Nilsson’s jDome lets gamers see about 50% more of the game they are playing. The main idea behind the interface to to alter the Field of View (FOV) in a game with a few simple commands and use a projector to provide gamers with a 180-degrees of game display.
“Just put a jDome in front of a projector, mirror the image in the projector, start your game and change the Field of View in it. You don’t need special computer hardware or software — just one projector and a jDome display.” [via]
Motorolla Sparrow
Motorola Sparrow is supposed to provide retail stores with a mobile point of sale device to make it as easy for customers to pay for a product and leave the store. It combines a scanner, point of sale (POS) system, RFID, communication and credit card reading capabilities into one mobile device.
Both the front and back of the Sparrow are equipped with touch sensitive areas, supposedly making it easier to navigate and use. Beautiful design and really appealing user interface. Designed by Aruliden Studio. via]
Tilty Snake
Tilty Snake uses the accelerometer in a Monome 64 to create a new interface for the old mobile phone game Snake. Works out to be very tactile, intuitive, responsive and quite fun. Simple and beautiful. We, at Smashing Magazine, would love to see the same design for our beloved Tetris. Probably we’ll see more tactile interfaces in the future. And why is iPhone actually not tactile?
Brainloop: Thought Control
BrainLoop is an interactive performance platform that enables users to manipulate objects on the screen with pure brain — by imagining specific motor commands, without single touch or click. We are not sure how effective this approach is, but it is definitely an unusual user interface.
Eyeliner 3D
Eyeliner 3D is a high-definition projection system by Musion basically uses innovative HD video projection to produce three dimensional, holographic images within a stage setting. Recently, it was used to promote Toyota’s Auris at the Bluewater Shopping Centre in Europe, as well as for a fashion show. We’ll definitely see more holographic user interfaces in the future.
faceAPI
faceAPI is the technology whill will enable automated 3-dimensional tracking of heads and faces using a webcam along with a tracking software.
“This 3D head-tracking software from Seeing Machines can track head position in X,Y and Z - unlike the Sony headtracker. This means you miss out on the cool “zoom” effects when you get close to the screen, because the software has no understand of how far away you are from the screen. The faceAPI tracks head position in Z too, allowing much cooler effects - and more robust tracking.”
Ringo: Holographic User Interface
Ringo is a concept which demonstrates simple possibilities of having the holographic shadow instead of a PDA or a cell phone. It’s not produced and not developed yet. But it looks very promising and like something we may really get used to in the future. Developed by Ivan Tihienko.
Composition of the table
Composition of the table was designed by Toshio Iwai to create the mixed reailty experience: the user interface blends images and sounds for rich user interaction. “Projectors suspended from the ceiling project computer generated images onto the tables and interfaces. This images change in real time as if they were physically attached to the interfaces when players operate them.
Also sounds are produced in relation to the movement of images. Since the interfaces have close relation to the reaction of images, players can operate images and sounds in the same way when they operates ordinary interfaces and gradually feels these illusions as equivalent as the actual objects. Push, Twist, Turn and Slide are the four features that each of the table specializes in.” [via]
Last Click
Housed in the Comcast Center, this 10-million pixel video wall is touted as the largest four-millimeter LED screen in the world, measuring 83.3ft x 25.4ft. It’s an automated control room, home to 27 000 gigabytes of information, six dx-700 led digitizers, seven encore video processors and three matrixpro routers.
Related articles
You may also want to take a look at the related posts:
15 Aug 2008 14:38:19 | Vitaly Friedman & Sven Lennartz | Events,ampersands,typography | Comments
By Huw Wilkins
Ampersands have long been the character in a typeface with which typographers can indulge themselves. Sweeping curves, flirtatious finishes and bold statements - these are the things that make ampersands an exciting character to use and, better still, to design.
Can you spot what typeface is used to display the ampersand in the image above? Large view
There are, however, two problems. The first is that the English language gives us few situations to use such a daring character. We seldom get to show off these beautiful examples of typography. The second is that the poor little ampersand so often goes unnoticed.
Allow me to share with you my top 10 different styles of ampersands. Some are similar, but each have their own personality. In an effort to limit my sample selection, I have only chosen ampersands from freely available sans fonts.
1. Nilland
Here we have a pretty run-of-the-mill ampersand. It comes from the font Nilland. You see this style in common fonts like Helvetica and Arial. It has the classic one piece figure-of-eight body. The little horizontal tail finishes this character off nicely, it seems to give a certain perkiness that it otherwise might have lacked.
2. Bitstream Vera Sans
You might recognise this style as well. This particular character comes from Bitstream Vera Sans. There are a few ways to look at this ampersand, and this is one of the reasons this character works so well. It looks like the ampersand above, only with the top right side of the figure-of-eight cut out (yet it actually ends up not looking very much like the above character). It also looks like a sweeping back-to-front 3 with a extension from the middle (you can see this better if you turn your head so your left ear is pressed against your shoulder).
3. BPmono
This is where things start to get a little weird. Is it a ‘g’ gone wrong? Is it a swan? Is it a fishing hook? Actually it’s the ampersand from BPmono. I probably shouldn’t have likened it to a swan and a fish hook, because now you’re probably having a hard time seeing it for what it is… a sweet little ampersand with a cute tucked in style.
4. Kontrapunkt
Here we have another style entirely. It’s an evolution of what you might see in handwriting. However, on paper the line would be drawn down the middle of the ‘E’ shape. This is the font Kontrapunkt, so it’s been given angles and a lovely boldness.
5. Diavlo
Diavlo is a great font with nice tips, and this character is no exception. At this size it looks like it has an oriental brush stroke style.
6. La Peruta FLF
Oh! I’m glad someone managed to prop up that eight before it fell over… wait let’s make that into an ampersand. LaPerutaFLF, with a name like that, you have to be cheeky.
7. Skia
Another more classical approach from Skia. The nice variation here is how the two halves intersect in that off-set way.
8. Tuffy
And. There’s no confusion here. It knows what it’s there to do and does it. Somehow, though, in this font it looks great. Nice one, Tuffy.
9. Lacuna
I’ve decided to finish off with two italicized ampersands. This one is from Lacuna and looks like some kind of crazy ‘e’. Somehow, with that cross bar and the horizontal plate at the end, it still ends up feeling like an ampersand.
10. Fontin
And last, but certainly not least, here is the italicized ampersand from Fontin. It has a cheeky bulbous bottom and that classic plate finish.
So there we have it. 10 interesting takes on the ampersand. I hope you’ve been educated, I hope you have fallen in love with typography a little more, and I hope that next time you are creating a typeface you will be inspired to make an ampersand with attitude.
About the author
Huw Wilkins is the lead creative for a digital agency. He has a passion for user experience, usability, interfaces and good design. He also has a background in development. His little corner of the web is at huwshimi.com.
15 Aug 2008 13:59:10 | Vitaly Friedman & Sven Lennartz | Events,discussion,ideas | Comments
By Joel Eby
When designing for the Web, how important is it to begin with a brilliant idea for a web-site? Can a quality site be built if the underlying concept is weak? And what happens to a brilliant idea if its execution is less-than amazing?
Many hold that execution is a secondory factor to the concept. I believe the opposite argument can be made – it’s not a great idea that counts most, but great execution.
Now don’t get me wrong – there has to be an idea in there somewhere. As designers we can’t go about designing without a plan. It is vital to have a concept to rally around as we craft our designs. But the notion that great work requires a completely unique, brilliant concept every time is, I believe, misguided.
Ideas should be solid – even if they’re simple. They should be focused on giving our execution a goal. Developing an idea is important, but the bulk of our energy ought to be aimed at execution. If a designer takes care to make sure to execute on the basics – typography, composition, hierarchy, communication – and aims for a clear but simple goal, great work will result.
About the author
Joel Eby serves as Art Director at POP, an interactive design agency in Seattle. His work includes microsites for clients such as Nintendo and Ubisoft, and motion graphics work for Amazon.com.
Editor’s note
This post is one of the finalists of our guest author contest. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of backlinks, traffic and further data.
15 Aug 2008 12:48:36 | Vitaly Friedman & Sven Lennartz | Events,Monday Inspiration,clock,display,time,visualization | Comments
By Haroon Baig
Clocks don’t have to be boring. Of course, clocks need need to remain usable and display current time; however, they can do it in a number of creative ways. You are about to see some of the most creative examples out there. Take some time and enjoy.
1. Uniqlock
What shall I say. If the others are songs, Uniqlock is the concert. Japanese girls dance focusing your attention away from the passing time. Probably one of the strangest — unique — clock screensavers out there.
2. Word Clock
Whether you hate or love Helvetica, you’ll just love Word Clock (for you haters out there the typeface can be changed). Simon Heys, the creative director of Tonic, definitely deserves the place on the podium with this stunning piece. You can download the screensaver (PC and Mac) as well as an iPhone application here.
3. DropClock
DropClock is an aesthetically intriguing motion clock screensaver. Every minute of real time is numerically expressed with heavy helvetica dropping into water in super slow-motion. An impressive piece of art by Yugop. You can get the screensaver here (PC and Mac, price: $15).
Just in time is the message of this advertising banner for FedEx, which won a Gold Lion in the Cyber Lions category in Cannes 2005. And deservedly so. You get the message.
6. Pulse Clock
This neat little Actionscript Experiment by Mrdoob currently rocking at HiReS! convinces through simplicity and aesthetics. Built using Papervision3D to experiment with real-time shadows.
7. Humanclock
Humanclock is a project by Craig D. Giffen. People from all over the world submit pictures with certain times on them. Every minute there is a new picture telling the current time. Simple as that. Read the project page for more info (you’ll find an analogue version, too).
8. Industrial Clock
Way back in 2000 the design legend Yugo Nakamura aka Yugop amazed the community with his Industrial Clock. It is not exaggerated to say that this piece has created a whole new genre of “video clocks” and served many others as inspiration (as you can see in some other examples).
9. Grid-Based Clock
This clock is built by Geoffroy Delobel and based on an idea by Sleepatwork. The Grid Based Clock is a rather “constructivist” approach to display the time. Its elementary formal vocabulary makes a unique and unusual charm. You can get the screensaver here (PC and Mac).
10. Clockr
Mario Klingemann (aka Quasimondo) came up with this classic. Clockr uses random digit images from Flickr to display the current time.Click on a number to change the image, double-click it to view the full image. Use the mouse wheel to cycle through (just give it some time if it doesn’t display the images right away). You can download the screensaver here (Win only).
Runners-up
Well, they might not made it to the top 10, but they are definitely worth a look:
You disagree with the order? What is your favourite? You know another amazing clocks that are missing? Please use the comment section to show your examples!
About the author
Haroon Baig is a communication designer currently working as a User Interface Designer in Germany.
Editor’s note
This post is one of the finalists of our guest author contest. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of backlinks, traffic and further data.
14 Aug 2008 13:59:59 | Vitaly Friedman & Sven Lennartz | Events,approach,design,horizontal | Comments
By Edison Morais
In the 90s, as the Web was just starting to take off, designers used horizontal layouts — rather in an experimental way, just to give users and designers an idea of what HTML was actually capable of. From the usability perspective it was horrible — sites were hard to scroll and the content was hard to read.
After horizontal approach has lost its novelty, it was quickly discarded and widely rejected. Surprisingly it seems to have managed to get back on track recently. The horizontal scroll is gaining forces and it’s not that horrible this time. Why? Simply because we have a new generation of computer devices, such as mice with a 4-way scrolling wheel and widescreen monitors. We have a lot of space area and we have an efficent and user-friendly way to navigate horizontally.
Here are good examples of horizontal layout navigation used in modern web-applications.
A micro blogging platform Plurk displays plurks (posts) in a timeline view that makes it easier for users to relate the data to some specific time. Plurks (positioned horizontally) can be easily distinguished from comments (positioned vertically). You can navigate via keyboard arrows or using a usual mouse wheel: when you scroll vertically, the page will be scrolled horizontally.
PicLens, a popular Firefox plugin that offers a 3D experience for photos and videos, uses horizontal approach for the primary navigation. As the users scroll, images (displayed on a horizontal wall) flow in front of users’ eyes.
It seems that horizontal approach is currently used primarily for visualization purposes, but it can be used for “normal” designs too. Will we see this approach more often in the future? Can you imagine further situations in which you would use horizontal layout for your projects? Share your thoughts in the comments!
Edison Morais is an insider Brazilian geek. Former SEO analyst, is researcher of new media, cyber culture and information, specifically how information is created, organized and distributed. He’s also a blogger. You can check more of his work on Conexoes.
Editor’s note
This post is one of the finalists of our guest author contest. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of backlinks, traffic and further data.
14 Aug 2008 09:17:48 | Vitaly Friedman & Sven Lennartz | Events,Monday Inspiration,characters,inspiration,mascots | Comments
Characters live amongst us — in graffiti, as vinyl dolls, as commercial identity icons and almost everywhere. A character communicates content without actually saying a word. We can see the use of characters in advertising, consumerism and in contemporary art growing more and more important and diverse.
In this post I’m presenting 10 examples of breathtaking contemporary character design with excellent use of colors, visual elements, proportions and texture.
Go Characters!
Gaston Caba Gaston Caba is a famous illustrator from Buenos Aires, Argentina. These 2 guys are original mascot designs for the Adidas Original Diesel Denim launch party in Shanghai.
Eyeport Eyeport is Lee Hasler, an illustrator from Great Britain. Eyeport illustrates uncanny isometric characters with unique style and strong colors.
The Beast is Back The beast is Christopher Lee from the US. The beast has a super cool method of adding volume to characters thus breathing life into them.
Christian Montenegro Christian Montenegro is worldwide famous for his breathtaking visual language. He published a stunning book called “The Creation” (a must buy!) and he works with magazines from all over the world.
Mar Hernández Mar Hernández aka malota is a young artist from Spain. Her works are filled with brilliant characters - don’t miss the Greenville short in her portfolio.
KHUAN+KTRON KHUAN+KTRON are two super talented designers from Belgium. Their work revolves around drawing up a universal iconographic language system.
Parquerama Matias Vigliano is a part of Doma collective. He designs plush and vinyl dolls, limited edition posters, books and more…
Eugene and Louise bakery Eugene and Louise bakery is dreams come true, a bakery filled with characters made from chocolate, marzipan, cupcakes and milk.
Meomi MEOMI is Vicki Wong (Vancouver) and Michael Murphy (LA). Meomy are the authors and illustrators of the Octonauts children’s books series and the mascots for the Vancouver Winter Olympic Games.
Colorblok Colorblok is a company directed by Juliana Pedemonte. Colorblock are into character and motion graphic design for various clients such as MTV, VH1 and Nickelodeon.
About the author
Hagit Hashimshony is a well known designer from Tel Aviv Israel and the founder of Tea Party Studio. Hagit specializes in pre-production for animation, illustration and art direction. She believes in solving the world’s problems through simple and clean design. Write me…
Editor’s note
This post is one of the finalists of our guest author contest. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of backlinks, traffic and further data.
14 Aug 2008 08:55:16 | Vitaly Friedman & Sven Lennartz | Events,illustrator,photoshop,workflow | Comments
By Andy Brown
So you have done some initial sketches for the look of your new design. Now it’s time to develop these ideas. So let’s jump into Photoshop. Stop! Wait just a minute. What about Illustrator? That can do web-design stuff too, can’t it?
For the “its time to develop these sketches”-stage of designing a site it’s worth giving Illustrator a try. You’d be surprised. Sure you can create precise finished results in Photoshop; yet Illustrator excels at generating loads of designs quickly. Comparing designs is easy — just spread them out all over your canvas. It’s faster to move things around. It’s easier to resize things. It’s not that Illustrator is better. It’s just different.
The designs you’ve done now might not be polished to perfection, but you can certainly tell which are worth developing and which you need to chuck. After all, it doesn’t matter how much time you spend polishing a bad design — it just never becomes a good design.
If we take the analogy of polishing a step further, when polishing a stone you start with a very coarse paper or grit and work your way gradually to a very fine paper or grit. In the same way you don’t just jump from rough idea to final polish. It doesn’t give good results.
For that final polish, Photoshop (in my opinion) cannot be beaten. However for the stage between initial sketches and finishing touches Illustrator is a worthy tool and worth a try if you haven’t already.
About the author
Andy Brown has a boring name but tries not to do boring design. He enjoys writing and designing. He works for a lovely company near Birmingham in the UK.
Editor’s note
This post is one of the finalists of our guest author contest. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of backlinks, traffic and further data.
13 Aug 2008 19:53:04 | Vitaly Friedman & Sven Lennartz | CSS,Events,coding,css,tables | Comments
By R. Christie
Tables got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, amount of detail we have to look over to, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap!
First things first
We start with a valid xhtml 1.0 strict markup. Here is an example of a valid table markup:
...
...
...
...
...
...
You can read more about xhtml table markup in HTML Dog’s Table Section. I have tested the tables below on Mozilla Firefox 3, IE 6 and 7, Opera 9.x and Safari. Also note that I use a light blue color scheme to all of these tables to give the article a consistent look. You can modify the color scheme to match your site.
Before we start, let’s review the general rule of thumb when styling tables:
Tables love space. Set the width of tables carefully according the contents. If you don’t know the perfect width, simply set the width of the table to 100%. Tables look nicer when they are overwidth rather than skinny.
Cells need some distance. Sure, each table cells relates to each other. But that doesn’t mean we have to pull them too close, yes? Give some space between the cells, crammed up table cells are so much harder to read.
Treat tables like the way you treat texts. Tables are read, much like we read text - except it’s harder and it takes more time to read a table. So be careful with the amount of contrast you are giving to your table. Use soft colors - it’s easier in the eyes. Don’t treat your table like it’s a graphical decoration. Make sure the style you apply to makes it more readable, not the other way around.
Now that we are all beefed up. Let’s get going, shall we?
1. Horizontal Minimalist
Horizontal tables are tables that are read more horizontally than vertically, each entity is represented by a row. You can style these types of tables with minimalist style. Simply set enough padding to the cells (td and th) and put a 2 pixel border underneath the header.
Employee
Salary
Bonus
Supervisor
Stephen C. Cox
$300
$50
Bob
Josephin Tan
$150
-
Annie
Joyce Ming
$200
$35
Andy
James A. Pentel
$175
$25
Annie
Because horizontal tables are read more horizontally, clearing the border of the table simply increases the efficiency of the table. The lack of border, however, makes this table design hard to read if it has too many rows. To counter it we simply add 1 pixel border underneath all td elements:
Employee
Salary
Bonus
Supervisor
Stephen C. Cox
$300
$50
Bob
Josephin Tan
$150
-
Annie
Joyce Ming
$200
$35
Andy
James A. Pentel
$175
$25
Annie
The tr:hover rules are very useful to aid people reading a minimalist designed tables. When the mouse cursor hover over a cell, immediately the rest of the cells in the same row highlights, making it easier to track things if your tables has many columns.
Important!
Carefully fine tune the typography and the padding between the cells
Pros
Very easy to style, good for simple tables
Cons
tr:hover rules don’t work in IE 6, table can be confusing if it has too many columns
Play with
Color scheme, typography, tr:hover effects
2. Vertical Minimalist
Although rarely used, a vertically read table is useful in categorizing or comparing descriptions of objects, with each entity represented by a column. We can style it in minimalist style by creating white space separators between columns.
Comedy
Adventure
Action
Children
Scary Movie
Indiana Jones
The Punisher
Wall-E
Epic Movie
Star Wars
Bad Boys
Madagascar
Spartan
LOTR
Die Hard
Finding Nemo
Dr. Dolittle
The Mummy
300
A Bug’s Life
Add large size border-left and border-right with the same color as background. You can use transparent borders if you want, but IE 6 screws it all up. Since this is a vertically read table, adding tr:hover does not help, instead hindering the effort to read it. There is perhaps a Javascript way to highlight the whole column when a mouseover event occurs, but that is beyond the scope of this article.
Important!
Carefully fine tune the typography and the padding between the cells, do not add tr:hover effect
Pros
Easy to style, good for simple tables
Cons
Cannot be used if background is not a solid block of color, suitable only for some tables
Play With
Color scheme and typography
3. Box
The most dependable of all style, the box style works for all kinds of tables. Pick a good color scheme and then distribute background-color to all the cells. Don’t forget to accentuate the differences of each cell by giving border as a separator. An example of box style table is as such:
Employee
Salary
Bonus
Supervisor
Stephen C. Cox
$300
$50
Bob
Josephin Tan
$150
-
Annie
Joyce Ming
$200
$35
Andy
James A. Pentel
$175
$25
Annie
Comedy
Adventure
Action
Children
Scary Movie
Indiana Jones
The Punisher
Wall-E
Epic Movie
Star Wars
Bad Boys
Madagascar
Spartan
LOTR
Die Hard
Finding Nemo
Dr. Dolittle
The Mummy
300
A Bug’s Life
This style is probably the most used style in the internet. The tricky part is actually trying to find the color scheme that matches with your site. If your site is heavy on graphics, it will be pretty hard to use this style.
Important!
Choose a color scheme that matches with your site
Pros
Easy to style, flexible for large or small tables
Cons
Choosing the perfect color scheme could be tricky
Play with
Colors and borders, use dashed or dotted to achieve cute effects, typography, icons
4. Horizontal Zebra
Zebra style tables are pretty attractive and usable. The different background color can serve as a visual cue for people when scanning the table. To style a table as zebra, simply put a class='odd' every odd ordered tr tags and define a style for it.
...
...
...
...
...
...
Employee
Salary
Bonus
Supervisor
Stephen C. Cox
$300
$50
Bob
Josephin Tan
$150
-
Annie
Joyce Ming
$200
$35
Andy
James A. Pentel
$175
$25
Annie
Important!
Do not put too much contrast on the zebra colors, you can blind your viewer
Pros
The zebra pattern can help people scan the table
Cons
Adding class='odd' manually can be very tedious for large tables, many content management system does not provide even odd features on a table loop, picking the color scheme may be tricky
Play With
Contrasting color, borders, typography, icons
5. Vertical Zebra Style
Vertical zebra is easier to style than the horizontal one, as we can make use of colgroup and col elements to distribute column classes. The code becomes something like this:
< scope='col' id='vzebra-comedy'>Employee ...
...
The colgroup element actually applies a style or class to the table, columnwise. Instead of tediously giving class to the first td or th element, we can use a more convenient colgroup. For more information about colgroup visit this source.
Comedy
Adventure
Action
Children
Scary Movie
Indiana Jones
The Punisher
Wall-E
Epic Movie
Star Wars
Bad Boys
Madagascar
Spartan
LOTR
Die Hard
Finding Nemo
Dr. Dolittle
The Mummy
300
A Bug’s Life
Although perhaps more suitable for vertically read table, this zebra style can also be used for any kind of table.
Important!
Do not put too much contrast on the zebra colors, you can blind your viewer
Pros
Suitable for all types of tables
Cons
Choosing the color scheme could be tricky, need to add colgroup elements
Play With
Contrasting color, borders, colgroup and col, icons and typography
6. One Column Emphasis
In some tables, a column may have higher hierarchy than the rest. If that’s the case, you can use colgroup and col to make that particular column stands out. In the example below, the first column serve as the starting point to read, so it is emphasized, just like we emphasize the first letter of the paragraph as drop caps:
Company
Q1
Q2
Q3
Q4
Microsoft
20.3
30.5
23.5
40.3
Google
50.2
40.63
45.23
39.3
Apple
25.4
30.2
33.3
36.7
IBM
20.4
15.6
22.3
29.3
You can also use one column emphasis technique to point out something important, say the column containing totals of an accounting table, or in a comparison table - for computer specification perhaps, the winning entity (column).
Important!
Be careful, don’t overdo the emphasis or the column will jump out, distracting the effort to read the rest of the columns.
Pros
Very effective when used in certain kind of tables
Cons
The necessary tr:hover effect does not work in IE, suitable for certain types of tables only
Play with
Color scheme, typography, icons and tr:hover effects
7. Newspaper
To achieve newspaper effect, apply border to table element and play with the cells inside. A quick, minimalist newspaper style can look like this:
Company
Q1
Q2
Q3
Q4
Microsoft
20.3
30.5
23.5
40.3
Google
50.2
40.63
45.23
39.3
Apple
25.4
30.2
33.3
36.7
IBM
20.4
15.6
22.3
29.3
Simply play with color scheme, borders, padding, backgrounds, and tr:hover effects of the cells (td and th). Other alternatives is presented below:
Company
Q1
Q2
Q3
Q4
The above data were fictional and made up, please do not sue me
Microsoft
20.3
30.5
23.5
40.3
Google
50.2
40.63
45.23
39.3
Apple
25.4
30.2
33.3
36.7
IBM
20.4
15.6
22.3
29.3
Favorite
Great
Nice
Bad
Passion of the Christ
Bourne Ultimatum
Shoot ‘Em Up
Ali
The Big Fish
The Mummy
Apocalypto
Monster
Shawshank Redemption
Cold Mountain
Indiana Jones
Dead or Alive
Greatest Story Ever Told
I Am Legend
Star Wars
Saw 3
Important!
Be careful with border-collapse, do not lose the signature border around the table!
Pros
Gives a royal, authorative aura to a table easily
Cons
Unsuitable for large tables (it loses it’s charm on large tables)
Play With
Typography, color scheme, background, border, padding, and tr:hover effects
8. Rounded Corner
Rounded corners are slick and modern, and it’s easy to apply it to a table, although you need to fire up your photoshop for this. Create images for all four corners of your table. Theoretically, we can make use of the nesting tr and td elements to place the left and right corners of the table without adding additional markup. Unfortunately
