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 03_001 | |
| talk to your client, 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 | video 03_002 | |
| 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 firewords png file | |||
| index.fw.png | download images | this step take a long time
- index.fw.png after video 03_004 |
- video 03_003 guides - video 03_004 guides - video 03_005 rectangle bevel - video 03_006 top banner - video 03_007 top title - video 03_008 navigation - video 03_009 one button - video 03_010 all frames - video 03_011 all buttons - video 03_012 content - video 03_013 curtain |
| index.htm | first page with only a jpg file and background color - background.png |
- video 03_014 index.htm with image only | |
| show design to client | hopefully they won't make too many changes | ||
| step 3. slice image, code html & css, produce | |||
| index.fw.png | slice image, export - index.fw.png after video 03_015 - index.htm after video 03_016 |
- video 03_015 slicing 1 - video 03_016 slicing 2 |
|
| index.htm | code html & css, with image files "view">"source" in web browser - index.htm after video 03_017 - index.htm after video 03_018 - index.htm after video 03_019 - index.htm after video 03_020 - index.htm after video 03_021 - index.htm after video 03_022 - index.htm after video 03_023 |
- video 03_017 htm css 1 |
|
| eg027a_dropdown.htm this youtube video shows how to do it in Dreamweaver CS6 |
create top navigation menu run W3C html & css validator - index.htm after video 03_24 |
- video 03_24 top navigation menu | |
| create middle navigation menu - index.fw.png after this - index.htm after this |
|||
| 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) | |||
| 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 | |||