1

Edexel btec Creative media production unit 11 12

Class Work

Fri, 16 May 2014

Content:

What is a URL? URL standing for uniform resource locater is the address of a
website. Every wed site needs a web address so that people can locate it and that
is what a URL is.
http://www.webopedia.com/TERM/U/URL.html

Who is Tim Berners-Lee? Before we had the Internet the way it is today it was
something used primarily in the army and was nowhere near as huge as it is
today. Tim Burners-Lee is that man who seen the potential the Internet held and
by crating the World Wide Web he was able to make it in to the massive archive
of sheared information that it has become. He is also a graduate of Oxford
University the owner of a knighthood and the writer of a book named weaving
the web.

What is WWW? The World Wide Web more commonly referred to as www is a
collective database made up of all public websites. It was designed by Tim
Berners-Lee in the late 1980s, boomed in to popularity in the mid 1990s and has
not stopped growing since then. In the modern day you can connect with people
around the world.
http://en.wikipedia.org/wiki/World_Wide_Web

Domain name: this is something that allows you to state claim over a realm on
the Internet
http://www.webopedia.com/

Domain extension: is what goes at the end of the URL, i.e .com, co.uk,
. Org

Top level domain names: there are the URLs that end in .com
http://en.wikipedia.org/wiki/Top-level_domain

2
nd
level domain names: this refers to domain names that rank lower like .co.uk

Internet service provider: this refers to the company that provides Internet
access
2

Web Hosting Serves: is what lets people to make their websites accessible on
the Internet

Dreamweaver: is software that allows people to make, manage and purplish
websites
http://uk.ask.com/question/what-is-dreamweaver-used-for

Paragraph: this is a collection of sentences that normally focuses on one theme

Design: this is a plan to show how something will be made

Background: this is something that is put to the back of something (image,
websites) to help develop some kind of theme or personality.

Here is an example of a website background



Font: font is to individualise the typeface of your document

Font size & colure: this can be used to give the font more of an impact

Here is an example of a font done on illustrator the size and colour of the font has
been edited

Here is an example of a font that I got of a portfolio website, see the use of colure
change to highlight important points
http://www.guillaumejuvenet.com/#project

3
Hyperlink: this will be a URL highlighted in blue that will allow someone to
enter the respective website
Here is an example of a hyperlink
http://traihadfieldanimator.blogspot.co.uk/

Style sheet: this allows you to edit things like fonts, font sizes, colours and
headings in documents

Meta tags: this is the HTML part of a URL and is used to narrow down the
purpose of the website
http://www.webopedia.com/TERM/M/meta_tag.html


Evaluation:

Today I leaned a lot about websites and the history of the internet and what it
was made for I think that this information will be valuable in the future as I move
on to creating my own website













4


Class Work

Fri, 23 May 2014

Content:
I have taken a look at some websites to fined some good and bad points about
them



http://www.guillaumejuvenet.com/#project

This is a portfolio website that someone made.

Good points: this is a good website because it shows off a level of creativity,
it is interesting, it keeps you engaged and it Is still easy to navigate without
throwing to much information at you.

Bad points: some bad points about this website are that it dose note show of
a lot of his work and even though it is visually impressive and creative I do not
feel like Im being shown the mans full ability. Also the website has a very
visual theme that will not be accessible to everyone (e.g blind people)
5




http://www.mrbottles.com/

This website is all about buying and selling antique bottles

Good points: the one good point about this website is that when you enter
the site a man will pop up and he will talk about the website, what it is for and
even offer tips on how navigate the site. This makes the website more
accessible for people who might not be able to see well or even for the people
who dont want to have to search through an otherwise confusing website.

Bad points: This website has way to much info to start of with and the type
colure is inconsistent and tends to be hard to read of the background image.
There are also to many pages and each page is filled with huge amounts of
text. This makes the site confusing to navigate and the pure use of links make
it easy to get lost.





Website Accessibility: This is all about making your website accessible for
everyone. This may mean thinking about how old the people who visit the
website are and how people with disabilitys use computers, how they interact
with the Internet and how they use your site.

6
Website Usability: This is about making your website easy to navigate, to
make sure the point of the site is clear and that it is at no point hard, confusing
or annoying to use
Website Functionality: this is just about making your website fit for purpose.




Website comparison
Here I have an image of the website Ebay and Webopedia I have gone over
the websites and highlighted parts for comparison with each other







