Link to Flash project and website

Just thought i’d better add a link to my portfolio, the Flash website and the Flash blog so you can have a look, the links are as follows:

portfolio website: www.lockiedesigns.co.uk

Flash website: www.lockiedesigns.co.uk/flash.html

Flash blog: jonlockiefl.wordpress.com

future plans for the flash website will be to make a domain for it called www.lostboy.co.uk so as it actually has its own website, however, a limited budget at the moment has taken this slightly out of reach.

the Flash blog can be found under the blogroll on the right hand side of this page

i hope you liek what you see, feel free to send a message letting me know what you think of them all!

Lack of updates and finished portfolio website…

Due too a huge load of work, and a desire to power through and get it completed, i have slightly neglected my blogs, in this time, i have completed my flash animation, overcoming many obstacles and also completed the re-design of my website, which if i do say so myself, is looking pretty good compared to the rather amateur look of the previous. Here, i will show screen shots of my new website and explain what has changed, how the new layout works etc…

As this shows, i have made a new logo, one which is alot simpler, can invert colours too work on any background and is pretty easy to remember. It could also appear on any kind of merchandise and would sit nicely at the header of a letter or a CV, as i have done. this CV can be found on the ‘About part of the website. I have also added in this beige background, which comes inside of the black area to show the content, as i wasnt too keen on having white text and needed something that would run throughout the website. I have also made the links orange, as, as i said previously, orange works well on black. Further on the links, when on a certain page, the background of that specific link turns into this beige colour, whic i think looks pretty good, however, i think it makes the orange a bit too bight. Another thing i have done is too get rid of the text on the home page, i have replaced it with a graphic of three boxes which show enough of the letters that you can work out it says ‘welcome to jon lockies prortfolio…’ Finally, in the footer, i have made images for ways too contact me, i.e facebook, twitter, etc, and there’s a link to the host, which therefore promotes the host.

The portfolio is another page i have stripped apart, as the last one had no class what so ever, pointed out by my tutors. So now i have introduced an iframe. What happens, is if the user clicks on one of the bottom links, it will open up a new page, then that will give some links in a <div> where it shows the star/moon shape. When a link is clicked on in that <div>, my work will play in the area to the left, which is where the iframe is placed.

I have hugely simplified the ‘About’ page, as now it only says a bit about myself, shows an image of who i am, and shows links too inspirational websites, (which is a new addition) and still has the images of software i practice. This i think is alot more compact and sits well together, it is a very powerful page which gives alot of information!  However, i do need to start noting down inspirational websites when i see them, as what’s happened quite alot is that i’ll see the websites and then forget about them.

Finally, i have added in a contact data base, this was done via a tutorial on the web, i have placed some information too the left should they want too send post or get in contact another way, but yeat agin this is quite a clean finish. I am slightly unsure about the text below, however, that has been added in so as the same layout gets kept throughout the website. I am very pleased with how this has completed and am looking forward too seeing how i have done and if i have got a better grade then previously.

Changes so far to portfolio website

So far, i have only implemented a small amount of changes to the website, as i also have a flash project to contend with. I have basically drawn up some layout ideas, and transferred them onto dreamweaver, these show the header at the top, holding the logo and the links. In this header, i have decided to get rid of the yellow image i created of myself, as it didn’t look all that good, and, during the presentation was referred to as a zombie! Below this on the home page, will be a graphic welcoming any viewers. Then there will be a footer at the bottom, showing all the information the portfolio website has to provide. On the other pages, the layout will be kept the same, but different to that of the home page. It will keep the header at the top with the same contents, and then have two <div>’s below either side of each other with a longer and more stretched <div> just below. On the portfolio page, there will be a content loader, with one of the two divs showing the work and the other showing the links to that work. Below this will be links to different aspects of my work, i.e. photography, animation, video, websites etc. On the contact page, there will be my contact details on one side, a message input database on the other and a little message below. On the about page, there will be a bit of text about myself next too a photo of myself, all above links to inspirational websites and my software disciplines.

So, to outline what i will be keeping, there are some bullet points below:

-a paragraph or so of text about myself on the about page

-my software disciplines, also on the about page

I will be further making changes to the background and the logo.

