29th April 2014

Pushing my boundaries with AndreaToddDesign

Yesterday I launched my most recent project, A brand new website for one of my good friends, mentor and graphic designer, Andrea Todd. I met Andrea in the early part of last year on an ‘Introduction to Web design’ night course at AUB. Since then she has kept in touch and we are currently collaborating on a larger project, working with JigsawPSHE (details coming soon).

Earlier this year Andrea approached me to design her website, something she hadn’t gotten around to doing and had since forgotten how. I was more than happy to oblige and started scribbling. She said she wanted a clean, simple design that had to reflect her design style and show off her portfolio. We went through her portfolio and it was clear a list of her work wasn’t going to cut it. Andreas’ portfolio is quite diverse, with pieces of work ranging in size from small logos to large posters. After abit of research I decided to pitch the idea of using Isotope js to create a masonry style layout that put work together in a brickwork inspired way similar to that of Pinterest. Not only did it solve potential layout issues in a great modern way, it also allows us to categorise Andrea’s work and let the user filter them accordingly.

Andrea Todd Design LogoIn previous projects I have completed, I have steered away from javascript as I didn’t feel i knew it well enough to be able in implement it properly. But recently I have been working hard to better my knowledge of both javascript and jQuery. This project allowed me to experiment with my new found knowledge and find new ways to get around problems.

Throughout the project I emailed Andrea images of my progress and she sent back her edits. Trying to design in a way that reflects her style made this project a tricky at times, as I am used to designing in a way that reflects my style rather than someone else’s.

It was a challenging project, not only due to my knowledge constraints, but also due to the shear complexity of the task. To complete this project I  used a variety of languages and technologies to create a unique experience for both the end user and Andrea. The site is built on the WordPress CMS which makes the content easily updatable which was an important aspect to the project. This did cause a few problems as traditionally WordPress lets you upload a list of images in the WUSIWUG editor or create a gallery using the gallery feature. I wanted to have  gallery of images in each post but not use the WordPress gallery and wanted to make it cleaner on the backend to add and remove photos.

I use the Advanced Custom Fields plugin on alot of my WordPress projects as it allows you to create custom fields on the backend and link to them on the front end. Its very handy, but it couldn’t solve my problem this time

I opted to use Least js which creates a horizontal list of thumbnails and displays a larger image when the thumbnail is clicked, all fully responsive. It requires 2 file urls (one thumbnail and one larger photo) but I couldn’t find a way of entering these through WordPress. Eventually I stumbled upon the Multi Image Uploader (MIU) plugin developed by Tahir Yasin, a small plugin that allows you to add a number of images, using default WordPress functionality, into to posts and stores them in an array which can be accessed on the frontend. I did a few edits to the MIU plugin and plumbed in Least js and it works beautifully.

Implementing Isotope js took quite abit of work, but thankfully there are loads of documentation on the Isotope website to help out. On the AndreaToddDesign website, the work page uses post thumbnails (or featured images) that are 300px wide and an automatic length (that doesn’t distort the image). This creates images with differing heights that fit together thanks to Isotope. The filters were added later, making use of WordPress categories and some clever php to create the Isotope filters. Its all finished off with my custom jQuery that adds margin to the containers, making them always central. Its taken a few iterations to get right but it really adds to the design.

The front page makes use of Bx-slider, a responsive slider javascript tool. It displays the 5 most recent posts and resizes to show the whole image. Users can click on images to be taken through to the projects to get more information.

This was also my first project using SASS (Semantically Awesome StyleSheets) using the terminal as a preprocessor. It does what it says on the box and does makes css awesome. Although I’m just starting out with it and haven’t made full use of mixins yet, I love the nested features and am getting used to nested media queries. I would highly recommend it.

 

Overall I’m very happy with how the website has turned out and I’m glad Andrea likes it too. I’m still ironing out some of the bugs and will add a few new features of the coming days and weeks.

Heres the release notes:

Version 1.0.0 Released 28/4/14 20:30

Features:

Version 1.0.1 Released 28/4/14 22:00

Version 1.0.2 Released 29/4/14 12:00

Version 1.0.3 Released 29/4/14 15:00

Version 1.0.4 Released 30/4/14 16:30

Version 1.0.5 Released 30/4/14 18:30

Version 1.0.6 Released 7/5/14 15:00