A custom WordPress theme for a London based, independent and not-for-profit organisation.

The Foundation’s primary goal is to do as they say, “open minds to open networks”. Taking the social and economic benefits that OPLANs to the rest of the world.

View live site.

Website design and custom developed WordPress theme for the Forsyth Group, a leader in Executive Search in the IT and emerging technology fields.

The dolphins refer to Sentience, the ability to have subjective perceptual experiences, distinct from creativity, intelligence, sapience, self-awareness, and intentionality.

View live site.

I could have been one of the first people UK to receive HTML5 for Web Designers. I am a big fan of A List Apart and was keen to pre-order the first book of A Book Apart. I must admit, the first glimpse of the size of the book took me by surprise. But the first part of Dan Cederholm’s (author of Handcrafted CSS and Bulletproof Web Design) quote on the back of the book made sense and the second part put me at ease and curiosity at the same time.

Crack open this book after you fasten your seatbelt in Boston. Before you land in Chicago, you’ll stop worrying and finally, fully understand HTML5. As usual, Mr. Keith takes a complex topic and eloquently describes it for the rest of us.

It is a ‘light’ informative read (with comparisons throughout the book that has a funny twist to it), thus after a few weeks I thought to read it again. Even though reviews of this book have been popping up all over the interwebs, I want to have a mention of my own.

The beginning of the book, chapter 1, starts with ‘right from the beginning’. Some things you might know and some things I did not know and how HTML5 is moving things forward for a semantic web and web applications.

Chapter 2 explains about the basic structure of HTML5. Not necessarily the ‘birth of HTML5’, but the support for existing elements, elements that is obsolete, redefining some elements and the development there forth. This chapter also includes design principles such as “Do not reinvent the wheel” and “Pave the cowpaths”.  And once again with excellent comparisons, HTML to everyday things (from a movie, Greek mythology to train spotters) that made me smile.

Chapter 3 introduces the new exciting media elements. A thorough uncomplicated explanation of the <canvas> element with the available attributes. The limitations it has for now (lack of accessibility), but how it currently can be used in web design. The <audio> element also rolls out with a list of attributes and their values — if they have — in simple terms and the nifty things you can do with it.

Chapter 4 is dedicated to web forms. HTML5’s new and expanded form elements and how new additions replace the use of JavaScript (well, until all browsers support it). There are a lot of cow paths being paved…

Chapter 5 is all about semantics! It consists of a thorough list of new elements and their use in the HTML5 mark-up – paving more cow paths in the structure. It also consists of a handy update to the content models and their new names. It includes examples of how to use the new structure elements and how it influences the outline of a document.

Chapter 6 end the book off with how we can use HTML5 today.

In all seriousness of HTML5, the light hearted, quirky writing style made it a joy to read. The stylish, modern design and layout of the book by Jason Santa Maria complements the editorial.

The new Adobe Creative Suite 5 was launched 12 April 2010! I am still working in CS3 everyday. I have done a few things in CS4, but not enough to have a real opinion. From what I have come across on the internet, people are not sure if it is worth the upgrade. Looking at new features in a few applications of CS5 and the new additions, Adobes’ Business Catalyst and Flash Catalyst, it is pretty exciting stuff to me. Adobe has also introduced CS Live. It is a collection of online services that work within the CS5 applications. This is a feature I have been after for while. It makes it easy to collaborate with colleagues and clients on projects.

From a design point of view

Adobe kept the dominating colours that was implemented with CS3. With CS5 the Desktop Brand team at Adobe decided to concentrate more on the splash screen. It is based on the isometric grid similar to Otl Aicher’s work for the 1972 Munich Olympics. The five pieces give the shapes exactly the right amount of complexity and it ties in nicely with the fifth CS release. Read the in depth discussion about the design process at idsgn.

Adobe Creative Suite 5 Design Premium

In a nutshell I will point out a few new features in Adobe Creative Suite 5 Design Premium that consist of the following:
(Including Bridge CS5, Device Central CS5 and integrates with CS Live online services)

• Photoshop CS5 Extended
• Illustrator CS5
• InDesign CS5
• Flash Catalyst CS5
• Flash Professional CS5
• Dreamweaver CS5
• Fireworks CS5
• Acrobat 9 Pro

Photoshop CS5 Extended

Painting
Adobe has created a new painting engine in Photoshop. By clicking on the paintbrush and selecting the mixer brush, it will show a preview of an actual brush on the screen. ‘Pick’ up the new art brush from the walk-on tablet and a 3D preview appear by rotating the barrel of the brush. With previous versions, pushing colours was the only options. Now colours can be blended too. Paint directly over an photograph or just create original art.

Puppet Warp
This feature accurately warp images with exact precision. Say, you have an object with a transparent background, by selecting >Edit>Puppet Warp a mash will appear over the object. The mash can be turned on and off. By adding control points/pins to specific points on the object to lock areas down, you can achieve more control with accuracy. Different modes are available for this feature, for example normal and distort.

