Alara Mills, an educational product designer, recently launched a unique Web site where beginning and experienced Web authors can learn how to get started with coding in HTML5 (Hypertext Markup Language). The newly emerging HTML5 standard is overseen by the international World Wide Web Consortium (w3.org) and consists of more than 100 different elements designed to semantically “mark-up” the content and structure of
Web documents.

Necessity being the mother of invention, Mills created the world’s first information graphic depicting the full collection of the HTML5 Elements (including their Global Attributes and Event Handlers), to aid her with her own learning of HTML. With a layout inspired by the Periodic Table of Elements from the field of chemistry, Mills recently released a Poster-size version of her information graphic which is now available for purchase at www.AlaraMills.com. The HTML5 Elements Table Poster is the ultimate visual reference tool for writing standards-compliant XHTML documents confidently.

Designer: Bascule Inc. | www.bascule.co.jp | Development technologies: HTML, CSS, Javascript, Flash

It can be inherently tough to evaluate sites from such vastly exotic locales as Japan, not least because of the  language barrier. Even with the aid of services like Google Translate, so much of the text-based meaning gets lost in translation. However, sometimes it can enable you to focus on the subtleties of page construction and visual harmony. Look at the corporate home for Tokyo-based web studio Bascule Inc and you’ll see that beneath the words, the site exhibits charming cultural contrast with western designs. The long, winding page length has a bloggy, WP feel, but opts instead for Flash-filled div tags that punctuate the paragraphs with nuggets of animation. “Our mission is to promise high-quality user experience to people who visit our websites,” says the company’s PDF brochure. “We aim to provide unique and sophisticated communication design, leaping over the traditional paradigm of web creation.” This sense of originality is perhaps epitomised most by the stunning graphical work and the static backgrounds featuring oriental businessmen within vivid scenarios. There’s a tangible sense of self-referential humour at play here. It might not be compatible with most Anglo-American tastes, but that is precisely the point.

INSPIRATION: www.nike.com/jumpman23/evolution85/#/Product

The design of this microsite is a beautifully minimalistic affair. It shows technical drawings of the Nike Air Jordan basketball shoes, as if they’d come straight from a draughtsman’s board. The whole screen is an animation that shows Nike Air Jordan shoes drawn and then explode apart. As each shoe explodes, it is replaced by a drawing of another. Underneath the design, a timeline is laid out with key dates of the shoe’s progression. Along this timeline is a playhead that you can grab and move backwards and forwards to see shoes explode or reform, depending on the direction you are dragging. The whole thing is incredibly tactile to explore. The final shoe drawing turns into a real shoe via cut-up segments appearing, then spins to reveal the latest product. A great device for getting people to interact with a product.

<COMMENT>

Using animated content

“The appeal of this site is that the animation draws the user in. People are drawn to movement, so try not to have something animated if it isn’t the main content of the site. That’s why banner ads become so annoying, because they try and get you to look at the movement. Animation, if used right, should direct attention in a good way.”
Mark Shufflebottom, www.webspaceinvader.com

TECHNIQUE | Control a MovieClip from a slider

01. Set it up
You’ll need an animation MovieClip on the stage and name the instance ‘mc’. Create a movie clip with a line, 350 pixels wide. Name this instance ‘controller’. Open this and add another movie clip named ‘drag’ as the scrubber. Now return to ‘scene 1’, open the ActionScript editor and add the following code:

001 import flash.geom.Rectangle;
002 var dragging:Boolean=false;
003 var pos:Number;
004 var percent:Number = controller.
width/100;
005 var dragPos:Number;
006 mc.addEventListener(Event.ENTER_
FRAME, moveListener);

02. Do it every frame
The following code should then be added, which is the function that’s called ‘every frame’. This checks to see if the playhead is being dragged. If it isn’t, then it moves the playhead proportionally along the line we set up in step 1. If the playhead is being dragged, it moves the animation in time with the playhead position.

001 function moveListener(e:Event):void {
002    if (dragging==false){
003        pos=(mc.currentFrame/
mc.totalFrames)*100;
004        pos=Math.round(pos);
005        controller.drag.x=pos*percent;
006    }else{
007        dragPos=(controller.drag.x/
controller.width)*mc.totalFrames;
008        dragPos=Math.round(dragPos);
009        mc.gotoAndStop(dragPos);
010    }
011 }

03. Constrain the drag
We wouldn’t want to start dragging the playhead and it continue forever, so we need to constrain it so it doesn’t just fly off. The next section of code sets up a rectangle at 0 pixels on the x and y, then makes it 350 pixels wide and 0 pixels high. This enables you to just slide back and forth along the
350-pixel wide line from step 1.

001 var constraint:Rectangle = new Rectangle (0, 0, 350, 0);
002 controller.drag.addEventListener(Mo useEvent.MOUSE_DOWN, drag);

