PPD ~ Tech Sessions

These are my notes from the tech sessions with Lorraine that we had after the workshops with Simon.

Lecture 1

Why make a website?

Purpose - promotion, point of contact, sales, persuade, inform

Audience - industry professionals (networking), other creatives (collaboration), interested individuals/companies, educational purposes

Essential content - style of work, capabilities (portfolio), contact information, about, whatever the audience wants/expects to see

Content on homepage - simple navigation on each page, personal branding, work, news, basic about (name!)

Consider:

Functionality - does it work?

Usability - does it work well?

Aesthetics - is it well designed?

How do you use a website? You look for anything that is interesting and resembles what you are looking for. People only wait a few seconds for the website to load before giving up, so need to make sure images are small file sizes so load quicker.

Look at book - Steve Krug - Don't make me think

Web Design

1. Make a storyboard

2. Write the body text

3. Gather images

4. Then start designing in dreamweaver

Photoshop

- Use the slice tool (behind the crop tool), to slice the image and save the images separately. Save for web and devices (the crops are highlighted in blue) at 72dpi, with the quality about 60 or 70, and rename the images after you save them as they will just be saved as image slice.

- You can do this for your rollover links to make sure they are the same size, but you will need to hide the other layers, and save again

As an example, I've sliced up an image for a website design that I made for the YCN brief. I wish I had known about this tool sooner as it could have saved me so much time on previous things! But I'm sure I'll make good use of it now.

Lecture 2

First we looked through an example of a brief which is an example of what not to accept to do. The brief was asking for a lot of work, that would have to be done by about three people, expecting one person to do all this for free. We are designers, not web developers.

Photoshop

We looked again at the slice tool that we looked at last week and some more functions with this.

This shows you how long a selected image will take to load. [1 sec for this example]

You can select just the slices you want rather than them all. Go save - slices - selected slices. Can select more than one.

Can save as a HTML file as well but uses table code rather than divs, so it is recommend not to do this, as div's are more modern and work better.

The files are then saved to their own images file.

Dreamweaver

This is an example of a comment. The coloured code is for the computers benefit, the greyed out bits are the comments, which the computer ignores, so you can write notes to remind you what each bit is for. They are made with this code

<!-- comment -->

 

 This is the button on dreamweaver to apply the comment. To remove the comment use the button underneath.

You can choose to ignore a bit of html, to show you what a certain part of the page would look like without a bit of coding. This can be useful if you are unsure about a bit of code but you don't want to delete it and lose it.

This is the collapse full tag button. It folds up a piece of code that you know you don't want to change, a bit like locking a layer on illustrator that you know you don't want to accidentally mess with. 

 

This is what the tag looks like when it has been collapsed. If you hover over it you can see what the code is. To expand it back to normal code, either double click it or click on the expand all button.

Remember HTML is for content, CSS is for design style.

---

These are useful tips, and I am also reading the Web Standardistas book.

I am learning how to create my own website following the Dreamweaver workshops, so I have been reading this book that has been recommended to us. I have also started doing a lot of research in to website design and found that this is something that I am interested in that I didn't really think about before. Hopefully in Summer I will build my own website and buy my domain to get it all live!

Things I have learnt from the book so far:

- History of the world wide web and what XHTML is