I've Won an Award!

During my time on the NTU Pride committee as publicity officer, I've been given the opportunity to rebrand the society and create their new website.

Incredibly, my efforts have been recognised and I have been awarded with "Best Website" from the Societies awards.

This has been an incredible acheivement for me and I couldn't be happier!

Tribe Scuba - Photoshop Mock Up

My first and second computer mock up design. More to come!

Tribe Scuba - Initial Designs

These are my first few initial designs for the layout and colour schemes for the new Scuba Diving website. I've also created a mind-map to get some of my ideas down on paper before going about implementing any sort of initial design, either drawn or photoshopped.

LUCY: Website tweeks and development

I have gone through and tweeked various things throughout Lucy's website and added in a more secure login system to prevent hacking of the blog and gig updates etc.

Fixed various design flaws - including too much inconsistancy between headings and colours etc. Things are a lot more structured and userfriendly now, including headings, possitioning and other TINY little things in the code that usually wouldn't go noticed, but make a massive difference to the professional quality such as padding etc.

I've also made the add, edit and delete forms for the blog and gigs MUCH more user friendly by changing the text boxes to drop down menus.

You can now upload photos up the 3MB and the system will automatically downsize it to fit within the constraints of the website WITHOUT distortion, however the file size will remain the same.

The login procedure is now MUCH more secure. People can't edit the blog or gigs by accessing the individual pages, they MUST log in. (Which was previously a flaw in the last log in design)

I've added in a random image selecter on the home page so that it will randomly choose an image to display which is a photo of Lucy and a comment that someone has said about her. (Refresh the home page to see this working)

The alignment of the text is now justified so that it spreads evenly accross the page. (Small minor change, big difference!)

And finally, the MP3 player begins playing the first track when you load up each page.

I'm handing in my work on Thursday and doing my presentation on Friday... I think we're almost finished!!

I've talked to my brother about getting the website online at Lucy's own domain, and I hope to get that online by the end of March. Fingers crossed!

LUCY: Website complete!

Lucy's website has been one of the most exciting, rewarding and challenging projects I've worked on to date.

Not only has it been a great chance for me to express myself and my skills, it's also been great to create a website for someone I care a lot about and deliver something of high quality to the end user.

I've managed to create 2 flash MP3 players, video content, a banner, a gallery and an interactive side bar with links to twitter, facebook and myspace. Along side this, I've developed two databases where Lucy can update her own personal blog and a space where she can post up all her upcoming gigs. Not only can she do this, but she can also edit and delete every post and add a photograph alongside her blog entries - quite a brilliant accessory to keep herself and her fans up-to-date on her progress.

I've also included a Twitter feed onto her home page where fans can access the site and get an instant update without having to access her blog first.

This is the first website I've created which uses Flash AND PHP, MySql together. They have worked very well together and their seamless interaction benefits are going to be very beneficial to Lucy's promotion.

Overall, I'm overly happy with how this project has gone and I'd rate it the best website I've made, so far.

The next step is to create the login page and get Lucy to check over it all to make sure everything is how she wants it.

http://www.kidinacandystore.co.uk/lucyward/index.html

LUCY: Flash MP3, Banner and Photos

If you click on the photo, you'll be able to see the latest design ideas I have for Lucy's website.

The MP3 player was entirely made by myself using photoshop and flash with action script.

I've created a DIV with a background image which includes the pins, and then created a DIV inside that with the Flash content, making it look as though it's a single image. I've also done this with the "Lucy Ward" title banner.

By using action script 3, I've been able to create a simple music player that can player up to 4 external songs, with skip feature, play/pause and volume control.

Where the photographs are on the right hand side, it is infact a flash banner, where the user rolls over each photo and some information is displayed about Lucy herself.

Future design ideas:
I want to create another box above or below the main content text area in the centre to include either a regular twitter feed or her latest video news. This may be an area where I can include my PHP database.

PRIDE: Finally online and active

After working on the new NTU Pride website for several months, the new website, logo and brand image was launched on 15th February 2010 and it went off to a roaring success.

To celebrate the new branding, we had a massive house party where guests could watch a firework display, let off Chinese lanterns and enjoy cake and music.

I really wanted to bring a brand new image to NTU Pride, making it much more professional looking and making it stand out from the crowd, not blending in at all.

Through using the bright colours against the dark background, this has really worked well and will continue to look fresh and bright for years to come.

To see the website online now, check out http://www.ntupride.org.uk

In addition to the website, 2 large new banners were printed and various t-shirts were made too. As I'm on the committee for NTU Pride, I've been working closely with the bar, Propaganda to create a strong sponsorship and NTU Pride is now pleased to be officially sponsored by them.

LUCY: Project application and design

Brief 2 states that we need to create a website for an artist or organisation. This is no more than the perfect opportunity for me to finish off the website I started creating for Lucy as a project.

This way I'll get marked on work I produced outside of Uni and I can get feedback and create the site as professionally as possible.

I have to include 3 interactive Flash elements and a PHP MySQL database profile page.

At the moment, I've managed to get the whole basic template of the site online and the first flash element included. However, as the flash has to be interactive, I am unsure as to whether or not this is possible to use.

I am currently going to start designing the flash MP3 music player that will set in the menu section. I'm also hoping to have the side pictures revolving and use video through Flash as well.

DESIGNS: Kid In A Candy Store .co.uk

Web design:

Carphone Warehouse - UNI Mobile

I've finally finished my website project.

Here's the website I've made for UNI Mobile as part of a promotional offer from the Carphone Warehouse store in Nottingham.

UNI Mobile is a fictional company I've made as an illustration purpose. The Carphone Warehouse store in Nottingham, however, is real and therefore fits in with the retail establishment as stated in the brief.

I have used CSS, Flash, Javascript and HTML to create the website. I'm very pleased with how it's turned out. The colours are very eye catching and the site is simple to use and serves its purpose.

Project: Carphone Warehouse - UNI Mobile

I've finally settled on a brand new idea for my website project!

I decided not to do Saltwater, but instead the carphone warehouse. I didn't want to redesign their website, but instead offer a website that is promotion for the store in Nottingham AND as a promotion to a unique mobile phone network.

This is my initial design idea. The section with "Calla Texta Surfa" written on it is goingto be flash content.

Mini-Project - Saltwater Initial Design 2

Mini-Project - Saltwater Initial Design

Here's my first design for my Saltwater project.

I've really been struggling for inspiration on this project, so this is the best I've made so far.

I'm going to continue playing with designs over the weekend and hopefully be settled on an idea early next week, so I can build it in HTML and CSS for hand in on Friday.

Mini-Project - Saltwater

For our first project back, we have two weeks to create and develop a website for a retail establishment, which includes restaurants, bars, shops, pawnbrokers and dry cleaners!

I decided to create a website for the bar/restaurant - Saltwater. I've been in quite a few times so I know the environment well, it's one of my favourite bars and I think I'll be able to do the company justice through their new web design.

Their current website is online at: http://www.saltwater-restaurant.com/
As you can see, it's very basic and uses a multitude of Flash and HTML/CSS. I currently don't like their website as the design of it covers the text in some cases and the colours don't contrast enough, making it hard to read and not very user friendly.

I've looked through their website and image gallery and have begun my research for the project. These are the two files I have so far. The logo I created (first image) takes into account their current logo, but for this project, I thought I'd replicate it and produce the website around it.

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.

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

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.

PRIDE: Sketch Book Design

The same concept as the designs I made for Lucy, this design is to get an idea of what the new NTU Pride website could look like.

It's very similar to the final one I made as I liked the design quite a lot and it works.