Ash Thorp

Portfolio of Ash Thorp: graphic designer, illustrator, artist and creative director of feature films.

ashthorp.com

Landing
Teaser of work
Carousel within a project
Example of work

I've long been an admirer of Ash's work; his illustrations are amazing and most of my favourite Sci-fi films feature his UI concepts and title designs.

We initially discussed what Ash wanted from his site: updates to the existing system which were going to be hackey and less than ideal at best. With a weekend at our disposal before his big Ghost in the Shell homage launch (official site here), I set about building a new site for him (both CMS and front-end) while he updated all his portfolio pieces to fit the new design. Needless to say we both had very little sleep that weekend, but I was very pleased with the result in the end considering the time constraints.

The site received so many hits that week it crashed. To improve efficiency, I replaced the CMS three times in total over the course of the next week (due to various functionality and performance reasons). Eventually I stuck with Kirby, which allowed a few more customizations and also came with a very nice GUI admin module.

Working is a pleasure when it's for something or someone you admire, but doing a job for someone who also has a very high work ethic is a bonus.

Mallorca Property Concierge

An independent buying agency specialising in acquiring properties for private clients on the island of Mallorca.

mallorcapropertyconcierge.com

Landing page
Map page 01
Map page 02
Page content
Devices
Testimonials

Mallorca Property Concierge was a rebuild-from-scratch job which I had the pleasure of working on with two others – Kris (designer) and Pierre (back-end developer) – to produce a massive site, both in terms of visuals and functionality, for an independent agency who purchase properties in Mallorca for private clients.

Kris has a strong background in Motion Graphics, which showed through in his concepts for the site. Building the site and making it accessible for touch devices was also loads of fun. The trickiest bit was the Map/Island page, which really tested me in building the detailed SVG 'dot' map. This feature had to link up with the CMS locations, content imagery for the Island areas which were shown in separate (but co-functioning) carousel and Google Map of the chosen area. The back-end was written by Pierre, using Drupal – a highly customised CMS to serve the front-end's pages and an API to mainly serve the Map/Island page's components.

Having all the images throughout managed via the CMS meant that image optimisations weren't possible long-term, something which I would have normally stressed the importance of, for performance reasons. However, the high standards from both Pierre and Kris meant quite a bit of front-end refactoring, which made this site one I'm very proud of.

Get Brewer

Web design and development with a little brotherly love.

getbrewer.com · github

Website header
Responsive website
What We Do section

The design and development partnership of my brother, Jake, and I. Having complementary web skills, we work on a lot of projects together so this site is a single entry point for clients and agencies to get in touch and get an overview of our abilities.

This site is a responsive, single-page site with terse, to-the-point copy. I also wanted this site to protray my skills and what I consider important with regards to development. I've used touch feature detection (from the Modernizr source) to enhance the navbar, which I'm using both affix and scrollspy modules from Twitter Bootstrap to enhance.

I used my own yeoman generator – generator-launchpad – to handle the workflow, the details of which can be found in the source on GitHub as well as the humans.txt.

All images were compressed using Grunt.js and Kraken Image Optimizer and both CSS & Javascript were minified and compressed.

Simply put, we make websites… with a little extra. #getbrewer.

Google Search Indonesia

Google's mobile Search App: Indonesia.

google.co.id/insidesearch/landing/searchonindonesia

Mobile views
Landing page
Secondary page

Google Search Indonesia was a Google-branded promotional page for encouraging mobile users in Indonesia to try out Google's Search App

I worked on this project on behalf of Toaster towards the end of 2013. The aim was to take Google's style conventions and to incorporate an interesting way to browse videos and highlight the main features of the App.

Both myself and the designer worked to a very agile development process, taking a lot of inspiration from the Google UK Nexus 7 site, but deciding on a 'paging' effect rather than parallax.

The site is responsive an incorporates swipe gestures for touch devices. The initial module I wrote to handle the paging was later enhanced by another developer, Howard, to enable continuous, 'finger-down' dragging backwards and forwards. Both the tech lead at Toaster and I spent quite a bit of time making the swiping and dragging as performant as possible for lower-powered devices.

All animations and effects, aside from dragging and swiping, use CSS transitions governed by Javascript hooks to toggle the relevant class-name states. Google's Goro engine was used for deploying.

2013

