...and to make sure you don't get bored during the holidays :) and to keep you inspired —
a 2 part creative brief of a different kind :)
→ scrapbook project brief
→ CSS ZenGarden
and in case you fancy a little play with a digital version of a scrapbook:
→ scrapblog.com
well, it's time - time to get to grips with IE and look at hacks. Prepare for a lot of testing and coding - and you'll get there ;-)
To get an idea of what's involved and to read up on the problems you will encounter - have a look at my blog posts for links:
→ Internet Explorer thougths
for a reminder about the conditional comments to link the IE hack CSS:
→ IIE6? IE7? ...to hack or not to hack?... the dreaded question...
One often neglected aspect of presenting content on the web is the setup of print style sheets for better results.
Download the sample files and continue the CSS provided to create the set layout. Create and implement a suitable print style.
→ sample files
→ CSS and media types
taking a closer look at grids in webdesign - the inspiration, the ideas, the limitations and the beauty.
→ subtraction.com (Khoi Vinh)
→ Five simple steps to designing grid systems (Mark Boulton)
→ Designing With Grid-Based Approach (SmashingMagazine)
discuss grid based design and page layouts-
→ essay 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
In order to design website which fulfill their purpose and which deliver the result your client expects - the most important stage is the planning of your design. Making sure you know all vital information, aiming every design decision towards one final goal will keep you focused.
→ Strategic Design: 6 Steps For Building Successful Websites
Your task today is to design a page dedicated to the screwdriver - promoting it as a vital tool. Sketch out your concept on paper, annotate the notes including your HTML structure - discuss your idea with one of your colleagues and make notes of their feedback. Revise your design; then proceed to produce your page. The aim is to focus on a clear goal with your design and produce a coded mockup of your design.
→ download screwdriver images on MorgueFile.com
Even though they need to be used with care - animated gifs can make a nice addition to your web page.
→ Animated GIFs (handout)
in today's lesson we will create a spectacular grass text effect in Photoshop, using text layers, pen tool, paths and more. Get your hands ready to trace :)
final image you will create → → grass text effect
→ online tutorial we will follow :) (by Collis, psdtuts.com)
→ download source images
→ extra paper texture source images
and just to keep you practising :) your homework:
→ object words project
one popular style of horizontal navigation is the use of tab graphics. For the most flexible use of tabs - we will create the 2 visuals required and setup a tabbed menu.
→ setting up tabbed navigation with CSS
though actions can initially be confusing - getting to grips with this time-saving technique will allow you to work more efficiently and get your image editing done faster - so it's worth spending time practising :)
→ using actions in Photoshop
→ webtypography.net (by Richard Rutter)
→ clagnut.com (Richard Rutter's blog)
TYPE
→ typechart.com
→ opentype.info (Ralf Herrmann's Typography Weblog)
INSPIRED BY TYPE
→ Vintage and Retro Typography Showcase (smashingmagazine.com)
→ Inspiring Grunge Style Big Typography Posters (designshard.com)
note: image via ILT
just to get your creative juices flowing - a design challenge of a visual and conceptual nature
⊕ the coding, of course :)
→ design challenge (project brief)
Time to have some fun with fixed positioning ;)
→ fixIT! (handout)
→ download source images
Don't forget that IE6 does not understand fixed positioning and be wise in your decisions on whether to use it for any given page elements within your design. - And if you do use it - remember to consider the IE6 work around :-)
Hoping you all had a creative and productive half term - let's look further into positioning. Here's one technique which displays content on rollover.
→ the hiding game (handout)
→ download source images
→ the hiding game (online sample)
as you might fancy doing a tutorial from someone else but me :)
have a look at this one here by Gary Simon
→ How to design a website →
as you will see - I don't necessarily agree with all of the techniques used here - so please feel free to ask questions and discuss any details.
→ GreenPeace - Forest Campaign
using the text and images provided - design a mini site to promote the greenpeace campaign 'forests'.
→ greenpeace project brief
→ download source images
using the images provided, create a layout mockup for a fictional photography gallery
→ gallery layout project brief
→ download source images
displaying an image gallery with thumbnails - practising floats :)
→ thumbnail gallery using float
→ source images
... and to take this further - produce one of your design proposals as demo page:
→ gallery layout project, part 2 - brief
Hope you enjoyed playing with borders today :) do take the time to finish off your sample page - and make sure to add it to your library of source code (start one if you don't have one yet :) you'll be glad you did, trust me :)
→ sample page
one of the tasks you might be confronted with will be the editing of any source images your client might give you - so practise your editing skills by repairing, touching up and editing these images.
→ selection of 8 sample images
HOMEWORK: Choose 3 images from the resource folder (see link above) and restore them
to presentation quality.
→ restore-retouch project
a few reminders for working methods in Photoshop
→ selection techniques
→ using channels to smooth out edges
one visually very effective method to highlight your menu links and enhance their rollover apearance is to use icons or ornamental elements which change on mouse rollover. Though this can be achieved in different ways - the most efficient methods is the sprite rollover:
→ clever rollovers
HOMEWORK: Using a single image file - create 3 link lists with 3 different rollovers.
→ sprite project
the layout classic - 3 columns
time to tackle proper page layouts - let's start by creating a simple 3 column layout
→ fluid 3 column layout
and to practice - a quick mini project :)
→ fluid 3 column layout
working with tiled backgrounds
expand your photoshop skills by creating seamlessly tiling pattern for use as webpage background.
→ creating tiled backgrounds
→ Creating Backgrounds (The Photoshop Anthology - by Corrie Haffly)
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)
handcoding reminders :)
With getting your head now into coding - just a few reminders here on my blog:
→ working with HTML editors
→ getting started with handcoding and testing
Time to dive into the deep end of CSS - with the help of CSS Edit.
→ CSS Edit - a coders joy :)
a few photoshop tips for good working practices :)
As you will be doing a lot of work with visuals, be it editing or creating your own - an efficient workflow will be vital - so here are a few pointers ....
→ working methods
→ download sourcefile
Using this screenshot of the website for 'Matt' (a web application by carsonified) - create a new layout and structure for their homepage. The aim is to refresh the look - without adding any new elements but rather working with only the exisiting content, navigation and visuals. You cannot add any new visuals - but you can edit, change, duplicate or omit the exisiting imagery.
→ download source file
ready to get coding? - Let's start from the basics :-)
01 - introduction to XHTML overview
Well done today, everyone :) just to give you those CSS handouts:
→ CSS overview
→ CSS selectors
let's get your face online ;) To set up our new gallery page - create a portrait for your online presence on our webeyedea site.
→ download project brief
As we were talking about design and its different approaches in lesson - I thought I should give you some of those links again. I've started a new discussion on our forum for this - so please have a look and share any other links you found yourself:
→ design matters: design links for your perusal
just to confirm class times and term dates - here is the → final PDF :-)
glad to have you all on board - and looking forward to teaching all webdesign, the web standard's way :) Before we dive into handcoding and get stuck in - 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
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)
Please visit the college website for more information about open days, enrolment and the college.
Tower Hamlets College
If you have any questions, queries or would like to get in touch with me personally - please feel free to get in touch via this form :)
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 ;)
