{Disarmed} Smashing Newsletter #14 - Safer Surfing - Ampersands - Prototyping - Scheduling - Logos

Smashing Magazine Logo

Issue #14
Tuesday, August 3rd, 2010 | Readers: 36,751
Archive | Twitter | Contact

Table of Contents

1. Safer Surfing With Firefox and NoScript 2
2. 300&65 Ampersands
3. Quplo: Painless Interactive Prototyping
4. Scr.im: Email Address Shortener
5. Stop Worrying About Cross-Time-Zone Scheduling
6. City Logo Design Inspiration
7. Make Mock-Ups Quickly With Image Placeholders
8. New on Smashing Magazine
9. Smashing Network Highlights

Editorial

Last week we released the third book in our eBook series, Mastering Photoshop for Web Design, and it's definitely the best eBook we've published so far. It was written from scratch by our regular writer Thomas Giannattasio, exclusively for Smashing Magazine and its readers.

Screenshot

Mastering Photoshop is written for advanced and intermediate designers who want to brush up on their workflow and improve their Photoshop skills. The eBook contains 178 pages, explaining fundamental techniques that Web designers need to know to produce high-quality work in Photoshop. You won't find any generic step-by-step tutorials or learn random effects. You will gain a profound understanding of what you can do with Photoshop and how to use it effectively in your work. Buy the eBook Now!

1. Safer Surfing With Firefox and NoScript 2

This free browser extension has existed for years, but the recently released version 2 affords us the opportunity to report about it here for the first time. NoScript is important. The add-on contributes to greater security on the Internet. How does it do that? By disabling JavaScript. Okay, it’s a bit more complicated than that. Users themselves determine which websites to approve. And permission can be made global, temporary (i.e. per visit) or for specific areas of a website. It connects to Flash and other browser plug-ins.

Screenshot

This is important because many modern websites are actually mash-ups: they get their data from different servers of different origins. For example, Smashing Magazine gets its pictures and articles from many different computers, not to mention its ads, font-face information (derived from Google), YouTube videos, Facebook’s Like button and the analysis from GetClicky. Almost everything requires JavaScript to work properly. And herein lies the danger. Cross-site scripting (XSS), click-jacking and other threats are not abstract dangers but very real. The risks have increased in recent years. And the people responsible are no longer script kiddies, but rather burgeoning mafia organizations and organized criminals.

NoScript 2 gives control back to the user. You get fine-grained control over what to allow and what to ban. But there is a disadvantage: the add-on sucks in the beginning, when nothing works as usual. It takes a while to set everything as you like it and whitelist whatever needs to be whitelisted. From now on, websites will not work as expected… which is exactly the point. (sl)

See also: Dude, you browse with JavaScript on?

2. 300&65 Ampersands

Originally a ligature of the letters “et” (Latin for “and”), the ampersand is now a full-fledged design tool. With representations that range from traditional to very different from the original form, this symbol offers a lot of creative possibilities. Although there are many ways to represent it, the ampersand is always easy to recognize. Its unique shape and ability to vary in appearance explain its popularity.

Screenshot

300&65 Ampersands is another 365 project that, as you probably guessed, presents one new ampersand a day. The gallery explores an incredible collection of fonts that highlight the beauty of this character. Each day, you will discover a style that you probably haven’t seen before. Links to sources allow you to quickly download these fonts for your own projects. With the endless designs out there, you will never see quite the same ampersand twice. (jb)

3. Quplo: Painless Interactive Prototyping

Creating interactive prototypes for clients (and even for our own projects) can be a pain, especially if programming isn’t your strong point. But sometimes we need an interactive prototype, rather than just a wireframe, and creating a working mock-up can be a waste of time if the client then decides to change half the things you’ve coded.

Quplo lets you create interactive prototypes for your clients with just HTML, CSS, JavaScript and its own mark-up language (Flow). It lets you enter real data and content, rather than lorem ipsum, and it lets you export your prototype as an XML file to make it easier to program the final website. The prototype is available online for your client to see. Quplo even tracks your version history and backs up everything automatically. (cc)

Advertisement:
A web designer’s secret weapon: the all-in-one solution for business websites.

4. Scr.im: Email Address Shortener

If you share your email address on a forum or other public website, spammers can easily find it with bots that scour the Web. Sure, you could write your email address like this: john (dot) doe (at) company (dot) com, but that’s a pain, and it doesn’t look very nice. And it’s only a matter of time before bots can easily translate addresses written that way.

Screenshot

Scr.im lets you use a shortened URL to give out your email address safely and securely in forums. Just enter your email address on Scr.im, and it gives you a link to a page with your email address, with security to prevent bots from viewing it. (cc)

5. Stop Worrying About Cross-Time-Zone Scheduling

