Welcome to the course site of the 'design for the web' course ;)
Thanks for coming everyone :) We hope you've enjoyed the show - and would love to hear what you think :) Please feel free to → leave us a message - any thoughts, comments and feedback welcome :)
Here is our second invite for our external exhibition on the SS Robin - thanks, Brooke ;)
→ #1 - simple email
[184kb, 317x700px, jpg]
→ #2 - rich email
[1.1MB, 1/3 of A4, pdf]
→ #3 - for print
[1.2MB, A4, pdf;
3 x flyer on 1 A4 sheet]
To see Madam Aubergine in her full glory - see Brooke's website:
smallestaubergine.com
With our exhibitions now only around the corner - it's time to start letting people know ;) The first flyer is ready - for promotion of the college exhibition, saved in different formats for you to use as needed.
The visuals are taken from Zara's animation which will be one of this year's masterpieces - thanks, Zara ;)
→ #1 - simple email
[35kb, 184x260px, jpg]
→ #2 - rich email
[6.1MB, A6, pdf]
→ #3 - for print
[high quality, 37.6MB, A6, pdf]
If you are curious about the animation - have a look at Zara's page on the animation site:
diganimation.info - Zara Taylor
the end of the year is almost here - our final exhibition dates are approaching fast. It's time to put together our prints and show off what great work has been produced this year :) Please download the template below and put together a maximum of 4 x A4 pages to be printed and mounted for our exhibitions.
The template shows one of the prints from last year (David's site "UTattoo") just to give you an idea ;)
You need to change the right hand side info on the header and footer to show your details, delete the content and add your own masterpieces.
→
template
in 2 formats (InDesignCS2 & IllustratorCS2) and font (Blake)
well, there are no easy answers here but it is nonetheless important to have a clearer idea of why and what exactly happens to our form elements when we try to style them with CSS. Luckily we have our expert Eric explain it all and though there is no happy ending - at least it's all making more sense and shows it is time to switch to the reset styles rather than using the universal settings.
→
formal weirdness — Eric Meyer
→
reset reloaded — Eric Meyer
→
Text Fields — WebKit Open Source Project (Safari)
for anyone using flash on their sites - UFO to help you out :)
→
using flash as progressive enhancement
some reading ;)
→
Contrast and Meaning by Andy Rutledge
→
Creating a Winning Portfolio
→
10 Tips On Creating A Design Portfolio
→
Five steps to a better design portfolio by Jeffrey Veen
research and portfolio layout
as mentioned on friday - your homework:
→ research portfolio sites and collect a minimum of 5 links to well designed samples you found
→ create 2 mockups in photoshop of your planned design/layout - one simply working as you would without grid, then try creating a new version of the same idea - this time applying it to a grid
grids in webdesign
just posted a few links on web typography & using grids for layout design on the forum ;)
→
designing your sites => grids & typography
final project - portfolio site
well, now the time has come ;) time to get creative for your self ;) and design yourself a mind-blowing protfolio site. Take your time over the easter holidays to start putting your ideas together, planning structure and layout - ready for us to dicuss after the break. Have fun and happy designing:
→
download project brief
have an inspired and creative break - see you on the 18/4/07 ;)
feeddigest and delicious links
just as a reminder about the feeds and links and so on - I wrote a blog post on it for you :)
→
read blog post
sound player - flash
A simple mp3 player with random play button and volume control:
→
view sample player
→
download sample files [ZIP 21MB]
dealing with your client
By the sounds of it so far - you all seem to have been pretty lucky with your clients ;) fingers crossed it will remain that way ;)
Just a few articles you might like to read on the subject of dealing with your clients, their general feedback, praise and/or criticism:
→
Web Design - Dealing With Client Personalities
→ Bulletproof Web Design Contracts
→ In Defense of Difficult Clients
just something to watch :)
an explanation of Web2.0 on YouTube — I had added the actual video from youTube on this page - but as THC has the site blocked you might have to look at this somewhere else, sorry...
here is the link though anyway: The machine is Us/ing us
embedding flash into html
You can use one of the 2 methods to embed your SWF files into your webpages - and position the flash content by assigning it a <div> </div> tag and using CSS as usual to control its appearance within the window.
code for flash embedding
an light hearted interview with our favourite geek and guru...
→ Eric Meyer - A Candid Chat 'bout CSS & Stuff
with the new Windows OS out - there are a few things to think about...
→ New Vista Fonts & The Web
some reading & inspiration...
→ Who Questions Bill Gates...? — Molly Holzschlag
→ CSS Styling for Print and Other Media — Digital Web Magazine
→ whitespace — Mark Boulton, A List Apart
→ css play — Mo Jebus
→ Text Sizing — Owen Briggs
some practise...
→ Creating a page curl in Photoshop — Veerle Duoh
→ Pixelated Mosaic Edges — Tommy Maloney
...it's time to contribute to the WWW of css design... :)
→ css zengarden
→ ...share your favourite designs...
have fun creating your own design - and submit it
→ css zengarden - project brief
Another technique to create rollovers - faster loading - better display: 'sprite rollovers'
→ better rollovers (sample file)
a happy and creative 2007 to everyone...!
hope you all had a relaxing holiday and got your batteries recharged - ready for more ;)
Curious to see the final results of your 12 page site - and prepared to help you with any last tweaks and glitches :)
a few links looking back at the last year in webdesign:
→ web 2.0 thinking game — Jeffrey Zeldman
→ current web style — Ben Hunt
→ 50 Beautiful CSS-Based Web-Designs in 2006 — Smashing Magazine
→ 8 Web Design Clichés of 2006 — Modern Life is Rubbish
creating patterns in Illustrator
→ handout
→ fonts
solving IE6 / IE7 problems
→ ...to hack or not to hack?... - eyedeas blog
FireFTP - uploading in Firefox
→ upload via FTP in Firefox - eyedeas blog
As we were talking about Firefox extensions, Pageflakes and podcasts - a few links for you to check out :)
the PDFs are listed after the links...
Firefox extensions
some "must have" extensions - as mentioned on my blog:
→ eyedeas » extending Firefox
Wen - thanks for your nice comment ;)
pageflakes
→ eyedea pageflakes
to sign up for yourself and set up your own Pageflakes browser start page use the link below
→ pagefakes.com
webdesign podcast
to quote the site: So you are responsible for your organisation's web site. This blog and podcast aims to provide news and advice on web design and management without overwhelming you with techno babble!...
→ boagworld.com
...a few podcast related links :)
if you come across anything useful and interesing - please share it and post it on the forum :)
→ download iTunes for Mac or PC
→ iTunes Store - podcasts
→ podcast directory
→ podcastingnews and directory
...and finally - here are the handouts on design and colour
→ images with impact
→ colours and their meaning in different contexts
→ colour in art and design
→ design basics #1
→ design basics #2
Just a little creative exercise to challenge your talents ;)
→ creative challenge project
» Bauhaus:
→ wiki/Bauhaus
→ bauhaus archive museum of design
To have a look at 3 sample sites and analyse their homepage and interface - please fill in the form:
→ homepage and interface study - PDF form
The sites:
→ angryblue.com
→ typo5.com
→ studioaka.co.uk
And a few articles on webdesign...
→ on current web style
→ principles of design
→ A practical guide to web typography
a few links for alternatives of the liquid layout set up - and some inspiration :)
→ maxdesign.com.au/presentation/liquid
→ netmag.co.uk/magazinetutorial - simple liquid layout
→ cssliquid.com/gallery
just to remind you - we're changing our course days, now wednesday and friday - full on ;)
hope you had a good week and curious to see your holding pages...
please note I have now added a link to our forum in the top menu - just for easier use ;)
→ our forum
just to wish you a good half term ;) hope you'll get plenty of time to practise and work on your holding pages...
just those links again :)
→ project brief - holding page
→ brushes in photoshop
and some light reading:
→ css basics
→ A Design Process Revealed
→ 5 Tips for Organizing Your CSS
→ CSS from the Ground Up
Hope you're starting to make sense of our box model....?
Take some time to practise - and you'll soon get the hang of it :) - for your reference, see the link below for the sample style sheet.
→ view sample
→ view css
and here is the code for the clean default XHTML template file:
→ view html code
Let's have a look at the box model :) THE most important principle to understand.
→ view sample
→ download images
Now that you have just been introduced to the basics of XHTML and CSS - it's time to get your hands dirty and do some serious handcoding ;) This project will allow you to get stuck in and try out your new skills. Don't worry too much and just go and have some fun ;)
MAIN LINK
→ save the ocean (article © Greenpeace)
→ download project brief
→ source text (plain text file article © Greenpeace)
16 resource images © Morguefile.com:
→ jpgs (100%), ZIP 29.8MB: → download images
→ jpgs (50%), ZIP 13.6MB: → download images
let's talk design - go to the 'eyedeas' blog and comment on the 5 sites, let's get a proper discussion going ;)
first impressions ... and more ...
→ duotone images - quick step-by-step
a little bit of reading ;)
Everything you ever wanted to know about designers
— Dan Shaffer on ThinkVitamin —
high accessibility, high design
— Joe Clark —
A Standardista's Alphabet
— Jack Pickard on ALA —
hopefully you don't feel too shellshocked after our first full-day session ;)
...and feel free to email me if you are worried about anything ;)
Just to give some links to remind you:
→ download FIREFOX, MOZILLA and others from mozilla.org
→ download OPERA from opera.com
→ download FLOCK from flock.com
→ download SHIIRA (mac only) from hmdt-web.net
→ sign up at del.icio.us and don't forget to install the Firefox buttons :)
→ for some notes, see my blog eyedeas
→ have a look at my bookmarks to get an idea about tags etc.... del.icio.us/eyedea
induction notes
here is the link for the induction notes you receive on induction....
induction project - brief
create a graphic for this site's gallery - using the featured fan photograph.
download source file [original .psd file - ZIP 2.3MB]
Any questions? Worries...? Thoughts or suggestions...? Any interesting links to share...?
Please feel free to get in touch ;)
content:
web news
to keep us up to date with the latest developments - hoping you will contribute to this sections and send me any links you come across
graphics
anything to do with graphics - tutorials for Illustrator and Photoshop / ImageReady
XHTML / CSS
tutorials, exercises and projects for XHTML and CSS
flash
tutorials, exercises and projects for Flash
scripts
tutorials, exercises and projects for anything script related - actionscript, javascript and php
student gallery
your own online gallery - this section will show off your beautiful work as well as contain links to your own sites
hoping this section will grow continously over the year ;)
course info
information on our course as well as any course related paperwork
contact
get in touch ;)
communication page [archived]
the main page for the year 2005/2006 - archived for keeps ;)
