Christmas is here!

For some, Christmas is a dreaded time of year, for others, it's the best time of year!

For me, this year is set to be one of the best yet. (About damn time!)

One thing that always, and will always, get me in the mood is this fantastic advert by Coca-Cola. What it, enjoy it, and get that warm fuzzy feeling, knowing its the season to be festive with your family and friends.

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.

Boosting your career with social media

Check out this great article I found on the .net magazine website.

It talks about the importance of being up-to-date online when it comes to finding employment, especially in this tough economical climate.

It's becoming rapidly clear that if you don't have an online presence, it will be so much more difficult to find work and be involved with your network, especially in the field I'm wanting to enter, Interactive Media.

Being accessible online, gives potential employers the ability to quickly access information about you and contact you instantly, resulting in work hopefully!

Of course, being in the web industry, it'll be very important to have a professional online presence, and therefore the way you conduct yourself online will be very important to consider.

OFF-TOPIC: La Roux Concert

Me and my friends, Andrew, Jodie and Dan went to go see La Roux on 17th November 2009.
I just thought I'd share with you these couple of videos I have found on YouTube.

They're really interesting to watch even if you don't like La Roux as the visual effects on the backscreen really brought an amazing atmosphere to the song.

The back of the stage had 5 strips of LED lights, which were lit up and from a distance you could see LA ROUX scrolling across the back wall. Really effective and very 80's.

Concert on the whole: 7/10

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.

Logo Color Change

Here's the changed Coca-Cola logo I've adapted. I think it makes it look more like a logo for orange juice.

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.

Placement: Let's begin with the companies

I've finally put together a list of 24 different companies to contact regarding getting a work experience placement. I've found 6 out of these companies to be really interesting and exciting, hopefully I'll be accepted for one of these places.

I will be arranging an interview with our careers and CV adviser to get my CV checked over, then I'll need to put together a portfolio and write a covering letter, before sending it all out to prospective companies.

I think a few all nighters will be in order shortly!

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.

Network: Network Map

Here's my network to gain work experience in my pathway, Interactive Media.

As I am currently unsure as to the area I want to focus my career, I've split up the network into various subsections.
For example, as I come from Derby and that's very close to Nottingham, I'm using both cities as my network as it's easy to commute between the two. Within each city, I've split it down further into two sections "Web Design Companies" and "Promotions and Branding Companies". By doing this, it gives me a clear view of different companies that are available within the two areas of the media I'm most interested in.

I've also included the names and a screenshot of the website for each individual company to show a mini preview and to create it more visually apealing.

On the other side, I've included various environmental factors that contribute to my network. These include my Employers, various Organisations, Peers, Friends & Family and Academics. Each catagory is split down further into more specific atributes. Various nodes on the map link together and create a more circular link as there as many over lapping factors to consider.

By creating this Network Map, I can now see where I feel I can progress to find out more about getting work experience placements. Each node at its most extreme (last in the chain) is a starting point for me to research a place for work experience.

4 Web Design Principles

Just found this interesting website. Thought those doing Interactive Media would find it quite useful for design principles.

http://www.myinkblog.com/2009/03/21/4-principles-of-good-design-for-websites/