Content
Design is a skill that CAN be learned. Every good programmer can be trained to be a good web designer. All you need is a lot of time and hard work.
You cannot learn design without reading good books. I recommend reading design books by Robin Williams, followed by books by Jason Beaird.
Web design examples:
| Example (target) web pages | Resources | Description | Video |
| step 0. if you need some help with basic html coding | |||
| preparation | - Show File Extensions in Windows 8/8.1 | video 00_001 | |
| - install notepad++ | video 00_002 | ||
| - Create Screen Captures, Save As PDF Files | video 00_003 | ||
| html Review |
html/css page JavaScript page |
- First HTML 5 File - html 5, notepad++, W3C Markup Validator | video html_ex001_basic |
| - Linking HTML & CSS Files | video html_ex003_selector | ||
| step 1. content research, visual research, sketches | |||
| visual Research | review (look at) as many websites as possible | video 08_001 visual research & structure | |
| talk to your client, to decide site structure | talk to them, find out what they want, show possible design templates, come out with draft site structure | ||
| sketch web user interface | after client chose design, sketch layout on paper, show sketch to client again - sketch template no scrolling - sketch template scrolling |
video 08_002 sketch & color | |
| produce color palette | decide the color scheme for website, show color palette to client | ||
| photo / image collection | download images | choose and select main photos / images to be used in step 2 | |
| step 2. create design prototype, produce Photoshop psd file | |||
| index.psd | download images
some notes |
this step takes a long time
- index.psd after video 08_004 |
- video 08_003 guides - video 08_004 guides - video 08_005 rectangle bevel - video 08_006 top banner - video 08_007 top title - video 08_008 navigation - video 08_009 one button - video 08_010 all frames - video 08_011 all buttons - video 08_012 content - video 08_013 curtain |
| index.htm | first page with only a jpg file and background color - index.htm with image only - background.psd |
- video 08_014 |
|
| show design to client | hopefully they won't make too many changes | ||
| step 3. slice image, code html & css, produce | |||
| index.psd | slice image, export - index.psd after video 08_015 |
- video 08_015 slicing 1 - video 08_016 slicing 2 |
|
| index.htm | normalize.css | code html & css, with image files "view">"source" in web browser - index.htm after video 08_017 - index.htm after video 08_018 - index.htm after video 08_019 - index.htm after video 08_020 - index.htm after video 08_021 - index.htm after video 08_022 - index.htm after video 08_023 |
- video 08_017 htm css 1 - video 08_018 html css 2 - video 08_019 html css 3 - video 08_020 html css 4 - video 08_021 html css 5 - video 08_22 html css 6 - video 08_023 html css 7 |
| eg027a_dropdown.htm | create top navigation menu run W3C html & css validator - index.htm after video 08_24 |
- video 08_24 top navigation menu (online class stops here) |
|
| create middle navigation menu - index.htm after this |
(for inclass section only) | ||
| good external example 1 here
good external example 2 here |
create top banner slide show - index.htm after this |
||
| run W3C html & css validator - index.htm after this (coming soon) |
|||
| step 4, convert file to php (or other server side language) - for the future | |||
| index.php | create file common to all pages (e.g. navigation), using php include statement | ||
| add php code for programmable module, link to backend database | |||
| that is not part of web design, if you want to learn those stuff, refer to this page | |||