Time to look at some jQuery ;) I'm sure I will not be able to do Remy Sharp's workshop justice but I will do my best :)
Here are my notes from the workshop with some extra links in the comments:
» jQuery for Designers [workshop notes]
by now you're hopefully working away happily on designing your portfolio site :) so here are a few sites and articles you might want to have a look at.
portfolio time - some links to inspire you :)
a few useful tools you should be using to optimise your final webpages:
» FireBug
» YSlow
» WebKit Inspector
» Dust Me Selectors [FF addon]
and for more useful tips and pointers about speeding up your page loading times - check out this talk by Kornel Lesiński
» Faster web pages: the secrets of front-end performance
to give you some logo design inspiration —
» logo design links ;)
welcome back ;)
hope you had a productive holiday & very curious to see the fruits of your labour :)
to keep you inspired for your portfolio - a few links :)
» Design for Delight [52 weeks of UX]
» brand new classroom [under consideration]
» 7 Essential Dos & Don'ts of Website Navigation [web do's and don'ts]
and just to get you keep you in a productive workflow - a new project to allow you to play with some animation :)
» logo project brief
Wishing you an inspired and productive Easter holiday :)
and just to confirm: first day back after half term 21/4/2010
adding the final touch to your sites - print CSS :)
» CSS and media types - print CSS
» sample page
and a few useful reading links:
» CSS Design: Going to Print [ALA: Eric Meyer]
» CSS printing guide [erratic wisdom]
» CSS-Tricks Finally Gets A Print Stylesheet [CSS-Tricks]
to get you inspired for your portfolio - here's a little project to get your creative juices flowing :)
» scrapbook project brief
taking a look at how a simple text page can be laid out - have a look at the examples here from Andy Clarke:
» Typesetting the WasteLand
using colour and CSS styling alone - layout a suitable length section of this text from 'Faust'. The focus here is a creative and visually appealing layout.
» Johann Wolfgang von Goethe: Faust, Der Tragödie zweiter Teil
» Faust — en.wikipedia.org/wiki
and finally:
» typography project brief
» form elements, accessibility and styling
» forms ~ best practices
JESS3 / The State of The Internet from Jesse Thomas on Vimeo.
getting ready for your presentation
Jeffrey Zeldman:
"Public speaking: be afraid, be very afraid. (It will help you do better.)"
» 18 Tips for Delivering a Memorable Presentation [sitepoint]
» Training the Butterflies: Interview with Scott Berkun [a list apart]
and in case you missed the big debate :)
» should webdesigners know how to code? ~ the big debate [eyelearn forum]
setting up a basic site, using buttons and labels.
» flash buttons
» setting up navigation using labels
back to HTML and embedding your bookmarks :) an idea for your holding page perhaps?
» del.icio.us links via feed.informer
to prepare for your next client meeting and for presenting your designs:
» design proposal presentation
your essays are long overdue!
» grids in webdesign
and just to confirm: first day back after half term 24/2/2010
This tutorial will take you through the creation of a short and simple intro
animation with 2 different uses of the mask.
» working with masks
desig proposals online for the THC gallery
» using Satellite
let's look at how to work with Flickr, embedding it into the webpage and using different presentation techniques ;)
for your reference, a forum post with some useful links :)
» embedding flickr...
» setting up shadowbox
to consider a different angle to your holding page - your task is to use the sample file shown here as starting point for a possible design. The requirement is to use icons or pictographic visuals as main navigational elements, colour scheme and visuals are entirely up to you.
view sample
source files (for sample above)
and just to remind you about Zara's forum post with lots of great articles, tutorials and examples:
vector icon tutorials
time to get flashin' ...
» flash intro - toolbar
» shape and motion tweening
» importing artwork
hope you all had a wonderful holiday and that you're now refreshed and ready to take on new challenges :)
and just to make sure you haven't forgotten too much over the break - let's see what you score in this little test :)
W3Schools HTML Quiz
Ready? :)
now, first things first — time to get uploading and testing your sites online:
» upload via FTP in Firefox — FireFTP
Once you're ready - go ahead and put your first page online:
» holding page project
your subdomains are now awaiting your masterpieces :-) happy designing & uploading!
wishing you a wonderful holiday and a creative new year :)
» first day back: 13th Januray 2010
presenting images with the 'lightbox2' from Lokesh Dhakar
“Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.”
a day focusing on Photoshop with the lovely Laura :)
And here is a whole collection of links Laura put up on the forum for you :)
» Photoshop tutorials & links
This will bring a smile to your faces :) - making your CSS coding a lot faster and the final code neater and better:
» CSS Edit - a coder's joy
time to take your design and coding skills public by adding a promotional microsite to the main THC website.
» THC - creative arts gallery
just to give you those page themes for your inspiration scrapblog again :)
new project? creative block?
find your way with collecting research and inspiration around you, online ~ anywhere...
» brain storming, collecting and presenting research & inspiration
Sign up to Scrapblog and using the online builder - create a new scrapblog for a new project titled 'online gallery'. Explore different concepts as well as visual styles, collecting your thoughts and considerations. These could be photos, drawings, screenshots of your own work or online sources.
Present your material in any way you choose within several pages and share your link on the forum.
DEADLINE: 27/11/09
SUBMISSION: link to scrapblog to be added to the above forum post
Creating tabs for the menu with CSS
» tabbed navigation
» download image files
... and don't forget to search the forum for links to samples and techchniques ;)
Grids - love them or hate them - you should think again and reconsider this design principle with care.
Start with the famous 5 simple steps :)
» Five simple steps to designing grid systems by Mark Boulton
There are also quite a few useful links to be found on our forum :)
» grids & typography
... and please do share any links you found ~ informative, inspiring ;)
Last but not least - your essay brief:
» grids in webdesign
Time to get to grips with positioning ;)
a few links for reference: » position: fixed;
Have some fun with fixed positioning. Produce this sample, following the tutorial and submit the final (the entire site folder):
» position: fixed;
» download image files
rock climbing competition - promotional page design
» rock climbing project
» download feature image
Hope you had a productive half term :)
Thanks for your project submissions so far - our gallery is starting to expand - nice work :)
Though I had hoped to receive some ideas from you for a new forum design (?!?) - it was really was time :) So have a look at the newly revived eyelearn forum and get started by joining this disucssion about your recent projects.
» from design to code
Next week is half term - so to keep you busy and thinking 'design' - here's a nice little project focusing purely on design, taking inspiration from art. Have fun ~ curious to see what you will come up with :)
» design challenge project
and just to confirm:
first day back after half term 4/11/09
creating visuals with organic and nature-related imagery:
» organic graphics (forum post)
'the naturalist' © stwade
The Elements of Typographic Style Applied to the Web
[Richard Rutter]
» webtypography.net
» How to size text using ems
View more documents from jeff_croft.
part of being a good webdesigner is being smart with your creating your assets
» clever rollovers
Time to practise your sprites :)
» 4 seasons calendar project
let's have a look at some beautiful designs:
» jontangerine.com (Jon Tan)
» veerle.duoh.com (Veerle Pieters)
» hicksdesign.co.uk (Jon Hicks)
» sam.brown.tc (Sam Brown)
just to get you thinking about what is possible with background images - 2 pages which present a variety of different styles and visuals:
» 80 Large Background Websites (webdesigner wall)
» Ornate backgrounds (design melt down)
time to put a face to your name on our site :)
» portrait project
using floats
» thumbnail gallery using floats
» tutorial source files
a few Photoshop techniques for backgrounds
» creating tiled backgrounds
» pixel stretch effect
just to keep you busy and practising your handcoding skills :)
» box project - extended
to improve your handcoding skills - a few reminders and tips :)
» working with HTML editors
» getting started with handcoding and testing – a few tips :)
and now — time to tackle the box model and its principles.
» box model
your first coding project - to practise and get your head around this new concept. Have fun with boxes :)
» box project
the beauty and the beast - onto CSS :)
with some bare pages slowly coded - let's add some visual touches.
» CSS - overview
» CSS - selectors
time to get started with coding :)
» a brief introduction to XHTML
» intro to XHTML
a little reminder and to give you some ideas for practicing Photoshop:
» Photoshop toolbar
» image filled text
» rounded corner images
glad to have you all on board - and looking forward to teaching you all webdesign, the web standard's way :)
To get your head into the right gear - please have a look at the mindmap below. Think about the questions and topics.
Then begin to expand the map. Go to bubbl.us and create an account for yourself.
Duplicate the mindmap and add your answers and thoughts to it - growing your own personal mindmap to however large you like :)
Once you're done - please email the saved image for inclusion in our site.
a few articles on the subject of mind maps:
→ why should freelancers use mind mapping? (freelanceswitch.com)
→ mind mapping (Matthew Lang)
make your first mark on our course website and create visual to show in this year's gallery. Download the original fan image and font and be creative.
→ download project brief
→ download source file and font
→ download 'Photoshop working methods'
→ download 'Photoshop - tips & tricks'
→ download 'Photoshop - selection techniques'
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
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 ;)
05/06 — communication page [archived]
the main page for the year 2005/2006 — archived for keeps ;)
06/07 — communication page [archived]
the main page for the year 2006/2007 — archived for keeps ;)
07/08 — communication page [archived]
the main page for the year 2006/2007 — archived for keeps ;)
08/09 — communication page [archived]
the main page for the year 2008/2009 — archived for keeps ;)
