Markeaton Park Website: First Product

Here is the first version of my Markeaton Park website online and fully functioning!

To say I have never done ANY HTML, CSS or Javascript before, I think I've done fairly well! Just don't look at my coding, it's a bit of a mess! ;)

It's not EXACTLY the same as my initial ideas that I produced in Photoshop as the opacity effects across different browers is occasionally quite tricky. I managed to get around this in IE by creating a seperate CSS file and removing the opacity, and just maknig a plane white box instead. Not a big issue really, but none the less, a bit annoying.

Almost everything else is exactly as I wanted it, except the links, but I quite like it layed out how it is at the moment. If I had longer to work on it, I would spend longer adapting the code and being really perfective over the whole design.

CSS Fixed and Floating - Reviewing Websites

Landau Forte
Derby Yamaha Music School
The Sims 3
Facebook
BBC

I've been looking across the Internet at how websites act and respond when the user resizes the window or maximises etc.

I looked at some mainstream sites such as Facebook and BBC and Sims 3, as well as more niche sites such as Landau Forte and Derby Yamaha Music School. My research can conclude that the way most of the sites move around are relative to a position. For example, the Landau Forte and BBC websites are positioned to be central to the screen and when the window is made larger, nothing happens, other than all the content staying central to the window.

Some sites, such as Facebook and Sims 3 are still central, but having moving objects. For example, on Facebook, if you resize the window the blue bar at the top will resize to fill all the way along the top of the site, however the whole website is still centrally positioned. The Sims 3 site also works in the same way, with the Sims 3 logo staying positioned absolutely top left, making it always visible.

Having done this research, I've decided that I am going to create my Markeaton Park website in the same style, using CSS to configure the site to be central, and remain central on resized windows.

Ill aim to keep the site's dimensions with in 800x600 to keep it accessible to a lot of monitors and screens.

Fluid or Fixed?

There's no doubt that creating a website in photoshop, sliceing it up and plonking it into a table is the easiest possible way to creating a website. However, in terms of accessibility this makes things more difficult.

My vision for the site is to be able to change text size, but I'm worried about the navigation at the top of the page. Originally I was going to use images as the links and then the image changes once you roll over to change the background colour.

To talk about these problems more and get a better understanding, I've arranged to talk to my brother who works in web design and uses CSS and HTML every day. Hopefully he'll be able guide on what would be best to do for my website.

At the moment, I'm using a fluid design which looks fixed. Once you resize the window, the whole website stays centred and the same size. I am unsure as to how to change this at the moment.

Markeaton Park: 5 Website Design Ideas

Here are all 5 of my designs for the Markeaton Park website.

I've drawn inspiration from quite a variety of different websites and images across the internet and this is what I've managed to create.

Each front-end design is accompanied with its own wireframe to show the progression of ideas.

I think the second and third website designs are the worst and don't show enough dynamic design, where as the first and fifth designs are my favourite as they look the most technically and pleasing to the eye.

Each design is different and offers something unique to the website. I will be focusing my work from now on on either the first or fifth design, as they are my favourite and I think they look the most professional and easy to use.

Markeaton Park Website: Initial Designs

This is the second design I've created for the Markeaton Park website.

The wireframe is on the left and shows how the generic website will look.

The new design incorporates the autumnal colours of reds, oranges and browns without the use of too much photography.

I'm not as keen on this site design as it looks very flat and basic, which wouldn't apeal to those of a more technical background.

The dual navigation bar may also be confusing, however the top bar is used to navigation across the main pages and the secondary bar is to navigate between each section of the site.

The image taken is a very good representation of autumn, however I feel I can either find another image that would represent Markeaton park better or at least show something that the user would recognise about the park. I may also include some sort of revolving gallery here.

Markeaton Park Website: Research and Theory Work

Here are a few photographs I took today after going on site to Markeaton Park to get some of my own research done.

I thought it was necessary for me to do a site visit so that I could really remember the essence of what Markeaton Park means to me and to get a real view of how it looks in Autumn/Winter.

I took approximately 150 photos of which I will probably use some in my project to add visuals to the site.

Here is some data that I've gathered that may be useful in producing the site:
Buses to the park:

• Park & Ride
• Notts + Derby
• Unibus 4
• Unibus 5

Amenities close to the park:

• Derby University
• McDonalds
• Esso Petrol Station
• Easy access to the town centre

Park's amenities:

• 24/7 Pay & Display Parking
• Pitch and Putt
• Craft Village
• The Orangery Cafe

Selling:

1. Hot Food
2. Baguettes
3. Panini
4. Homemade Cakes

• Lilac Joinery
• Paint a Pot
• Matthew Morris Furniture
• Basket Ball Courts
• Tennis Courts
• Rowing Boats
• Child's play areas
• Half Pipe
• Crazy Golf
• Bouncy Castle
• Steam Train
• Donkeys
• Paddling Pool
• Road Train
• Ice Cream Stall

Selling:

1. Magnums
2. 5-Ice
3. Cornetto (Mint and Strawberry)
4. Festival (Original and Mint)
5. Screwball
6. ZAP
7. 99
8. Sunny Ice (Blackcurrant, Orange and Cola)
9. Rainbow Lolly
10. Strawberry Lolly
11. Ices Lollies (Cherry, Lemonade, Banana, Choc-o-Lic, Lager & Lime

I've also completed the forms we were given in our first lecture about our chosen space, building or environment. Here's my responses:

Physical Environment
Who is the environment for?
Everyone. Couples, families, friends, singles, students, children, adults, pets.
What is the environment for?
A space to come enjoy the outdoors and get involved with the park. Very interactive without being over powering.
How is the environment organised?
There's no strong structure to it and that gives the park a more natural feel. Doesn't conform to any specific rules. Mundy Place centre keeps all the children together which enables to parents to keep an eye on their kids.
How is the space signposted/negotiated?
Fairly well sign posted where necessary, use Derby City Council style boards and their own Victorian style sign posts too.
How do you feel about the space?
Relaxing, friendly and a place to think. Good for families to come to relax or enjoy some time together doing activities.
What problems can you see/predict?
As it's so open and varied, creating a website with a strong structure may be challenging as there's many different feelings and emotions that may come across to different people when walking through the park, the park benches for example often have plaques on them saying "In loving memory". It'll be important to include a picture gallery that captures the park in its autumn/winter state.

The Online Environment Equivalent
Who will the online environment be aimed at?
Families and those who are looking for things to do over the winter months.
What is the online environment for?
Promotion of Markeaton Park. A place to find out about the park and what it has to offer.
How is the online environment organised?
Split into 5 main areas. Home, What's On, Map, Kids and Gallery. Some pages will have more to it than just these 5 things. I'll have to come up with a site map.
How will the online environment be updated/managed?
The pictures in the gallery will be changed easily by uploading different pictures with the same file name, in effect, over writing the original source files. The text will simply be changed through a normal website editor.
How do you feeling about the online environment?
I think if I focus the site around families and what's on offer, it'll be a good product. I am very excited to get started on the site and create a space accessible to those who want to find out more.
What problems can you see/predict for an online representation of this environment?
Creating an online environment will be challenging as the park is so diverse and varied and means all sorts for different people. Creating a single site with one focus could prove quite a task. I'll have to keep it focused on what's available to do there.

Markeaton Park Website: Initial Designs

Here is the initial design idea I have for my Markeaton Park website.

I wanted the website to feel very much fresh and clean without over-loading the user into a frantic mess of information. To do this, I've made the background image a very clear desaturated image, not to distract from the main content of the page.

I've then used a white box overlay to create an area for the content to be based inside. This is then made slightly transparent to give the effect of glass.

On each page, there will be one main focus picture to give the user an instant preview of what the park is for and what section of the website they're in. For example, on the front page there's the main picture of the girls on the grass, then 3 photos of the places to visit at the park. The map page obviously has a map at the focal point on the page to show the visitors where things are around Markeaton.

I've used a bold thick soft font for the header so that it's clear and dominating, giving a clear introduction to each page, then the font continues to be large and clear to make it accessible to as many different people as possible.

The navigation bar at the top works as though they've cascaded out from Derby City Council logo, then the Markeaton Park logo, across ontop of the page content. Each link is the same colour, until the user hovers over one of the links and selects it. Once you're on a certain page, the colour of that link shall remain. This makes it really clear for the user to see what page they're on and also gives the website a bit more dynamic colour use, rather than having plain and flat looking buttons. I've also made these slightly more transparent to keep the weight of the website light and airy. In addition, I've included a drop shaddow to stop the site looking totally flat and dull. The effect of adding in the drop shaddow creates a feeling of distance between the main content box and the links. Therefore a flow of air could pass between the two, reflecting the air in the park and the freedom for users to travel around quickly and easily to the places they want to.

For an inital design, I'm very pleased with it and I will probably keep it.
As the project is about creating some sort of content with accessibility involve through the use of javascript, I want to create some sort of device that will either englarge the photos once clicked, enlarge the font, play a voice over or play a video. These ideas may chance one I've received the official breif.

Why Markeaton?

Other than the photo speaking for itself, why did I choose Markeaton Park for my interactive space project?

Well Markeaton Park is the place where I spent a lot of my younger years growing up. It was the park we used to go to and every time I go back I get a strong sense of memories of people I've been with and things we've done there.

Having all those fond memories has fueled me on to create a website that's accessible to children and adults so that both age groups can get the most out of the park. I want to create an environment that is useable by people with partial sight, who are deaf and those with learning dissabilities. As well, of course, as for people who are able in all those factors.

I'm going to be going back to Markeaton over the next few weeks to take photographs and pick up some information about the coming events over the winter season, so I can create this website suitable for the project.

Building :: Structure :: Environment

Here are two scans of some paper based work I've just completed.

The wire frame shows the vision I have for the website, it's layed out in the style I would like to create for it, however, as expected, the design may change as I become more confident with Javascript and Dreamweaver.

The brain storm shows my ideas and how I'm going to research around the actual practice of making the website.

I've thought about different target audience's and their requirements, along with various different accessbility options I have for using javascript, such as changing the font size, using voice over and enlarging photographs.