HDR Pro
Use it to merge together multiple images. It can merge together different exposures from the Merge to HDR Pro dialogue. In a drop down menu there are different toning presets. A new unique feature added on to it, is Remove ghosts feature. It isolates a preferred single master frame within the HDR image.

Refine Mask
The ability to make a very accurate mask a lot easier. It first makes a quick mask selection. It don’t necessarily has to select for example hair’s fine detail. In the masking panel under Refine Mask panel are the new controls to paint in the areas of transition. Radius and edge detection is the key to get the better selection for the mask. With a brush, go over the edges and defined details will emerge. By exporting the new mask it will create a new layer leaving the original untouched.

Content Aware Fill
This new feature works nicely with the Refine Mask feature for photo manipulation. If you have removed an object to a new layer and want to rid of it in the background of the original layer/image, this feature comes in handy. In the Fill dialogue, under the drop-down menu is the Content Aware option. With one click it removes the object from the background. It basically examines the area around a selection and replaces it based on what it decides is a good match.

Illustrator

Perspective Drawing
The new perspective drawing tools create a perspective grid that can be changed and manipulated to hearts end. By using any of the drawing tools and by selecting a pane, the artwork will go on the grid in perspective. With short cuts it is easy to change panels. Objects from other files can be applied.

Variable Stroke Width Tool
By using the Width tool, you can place plots anywhere on a stroke and change the width of the stroke. If there is a stroke that you are particular proud of and want to use again, just save it as a profile.

Shape Builder Tool
This tool detects various pieces/objects that is grouped together. By dragging the cursor from the one object to the other it creates one single shape. Hold down shift key to combine multiple objects.

Drawing Mode: Draw Inside
This feature constrain drawing within an object. Even if you draw outside of the lines, it will constrain (and mask for that matter) the drawing to the outline of the object. With this mode you can even paste grouped objects in live text.

Indesign

The new additions to Indesign that I mention here are all specifically ones that I have been waiting for. And talking to a few other Indesign everyday users, they agree.

Multiple Page Sizes
It is basically what the heading says. Now the pages can also change the orientation. This will work especially well with setting up a page foldout.

Spanning and Splitting for Columns
Normally I would have to create a separate text box for a heading to span over columns, which result in to many text boxes all over the page. Now by just selecting the header and choosing the ‘span’ command with different options to the amount of columns.

Splitting works well with a list of bullet points that can easily fit in two columns within a column. With the Split command (opposite from the above mentioned), the selected text only can easily be split into 2 columns.

Borrow content from another Indesign Document
With Mini Bridge within the Workspace, you can select links from another Indesign project and drag it into the open Indesign document you are working on.

Gap Tool

This tool detects the gaps between frames and automatically drag and resize the frames whilst keeping the gaps between the frames equal. Interactive gap and frame placement takes place. By holding down the shift key, the two top and bottom frames can be change independently.

Interactive Live Corner Effect
Rounded corners is possible for frames of previous versions, but not with a live stroke. Dragging the corners changes the radius and by keeping in shift, each corner can be changed individually to get different corner effects for each corner.

Interactive Indesign Documents
Flip through the document, get sound, animations, roll overs, slide shows, flash video to play directly inside of the document. All happening in Indesign with out writing a single line of code.

Dreamweaver

Inspect Mode
Inspect Mode needs to be turned on by having Live View open. By hovering over areas on the page it uses colour codes to show how CSS is effecting the page. By hovering over a section, it freezes that state in the CSS rules panel. It makes it quick and easy to make changes to the CSS file.
This works well if you want to play around with different options for an element. A CSS rule can be ‘switched off’ with one click. The result can be viewed immediately in real time.

Live View Navigation
I must have feature when working with a dynamic website. Make changes to a .php include and in Live View it will render the whole web page as it would in a browser. With this you can actually click around and navigate through the test website.

Dynamically Related
By turning on Live Code, it renders the code the browser see. Then there is also a way to get to all the related files and assets. Click on the new feature Discover, which will turn on another new feature, Dynamically Related files. There is an option to exclude some of the files in the list (that could be way to long). For example, by selecting CSS from a drop down menu it will only show .css files. A custom filter is also available to search more specifically.

Final Thought

I personally think there are enough useful new features to make the upgrade worth while (especially from CS3). CS Live will make my life a lot easier by streamlining work flow and save time and the client’s time. For those sharing the same excitement, the English language version is expected to be available for shipping by mid-May 2010.

Saxon Fencing Club website is for the local fencing club I go to in Acton W3, London UK. The Saxon ‘S’, mask and the blue has been with the club for a decent part of the 50 years. With all of that, the design somehow represent an actual club with the content as the ‘trophy cabinet’.

View live site.