Reasoning for making changes

Having handed in the draft website, my tutors came back with this statement:

“Good overall work and understanding, and a professional approach to solving the brief. The homepage shows a good clean design which works well and looks good. However the other pages (eg portfolio) lack the same elegance – it would be better to stay with the main idea – keep it clean and simple.”

Looking back, i agree with some of the comments made here, such as the fact some of the pages lack a certain standard of elegancy, however, i don’t however feel that the home page was all that elegant, so therefore, i have needed to change the way the overall look and feel of the website works. This has now been done so the same look runs throughout, and on every page except for the home page, the same layout is used. To do so, i looked at a number of other portfolio websites, researching how i could bring together a number of the more positive aspects from each site. I also did this having viewed a number of my course mates work. Following, are the new layout designs in rough detail, the logo change, and what aspects of the website i have made further changes too.

Its been a long time!!!

Due to a large amount of work, mainly group projects, both practical and theoretical, the improvement of the website has had to be put aside. During this time, i contributed to the creation of a channel website (www.midnightbournemouth.com) mainly working on one of the videos, filming, and editing of a particular video. Take a look at the website, my video is the one with a student waking up leading to a selection of interviews. This taught me the workings of a camera and how useful the technique of multi camera shooting can be. Further, a 3000 word essay was produced, which achieved a score of 58% and a group presentation on masculinity and sexuality in advertising was configured. Here, i looked at some theorists and completely redesigned the whole presentation, as what we had was hard to understand. Now, with all this out of the way, i will focus on the website, which is due in on the 23rd of March, just over a month away and seven days before the hand in date of the Flash assignment, which was allocated a week ago. So next month will be a very busy one!!

Final Website Completed!!

After a very long process, the website has now been completed, the address is:

As this shows, i have made a couple more changes, (colour) mainly in the colour of each page, I have decided to use blue for the about page, as it is a very calm colour, and this is one of the most informative pages. For projects, i decided to use red, as this is a very warm yet exciting colour, which will links too how i want people to feel about my work. I moved yellow too the contacts page, as this colour stands out brightly and can be seen as quite a neutral colour in terms of hot and cold, something that this page is.

In conclusion, i am very pleased with the eventual outcome of this project, it is very effective and attractive, something i have said i wanted too achieve right from the start. Also, i am very pleased with how similar my website is to the mock ups, this is something that in the past i have struggled to achieve, but in this project, having gone through the correct process, a high standard composition has been built.

To improve in the future, with this being an ongoing project, below is a list of possible changes that might be made:

-change the yellow for orange, as the yellow doesn’t really stand out on white, however, as shown in the colour experiment, orange stands out on black, and through a bit of experimentation during the creation, also stands out on white.

-change the work images on the home page, this will be done when i have done a bit more on my course.

-maybe get rid of the work images all together and revert to one of the layouts in the homepage experiments early on, such as having three blocks side by side.

Different Shapes for content blocks

Instead of the original out of sorts blocks that were used in the mock ups for the content pages, i decided to change them for much smoother ones, linking with that of the actual page design, (having one sharp edge and one rounded). This was simply redesigned in PhotoShop and then selected as the background image for that specific <div> after deleting the background all ready there.

Re-size s

After adding in a one pixel line at one edge of certain <div>s i found that i had to take a pixel of the height/width of each specific <div>. These included the header and footer on every page, which were done by going into the styles sheet and changing the width/height. I also resized the logo, as it was a bit too big for a website, and drew too much attention and looked out of place.

Along with resizing, i also repositioned the logos and the menu, so as the menu had a bit more of an area to be selected and the logo was more inline with everything else.

Change Links

After creating a content map, i made a decision to change the names of my links, so that my content details and CV can go under the About link and the people who view my site can leave messages and offers, under the Content link. This meant that in Dreamweaver I had to change the sizes and margins of all the links to make a bit of space.

Neaten Up the Edge (Change 2)

As well as sharpening one of the corners, i also looked at the outlines, as these were all un-even. So, i have made a decision to make all of the outline the same width. Whilst making this change, i also made the edges thicker, as on the original design they looked a bit too thin. They are now around 3 or 4 pixels thick the whole way round, shown opposite.