Web Design Cover

Well yeah this was my cover for my web design unit work.

Had nothing to do with web design so i added some to the orange background.

:D

My Myspace

This is my myspace.





















With this i basically just tried to use what i learnt in my research. I used div overlays and stayed as far away from the generic myspace layout as i could. I have added all my peers i could find and have also uploaded my work and photography to it the pictures page.

Bad Website

deathmetal.com

This is an example of a bad website. The website looks plain because there is a plain black background and not a lot of content. The graphics on the site I think look really tacky and cheap and not very inviting. The text on the site is red and lime green which I think looks bad because it also just looks tacky and not very well thought out. On the bands page there is just a list of bands down the left hand side and nothing on the right which makes the site look empty and once again not very well thought out.


















This website hasnt had alot of thought put into the design ofthe website. The website isnt the greatest for navigation and also isnt inviting to make you wnat to come back. I think that it could have been really easy to make have put some design into the website and it wouldnt have taken an expert to do this.

Evaluation

At the start of this project I felt confodent and happy with the brief. I also felt that I would hopefully learn alot from this unit as it is something I am already interested in.

At the start of the unit i learnt a lot about the coding of websites that i did not already know. The main thing I learnt and was very interested in was the SEO ( Search Engine Optimisation ) Theres was alots of things about this that I did not know. The main thing I found from this was that you shouldnt just put your company name in the title but also what the page is about as this also helps the search engine. I also learnt about H1 tags or Heading 1 tags I did not realise these made such a differnce.

Once we started to look at the layout of websites and how to use different objects such as layers and tables I felt we could have looked a bit more into things. This was just a personal thought as I already knew these objects I felt we could have learnt alittle more about controlling these objects with code. This didn't effect me thought because I learnt these things by myself when people were learning about the layers.

Once i got stuck into making my website I came across alot of problems. At first I wanted to keep it to the same size as the last briefs size but I soon found this was hard as it was so small. I soon over came this by changeing the size and the layout of the page but keeping the same ideas. I felt the main thing with the layout i could have improved was the use of space. I feel that i could have made better use of some of the space. If i had done this again i would have changed how i displayed the album art work next to the album names and also on the home page would have made better use of the offers space. I also tried to encorporate things that I had found in my research and in the lesson tutorials into my site. This meant just picking up on little things that i found made a good website and also about SEO.

Overall I was really happy with my finished product and feel pleases as i have learnt alot of new things such as external css. I am mainly pleased as i feel i have produced a professional looking website that shows my skills. If i had alittle more time and hadn't have add some of the problems i did with the site layout i would have liked to add more SEO objects into the site like meta tags , keywords and H1 tags. There is only a few mainor things I would change but these arnt anything magor that i am worring about.

Website testing

As I want as many hits as possible i want my website to be viewable from as many magor web browsers as I can.

Firefox Mac














As you can see the website wroks perfectly fine within firefox on a Mac. This means anybody wanting to view the website using firefox on a Mac will be able to make the most of the website.

Opera Mac















As you can see everything lines up nicely with in Opera. The only problem is the flash objects do not show. As i have never used opera before i am not sure wether this is due to it not having a plug-in installed or some other problem. This doesn't make too much of a difference to the website though, it just means the user will not be able to see the flash but the sitte will still work fine.


Safari Mac















All the features of the website work fine within safari. This means the user will be able to enjoy all the features of the website such as flash, drop menus and everything lines up. The only problem is the the header as the top seams to have a orange tint to it. I can only imagine that this is a problem with the div tag or the table inside it.

When testing this on a different Mac machine I found that it worked fine with no orange tint across the screen.
















Here you can see there is no orange tint across the top. This most have just been A problem with the other machine. This means the website also performs perfectly within safari.


FireFox PC


















Here you can see the website functions perfectly within Firefox on a PC. This produces no errors or throw stuff out of place.


Internet Explorer PC





