Font size:
You can see here several examples of how Ebay can change its font size to
indicate what is important. Also as ebay is a site made for sales text tends to
get bigger with the intent to sell something like BIG BRANDS. BIG
7
SAVINGS. Webopedia on the other hand tends to use bigger text to point
out different sections of the site like LATEST TERMS and IN THE NEWS.


Font colour & background:
Ebay likes to use a basic black font on a white background were as
Webopedia uses an orange font to indicate given information and white on a
black background to indicate internal page links.

Paragraph:
Both sites use paragraphs in similar ways, they display small pockets of
information for the user. Ebay uses it to introduce people to the site without
filling the page with to much information. Webopedia has a word of the day
section where they give a brief decryption of the word in a paragraph. They
both also have hyperlinks under these paragraphs so the user can get more
information if they like. This makes big amounts of info easily accessibility
without flooding the page with unwanted text

Line break:
Unfortunately I could not fined any example of this in these two screen shots
but after clicking the LATEST TERMS link I could find this

Here after the 1
st
small paragraph there is a line brake that separates the two
paragraphs. This is used to separate the information to make it easier to
understand and more accessible

Hyperlinks:
Hyperlinks are an easy way for people to navigate and they can be hidden in
text or images. Because of this it seems these two sites have used an
excessive amount of them to help make there sites more usable.

Style sheet:
Have no example at the moment will upload one later

8
Class Work

Fri, 30 May 2014

Content:

Here I have taken a look at some more e-portfolio websites to help me get an
idea of what is and is not good when making one.

http://www.iuvo.si/mission

This is a website I found and I think this is a good representation of the kind of
site I would like to make. I like it because it is clear and easy to use; it displays
information in an easy and clear way and is easy to navigate and really
accessible. One thing I would do different is the font colour because the grey
on white is hard to read.

9

http://haiderhawie.com/walkingshadow/

Here is another website It shows a bad use of font colour; a poor display of
information and it is hard to understand the purpose of the site. I thought it
was important to think about the bad websites so I know what not to do in the
future.





















10
My website



Target Audience:
It is important to think about the kind of people that might go to my website so
that I can modify it to draw in these people. The kind of people that I hope to
bring to my website are artists, students and like-minded people who might
appreciate the stuff I put on there.


Website purpose:
The website must be a place where I can store and display all of my work. It
must be easy to navigate and images and info must be displayed well
because one of the main focuses of my site is that it will be simple for the
user.

Pages:
When the user enters the website they will start out at the index and from here
there will be some navigation options that will take them to each of the
individual pages
Here is an example of the site architecture


The 1
st
page will be an About Me page where I will introduce my self and
talk a little about the kind of things that they will find on my site.

The 2
nd
page will be the Portfolio where I am hoping to store and display all
of my own work in an easy to navigate way.

The 3
rd
page will be Class Work and from here there will be a sub navigation
bar that they can use to get to the Logo and Web Graphics pages.

The 4
th
page is the Glossary this is where people will go if they are
struggling to find their way around the site.

The 5
th
page is the Reference this is where I will put links to other sites

The 6
th
page is Contact Me here there will be a few ways for the user to
contact me.


Index

About me Portfolio Class Work Glossary Reference Contact
Me
Web
Graphics
Logo
11



Here I was looking in to the user journey to help me see how accessible the
site is and if it was easy to navigate. The way I have planned it shows it will
not take more then about 4 clicks to get from A to B to make sure that the
user would be able to navigate the site with ease.












Class Work

Fri, 6 June 2014

Content:

12
Today I have been continuing the plan of my website I started this by doing
another mind map to help me get good idea of what I want my site to be like.

After this I think I understand better how I would like my website to be. I think
the most important thing is to make it easy to navigate and to be clear on the
point of the site. I often found my self getting frustrated with sites that do not
make their purpose clear. To do this I plan on keeping it simple and focusing
on navigation and image display. It is also good to think about the font, font
size and font colour to make sure the written information is being displayed
well. It is also important to break this info down in to small chucks so the
reader is not overwhelmed.






After this thought about the layout of my site and started to draw out some
plans of how it might look.




I thought about the navigation bar being at the top so it is easy to find and of
course easy to use. Thinking back to the website architecture I knew that I
can make everything no more then 3 clicks apart.
13

After this I looked at the navigation bar being on the left side. This way it will
remain visible if the user scrolls down and is still easy to use.

In the last design I looked at a new way to display the images. A box in the
centre that would pop up when you were on the index, portfolio or class work
pages. It would display the images and have you scroll right in the box. The
idea was to make it even easier to brows the images but looking back I think it
is just extra clutter itself.







