OUGD504 - Design Production: Designing For Web (Workshop 1)

We need to understand:

• Web standards and limitations
• Layout
• Setup
• Basic Coding

Web Standards

Acronyms, Abbreviations and stuff...

HTML is the basic coding language of the internet.

Hyper Text Markup Language

More graphic based websites

WYSIWYG: What you see is what you get

What you see on the program is what you are going to get when it is on the internet

Adobe Dreamweaver is one of these programs

In theory it works but in practice it is not that great

SEO: Search Engine Optimisation

Need to do this to get your website to show up on Google or a search engine

We will be looking at basic SEO

To get to the top of Google we have to pay money

FTP: File Transfer Protocol

Transfer from computer to web

XML and PHP: Linking a website to a database

Seeing what stock is available

UI, UX, WWW: User Interface designers (UI) this means that you design for an iPhone etc

User experience (UX) reacting to a website, this is the first stage of user experience

When designing a website we have to consider the user experience a lot it is really important

Limitations

Designing for the lowest common denominator

Colour

Web safe colours

216 colours

When colour first arrived on the web computers could only support a maximum of 256 colours on their 8 bit monitors. A list of 216 web safe colours were identified.

These colours were/are reproduced consistently across the web using HTML, specifically a six or where possible a three digit hexadecimal code.

Red

FF0000

FF0

White

FFFFFFF

FFF

Black

0000000

000

Colour on web is made out of red green and blue light.

Red 256 x Green 256 x Blue 256 = 16, 777, 216

This is how many different colours there are available with RGB.

CSS allows us to work with the full RGB colour range.

The wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using the same principles and Photoshop and Illustrator, by specifying the percentage of 255 per RGB. 

For example, 100% Red would be:

rgb (255, 0, 0)

You can show only web safe colours as well on some software.

The problem with CSS is that it isn't consistent. You may choose beige for your website, and it may look right on a mac but then different on a PC at home. They use different RGB colour modes. Different monitors are capable of producing different colours modes. It is therefore not a consistent representation of colour. You would therefore only work with the web safe colours to make it consistent. CSS is capable of being produced but isn't a web safe colour. Therefore whenever you break a rule then it is generally not going to work the same across all devices.

A lot of the websites on awwwards.com look great on a mac but not on a PC. For those websites to have those animations they are breaking the standards and rules of web design. It is going to be different but it isn't going to be consistent.

When designing a website it should be designed for a target audience with macs.

Web Safe Fonts

For a chosen font to display consistently across different computers a standard font must be used. Further to this a font family is chosen giving several fallback options to ensure maximum compatibility between browsers and systems. For example is the browser/system does not support the first font it tries the next one instead.

The website must only use fonts which are available on the machine you are viewing it on. It is not on the website itself. If Helvetica was used, however someone had lost this font, it would display the text using Times Roman as this is the default font used on websites.

The fallback options - Use Helvetica but if that isn't there, use Arial, if both of them aren't there then use a sans serif font. If not then it would always default back to Times New Roman.

Some common font families:

Serif Fonts

Georgia, serif

"Palatino Linotype", "Book Antiqua", Palatino, serif

"Times New Roman", Times, Serif

It is important to use the speech marks at the start and end for it to understand. 

Sans Serif Fonts

Arial, Helvetica, sans-serif

Tahoma, Geneva, sans-serif

"Trebuchet MS", Helvetica, sans-serif

Verdana, Geneva, sans-serif

Again, you can break the rules and do something different. Simon created a website where they wanted a specific typeface which they said they couldn't get from standard fonts. He did this by installing a font to a website. The problem with this is that it breaks all of the copyright laws of fonts. If you wanted to use Futura and you installed in to your website, you are in fact distributing the font around the world. 

Even free fonts if you distribute it, then you have to pay for it. The license fee totally depends on the usage of the font.

If you use a free font from DaFont you are breaking the license so you would get a massive charge. All fonts that are free are only free to use for personal usage. 

YOU MUST PAY TO USE A FREE FONT COMMERCIALLY IF IT IS DISTRIBUTED.

CSS Font-Face

The CSS Compatible @font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser if system.

However using font-face breaches copyright laws.

