Link: http://www.irishdesigndatabase.com

Some cards I’d like to spread around.

If you’re based in Ireland and you work in the creative industry by sure to register your interest so that you are notified once the database is open to submissions. Please note that there is no cost or fee for this service. It is a non-profit/non-commercial project.

A short time ago I was cycling around Amsterdam when I spotted the offices of Surinam Airways and invariably their logo. I stopped the bike to take a closer look at its resemblance to the Lufthansa logo. A couple of weeks pass and I see another airline logo, this time it’s Air India; once again it had characteristics of the Lufthansa bird. After this I began to think more about familiarity within design, there are predefined rules and expectations for nearly every single piece of design out there. When these expectations aren’t fulfilled we can easily feel lost and uncertain. If we are going to change convention it needs to be replaced with something better. There is a very fine line between hitting the right visual note or succumbing to tiresome solutions or in some cases direct copying. I cannot stand plagiarism, it is totally inexcusable; however in this article I am discussing the influence of convention as opposed to stealing. Personally I find many of these airline bird logos to be highly generic and very forgettable. Design with the expectations of the end user in mind is crucial, if it is a box of cereal it needs to look like a box of cereal. On the contrary preconceived notions and ideals can easily play too much of a role in determining the final solution all the while forgetting about innovation and creativity.

It is important for a logo, particularly in the service industry to communicate the service of the company. Birds fly, as do planes, it’s an obvious connection which communicates exactly what it needs to. At what point does designing by convention or common rhetoric become a lazy or boring solution. Design conformity is something that I struggle with on every single project I work on, convention makes it very had to try something drastically new or different, we need and want to feel familiarity. Trying to change convention can easily result in confusion if we’re not careful. If The New York Times decided to change it’s title header type it would no longer be The New York Times. It’s possible to dramatically change things, so long as the change is for the better, but as usual change will met with resistance.

I recently attended a seminar on way-finding, we were introduced to fundamentals, theories and logical reasoning behind way-finding decisions. Way-finding diagrams rely a lot on the convention of urban-planning maps and educated guessing, a green patch on a map means grass, a blue patch translates to water and a gray block is read as buildings; these are not rules but rather elementary standards which define how we approach such a task. We feel comfortable when we see what we know, disregard these expected standards and you better have a superior alternative. We feel comfortable buying a blue carton with a white splash on it as we know it’s milk, even if we can’t read a word on it, mix up the colours and you’ve got a different product. Convention is useful and unavoidable, most of the time it exists because it works but it can nearly always be improved on. As designers this is where we come in, to improve what is already there. This leads me full circle back to the airline logos, they are conforming to the basic idea of a bird in flight but are failing to improving on the concept, all the logos begin to look the same without any clear distinction between each of them.

From a customer point-of-view some of these logos are so similar that in most cases they could be interchanged with one another, there is very little distinction between them. We see this in many areas of design, people who conform to preexisting standards for no reason other than feeling safe, afraid to take risks because they know what has worked, not thinking about advancing but rather freezing in a moment scared to break the mold. The thought of failing is too much to worry about so they settle on the safety of tried and tested design, this way of working will only lead to blind ignorance and tiresome solutions. On your next project try something very different, open up and see what happens. Take a risk.

The bing logo really oozes of basic lack of type optics. Look at how the n gets so narrow and thin at the apex. The g sits off the baseline with a half loop that doesn’t link up, not that it must, but in this case it looks too awkward. The counters are ludicrously huge and the descenders don’t rise near high enough to forgive such a huge x-height. Large x-heights are good for reading, but with a low cap you’re shooting yourself in the foot.

It will need more work but what I have done, I have done well when compared to the current state of affiars. I have paid attention to the letterforms and the space around them, the weight, contrast and the flow, something that wasn’t done the first time around. I’d advise the folks at Microsoft to get a typographer/foundry to design a custom face; or at least the four letters, or even use a typeface that already exists? Microsoft’s reluctance to pay for typeface licenses in the past render that unlikely. e.g. The Helvetica/Arial Story.

Here are some more images,

Integrated on the website without much obstruction or effort and it looks quite acceptable. Of course you could argue a total redesign of the site is needed but it is the logo I’m focusing on more than user interface.