04. What a drag
The next section of code tells Flash what to do when the mouse is down on the drag. First of all, it stops the animation playing and starts the actual dragging of the ‘drag’ MovieClip. More importantly, we set the variable dragging to be true. This allows the playhead to control the MovieClip on the stage.

001 function drag(event:MouseEvent):     void{
002    mc.stop();
003    controller.drag.startDrag(false,
constraint);
004    dragging=true;
}

05. Let it go
When the user has finished dragging the playhead, we want the MovieClip to start playing again from that position. The following code tells Flash what to do when the mouse is released. The dragging variable is set to false, so the MovieClip takes over controlling the playhead and continues playing.

001 controller.drag.addEventListener(MouseEvent.MOUSE_UP, noDrag);
002 function noDrag(event:MouseEvent):
void{
003    controller.drag.stopDrag();
004    dragging=false;
005    mc.play();
006 }

INSPIRATION | A simple concept

Sometimes a brilliant interface device comes about that can be employed for a variety of different uses. This is the case for the Nike Air Jordan Evolution site. The site borrows an interface technique that we are all very familiar with – the scrubber. This is the moving playhead on the bar at the bottom of videos on YouTube and video applications. We grab the scrubber and can quickly scrub backwards and forwards through our videos, so it works for quickly moving forwards or backwards on a timeline. It’s the scrubber idea that Nike has borrowed to move backwards and forwards on a timeline, to effectively show the evolution of its shoes over a period of time.

TECHNIQUE | Create a vignette effect

A vignette is a great way to capture the attention of the user and get them to look at a certain part of the design. There are a number of different ways to produce them, so here we’ll show you the most common way of doing it.

01. Create a MovieClip

Create a new MovieClip symbol in the library and add a rectangle to this. Make the rectangle the exact same size as your stage. You can resize the rectangle after you have drawn it by clicking on it and amending the size in the Properties panel.

02. Change the fill

Select the fill type in the colour mixer and change it to radial gradient, then use the paint bucket to fill your rectangle. Make both sides of the gradient black. The colour on the left side should have the alpha value turned down to 0%.

03. Back on the stage

It looks a little too dark at the moment but that’s easy to change. Return back to Scene 1 leaving the MovieClip. In the properties panel change the Style under Color Effect to Alpha and reduce the alpha value until you get the right result.

URL: http://janploch.de
Development technologies: HTML5, CSS3, jQuery
Designer: Jan Ploch

One of the nicest things about the recent attempts to move away from the convenience and power that Flash provides is that designers have to be more imaginative. Technologies like HTML, CSS and JavaScript all bring their own limited set of capabilities that when combined in clever ways can achieve some really effective results.

This relatively simple portfolio site for Hamburg-based web and graphic designer Jan Ploch really hinges on a cute graphical idea, strategically placed <div> tags and the necessary nuggets of jQuery required to make it work. The lengthy page is styled up to resemble a bottle of soda, complete with drinking straw and bubble-shaped rollover icons, which animates the emptying of the green liquid inside as you vertically scroll. The technique also owes much to the use of transparent PNG images, with a set of three employed to handle from the top, middle and bottom sections of the bottle. A function call to the jQuery Scrolling Parallax plug-in by author Jon Raasch takes care of the mechanics of the effect with seamless aplomb, adding a genuine wow factor to a site that might otherwise fall under the radar. It all helps to bring attention to Jan’s commercial web work of course, with impressive examples from Roy Robson’s fashion and modelling firm Smuk Agency being nicely represented.

URL: www.pica-pic.com
Development technologies:

Designer: Hipopotam Studio
www.hipopotamstudio.pl

Writing these pages in the week prior to the much-anticipated Nintendo 3DS launch, it seems apt to recall the days when handheld gaming was more primitive.

It probably says much about the age of the Web Designer staff when we can reminisce on an era before the original Game Boy hit the scene and single-game LCD systems ruled the roost. Although limited graphically, it’s easy to forget that they often felt like mini versions of their bigger arcade equivalents, thanks to the similarly gaudy illustrated artwork that encased them. This site celebrates this visual charm and excitement by not just simulating the on-screen action of a range of vintage handhelds, but also by displaying the devices in glorious detail. Some of the examples offer the chance to view the original box art before you zoom in and start guiding the characteristically crude monochrome sprites around the respective screens. This is the real technical achievement on show, providing startlingly realistic Flash remakes that are painstaking in terms of graphical likeness and animation. High scores are then stored in some neatly designed league tables. The whole thing is beautifully designed, and a real example of how a novel site idea can in fact become an important historical document for the evolution of technology we now take for granted.

who: Mutado | what: A Milan-based creative studio that likes to keep things simple  | where: C.so Sempione 10, 20154, Italy | web: www.mutado.com