www.fontsquirrel.com - Quite a good website because they are generally good fonts. Whereas DaFont isn't as good. They are designed by typographic designers on font squirrel. If it says web font kit then I can download it to actually use on a website. If it isn't there then I would be breaching the license.

Size, dimension, pixel resolution

640 x 480

800 x 600

1024 x 768

1920 x 1080

2880 x 1800 (220ppi) This would be 50MG in terms of file size. Some people's data allowance would be used up by accessing this website, using up too much data. If you internet speed wasn't that high it would take 10 minutes trying to get this website up. 

This is a huge problem for us as graphic designers. For years people have said we should design for the lowest common denominator. But if we design at the size and use a large monitor then it wouldn't look right. However on the other hand if you design something too big for a smaller screen size then that wouldn't work either. There are ways around this however as we will be discussing over the next few weeks.

Responsive web design
READ UP ON RESPONSIVE WEB DESIGN

File Formats

PNG
GIF
PDF
JPEG

We have to work with Lossy file formats.

Working with print - LOSSLESS file formats
Working with web - LOSSY file formats (compress the images)

The second thing we can do to change the file size is change the resolution (72ppi)
This is actually a problem through, do we still work with 72 or work with 96?
Most people still work at 72 because there isn't that much different visually.

Part 2 - Using DreamWeaver

We need to click on design to view what it would look like on web. Open the file using HTML initially when setting up the document.

Coding

The top line here is actually not needed for the website to actually work, however we need to keep it there.

Line 1: <html> 

Line 2: <head>

Line 3: <title>

Line 4: <meta...> (search engine optimisation - key words)

Line 5: </head> (something that isn't actually visible but this is how to make the website function. For example if we wanted to use a different coding language we would specify this within the head tag)

Line 6: <body>

Line 7: </body> (anything that is going to be visible in the actual website)

Line 8: </html> (this means close html. Everything has to be opened and closed)

Icon next to the website on the tab is called a favicon. Not all websites have a favicon.

Need to manage our files in a similar way to how we do on InDesign. On this program we can package it all together, however DreamWeaver doesn't have this option.

Before we create the website we have the create the folder. If working at college we have to make sure that we create it in user work.

Everything is always backed up somewhere in the world. This is something we need to get used to. When relating back to placement over Summer we had to always save the work to the server.

Folder shouldn't have uppercase, any more than 8 characters with no spaces. This is important otherwise it won't be functional. 

First of all we create a root folder in user work and then inside this folder we have a sub folder called images which is where all of the media goes.

We then need to create a new site.

When we click this option this box comes up. We need to give the site a name. This isn't overly important. We can have spaces and uppercase etc. I am going to call it root, in the same way that I called the folder that too. 

We then had to select the correct folder in which we can find the relevant information and then this part of the set up process is done. When DreamWeaver suddenly shuts down in the middle of setting up a document it is because there isn't space in the home folder.

We then need to save it now. So when we click file and save as this is what comes up. When saving on this we cannot delete the file name at all, we may perhaps do this on illustrator and delete the .ie. This is extremely back practice and we should never do this. At the moment we are creating the homepage. We don't however call it this, but instead we use 'index' as this is a universal word to use. All of the other pages can be called whatever we want it is just that the first page needs to be called index for it to work.

We can then preview the page on the internet and choose which to open it in. Every time a change has been made it is worthwhile to refresh the page and review the site to see if it has worked, then we only have to undo one thing if it hasn't worked.

When making a change and haven't saved there will be an Asterix next to the name at the top and this has been successful!

For Next Week - Come up with the layout of what the website is going to look like.

• Colour?
• Fonts?
• 3 separate designs
• This is something we would do professionally too, it is important to do 3 designs.
• There isn't much point in designing at this stage digitally as it could be perceived as a waste of time.
• Scamp is a rough design of how a website/magazine layout is going to look and work.
• Annotate.
• The scamp should be almost identical to your final design.
• We will be having a crit next session.
• You will not necessarily like the design if you don't enjoy the subject
• Also for each one show a site map
• Example - gripittool.co.uk
• All of the decisions are made before getting to the computer
• Images?
• Video?
• Audio?
• Animations?
• What size the website is going to be?