Tag Archives: technology

Evaluation of Project – Illumina

Standard

For this project we worked in groups.

I was working with Katie Waldock, Clare Haldon and Mark Smith.

As with any team, we each had individual strengths and we tried to utilise this diversity.

My skills lie mainly in design, project conception and testing and so my input fell mainly in the inception stages. as we designed the layout and content of the page, and at the end, when the site required rigorous testing in multiple browsers. I worked in the meantime creating some of the animated Gifs.

Mark is a great organiser and pulled together the folder required for the brief, locating all the information required and setting it out coherently. He also produced some of the graphics, the logo and the About page.

Clare’s expertise lies in Illustrator and so we turned to her for the page’s main graphical layout. She produced the larger vector graphics which formed the basis of our page.

Katie is the coder of the group, having worked in programming previously. She coded the website using Dreamweaver, pulling together everything created by the group.

Our initial research led us to look at various sites. One which stood out was Ben the Bodyguard.

We were impressed by the way the figure appears to walk down the street as the page is scrolled. In face it remains in the middle of the screen, but the impression was one we wanted to use in our website.

After some discussion, we decided to us a tall building, with a glass elevator on the front. We would place a figure in the elevator and as the page scrolled down, the lift would appear to descend the building.

Clare got to work making the building and lift in Illustrator.

building-illuminaOur project required us to produce some animation, so we decided to decorate the building with neon signs, which Mark and I made in Photoshop, animating them into gifs. I produced the clickable signs (the ones which let to other pages)

about-us

Location

Contact

 

and Mark made the static signs.

lips_neon_sign_110-A06-A

neon-cup

neon-girl

only-god-forgives-neonposter

we're-open-neon

In the meantime, Katie produced a couple of animations for two of the windows:

frame-party-window

frame-spy-window

and Clare built a taxi and helicopter for a “spy-getaway” animation we wanted to make to start and finish the page experience.

final-taxihelicopter-animation

 

Mark put a folder together of all the administrative work we needed and made an illuminated sign for the page.

illumina-logo-neon-with-stars_final

 

Gradually, the pieces were coming together and it was mainly down to Katie to write the code and bring it all together.

Owing to illness and work commitments, my input througouht the project was minimal, so I tried to redeem myself a little by testing the site in several browser and offering constructive feedback.

With browsers differing so much in the way they display pages, we found it very difficult to present a website that worked in every one.

The best we found was Safari, which seemed to have fewer glitches than the others. firefox and chrome both had display problems, rendering the whole image too large and off to the right of the page.

The secondary pages, which Mark put together, mostly displayed well, so it was the large images and animations which were causing problems in the web browsers.

The final piece can be seen here.

 

 

 

Advertisements

Legal and Ethical Issues in Web Design

Standard

Legal and Ethical Issues in Web Design

WAI Guidelines:

The World Wide Web Consortium (W3C)’s Web Accessibility Initiative (WAI) is an effort to improve the accessibility of the World Wide Web (WWW or Web) for people with disabilities. People with disabilities may encounter difficulties when using computers generally, but also on the Web. Since people with disabilities often require non-standard devices and browsers, making websites more accessible also benefits a wide range of user agents and devices, including mobile devices, which have limited resources.

Source: http://en.wikipedia.org/wiki/Web_Accessibility_Initiative

 

Copyright and the Internet:

Online copyright infringement involves the wrongful copying of something in an online context. In the UK, the law of copyright is set out in the Copyright, Designs and Patents Act 1988. The key issue is usually whether what is taken is a “substantial” copy of the original work, which can be measured in terms of quality, as well as quantity. In order to qualify for copyright protection under UK law, a work (which can include a digital work such as a web page) has to be original and to comprise a degree of labour, skill or judgment.

Source: http://www.adlexsolicitors.co.uk/online-copyright-infringement.htm

 

EU Cookie Law:

The Cookie Law is a new piece of privacy legislation that requires websites to obtain consent from visitors to store or retrieve any information on a computer or any other web connected device, like a smartphone or tablet.

 

It has been designed to protect online privacy, by making consumers aware of how information about them is collected by websites, and enable them to choose whether or not they want to allow it to take place.

 