Bing logotype at different sizes.

The logo is based on Chaparral Pro Semi bold Italic, above.

I would be exaggerating slightly to say I am content or even close to finished with this, however it is more of a suggestion of what I envision, a step in a better direction. It is in it’s early stages but already we can see an improvement. Over the coming weeks I hope to develop this further, rather than just making it acceptable or a step in the right direction I’d like to make it something more than that, something with character that is memorable. If anyone is interested in advising me on it or even offering feedback or constructive criticism I’m open for suggestions.

You can follow me on twitter for regular updates or if you’d like to get in touch, chat or network.
Follow Youssef Sarhan on Twitter, email me at contact@whiteinkblog.com or leave a reply comment.

Direct link to SHIFT.chroma Animation

Last weekend I was worked on a short motion graphics piece. The idea was to record myself in front of a greenscreen and then incorporate an element of visual effects. As the recording and editing progressed I become more interested in abstracting the video to become a new medium, a sort of particular environment that I could explore. This intruiged me so I continued down this road. In this atricle I hope to share some of my own thoughts and techniques when it comes to working with after effects, etc. You’ll see that even with some rudimentary materials you can create some pretty impressive and vibrant visuals.

Ok so to give you a break down of what was involved it was something like this.

Film Greenscreen Content >> Capture/Cut/Key in Final Cut >> Particle Visuals, AE Camera Control, Sound FX & Music >> Final Ram Export

Thats the rough workflow, of course there were some forward-backward process as you can imagine. This isn’t going to be a tutorial but rather how you might approach working on something similar, I’ll go through each of the stages and fill you in on what worked and what didn’t.

Film Greenscreen Content

Ok, so I had pretty limited access to facilities, it was about 3am so no recording studios would let me in. Armed with a pretty decent budget HD camera, tripod, one lamp, a .7x wide converter, some tape (you’ll see why) and of course a few square meters of green cloth. I set it up like so:

I had the camera and the lamp in pretty much the same place, at 300w the lamp was too bright and was going to cast a strong shadow behind the subject so I pointed it up against the white ceiling so that it would bounce and defuse the light onto peter, that way you’d avoid a as much shadow on the green screen. Bare in mind peteys (he let me call him that) pants are green, so they would be tricky to key out, you might have to masked it out frame by frame (rotoscoping), he refused to wear anything different as you can imagine. Try to wear clothes that contrasts green, nothing from the green spectrum is what you’re aiming for. You want the greenscreen to be as evenly lit as possible. Ideally I would have had a lamp on either side lighting from behind and making the greenscreen bright for an easy key. There was also an ugly florescent light – you don’t really want these, if you can avoid it – directly behind and above me which actually helped soften the lighting in general. That came in handy in post when I was keying the footage. As you can see the camera is about at hip height. I’d also recommend getting the most vibrant green you can find, the green I found was a little muted. Ideally you’re looking for something that’s pretty easy to key like this. As the lighting wasn’t perfect I had to rotoscope some of the frames, you want to avoid that if possible. Say you need to rotoscope 3 seconds and you’re shooting 25fps, that’s 75 frames. Depending on the complexity of the movement that could eat up a plenty of time. Try do everything you can before post so that in post it’s a smooth process.

I turned the camera on it’s side for the full body recording, for two reasons, first off, so that I could fit in the whole shot; and secondly when you’re recording a full body shot on a greenscreen it makes much more sense to turn the camera so that the shot is vertical, this way you maximize the resolution. The action of the scene is now taking up pretty much all the frame.

I said earlier I had tape and a .7 wide converter, yeah, about that… erm, I taped the converter onto the front of the camera, and surprisingly it worked a charm, it was crucial for full-body shots. I had no other way of doing it, the room wasn’t big enough to move the camera back far enough. As I didn’t need the image to be totally sharp this was ok, however if you want a really sharp image, dont tape your lens on. I think thats obvious; anyway, here’s what it looked like.

Cut/Key Capture in Final Cut

