Tangled Frog Portfolio - Static Websites
These are all websites made over the last two years which use XHTML and CSS to achieve a search engine friendly, cross browser compatible design and layout. These websites are all static, meaning they are not updateable and cannot be changed except by accessing the website files.
NTE Private Hire
Launched 18/10/10
Design and Layout
Custom illustration
Photography
Image Manipulation
Business Card Design
XHTML
CSS
PHP
Javascript
Mootools
DHTML
This is a very small site created for a private hire driver in Edinburgh. We took the photograph of his car and made the necessary alterations to integrate it into his design, as well as removing the registration and private hire numbers. We used Inkscape to create the Edinburgh skyline and the buttons.
We wrote the copy for this site and optimised it for search engines, and used a combination of PHP and javascript to create a user-friendly booking form which posts directly to his email address.
Later we added a custom built scrolling links script for the resources page of this website, using a combination of Mootools and DHTML.
Chrysallis Counsellingand Psychotherapy
Launched 10/4/10
Logo Design
Design and Layout
Custom illustration
XHTML
CSS
Javascript
PHP
Facebook Share
Google Maps
For this eight page website the client supplied all the content and asked for a design with a colourful butterfly theme. In addition to designing her logo and making her an XHTML / CSS template and based on this idea, we've also included a 'send to a friend' pop-up page, Google maps and a Facebook share button.
We were later asked to create some graphic elements to depict situations and concepts related to counselling and phsycotherapy, and transactional analysis in particular. These come together as a collection of images for the Chrysallis Counselling and Psychotherapy website.
Motivate! People Skills
Launched 30/12/2011
Design and Layout
XHTML
CSS
Javascript
Mootools Animation
Liquid Layout
For this project our aim was to create an eye-catching and unusual design, using a large background image supplied by the client.
Because all the content is held within a single page we've used Mootools animation to create an intuitive navigation, allowing easy access to information while keeping the design fairly simple. A combination of CSS and javascript has been used to create a liquid layout, and this site also includes PHP contact form in a javascript pop-up.
Richard Boa Photography
Launched 29/3/10
XHTML
CSS
Javascript
PHP
This is a small website made for an Edinburgh photographer based on his own design. As well as a static homepage, and a contact page with a standard PHP mailform, this site also features four gallery pages animated with javascript fade effects.
Hunters Private Hire
Launched 29/3/11
Design and Layout
Custom illustration
Logo Design
XHTML
CSS
Hunters Private Hire is a taxi hire service based in Edinburgh. This site has very little copy so we wanted to put as much emphasis as possible into a graphically enriched design, and created the banner image from scratch using Inkscape and Gimp.
Siobhan Witter - Stylist
Launched 17/3/10
XHTML
CSS
PHP
Photo Retouching
Animated Banner
This two page site was built for a London based stylist according to her own design.
In addition to an unusal HTML / CSS concept and a standard PHP mailform, we retouched a lot of the images on this site and also made her an animated heading.
Cala Dor Villa
Launched 2/12/10
Design and Layout
Custom illustration
XHTML
CSS
Javascript
Mootools
This is a seven page website made for a holiday villa in Spain. We created a graphically enriched design for the front page, with the palm trees and sunshine made in Inkscape. This site also includes a few minor Mootools features as well as a standard PHP contact form.
Faraway Place
Launched 3/11/10
Logo Design
Design and Layout
Custom illustration
XHTML & CSS
PHP & MySQL
Paypal Donations & Subscriptions
Youtube Video
Animated Banner
Animated Menu
This site was made for Faraway Place, a newly set-up Christian charity which aims to help teenage orphans in the Ukraine to successfully make the transition into adulthood.
The logo was designed from scratch using a combination of Inkscape and Gimp, and is based around their existing merchandise which includes skeleton keys and maps of the Ukraine on necklaces. This is used in combination with a rotating banner and an animated menu to make up the top portion of each page.
This site has twelve pages which include a standard contact form, a pop-up page for signing up for news and an embedded Youtube video, as well as three seperate payment areas with Paypal "donate" buttons for one-off payments, and a "subscribe" button for ongoing contributions.
It's most notable feature is an updateable "brick wall" graphic which can be added to as more contributions are made towards the building of their new home. Each brick displays the name of the person who paid for it, and can be added, edited and deleted through a user-friendly admin section built with PHP and MySQL
LKG Bookkeeping
Launched 31/3/11
Design and Layout
Logo Design
XHTML
CSS
Copywriting
LKG bookkeeping is a newly set up freelance bookkeeping service based in Glasgow. This site has a professional but personal approach and we've kept the design functional and straightforward to reflect this.
We wrote the copy on the home page with the intention of expressing some of the most positive aspects about Lorraine's business, as well as making adjustments throughout the site to optimise her content for search engines.
We've been able to make the design expandable despite the shadow effect. We haven't used PNGS because we're still supporting Internet Explorer 6 (although only just) and have been able to keep images at a mimimum allowing for a faster page load time.
We were also asked to design a logo for Lorraine's website, business cards and other stationery, and that it should be bold, dynamic and related to financials. We've created a text based logo which clearly expresses these concepts, and have made some changes to her site in order to accommodate it.