Mutado was formed in 2004 by Lorenzo Manfredi and Mauro Gatti: a developer and a graphic designer whose paths crossed more than a decade ago. During the last seven years, this partnership has grown into a solid independent digital agency, headquartered in Milan. The company’s name unveils Mutado’s guiding philosophy of constant mutation, adaption and transformation.
What started off as a two-man studio has grown over the years to become a leading agency working on web, motion, print and, most recently, mobile, employing over 20 people with different backgrounds and ideas. Mutado works directly with clients such as Disney, MTV, 55DSL, Yahoo!, Miss Sixty, Adobe, Sky and Vodafone, partnering also with distinguished agencies like Saatchi & Saatch, TBWA, United1861 and Y&R.

The agency has over six years of experience in the creative/design field, and founders Lorenzo Manfredi and Mauro Gatti explained the driving force and vision that has pushed it on to success. Technical director Lorenzo talked about the high standards they implement, while creative director Mauro talked about how the agency uses creativity as a weapon. “Mutado’s drive has always been excellence. We’ve done it all: banners, websites, animation, illustration, billboards, videos, applications, custom toys, events… but our drive has never changed – it’s to be excellent doing what we do. We’ve imposed very high standards on our work and we won’t accept a project if we suspect the end result will be anything less than perfect. We definitely listen to the market and find ways to satisfy our clients’ needs and we believe it’s important to keep up with trends in our business, because if you don’t, you’ll drown. Everything gets really old really fast, so it’s essential to innovate, to transform, to reinvent yourself. This doesn’t mean Mutado doesn’t have an identity, on the contrary. The challenge is to show that common trace in everything we do, and even though we’d describe it as excellence, if you look at our portfolio you’ll probably call it creativity. Our creative team works horizontally on different media; you’ll have the same people working on a custom toy today, a website tomorrow and an app next week. It’s a top-notch, eclectic team with incredible skill.

“Even though Mutado is half-creativity, half-tech, we use creativity as a weapon. If you show your portfolio to a prospective client and go into the tech details, attention span will max out in 30 seconds; if you show off the cool graphics, you’ll get them hooked. That’s our trick – we get them hooked on the creative side and then introduce the tech backbone. We take pride in creating fully customised iPhone apps, for instance; they’re the perfect marriage between creativity and technology. However, in order to actually make a beautifully designed button, you’ll need the perfect development skills, that extra something that will make that button stand out and fit in just right at the same time. The creative team knows this puts a lot of pressure on the developers, but we’re only allowed to let our imagination flow because we know they’ll find a way to do it. This is very motivating, on both sides. So, if I had to choose a highlight, I wouldn’t go so much with a project, I’d probably go with the coming to life of our mobile unit. It’s where our fresh creativity merges with our beautiful tech details. We haven’t been making hundreds of apps because we’re betting on the quality, not the quantity. There isn’t a single one we’re not proud of.”
Creative director Mauro went on to reveal how the agency decided on its name and expressed the importance of having a matching URL. “After years and years of awful experiences slaving away in agency after agency, Lorenzo and I decided to change – well – mutate into something new. That’s why we decided to call the new agency Mutado – it’s basically the Spanish translation of ‘mutated’, and it had a great ring to it. We chose this name not only because of our mutation from freelancers to an actual agency, but also because it represents our philosophy, our attitude towards work. Being able to permanently change and adapt to new technologies, reacting promptly to challenges presented by clients – that’s mutation, that’s the foundation for our work. So yeah, it was important that the URL matched and we were happy it represented us 100%.”
Mutado’s high standards help attract new clients, but for continued success the agency needs to do more. Account and sales director Roberta Cerri explained the process: “New clients, more often than not, contact us directly. I’d say that in about 70% of cases new clients get in touch with Mutado thanks to the business buzz; the companies we work with tend to speak highly of us and an incredible number of people reach us thanks to this positive word of mouth. The other 30% contact Mutado thanks to our communication efforts – we work hard to update our website, Vimeo profile and Facebook fanpage as often as possible, also keeping our followers and clients posted with a monthly newsletter. Social networks are an excellent means to attract new contacts that share our vision and like our work. We also issue press releases to promote new projects. Once we get contacted by a potential client, we usually get back to them within 24 hours of the first call/email. Generally the next step is to arrange a meeting to present the agency and, usually, to be briefed on the project.”

