Social Icons

I have drawn and designed some sample social icons. I have just made them as drafts, to improve on and develop into my own unique social icons for my portfolio website. So far i have kept the ideas very board trying numerous methods and design techniques creating these simple mock up ideas which will be the starting point for making some new icons of my own. So far I have found that social icons stick to a simple but effective approach with little details that adapt to there specific genre or criteria.

Pit and Pendulum Development Evaluation

I have spent some time beta testing my website and being critical on what improvements could be made. I started by making a list of points I wanted to change to make the website look and function better. I added a copyright protection to the home page to protect the content, but also make it more professional looking and functional. I also added a Facebook social icon with working link to the contact page to give an extra feature for the social side of the website. Giving the browser that extra information. The last tweak I made was deleting the line of coding that made the links change a purple colour after use. Overall after making these minor changes I believe it has made it overall look and work better. The final change was organising all the files and documents making it easier in the future for further adjustments if needed. The finalisation of the website included me checking it on Internet explorer, Google chrome, and Firefox and validated it on W3schools.

Diesel website

I like this site for its bright colours and originality. The bright colours and bold imagery doesn't clash but in fact complements each other. This is a flash based website and one of the most interactive sites I have visited. It is a well structured site with multiple layers with imagery that interacts to the mouse crusor. Each image on the comic strip style page interacts differently either expanding across the page to overlap other parts or changing all together. Overall this site works well and not only fits the comic/ super hero style design but uniquely fits the criteria of the diesel clothing line. Below is a series of screenshots from the website and some annotations.

The main homepage










Below is the side panel that slides across for an alternative navigation.

Parallax scrolling with Html5 and css3

The method is that each panel has a fixed width and height , and contains between six and 12 layers. A layer is either a transparent PNG (larger than the panel) or a speech bubble. The movement of the mouse moves the layer on both X and Y axis with a jquery easing effect, according to speed and direction parameters. The parallax effect is triggered by each layer having different parameters.
Technique
1. In dreamweaver I created a HTML5 page and started by creating an area to fill with multiple background images. For this I made a simple div container.
code:

id="scroll"> box

2. Then I set the style.
.parallax {
width:400px;
height:180px;
padding:10px 10px 10px 10px
background-colour:#a0e0ff;
background-image:url (tree.png),url(ground.png),url(clouds.png),url(sky.png);

3.The finishing styling to the div.
background-position:0 0, 0 0, 0 0, 0 0;
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x,
}


4.The javascript.
< script type="text/ javascript">
var clouds_x =0;
var ground_x =0;
var tree_x=0;
function animate(){
clouds_x = clouds_x - . 2;
tree_x = tree_x - .7;
ground_x = ground_x - .5;

5.Final code
Document .getElementById
(' scroll').style.
background Position =
tree_x+'px 0, '+ground_x+'px 0,
'+ clouds_x+'px 0, 0 0';
t= set Time out ('animate() ' , 10);
}
animate();

Web design- creative to master the web(magazine)

This is a magazine I just recently bought that gave me a lot of knowledge and inspired new ideas. It includes lots of techniques and useful tutorials. There is specific sections that have helped me to create some useful additions to my websites. Also trying out furhter examples and making prototypes. Looking specifically into the HTML5 tags and CSS3. This magazine is more a text book of web design. It has helped me progress into this field and gain a better understanding.

Portfolio - Pieoneers

This website is a portfolio website and is good but has its faults. As a few of the links don't link to the correct pages. With some of the pages having to be refreshed. To solve the problem in some cases to recover the contents. The reason I wanted to write about this site was because of the bright colours and bold illustrations. I loved the use of hand drawn bright exstravaggent imagery. This not only looks good but sells the sight and makes it stand out from the rest. I would like to give my website this Unique selling point, whilst showing my own design flare and creating a website that's fits the criteria and meets the goals of the audience. Below is the home page with the illustration that drew me to the website.

Claire Coullon-portfolio site

This website is a simple/subtle portfolio website with some complex functions. The graphics are smooth and subtle having a perfect flow throughout the website whilst the colours complement the design and make the images stand out. The main homepage consists of a simple structured layout with the main focus a sliding Jquery gallery that discreetly changes image every few seconds. The other thing I like about the page is the block toolbar at the top that is made up of five blocks each with a title. Interaction with the set of sub links makes them fade into existence to allow you to navigate through the site more precisely. This is done with a simple image with downwards arrow key implying the box has more to reveal too the browser. Throughout the other pages the structure sticks to the theme of the homepage alternating the image slider for the specific pages content, most of the time with a photo/ illustration to the left with a caption describing it to the right. I really like the graphics behind this site and the fact it captures simplicity whilst being effective visually and fitting the correct criteria of its market audience.