page title 'design for the web'
page title 'design for the web'

welcome, webdesigners :-)

19/12/08

wishing you a happy & creative 2009

...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

scrapblog and in case you fancy a little play with a digital version of a scrapbook:
→ scrapblog.com

17/12/08

(sadly) hacking for IE

fox-ieCutoutwell, 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...

12/12/08

print syle sheets

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

10/12/08

grid based design - something to write about ;)

subtractiontaking 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)

essay brief

discuss grid based design and page layouts-
→ essay brief

3/12/08

typography

wastelandtaking 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

26/11/08

Building Successful Websites

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

celebrating the simple tool - the screwdriver

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

Animated GIFs

animation_gif2Even though they need to be used with care - animated gifs can make a nice addition to your web page.
→ Animated GIFs (handout)

21/11/08

Text effect in Photoshop

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

19/11/08

tabbed navigation

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

14/11/08

Actions in Photoshop

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


inspiration & typography

ampersand 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

design challenge - project brief

just to get your creative juices flowing - a design challenge of a visual and conceptual nature
⊕ the coding, of course :)
→ design challenge (project brief)

12/11/08

fixIT!

fix it doodle

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 :-)

5/11/08

the hiding game

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)

website design & construction, step-by-step

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.

22/10/08

greenpeace project

greenpeaceVisual

→ 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


17/10/08

gallery layout project

using the images provided, create a layout mockup for a fictional photography gallery
→ gallery layout project brief
→ download source images

gallery layout project, part 2 - page demo

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

15/10/08

borders, borders, borders

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

10/10/08

repairing & touching up images

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

creating image rollovers

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

8/10/08

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

3/10/08

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)

inspiring visuals

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)

1/10/08

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

writing clean and correct CSS rules

Time to dive into the deep end of CSS - with the help of CSS Edit.
→ CSS Edit - a coders joy :)

26/9/08

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

Layout editing exercise - 'Matt'

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

24/9/08

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

19/9/08

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 :-)


are you ready for your new challenge?

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.

image
a few articles on the subject of mind maps:
→ why should freelancers use mind mapping? (freelanceswitch.com)
→ mind mapping (Matthew Lang)

our college

Please visit the college website for more information about open days, enrolment and the college.

THC logo Tower Hamlets College
Poplar High Street
London E14 0AF
phone 020 7510 7510


get in touch ;)

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 :)

Contact Form
Required
Optional
Required


course website for 'design for the web'

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 ;)

code validation

Valid XHTML 1.0 Transitional Valid CSS!
image of black laced hand fan - for Jayne Wallett