Sunday, 22 May 2011
Interactive Finished
Wednesday, 11 May 2011
Typography
Typography: The art of arrangemant, style, appearance and printing of type and typefaces.
This week we were looking at Typography and how it is an essential part within web design. We immediately found out that there are a numbar of problems for web typography. It has to work accros different computer platforms as well as screen sizes, the web designer must understand issues and address them, maintain some kind of control, line length, number of lines and font sizes. These are all things that need to be taken into consideration when creating a website.
We were then given a list of typography designers, from this i chose to do some research on Paul Baker. While looking through his website, i came accross alot of the work that he does as well as awards that he's won and some of the high end clients that he has worked for, Yale University Press, Los Angeles County Museum of Art and Caxton Club of Chicago to name a few. i also found a very useful section on Setting Type which gave an overview of typography including Letter Spacing, Word Spacing, Leading, Type Selection and Formatting I found this all very useless when i came to creating my five page website.
http://www.pbtweb.com/index.html here is the link to the website.
Going back to the Seminar we found out about different font styles and some the arew widely used across the web which would help us choose a font which would meet the criteria for different systems and screen sizes.
Serif Fonts: Serif's are non-structural detailson the ends of some of the strokesthat make up letters and symbols. Commonly available Serif fonts, Times New Roman and Georgia.
Sans-Serif Fonts: Simply a font that doesn't have serif's. Sans-serif fonts are more common for on screen text, particularly for headlines and sub-heads. Coomnly available Sans-Serif fonts, Arial, Helvetica, Verdana, Tahoma anf Trebuchet MS.
Font Size and Spacing
It used to be that font sizes were specified within the HTML markup of a web page. Now, XHTML requires “well formed” markup, so font sizes and line heights are specified within the CSS. In CSS, font sizes can be specified using a number of different measurement units. All of these units allow the user to change the font size in their browser settings, if they so wish. In addition, some of these units are designed to ‘scale’ the whole page (in practice, the width of the column containing the text) if the user changes the font size.
CSS Syntax Measurement Unit
px pixels
pt points
pc picas
mm millimetres
cm centimetres
in inches
% percent
em a unit of measure that is relative to the width of the letter in that typeface
ex same principle as em, but based on the height of the lowercase letter in the given typeface
Some things to remember:
Don't mix too many fonts in a webpage.
Generally, two fonts and suffiecient in any design.
Don't forget you can use typeface variations (bold, italic, etc) for different content areas.
Try designing a page that use only one font for all text areas.
You can experiment with font colour and hierachy too.
This week we were looking at Typography and how it is an essential part within web design. We immediately found out that there are a numbar of problems for web typography. It has to work accros different computer platforms as well as screen sizes, the web designer must understand issues and address them, maintain some kind of control, line length, number of lines and font sizes. These are all things that need to be taken into consideration when creating a website.
We were then given a list of typography designers, from this i chose to do some research on Paul Baker. While looking through his website, i came accross alot of the work that he does as well as awards that he's won and some of the high end clients that he has worked for, Yale University Press, Los Angeles County Museum of Art and Caxton Club of Chicago to name a few. i also found a very useful section on Setting Type which gave an overview of typography including Letter Spacing, Word Spacing, Leading, Type Selection and Formatting I found this all very useless when i came to creating my five page website.
http://www.pbtweb.com/index.html here is the link to the website.
Going back to the Seminar we found out about different font styles and some the arew widely used across the web which would help us choose a font which would meet the criteria for different systems and screen sizes.
Serif Fonts: Serif's are non-structural detailson the ends of some of the strokesthat make up letters and symbols. Commonly available Serif fonts, Times New Roman and Georgia.
Sans-Serif Fonts: Simply a font that doesn't have serif's. Sans-serif fonts are more common for on screen text, particularly for headlines and sub-heads. Coomnly available Sans-Serif fonts, Arial, Helvetica, Verdana, Tahoma anf Trebuchet MS.
Font Size and Spacing
It used to be that font sizes were specified within the HTML markup of a web page. Now, XHTML requires “well formed” markup, so font sizes and line heights are specified within the CSS. In CSS, font sizes can be specified using a number of different measurement units. All of these units allow the user to change the font size in their browser settings, if they so wish. In addition, some of these units are designed to ‘scale’ the whole page (in practice, the width of the column containing the text) if the user changes the font size.
CSS Syntax Measurement Unit
px pixels
pt points
pc picas
mm millimetres
cm centimetres
in inches
% percent
em a unit of measure that is relative to the width of the letter in that typeface
ex same principle as em, but based on the height of the lowercase letter in the given typeface
Some things to remember:
Don't mix too many fonts in a webpage.
Generally, two fonts and suffiecient in any design.
Don't forget you can use typeface variations (bold, italic, etc) for different content areas.
Try designing a page that use only one font for all text areas.
You can experiment with font colour and hierachy too.
Thursday, 28 April 2011
Interactive: Optimisation.
Today in Shaun's seminar we were looking at optimisation and how it is useful in decreasing image size to help them load quicker for websites. He showed us how you can decrease the image size as well as the resoultion and quality and still have an acceptable image for your website but ten times smaller. The way to do this is to find your desired image and open it in photoshop, from here go file save for web and devices. A box will pop up and it is here that you alter the image.
This box will allow you to edit the file type of which the image is saved as, e.g. jpg. gif. or png. As well as this you can change the quality ranging from 0-100 and also the blur 0-2, this all contributes to lowering the image size. Jpg. is the standard file type used when altering images gif. and png. work on a basis of 256 colours which many images have alot more than, but we were told gif. is very useful for images such as banners on websites and png. is good for photographs and sometimes it can increase the quality.
We were told to pratice and have a play with our own images, particular ones with a high amount of pixels, over 1000x1000 and with a dpi of 300, i tried out with a few images and these were the results.
- Always use “save for web and devices” in Photoshop, you can see the image size in KB’s at the bottom left corner
- If the image has many colours or complex gradients then save as JPG
- When saving as JPG keep lowering the quality from 100% downwards until it looks satisfactory, never save at 100% quality as this uses many KB’s
- Cut excess bits of images off, these only waste KB’s
- If transparency is needed then you will have to use a PNG
- If the transparent image uses a handful of colours save it as a PNG-8 bit
- If the transparent image uses many colours or gradients save it as a PNG-24 bit, see what it looks like as a PNG-8 bit too just in case it looks ok
- If an image has a lot of repeating colour then a PNG might be the best option (example: a large background with a solid colour). The code for PNG images can say commands such as “50 lines of white pixels” saving masses of space, a JPG for example works on 8×8 blocks of pixels even if the whole image is one solid colour
- If an image is small then a GIF might be the best option to reduce size, see how it looks with different amounts of colours too (less colours = smaller image size)
- If an image has two sections that are very different then treat each image separately, you can pick the best optimisation techniques for both
- Sticking to one colour scheme helps reduce the complexity of each image, for example if an image had only shades of blue and black then it would be easy to optimise, if an image had blue, black, white, red and green then it’ll need to be a JPG and would be larger in KB size
- An image with a simple palette (few colours) can be saved as a PNG-8 or GIF and will probably still look great to use.
From what we have learnt today it is clear that when creating a website it is crucial to minimize all images to allow for faster loading times, but without giving up to much quality,
This box will allow you to edit the file type of which the image is saved as, e.g. jpg. gif. or png. As well as this you can change the quality ranging from 0-100 and also the blur 0-2, this all contributes to lowering the image size. Jpg. is the standard file type used when altering images gif. and png. work on a basis of 256 colours which many images have alot more than, but we were told gif. is very useful for images such as banners on websites and png. is good for photographs and sometimes it can increase the quality.
We were told to pratice and have a play with our own images, particular ones with a high amount of pixels, over 1000x1000 and with a dpi of 300, i tried out with a few images and these were the results.
This was the first image i chose to alter to try and reduce the file size, this original is 1782x1181 pixels and 300dpi its file size is a massive 297KB, but by using the tips we learnt in the lesson i was able to reduce this to this second image which looks pratically identical but it has 428x284 pixels 72dpi and by also reducing the quality of the image to 50 its file size now is 65KB a decrease of over 200KB.
These were some useful optimization tips i found on http://www.junowebdesign.com/web-design/image-optimisation-tutorial.
- You should make each website small in overall size but still look good, if a website loads faster you will get more visitors sticking on the site and higher conversions- Always use “save for web and devices” in Photoshop, you can see the image size in KB’s at the bottom left corner
- If the image has many colours or complex gradients then save as JPG
- When saving as JPG keep lowering the quality from 100% downwards until it looks satisfactory, never save at 100% quality as this uses many KB’s
- Cut excess bits of images off, these only waste KB’s
- If transparency is needed then you will have to use a PNG
- If the transparent image uses a handful of colours save it as a PNG-8 bit
- If the transparent image uses many colours or gradients save it as a PNG-24 bit, see what it looks like as a PNG-8 bit too just in case it looks ok
- If an image has a lot of repeating colour then a PNG might be the best option (example: a large background with a solid colour). The code for PNG images can say commands such as “50 lines of white pixels” saving masses of space, a JPG for example works on 8×8 blocks of pixels even if the whole image is one solid colour
- If an image is small then a GIF might be the best option to reduce size, see how it looks with different amounts of colours too (less colours = smaller image size)
- If an image has two sections that are very different then treat each image separately, you can pick the best optimisation techniques for both
- Sticking to one colour scheme helps reduce the complexity of each image, for example if an image had only shades of blue and black then it would be easy to optimise, if an image had blue, black, white, red and green then it’ll need to be a JPG and would be larger in KB size
- An image with a simple palette (few colours) can be saved as a PNG-8 or GIF and will probably still look great to use.
From what we have learnt today it is clear that when creating a website it is crucial to minimize all images to allow for faster loading times, but without giving up to much quality,
Wireframe
This week we had to come up with a wire frame relating to our website showing the layout and what it would include. For my website i'm going to have and series of pages that talk about me and my work where i get my inspiration and what i hope to achieve. For the five pages i will have to work split up as follows, a title pages with a taste of all of my work and a bit about myself, from here i will have a link to Moving image, Animation, Interactive, and then i final page about what i like etc. here is an image of how i plan to layout my starting page.
Friday, 22 April 2011
Moodboard
We were told to create a moodboard representing ourselves, it was suppose to show what we like where we find our inspiration and it should reflect us. This is my moodboard and it includes two of my favourite directors, Martin Scorsese and Quentin Tarantino, the reason that i have included them is because the both really inspire me, i love the technical class of Scorsese's films they are beautifully shot and always look great. The reason that Tarantino inspires me is because he has a very different style to many other director's he does things the way he wants and always creates films that make me not just enjoy the film but enjoy the dialogue the shots and the presentation.
I have also included captions from two of my favourite films Old Boy and The Deer Hunter, both these films have had an impact on me i found each very gripping in their own way and teamed with some amazing acting and beautiful shots they really make me want to be a director. The moodboard shows clearly that am interested in film, and the reason for the background the coloured pencils is because they stand out and are different and it seemed fitting to include because for me they represent how i like to go about my work.
Interactive: Digital Portfolio
For the first seminar of the interactive pathway we looked at digital portfolio's what we should include and what we should'nt as well as ways to improve our own portfolio. For the interactive pathway we would be creating a five page interactive website using Adobe Dreamweaver. We were asked to show our own work, infulences and what inspires us. So this first seminar was a starting point for our project.
The portfolio is as much a process as it is a product. It should be considered a “living document” that evolves as you do. To that end it should be constantly revised and updated. It is not a ‘do once and forget’ item to be shelved once completed. It should evolve as you do……so are you..
We were told that over the next five weeks we would look at ways to improve our own portfolio it was just creating but learning as well, their were many things that we needed to consider when creating our portfolio e.g.
AUDIENCE? think about…What is your target audience? Research this…
AIMS? What do you hope to achieve?
CLARITY? Keep it simple and legible…
TONE? Is it factual…editorial or casual..you choose…
CONTACT? Your contact details…
MEDIA? What is your chosen media..can the recipient view it properly?
CONTENT? Is this your best ‘selected’ work?
ACCESSIBILITY? Finally can the viewer ‘navigate’ your information easily?
These are all factors that needed to be taken into consideration when creating your portfolio, we were also given some useless links which we could use for inspiration and ideas.
http://www.guardian.co.uk/styleguide/ The Guardian House Style
http://www.apple.com/uk/ Apple U.K
http://www.cam.ac.uk/style/index.html Cambridge University
The portfolio is as much a process as it is a product. It should be considered a “living document” that evolves as you do. To that end it should be constantly revised and updated. It is not a ‘do once and forget’ item to be shelved once completed. It should evolve as you do……so are you..
We were told that over the next five weeks we would look at ways to improve our own portfolio it was just creating but learning as well, their were many things that we needed to consider when creating our portfolio e.g.
AUDIENCE? think about…What is your target audience? Research this…
AIMS? What do you hope to achieve?
CLARITY? Keep it simple and legible…
TONE? Is it factual…editorial or casual..you choose…
CONTACT? Your contact details…
MEDIA? What is your chosen media..can the recipient view it properly?
CONTENT? Is this your best ‘selected’ work?
ACCESSIBILITY? Finally can the viewer ‘navigate’ your information easily?
These are all factors that needed to be taken into consideration when creating your portfolio, we were also given some useless links which we could use for inspiration and ideas.
http://www.guardian.co.uk/styleguide/ The Guardian House Style
http://www.apple.com/uk/ Apple U.K
http://www.cam.ac.uk/style/index.html Cambridge University
Friday, 18 March 2011
Herds Final Edit
Mark was our editer so we left him over the first part of the week to edit, he had all the shots and neccessary sounds. We kept in touch over our group blog and facebook to check his progress and all contrioobuted ideas about what we liked and what could be improved. Today we met in Deborah's seminar and watched the final edit together, Deb gave us some feedback and we noted what she thought we should change and what worked well, these changes we plan to make over the next four days and i will post the final final edit then, atm though this is our edit.
Subscribe to:
Posts (Atom)