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.
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.
-
Lloyds TSB Offshore
Design by E-scape Interactive
Built in December 2009
More information
Lloyds TSB Offshore
www.lloydstsb-offshore.com
Design by E-scape Interactive
Built in December 2009
E-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, accessibile 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.
-
E-scape Interactive
Design by E-scape Interactive
Built in October 2008
More information
E-scape Interactive
www.e-scape.co.uk
Design by E-scape Interactive
Built in October 2008
We 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.
-
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.
-
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.
-
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.
-
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.
Personal Work
- This Very Portfolio!
- www.mjmagee.com
-
Design by Melissa Magee (that's me!)
Built in July 20010
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
More information
Voodoo Beans
www.voodoobeans.org
Design by L. Whyte
Built in February 2009
Voodoo 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
More information
Play the Lottery Now
www.playthelotterynow.com
Design by Melissa Magee
Built in January 2009
Play 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
More information
Mange Tout
www.mangetout.je
Design by Melissa Magee
Built in October 2008
Mange 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 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 (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, 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.
- jQuery
- jQuery is my personal favourite JavaScript framework, although I also have experience with using Prototype and Moo Tools. I've found jQuery is very intuitive to code in and remarkably lightweight to use online. I have utilized it on several projects, including the Lloyds TSB International web site, and (to a considerably greater degree!) Vogue Brands.
I also have working experience with ASP.NET, primarily coding in C#, and XML.
As well as speaking these technical languages fluidly, I have quite a good handle on the French language. Je dois avouer je ne peu pas parle francais parfaitement, mai je suis étudié ca pour quatre ans á l'école et je suis encore á apprendre dans mon temps libre avec l'apprentissage des bandes. (J'adore Michel Thomas en particulier!)
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!