After a recording I captured the MiniDV in Final Cut. I didn’t need the key to be perfect., I just needed to get rid of the main bulk and isolate me to some extent. Here’s a quick breakdown of the process.

Raw footage was keyed then converted to B&W using Gradient Ramp in After effects. I had the particles respond to lights and darks so I crushed the blacks & whites together creating a strong contrast.

Particle Visuals/AE Camera Control, Sound FX & Music

After the footage was processed then came the main task, the one which required the most thought and was essentially the hardest of them all. I used Trapcode Form, an extremely powerful plug-in from Red Giant Software for After Effects. There are tens of thousands, quite possibly millions of different combinations for how this plug-in can look. It’s easy to navigate but I think I’ve only scraped the surface. It was my first time using this plug in, be sure to check out their site for more info plus you can download the trail for free which is a great way to learn it.

The way I had the plug-in set up was to convert the video into a 3 particle deep system. Consisting of the colours red,green,blue. I could have made it 2000, 243 or 68 deep, any number, it’s totally up to you. However this will effect loading times. This is also applicable to all the setting, if ever you’ve used after effects you’ll know that there is a huge range of possibility, a fantastic piece of software. Anyway by linking the particles to only display the lights of separate precomp (the b&w video footage of me talking) I now had a pseudo-3d animated environment that I could maneuver the after effects camera around. While After Effects may look 3d it’s considered to be 2.5d so it has some of the appearance of 3d(X, Y & Z axes) but it isn’t 3d in the same why 3DMax, Maya, Blender or C4D are. I was able to expand the particles to add some more depth to the video, like when I zoom into the face and you can sort of see my side profile even tho the shot was static and didn’t move. For example you could achieve a similar effect with a photograph, actually for some of the parts I did use stills from the footage.

Here are some shots of the flowchart from After Effects; how each layer and comp relate to one another. This is just a small portion of it.

Final Ram Export

Here is the result. Watch in HD if you can!

When I was done I added it to the Render Que and exported it. Full HD so it came out pretty sweet. I’ll also note that I was working in 32BPC, not the 8BPC default, this really worked nicely to bump out the glow.

Here are a few screen-caps. Click them for full-res, the work pretty nicely as widescreen wallpapers.

So there you have it, that’s the rough workflow. If there’s one tip I can give you to take away from this, it would have to be; try do everything you can on set to make the work in post as easy and clean as possible. I think this can be applied to plenty of other mediums, photography etc. You want a solid beginning to work with and then everything you do after that will be a breeze.

I can really relate to the immediacy of ideas, those moments when you can see a final solution, or a complex visual pun that solidly forms in your head when your working on a poster design, illustration or be it a logo. For me, the idea of an instant solution always reassures my confidence in its communication. My theory is that, the faster a final solution forms in your head, the more communication power it will have. Because it was the first image associated for me, it must translate similarly to an audience. Over-thinking it and the idea can get lost.

Think of it like a game of pictionary. I like to joke that graphic design is a lot like glorified pictionary. Have you ever noticed that the best players are those that can barely draw. Why? Its because it has nothing to do with their drawing ability, its how well their ideas can communicate. Often their lack of drawing ability can enhance their communication because they’re choosing bare and considered lines of attack. Ultimately drawing has nothing to do with it. They don’t over think a word but simply associate with what first comes to mind. I believe that those instant ideas we get when we first get a brief are very often the best starting point. It might evolve slightly, it might simplify more but the power of instant association is very powerful.

For example, recently I designed a poster for the North Sea Jazz Festival. The first idea I had was the one that ended up slighlty evolving and being my finished idea. Essentially I was looking at combining the Jazz and Sea, Duh! So after thinking of visual cues I started looking at combining fish hooks and saxophones. It was a starting point that I was reasonably happy with. Because I had 2 weeks to think on it, I ended up with a lot of ideas that were trying to force original and sophisticated concepts. The latter of which had any real substance. Essentially given the length of thinking time the ideas were slowly dissipating from derivatives of the words Sea and Jazz until I had five ideas that had communicated nothing to do with Sea and Jazz. Or they just didn’t fit the model of what I felt a jazz poster should be.