Setting up a meeting or webinar across time zones can be a pain. You have to either specify a central zone for the time of the meeting (forcing everyone to look up the difference between that time zone and their own), or figure out the time based on something like Greenwich Mean Time and then hope everyone knows how to calculate the time of the meeting relative to that. It’s a pain for everyone and can make some people miss the meeting.

Screenshot

Permatime.com fixes all that. Just enter the time to hold your meeting or event, and Permatime.com creates a link for you. Send the link to participants (or post it online), and when they click it, they’ll get the time in their own zone. (cc)

6. City Logo Design Inspiration

Everyone knows the famous “I Love New York” logo design. With its simplicity and memorability, it has become the gold standard for city tourism logos. In recent decades, various agencies have created logos that successfully connect with a city’s local population and tourists, taking the art of city marketing to another level. However, while a few become famous beyond their own borders, the majority of these logos don’t travel very far.

Screenshot

Stadtlogo Design (“city logo” in German) is a website that inventories unknown yet beautiful city logos. About 30 countries and a few cities in each are covered, offering plenty of inspiration. Because the descriptions are written in the local language, you might not always understand what is being promoted. But this ability to communicate a message without words is probably what makes these logos effective. (jb)

7. Create Mock-Ups Quickly With Image Placeholders

You’ve created a simple and quick mock-up for a new website; the menu works, the column floats perfectly; the content area has the usual lorem ipsum… all you lack now are images. Why not use image placeholders, like you do with the text, courtesy of Placehold.it.

placeholder

For a quick and dirty solution, just add the image size to Placehold.it’s URL, copy and paste it as source to an image tag, and you’re done. To make it a bit more sophisticated, you can add text and colors for the background and text. You can modify, copy and paste a sample image tag to your needs. (mm)

8. New on Smashing Magazine

Desktop Wallpaper Calendar: August 2010 (by Smashing Editorial)
Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That’s why we have decided to supply you with smashing wallpapers over 12 months. This post features 50 free desktop wallpapers, created by designers across the globe. Both versions with a calendar and without a calendar can be downloaded for free.

Lessons Learned From Maintaining a WordPress Plug-In (by Joost de Valk)
Recently I released a WordPress plugin for Google Analytics that adds a tracking code and dozens of various pieces of meta data to blogs. Since the release of version 4, I've updated it 6 times, to the point where it's now at version 4.0.6. In this article I would like to share with you my experiences in maintaining this and other WordPress plug-ins and common good practices that I've distilled from that work.

In Defense Of Photoshop (by Thomas Giannattasio)
Waves of change are currently rippling through every aspect of the Web. The iPad and other mobile devices are changing the way we access the Internet, while HTML5 and CSS3 promise to change the way we develop it. However, another storm is brewing that threatens Photoshop's throne as the application of choice for Web design. The battle suggests a fundamental shift in the design process from Photoshop to mark-up.

Passing The Holy Milestone: How To Meet Deadlines (by Ben Gremillion)
For too many projects, there comes a time when every action taken, every decision and sacrifice made, is spurred on by pressure to finish. Tempers seem to shrink along with the available days, talk about “high standards” gives way to “good enough,” and people realize that deadlines are aptly named. During the last-minute crunch, someone may well wonder, how did it come to this? Could it have been prevented?

9. Smashing Network Highlights

Network Icon

Web Bug from <a href=http://smashingmagazine.us1.list-manage.com/track/open.php?u=16b832d9ad4b28ed..." width="1" />

10 Free Web UI Element Kits and Stencils | LimeExchange Blog

10 Free Web UI Element Kits and Stencils

Many a times we, web designers spend endless hours mocking up web pages, resulting in wastage of our precious time. Thus, it is advisable to make use of good set of re-usable and uniform Web UI elements for saving both your time and efforts.

Here is a list of completely free Web UI kits and stencils that are perfect for the initial mockup or wireframe stage of a web design project. Most of these kits are editable and are in either .psd, .ai or .png format. Also, you would find some kits that are in Omnigraffle stencils and.svg format.

Modern Web UI Set (.psd)

Modern Web UI Set (.psd)

This free Web UI Set has everything in the PSD file. It contains all the information in well organized folders, and is fully editable using vector layers in Photoshop. From the button shapes, to the gradients, and text, you can edit and recreate everything as per your needs and requirements.

Web UI Element Pack (.psd)

Web UI Element Pack (.psd)

This UI Element Pack in PSD format. It contains 19 elements including Loading Bar, Button toggle, Button in normal and clicked state, close, next, previous and paging icon and slider.

Massive Web UI & Button Set (.psd)

Massive Web UI & Button Set (.psd)

This free UI set contains all of control buttons, search form, collapsible box, info boxes, and bread crumbs in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors, all of which is available in psd file.

Web Page Elements (for Omnigraffle)

Web Page Elements (for Omnigraffle)

