Monday 26 January 2009

colourandthekids.com CATK

I found a link from .net mag that eventually led me to this site, a design agency type portfolio.



There are a number of things I admire it for. 

Firstly going by it's name sake - colour, kids, I think that the initial layout seems to portray that theme really well. It has various colours but more over, the layout is scattered which seems perfectly representative of a childlike scenario. But then comes the next great thing: (without Flash!) you are able to pick up and drag these items around! 

The choice to put a link bar smack bang in the middle of the screen is quite brave (UPDATE: this will no doubt change location for you as it too is fully moveable. I like this - a navigation bar you can navigate around the site!) 

I don't think the free form style betters the visual aesthetics, but sure enough, you notice it, you roll your mouse over the link box and you then get little wiggles from the corresponding artefact around the screen! These play nicely on the eye.

Once you actually double click on an article, you get to see more up close work. The horizontal span animation is really fluid, plus, to see the edge of another item on the outside of the screen is good for letting the user know that there is more content to view. 



In all, I like what has been achieved sans Flash, but I find it a little indie in it's general look and feel - the minimal, blocky uppercase font, the scattered look, the odd, harsh colours used for boxes holding navigation. I'm more into shiny and smart, big typography, vivid images. 

@

Another example of advertising


You wait for a bus, and then two come along at the same time. 

This Glass and a Half advert (on behalf of Cadburys) is probably the best I've seen of their efforts. 
I got annoyed by the gorilla, found the racing cars a bit boring, but this, what with the music, the funny looks on their faces is fantastic.

Along with the T Mobile dance, I love this type of advertising. At the time of writing, the number of hits for this Cadbury video stood at only 4000. I bet in a days time, it will have soared and perhaps added another 0 or two on the end. That's the beauty of viral marketing - power to the people!

@

An example of advertising


Simply amazing.

@

Friday 23 January 2009

Kitty Cannon - Flash mini game

I used to play this game way back at school, in I.T., when obviously I should have been making spreadsheets etc. But what with the requirement to make a mini game in Interaction, it brought the hilarious memories back.

It's premise is simple - launch the cat into the air with a rocket and see how far it can fly. Obviously there are obstacles along the way - namely Venus fly traps, dynamite, razor sharp spikes! It's this cruel humour that makes the game devlishly fun

Again, the controls are really simple too - the only input required from the user is to position the cannon and then press fire (space bar) in time with how powerful they want the shot. The rest is wicked fun to watch.

Don't believe me? Have a go yourself. 

It's the repeat process of trying to better the score that keeps users coming back. 

Furthermore, I think a great amount of success would come from the viral aspect that it seems perfect for - "Have you seen the cartoon cat game where it can be blasted high in the sky by dynamite?" Importantly, I think the cartoon nature of this game pulls it back from having too drastic a reaction from the audience.

Several pointers (in bold) that I can take from this and definitely worth bearing in mind when deciding on a design for my mini game.

@

Thursday 22 January 2009

Favicons - so that's what they're called

Anyone noticed the little g that now sits alongside the address bar has changed for Google?


Well the good old technology section of BBC News has done an article on it. Personally, I preferred the blue g on white, rather than this rather AVG anti virus protection look-a-like



However, Google are open to submissions, so I could always have a go myself?

What I find most interesting are the comments about branding in the future being a consistently changing thing, i.e. don't get used to something. For me, a person who doesn't like change, but instead much prefer little bits of tarting up, this may prove an issue. Does this mean in the future that me using the brand I have for my portfolio etc will be seen as archaic if it's still the same look in a years time? I hope not! 

@

5+ Restaurants to Review

From browsing online I've scoured the good and the bad from quite a few big names. Some are quite surprising in their quality (or lack of) and some seem to try too hard and miss the point of a restaurant website.

La Tasca



Looks wise, I think this is a bit poor. It seems a bit haphazard and basic in the flow and general niceness of the textures used. OK they could have been seeking the mexican look, but when there are sites like
this, which seem a little more upclass, La Tasca's just doesn't seem as qualititative.

