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.

Vodafone ’s advertisement campaign was launched a few weeks ago and depicts a rather beautified dublin, isolating their key audiences in a number of fast shots and catching glimpses of various occupations going about their all too happy lives, all the while the doors of Ireland are changing red and we are to be branded a big fat Vodafone customer. Quite a harmless ad, sort of eye catching but trailing into the midsts of being vaguely interesting while hitting the realms of a pride evoking Ballygowan spot or something. Untimely cheesy, probably the result of a lunch meeting where the only issue is a visual metaphor thats easy to mock up with minimal costs. It definitely shows, the only reason it’s memorable for me is due to a lazy glitch at the start where the invading red paint fails to render completely around the number twenty (0.12). At the end, the punch line hits with ‘…and show Eircom the door’.

The shaking hands of Eircom can be felt clutching at its national wallet under the unforgiving threat of a recessionary apocalypse. It seems that desperate times cause for desperate measures as Eircom rips off and completely slanders their ad campaign with unforgiving brutality. The ‘citizents of Ireland’ can been seen peeling off the red paint to reveal their orange Eircom georgian door, almost as if the uninvited biblical plague that terrorised our lands had left and we now have to remove the blood from our doors. Even the same streets and locations are shown in order strengthen the message. The caption reading, “Over 55,000 people have already switched back”.

Irish enterprises are finally starting to get their hands dirty over UK companies invading their markets. A similar tone to the McVities vrs Jacobs copycat malice that resulted in legal proceedings.

No more Mr nice guy.

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.

In this edition of Design Deconstructed (DD) I am going to be highlighting and discussing some of the design issues of internet/information magnate, Google (http://www.google.com/).

Ever since it’s early days Google has been aiming high, in 1998 they had circa 25,000,000 million pages that were searchable. That was pretty huge. The site read, ‘Index contains ~25 million pages (soon to be much bigger)‘, there weren’t wrong either; 10 years later they broke 1 trillion. This number is growing at an alarming rate so the information they need to display must be displayed clearly. The idea is that you can find exactly what you are looking for, and easily. I can imainge reading this at some point in the future and these figures being irrelevant.

Something interesting to note:

‘So how many unique pages does the web really contain? We don’t know; we don’t have time to look at them all! :-) Strictly speaking, the number of pages out there is infinite — for example, web calendars may have a “next day” link, and we could follow that link forever, each time finding a “new” page. We’re not doing that, obviously, since there would be little benefit to you. But this example shows that the size of the web really depends on your definition of what’s a useful page, and there is no exact answer.’

Ok, onto the visuals of Google. There are many variations of google, depending on country etc. I am going to use www.google.com as the example.

The main content (search field, buttons, advanced search link etc) are center aligned. There are links at the very top, linking to different areas within google. Areas such as Images, Video, Maps, Gmail, iGoogle, etc. Upon searching you are prompted with search suggestions, this can be a very handy way to search for related content. It can also be a bit of a ‘feeder’, telling you what to search for. Sometimes distracting, sometimes helpful.

The current official Google logo was designed by Ruth Kedar, and is a logotype based on the Catull typeface. For me, it seems like an unorthodox choice of typeface, but google has become so easily recognizable it works. I’m not sure a sans-serif would be able to replace it. However I could see google changing their logo in time, it could do with a make-over. I feel, the bevel/drop shadow is very “Look what I can do in photoshop”, but in reality, it works as Google is a service that does it’s job excellently, it’s service speaks for itself. It’s not relying on tidy kerning and a slick colour palette. The logo works because the technology works. In saying that it has become something very distinctive. These colours are bold and are now strongly associated with Google.

Search results are displayed clearly, with enough emphasis on what are Paid Ads and what are Indexed Pages. It’s important that these are separated, for a couple of reasons, most importantly from a users point of view; it allows people to choose whether or not they are clicking on an Advert, it also means that adverts get their own place, they’ll stand out and thus that is the privilege you get by paying for listings. Something that irritates me are integrated advertisements. Links that are styled to fit the page, where you believe that the links are actually part of the site but they turn out to be AdSense/AdWord links. I’m sure we’ve all experienced this, after a while you can spot them, and learn to avoid them. Perhaps styling adverts too much like page content is a bad idea, google seems to do that well on their search pages.