Featuring the open-source “Bitstream Vera” font set and free icons, this Web UI set has most of your common web page elements covered, including headings, form elements, content management function, image placeholders, and various other features.

Sketching & Wireframing Kit (.ai, .eps, .pdf & .svg)

Sketching & Wireframing Kit (.ai, .eps, .pdf & .svg)

This kit is a free set of elements that are used for sketching and wireframing. It consists of form elements, icons, feedback messages, indicators, navigation elements, image, tooltips placeholders, sliders, embedded videos and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format and both of these formats can be easily modified.

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle)

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle)

The popular Yahoo! Design Stencil Kit version 1.0 is available for Visio (XML), Adobe Illustrator (PDF and SVG), OmniGraffle, and Adobe Photoshop (PNG). It covers the following topics: Calendars, Ad Units, Carousels, UI Controls, Charts and Tables, Form Elements, Grids, Menus and Buttons, Navigation and Pagination, Mobile, OS Elements, Screen Resolutions, Placeholder Text, Tabs and Windows and Containers.

165 Vector Icons in 5 Colours (.ai, .jpg and .svg)

165 Vector Icons in 5 Colours (.ai, .jpg and .svg)

This kit contains 165 icons in five colors: Red, green, blue, black and white.

Flex 3 Stencil (for Omnigraffle)

Flex 3 Stencil (for Omnigraffle)

This stencil contains all Flex components from the Flex 3 Style Guide, such as data grid, panels, buttons, fields, toggle, links, menu, scrolls, tabs, list, accordion, data picker, errors, and tool tip.

Twitter Widget Stencil (for Omnigraffle)

Twitter Widget Stencil (for Omnigraffle)

This stencil includes a selection of useful Twitter badges and widgets.

Facebook Applications (Omnigraffle)

Facebook Applications (Omnigraffle)

This is a pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.

50 Fantastically Clever Logos

50 Fantastically Clever Logos

Written by Joshua Johnson, On 23rd July 2010.
Filed in Graphics.


screenshot

I know everybody and their brother does logo roundups so you’re probably sick of them, but I don’t believe I’ve ever done one and there is a particularly impressive brand of logo design that I wanted to point out.

Today we’ll look at 50 logos that are the result of going beyond the typical thought process and injecting a little wit and hidden symbolism into the design process.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What Makes a Logo Clever?

To explain what I mean by “clever” logo design, let’s take a look at a typical logo, (i.e. one that isn’t clever).

screenshot

The logo above is a nice piece of work. The colors are perfect, the lettering is masculine, the overall feel is athletic and the glossy effect works well. It’s everything that it needs to be.

However, my favorite type of logo design is that which takes the assignment one step further. Rather than just making something attractive, these designers look at the design process with a pinch of added intelligence and a perspective that skewed enough to see things differently than the rest of the world.

These types of logos make you smile at the brilliance of both the idea and the execution and have several layers of meaning that can hit you in waves. Some are amazing in their obviousness to all who see them and some find excellence in hidden secrets.

I’ve broken down this collection into three categories: visual double entendres (two things in one), word and character art, and ambigrams. Ambigrams definitely also fall into the word art category but I wanted to give them special recognition because they’re so difficult to pull off effectively (if you don’t believe me, try to make one!).

Visual Double Entendres

Lion Bird

If you stare straight at the bird’s feet for a second, a stunningly clear lion’s face emerges. Brilliant design!

screenshot

Chad 2010

I love this one. There’s a sort of ribbon theme that makes both a face and the continent of Africa.

screenshot

Spartan

Simply beautiful use of negative space. The golfer and his swing double as a soldier’s face.

screenshot

DesignTent

A tent and a pencil.

screenshot

Pepperhorn

A pepper and a horn.

screenshot

GreenLabs

Green here is symbolized by a tree and labs is represented by the brain. That’s a sharp looking tree brain!

screenshot

Airtistic

Another pencil idea very similar to the one above. This one is a parachute and a pencil.

screenshot

Ecotaste

A tongue and a leaf. A little creepy but a great idea!

screenshot

Guitarshop

The letter “G” and a guitar. Simple but effective.

screenshot

Mr. Couch

This is definitely one of my favorites. The couch has cleverly been crafted to also be a face with a mustache. Excellent work!

screenshot

Eco Pup

The dog’s ears are leaves. Sometimes subtle is better.

screenshot

Mailhouse

The open envelope creates a house shape.

screenshot

WordRefuge

The open book makes a tent. Not my favorite but it makes for a good visual read.

screenshot

Australian Pork

This one makes me laugh. Australia has been turned into a pig’s snout!

screenshot

MetroMobile

The city skyline doubles as a row of cell phones.

screenshot

PokerHills

I love that the shape of the hills genuinely matches the shape that cards make when you peak at them while they lie face down on the table.

screenshot

Match