With a new client on the agency roster, its time to jump to the next stage. Roberta offered an insight to how Mutado interacts with a new client. “When an order has been placed, we arrange two kick-off meetings: the first one with the client, to collect all the operative details needed to work on the project, and a second internal one to brief the team and assign tasks to the team members. The size of the team usually depends on the complexity of the project, but, on average, each project will have three to six people working on it. A project manager organises and supervises the workflow and manages the relationship with the client. We typically take on entire projects, meaning we work both on the creative proposal and the actual development, so the team will tend to be composed of an art director and a lead developer as well as graphic designers, videomakers (when it’s a motion project) and a team of developers. The project manager is essential to organise and supervise the Gantt schedule and to guarantee customer satisfaction. However, when some very operative and specific feedback is being exchanged, the project manager will encourage operative team members to speak directly with the client. Although certainly unconventional, direct client-expert dialogue allows us to increase the quality of the final work and boost team motivation. It’s a tricky equilibrium, but it’s also one of our strengths. On each project we try to be, above all, proactive strategic partners for our clients. This means we invest time in sharing our analysis of the project and presenting new ideas. We believe this is why our customer loyalty is higher than average and there’s so much buzz around our name.”
Working with a global platform can present issues with languages. Communications director Raquel Ferreirinha explained how Mutado has a host of English speakers to assist with any barriers. “As Mauro explained and as our name suggests, Mutado is constantly changing, permanently striving for improvement and always growing. It’s a natural process and it’s been going on since day one. This growth has also led to an increasingly international positioning, particularly since we work in a mainly English centric environment and the online universe isn’t limited by geographical boundaries. If there’s such a thing as an international language, it’s English, and we’re well aware of that. Although many of our clients are Italian, you’ll notice that all our communication efforts are entirely in English; we believe this is cardinal precisely because of our increasingly international presence. Although we’re headquartered in Milan, we speak in Italian to each other and most of the staff is Italian, we see this as purely circumstantial and wouldn’t consider language as a barrier if the right opportunity came up to open Mutado somewhere else. We can’t deny English language skills are something we look out for in CVs: the more English speakers we have in Mutado, the more independent we are. As Roberta mentioned, we believe in establishing direct client expert dialogue so, often enough, the team will be speaking directly to the client and this has meant we’re all invested in improving our language skills. I’d say we manage just fine, and when something specific or particularly elaborate is needed, we make sure we always have a native English speaker in our staff.”

An element of design less affected by language is software. Technical director Lorenzo revealed how Mutado was born Adobe-centric but has diversified over the years. “Mutado was definitely born Adobe-centric, making intensive use of tools such as Photoshop and After Effects for the creative production and Flash/Flex for the technical integration. Perhaps something changed in the last years, especially when we moved our whole hardware setup from Windows to OS X just a few years ago. The creative gang is still high on their Creative Suite addiction, but in the technical department we witnessed a strong convergence to OS X-native tools like X-Code and open-source IDE such as Eclipse. We also have a massive versioning and deployment system (both for the tech and the creative departments) based on open-source solutions like SVN and GIT. As for office automation and presentations, we moved from Microsoft solutions to iWorks that offer a low-cost, beautiful and powerful suite. The only exception is 3D Studio Max – something which we’re still using and which runs on Windows alone.”
Mobile is an arena that has had a big impact on web design, and Mutado has a strong association with iPhone and iPad. “We immediately recognised Apple and the iOS as the leaders of the new era of mobile, so we decided to open a unit entirely dedicated to this ‘touch’ revolution,” Lorenzo explains. “Today, iOS devices are the main target of our mobile unit, but our R&D team is keeping an eye on Android with a lot of interest. We’ve actually got something up our sleeves for Android that we’ll be releasing later this year, but iOS will remain our main focus for the next years, as long as Apple will continue to offer the best blend between powerful hardware and a great operating system. HTML5 and jQuery also offer very promising platforms for the development of fast, multiplatform and low-cost mobile solutions for our clients, and this isn’t going unnoticed.”
Flash is another technology that has been with Mutado for a long time, and Lorenzo gave his thoughts on the direction of the platform and if the future will be Flash-free. “This is a very tricky matter. Mutado has been animating and programming with Flash for over ten years. This is something rare in Italy, and we were quite the pioneers back when we started. We used Flash from the very beginning to create websites, microsites, web applications and complex desktop apps, we really knew and trusted the platform. In the last years, the technological collision between Apple and Adobe reminded us of the epic smashup between Apple and Microsoft, unfortunately presenting us with that fatal question: which side do you choose? In my opinion, Adobe Flash fails in two of the most important fields where the Flash platform should be leader: content-driven projects, like portals and editorial platforms, and mobile solutions where native iOS, Android or just HTML/JavaScript offer more reliable and efficient alternatives. Excluding those major fields, Flash can still lead the road for experiential websites, online gaming and low-cost desktop applications, together with AIR Runtime. I think that this is a natural evolution following users’ needs; today, thinking about the possibilities of jQuery or HTML5, the benefits of Flash lose much of their shine. I wouldn’t say Flash is ‘out’, but its marketplace is really restricted and clients are often asking for Flash-free solutions in order to be iOS compliant.”
Once Mutado has finished creating its beautifully-crafted designs and sites, there is still more work to do. Communications director Raquel talked about how they make sure sites get seen. “SEO is definitely a big slice of the cake, it is also one of the reasons we will be moving back to HTML with our new website: there’s nothing better if you want Google to keep a very close eye on you. We don’t handle SEO internally, we’ve always been happy to partner up with companies that have made SEO their line of business. But SEO isn’t the only thing; people, that’s what counts. Mutado gets in touch with people mainly through social networks (Facebook, Twitter and Vimeo particularly) and monthly newsletters. We’re definitely not tweetaholics, but getting real-time feedback on the stuff you make is priceless. In 2010 we started PR-ing in a more structured way, setting up an internal press office, and this has brought us to a whole new level. We also work with our clients on these aspects, acting as strategic partners when it comes to using social media in innovative ways, from maximising social network visibility to creating specific product-oriented Facebook apps. Our plan for 2011 is to get better at this and, on a different note, we have some ‘real-life’ surprises coming up too. This year we want to start opening our doors, showing people that there are people behind the screens and that we’re quite a heterogeneous group.”