Brewer's Advertising Data

Website for Brewer's Apps in South Africa.

brewers.co.za · github

Landing page
How it works
Products
People
News
Contact
Mobile views

Originally launched mid-year 2010, Brewer's Advertising Data is a central exchange of advertising and marketing data within South Africa.

This is the new website for the webapp which my brother Jake and I worked on together and are currently in the process of overhauling in terms of design, functionality, mobile usability and performance.

The new direction of the Brewer's app shows a simplification of what the aims and features of the softwear are hoping to achieve, including a free initial trial on sign-up and having a more social presence with regards to changes and happenings within the industry.

The source code can be found on GitHub.

Gather.ly

Create, or find, interest-based communities. Part of The Interest Network.

gather.ly

The My Feed page
The Dicover page, showing groups still recruiting members
Preview of remote content to be shared, using embeddly's API
A popup modal displaying the number of likes for a post
The members page
The @mentioning widget, showing autocompeted suggestions of members within a group.

Gather.ly – or Iam150/ previously – was the first client I had the privilage of working with soon after deciding to go freelance. Andy, Nick, Sophie and Gavin were some of the nicest people I've had the good fortune of working with.

I was hired to oversee the responsibility of the front-end side of things, which involved addressing performance, responsiveness and overall design improvements, across both dektop and mobile/touch devices – all in aid of their big out-of-beta launch.

Most of the features I worked on and helped implement – such as user @mentioning, embedded content previews, Mandrill & MailChimp integration, likes and new post notifications – we're already structurally built server-side, but needed new Javascript modules to be written to help pull though their content and handle their respective actions.

I also decided a modern front-end workflow would be essential to manage compiling, building and deploying between different environments; local, development and production. For this Grunt.js was my choice, along with Sass to modularise the CSS development. The application runs off Node.js, MongoDB (Mongoose), express.js and uses additional technologies such as Mandrill & MailChimp APIs, Handlebars, Embed.ly, as well as Facebook and Twitter oAuth Node libraries.

In my eyes, it's a unique take on the concept of sharing within interest-driven groups – definitely worth checking out, even on your mobile ;)

Love Cravendale

Loyalty scheme web app.

lovecravendale.co.uk

The Magic - 01
The Magic - 02
The Magic - 03

I had a great time working alongside several developers for this project while enjoying my time working for Saatchi & Saatchi in London.

The site is a loyalty scheme encouraging users to collect codes printed on bottle labels purchased in-store and exchanged for various prizes and promotions on the site. The value of the prizes increases the number of codes required to redeem it.

I had the privilege of building the code redemption part of the site, working closely with the back-end developer and the UX designer to create an easy to use and interesting process for users to collect codes and redeem them for prizes.

My favourite part was playing around with loads of little subtle animations and transitions, all through the use of CSS and controlling those animation states with Javascript when required.

Studio Brewer

The Creative Practice of Jake Brewer; Designer, Art Director and Illustrator.

studiobrewer.com · github

Landing
List of all projects
Grid view
Detaied project view
Devices

Studio Brewer is the creative practive of my older brother, Jake Brewer.

We're fortunate enough to have complimentary skills; we're often working on projects together or trading services with one another.

Following my brother's designs, I wanted to focus on something that would show speed, responsiveness and soft transitions between views. Jake's a designer — meaning we're talking designer quality images here — so I decided to reduce the amount of inital asset requests (to improve overall speed) and conditionally load them for selected projects. This method meant that the core application needed quite a bit of asynchronous thinking.

Because of the planning involved between the two of us — regarding performance and the number of requests — the site was a natural fit to make responsive and device agnostic; great attention to detail was paid to mobile usability. The perceived speed is amazing, in terms of both load times and interface feedback, on any device.

Toyota Positive

Inspiring uplifting gestures and selfless acts by means of a car.

toyotapositive.com

Video player and carousel playlist
Overlay
Grid view and pagination
Landing page
Carousel into

Toyota Positive was a site built to promote the positive influence their new car was bringing to the environment.

It was a site to showcase the individual stories from people who used the car to perform positive deeds — and was fun to make. It was built to stand as both a web app and as an embedded YouTube gadget. The video player/carousel widget was the core feature of the site and the trickiest to implement. The video playlist in the main widget can be controlled through the images in the gallery, with each story able to be individually shared on both Twitter and Facebook as it cycles through.