Class Work

Fri, 20 June 2014

Content:

Today I have been planning the looks of my website. To do this I have been
thinking about a good way to display my images and thinking about a banner
for the site.
14


This is the 1
st
plan I used rope to dangle the images down and I like this idea
as it looks good and is a nice way to display images. I also put my logo in the
top right hand corner, as this is where I thought it looked best.


This is my 1
st
banner idea I wanted something friendly so it would look inviting
to new people and I thought making it hand drawn would be a good way to
reflect myself in the site.

Because the border needed to be 770 X 140 I had to edit it in Photoshop. To
start with I had to colour the 2nd half in on a piece of paper then scan it in.
After this I put it on Photoshop and then blended it in. I then copy and pasted
the clouds from the left to the right and played around with them so they
looked deferent to the originals and added a black outline.


After this I feel like I could make a better one that reflects my work and me
better so I might try to make a new one.

Class Work

Fri, 27 June 2014

15
Content:

Today I have been trying to make a new banner for my website to start with I
loaded all of my images in to Photoshop and overlade them


After this I have started blending the images using a layer mask and moving
them around to try and make it look good. Doing this I realised the blending
takes away from the hand drawn look and so I made a background for the
image


I then blended all the layers (apart from the background) and used the layer
mask to blend the image and the background together.

I then altered the exposure and the vibrancy to manipulate the colour and
make them pop more.


After this I am much happier with this new banner compered to the old one. I
feel it represents me and my work much better.

Class Work

Fri, 4

July 2014

16
Content:

DPI: stands for Dots Per Inch and measures the density of each inch of an
image allowing you to alter the resolution for more or less detail. This can be
used to increase the visual standards of an image for print or decrees the file
size.


http://99designs.com/designer-blog/2013/02/26/ppi-vs-dpi-whats-the-
difference/





File types
JPG: this file type is used to compress large files in to smaller more
manageable ones making this a universal file type.

GIF: this file type is used to create short videos out of a set of images. A gif
also saves images based on the colours making for a smaller file size

TIF: this file is credited for being lossless. This means that it will not compress
or alter an image in any way.

PSD: this is Photoshops default file type and it allows you to edit the layers of
an image even after it has been saved and reopened.




After I uploaded my images to my website I realised that the contrast and
brightness where diluted by the scanning process and this was undermining
the images. To counter this I opened the images in Photoshop selected new
adjustment layer and added this as a mask so that is would be non
17
destructive. After that I scaled the brightness and contrast up to make the
colours pop more.



After this I went to Save For Web so I could shrink the file size and I brought it
down from 256 colours to 64 not only to shrink the file size but because I liked
the effect it had on the image. I then saved it as a GIF and uplouded it to my
site.










18
Evaluation

During the process of the course I have been crating a website, I started out
by learning more about web design, digital protocol, web functionality,
usability and accessibility. This helped me a lot when it came to the design of
my own website and made me think about the layout of my site a lot more. I
had to think about whether elderly or disabled people would be able access it.
As well as this I thought about making it as easy to navigate as possible but
still keeping it fit for purpose.

Having now made my site I think there are some things I would have liked to
have done differently. The paper designs that I had made did not come in
much use when I was making the site. I reference them a few times but I
would stray from those designs a lot. What I would have done differently is
make the designs focus on the usability and not the look of the site. I think this
would have been more use to me in the creation process.

I also made some site architecture and mapped the user journey. This helped
me a lot when planning the navigation of the site and I am very happy with the
usability thanks to those plans.
The first thing I created for my site was my banner. This banner was made
from a short sketch of a windmill that I coloured in with my logo in the middle.
But it was only edited slightly and it looked wrong on the site. I knew there
was more I could have done and I wanted something that reflected me and
my art better. I went back in to Photoshop and created a new banner from
scratch out of a few of my sketches. I put them together and edited them to
blend better and I am much happier with this second banner then the first.

Ones the banner was made I started making my site on weebly. I selected the
format that matched my initial designs and uploaded my banner. From here it
was a pretty fluid process and I had little trouble ones I was got use to it. I
added a slideshow on the home page a portfolio page to upload the images to
and then a page to put my class work on.

From start to finish the website did not take very long to make and I tribute
this to having done a lot of planning and preparation. For this reason there if
nothing I would have changed about making the site I would have just fleshed
out the planning stages as I think this would have helped make a better site.