Popular social media platforms such as Twitter and Facebook help create interest in a site, while also providing a platform for everyday communications. Raquel reveals how Mutado takes advantage of social media. “Well, picking up from what I’ve just mentioned, we’re increasingly communicating through social media. They’re undeniably amazing stages from which we can speak to people but, to be honest, it’s just put a magnifying lens on something we’ve always done. Communicating is our line of work – whether it’s through a website, a billboard, a video or an app, we’re always shaping and transmitting messages in creative ways. Zuckerberg & co. have just added a means to our list. The new thing about social media is that we’re actually meta-communicating, we’re communicating about communication, we’re talking about our projects. The other thing is we know who we’re speaking to and the best part of it is, people can reply! People can post their honest opinions about the stuff we do and although, to date, we’ve been lucky enough to have only had warm praise, the idea that we can actually get harsh critique and less-than-perfect opinions is something that pushes us to keep on doing our best. So, the way it works is, whenever a new project is officially out we start communicating on all fronts: website, press office, social networks, the bunch. We also update social networks between projects, naturally, whenever we’re attending special events, giving lectures at conferences or universities, when we catch our name in the news…that sort of thing. Social networks are also ideal to post minor projects, those that aren’t featured in our portfolio. We don’t usually use them to post our lunch menus or our views on current affairs, but you can bet that whatever we do post is worth your while.”
People are the driving force behind any successful business and Mutado is no different. Founders Lorenzo and Mauro explain what they look for in prospective employees: “Mutado expects a lot from its employees, and I’d generally say there are three main qualities we look for: talent, drive and the eagerness to experiment. We receive many CVs and portfolios and pick the ones that intrigue us, the ones that show evidence of talent. We select our employees after several interviews that often include actual tests and the talented candidates that pass this step will have the chance to show what they’re worth in Mutado. These people will be successful if they have the drive, the willpower, if they love their jobs and they always give their best.”
“Another important quality we look for, apart from creative or technical abilities of course, is the desire to be part of something and to grow in a team. Mutado is a company where everyone is given a lot of responsibility and the success of a project depends on everybody’s efforts. That’s precisely why anyone who’s approaching this industry must be able to develop a method, a mental process that allows them to respect deadlines, to give 100% and to support the entire team. A brilliant idea, a creative solution or amazing tech abilities aren’t enough to make an agency grow, it really is all about a collective endeavour that sees each and every employee committing to leave a mark.”
A good agency is always looking ahead and getting ready to work on new projects – so what’s the future for Mutado? Lorenzo comments: “The future is mobile, unarguably. Smartphones, tablets, you name it, if you can put it in your pocket, there’s business there. We’re currently working on quite a few mobile apps, actually, from marketing to development. We still do the other stuff too, naturally, but if there ever was a time to go into mobile, it’s now. We didn’t believe much in mobile during the first craze back in 2000/2001, the world wasn’t ready. But now, if you’re in our line of business and you ignore the mobile world, you’ll be left behind real quick and with a massive hole in your wallet.”
Mauro, meanwhile, emphasises the importance of people power, saying: “Mutado’s future is as good as the people working in the company. Fresh blood brings new ideas, new projects, more mutation. Mutado’s future is, as its past and present, in the people that make this continuous transformation and in our team’s amazing flexibility that allows us to excel in the most avant-garde and challenging projects. The future is also in our clients, that give us enough freedom to develop innovative projects and exceed our limits. In the near future, we’ll be doing all of this in the mobile sector; later on, who knows…”

URL: www.city-dog.co.uk
Development technologies: HTML, CSS, JavaScript

Designer: Impero
www.imperodesign.com

One of the greatest things about the internet lies in the freedom for people to not just build websites in a certain way, but also to create them for just about any purpose. The epitome of this freedom of expression is City Dog, essentially a specialist service that promises to make urban pooches better behaved. Apparently, city-dwelling canines need to ‘know a whole other set of tricks’ in order to function within the bright lights of London, and this attractive site is designed to reel in anxious owners. What really adds credence here, however, is that the design of city-dog. co.uk is so professional in feel, and the work done by the agency hired to build it is so striking. Just the idea of asking a firm like Impero to create such a presence shows intent, but the visual effort on show in terms of forging a memorable identity is noteworthy. The use of bold typography in a range of styles, coupled with a two-tone colour palette and some subtle decorative features taps into current trends, while also remaining lightweight in build. Everything just works without too many bells and whistles, focusing most on conveying a clear business message and the kind of trust needed to convince the clientele that their precious city dogs are in safe hands.