Its very easy to be working on an idea for over 2 weeks that slowly evolves into more and more forms. The bare essentials of the idea can off-shoot into other image associations and slowly loose resonance with the audience. This can be dangerous, over-working on what were trying to communicate can slowly warp in the wrong direction and our visual cues can slowly evolve further away from the bare bones of where we even started. Its not often easy to realise this process is happening. Once I’m stuck into something that’s evolving its difficult to see how it communicates, its impossible to take a fresh pair of eyes and view it as a whole again. Take a step back from clever complex ideas and look at things from a fresh view.

Unfortunately after all this complex solving, we have to execute our ideas! Something that can make or break a piece of design.

The power of communication is lightning fast, so work faster!

In this edition of Design Deconstructed (DD) I am going to be highlighting and discussing some of the design issues of WP Remix (http://www.wpremix.com/). Then Hopefully offer some adjustments I would make.

Rbhavesh of WP Remix contacted me a few days ago about deconstructing his design. So here it goes.

WP Remix is a theme for Wordpress which allows the client to use the wordpress dashboard as a website as well as a blog. You’ll see what I mean if you view the demo. The design looks functional and the coding seems robust. Ok onto the design of WPRemix.com.

When you load http://wpremix.com/ you see red, black and white. It’s a solid colour palette that works nicely. The main navigation is at the top and the the content is centered; there are plenty of images and works nicely on a range of resolutions. The first thing I noticed is that the red area is a bit large, it’s quite thick perhaps a rearrangement of images and text could adjust this.

I feel there is a little too much going on. A lot of links and images. I wasn’t sure where to click and if by clicking on one would I then miss something on another page. For example if you scroll down to the bottom, you pass a lot of bullet points, underlined text and other lines and ornament. I think it’s a bit overwhelming. It just feels a bit disjointed.

It needs to be filtered, there is a lot to take in. This presents a problem, there is too much information to take on and thus is self-destructive to the communication of the content. A little like my last sentence, too much communication = confusion. Here are a few examples of too much communication.

29 frequently asked questions is long, I am aware that these are being worked on. So it should be interesting to see what happens.

I like the use of icons (above). Strong iconography can be a great addition to a website, or to any form of communication design. It’s a universal language that upon first glance you understand. However I think there are too many icons and it looses it’s communicative message, it just becomes a pretty picture beside some text.

The navigation/title is pretty small. As I said earlier, if the red area was to be made smaller this would allow some more room for the navigation. Right now it’s a bit cramped and I think it needs more room. I’m not sure if there is a logo for this website, but right now the tiny WP Remix text doesn’t cut it for me. It doesn’t look right, a strong logotype would be nicer than plain white serif text.

Overall the site functions but on some levels it is let down. It has potential and there are many possibilities, but with something such as this I don’t want to totally revise it but rather just make a some slight changes. Particularly regarding the main header/homepage.

Before

After (Make sure you full-view it by clicking)

The Navigation is now much more dominant, as is the title of the site/product. The content is more refined and doesn’t saturate the page with links and text. A simple thing to note, line 85 of index code; there’s an extra ‘>’ where there shouldn’t be. This is nothing but I figured I’d bring attention to it, not because it’s a so essential to the design, but rather because it’s a sign that the site is still being developed, it’s still been worked on and improved to make it a better experience for the end user. Hopefully the design will grow and develop.

.../themes/remix-site/images/navbg.png" alt="" />>...

To conclude, overall I like the colour choices and some of the layout decisions, but I still think it need to be pushed a little further in the way of simplicity and away from clutter. It’s over-selling the product. It’s a niche product, 9 times out of 10 people know what they are looking for when they buy something like a WP Theme. You don’t buy one spontaneously. They dont need to be bombarded with information, it should be available but only if it’s request. So what I suggest is a ‘Call-Out’ system, by way of a search bar/faq drop down, that allows visitors (which are also potential customers) to select the kind of information they are shown. Over-selling reminds me of NVIZIO 7-pc Sunlight Collection Pen Set. I think you’ll see what I mean when you watch that.

What do you think? What would you change? if anything?
Let me know what you think and hopefully we can get some constructive discussion. Thanks for reading, I’d recommend some of the related posts below.