It started as an EU Directive that was adopted by all EU countries on May 26th 2011.  At the same time the UK updated its Privacy and Electronic Communications Regulations, which brought the EU Directive it into UK law.

 

There was a one year grace period in the UK, which ran out in May 2012.

 

Each EU member state has done or is doing the same thing. Although they all have their own approach and interpretation, the basic requirements of the directive remain the same.

Source: http://www.cookielaw.org/the-cookie-law.aspx

 

New Copyright Law in the UK

The Enterprise and Regulatory Reform Act was passed by Parliament in April 2013.

Photographs or other creative works can be used without the owners’ explicit permission as long as a “diligent search” has taken place.

For the first time, these “orphan works” – as they are known – can be licensed for commercial or non-commercial use.

However, in order to do so, the company in question would have to prove to an independent body that a “diligent search” to find and approach the copyright holder had taken place without success.

If the body is satisfied there has been a sufficient search, it would then allow the company to pay a license fee to use the material.

This money is then to be held by the independent body, and can be claimed by the rights holder should they come forward at a later date.

Source: http://www.bbc.co.uk/news/technology-22337406

 

 

 

 

Website Production – Needle Exchange

Standard

My prototype website, “Needle Exchange” is complete.

 

HOME

My Home Page has links to YouTube videos. I wanted to put the videos on the home page as this is unusual and it creates a lively, dynamic site right from the first landing.

My navigation buttons are at the bottom and I spent a long time making them animate nicely when pressed.

The page also has three blocks at the top, which do not currently link anywhere, but do have the potential to link to other parts of the site, as it grown.

I used cheeky phrases, coupled with cute pastel colouring to provide interest and irony.

 

Alternative Knitting Resource How To Knit

PATTERNS

The next page I created is the pattern page.

I needed to produce an anchor and back to top links, so I was forced to set out the page differently to how I would prefer.

I wanted to make the section boxes on the patterns page link to new pages, each featuring patterns for that section, but this would not provide me with the need for an anchor link and back to top link, so I put everything on the same page, floated the navigation at the bottom of the page (which I do not like) and back to top links at each section.

As a result, the page does not look as I would prefer it, but it does meet the brief set in the project.

patterns1 patterns3 patterns2

At the top. I made a slider showing books. These link to Amazon.

 

CONTACT

The final page I created is the contact page.

This is a working contact page, which will send straight to my email. I have added an option to attach a file, so that users could submit content for the page.

I realize there are security issues with this, but I have not at this point addressed them.

 

Submit Alternative Knitting Patterns Comment and Contact

 

I have added meta tags to the page, describing the content and created a favicon using online software:

favicon

 

There is room to expand the site to include a “forum” and “projects” page, which I will do with the next project.

Website Development

Standard

For my latest project, I am creating a website called The Needle Exchange which is a knitting site for the 21st century featuring alternative, quirky and unusual knitting patterns, how-to videos and a forum for users to interact.

So far, all I have done with the design is plan a home page.

Needle Exchange home

My intention at the moment is to have videos on the home page instructing visitors on the basics of knitting, for those who have never done it before. The “How-To Videos” button will open a page which also has several other videos showing more complex techniques.

The “Home” “Forum and “Contact” buttons are self explanatory, whilst the “Patterns” button will link to a page showing sections of content, navigating the visitor to actual free knitting patterns. (Not knitted doilies, more like handcuffs or vampire plushies.)

I have used a simple, crisp layout and straightforward logo/header in order to make navigation easy. The site will feature a wide range of themes in terms of content, so i wanted to create an interface which does not clash with any of this content.

My decision to place the navigation buttons in the footer is unconventional but I feel it will work (I have seen it done successfully elsewhere) as it is clear and obvious. I am making an “alternative” themed site, so some breaking of “rules” is, I believe in order.

Website Evaluation

Standard

 Good website:

Hugh Fox: http://hughfox.co.uk

The reason I find this site to be an example of good design is because of the following:

The site is well laid-out and it is easy to navigate around.