Typekit

http://typekit.com/

THE DADDY OF the web font industry, and much favoured by the design community at large, Typekit is run by Small Batch, a Silicon Valley-based team well used to being on the cutting edge of web technology. The group cut its teeth in web analytics, and made such an impression on Google, the search behemoth bought them out and employed them to overhaul its Google Analytics package. With Typekit, they’ve struck out on their own again. In certain circles, you can’t move on the web without stumbling across recommendations for the Typekit service, and it’s easy to see why. The service acts as a kind of conduit between type foundry fonts and webpages, allowing designers to circumvent any legalities over hosting or distribution of fonts. For range of fonts (it has partnerships with most major foundries), site usability and samples of application, Typekit is leading the pack. If there is any further innovation to be done in the web fonts arena, you’ll have to be quick off the mark to beat these guys.

FontsLive

www.fontslive.com

FIRST UP IS THE FontsLive site, from Ascender Corporation, which offers typefaces from five individual foundries (Ascender, Microsoft, Monotype, Bigelow & Holmes and Font Company). The sets available from the site include a mix of well-respected and B-list fonts, with very usable examples from Monotype, Font Company and Microsoft. The site itself is functional but rather minimal and in some respects perhaps favours simplicity over warmth of service. The search function appears limited to font names and a search for ligatures, for instance, returned no results. It’s also difficult to get a real feel for some of the fonts. Working previews are limited, but on the plus side you can view entire character sets for most of the fonts available on the site. Considering the not-insignificant costs for larger websites wanting to use the service, potential customers might wish to shop around a bit first, but on the whole this is a trusted option worthy of a look.

FontDeck

http://fontdeck.com/

FONTDECK STRIKES a rather nice balance between professional and informal, and although there’s not the greatest selection of fonts available through the service (about 100), having a limited choice is perhaps not a bad thing during the period of change the web is going through. The fonts that are available are serviceable enough for everyday needs, though you won’t find any of the more popular typefaces on offer here. The FontDeck site lets you search by designer as well as by style or foundry, so makes a nice resource for type fans as well as designers looking for fonts to try. FontDeck includes the work of 21 separate typographers, arranged alphabetically from Charles Bigelow through to Optima and Palatino creator Hermann Zapf. The site’s function of allowing a limited use of its fonts for initial design work is a great added benefit for helping designers decide on which fonts to purchase.

Font Squirrel

http://www.fontsquirrel.com/

FONT SQUIRREL OFFERS free commercial fonts, with a slightly concerning disclaimer that it hopes all the fonts you can download for @font-face usage are devoid of any licensing issues. Still, it has an impressive breadth of styles available on the site, with some nice looking faces available for the tip of a hat. These are full typesets, available to designers in all the standard formats. A perfect playground for the amateur or small budget designer, but probably not the best place to go for your type if you have a bluechip client and a reputation as a professional agency to uphold. The site also has a lovely friendly tone, and despite the reservations mentioned earlier, does give an impression of professionalism. It’s obvious these guys are doing this for their love of type rather than any particular desire to undercut or take advantage of either the commercial foundries or, more to the point, the up-and-coming type designers whose labours they distribute.

Fonts.com

http://webfonts.fonts.com/

THE AMAZON OF the type industry, with over 7,000 typefaces available, Fonts. com’s WebFonts has quickly established itself as the place to go for a wide selection of popular fonts for use on the web. Favoured by type legend Erik Spiekermann – which certainly doesn’t do the site any harm whatsoever – Fonts. com’s WebFonts service has a wide variety of licensed fonts available for the professional web designer. Amateurs can probably find a cheaper solution elsewhere, but for those who are serious about good typography, this should prove one of your most popular of bookmarked sites. As well as a selection of web versions of popular print fonts, WebFonts offers everything that print type-fiends have long enjoyed in their creative arsenals. In addition to the variety of faces, many fonts enjoy the benefit of various weights and subsets, and a full range of special characters and ligatures. There is also a range of free fonts available too.

Brushes
[£2.99] | developer STEVE SPRANG | http://brushesapp.com

This is one of the most sophisticated artistic apps available for iPhone and demonstrates how much power can be squeezed out of the device. Essentially it can be seen as a paint doodler for crafting simple artworks with touch-based gestures, but the ability to export images out at high resolutions or as QuickTime movies hints at something more powerful. The app records your actions within a bespoke .brushes file that syncs with a web server and allows you to replay each effort stroke for stroke. A free desktop application called Brushes Viewer facilitates additional operations, but an incredibly simple iPhone interface still enables users to select brush styles, widths, shapes and colours with ease – even adding support for multiple image layers, opacity levels and extreme zooms. An iPhone classic, destined for creative greatness on the iPad.

