front end developer/ designer

Hello. Thanks for visiting my online portfolio. My name is Rowley Macklin and I am a front end developer & designer. Here you’ll find some of my work projects going as far back as 2001.
As is usual in this profession my skillset is always changing and adapting (one of the reasons I love what I do). I am lucky to have worked with some great clients in the past and present and am also very lucky to have had some very interesting and varied jobs in the past. Before entering into the IT industry in the year 2000 I had quite an interesting biography of work. If you have the time have a flick through my personal interests

.2013web{webdevelopment:Nitrogen;}

VIEW WORK: Nitrogen

BRIEF: UPDATE NORDIC LANGUAGE CONTENT FOR IPAD APP

Content updates for a new iPad product (Nordic languages). As the various pages were iPad specific, some tweaking was required to the HTML5 and CSS.

.2013web{webdevelopment:Roll's Round the World;}

VIEW WORK: ROLL'S ROUND THE WORLD

BRIEF: CREATE MOBILE-FRIENDLY CROSS-BROWSER SITE FOR A BOOK

Created a site to sell my new book. It was important for sales that it was responsive so it worked well on all platforms: Mobile, Tablet and PC.

.2012web{webdevelopment:eValueFE (Risk Planner);}

VIEW WORK: eValueFE Risk Planner (Not yet Live)

BRIEF: CREATE TABLET HTML5 APP

Created a tablet-friendly financial profil risk tool. Also functional in all major browsers.

.2012web{webdevelopment:Aviva (Lifeplanner Tool);}

VIEW WORK: Aviva Lifeplanner (Not yet Live)

BRIEF: UPDATE CONTENT AND CROSS-BROWSER TWEAKS

Aviva were releasing a new life planner tool, so I built the HTML and CSS foundation of the new tool and new content had to be added. It was tweaked regularily to be browser consistent. It's primary platform was the iPad, then main browsers and finally mobile devices.

.2012web{webdevelopment:RIM (BlackBerry);}

VIEW WORK: RIM (BlackBerry)

BRIEF: REGULAR WEB UPDATES & ADDING NEW PROMOTIONS

As BlackBerry were releasing new products and software the website needed regular updates and tweaks. Also cleaned up some of the styles to make the pages more browser-friendly.

.2011web{webdesign:FE (Financial Express) Trustnet;}

VIEW WORK: FE (FINANCIAL EXPRESS) TRUSTNET (Static re-designs; not yet live)

BRIEF: DESIGN NEW WEBSITE LAYOUT

Client wanted to bring Trustnet more inline with FE branding so I used the FE branding colours. Designs created for the Homepage and also the Factsheet. The biggest challenge was finding usable colours for the graphs and charts.

.2011web{webdesign:M&G Investments ;}

VIEW WORK: M&G INVESTMENTS (Static re-designs; not yet live)

BRIEF: DESIGN NEW WEBSITE FORM LAYOUT

I designed new form layouts using the M&G Investments branding colours. The biggest challenge was trying to make the progress indicator logical and colour co-ordinated.

.2011print{advertdesign:FE (Financial Express);}

VIEW WORK: FE (FINANCIAL EXPRESS)

BRIEF: CREATE A 1 PAGE FLYER FOR A DINNER EVENT

Using the FE branding colours I also hi-lighted the prestige of the dinner with photos. The only real challenge was fitting all the content into one page.

.2011web{webdesign:FE (Financial Express) Analytics;}

VIEW WORK: FE (FINANCIAL EXPRESS) ANALYTICS (Static re-designs; not yet live)

BRIEF: DESIGN NEW WEBSITE LAYOUT

I designed a new layout using the FE branding colours. Also designed a brand new set of icons as the existing ones were a mix of varying designs and sometimes mis-leading. The biggest challenge was creating clear icons without using description text.

.2011web{webdesign:Luna di Miele;}

VIEW WORK: LUNA DI MIELE

BRIEF: DESIGN WEBSITE & HELP WITH MAGENTO (CMS) INTEGRATION

A new home page was designed and the shopping pages re-designed. Flash was used on the home page to hi-light wedding images. The only challenge on this project was getting to grips with the site sitting in Magento (CMS). As well as using Magento in German.

.2011print{logodesign:Luna di Miele;}

LUNA DI MIELE

BRIEF: DESIGN A NEW LOGO WITH A CLASSIC FEEL

Experimented with a variety of fonts and colours but in the end a simple typeface for the main part and neutral colors worked best.

.2011web{webdevelopment:African Minerals;}

VIEW WORK: AFRICAN MINERALS

BRIEF: TWEAK THE DESIGNS AND ADD NEW CONTENT FOR THE 2011 ANNUAL REPORT

With a very tight deadline new content was added throughout. The designs of the pages were tweaked, as well as the CSS to make everything multi-browser friendly.

.2011web{webdevelopment:Man Group plc;}

VIEW WORK: MAN GROUP PLC.

BRIEF: TWEAK THE DESIGNS AND ADD NEW CONTENT FOR THE 2011 ANNUAL REPORT

The designs of the pages were tweaked, as well as the CSS to make everything multi-browser friendly. One of the main challenges was getting the Jquery effects to work on an iPad/ iPad2.

.2011web{webdevelopment:Dorset Cereals;}

VIEW WORK: DORSET CEREALS

BRIEF: EMAIL CAMPAIGN: CONVERT FLAT DESIGNS TO HTML & CSS

Simple e-mail templates created from flat images. Main challenge was getting all the styles to work in all E-mail clients.

.2011web{webdevelopment:Kellogg's: Coco Pops Promise;}

VIEW WORK: KELLOGG'S

BRIEF: ADD NEW CONTENT AND TWEAK THE CSS

Simple content updates and CSS tweaks to help make the website more browser-friendly. The main challenge was fitting new content into constrained space.

.2011web{webdevelopment:Peugeot;}

PEUGEOT 508

BRIEF: EMAIL CAMPAIGN: CONVERT FLAT DESIGNS TO HTML & CSS

Simple e-mail templates created from flat images. Main challenge was getting all the styles to work in all E-mail clients.

.2009web{webdesign:Rated People;}

VIEW WORK: RATED PEOPLE

BRIEF: DESIGN A NEW WEBSITE AND MAKE REGULAR CONTENT UPDATES

As lead front end developer and designer at Rated People I re-designed the website and layout of content. The biggest challenge was support for the pesky IE6.

.2009web{webdesign:AfricaSolo;}

VIEW WORK: AFRICASOLO

BRIEF: PERSONAL PROJECT: DESIGN & RE-WRITE TRAVEL INFO ON AFRICA

Wanted to keep the website small and compact. I used it as a practical exercise to hone my Photoshop and CSS skills. The biggest challenge was creating the front page postcard graphic.

.2007print{logodesign:Do What I Do;}

DO WHAT I DO

BRIEF: CREATE A LOGO TO REPRESENT SOMEONE FOLLOWING A SUGGESTION

This logo had me stumped for a while. In the end the footprints within footprints worked well for the company and represented the idea of doing something based on a suggestion well.

.2005web{webdevelopment:Cisco Systems;}

VIEW WORK: CISCO SYSTEMS

BRIEF: REGULAR CONTENT UPDATES WITHIN STRICT DESIGN GUIDELINES

As a web designer at Cisco I was responsible for content updates for the public website as well as the intranet. I later took on the role of web analyst with a great team of designers and web developers.

.2004web{webdesign:Diginuts;}

VIEW WORK: DIGINUTS

BRIEF: DESIGN A PORTFOLIO FOR MY WORK

I toyed with many concepts and designs and in the end decided on a paper themed concept to celebrate my past travels. I also used it as a practical exercise to hone my Flash/ Action scripting skills. The greatest challenge was creating a realistic looking passport on screen.

.2004web{webdesign:Laura Carstensen;}

VIEW WORK: LAURA CARSTENSEN

BRIEF: DESIGN A SIMPLE WEBSITE TO HOLD MINIMAL CONTENT

There wasn't a huge amount of content for the website and wouldn't be updated regularly so I created a simple compact design in flash. The client simply wanted a presence online.

.2004web{webdesign:Supply Serve Technology;}

VIEW WORK: SUPPLY SERVE TECHNOLOGY

BRIEF: DESIGN A WEBSITE FOR THE 9 MAIN SUPPLY SERVE PRODUCTS IN THE FRESH FOOD INDUSTRY

I stuck to the new Supply Serve branding guidelines and themed the website in blue and white with colour themes for the 9 products. There was limited content to add to the website so I compensated with graphics. The site was never launched as content couldn't be compiled.

.2004web{webdesign:Supply Serve Technology - Listing;}

VIEW WORK: SUPPLY SERVE TECHNOLOGY - LISTING

BRIEF: DESIGN A DIRECTORY-STYLE WEBSITE FOR SUPPLY SERVE AND IT'S PARTNERS

I used oranges and blues to tie in with Listing's colour scheme. Unfortunately, the website never went live due to lack of content.

.2004print{advertdesign:PW Finlayson;}

VIEW WORK: PW FINLAYSON

BRIEF: CREATE A 1 PAGE ADVERT TO CELEBRATE THE 30TH ANNIVERSARY OF THE NEW COVENT GARDEN MARKET

The idea of using fonts came when I browsed through some fonts from the 1970's. The photos of the time just fell into place after that.

.2004print{logodesign:PW Finlayson;}

PW FINLAYSON

BRIEF: Create a logo to be recognisable as a logo for a fresh food company

I came onto the idea of using a carrot as an 'i' and an apple as an 'o' when browsing through photos of various fruit products. That combined with a classic font and corporate blue and the client was very happy with the result.

.2004print{logodesign:Football Mitoo;}

FOOTBALL MITOO

BRIEF: CREATE A LOGO TO REPRESENT A GRASS ROOTS FOOTBALL ORGANISATION

I had to choose colours carefully with the logo as the client didn't want it to be colour biased towards any particular club. The grass below the football made sense and with the added colours on the football itself the client was very happy with the result.

.2004print{logodesign:G & M Catering;}

G & M CATERING

BRIEF: CREATE A LOGO TO REPRESENT A FRESH FOOD & CATERING COMPANY

The client loved the font and after browsing various food photos a pear fitted well and the yellow colour freshened it up.

.2004print{logodesign:Llandudno Fruit Renaissance;}

LLANDUDNO FRUIT RENAISSANCE

BRIEF: CREATE A LOGO FOR A FRESH FOOD COMPANY WITH A WELSH THEME

As the client's head office is near the Welsh borders I used a Welsh Dragon as a symbol and as gold is used in some of their existing branding I used it for the main logo.

.2004print{logodesign:Edible Systems;}

EDIBLE SYSTEMS

BRIEF: CREATE A LOGO TO REPRESENT TECHNOLOGY & THE FRESH FOOD INDUSTRY COMBINED

This was quite challenging as I had to represent two industries: food and technology. After a lot of experimenting it all came together well and the client was very happy to have the graphic symbol represent the company initials and technology instead. This is my personal favourite logo.

.2004print{vandesign:L.Q.F (London Quality Fruit);}

L.Q.F

BRIEF: CREATE BASIC ARTWORK FOR THE CLIENT'S VAN FLEET

I used simple colours to high-light the existing company logo. The main challenge was positioning text so it wouldn't flow on the edging of the vans and therefore make the text unreadable.

.2004print{logodesign:L Jalley & Co;}

L JALLEY & CO

BRIEF: CREATE A LOGO TO REPRESENT THE FRESH FOOD INDUSTRY COMPANY

Blue was the colour of choice by the client so I started with the blue font. Then after seeing an image of a bunch of grapes I used it to represent the letter 'Y' and green was used to show freshness.

.2004print{brochuredesign:L Jalley & Co;}

L JALLEY & CO L Jalley & Co.

VIEW WORK: L JALLEY & CO

BRIEF: CREATE A 1 PAGE BROCHURE TO SHOW THE USE OF TECHNOLOGY IN THE FRESH FOOD INDUSTRY

I used a technology background collage and then high-lighted the main food products the client sells.

.2004print{vandesign:L Jalley & Co;}

L JALLEY & CO

BRIEF: DESIGN ARTWORK FOR THE CLIENT'S NEW FLEET OF VANS'

As Jalley had just purchased a new fleet of vans they wanted to show off their new logo. I used Illustrator for the positioning. The main challenge was limiting the text/graphic overflow on the back door hinges.

.2003web{webdesign:Supply Serve Technology: Sales Tool;}

VIEW WORK: SUPPLY SERVE TECHNOLOGY - SALES TOOL

BRIEF: DESIGN A SIMPLE PORTAL FOR SUPPLY SERVE AND CLIENTS IN VARIOUS FRESH FOOD INDUSTRIES

I used simple images of each product to easily hi-light the category.

.2003print{logodesign:Houghtons of London;}

HOUGHTONS OF LONDON

BRIEF: CREATE A STRONG LOGO FOR A FRESH FOOD INDUSTRY COMPANY

Chose the font style and text first and used neutral dark grey to high-light the bright green leaf over-lapping.

.2003print{logodesign:Cream of the Crop;}

CREAM OF THE CROP

BRIEF: DESIGN A LOGO TO REPRESENT A FRESH FOOD COMPANY

The name of the company says it all. So I chose a fresh crop symbol to represent quality and fresh crop.

.2003print{logodesign:Bill Bean;}

BILL BEAN

BRIEF: CREATE A LOGO TO REPRESENT A FRESH FOOD COMPANY

With the company name having the word bean in it I couldn't resist using a symbolic bean as the main graphic. The greens were chosen to represent fresh produce.

.2003print{logodesign:Kim Guan Choong;}

KIM GUAN CHOONG

BRIEF: CREATE A LOGO TO REPRESENT A KOREAN FRESH FOOD COMPANY

As the colour gold represents wealth and prosperity in Far Eastern culture I chose it for the main logo colour. To tie it all together I chose a Far Eastern font type.

.2003print{logodesign:Supply Serve Technology;}

SUPPLY SERVE TECHNOLOGY

BRIEF: CREATE A LOGO FOR A TECHNOLOGY COMPANY

As Supply Serve Technology has 9 main products I symbolised this with the products being cradled within the logo font.

.2002web{webdesign:Nikkei Europe;}

VIEW WORK: NIKKEI EUROPE

BRIEF: DESIGN A WEBSITE TO HOLD VALUABLE ECONOMIC DATA AND INFO FOR NIKKEI

Blue is the company colour so I chose it as the theme for their website. With little, or no Japanese language knowledge the biggest challenge for me was adding Japanese to the website.

.2002web{webdesign:Nikkei NEEDS;}

VIEW WORK: NIKKEI NEEDS

BRIEF: DESIGN A WEBSITE TO HOLD ECONOMIC DATA

As NEEDS is a part of the NIKKEI corporation I wanted to keep the colours and design style similar.

.2001web{webdevelopment:NHK (Japan Broadcasting Corporation);}

VIEW WORK: NHK (JAPAN BROADCASTING CORPORATION)

BRIEF: ADD ENGLISH CONTENT TO AN EXISTING JAPANESE LANGUAGE WEBSITE

A simple content update to the Japanese broadcasting corporation. The main challenge was fitting English text into limited space, as Japanese characters are narrower.

.2001web{webdesign:The Portobello Festival 2001;}

VIEW WORK: THE PORTOBELLO FESTIVAL 2001

BRIEF: CREATE A WEBSITE FOR THE PORTOBELLO FESTIVAL

Mainly an arts festival I wanted to portray colours and fun so used different colour themes for each section. This was my first commercial project.

html/ xhtml
css
html5/ css3
javascript/ jquery
accessibility
usability
w3c standards
flash animation
action scripting
photoshop
illustrator
fireworks
dreamweaver/ notepad++
print/ typography/ colour theory
tea making

Front End Developer - Freelance

Nitrogen, Roll's Round the World
Front End Developer - Freelance

BlackBerry, eValueFE
Front End Developer - Freelance

FE (Financial Express), Peugeot, Kellogg's, Man Group, Dorset Cereals, African Minerals
Lead Front End Developer

Rated People, London
Web Designer/ Developer/ Web Analyst

Cisco Systems, Bedfont Lakes, London
Web Designer/ Print Designer

Supply Serve Technology, London
Freelance Web Designer/ Front End Developer

Nikkei, NEEDS, NHK, Portobello Festival
Newmedia Course

Nottingdale Technology Centre, London
Networking Course

Pyracal, London
Advanced Pest Technician

Rentokil, Central London
Manager & Creator of an Ostrich Conservation Farm

WCF - Wildlife Conservation Farms, Kenya
Bilingual (German/English) Tourist Guide

Safari Ostrich Show Farm - Oudtshoorn, South Africa