As part of a revamp to our magazine content within Web Designer, we are looking to offer a forum for the design community and step up our efforts to bring professional advice and anecdotal tales from the trade to our readership.

Within this we intend to give real freelance designers, web agency staff, and web design employers the opportunity to share opinions and experiences via a revolving column. As our featured columnist you will have a rare chance to not only spread your name around the Industry but also impart valuable career observations and lessons to those who hope to follow in your footsteps.

So if you want to become an isnpiration to your peers an fancy yourself as a Web Designer contributer, get on the case and let us know! webdesigner(at)imagine-publishing(dot)co(dot)uk

Typical columns will be roughly 750 words long, plus we will require a mugshot photo for every submission.

We look forward to reading your stories!

Web Designer wants to hear your thoughts on this intriguing, thought-provoking, and at least two-sided issue.

Add your comments via this post or email us your thoughts.

Don’t just emulate your HTML pages, use Flash in your designs to add flare and dynamism to your static, lifeless imagery

The biggest mistake any Flash designer can make is to merely emulate what you can do in HTML with Flash. Flash designers should play to the strengths of Flash using its rich palette of animation tools and special effects to add value to what could normally be displayed using HTML. One of the largest uses of Flash on the internet is for marketing purposes.
In this tutorial we will explore taking a static image and adding interest to this using a variety of special effects, such as blurring the background and letting it fade into focus slowly so that the user’s attention is focused on the foreground. We will place a product in the foreground and add flashes of light to draw attention to it. Rather than just displaying static text, we will dynamically script the text onto the design using a typewriter effect with ActionScript 3.0. Once you have completed the tutorial you may want to use the same techniques to fade the content out again.

This article was originally authored by Mark Shufflebottom and appeared in Web Designer issue 167. You may download the project files here

01 Setting up the document

From the cover CD browse to the tutorial folder and open ‘start.fla’ in Flash CS4. Once open, look in the Properties panel and change the background to black, the frame rate to 25fps and the document size to 1024×618 pixels. In the library click on the ‘bg.jpg’ image and drag it to the stage.

02 Convert to Symbol

Position the image at 0 pixels on the x and y axis in the Properties panel, then go to the Modify menu and select Convert to Symbol. Name the symbol ‘bg’ and make it a Movie Clip then click OK. Right-click on the frame and choose Create Motion Tween from the menu. Drag the timeline out to frame 111 and move the first frame to five.

03 Add the tweens

Move the playhead to frame five and then click on the image on the stage so it is selected. In the Properties panel add a colour effect of Alpha and set this to 0%. Further down in the properties is the Filters. Add a Blur filter to the image and set it at 25 pixel blur on both the x and y axis.

Web Designer continues its quest to find the best reader portfolios out there.

With four pages dedicated to web designers’ work it provides the perfect platform to be seen by the masses.

Don’t be shy, we really do want to see your portfolios. If you think you’ve got what it takes, email me at steve.jenkins@imagine-publishing.co.uk with a URL and a quick comment.

Web Designer issue 174 hits the shelves tomorrow (26 August) and so we’ve got a sneak peak of the latest cover and a quick breakdown of the main content

In terms of the big feature and cover hit, we’re talking WordPress 3 and a complete overview of the new features, upgrading tips and comments from experts including the min man himself – founder Matt Mullenweg. Elsewhere contributer Chris Wright delves into a myriad of mobiles to review the ever-changing landscape of platforms that app developers and web designers face these days. Following our @font-face theme from issue 172, we cast a critical eye over the online font foundry services popping up to offer a healthy plethora of gorgeous typefaces and rate them on performance and content. Behind the Scenes offers a look at vibrant London agency Unit9, while on the tutorial front we have these little beauties:

Integrating HTML5 drag and drop into an eCommerce site, Creating mamazing fade-in rollovers with jQuery, Build custom YouTube video controls with the Javascript Player API, Getting creative wih the Spry tabbed panels widget, Buidling Flash 10.1 content for multi-touch devices, Adding interface states with Flash video transitions AND Design modern and elegant page templates (part one)

Get your copy now from all good stockists or head to our brand new eShop and order online…

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.

Ken Martin – Chief creative officer at Blitz talks to Web Designer about life as successful agency, augmented reality, the iPad and why creative should ‘get their hands dirty’.

WD: To kick-off can you tell the Web Designer readers how the agency got started and what was the thinking behind the name and why did you finally settle on Blitz?