It was the first time I'd gotten my hands dirty with an iterative design/build process, not to mention integrating language support for multiple countries as well.

2012

Cravendale Epic Straws

Loyalty app/scheme.

epicstraws.co.uk

Landing page
Overlay
Carousel of product sets
faq
Product page
Redemption

This site was vastly different to anything I had made before while working at Outside Line. The size of the assets, the traffic generated and the experience we tried to deliver was a massive challange. I was excited from day one!

The site was very image heavy and the designer's intention was to deliver a skeuomorphic experience following the brand's guidelines for the promotional straw sets that Cravendale were offering in exchange for collecting codes, which were printed and sold on bottles across the UK.

Both the designer and I came up with an idea to simulate a 3-dimentional display of the straw sets using a series of images of each set, themselves modelled and rendered in 3D. The result was a combination of simple, 2D image replacement which gave an impressive, realistic 3D effect.

Everything had to be built to give a complete experience, meaning even the YouTube player UI had to be built from scratch. In our workflow we ran our images through PunyPNG image compression and used CodeKit to minify and compress all our Javascript and CSS, all of which was served through an Amazon S3 CDN.

It was the biggest site, with regards to traffic, that I had the pleasure in working on, not to mention celebratory drinks afterwards.

Virgin Galactic

Mobile website.

virgingalactic.com/mobile

Tablet 01
Tablet 01
Mobile 01
Mobile 02
Mobile 03

Virgin Galactic is running a campaign in order to sell relatively affordable tickets for a seat for a ride into space. Having a very comprehensive site already, I was tasked with building a site to reach their mobile customers.

A standalone mobile site was agreed upon, as well as a modest amount of parallax elements to accompany the flight information and registration form.

In order to achieve the parallax effect and still maniplulate elements on the page, the native touch-scroll was removed and replaced with a third party library to simulate it. Having said that, navigating form elements while native functionality has been replaced is a nightmare, not to mention encountering several edge case issues.

While I wouldn't personally agree with a standalone site, or parallax features for touch devices, the build was fun and I learnt a hell of a lot concerning mobile interaction and caveats.

Jennifer Hulley Photography

Portfolio of a photographer.

jenniferhulley.com

Welcome
Gallery
hover
Overlay
About

This site was built for wedding and events photographer, Jennifer Hulley to showcase her portfolio.

I worked alongside my brother to create a very smooth and transitioned expereince for browsing through the categories of photographs.

The site has since been redesigned and converted to a new SquareSpace them, but it was built pixel perfect to these designs, conforming to my brother's high standard of design.

2011

Brewer's Droop

Irreverent weblog.

brewersdroop.co.za

Landing
Archives
Comments 01
Comments 02
Devices
Contact

The Brewers Droop is a blog of tales and quips of Chris Brewer whose origins started as a monthly letter sent out to subscribers by mail.

I built the site for my Dad to stop him pestering me for a blog. It was purely coincidental that at the time I wanted to learn how to use WordPress properly and also experiment with building a responsive site. I also seemed to be going through a MooTools phase at the time.

My older brother designed the site and we launched it over many pints of Guinness and several bottles of wine.

About/Contact

Who I Am

Adam Brewer

I'm a fervent Front-end Web Developer and Webmaker whose passion lies in all things Javascript, HTML and CSS. I have a comprehensive front-end skill set with back-end experience as well. I'm always eager to learn anything new and I love a good challenge.

I build semantic, mobile-responsive websites and apps optimised for both speed and performance, utilising good front-end practices and complying with modern web standards and features.

Aside from the Internet, my other interests include running, reading, wine and Paleo food. I used to be an Aircraft Technician in the British Army so I have quite a few stories to tell! I'm very outgoing and love big trips and adventures; I recently finished a 6,000 mile road trip around the Western USA, sailed across the Atlantic, run a 100 mile race, been skydiving over Las Vegas and done the highest bungee in the world (when it was, at least!). I can also appreciate a really good meme or GIF.

Contact Me

If you're interested in working together please don't hesitate to email me: adam@brewerlogic.com. I'll get back to you as soon as possible.

There's also LinkedIn, if you're in to that. However, If you'd just like to say hi – or for anything under 140 characters, such as memes or gifs – you can reach me on Twitter.