One of the most important parts of a restaurant is it's menu, after all that will no doubt be one of the two main reasons people visit the site. What seems to be quite a trend is to make them available in PDF, so you are required to download them. I can understand the workings behind this - those PDFs may well be used for the actual physical menus, but I feel it is a cheap shortcut that shouldn't be accepted online.

Needless to say, La Tasca sent me on a goose chase to find their menu, clicking through where I would be eating etc, to then be told I could download the menu in PDF! No thank you.

Elsewhere on the site, I found it to be jumbled in terms of type consistency. As far as I'm aware, it's good practice to use only 3 fonts throughout a site. I can count perhaps 5, all used in different sizes, capitalisation, bold. This doesn't bode well on the eye.

Of all the sites, this one I was most disappointed with. What's important is that the quality of the site often can infer the quality of the product. Perhaps they are just continuing the tradition of Mexican appearing to be a bit crumbled around the corners, but the food stands out as excellent?

Zizzi



This simple Flash based site I thought hit the nail on the head for displaying a menu.

They display it in the exact same way you would expect to view it in reality.



The only thing that I could consider lacking is photos near the menu. Pictures tend to sell the food, or at least wet your appetite. OK, there is a Flash motion piece on the homepage which showcases their restaurants, the atmosphere and some of the food.

The navigation bar worked fine, however the little back and forward buttons weren't immediately obvious. This is another important point. Most web users (or at least the category tending to view such websites) will no doubt be keen users of the back button. Flash doesn't work with the back button, so by inserting their own, it does counteract the breakdown that would occur from the browser back button. However, place it in the right place and it would have been even more successful.

Gourmet Burger



This site, in terms of the background is quite interesting. It has a sort of modern feel what with the coloured boxes creating variation. Perhaps the colour scheme used is a little questionable though. However, the long list that has been attached to the homepage I don't rate.

I would like to credit the blackboard look though. This has potential to be exploited. What with me liking
large background websites, I think the blackboard look could be put to good use.

The links are easy to find, but here on after comes the complication. On clicking, for example, Location, the white space which changes and so you presume to hold the new information you requested, doesn't in fact hold what you want. You have to click on links to the left hand side, which aren't that noticeable at first.

Unfortunately Gourmet Burger too don't appease me in terms of menu. They provide theirs in the form of a PDF that opens a new tab to view.

Bistrot Pierre



This classy site I had good expectations for. Immediately the tone is set with the sophisticated browns and fancy swirls. The navigation is easy to locate being a traditional top nav bar, however, I found it a little different to give all the restaurants they own a seperate link on the left hand side. This left hand bar for extra information is used again, for example to section different types of menus. I do think that this option could go a miss for the not so hawk like viewers amongst us.

Unfortunately their menus too are presented in PDF form. They list the prices for set meals which shouldn't really come as any surprise, but no, not the actual food.

I like the use of images down the right hand side of the site to showcase their food. In fact, they even incorporate images from their restaurants, which adds to sense of information being imparted from the site. A website can be a very easy way to disguise the true state of a venue. However, putting pictures on gives a good visual signifier. This seems to be something that is overlooked quite a lot for restaurant websites. Unless that is, they don't want people nicking their images/ideas!

The header image of the site is normally a corner shot of one of their restaurants. However this sometimes changes depending upon the section you click. Menus gets a tomato, Work with Us gets a picture of a team. This sort of seems a little odd that only a couple get a different image. Most people might not notice the inconsistency too much, however I think there could be a more consistent approach that could be used. Keep the banner img the same but then sink one below and change it depending on the section of the site.

Rhodes W1



Another Flash site, I chose to opt for the green side, Rhodes Brasserie. Immediately, as the site opens you can tell it is fancy. The animation is very aesthetically pleasing, plus I like the two sided effect they have gone for. Splatters, all be it flower splatters in this case, seem to be quite popular on the web nowadays.

The opening for the site is by no means a one off. Once inside, the swish animations continue. The slideshow with faded/moving bars is a popular look used widely on the web, but here, it fits in perfectly.

The angled photos that appear throughout the site, remain in a consistent place (right hand side) and change to suit the section of the site.