KM: It all started in Silicon Valley, during the early years of the dotcom boom. Ivan (Todorov, CEO/CTO) and I went to college together – majoring in 3D Animation and Storytelling – and we wanted to build a company that would use technology to tell brand stories. Like many start-ups, we started in a garage and quickly moved into warehouse office space. But in 2001, we moved to Los Angeles, entered the entertainment industry and began showing people that technology could be used in their benefit to help spread their brand, amplify their stories and create an involved audience. This was when we decided the world was ready for Blitz. In terms of coming up with the name, we both knew we wanted a single word that really stood out in your mind. ‘Blitz’ in German, means ‘lightning’, and in English, it means ‘an all around attack’. In the marketing world, it represents a very bold, energetic approach which is what we do with all of our clients. At Blitz, we connect creative channels with products and attack solutions in the sense that we work quickly to satisfy our clients.

WD: Back when Blitz first started out, what was the original vision for the agency and how has it developed since its inception?

KM: We started out building an interactive agency that also had very strong storytelling capabilities. For a while we even created animated webisodes.
Today, Blitz has expanded beyond digital. We’ve become a new type of integrated agency that harnesses our interactive and digital DNA as a conduit to connect all touch points and reach people at different levels.

WD: An agency’s website can often be the first point of contact for prospective clients and employees. How much time and effort is devoted to the Blitz website?

KM: We believe an agency’s website should be a showcase for its abilities. The Blitz site took four years in the making, which includes the recent redesign that occupied that past year. As a team, we put a great deal of thought and effort – and about $25,000 per month – into the Blitz site so it can continue to display our best work, highlight our impressive talent, and give visitors a sense of the Blitz culture and lifestyle.

WD: Augmented reality is the big buzzword for 2010 and Blitz recently worked with John Mayer on his AR video for Heartbreak Warfare. How did the project come about?

KM: Long renowned for pushing the boundaries of music and entertainment, John Mayer wanted a way to connect with fans that extended beyond just listening to a new track or watching a music video. For his new album, Battle Studies, Mayer wanted to take advantage of the latest technology while blurring the boundaries between music and new media in order to attract new listeners and appeal to existing ones that don’t ordinarily buy his music. Therefore, his management reached out to Blitz directly in search of a groundbreaking, interactive concept. We decided to produce an augmented reality (AR) music video for Heartbreak Warfare and teamed up with Adobe to deliver it via Adobe Flash Player and FLARToolKit. By utilising AR technology, Mayer is able to connect with fans in a way that transcends traditional marketing techniques and methods of experiencing music. Additionally, by leveraging Flash as the video player, we were able to extend its reach to over 98 per cent of personal computers worldwide.

WD: Augmented reality has yet to hit mainstream web design. Does Blitz have a specific set of AR designers or is it part of a current skill set that your designers have?

KM: Our design and development team is crosstrained on new and emerging platforms, and our user experience practice operates in multiple channels. In order to continue our innovative approaches to client requests, we constantly research AR and look at new ways of incorporating its use in consumers’ lifestyles. We also build prototypes for research and development projects, to experiment with novel uses and really push the limits of AR capabilities.

WD: When working on an AR project such as Heartbreak Warfare, what does the process involve and what timescale was the agency given?

KM: The overall process for Heartbreak Warfare was similar to most other forms of interactive media design and development; except for a few technology areas which required special attention. Most importantly, optimisation had to be at the forefront of our minds when it came to the design and development of an AR piece, which typically takes about eight weeks to complete. Since the scene is continuously changing and moving, both from the video animation as well as the user control of the glyph, we couldn’t make it too complex. Also, because Flash has to handle many large assets all at once, we had to be careful with how we constructed the video.

WD: It could be said that AR is still something of a novelty rather than a practical technology. How does the agency view the current state of augmented reality?

KM: AR is currently in a transition period. Even after a year, we still see innovative implementations of AR and believe its state is becoming more accepted and its adoption more mainstream. AR began as a “wow” sort of novelty. But as it evolves, we can look at how it can add true value to our lives and become more utilitarian.

WD: The potential of augmented reality has yet to be fully realised. Where does the agency think the future of AR lies?

KM: We believe that AR will become so mainstream that it will be embedded in hardware, which will allow us to improve its visual and interactive performance. With the implementation of more markerless or glyph-less applications, AR has the ability to live everywhere that digital displays currently exist: car traffic and navigation systems, mobile phones, and outdoor displays, to name Web Designer | 33 a few. Basically, AR could easily become the glue between digital and physical. Essentially, anywhere we can find how to marry virtual with reality is where this technology can be used.

