Sound

I have been doing extensive research for this blog and reading as much as I can. I was researching another topic entirely and came across this site and decided to then postpone that topic I was on and quickly write my thoughts on this due to this annoying site inspiring me.

Sound interactivity on a site. It can be good and bad. In the very bad situations is that most people like to listen to their own music while on their computers and so to suddenly open up a site that then has interactive music on start up can be nothing short of annoying. What can we worse is if it cannot be turned off, this puts me right off if I cannot control it personally and I don't bother even looking at the site any further and I close it straight away.

As I said earlier, while researching, I actually opened up multiple tabs with sites I was going to read but was suddenly assaulted by some random woman talking to me from my computer. I had to first find out which site it was coming from, then find out how to turn her off. As I scrolled in search of controls, this imagery of a talking woman followed me down the page. Now im frustrated trying to discover the controls, as they are initially hidden, they only appear on rollover of the actual image.

Thank goodness their were controls to turn her off otherwise as I said I would have either muted, but then I lose my own music, if the site somehow seemed to grab my attention but by this time I doubt as I just want her to stop talking, I close it completely.

http://www.brandidentityguru.com/

Static and Fluid Web Layouts

On designing a site the question of static or fluid comes into question for the layout and how monitor size will affect your design and final layout.

How a fluid layout or now better known as a dynalmic layout, works is that the site is measured in percent according to size of display so it can modify and adapt to how a viewer needs it to be.A fluid layout will shrink and grow to fit the display window. The content then adapts with it and text on lines becomes longer or shorter and the content is very much more manageable for the user to how they want it.

An example of fluid layout is http://en.wikipedia.org/wiki/Main_Page

A static layout uses a fixed pixel measurement for placement of the sites content. What this is, if the user had to make the browser window smaller, you view less content and you will have to scroll either up or down or across more to view the whole site and all of its content.

An example of a static site is http://www.pigsback.com/Pages/3/5/9.aspx?pbq=1268%2c1268%2cHP

Interactivity

http://www.adidas.com/uk/homepage.asp

The home page is very full. It is all divided into different shaped blocks that roll out when scrolled over to give more details. They have good continuity through font and colour. It is very full and has alot of action good images for their sub sections.

The home page is very full. It is all divided into different shaped blocks that roll out when scrolled over to give more details. They have good continuity through font and colour. It is very full and has a lot of action good images for their sub sections.

This is however a very big website and takes quite a lot of time to navigate and load, to where you would like to look.

The whole site is very sensitive to mouse movement, it doesn't have a liberal rollover area on clickable items as it is a drop out menu, and it often disappears quite quickly and easily.

It is very clearly labeled in its sub sections and it uses a lot of clean white space in their frames to block everything.

There is a section where by you can watch workout video. This then gets you active and wanting their clothes to work out in. This range is very stylish and trendy. They are also extremely fashionable as Adidas like every other chimerical brand has now affiliated themselves to a run way designer to their line. Adidas has affiliated itself to the very popular and renowned designer Stella McCartney This is sure to inspire any lady looking at this range and it sure impresses me.

Additionally they then have an interactive area where you can develop your own shoes and sporting kit for your team. From personalising your shoe fit to colour and design of the show and entire outfit.

Definitely have some time on your hands if you wish to have a proper look through this website as it takes time.

Small Businesses

There basic layout is based around a template which allows for constant structure and continuity through their pages. As this is a small business you get the impression of personalisation in their work and attitude that the site exudes. From their hand written tags placed around the site to their young approach in colour and terminology in their wording of their placed text throughout the site.

I like the feel and design of this site and it appeals to me. They offer a wide variety of services that are all encompassed under the web design umbrella with easy navigation and layout to choose and find the appropriate services you require.

One criticism I would have is in their layout they have a double design in their menu function and in my opinion I don't think it is necessary to have the entire menu option top and bottom, often you only find a small footer on a site and it has for example, home, contact us and copyright info. I think it takes up to make space on the page and you are never scrolling for very long, that it would take alot of effort to scroll back to the top to navigate elsewhere to require the need for a 2nd complete menu function in the footer.
http://adaptd.com/

Navigation

Last year we had to design a website and this site in particular intrigued me and I like it alot. Her colours, style and in paticular her unique navigation, or what she had.

