In Focus

A selection of my favourite recent pieces of work.

Verisure

Banana Split Productions

Verisure

UI
Dev
UX
HTML CSS JS

As the Designer and Developer in the marketing team for Verisure in the UK, I worked on Banners, Social assets, Websites and Apps. We brought the social media inhouse and developed a strong and consistent brand and identity. I maintained the main verisure.co.uk website as well as numerous landing pages.

www.verisure.co.uk

Fantasy Enhancing

Fantasy Enhancing

Fantasy Enhancing

UI
Dev
UX
DB
Design HTML CSS JS MySQL PHP

The client is a small Independent record label. After the success of Txt Recordings, the client started a new label. They wanted an updated version of the Txt Recordings website. I decided that the best route was for a simple DB that could be updated with a minimal CMS. As before, they also wished to use Paypal for their transactions, so I updated a Jquery based shopping basket. The design was updated using the latest CSS techniques including the cover remaining static until a particular scroll point.

fantasyenhancing.com

Sweaty Betty

Fantasy Enhancing

Sweaty Betty

UI
Dev
UX

Design and Coding of emails for Sweaty Betty. The clothes were front and centre with a very concise and effective design template to adhere to. Each design had to be eye catching highlighting the variety of products around a theme.

www.sweatybetty.com

Banana Split

Banana Split Productions

Banana Split

UI
Dev
UX
Design HTML CSS JS

A boutique commercials agency and production company. They wanted to completely overhaul their online presence. They wanted a succinct website that provided potential customers with a quick understanding of what they do and how to contact them. It made sense to have the address right at the top of the page as well as in the contact section at the bottom. I also gave some guidance on copy writing, which was re-worked a number of times to again keep it straight forward and to the point. The site is one page and re-organises easily to mobile and tablet. The clean and fresh design helps complete their updated re-branding.

www.bananasplitprods.com

Sky

Summer of Sport - BSkyB

Sky

Dev
UX
HTML CSS JS XML RedRat Flash

I was embedded in a Design team for the Sky corporate websites, building the main pages for sky.com. My role was heavily experimental, building proof of concepts for new interfaces and user experiences, we relied heavily on user testing, and mainly worked on fast 2 week cycles. Summer of Sport - Micro-site to showcase Sky's Sport broadcasting in 2012. This was a heavy duty Parallax site, with JQuery, HTML5, XML and CSS. The layout of the page was a cross, with the left arm being a TV guide, the right arm being video and the middle being each sport. I as part of a team of 3, worked primarily on the TV guide which was xml fed for easy updating and the main Parallax area.

Net-a-Porter

Net-a-Porter

Net-a-Porter

UI
Dev
HTML CSS JS Edge Greensock DoubleClick

Throughout 2015 and 2016 I have worked at Net-a-Porter on 3-4 week contracts to complete advertising campaigns. Building HTML/JS banners. The Holiday campaign (seen in the image) was to tie in with their new TV ad, which received coverage in national newspapers. I began by designing static banner ads in over 50 sizes across 3 languages and 8 international markets. I created animated HTML/JS versions using, Greensock and Adobe Edge. A number of the Ads were expandable as well as containing video which was integrated with the animation through the youtube API.

Txt Recordings

Txt Recordings

Txt Recordings

UI
Dev
UX
HTML CSS JS XML CMS

The Client is an Independent Ambient Record label. I designed and built a one page responsive website. They required an easy method of updating, a full CMS seemed a bloated solution. I chose to create a bespoke XML driven page tailored to the client's ability with a limited knowledge of html. They also wished to use Paypal for their transactions, so I created a Jquery based shopping basket. The client also has the ability to change the content of the bandcamp player from a button next to any release.

txtrecordings.co.uk

Sirius

Sirius Self Storage

Sirius

UI
Dev
UX
HTML CSS JS

Sirius Self Storage in Germany wanted to update and rebrand the website, primarily a new experience above the fold. Adding a number of Video Hero's, making the form more engaging and generally bringing the top part of the page to life. I created a few wireframes, then after clarification of the core interactions of the site I designed the new page, and built with existing templates. The PHP CMS was already in place so to make the amendments I created a local flat copy and proceeded to make the changes locally, before porting across the CSS and new html into various php includes. For mobile the videos are exchanged for gifs to combat the lack of autoplay.

sirius-facilities.de

Selfridges

