In 2009, London 2012 ran a competition inviting young designers the opportunity to create a special version of the London 2012 logo. Designers aged between 16 and 21 were eligible to enter an “infill” for the existing London Olympics logo which will sit alongside the official and Paralympics logos
The logo is arguably the most important aspect of any brand to get right. It's intended to show the personality of a brand and instantly convey what the company does at a glance. Logos shouldn't ever be difficult to figure out, or it's pretty pointless having one - unless perhaps your target
Can you imagine a brand or a company without a logo? I guess not. It would probably be like a person without identity. As we know, all of the top brands/companies have one thing in common: a great logo design. Designing the perfect identity is important and can make your brand and/or company
Despite the inherent simplicity, logo design can be surprisingly difficult. Fitting in all of the necessary facets and considering all of the constraints can be a challenge for any designer. Attempting to invent new techniques for every new logo is a losing strategy; the best logos are based
The London 2012 Olympic Committee logo. Released last week to critical acclaim (lighter on the 'acclaim', heavier on the 'critical'), so far it's been variously described as 'a dodgy set of legwarmers', 'a pink day-glo pig's abortion of a logo' and 'Lisa Simpson performing an obscene act'. Doesn't
Simplicity and clarity are the hallmarks of great logos, so when you find a designer like James Waldner who is able to articulate complex ideas through logo design, you take notice — and we have. James has a unique ability to create beautiful logos while maintaining an uncomplicated, easy
Continuing on from the last instalment in "Surviving logo design in the real world," Felix writes about designing logos for application. Most of the time as a designer, you will walk around with your logo radar on and find some intriguing logos -- some very nice and some not so nice. On a rare
Last week, in the first part of this series on the fundamentals of logo design, we looked at some of the qualities that a good logo should have. When you’re getting started with logo design it can be helpful to think about the categories that logos fall into. These are: Typographic Type &
- Yahoo! launches surprisingly reasonably priced web hosting for small and medium sized businesses. Unlimited storage and bandwidth for $11.95 per month. Gallery: How Google Got Its Colorful Logo - The various iterations that the designer of Google's logo went through before settling
Logo design is its own form of art. Designers must integrate branded colors, shapes, and even words into a logo all the while balancing minimalist designs that can be use on the web or on billboards. It’s certainly a challenge. This collection of logos represent a fresh batch of up and coming designers who have come up with some noteworthy concepts Read More: DesignFestival: Showcase of Logo Designs from 20 Inspiring Designers
Continuing on from the last instalment in “Surviving logo design in the real world,” Felix writes about designing logos for application. Most of the time as a designer, you will walk around with your logo radar on and find some intriguing logos — some very nice and some not so nice. On a rare
Continuing on from the last instalment in this series of articles, “Surviving logo design in the real world,” Felix writes about the components of a logo — symbols and wordmarks. As designers, we should all know the difference between a wordmark logo and a symbol based logo. When designing logos
The letterpress style has been popular in logo design in recent years, both for print-based and web-based work. It’s pretty easy to create the letterpress style effect in both Photoshop and Illustrator. I’m using Adobe Illustrator here because it’s a standard tool for logo design. We’ll create
It’s the perennial question for logo designers tasked with creating a wordmark: to create the type from scratch, or to simply modify an existing typeface? As we previously discussed, there is no shame in sprucing up an existing typeface – indeed, some of the world’s most famous
If you asked for the most general definition of a logo, you’d probably get something like “a mark that stands for a company or product.” The implication is that it doesn’t matter what the mark is; anything could work. But then, can we assume the effect of a logo is universal
. These principles are fundamental building blocks for creating visual meaning – and often seen in logo design. To better explain how to utilize gestalt principles in your work, we’ve put together a designer-oriented crash course. Enjoy! Figure-ground Logo: Sony Walkman (via Wikipedia
photo credit: listentoreason
An icon system can often become central design element in your web project. You can find a lot of free or commercial icon sets on the web, and they are often included in major CSS frameworks (Bootstrap 3 Glyphicons, is a perfect example).
Sometimes, however, you may need a specific glyphs not included in a generic set. Or you may just want to better coordinate the design of your icons with the other design elements of your project. In these cases you’ll need to draw a new icon set from scratch.
There are two widely-used methods to add a set of icons to your projects:
- Web font
Today I’m going to cover web fonts. We’ll cover the use of SVG in another article.
Traditionally classic font creation had been a difficult and demanding task, but thankfully building icon font sets , has become considerably easier than it once was thanks to easy online tools such as IcoMoon, Fontastic, or Fontello. Each allows you to build a font from either ‘cherry-picking’ pre-built icons from public libraries, or by uploading SVG files you’ve prepared yourself.
To build your own font, the first step is to draw icons – we will use Illustrator for this task – and then save them as SVG.
Find your design style
Before you start drawing, you need to define style properties for your glyphs such as stroke sizes, grid proportions and so on.
Begin by doing some readability test at different sizes and build a template you will use to draw all your glyphs. It’s no use designing finely-detailed icons that don’t work at lower resolutions.
It’s also very useful to sketch your font before drawing, also a very rough sketch (like the one below) will help you to find ideas for all the symbols you need.
You can then to decide the grid size for your glyph: my tip is to not draw directly at your target size (for example 16x16px) as well as at very big sizes. I’ve found that a square of 60-80px side is often good for me. Scaling up or down from this size is generally successful.
Of course, this is not a ‘set-in-stone’ type rule: project needs and experience will change on a case by case basis.
For this article, I chose to draw my icons with a stroke of 8px, without fill and set inside a grid of 64x64px.
Illustrator artboards are very useful for this job: you can draw each glyph in a different artboard, keeping each in a single file. The artboards can be rearranged, renamed and can be exported as standalone SVG files (which is precisely what we need for IcoMoon).
Each artboard can also have independent axis coordinates, that will be very valuable for objects alignment, as we will see later.
We can now start creating a new 64x64px Illustrator document:
Note that you can start create all the artboards you need using the Number of Artboards option: I prefer to add artboards as I need them, but there is no reason why you can’t create all your artboards first.
The navicon, most of us are familiar with it, have seen it countless of times and have even tapped it more than once on our mobile devices. You might even know it by its various names. The three line menu, drawer, menu icon, side swipe, three stripes or the ever popular hamburger icon are just a few names you will find associated with the navicon. Regardless of the name you give this commonly used icon the point is that it’s been the subject of many debates.
Since a lot of the discussions and arguments bring up navicon’s functionality it will be touched on a little in this article but with an addition. Instead of solely focusing on whether the design and inclusion is counterintuitive or intuitive I’m interested in trying to find out whether or not a new design can replace the widely used navicon. Not only that but figure out whether a change in design will be effective or if a different alternative altogether should be examined and developed.
For those of you who are mobile developers and have experience in the area feel free to give your take on the “hamburger” icon dilemma. Even if you aren’t a developer but a daily mobile device user don’t be afraid to pipe in.
Origins of the “Hamburger” Icon
Before we can even get into the debate of the “hamburger” icon we should really go back and address where did it start. To some the icon just came out of nowhere and became popular overnight. I’m talking celebrity status here. I can’t, and I’m sure you can’t either, visit a site from my mobile device without seeing that three lined behemoth in one of the upper corners.
Now if you ask around where the icon originated you will of course get various answers. Some have said that it was Apple who started it all by introducing it back in 2007. Others will tell you that it was Google while another group will swear that it started with apps like Facebook and Path.
Of course I haven’t seen any hardcore evidence that backs any of these claims. But while one shouldn’t be too quick dismiss things based solely on there being concrete evidence or not I can say that the “hamburger” icon did not originate with any of the aforementioned companies. You see the three lined icon is a lot older than you may think.
So where did it originate? The answer is Xerox or at least that’s what we can say for right now until proven otherwise. That’s right, it was the Xerox Star where we first saw the icon circa 1981. Don’t believe me? Check this out.
That’s right, that means the icon is over 30 years old. Now while it does seem we can credit Xerox with being the first company to use the icon we have to give the credit to Norm Cox, the designer of the interface system.
Despite the fact that some people give the icon some flak for acting as a menu icon it should be noted that when Cox created the symbol it was meant to act as a “container” for contextual menu choices.
Mighty Deals have been a great supporter of SitePoint, as well as a great reservoir of cost-effective front-end resources for developers -- including everything from fonts to textures to patterns to brushes and more.
Today we're going to combine the two, and you get benefits!
Firstly we set a brief for two of our favorite SitePoint design authors - Gabrielle Gosha and Annarita Tranfici.
1). Re-design the original Star Wars Poster, but set the story in an entirely new universe/genre. This could be cowboys, gangster, steampunks, rom-coms, buddy-cop films or bollywood.
2). Choose any two Mighty Deals deals to help your design.
3). Present your poster.
4). Tell us what you did, what deals you selected and why.
You guys get the easy bit! Simply tell us in the comments which poster you like best and why.
We will pick 5 winners out of the comments:
1) First Prize: 1 Person to Win Any Five (5) Deals from the Mighty Deals Collection.
2) Second Prize: 4 People to Win any Two (2) Deals from the Mighty Deals Collection.
Ophelie and I will select the winners on Thursday 19th June.
Mascots have become hugely popular across the web. Although they feel like a 50's TV-era invention, they actually have their origins in a much earlier time than you'd guess. It was way back in the 1870's that Quaker Oats trademarked 'a man in Quaker garb'. And in the 1894's, Michelin introduced 'Bibendu', the Michelin Man who is still the face of the company over 100 years later. Well designed characters can help establish a brand by giving it a more friendly, warm and inviting look. And since we use the social parts of our brain to assess characters, a successful mascot can evoke a more emotional response than a traditional logotype.