Client Website Progression

The client had built their own Wordpress website for their Promoting Jesus Campaign but they were unhappy with the layout and requested a change of colour scheme. Below is a mockup with the original design but with Earth-tone colour scheme. The Hex colour numbers were included.

The client was still not happy with the layout and so asked me to design a website for them. Here is a first mockup before I decided to go in a totally different direction. This is when I first started thinking about the paper textured background (used in the banner only in this image). This design was not shown to the client because I was not happy with the result. It was too dark and not very inviting but is the layout was simpler.

Not happy with this design I pressed on with a new approach. I decided to spread the background image across the whole browser window while keeping the content in the centre of the screen. This opened up the design and made it feel less clostrophobic. I added some custom navigation with a natural feel while keeping the simple comtent layout.

I sent some page mock-ups to the client who was very happy with the design. From there I went ahead to finish the site.

Client Website Influences

Here are a couple of links to some websites that offered some inspiration for my Website design for the Promoting Jesus Campaign.

The first is an article called 'Textures in Modern Web Design' from Smashing Magazine. I liked the rationale for including textures. Having a textured background on the Promoting Jesus website fit perfectly with the 'natural, down-to-Earth' feel requested by the clients.

The second example from 'The Best Designs' uses a simple clean approach. Not only does it have some great examples of websites but it's banner and content are laid out well. I liked the background speading all the way acroos the screen while having the content and logo etc in the centre at a viewable width. This is the style I used in the Promoting Jesus website.

Client Website Mockup

These three images are mockups for a form page, history page and home page for the "Promoting Jesus" website. The site is being created for Mitchelton Presbyterian Church for their "Promoting Jesus" 2010 campaign, the purpose of which is to offer resources to those who are wanting to investigate the Christian faith and it's foundation, the Jesus of history.
The site and other promotional material are to be simple and modern yet have an organic feel. The site will primarily feature video content and a couple of form pages.

Basekit Website Competion

Mockup of my website proposal for the Basekit website competition.

Classmates Comments

- Text Links at top too small.

-Site design a little too generic.

-Good choice of soft nuetral colours.

-Clean design matches clean baby.

-Copy maybe too corny.

Web Design Sem 2 - Template Test 13/4/10

1. What is a Dreamweaver Template?
A special file, created in Dreamweaver, that allows some content to be added or edited while locking other static content.

2. What are the advantages of using templates?
They allow consistantly styled html pages to be created quickly. They protect the neccessary page content from being edited by future page designers. With their nesting ability, child templates are able to be changed by editing the partent template.

3. What is an 'Editable Region'? How to set it up?
It is a special div in the template that allows for content to be added while satatic content is locked. Dreamweaver setup - Insert > Template Objects > Editable Region.

4. What is a 'Repeating Region'? How to set it up?
It is a special div or table that allows for content to be added as well as extra regions (eg table rows) while static content is locked. Dreamweaver setup - Insert > Template Objects > Repeating Region.

5. What is an 'Optional Region'? How to set it up?
Similar to an Editable Region in that it is a special div that allows for content to be added while static content is locked but differing from and Editable Region in that the region itself can be used or unused. Dreamweaver setup - Insert > Template Objects > Optional Region.

Any Font for the Web

In a previous post (Websafe Fonts) I mentioned that font choice for websites was rather limited if you wanted to have consistency across computer platforms but if you are into some pretty tricky and possibly time consuming workarounds then check out this blogpost by Louis Gubitosi entitled 'How to Use Any Font on the Web' at his site InteractiveBlend.com.

Marketing Website Mockup

I spent the morning laying out the home page for my Website Marketing assignment. I decided to create a clean design in darker tones.

N.B. The colour of the orange boxes is a little off due to the export settings in illustrator

click to see the image full size