WD: The ‘magical and revolutionary’ iPad is a device that has been hard to avoid. What are Blitz’s thoughts on the device and does it have a future in web design?

KM: Yes, the iPad does have a future in web design. We are very excited about the iPad because it will allow a whole new suite of applications that will engage consumers. From a print standpoint, the iPad offers an exciting way to take traditional print and forge it with an interactive format that has potential to truly personalise reading and any entertainment experience. In the future, as Apple continues to not support Flash, HTML5 will be accelerated as a requirement for us to master. Blitz is already looking at website design that will be compatible with iPad dimensions and operations.

WD: Getting maximum exposure is crucial to ensuring the longevity of an agency. What are the principal tools used by Blitz to get seen?

KM: Come end of day, it’s all about the work. Our job is to get clients noticed and make a connection with their audience. If we do our job correctly, we inherently get noticed and receive positive wordof- mouth; that leads people to the Blitz site and generates further interest in our work. Other actions we take to increase exposure are submitting projects to award shows, actively speaking and contributing within the industry, and maximising PR efforts, such as this one (thanks to our awesome agency Fusion PR).

WD: Trends and styles are part and parcel of web design. What has caught the agency’s eye recently and how much attention do you pay to trends?

KM: There’s definitely a trend to find the sweet spot between brand-rich experience and community, social, web 2.0-type applications. Brands are looking for agencies that can weave the two together so to create a story involving consumer participation. The Blitz team is very aware of trends and is constantly looking for innovative ways to engage consumers so they can experience brands in a new light. We have built our reputation on trust and confidence in our ability to advance a brand among its audience. Moreover, because many trends are short-lived, we are very selective in terms of our recommendations to clients, especially when every brand has its own set of unique needs.

WD: Blitz is an agency with some very talented people on-board. What advice would you give to anyone trying to get into the industry?

KM: Jump in head-first. Do not be afraid to make mistakes. Live, breathe and eat the industry – study what’s been successful and deconstruct it to discover why it worked. Learn to be a thinker and understand why user experience matters. Get your hands dirty. Learn to love Red Bull, or in my case, candy. Practice, practice, practice and then, work hard.

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.

Gregory Wood is a web designer at Erskine Design, but it is his personal site that is so beautifully crafted. His journal involves extensive posts that are all designed individually to create a truly inspirational peice of work. Check out his Top 5 reasons to learn to dive entry and admire.

The inspiration behind this tutorial comes from the chatty frenzy and on-going activity in ‘social land’ that’s so prevalent today (think MSN, text messages and Twitter). A mixture of plant-like drawings and geometric shapes suggest a festive mood, while the speech bubbles reinforce the theme of conversation. The colour palette evokes a sense of zaniness like the antsy feeling from reading a juicy story or hearing the breaking news from a trusted friend. Bright pink, red and moss green add to the craze, while a navy blue background sets a more stable tone so things don’t get too crazy.
The first part of the tutorial is created in Illustrator and the second in Photoshop. Although the final working file is a .psd, both the .ai and .psd files are created in a way so that each layer contains one element and is named according to its content. Some of the resources we’ll use along the way are from www.mayang.com/textures and www.cgtextures.com.

The article was originally authored by Wendy Ding and printed within Web Designer issue 168. You may download the companion project assets by clicking here

01 Background begins

In Illustrator, create a new document at 8.5-inches by ten inches. Use the Rectangle tool to create a rectangle in the same size in a navy blue colour – this will be the background. Add a new layer above and create a thinner rectangle in beige – this will be the ‘paper’ that holds the main content.

02 Bubbles in the head

On a new layer, draw a speech bubble with the Pen tool and hit Alt/Option+Drag for numerous duplicates. Resize and rotate each one so none are identical. Right-click>Transform>Reflect to flip horizontally or vertically. Apply colours in red, burgundy, pink and mauve. Make sure they overlap to create a sense of overcrowding.

03 Bubble patterns

Turn the grid on with Ctrl/Cmnd+“. Zoom in very close. Next, create a square spanning across four grids with the Rectangle tool. Click Shift while dragging to make it completely square. Create a circle using the Ellipse tool on the centre points of the first and fourth quadrants inside the square.

04 Colour the circles

Decorate each circle with different colours and apply no fill and no stroke to the square. Select everything and drag it into the Swatches panel to make it a pattern swatch. Click on a bubble and in Window>Appearances, add a new fill and select the pattern swatch. This remains editable in the Appearances panel.