As you can see the website works fine within Internet Explorer as well. The only problem is that when a flash object is on a page with Internet Explorer it asks wether you want to install the Active X This cane become annoying for some users, This is not a magor worry for me though.





Summary:

The only realy differnce I have come across in the broswers is between the grey and organge boxes at the bottom some leave a small space and some line them up. This makes no difference to me as both ways look fine. The only problem I came across was the plug-ins with opera, This isn't a big worry to me as very few people use it. Overall i am happy with the way that the website preforms within all browsers and would be happy for people to view the website.

Making the website

To make my website I used a mixture of techniques to get a finish I was happy with.

To start with I had to make some changes to my design as the brief before for designing the layout had a set size of 720 x 480 that we had to design to. As this brief had no size limits i changed the sizes of things to make it more usable. I did this as i thought the old limits were a bit small and was hard to make everything fit nicely.

For a start I made my header stretch across the width of the page by tileing it on it X axis. I did this so hat no matter what screen resolution you are using it will stretch across your screen.







To make the links across the top always be the correct size for the screen resolution I put them inside a table. Then by making this tables width a percentage it will always adjust to the users screen.

The logo, white content area and the 2 small areas at the bottom of the pages are layers or also known as div tags. I have controlled all these using an external css page ( cascading style sheet ) this stops the layers from shifting around on the page and also allows me to make them sit center.


















































This external css also allows me to control what style text is the default, the font colour and the background colour and a lot more features on the website.

I then used this piece of coding to connect the style sheet to the html page:





This is placed on the html page between the "head" tags.

Everything with in my content area is held in place by using tables. This makes it easy to hold everything in the correct place because you can add row and columns and also can adjust the widths and heights easily.
















This shows the areas of the table for the index page. this shows how i have used the table with row and columns to make everything sit in the correct places.






















These form objects i simply made by using the built in form objects with in dreamweaver. These were found within the forms tab at the top of the window and i used forms such as text field and a list/menu. Once you have these in you page you can simply add the different names or lists to them. To add the list into the drop down list/menu I simply click on it and went list values.












This shows the pop up box where you add your list items.


















Here you can see my search page. For the artist search i have created roll over images as the buttons to search. I created this by click on my link image and then opening the behaviors within flash and chose swap image. Then I chose the second image i wanted the image to change to when rolled over. This will gave me a roll over link effect.















When making the website I made sure I sure that i added alt tags to all my images so that these can be picked up by screen readers and help more people access my website.

Bad Myspace

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=6221

This is the myspace of the original owner of myspace



















I think that alot of myspace's are bad and this shows why they are bad. The reason i think they are mostly bad is because they all have this same generic layout structure. This makes most myspace profiles look bad and all very simulair.



As shown in my other post about good myspace coding the only real way to over come this horrible generic layout is to use div overlays.

With the generic myspace layout you generally get a picture in the top left and then the about me section on the right with all the friends and comments below. Even when people use code to change the colours of their pages they still end up almost the same layout just with different colours and backgrounds.

Good Mypsace Coding

I feel that this is a good myspace because he hasn't just added code to change the colours of things in the page but they have completely changed the layout. This form of coding for myspace is called "Div Overlays". This completely gets rid of the gineric myspace layout that looks horrible. This kind of code isnt used much with myspace so it is nice to see somthing different and makes it stand out from the crowd.

I think the design behind this myspace is also good because the use of colours is well put together. I really like the image at the top of the page, it has been edited to look like it is stuck to the page. The only thing i would have changed on this myspace page is the colour of the box at the bottom of page. At the moment they are orange and i would have changed these to a colour that suits the image and background more, maybe like a black blue to go with the image. I don't know what colour for this with out playing with it and experimenting to find the correct colour.

Similar Design

Mark Weihberg Photography
http://www.pixelriot.pl/mwp






















I think this website has a similar feel to it as mine. I think this is because the use or orange warm colours and the use or squares. The orange colours and squares are similar to my logo and text and the squares are also alike my background pattern on my header.