Selfridges

Selfridges

Dev
HTML CSS JS Adobe Animate DoubleClick

Working closely onsite with the Inhouse designer, five banners were created for Eid. I used the latest version of Adobe Animate (recently renamed from Flash) using HTML 5 Canvas and CreateJS libraries. The banners were prepared for Google DoubleClick advertising frame-work. Each banner was optimised, all images were compressed using TinyPNG and TinyJPG as well as the minifying of all JS files.

Archive

Previous work from this year back to my first work creating CD Roms in Director.

PaymentSense Screenshot

The PaymentSense website was built on the WordPress framework. Many distinct pages were needed, that could not be created with the existing templates, so I used the Caldera Shortcode plugin to adapt and built individual assets.

Parallax page Screenshot

This PaymentSense page extensively used the Wordpress Caldera Shortcode plugin to create a customised Parallax page to explain the process of Card Payments with their system.

SkyBox TV Upgrade Screenshot

Sky - Flash built test concept for new SkyBox TV Upgrade interface. We used Redrat (a USB-based remote control input/output device) to test via a TV remote control. Within the AS we assigned certain keys to functions then assigned those to keys on the remote control.

A Day Without Distance by Anzio Green

The Cover for A Day Without Distance by Anzio Green, Print Design for a Digipack and CD.

Rednetic Recordings Screenshot

A release page from the Rednetic Recordings website

Fuji Green Tea Body Range Screenshot

I designed and built the Fuji Green Tea Body Range page for Bodyshop.

Afterglow by Archord

The Cover for a series of releases on Rednetic Recordings. Digital distributed via iTunes, Spotify, Google Play and others.

Judo Pay Screenshot

Judo Pay was also a based on a WordPress frame work, I used the Caldera plugin again to customise the page and create bespoke HTML and CSS.

Kode Screenshots

This is some of my earliest work on projects while working in Cardiff for Memory Palace and Kode Digital, a BAFTA award winning company I set up with 4 Colleagues. Work included websites for S4C and CD ROMs for Gwent Tec.

XLN Screenshot

I worked at XLN in the marketing department, as the lead Web Designer. I maintained the main website as well as a number of others, I also worked on banners and other online material including emails. We relied heavily on google analytics and the homepage was updated regularly.

Rednetic Recordings Screenshot

A Full window to display a cover. From the Rednetic Recordings website.

Vitamin C Range - Bodyshop Screenshot

I designed and built the Vitamin C range page for BodyShop onsite, within the .net framework. This section has a grid of simple rollovers.

Fuji Green Tea Body Range - Bodyshop Screenshot

I designed and built the Fuji Green Tea Body Range page for Bodyshop.

Press Association Games Screenshot

While at the Press Association, I worked with Flash creating many Info Graphics, to help explain News stories, as well as creating Polltrackers, Maps and Games for the UK and US elections.

Press Association Media Lawyer Website

While at the Press Association, I worked on many different websites under the Press Association Umbrella including Media Laywer.

Rednetic Recordings Screenshot

A PHP and XML data driven website for the Rednetic Recordings Record Label.

Bodyshop Vitamin C Screenshot

I designed and built the page for BodyShop to showcase their Vitamin C range.

Press Association Infographics Screenshot

While at the Press Association, I worked with Flash creating many Info Graphics. One project was to present the top 10 trending topics from TweetDeck via flash and an XML feed. This was presented on the main News Room large screen, to give the Journalists and Editorial Team an introduction and insight into Social Media.

Press Association Pic Select Website

While at the Press Association, I worked on many different websites under the Press Association Umbrella including
Pic Select - the Press Association's premier publicity distribution service, supplying thousands of print-quality images, video and audio files into the hands of influential journalists and editors at the heart of the media industry.

About

Mark Streatfield Profile Picture

I have an excellent knowledge of hand coding HTML and CSS coupled with outstanding design awareness. I have a deep knowledge of Jquery and the latest coding standards for Responsive design. I have the ability to create engaging multimedia content for a broad range of platforms. I have over 18 years of experience working with clients, from individuals to large corporations, and can therefore confidently adapt to any professional situation.

In my spare time, I make electronic music and run an independent record label. I record under the name Cyan341 or Zainetica and my music can be found in places such as spotify. In January 2018, two tracks of mine were released on vinyl on two new labels Cement Recordings and Ambidextrous Recordings