WordPress for iPhone 2.0
[FREE] | developer AUTOMATTIC, INC. | http://iphone.wordpress.org/

The explosion of CMS-based blogging has changed the way we publish webpages in a manner that really lends itself to mobile. This official app for blogging giant WordPress provides the key tools in an iPhone-friendly interface, allowing posts to be written and comments approved in just a few steps. Version 2 offers comment reply, editing and highlighting facilities alongside features for attaching images stored on your camera roll and intelligent recognition of hyperlinks as you type. What this app suggests most is that pretty powerful tools for updating and managing
online content, across multiple blogs, can exist on handheld devices quite happily. Add to this the open source nature of the application’s development and it makes potential future iterations for iPad really exciting, perhaps adding theme editing capabilities into the mix. That’s if you’re not keen on simply using iPad Safari of course.

WhatTheFont
[FREE] |  developer BITSTREAM INC | http://new.myfonts.com/WhatTheFont/

Fonts come in many shapes and sizes and it is almost inevitable that while browsing the web, one will grab your attention. Then curiosity kicks in and you begin to wonder what font is that? This is where the WhatTheFont app kicks in and takes over. Users can use the camera on an iPhone to take a snap of the favoured font and crop the image to a specific word. Each letter is then identified by the user and WhatTheFont comes up with a selection of matches. The font matches are not just visual, a single tap reveal details of the font’s origin and the complete range on offer, ie uppercase, lowercase, numbers. Finally, if you are loving a font there is in-app website access that takes the user directly to the ‘Buy it’ page.

HTML Editor (Dirty)
[£1.79] | developer TAWCS | http://tawcs.com/htmledit/HTML_Editor.html

The usual practice for editing HTML documents is to do so locally, then upload the changes to your host using FTP. However, this becomes tougher on mobile devices like the iPhone as it doesn’t offer an open file system and the kind of workspaces needed to make workable HTML design very practical. This app offers capabilities to view, search, copy/paste and even edit HTML source markup or indeed compose new documents from scratch. Common coding constructs such as brackets and semi-colons are easily added via the quick keys and FTP export support enables you to save iterations of edited pages online. Despite a few quirks in terms of saving files out with CSS, PHP or JavaScript extensions it does offer a very tidy glimpse of what is possible. To be able to compose or make edits to live pages on-the-fly and preview the changes graphically is really useful, so a bigger screen and greater processing power might be useful. However, by then Adobe may have launched a Dreamweaver iPhone/iPad app which if anything like the Photoshop, one could be superb…

PMS|HEX
[£1.19] | developer RICHE EN PULPE | www.pulpe.nl/iphone/

Colour is the lifeblood of good design and while web design is based on hexadecimal code, design is not. Print design uses the Pantone colour range to determine its colours, not much help for any web designer looking to convert specific colours. The PMS|HEX iPhone app is the help that web designers need. It is a simple app that negates the need to spend time searching for the appropriate match. The layout of the app is easy
on the eye and simple to use. Sitting side-by-side is the Pantone spot colour code and hexadecimal code both accompanied by a preview of the colour. Users simple need to keep scrolling to find more and more codes. When viewing on screen it is worth remembering that the colours may not be an exact representation, but the code will be. As the creators also point out, hexadecimal colours are an approximation of the PMS spot colours.

myPANTONE
[£5.99] | developer PANTONE LLC. | http://www.pantone.com

So we have featured a palette app already, but this one from Pantone demonstrates how rich a design app interface can be. It shows most of all that screen size needn’t hinder the imaginative execution of a simple and intuitive GUI. Again the concept is all about picking suitable
schemes for print and web but in much more of a way that designers will respond to, with sets of virtual Pantone colour cards forming different configurations of the interface. You can easily imagine this app replacing the physical wheels or wall charts that many designers have used previously. One of the screens for Layout features a concept noticeboard that allows virtual Pantone cards to be pinned next to each other to get an idea of how swatches sit alongside or contrast. This approach is great for conveying context within designer applications, a more web-centric implementation on iPad could involve dropping web colours into mock blog templates.

SketchBook Mobile
[£1.79] | developer AUTODESK INC. | http://tinyurl.com/ycy3qcp

Not merely a very capable drawing app, SketchBook Mobile provides a more genuine solution for concept work. You can easily imagine this being adopted by designers to visually brainstorm graphical ideas more casually, literally providing a digital sketchbook that can output the results for further development. The larger canvas and workspace area, coupled to support for multiple layers, and the ability to export sketches out to the iPhone image library or email makes it a viable tool in its own right. Images are saved in PSD format with layer information kept intact so you know that colleagues or clients will have no trouble
previewing the results or making additional edits. The iPad’s larger screen should empower apps like this and provide the extra level of usability needed to make it useful in a practical context, making this an essential one to get now and keep hold of for the future!