The images are clear and of a good quality. Clicking on an image brings up an enlargement. This is excellent especially on a photographer’s website.

The navigation bar is clear and concise. It is easy to find everything on the site, despite the placement being in the footer (an unusual choice, but not one which causes any difficulty.

All the links work and there is nothing distracting on the site.

Hugh1

Hugh2

 

Bad Website:

Studio 27: http://www.studio27.co.uk/home/

The reason I find this site a bad example of design is because of the following:

Music plays on every page opened, even after turning off. Comes on again whenever a new page is reached. Music is really annoying, especially this music.

The page is tiny, all the images are tiny and it is all written in Flash, which is now fairly obsolete as it doesn’t run properly on many platforms.

None of the images is really big enough to see and they don’t grow on clicking/ This could have been achieved easily in flash and can be done without as well.

The navigation bar animation in my opinion is rather distracting.

The site looks dated and unprofessional, which is a shame as the company have a good reputation. As a site it doesn’t instill confidence. It is very basic and doesn’t appear to have been updated in a while.

The Myspace link works, (as do all the links) but the last entry on the MySpace page was 3 years ago, so that clearly hasn’t been updated in a while either.

Time for a redesign, so I’m choosing this as my redesign site.

Studio1Studio2

Photoshop Tutorial – Selection Techniques

Standard

Selection Techniques

Today I have been learning about the different selection techniques available in Photoshop.

1. Magic Wand Tool

 In CS6, the Magic Wand Tool looks like this:

To Select an area (works best on an image with little or no background:)
* Click on part of the background. This should select all the background, but you may need to alter the tolerance to ensure all is selected. You can delete the background at this stage if you wish, or…

* Click > Inverse to select the image, instead of the background.

* Copy this image and paste into  another file (eg: on another background.)

Here are some I did earlier:

This image was created by selecting the Duck from this file:

The Frying Pan was selected using another selection tool:

2. Magnetic Lasso

 

In CS6 the Magnetic Lasso looks like this:

* Choose the Lasso icon and click Magnetic Lasso Tool.

* This tool also works best where there is little or no background, or where the contrast between the image you want to select and the background is quite sharp.

* Use the tool to draw round the image, carefully. There is a tiny arrow which indicates where the selection will take place and the image is selected by a series of “marching ants.” These disappear when the selection is complete (the line must join up with itself.)

* This image can be copied and pasted onto another image or background, as I have done with my practice above.

 Finally, the clock was selected using:

3. Pen Tool

 In CS6 the Pen Tool looks like this:

* Select the Pen Icon and choose Pen Tool.

* To use the Pen Tool, you need to get used to Bezier Curves.

* Click on a point just inside the perimeter of your selection. Then click another point a little further along and drag a line outwards.

* Use the point of this line to adjust the curve of your selection line.

It looks a little like this:

* It takes some practice, but it is a very accurate way to select an image, especially if there is a complicated background to extract from.

4. Refine Edges

Sometimes you may want to select an image with a very detailed outline, like this:

This would lake a lot of very difficult cutting out if I were to use any of the methods above, but there is an easier way: Refine Edges.

* First, Select the image with the Lasso tool. Do not worry about getting it exact around the edges:

* Now click on the Refine Edges button and ensure you select On Layers, so you can see what you’re doing.

* You can brush around the edges of your image and the Refine tool will select the fine detail for you.

* As with other methods, the sharper the contract with the background, the better the image selection.

* In may be necessary to use a variety of selection tools in order to get the image selection just right.

5. Eraser Tool

In CS6, the eraser tool looks like this:

I looked at the eraser tool as a way of selecting part of an image. The tool can be used to remove part of an image, leaving another image underneath or adjacent to it.

An example could be layering two images on top of the other and using the eraser to remove some of the upper image, revealing some of the image beneath, as I have done here:

I used the eraser tool to remove some of the wave layer, revealing the seafront and sky underneath.

I’m not entirely happy with the results so far and would like to figure out how to make the wave more prominent, without a harsh edge. (I have used Multiply to blend the layers, but I don’t think it looks right.)

I need to work on the image some more.

References:

Photoshop Icons

Bezier Curves