I found it hard to identify a grid, but there’s more a logical arrangement rather than a strict grid, it seems to work. All indexed results appear on the left with a line-width of about 545px. This is the same on all resolutions. The AdWords take up just under a 3rd of the screen to the right. So you could basically say it’s 2 thirds indexed listings, 1 thrid ads. Roughly.

The typeface/font choices are pretty simple:

.h{
font-family:arial,sans-serif
}

The colour palette doesn’t really exist apart from the logo. Links appear blue and turn red for the duration of time you hold down on them.

Another small obvious feature I like is the result information bar that appears on the right, above the adverts. It has a link to the definition of the word you’re searching for. There are many other handy codes you can put into your search as a prefix or suffix to tweek what google searches for.

There are other user features to Google, but these are the main ones that I feel you have to deal with 90% of the time. It’s a simple interface thats easy to use, tried and tested daily by millions of people. For the moment, Google’s layout works, and it is small on-going changes that will improve it. A drastic change couldn’t really happen, people are to used to it. It may not be slick or sylish, but overall, it’s a great layout, with a solid backend, and for it’s purpose it’s working perfectly. Ok, so I hope you found this useful. What do you think?

Is Google user-friendly?
What do you like/dislike?
Anything you would change? Suggestions?
Perhaps you might just be onto something.

By the way, if you like you can follow me on twitter, I’l be posting links to blogs and other cool things, along with my own thoughts and questions. If you’re into it, follow me!

http://twitter.com/YoussefSarhan

In this edition of Design Deconstructed (DD) I am going to be observing the brand new website of the White House (http://www.whitehouse.gov/).

Within minutes of President Obama being sworn in the new site had gone live. I’d imagine it has received a huge spike in visitors but it seems to be coping perfectly. I’m trying to find out the designer/company who is behind it, so if anyone knows?

It looks fantastic. It’s clean, feels like a position of authority and most importantly approachable. It doesn’t look like a news site, like it used to. Here’s an image of the homepage.

As you can see it’s pretty sharp looking. You can view a 100% version if you click the image. I have overlaid the grid over it, at least a grid which I think fits. It’s a 3 column grid thats subdivided again into 3 more columns. The subdivisions really come into play in the bottom footer which has many links to different categories.

Starting at the top, I think the header shows the level and attention to detail that went into making this site look how it does. It’s detailed, precise and well-planned. These small images can really set a design off.

Further down, a divider which separates the main content and the categorical links. You may like to click and view the image at 100%.

Similarly at the bottom.

Love the use of little stars in the required field instead of an asterisk*

Next is the Navigation, easy to use rollover bar, I love the use of italc/regular fonts. Set in Georgia.

I feel overall the site suits the new President. I’d love to see the development process to get a real idea of how it came to this end. It’s a nice alternative to his also excellently designed www.change.gov website which he used during the campaign.

The subtle use of the semi-transparent white box is a nice touch. Nothing too over the top on the site but at the same time it stands out and airs class.

The primary typeface for titles of the site in Gerogia. Copied from what I think is the css.

h1, h2, h3, h4, h5, h6 {font-family:Georgia,"Times New Roman",Times,serif; color:#036;}

You can view the style.css file here:

http://www.whitehouse.gov/includes/eop/style.css

The body text is set in Lucida.

html, body {font-family:"Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;}
body {font-size:12px; margin:0; padding:0;}
strong, em, b, i, .bold {font-family:"Lucida Sans","Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;}

Finally, the colour palette consists of appropriate shades. Blue, Navy, Maroon, Grey, etc. Here is a simple drop selection from the blurred image.

Here is an image I was saving until the end; Its the before version, as you can see. It’s a good change. A huge improvement from the previous site, which looked like a news site. Hopefully this will be a reflection on the presidency.

Check it all out here: www.whitehouse.gov