cliqcliq Colors
[£1.79] | developer CLIQCLIQ | www.cliqcliq.com/support/colors/

A big part of web design and certainly the crafting of attractive templates is in being inspired to create new styles. Colour usually plays a huge part in this process and often the look and feel of a page can be completely determined by getting the colour palette just right. Those who use Adobe’s Kuler RIA online will recognise how helpful it can be to get assistance in establishing harmonious and web safe schemes, which is effectively what cliqcliq’s Colors allows you to do. Palettes can be quickly derived from photos taken on the iPhone, from selected Flickr pictures or manually created from scratch, then stored locally or posted to the cliqcliq.com facility for future reference. Colour hues can be quickly edited using slider controls and simple swipe gestures and each swatch provides Hex values, RGB/CMYK codes and HSB percentages. Most vitally, the palettes can be emailed out in formats optimised for Photoshop, Illustrator, Flash and Dreamweaver.

The Typography Manual
[£2.39] | developer JUSTIN STAHL | www.typographyapp.com

At face value the world of typography is a seemingly simple process. However, it is type and fonts that make up a huge slice of the web. Using different sizes,
colours and styles to create visually appealing pages is an art form in itself. The Typography Manual app has a collection of features and resources that will help every web designer create pixel perfect typography for the web. To kick-off there is an extensive guide to the history of printing, the basics of type and using typography on the web. For the more discerning there is a style guide to assist with producing the correct copy. There is also a visual anatomy guide which defines typographic terms. A more practical feature for web designers will be the HTML character codes list. Plus, the Em calculator, which translates pixel sizes, based on a default, into ems.

FTP on the go
[£3.99] | developer HEADLIGHT SOFTWARE | www.ftponthego.com/

Designing locally or viewing via the web are two very important components of the web design process. However, linking the two together is the simple process of transferring via FTP. This powerful and useful app gives users the power to get connected and upload and download via a secure connection. The very nature of FTP means that web designers now have the freedom to make amendments the moment inspiration strikes. The FTP on the go app has a built-in text editor for making instant changes. There is a find and replace feature, ideal for producing multiple changes in one hit. Then it is simply a matter of saving and ploading ready to view. There is even an option to change file permissions on the server. Finally, like all good FTP clients users can use it to download and store files, but best of all there is a file sharing option for viewing files from another iPhone.

1. CODASLIDER 2
http://www.ndoherty.biz/2007/09/introducing-coda-slider/
Coda-Slider 2, authored by Niall Doherty, provides a quick and easy multi-panel slider in the style of Panic Software’s Coda site (found at http://www.panic.com/coda/). This very popular effect allows multiple content areas to occupy one area, making maximum use of space on your pages and adding nice visual movement to designs. The Coda site also spawned a host of tutorials and plug-ins replicating the puff tooltip effect found on its pages.

2. PANEL GALLERY
http://www.catchmyfame.com/catchmyfame-jquery-plugins/
Panel Gallery is a simple plug and play gallery plug-in that effortlessly creates an animated slideshow from a group of images. The transitions are numerous and customisable, and no special image preparation is required making it ideal for clients who are managing the content of their websites after you’ve finished the design and development. As with many jQuery plug-ins installation is as simple as including the .js file and calling a single line of code.

3. MB. MENU
http://pupunzi.com/#mb.components/mb._menu/menu.html
mb.menu is a multi-level drop-down menu system that fixes all the common drop-down issues such as IE’s select box z-index problem. It also looks very clean and works well as a right-click context-sensitive menu. The plug-in supports templates, AJAX data and is fully customisable with options for timing, icons and more. Although dropdown menus have been around for a while, they used to require fully fledged desktop applications to install!

4. JQTOUCH
http://www.jqtouch.com/
jQTouch is a complete environment for developing applications on iPhone, iPod touch and numerous other smartphones. It replicates the native iPhone WebKit animations and GUI to enable web developers to rapidly
create iPhone web applications with the familiar Apple human interface controls. It also adds events for touch and swipes, extending the standard set of jQuery event triggers. jQTouch even supports its own extensions to add even further functionality.

5. JEDITABLE
www.appelsiini.net/projects/jeditable
Jeditable allows webpages to render per-item forms on demand. Developers can assign a class to any element of their choosing, and when the user clicks on that element it becomes editable. Changes made are posted using AJAX to a server side script and updated in real-time. User input can be masked, configured in various formats and limited to different input mechanisms. This is an excellent example of how jQuery has enabled richer user
interfaces to be employed.

6. LAVALAMP
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
LavaLamp was originally written for the MooTools library but was ported to jQuery in 2007. An excellent example of how jQuery can be used to improve the user experience transparently, LavaLamp is a simple effect that works as an alternative to the traditional mouseover. A bubble moves across your horizontal navigation bar to highlight the currently hovered item. Simple but very visual.