For the menus, I like how they have gone for stacked options, so if you want the breakfast menu, you click on the edge of the paper, from the stack. One concern I do have is that the food items may not appear easily legible. It did require a bit of squinting. However, on the flip side, with the information being encased within a scroll down box, the ability to use the scroll wheel in Flash (which rarely gets done) was nice.

The use of the food pictures are quite sparing in the menu, which I feel should be taken advantage of more. Perhaps it's just me. I like pictures, OK?!

Of all the sites I looked at, this has to be one of the best. It appears modern, has a fresh visual appearance and there is a consistency with the typefaces, good typefaces at that too. The animations are fluid, and on the Gallery they use a funky scramble effect. (It may become a little jarring however after three pages of viewing -  I wouldn't know how to make such an effect yet so kudos to the creators.) Actually, in consideration, they have a picture (or two) for each section so I feel they have catered in this respect. - You get a good feel of what the restaurant is like, the ambience etc.

Strada



This site, I instantly liked. It uses a nice colour scheme that bodes well on the eye (plus links well with the Italian aspect of the restaurant. Furthermore, the first thing your eye recognises along with the colours is the large image of various foods. Not just a static image, changing foods, again another bonus point from me. OK, the marquee scrolling text is quite dated now, but I don't mind it too much, it serves a point by letting us know what all the critics have to say in Strada's favour. 

On clicking a link, About Us for example, I like the consistency in layout that remains. The top Strada header didn't even leave my screen, it remained smack bang in the same place.

The Menu is also very well laid out, using a tight grid like structure. On reading up on Typography, I have learnt this to be highly useful and important. The bold red headings neatly and efficiently section the types of food too. The only downside I could point out is that the menu list does scroll down quite a bit. 

I find, on the whole, the Strada site to be just enough of everything. It isn't too over the top with it's Flash photo slides, yet then it isn't too simplisitic on the flip side because it has adopted the Flash photo slides. I would probably agree that the site just needs a little something, perhaps using a different fancy typeface to pep it up a little, but otherwise, this gets my tip for being a basic but effective html site. I know if I'd made it I would be proud.

Fifteen


This site, famed by Jamie Oliver definitely heads off in the modern, funky, youthful approach. The colours are bright and bold, the typeface cool, as well as the large background image. 

Initially I found it all a little confusing. I managed to find this site after going through Jamie Oliver's so already it seemed like too much effort on my part. Google 'Fifteen restaurant' and you actually get more of a hub for all the restaurants, which displays news etc. However, this shouldn't mean it gets let off. Strada, for example, has several restaurants around the country but that doesn't mean it requires you to click on the individual location to be able to view the food etc. When you do for fifteen, each restaurant has it's own look, and navigation style. Perhaps I shouldn't be associating fifteen as a chain.

However, the restaurant selector is at the top, whilst typical navigation options such as contact are on the left. You can only find out about the opening hours, menus, pricing, booking once you've found the restaurant link. Oversight, perhaps?

I considered the London site, which I found to be a little too website like and not enough restaurant/menu like. The content area seemed too narrow in width for my liking. The pink column I think could be done away with and the space used more effectively. Needless to say, on clicking the menu, it opens a new window (not PDF) and displays the menu, sometimes along with pictures of the restaurant. Again though, all was not well. 



When I came across a menu that didn't use a picture, as pictured above (Dinner), it seemed quite bland and uninspiring - mainly due to the lack of colour, and the miniscule font used. 

On the whole, I think I would ascribe this site as lacking food based images. The arty look of brash pink with black and then grayscale photographs is nice, but it seems to completely overlook the need for food based visual stimulus.

-- I have definitely got a lot to take away from these restaurant websites. I am surprised that the calibre of restaurant they represent isn't always apparent. My main gripe is the incorporation of food, or unfortunately, the lack of. When you visit a gallery online, you expect to see pictures. I may be wrong, but visiting a restaurant, along with the opening hours, I expect to see some instances of food!

I have a few ideas in terms of the look I want to go for now. I'm tempted to do a site for a greasy kebab shop, but don't know if it'll be useful in the future? Do I really think it wise to be showcasing that, different yes, but attractive?

UPDATE: Found this site which holds numerous Flash restaurant sites. Of the list a few that stood out are the Standard and Red Square and Urban Kitchen.

I like the Standard for it's moving navigation bar, depending on what you click on it swoops up or down the frame. It gives more individuality to the site, making the areas seem non repetitive but still remaining a consistency in terms of the styling that shouldn't put a user off or confuse. Furthermore, it nicely sections images from textual content.



I like the Red Square for it's semantic representation. It's called Red Square so it has red squares!! Furthermore, when scrolling over a particular navigation link, I like how they have individual icons which alters depending on what is being hovered. The colour scheme of red and black with bits of white is a proven scheme that works well, especially how they have used a opacity filter for the reds to incorporate images behind. This site might be for a younger generation though as I'm sure the styling deeper into the site, particularly the flashes wouldn't be to everybodys taste (it does get irritating!)



Lastly, the Urban Kitchen uses a very funky green background, I like the rounded iconography they use in the background and then their logo too. As a Flash site, sometimes it is better to do something a little more understated, and I think this doesn't try too hard and succeeds with it. It is simple, the links are all easily viewable, you get nice animations to show transitions between the images and on the whole, I like it's fresh feel. However, the much loved by restaurants PDF menu means it is let down somewhat, when they could easily have included the lists in their ample sized information box.

What is grinding is that all these sites tend to have varying tunes or songs blaring at your from the get go. I couldn't find the mute button quickly enough.

@

Paper based typography

I used a picture last post from ILoveTypography.

I seem to be on a roll with finding really good sources for web design/graphic design inspiration and ILoveTypography proves another great reference.

This is one thing they posted a while back and visually I think it great. It's made from actual paper, but I could see this being quite possible using 3DMax.

The curves of the paper is what makes it really interesting. It has quite an ornate, beautiful quality to it. I love flowing sort of looks like this.



@

Wednesday 21 January 2009

A browse for social networking sites

We all know the generic ones now - Facebook, and Myspace. However, after delving a little deeper online, I managed to find a few others which weren't as mainstream or polished as the big ones.

The first, ZigiMe, seemed to put over a very stripped back computer techy feel from the start, noted through it's visuals. To me, the use of green upon black reminds me of the very old school computer days, or the Matrix code. 


Clicking through to some of the sections, such as Browse, for instance, alters the green to red. Yet, the boxy/rigid look still remains. What comes as a surprise is the type of people using the site - it almost seems unexpected. Normal people! The rainbow use throughout the site does provide a little life, however I am not really into the boxy line look. It seems almost amateurish or for an era goneby. 

--

Then there's Google not so known effort - orkut. Apparently this didn't pan out too well, apart from Brazil.



As can be seen, it looks very much like the old Facebook. That might please some.

What I really like is that the photos of friends are are displayed on one side of the page, you don't need to click through several links to find the folder you want - I suppose this mimics myspace pretty well. This is something Facebook seem to have distanced themselves from, along with moving everything everything else to a set place, behind a tabbed menu option. I also like how the options are really clearly displayed on the left handside, they don't seem ambiguous which is another problem I found with Facebook - I knew what I wanted, but had to search through several menu tabs to find it. 

Unfortunately however, with applications like iFan and the ability to share photographs, Orkut just joins the list of social networking sites, as in, it doesn't seem to do anything different or specialise in a particular area/way. Perhaps being simple and clear counts?

--

One last site seemed quite useful, in regards to networking. Linkedin.


It advertises itself very much in the same vein as all the others (FriendsReunited, Facebook etc) but then also has a section for finding yourself a job/careers advice through professional contacts. Interesting. And that was actually enough to get me to consider signing up! - Job done you might say in terms of the successfulness of a social networking site - the more members, the supposedly more popular it is.

In terms of looks I do find it to appear quite like a price comparison site, or on thinking about it - Play.com? I think that may be down to using the same coloured links for Adverts (right hand side) as well as internal links all in a similar blue. If those GoogleAds weren't dotted around the site, it perhaps wouldn't seem so overloaded with textual information - not enough whitespace for my liking.

It is clearly sectioned at the top - find friends, find jobs etc so the user wouldn't be confused in terms of where they should click. I suppose being business minded it doesn't wish to emphasise a fun/playful character, hence the more formal look.

--

Soooo, just from looking at those three examples it has helped me recognise what my expectations of a social network site are, what I like in a site and more importantly what I don't. - Focusing on the social side, I wish my site to not be too formal, or serious. I want it to be simple to understand, but have a nice modern, shiny, visual aesthetic. 

@

Web based typography - an article

One of Shaun's favourite things to comment on is the availability of custom/"nice" fonts for use in future versions of web design. Obviously at this stage in time, we're not quite there in terms of having the ability to embed fonts within CSS. 



I returned to my new favourite site, the webdesignerwall and found this article on that exact topic. It details all the methods that have and can be used... for now. 

Personally, I think Flash have got it right in allowing you to embed the font file in the swf, however we all know that even Flash isn't always embedded in everybodys browsers! 

The idea (that is working it's way through dev stages) of having an online font folder that you would sort of link in a 'ahref' stylee in your CSS3 code when specifying a font is logical, it's natural (if technological coding can ever be referred to as natural?)

For now, image placeholders will just have to do.

UPDATE: Apparently not just image place holders will do. The Pro Advice section in .net lists such a topic and provides three possibilities for typography replacement methods. 

One that seems useful, but also importantly, is achievable for myself, is sIFR. However the thing that makes that seem a little limited is that if the user has no Flash then it no worky. 

Then, (and I feared I would actually need it at some point) there's PHP and Javascript versions - dynamic text replacement. 


...but I now don't love the convoluted method to get it to display!

On the whole though, it's now quite true. I'm now a big fan of character based visuals. The arrangement, the colours, the form of the fonts, the weight... so much choice and so much variation that can come from it. And that's only using our alphabet. Try Arabic. Or Japanese.

@

P.S. Whilst we're on the subject, I love this example of typography, the blurred effect makes it seem quite psychedelic (and yes, again, the colours attracted me!) 

Monday 19 January 2009

Redswish (plus others) - web design blogs

After browsing through quite a few of the pages on ImgisEverything I came across a decent blogger and found his content to be suitable for me in Online Environments.



Redswish Give it a read, he covers more or less everything: design, markup, commerce, applications...

What I'd like to comment on is his post on Improving Yourself as a Designer.

As a student we have the time to experiment with all kinds of different methods/approaches to find what learning style we work best with. Redswish provides you with loads of different approaches, and the one that stood out to me was Reading, and more specifically telling us to 'have them open on your desk, read on the train, in bed, wherever…' It is so simple, but true. I buy the books, but then until I need them, tend to stow them away. So I'll now have that attractive PHP book by my side, whilst blogging! 

"My target" (as we used to set ourselves at the start of a new term) is to everyday find/follow sites of inspiration. Try out their tutorials, explore the news items they post. Basically, immerse myself in the world of web even more so.

I really liked his recommendation for inspirational site the Web Designer Wall.



All I can say is, what a beautiful site. It is so instantly striking. I love the use of colour, the flow and curves of the large ornate hand drawn background image. This hand drawn, craft like, paper look seems to be very a la mode in 08/09. 

What I perceive to be a great design decision is have further on down the page coloured hues behind each post title (&intentional or not, but colourful ad boxes, which feed into the chromatic visual style). This works well, it continues the styling. Some pages can have an ace header topping their page, but this then doesn't follow through once you scroll down. 

Also...

Courtesy of the Web Designer Wall this post  probably no web designer should go without looking at: The best CSS of 08. I could pick at least a handful of sites that I couldn't and wouldn't want to change (Viget Exchange, Design Disease, Tennessee...) 

However, I think I may have found my achilles heel for web design, my calling - large background websites





SURF. The hues of the sea make this site appear really vivid, strong. The large image instantly draws in the eye. You then walk in from the sea, to the sand which blends perfectly with the background colour of the content - an excellent example of effective imagery.

To me, the use of a large heading image provides an overall theme to which it is then much easier to add your individual design elements. 

We are told to find something that really interests us. I think I have.

@

Sunday 18 January 2009

Web design CV/Jobs blog posts

I'm in the process of writing my 'focused CV' which will be used to hopefully get me a bit of work experience in the holidays. 

I came across this great site which has several posters relatively new to the web design scene, but then also employers of the scene, who share their ideas/experiences/know how. 

I found it useful as it isn't some government correct info, it's real people talking in a real way.




Plus the comments are worthwhile reading too. First thing I'm going to do is switch over to my domain name email address.

@

Friday 16 January 2009

Great visual advert - Nokia E71



I saw this advert, and on the first watch, perhaps even the first few seconds in, knew it to be brilliant.

The way the individual letters from the words all float back onto the page, the to-ing and fro-ing effect when it represents communicating, the electric city feel that is presented through the cool blues. In all, I was drew to this advert through the vibrancy, fluidity, and colourfulness of the motion graphics.

What was surprising is that it is promoting a new Nokia! Regardless of whether it is suitable, it caught my attention and it's message worked on me due to the great visuals.

@

Tuesday 13 January 2009

Online web analysis - recom ad agency

Long time since I did one of these and with so many different analytical aspects to consider sites with now, I thought I'd catch up with what offerings the FWA deemed worthy of site of the day.

Of everything I flicked through, this one (recom) caught my attention due to a unique selling point that is actually quite brilliant. 

Now you could just stick all your posters, postcards, billboards etc online in a catalogue style. Yawn. Who hasn't? Or you could organise everything by the color it uses, and not just broad colours as in red, blue, green, how about r354 g38 b11? Yes, they have.



The Structure Principle -

The unique aspect of the site, finding by colour, is navigated using the colour cube on the right handside, this is reasonably easy to pick up and proves a good idea rather than a gimmick. 

The main menu for other categories heads the page at the top, hidden away at first but then appears on roll over. Other random menu options are placed around the outer space of the screen. There seems to be a little inconsistency about the placement for this. 

The Simplicity Principle - 

With no instructions immediately, you sort of have to find out for yourself, but after a few tries on the colour cube it proves a really straight forward approach. The only downside I can forsee is if someone wanted a specific ad campaign, which they knew was in green, but then clicked on the wrong shade of green would prove frustrating. 



There are categories tucked away behind the main menu links, but these seem non intuitive compared to the colour cube, sort of a long laboured approach!

I would have to criticise the size of these menu items too. You find yourself having to squint. If you struggle to use a site, you'll often find people just won't struggle at all. They'll leave.

The feedback principle

The site being Flash based has a number of wipe on/fizzle on animations. The colour for such menu options mean they are noticeable, 

The loading bar is placed at the top of the screen on first load, this is found to be a new position and liked it. People with lower res screens may miss all this though. WIth the files being quite high quality it takes a second for two for them to load. In the mean time you are displayed scrambled TV screens. Again, an unknowing user may think it to be a fault. However, in terms of audience, you would probably expect a certain type user to be viewing such a site, somebody who is probably aware of visual arts, perhaps a little tech savvy, and so this shouldn't prove too much of a problem.

The re use principle

The layout is consistent throughout, along with the interactive features. The colour cube is always on the right, can always be swivelled etc. 

The animation used to enlarge the thumbnail images remains the same throughout, and ties in with the main menu, by using the same dust formation look. However this is only in the Portfolio section. 



Click through to the About Us section and you'll find a cover flow sort of design. Then on another section you are shown a slideshow of images. These are all valid and contemporary methods but does put a slight dampner when considering consistency.

The tolerance principle

As I mentioned before, the small text options may be off putting to some and with it being Flash, user accessibility isn't considered the top priority - no zoom function.

Furthermore, on the new section, it only gives access to three further news links and you are required to scroll down to view more, so one click means another one link for you to click.



This seems to a step back and is probably something that I would try to address. Once you then click on an item, it isn't obvious in how to return to the menu, even with options provided on the left hand side. 

Overall...

In all, I like this site for it's main selling point - the colour cube. It's unique, and actually works. When you click on a colour and then find that the work that appears is in such a shade it seems quite wow-ing.

@