Welcome

to the personal portfolio of web designer and developer Melissa Jane Magee

I specialise in building valid and accessible web sites to the W3C standards and I take great pride in creating beautiful sites which work across all major browsers, structured to degrade elegantly without technologies such as CSS and JavaScript. I hand-code all my work to ensure my sites have a strong, clean mark-up to gain optimal search engine and cross-browser performance.

Based in Jersey in the Channel Islands, I am production manager for the web design company E-scape Interactive; I originally entered the company as a junior designer and developer, and I have rapidly moved to a senior position where it is my duty to create valid and accessible HTML, CSS, and JavaScript coding, test web site usability, and move web sites into suitable Content Management Systems. I also do design work, including client visuals and online advertisements.

Through E-scape Interactive, I have been fortunate enough to work for such prestigious clients as Lloyds TSB and The National Lottery, along with many prominent Jersey companies including the Citizen Advice Bureau, Pentagon Direct, Roulette Clothing, and Reed Insurance.

I have gathered some of my favourite design and development pieces, both professional and personal, on my portfolio for your perusal. If you have any questions or if you would like any more information about me or my work, please feel free to contact me.

About Me(lissa)

My name is Melissa and I create web sites.

But web design isn't just my job, it's my favourite hobby too!

I'm the kind of person who likes to take things apart to find out what makes them work, and that's just what I did when I discovered the internet. I taught myself how to code and I haven't stopped since!

At twenty-three years old, I feel privileged to have reached the position of production manager for E-scape Interactive, and I hope to continue to learn and grow with every project I work on.

You can find out more about me under the skillsets section.

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

Reed Insurance: www.reed-insurance.com; Design by Jon Leverrier
Built in March 2008

Reed 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.; More information

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.

Pentagon Direct
Design by Jon Leverrier
Built in August 2007

More information
Pentagon Direct

www.pentagondirect.com
Design by Jon Leverrier
Built in August 2007

I 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

More information
Spike Productions

www.spikeproductions.co.uk
Design by Jon Leverrier
Built in March 2007

Spike 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

More information
SpikeCast

www.spikecast.co.uk
Design by Jon Leverrier
Built in October 2007

I 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

More information
Blooming Direct Blog

blog.bloomingdirect.com
Based on the Blooming Direct main site design by Jon Leverrier
Built in March 2007

Based 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.
ICSA Jersey
Design by Guy Carnegie
Built in January 2008

More information
ICSA Jersey
www.icsajersey.org.je
Design by Guy Carnegie
Built in January 2008

The 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.
Flat Fee
Design by Lime Green Creative
Built in April 2008

More information
Flat Fee

www.flatfee.je
Design by Lime Green Creative
Built in April 2008

I 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.

Personal Work

This Very Portfolio!: www.mjmagee.com; Design by Melissa Magee (that's me!)
Built in July 2008

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.

Image Work

Photo Manipulation: See full-sized image; Made in September 2008

This was an experiment to see how much I could manipulate and 'airbrush' a photograph while still keeping it realistic and keeping the absolutely spiffing gorgeous model recognisable.; More information

The photograph is one I took of myself without an ounce of make-up on (as proven by the large bags under my eyes). I removed stray hairs, added more definition and volume to the hair, lightened the entire image, covered the hair roots, lightened the eyes, smoothed out the skin, softened freckles, and added colour to imply make-up.

Back to the Top

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 work extensively with mySQL databases, and I also have a very advanced working knowledge of Adobe Photoshop, which I use for creating original web site and banner designs and for 'cutting up' designs (separating the images from a file 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, my university qualifications are for English Literature! (Although they still come 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:

ModX: ModX is a content-management system I originally found and specified for the ICSA Jersey web site, and I have had so much positive feedback from clients about how simple it is to learn and use that we at E-scape Interactive now offer it as our first-choice content-management system for clients.
As it is an open-source solution based in PHP, I find there is no limit to what functionality I can code, and I always enjoy the chance to code new scripts and add in the best usability I can.
Textpattern: Textpattern is more of a blog system than a content-management system, but I have found it a terrific tool for building small, information-based web sites for clients. I have built everything from straight-forward blogs, like the Blooming Direct blog to full-blown web sites, like Spike Productions using this very simple model.
phpBB: phpBB is a wonderful forum framework which I used to build the Pixar Planet forum. Although it is more limited in what can be changed than most content-management systems, with my knowledge of PHP and MySQL, I built a lot of custom code to get the exact functionality I wanted for the site.

I also have working experience with JavaScript frameworks, including MooTools and Scriptaculous, ASP.NET, and XML.

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 caffiene!

Navigation

About Me(lissa)
Portfolio
Skillsets
Projects
Contact Me

Back to the Top

Projects

I am currently working on Bob's Motorcycle Centre through E-scape Interactive. It is a motorcycle web site which I am taking all the way from the design stage right through to production and development. It is progressing very well and I can't wait to add it to my portfolio for everyone to see!

I am also working on several projects outside of work with my partner in crime L Whyte. L is an (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.

Navigation

About Me(lissa)
Portfolio
Skillsets
Projects
Contact Me

Back to the Top

Contact Me

If you would like to get in touch with me, please feel free to e-mail me on:
info@mjmagee.com.

If you would like to find out more about me, feel free to give me a poke (ooh-er) on Facebook, or check out more of my work on DeviantArt.

Navigation

About Me(lissa)
Portfolio
Skillsets
Projects
Contact Me

Back to the Top