I think this website does not portray their info / images as well as my website. They have used white squares as thumbnails, which you then rollover to show the thumbnail image at the top of the page. Where as all my thumbnail images are shown in the first place in the place i want them on the page. I feel this is beneficial because on their site people will have to rollover all the white square to just see the thumbnail image which is time consuming and will put a lot of people off. Also if returning viewers want to see a certain image they will have to remember roughly where the image was of go though all of them again.

The thumbnail images are also cropped images of the real thing so when you click on it you see the whole image. This means sometimes the real image is not as you expected.





















I think the use of flash on this website makes it more interactive than my website. Once you click on the image the sections of the page slide out and then the image fades in. This gives a really nice effect and makes the page look professional. Once you are on the full image page you can also roll over below the image and a box drops down with the rest of the thumbnails from the same section as the image you are on. This is nice but the drop down bit doesn't tell you that if you roll here the thumbnails will appear it just relies on the user rolling over the box.

This idea of flash pages fading in and out and sections just shrinking out is an idea i would have liked to use but i felt that due to time restraints it would be quicker and easier to produce a html page. Another reason a choose html over flash is just due it being more search engine friendly and being able to refine the site more with the coding and keywords.

MySpace Research

www.myspace.com/lalygraphics

This myspace is an online portfolio for a graphic designer. This is only part on their of their porfolio as she also has a website portfolio. I found this myspace relevant to my work as both mine and this myspace will be an online portfolio for graphics work.

In this myspace she has kept the original myspace template but changed the colour sceem and added background images to make the page lok alot more appealing. I really like the simple look and colour sceem on this page. She has kept the colour seem of the page to two colours green and white.

















To show of her work she has taken full advantage f the photo gallary in myspace. She has a full page of illustrations and graphics she has produced and they are all very welll produced. Also to show off her work well she has added alot of graphics to the main page of the profile. All down the left hand side of the profile she has her graphics, this all looks very neat and tdy but at the same time is good ecause people dont have to go into her gallery to view her work.



















The only thing i have noticed that could have been improved is the border around the grapics that are on display. The border has rounded edges and this means when saved as an image there are little white areas around the edges of the image. This could have been solved by the setting the background colour behind the graphics to the samecolour as the bacjground of the profile.


























David Hampshire Graphic Design
http://www.myspace.com/creativedesigner

This is a myspace page that is being used as a portfolio for a graphic designer. I like the way that he has layed out his work and also his interests and skills. He used the general infomation box down the left hand side very well to show case his skills and strengths. This is all very well put forward in different paragraphs explaining his diffrent strengths in different areas from illustration to print.






















Once again like the other profile above he has used the profile to add images on the page so that they are not all just with in the pictures area. I feel this is good because as soon as people view your page they will see the standard of your work with out having to click through your images.

He has used the About me section very well to sell himself with some well written paragraphs about his interests and hobbies. He has written this well to really sell himself but he has kept it at a nice length. This means people will get a good idea of his interests and background with out getting bored of reading loads and loads of information before they have even seen his work.






















Once you get inside his pictures area I think he could have improved this by simply naming the albums better and adding a highlight photo for the albums. The main album is just called my photos which could have been called my work or something. I feel this because there isn't actual many photos inside the album it is more of illustration than photographs.













The only real thing i don't like about the main profile page is the choose of font colour and also the borders around the different sections. He has used a red font and double lined blue lines, I feel these colours don't go together very well and also don't go with the rest of the page. I think for a graphic design portfolio this doesn't look very good and could have easily been improved.

Layers

Layers are a good way for quickly and easily arranging images and information. You can simply click and drag to draw a new layer and then once it is created you can just drag its width and height to adjust the size of your layers. You can also very quickly drag and drop your layers around the page to quickly move the position of the layer within your website. The other good thing is you can convert your layers into tables to save you the hassle of spliting, merging and adjusting loads of the cells in your tables. This is easy by just going to Modify >> Covert >> Layers To Tables.



















Layout View




















