Design Practice Year 2: April 2011

Thursday 28 April 2011

PRODUCT RANGE DISTRIBUTION

my first thought about this brief......

I get to do whatever I want to do..... and these are the things I want to do.

A copy based idea, some kinda of slogan/ tag line OR a play with words and language
Typography ( including layout and editorial)
Illustrations
Something about nature or food ( organic of some sort)
related to sustainability but I don't want the project to be about sustainability really ( thats why I thought, nature would be a good topic )
Visual Identity/ Branding
to promote, enthuse and inform
promotional materials ( posters, etc)

So.... from the workshop yesterday and from looking over my briefs again...these are basically the things I was wanting to take from the briefs in detailed ( but I will need to narrow everything down as I can't do them all )

FAKERY :

typography
playing with words and language
defining your own target market

TYPE FACTORY

to promote
museum&gallery
complete branding and identity
aims to inform and enthuse visitors about...... ( doesn't have to be about type)
the 'museum' includes cafe, book store, exhibition space etc
booklet and treatment of cover as one of the promotional materials
outdoor advertising

FABER and FABER

typographic
about films

IMBALANCE

the subject of IMBALANCE - applying it to the natural world
can relate to sustainability
factual - research driven
informative
typography

NOT JUST FLEURONS

Subject of plants ( relate to nature)
informative
highlight
eye catching
typographic

other additional stuff I want to do ...

FOOD
sustainability
Illustrations
print media
texture

web design session 2

Everything on websites are made up off HTML which is the most basic code for websites

There are different types of codes ( you can choose the style on the welcome menu bar when you open up dreamweaver)
html - most standard / basic web language
Code fusion- just not used
PHP- used to communicate bewteen data base and websage. Eg. online shopping sites use them. Amazon > they don't have individual webpages for everything they sell as that would take ages for everything to load. Everything is stored as data on a spreadsheet and all that data gets pulled up when you click on the item
CSS- (cascading style sheets) when create webpage with basic features eg. black, helvetica, 12 pt, instead of having to put the code in on every webpage of your site, you just need one on CSS and link that to all the other html's

JAVA script- for really advanced coding eg. online games, really complicated websites
XML- similar to php

Creating a new HTML document:

CODE | SPLIT | DESIGN

in the panel menu, the files menu is the most important one

about the coding...........

isnt actually visible on your webpage, its just a code that is used so that your webpage shows up in search engines. key words are put into this code so when people type in the most commonly searched word, your website comes up

doesnt matter if you have nothing on your webpage, on the coding page, there will already be codes on it. eg. at the beginning means that from that point on word, this page will be talking in HTML ( need to let internet and dreamweaver know )
and means the end

every code when has a slash at the front means that its the end of thatn eg.
= anything in head tag isn't visible just useful. eg the meta code,
and then you have to end it

< body> = everything between that will be visible on the website

when making a website you need to
-make a root folder- can name them anything then sub folders

when yo finish a website, you need to buy a webpage and add server

FTP address ( for emails)

save your home page as index which is a standard name. this is so that your home page is the first thing that pops up when someone type in your web address

making the layout :
First bpx- 800 px x 600 px

(everything has to fit in the initial box)
Insert > Tablr

NOTE : if something is nothing , have to tell dream weaver that its nothing

box created - not height yet in rhw code but
so to add row --------

&nbspi = nothing . but you still need it so internet and dream weaver needs to know

therefore to add in high....space after width, drop down menu > click height

add features to cell > not in the over all table code but in the cell part

The background is automatically white so if you want to change it...change the code where the overall page is applied to

splitting you columns and rows into cells....

when you click the split columns, it always automatically make it split 50/50
co to change that...click the particular cell and change its widght

but you also have to change the remaining width of the other cell ( telling dreamweaver there's nothings when there's nothing)

dividing columns into rows../.do the same thing but with row height

Making buttons....

create you type/ image on photoshop and make two layers of the same type for the roll over effect

can change the color of the word, typeface or anything. save each layer separately ( hide one while you save the other)

save for web and devices on a transparent background and save as PNG ( JPEG is not transparent)

When inserting the button, select

insert> image object>roll over image

when the preload rollover box is ticked that means that the rollover image will appear straight away on your website. so you pretty much always want that to be ticked ( JAVA scripted )

The alternate text field is mandatory by law> its the small yellow box that appears when you float the cursors on the particular button

Wednesday 27 April 2011

Workshop for OUGD203

Open publication - Free publishing - More annotated

Tuesday 19 April 2011

design for web - session I

Before designing a web.....

Identify workflow. You need a brief to work with before you begin designing a website. A website is a form of promotion, point of contact, informing, persuading.
Analyse & evaluate websites.
Identify purpose of the website, target audience & audience needs.
Create an interface design for a website.

spend time over navigation system. before the aesthetics

Designing for a website

File Management

Create a 'root folder' and store everything used in the website in that folder
Always work in lower case letters when naming a folder.
dont use space bar in naming folder
Keep your file names at a maximum of 8 characters
Create a subfolder called 'images'. Use this folder to store all the media that will appear on the website. Images, videos, music, etc.

Document Setup/Web Standards - Size-Font-Colour

The setup needs to be completely universal so that it works on all screens around the world. Alway design with the lowest common denominator in mind. This is considered to be 800x600 pixels. Design to fit this at least.
You are restricted in what fonts you can use on a website. Fonts on websites work with whatever fonts are on the computer the website is being viewed from. Specify a font family
You can get round this font problem by working with the text as images rather than text. This can still be a drawback as images take much longer to load than text. Remember: the average person gives a website only 5 seconds before they decide to stay or go.
Never use an image for body text as it will increase the size of your website and it's not searchable.
ALWAYS work in RGB colour mode as you are designing for screen.
Keep resolutions at 72. The apt resolution for screen.
Work with 'Only Web Colours' in Photoshop and Illustrator as you have a narrower selection of colours for web. Use the 'hexadecimal code' when you are transferring to Dreamweaver.

Images for Web

The larger the file, the slower the website. Images need to be optimised for web.
Try to keep a website at 5mb or less to keep it running at a steady speed. It also means that more people can go on it as it will take longer to go over the bandwidth.
To make images suitable for web in Photoshop

>> Image size >> resolution to 72. Then go to File > Save for Web and Devices.

Work in the '4up' view as it is much more versatile. Save the original as a tiff.

then change the resolution. You can change the quality. In the 4up view it tells you how long the image will take to load up on the website. Save the image as a Jpg. This is imperative for every image that is used on a website.