I have not looked at this site for about a year - so with that I can see she has modified and upgraded her site, but she still has the basic concept of her flow navigation but now with the additon of actual navigational buttons which allows you to direct yourself now. What she had before was that each page automaticly linked to each other and you had no control to direct yourself, to some this was bad, as you had to go through a few pages to get to say her contact info which is what you may have been looking for all along, but for me, who just stumbled upon it it gave me a chance to view all her work and creativity in the design and layout of the site whether I wanted to or not.

http://melissahie.com/

Target Audience

When designing your site one of the first things you have to think about is who you are aiming it at. The target audience. This is to help create the purpose and feel of your website and also to then appropriate your site to your users for what you are offering.

There are too parts to doing this successfully. You need to define the purpose of your site and then you are able to establish audience and define the goals for you and the user.

To identify your audience you are identifying demographics, such as gender, location, age, income, education. Unless you have a clear definition of your audience you will have a hard time directing your site and for it to be successful.

I would like to show you two examples. In my opinion the target audience is different but these two companies offer the same services but I think their approach is very different.

http://www.o2online.ie/wps/wcm/connect/O2/Home/
http://www.meteor.ie/

I fine that 02 is a very clean cut simple website. They are very specific in what they are offering and I find they give off a more professional look due to in my opinion being very corporate orientated as they widely cater for businesses. They do still offer services for the average man in the street but on first impressions for me the appeal of the website differs.

The meteor site I find is very fresh and colourful. Alot more eye catching in the orange as their main colour scheme. On first look over of the site - they do not seem to offer business packages, so therefor they are not having to cater for the wide audience of o2 even though they offer the same services, but again its to different audiences. So on the meteor site the first thing I saw was a image and graphic text offering savings. So already I have seen something of interest as everyone likes saving money and their layout is in a table formation and easy to read, follow and navigate.

I personally am a meteor customer as they were able to offer me something none of the other networks could, so they were my choice due to product, but as a student, that's whats right for me.

Fonts

Fonts on a web page are a key element to its success. There are 3 very important rules to follow when choosing a font
1. Easy to read on screen.
2. Your users accessibility to that font.
3. Also for it to fit the design of your site.

The difference in a fonts readability lies in the serif. For print people use Serif fonts and for example the most common being Times New Roman. For web we use Sans Serif Fonts, example of those which are the most widely used are Ariel, Verdana or Helvetica.

What you also have to consider is the accessibility to your user of the font you decide on. If you design your site with a specific font and its not of generic availability to a windows or mac user, it will get replaced by a standard font and you will lose the edge you had from your unique font in your design. The option is to place your text as a graphic but then you run risks of it not being editable and having to keep replacing your graphic.

When sourcing a font to fit your design, as mentioned above, the thing to consider is how to output it if its not the common ones. Input as a graphic is an option, but be aware that file size increases and harder to make your changes.

this is an example of printed page
http://www.geocities.com/ravensteadhousehold/housetentext.jpg

this is an example of web text
http://en.wikipedia.org/wiki/Isaac_Leffler

File Formats for the web - gif and jpeg

These two file formats are your most important tool for the web and a designer needs to know which to use and when.

GIF:

The function of a gif – Gif is the most popular format for the web. It is able to compress large areas of colour and it will be the most important to use for all your graphics except photographs. Gif can utilise a maximum of 256 colours, but for the purpose of reducing your file size, you need to limit you colour palette. What a gif does is makes your image as small as possible without losing any of its important components of data. Gif should be your primary file format when using a restricted colour palette, so you can use it for logos, line drawings and icons. It will not unfortunately give enough credit to a well taken photo.

JPEG:

The function of a jpeg – due its extensive range to support well over the 256 colours of a gif. It should primarily be used for photography work. What is very important to note though is that because of the formatting in a jpeg, some jargon, I don’t think I can re-explain adequitly to anyone reading this, is that once you save your work as a jpeg, you cannot get your original back as it will have now been altered indefinitely – so please make sure to always have an original saved. So, jpeg’s are to be used for images that will lose quality if reduced to anything less than 256 colours.

"Right and wrong do not exist in graphic design. There is only effective and non-effective communication."
Peter Bilak - Illegibility

Colour Deficiency

The most common problem in colour on the web is for people who have visual impairments for example colour blindness. The most common form of colour blindness is not being able to distinguish red from green which occurs in 99% of the cases. The other forms of colour blindness is Anomalous Trichromat. This is where you have deficiency in one of the main colours. It can be reduced red which is called Protanomaly, reduced green called Deuteranomaly and reduced blue called Tritanomaly.

Here are examples of my own logo in colour deficient views.

Reduced Green Sensitivity

Reduced Blue Sensitivity




Reduced Red Sensitivity