This one goes on and on. The matches come together to make a heart. There are two of them (they match). Fire represents passion. etc. etc.

screenshot

ThinkTank

Ideas are often represented by lightbulbs. Turning the phrase “think tank” into a lightbulb tank was genius.

screenshot

Rockit

This one is an excellent piece of art. The rocket blasting off and leaving smoke trails clearly makes a guitar shape.

screenshot

Suitcase

This one is simple but so incredibly effective. It looks like both a suitcase and a folded dress shirt with a tie. The latter really emphasizes the “suit” aspect and therefore represents professionalism.

screenshot

AirTime

Another really subtle double entendre. The hands on the clock make an airplane.

screenshot

Uptown

The buildings in the city skyline are all arrows pointing upward.

screenshot

Country Living Dentistry

The white picket fence is a perfect picture of country life, here it’s been turned into a toothbrush to symbolize dentistry.

screenshot

Push the Bottle

Another excellent use of negative space. The hand pushing a button makes the shape of a bottle. Notice how the fingers of the fist create the liquid in the bottle.

screenshot

Pencil

It’s amazing how little had to be added to make a pencil appear (just a triangle!). Some logo designers really have a gift for simple touches that change everything.

screenshot

Spice Mountain

It definitely looks like both a mountain and a pile of spices.

screenshot

Night Golf

Not only does the round shape of the golf ball reflect that of the moon, the little dips look like craters! A great visual simile.

screenshot

Maritime Law

The logo says everything it needs to. Scales are a clear representation of law and justice and the bowls have been turned into boats to represent the maritime aspect.

screenshot

GradBooks

This idea seems a little obvious but I’m sure it took a lot of tweaking to get to this point.

screenshot

Antisocial Network

The sort of abstract skyline design is a cliche for community and has been transformed into a familiar hand gesture.

screenshot

Mars

Another one of my favorites. The carrot has been beautifully crafted to make a rocket ship.

screenshot

Nurd

The car’s headlights make it look like a big nerd with glasses. Yet another example of the use of subtlety in wit.

screenshot

Bananas Films

The film strips have been hung to mirror the shape of a group of bananas.

screenshot

Food Writers

The negative space in the tip of the old style fountain pen has been turned into a spoon.

screenshot

SparkPlug Creations

This is definitely not the best logo in the world, but the whole lightbulb spark plug idea is pretty clever.

screenshot

Word and Symbol Art

Fish

The word fish has been crafted into the form of a fish. What more could you want in a logo?

screenshot

Bipolar

A few simple typographic characters that perfectly represent the word below.

screenshot

CodeFish

Coding is all about characters so it was perfect to build the fish out of typography.

screenshot

Inequality

The equality symbol has been slightly modified so that the bottom is shorter than the top; a perfect statement of inequality.

screenshot

Fuel Quoter

The quote has been simply turned on its side and it looks remarkably like a gas pump.

screenshot

Infinity Crime Studio

The symbol for infinity has been altered to look like pair of mischievous eyes.

screenshot

Octave

If you’re at all familiar with music theory you know that an octave has eight notes (hence “oct”). Here the “o” and “c” have been stacked to make an eight.

screenshot

Nosey

The impressive part here is how naturally the word seems to make a face. It’s an excellent designer that makes complex ideas look effortless.

screenshot

Twins

The two has been pushed over to look like an “n.” Since the word is “twins,” hiding a two in the logo was a great decision.

screenshot

Upside Down

This one you have to stare at for a second to really appreciate. All the letters are upside down. The “w” is an “m”, the “d” is a “p”, etc.

screenshot

Spork

The obvious solution was to make a spoon and a fork illustration. However, putting the ampersand in represents an extra step in the thought process that makes the idea really unique.

screenshot

Umbrella

At first glance this logo says “brella.” Can you spot the other two letters?

screenshot

Ambigrams

In case you’ve never heard of them before, ambigrams are words or phrases that you can spin around 180 degrees and still read them. They often require quite a bit of work and thought in order to make them easily readable.

Awesome

That sort of Old English look is definitely one of the styles you see the most with ambigrams. Notice how the “e” and “o” have been heavily transformed but still read well in the context of the word as a whole.

screenshot

Edge

It’s not easy to create an “e” that still looks like an “e” when you spin it around. Well done.

screenshot

Eveva

This one feels like an ambigram, but as one astute commenter pointed out, it actually isn’t. The beginning “e” and ending “a” are the same, but the letters in between don’t work when flipped. Nice illusion regardless!

screenshot

Conclusion

I hope the collection above isn’t just another “list post” but instead is a healthy dose of inspiration that encourages you to put a little thought into your logo creation process. When appropriate, consider how you can infuse something unique and witty to make the logo that much better.

Leave a link below and tell us your favorites. Also point us to any logos that match this style that you’ve seen on the web.