Layout view is very similar to layers and most of the features are virtually the same it is just a different way to produce the same kind of finish. The layout view produces across between the layers and tables you have the ability to move and place the areas like layers but the code produced is the code for tables (

Tables

Tables can easily be created within Dreamweaver and are relatively to arrange all your information and images. These tables are very familiar to tables used in most programs such as word processing and others. With these tables in Dreamweaver you can easily change the widths , heights , and merge or split cells very quickly and easily just using the property's palette. You can also add tables inside another tables and you can do this as much as you like.

Frames

Frames are used in web design and are useful for creating navigation around websites as you can use it so that your secondary frame always stays in the same. This means you do not have to re-create the navigation for every page saving you time and effort. They are also good for creating photographic gallery's using the secondary frame as your thumbnails and the main frame for your big image and all your information about the image and anything else you want to add.

The downside to frames is that they are not very good for SEO. This means search engines such as Google will find it hard to find your page. This results in your page ranking badly on search engines and you not recieving many hits on your website.

Web Site Research

www.tnop.com

I really like the graphics and the illustrations on this website. All the graphics on the website have been really well produced with nice bright colours and clean lines making the pages stand out. I did find that at first i found the web site confusing and hard to understand as there is a lot going on in the index page which makes the site look a bit cluttered. Once i figured out where all different parts on the web site where i started to have a look around the portfolio. When there i found that the nice graphics are carried on through out the web site and has done some very nice graphics for his portfolio.


















From this website I feel I have learn't that having nice bright and clean graphics can make a web site look very good and also stand out. This is because the bright colours and clean graphics attract your eye and your attention. However this is all well and good, but also over loading a page and not making it easy to understand how to navigate the site can put visitors off and make them go else where as they want to be able to browse easily.

















www.eccentris.com

This website has been produced purely using flash. The first thing I noticed about this website is the fact that it has an intro page, but the enter here link isn't every visible. This means it is hard to find unless you read the text that it is at the bottom of. Once inside the website it is very clean and interesting. The site being built in flash means that they can have a lot more interactive things than a static html website. They developed this well by incorporating sound by making an audio player on the web site. They have also used flash to its potential by having a lot of transitions or visual movements on the page.
































Here you can see a nicely made piece of user interaction. There is a tab at the top of the page called Filters that the user can click and then more tabs appear. From there the user can chose the different tabs to change the look of the website making it more appealing to to a wider audience. This also make the site more enjoyable to look at and to view.

I think there are a few downsides to the design of this website. The main thing being I feel the actual content or reason for the website isn't very easy to find meaning people just finding the website wouldn't understand very easily what the website is about. I also think the text on the website isn't very well presented as it is a light grey on a white background making the content hard to see and tiring to read. Also making the website entirely in flash makes the website not very accessible due to the restrictions with search engines and also screen readers. I think they may have added the splash page to the website so that the search engines will be able to find the html splash page to help with this restriction.

Search Engine Optimisation

I have always been interested in S.E.O ( Search Engine Optimisation ). Today i learned a few things about website code that i did not know about before this lecture. I learned that when you are titling that you should not just put the name of the company and that you should put words in that are relevant to the website. This is because if you just put the name of the company it will only find it if you type that name but not if you searched for their products.

Also i learnt about H1 ( Heading 1 ) tags. What ever you put inside the H1 tags will be the first thing the search engines look at inside you page thats not in your keywords or description to find out what the site is about. Using your H1 tags you must have the same words in the rest of your website and in your description or keywords for the search engine to determine what your website is about.

Google

We watched a documentary about Google, on how much money they make and how much information is stored on the Google databases and severs about all the searches made on Google. I found the documentary very interesting and i think it made me think more about what I sign up to on the internet and how I feel about Google and their products.

Assuming that the documentary's information is correct and unbiased, I think that a lot of the information used to sign up to things on the internet should be kept private unless it is really needed. Also the CIA where known to take also of Google's information off there databases for their own investigations. I think rather than just taking all the information I think that if governments or other high powered organizations need to look into information like this they should work with Google to gain the information.