Web design Portfolio
-
Web design
Responsive Custom Grid Based Design Featuring 26 Hotels
I’ve been using grids in Photoshop for years and I’ve been using ems in CSS for years. But this is the first design in which I’ve properly combined using a grid with ems and a ‘vertical rhythm’ (AKA a baseline grid). This is quite an advanced CSS technique, which is probably only used by the top 10% of web designers in the world. It means that whatever content you add to the HTML, the baseline of the content should always line up (in all columns). When you couple this with the horizontal grid I’ve used here, what you get is content that is easy to follow and digest without needing to use borders to show regions.
It’s a little more advanced still because this design is responsive, which means that if you load the page in a small device, such as a small laptop or mobile phone, you won’t need to scroll horizontally — the design will detect the users screen size and alter the CSS accordingly — in other words the web page responds to the user’s device. This is also a fairly advanced CSS/HTML technique, that is probably only being used by the top 10% of the world’s web designers (as at August 2011).
I’ve written the HTML in the most logical order and purely used CSS to arrange the content in to the layout. This means the content is in the perfect order for visually impaired web users and for search engines. It also means that it’s easier to make the web page responsive and future amendmends are far easier to make, meaning the web page is very flexible.
The website uses a lot of Javascript to improve the functionality. This javascript was implimented by my colleague by my instruction. I’m aware of most Javascript uses but have always had a devloper colleague to help impliment the more advanced features. I always make sure that advanced features gracefully degrade so that all content is accessable to all users.
The website is optimised for search engines. I use the image alt tags to describe images using the exact language of searches. By researching keywords using Googles keyword tool I describe images using the most popular long-tail keywords in many variations. This helps for pay per click and SEO. The images are optimised and the code is clean making the web page fairly fast, which helps with PPC and SEO.
This landing page has been featured in the prestigious web gallery, cssmania.com:
Skills/Software Used
- Photoshop
- XHTML 1.0 Strict and CSS 1-3
- Cross browser compatibility and graceful degradation
- Grid based layout
- Responsive design
- Search engine optimisation
-
Web design
Designing and Building a Microsite with over 75 pages worth of content in 5 days
This website had to be made in 5 days from start to finish, to coincide with a press-release. The visual design is very simple and took less than a day, but it was a challenge to get all the content on the pages in the remaining 4 days. However I comfortably met the deadline.
Skills/Software Used
- Photoshop
- XHTML 1.0 Strict
- CSS
- Cross browser compatibility
- jQuery
-
Web design
How to Present 11 Hotels, 66 Images and 70 Local Attractions on One Page Without Overloading the Visitor with Information
The challenge with this landing page design was displaying images, prices, local attractions and calls to action for eleven hotels. I wanted to put a lot of information on the page so that everything visitors would need to get a good overview of all the hotels and their local attractions was there in one place. This makes the page a good reference point for email campaigns, banner ads and social media marketing. It’s also useful for agents who work on our behalf and need a quick reference point for all the hotels in each of the hotel sets.
Because there is so much content on the page we used jQuery to hide much of the content, only revealing the content on click. We also added some script that enabled us to link to an anchor on the page and display some previously hidden content automatically. So if we linked to an anchor from an email we could display all the images and details for one particular hotel, while all the comparable hotels remain a short scroll away. This helps give visitors plenty of options without overloading them with information — they are able to digest details at their own pace.
Skills/Software Used
- Photoshop
- XHTML 1.0 Strict
- CSS
- Cross browser compatibility
-
Web design
Landing Page Featured on CSSmania.com
This landing page was designed as a place to view 30 hotel breaks on one page, as part of 3 landing pages for the Christmas period. The brief was to portray the feeling of the break on each of the three pages.
This design was featured on the internationally known CSSmania.com, a show case of the world’s best CSS based web design.
Skills/Software Used
- Photoshop
- Web Standards based XHTML 1.0 Strict
- CSS
-
Web design
Landing Page Featuring Fading Background Image jQuery Slideshow
This was the first time I had written the CSS for a full-width background image slideshow. We had some trouble figuring out the positioning of the background images in Internet Explorer 6.
The concept behind this design was a transformation from a cold winter feel in image 1 to warm and cosy feeling inside the hotel in image 2. The words over the images are loosely based on the famous romantic duet, “Baby, It’s Cold Outside”, popularized by Nat King Cole and Nina Simone.
Skills/Software Used
- Photoshop
- Web Standards based XHTML 1.0 Strict
- CSS
-
Web design
One Page Website, using AJAX to reveal content
I was briefed to design a one page website that listed all the spas in the von Essen hotels collection, including photos and the facilities at each spa! It was quite a challenge to get all that content on one page in a very short time frame. We decided to use jQuery to reveal content when it was activated by either a click or by use of a search filter.
Skills/Software Used
- Photoshop
- Web Standards based XHTML 1.0 Strict
- CSS
-
Web design
elderlyactivities.co.uk: Concept, Web Design and WordPress Theme Development
Bupa, a customer of The Consortium, kindly gave us lots of activities ideas they had collected from their care homes. We decided it would be a good idea to use them as a free resource that we would give away online, helping attract links and start the development of an online community for carers, looking for materials to help them in their jobs.
We had already done a lot of research on keywords in this area and found to our surprise that the domain name elderlyactivities.co.uk (based on a top keyword) was available. In two days I had the website online, having found the domain name, designed the website around the content and built the WordPress theme.
Skills/Software Used
- Photoshop
- WordPress
- Standards based XHTML/CSS
- Wordtracker and other keyword tools
-
Web design
Shareandinspire: A forum built on WordPress
I designed and built this website from start to finish from logo to forum build. Initially the brief was to build a blog for early years practitioners, to help promote our early years websites and to learn more about our customers’ needs. However, after I had completed the website I was told to make it more like a forum; so I used a WordPress plugin and changed the structure of the website making it function as a simple forum.
Skills/Software Used
- Photoshop
- Standards based XHTML/CSS
- WordPress
-
Web design
Tru-Green: Static XHTML/CSS Website Design
This is an example of a simple static website I built for the Tru-Green brand, a green envelope producer based in India. I used several layered Photoshop brushes to create a slightly crumpled envelope look for the background of the website. I designed and built the whole website from start to finish in one working day.
Skills/Software Used
- Photoshop
- Standards based XHTML/CSS
-
Web design
Early Years At Home: Logo Design and Web Design
I was asked to design a Business to Consumer website for ‘at home early years practitioners’. I designed the logo and the website for an external web development team to use on an eCommerce platform they had previously created. My design was restricted slightly by the need to make it compatible with the eCommerce platform.
The company were extremely happy with the result and the quick turn around. They went with the first design I produced.
Skills/Software Used
- Photoshop
- Standards based XHTML/CSS
- JQuery
-
Web design
Build Africa: WordPress based Charity Website
This is a small website built to support the Build Africa charity. It uses WordPress to manage the events diary and Google Calendar for the events calendar.
Skills/Software Used
- Photoshop
- Standards based XHTML/CSS
- WordPress
