The FontFeed » The Logos of Web 2.0

The Logos of Web 2.0 There is no official standard for what makes something “Web 2.0”, but there certainly are a few tell-tale signs. These new sites usually feature modern web technologies like Ajax and often have something to do with building online communities. You can see some of these striking commonalities in Ludwig Gatzke’s compilation of nearly 400 Web 2.0 logos. The Softies A clear trend in new identities is the use of soft, rounded sans serifs dominated by VAG Rounded (AKA Rundschrift), but also including Helvetica Rounded, Arial Rounded, Bryant, and FF Cocon. Oct. 2008 Update — New and underused fonts in this category: Foco, Tondo, FF Netto, Estilo Text, and FF Unit Rounded. The Futurists Some sites are reflecting the technological breakthroughs of Web 2.0 with a look that says “tomorrow’s techno”. The Classics Safe standbys like Trade and News Gothic, Frutiger, Avenir, Interstate, FF Meta, FF DIN, and the always ubiquitous Helvetica continue to see use in new web logos.

Create a Web 2.0 logo using Abobe Photoshop Here is an extensive tutorial on how you can create a great looking web 2.0 logo (like the one above that I created for the tutorial). Open Adobe Photoshop and create a new file (file>new): 4500×4000 pixels at 300dpi is a nice resolution to choose if you want your logo to be printable. It will be nice to choose this resolution also for this tutorial to have the same output with stroke points and other blending options that are affected by image size. Choose the type tool and type anything you want in uppercase (I typed Typpz as you see :)). Duplicate the layer (right click on the type layer you created>duplicate layer). Select the eliptical Marquee Tool and draw an eclipse like the one below. Choose the Type layer (not the copy one that you were working on in steps 2-3) and click edit>tranform>flip vertical. Now lets create the beta drop. Choose type tool and type beta (or anything you want) and place the layer inside the drop as in my logo. Your logo is now ready. Related

Negative space in logo design It’s hard to beat a clever use of negative space. Here are 35 or so logos that use white space well, along with the designers/agencies responsible. A.G. Low Construction logo By Rebecca Low Martin Newcombe Property Maintenance logo By buddy Nexcite logo By AmoreVia Blair Thomson American Institute of Architects Center logo By Pentagram Ogden Plumbing logo By Astuteo WWF By Sir Peter Scott, modified by Landor FreemanWhite logo By Malcolm Grear Designers The Brand Union logo By The Brand Union Egg n Spoon logo (same day couriers) By Thoughtful Human logo By Social UK Dolphin House logo By Ico Design Eaton logo By Lippincott (thanks, Brendan) Elefont logo By Logo Motive Designs USA Network logo By Sean Serio CultureBus logo By Pentagram Carrefour logo Original design examined by Miles Newlyn (thanks Rianna) Henri Ehrhart monogram (shameless) View the design process on David Airey dot com Sinkit logo By smashLAB Guild of Food Writers logo By 300million ED logo By Gianni Bortolotti Conception logo By The Chase

Web 2.0 Design Kit, Part 2 In this continuation of the Web 2.0 Design Kit I’ll show you how to do a few more simple effects that I’ve seen becoming more popular in web design. Diagonal Line Patterns There are a lot of websites out there that use some sort of variation of a diagonal pattern. One of them being this website (look up) and a few other sites. The first thing you’ll want to do is create a new document by going to [File > New] or pressing [Ctrl + N]. Since my document is so tiny I’m going to zoom in as close as possible, 1600%, by pressing [Ctrl + =]. Select All by pressing [Ctrl + A] and go to [Edit > Define Pattern...]. Your new pattern is now ready to use. You can click on the down arrow next to the current pattern, if your new one isn’t selected, to find your pattern. Press OK to finish the new Pattern Fill layer. It’s pretty ugly right now, so I’m going to drop the Opacity of the new layer to around [15%]. Draw your line diagonally holding the [Shift] key to make sure it’s completely diagonal.

30 Minimal Logo Designs that Say More with Less A logo is the visual cornerstone of one’s branding. While some logos are complex, often the most memorable ones are those that are simplistic. Instead of relying on detailed graphics and icons, these minimal logos rely on creative typography, simple shapes, and clever negative space to tell the story. Here is a showcase of 30 minimal logo designs that say more with less. About the Author Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. Related Posts 1753 shares Examples of Effective Minimalism in Logo Design When trying to create something visually impressive, it’s tempting to use lots of eye candy or overloaded detail. Read More 317 shares 40 Brilliant Type-Only Logo Designs Logos do not always have to include some type of symbol or icon to be effective.