Portfolio
This portfolio isn't a full list of all the web design and development work I have done over the years, but rather my more recent (and favourite!) pieces, which I've gathered for your perusal. Click on the thumbnails to see previews of the web sites, or click on the 'more information' links to read about the projects and my involvement in them.
Details on work I'm currently doing, which isn't yet finished, can be found on the projects section.
If you have any questions about my work, or if you would just like to get in touch, please feel free to contact me.
With E-scape Interactive- Aviation Beauport
- www.aviationbeauport.com
-
Design by Melissa Magee
Built in December 2009
Aviation Beauport was a pleasure to design. I had tremendous fun creating the visuals and building the CSS for it.
-
Bruno's Bakery
Design by Melissa Magee
Built in October 2009
Bruno's Bakery
www.brunosbakery.je
Design by Melissa Magee
Built in October 2009I designed the Bruno's Bakery site and built CSS and HTML templates which head developer Jason Stratford then moved into SilverStripe.
-
Le Gallais Group
Design by E-scape Interactive
Built in March 2010
Le Gallais Group
www.legallais.co.uk
Design by E-scape Interactive
Built in March 2010Based on visuals designed by Jon Leverrier, I designed and built the HTML and CSS for the Le Gallais group page.
-
Lloyds TSB Offshore
Design by E-scape Interactive
Built in December 2009
Lloyds TSB Offshore
www.lloydstsb-offshore.com
Design by E-scape Interactive
Built in December 2009E-scape Interactive have been doing design, development, and analytical work for Lloyds TSB Offshore since 2004. In 2009, we were asked to completely redesign the web site with a more attractive, modern look, and an accessible, intuitive structure.
As head of front-end development, it was my responsibility to build and browser-test valid, accessible HTML and CSS templates and then move them into ASP.NET C# templates for the content management system. I also used the jQuery framework to add a better (and an elegantly degrading) user interface to the web site, adding smooth scrolling and form field highlighting effects.
We have since gone on to do much more on the Lloyds TSB web site, branching into more interactive projects such as mortgage and budget calculators and online forms.
-
Reed Insurance
Design by Jon Leverrier
Built in March 2008
Reed Insurance
www.reed-insurance.com
Design by Jon Leverrier
Built in March 2008Reed Insurance was a very enjoyable project; I was given Jon Leverrier's quirky and colourful designs to make into valid and accessible CSS-based HTML templates, and then on through the entire development process, moving the templates into ModX, which is a wonderful PHP-driven content-management system for small and medium sized companies, and building custom PHP forms and features.
The most important features of the Reed Insurance site are the insurance quote enquiry forms which I custom built in PHP. I also built a lot of custom code for the back-end of the site, to make it easy for the client to change around large sections of the web site with just the press of a button. For example, the site went live with a competition on the homepage; the content area was split into two blocks with a dividing line between the competition area and the homepage text. I built code to allow the client to tick a checkbox if he wants this on the homepage, and if the box is unticked, the homepage content will fill the full area, the dividing line won't show, and a different image for the welcome text (which fills the full area) will show instead of the smaller version.
I am also very proud of the 'click-to-call' feature, which links up to LivePerson's contact service, and the 'call me now' step on the enquiry forms, which passes the information securely to LivePerson.
-
E-scape Interactive
Design by E-scape Interactive
Built in October 2008
E-scape Interactive
www.e-scape.co.uk
Design by E-scape Interactive
Built in October 2008We decided to spruce up the E-scape Interactive web site in 2008, giving it a fresh design and moving it into new CSS-based HTML templates.
I built and browser-tested the HTML and CSS templates, and used the jQuery framework to create accordian menus and some interesting fade-in effects for the navigational tabs.
-
Bob's Motorcycle Centre
Design by Melissa Magee
Built in August 2008
Bob's Motorcycle Centre
www.bobsmotorcycles.co.uk
Design by Melissa Magee
Built in August 2008Bob's Motorcycles was a particularly fun project for me to work on as I took the site from the design stage all the way through production and development. I created simple, clean designs to showcase the bikes and bike accessories on offer, built HTML and CSS templates, then built the functionality of the site in ModX, a PHP-based content management system.
-
Flat Fee
Design by Lime Green Creative
Built in April 2008
Flat Fee
www.flatfee.je
Design by Lime Green Creative
Built in April 2008I originally passed Flat Fee to my junior developer Tom Carolan but he unfortunately had to leave the company part way through the production of the site; I finished building the HTML templates, CSS, and JavaScript, and did browser testing for the site before passing the development work onto Evolution, who we were doing some collaborative work with at the time.
As it came into producion at the same time as the Reed Insurance and Mind Resource Management sites, I wound up working on them during the working day and building Flat Fee from home in my free time to get everything done within the tight schedules! I'm proud of the quality of the work I managed to do within such a small timeframe.
The Flat Fee designs were built by Lime Green Creative and passed on to us to turn into valid and accessible templates. The designer had specified the arrow on the tabs should move down to point towards the content as the tabs' selected state, but I didn't feel this was an obvious enough change for the hover state of the tabs. To add more interactivity to the site, I made new tab images in Adobe Photoshop for the hover effect, with each tab's related site section colour as the background. I also built the CSS of Flat Fee to be able to accomodate colour changes across different sections of the site, putting an ID on the different section bodies, to allow me to completely control each section without overwriting the styles of another. This also gave me control over layout changes on pages where the sidebar needs to be dropped in favour of a larger content area.
-
ICSA Jersey
Design by Guy Carnegie
Built in January 2008
ICSA Jersey
www.icsajersey.org.je
Design by Guy Carnegie
Built in January 2008The web site for the Jersey branch of ICSA — the Institute of Chartered Secretaries and Administrators — was designed by freelancer Guy Carnegie and passed to me for production and development work.
I spent a lot of time researching different content-management systems to find one which would best suit the unique requirements of the ICSA web site. It was mainly article based, which lent itself to a blog framework, but the user login and registration was one of the most important features: users — once they had been approved access — needed to be able to submit news stories, achievements, and articles, but these would need to be proof-read and approved by ICSA before going live on the site. They would also have their own user profile where they would be able to update their details without having to go through an ICSA official.
I finally decided on ModX, which is a wonderful PHP-based content-management framework more than it is a system, which gives you a lot of freedom if you know a thing or two about PHP! I was able to write a lot of custom code, as well as taking full advantage of the user-populated script repository, to fufill every requirement.
-
Pentagon Direct
Design by Jon Leverrier
Built in August 2007
Pentagon Direct
www.pentagondirect.com
Design by Jon Leverrier
Built in August 2007I did all the production work on Pentagon Direct — turning Jon Leverrier's wonderful designs into functioning HTML templates with CSS and JavaScript, ensuring the coding was valid and accessible, and performing extensive browser testing — before passing them onto Evolution for development. As we were doing some collaborative work with Evolution at the time, I pitched in to help with the development as much as I could, building PHP code such as the character limits on the titles in the 'special offers' areas and in the breadcrumb trail.
I also designed and built the HTML templates for the back-end system, which I decided to build with percentage-based widths — this means the pages scale to the full size of the monitor they are being viewed on, which makes them more usable and accessible for users of all screen resolutions.
-
Spike Productions
Design by Jon Leverrier
Built in March 2007
Spike Productions
www.spikeproductions.co.uk
Design by Jon Leverrier
Built in March 2007Spike Productions was a very interesting challenge! I was given Jon Leverrier's (frankly incredible) design to take all the way through both the production and development stages, moving it from a visual to a fully-functional web site.
Production on a web site typically includes cutting up visual designs and optimising the images for use online, building valid, accessible, and search engine friendly code which degrades elegantly, and ensuring the code works across all major browsers and screen resolutions. Jon's unusual design on this project meant that Step 1 on this took a lot of trial and error! I'm very happy with the end result, though. (Thankfully, so are the designer and the client!)
-
SpikeCast
Design by Jon Leverrier
Built in October 2007
SpikeCast
www.spikecast.co.uk
Design by Jon Leverrier
Built in October 2007I originally designed and built a series of simple HTML pages for Spike Production's clients, called SpikeCasts, which could be customised in terms of style and content. When Spike decided they wanted to take SpikeCast to another level, we were excited for the opportunity to create something truly unique.
SpikeCast is split into two sections, the main YouTube-inspired user-driven web site, and a corporate site for Spike's own paying customers.
I was in charge of production for the project, building the HTML, CSS, and JavaScript, and performing browser and usability testing across the site.
-
Blooming Direct Blog
Design by Jon Leverrier
Built in March 2007
Blooming Direct Blog
blog.bloomingdirect.com
Based on the Blooming Direct main site design by Jon Leverrier
Built in March 2007Based on the site design Jon Leverrier made for the main Blooming Direct web site, I built the Blooming Direct blog in Textpattern, a blog-centric PHP-based content-management system.
I was very proud to have been able to code just a single template which is used across all the pages on the blog. Different code is output on different areas on the site, for example, the comment form only appears if you click through to an article, but I was able to do this without utilising different templates for different sections, which seemed unneccessary given that the majority of the layout doesn't change.
- This Very Portfolio!
- www.mjmagee.com
-
Design by Melissa Magee (that's me!)
Built in July 2009
I wanted to build a design for my portfolio which broke away from the standard and reflected my own personality. I'm a creative person and I needed my site to show that! As an avid reader, I have always had a strong interest in fairy tales and imaginative stories, and I felt suggesting a Wonderland through carefully chosen and manipulated images (like the cat with the too-large head) would be a fun and interesting challenge. (It was either this or 221B Baker Street!) - More information
-
The images are stock photos purchased from iStock Photo; I took my time going through different images to imply the different fairy tale themes and objects, and working them together in an attractive layout before buying them, cutting them out, and changing the colours and perspectives on them to create a new world for my visitors.
If you scroll down through the site, you will notice the background colour fades from blue all the way down to orange, like a sunset. I was actually inspired to recreate this from the beautiful Jersey sunsets (although nothing beats the original on that front!). As the background colour will vary depending on which section of the one-page site you are looking at, I made the image headings, dark boxes, and vines all PNG files with partial opactity on them, to allow a little of the background colour to show through which makes them seem more integrated into the layout.
I was also very meticulous in selecting the fonts I use on this site: Sybil Green has a wonderful, quirky effect to it which fits into the Wonderland theme, well, wonderfully! I felt it might become hard to read in larger blocks, however, so I limited it to single and few word headings, using the still quirky but much clearer Blown Deadline for longer areas which warranted an unusual font, such as the introduction and sub headlines.
-
Voodoo Beans
Design by L. Whyte
Built in February 2009
Voodoo Beans
www.voodoobeans.org
Design by L. Whyte
Built in February 2009Voodoo Beans is the (frankly, incredible) portfolio of my best friend L Whyte. She designed the layout herself, injecting her unique sense of humour into every pixel.
I built the site on the jQuery framework, utilizing fade-in effects over the link hovers and smooth scrolling anchor links to move up and down the long single page. I also used custom jQuery coding to pull through external code from the individual gallery pages and embed it in the main page, to create the portfolio pop up windows.
We wanted to get the site up as soon as possible for L to show off her fantastic character design and concept art work, so I have put the site up as static HTML pages while I finish work on a CMS.
-
Play the Lottery Now
Design by Melissa Magee
Built in January 2009
Play the Lottery Now
www.playthelotterynow.com
Design by Melissa Magee
Built in January 2009Play the Lottery Now is a one-page site I designed and built to promote the E-Lottery Syndicate.
I wanted to keep the design quite simple so it wouldn't distract from all the E-Lottery information the site has to get across, but I decided to add some subtle animation effects to the header and the link arrows, to keep the design interesting.
-
Mange Tout
Design by Melissa Magee
Built in October 2008
Mange Tout
www.mangetout.je
Design by Melissa Magee
Built in October 2008Mange Tout was a terrific freelance project which I took from the design stage all the way through production and development. Mange Tout shops are (wonderful!) coffee and sandwich shops based in Jersey in the Channel Islands. The most important feature of the web site was to inform people what soups of the day would be on offer; we decided to offer a weekly newsletter, an RSS feed, and show the soups of the day within the web site's header, to ensure customers wouldn't miss it!
I decided to build Mange Tout in ModX, using a lot of custom PHP for the weekly 'Soup Letter' and the easy-to-amend menus. I also utilized JavaScript (using the jQuery library to keep file size down) to add a more interactive dynamic to the site.
Skillsets
As the senior front-end developer and production manager for E-scape Interactive, my main areas of expertise are in building clean, valid, and accessible HTML and PHP, beautiful CSS, and elegant, functional JavaScript. I also have working experience with ASP.NET, coding in C#. I also work extensively with Adobe Photoshop, which I use for creating original web site and banner designs and for 'cutting up' designs (that is, separating the images from a file and optimising them to turn a design into a fully functional web site).
Working within the web design industry, I have had invaluable help and experience from my co-workers (especially the very talented designer Jon Leverrier and the SEO-genius Sarah Griffiths), but I am entirely self-taught in web design and development — in fact, I went to university to study English Literature! (Although that still comes in handy when it comes to copy-writing and proof-reading!)
As a self-taught designer and developer, I am always pushing myself to learn new things, and I am always watching out for new browsers, languages, frameworks, and content-management systems so I can keep improving my knowledge and my skills.
I have advanced working experience with:
I design all my projects in Adobe Photoshop, and build them in Adobe Dreamweaver (the code viewer; I used to be a NotePad junkie and I strongly believe in carefully crafted hand-built coding). I build all my sites to the highest standard with care, passion — and a lot of caffeine!
Projects
I am working on several projects outside of work with my partner in crime L Whyte. L is a (wonderfully and incredibly talented) character designer, concept artist, and animator currently working for Tag Games in Dundee. We have been best friends since childhood, and our relationship has stayed strong over the years because we're always working on some crazy idea or other together. At the moment, along with some writing projects which you can find details about on our web site, we are in the process of creating an online game together. It is an extensive 'choose-your-own-adventure' type web game which we have written together. With her incredible artistic skills, L is creating the artwork for it while I am coding the game in PHP and mySQL.
Contact Me
Please feel free to sayhi@mjmagee.com.
If you would like to find out more about me, feel free to check out my Linked In profile, give me a poke (ooh-er) on Facebook, or check out more of my work on DeviantArt.