DREAMWEAVER WORKSHOP I
Task VI- Spreading the word moodle task
Creating a personal portfolio for work
SESSION I
1. Identify purpose of a website
2. Identify purpose target audience
3. Identify the audience needs
4. Demonstrate understanding of interface and basic layout techniques
SESSION II
1. Demonstrate understanding of more advanced layout and formatting techniques (CSS).
2. Use Photoshop to prepare suitable images and consider file formats.
SESSION III
1. Demonstrate understanding of advanced features e.g image galleries
2. Introduction to JQuery plugins etc.
SESSION I
WHEN DESIGNING A WEBSITE CONSIDER:
- Purpose
- Target audience
- Audience needs
SELF PROMOTIONAL TOOL
PURPOSE
- Showcasing work
- Attracting work- employment both by freelance and GD studio(s)
TARGET AUDIENCE
- Design studios
- Corporate clients
- Events/exhibitions
- Independent buyers
- Collaborators
- Awards
- Like minded people
AUDIENCE NEEDS
- Work/Examples
- Contact details
Consider context and design for specific audiences. Studio/freelance ambitions will make a big difference to the visual outcomes produced.
- Look at similar/existing websites to see the aesthetic/content to aim for.
- Contact studios to find out what they're looking for.
- ASK OPINIONS FROM PEERS.
"SCAMP" is a technical term for a web layout sketch, which we will actively be producing throughout our Dreamweaver workshops.
We will also produce a site map which helps to identify content on pages
ALWAYS write up a contract with clients and look at existing designs for inspiration
THE AVERAGE TIME A VIEWER WILL SPEND VISUALLY COMPREHENDING A WEBPAGE IS 3-5 SECONDS...FIRST IMPRESSIONS ARE EVERYTHING.
Reviewing our initial thoughts and views of websites- seeing how we visually respond to them within a brief moment of time.
APPLE HOMEPAGE/SAFARI START UP
- Clean
- Structured
- Busy
- Grided
- Minimal (colour palette)
LEGWORKSTUDIO.COM
- Freelance
- Busy
- Childlike
- Unique (layout)
- Spontaneous
MYOWNBIKE.DE
- Modern
- Crisp
- Clean
- European
- Minimal
SLAVERYFOOTPRINT.ORG
- Charity
- Confusing
- Clashing typefaces- untidy
- Google colour scheme
- No standard navigation system
NOLIMITARCADES.COM
- Cheap
- Nasty
- In your face
- Untidy
- Messy- image vomit
- Lack of colour scheme
EVANGELCATHEDRAL.NET
- HORRIBLE intro
- WAY too many links
- Around 20 typefaces used
- Too many images
- Not suitable for the subject matter in terms of visual outcome/aesthetics
- Diagonal navigation is confusing
- Animation is confusing- should be used minimally
LINGSCARS.COM
- Colour scheme is nasty
- Ridiculous animations
- So many typefaces I cannot count them
- Very difficult to navigate
INDEXHIBIT website builder (online) (such as Olly Moss') produce rather bland web page homepages, but look great when the links are opened- the design work and portfolio needs to be the focus. This ambiguity can be intriguing to some, but off putting to others.
WEB STANDARDS
- Font
- Colour
- Size
99% websites scroll vertically (as mice used to not be able to scroll horizontally)
-RESEARCHING WEBSITES THAT ARE UNIQUE, AND "BREAK" WITH WEB STANDARDS... see my Design Context blog for further examples and research-
CONTENT NEEDED ON A WEBPAGE
HOME
WORK
ABOUT
CONTACT
DON'T put too many examples of work in an online portfolio- it's off putting, maximum of 10?
WEBSAFE FONTS
(Font families)
- Verdana, Geneva, Sans Serif
- Georgia, Times New Roman, Times, Serif
- Courier New, Courier, Serif
- Arial, Helvetica, Sans Serif
- Tahoma, Geneva, Sans Serif
- Trebuchet MS, Arial, Helvetica, Sans Serif
- Arial Black, Gadget, Sans Serif
- Times New Roman, Times, Serif
- Palantino Linotype, Book Antiqua, Palatino, Serif
- Lucida Sans Unicode, Lucida Grande, Sans Serif
- MS Serif, New York, Serif
- Lucida console, monaco, Serif
- Comic Sans MS, Serif
Custom fonts can be used by introducing web safe images (with text) and uploading- although these cannot be copied or searched in search engines, therefore, will consequently receive less traffic and views than through websafe font usage.
WEBSAFE COLOURS
View in Photoshop (colour picker, check 'only web colours' box)
HEX/HEXIDECIMAL CODE to specify colours
Use Adobe Kuler (click button) to search Hex code swatches
SCREEN RATIOS
800 x 600 will fit onto ANY screen
Eg, could go higher ration dependent on the audience/their viewing output- eg, 27" iMac= 1024 x 768 ratio.
USE OF COPYRIGHT IMAGES
In commercial work, ensure you have copyright to ALL images- use getty and istock, or, preferably, you own images and work.
FOR LIVE WEBSITES
REGISTER NAME for Freelance company (check name, TM, etc)
Need to purchase...
- DOMAIN NAME
Based in the UK (suitable office hours if you need to contact in regards to online problems)
123 reg
- HOSTING
one.com- 5GB package (website should be around 5MB!)
Space on the internet to upload content (what you need for a website to be "live")
Buy unlimited bandwidth (people that visit your website each month)
FTP- File transfer protocol (can upload through dreamweaver to web hosting with ease)
TASKS FOR EASTER
For next session
- Find as many examples of websites that inspire our own designs, make notes of what's effective- design details, etc.
- Start designing your own websites, structure, notes, site maps
AT LEAST 3 VARIATIONS OF YOUR OWN DESIGNS
Creating a personal portfolio for work
SESSION I
1. Identify purpose of a website
2. Identify purpose target audience
3. Identify the audience needs
4. Demonstrate understanding of interface and basic layout techniques
SESSION II
1. Demonstrate understanding of more advanced layout and formatting techniques (CSS).
2. Use Photoshop to prepare suitable images and consider file formats.
SESSION III
1. Demonstrate understanding of advanced features e.g image galleries
2. Introduction to JQuery plugins etc.
SESSION I
WHEN DESIGNING A WEBSITE CONSIDER:
- Purpose
- Target audience
- Audience needs
SELF PROMOTIONAL TOOL
PURPOSE
- Showcasing work
- Attracting work- employment both by freelance and GD studio(s)
TARGET AUDIENCE
- Design studios
- Corporate clients
- Events/exhibitions
- Independent buyers
- Collaborators
- Awards
- Like minded people
AUDIENCE NEEDS
- Work/Examples
- Contact details
Consider context and design for specific audiences. Studio/freelance ambitions will make a big difference to the visual outcomes produced.
- Look at similar/existing websites to see the aesthetic/content to aim for.
- Contact studios to find out what they're looking for.
- ASK OPINIONS FROM PEERS.
"SCAMP" is a technical term for a web layout sketch, which we will actively be producing throughout our Dreamweaver workshops.
We will also produce a site map which helps to identify content on pages
ALWAYS write up a contract with clients and look at existing designs for inspiration
THE AVERAGE TIME A VIEWER WILL SPEND VISUALLY COMPREHENDING A WEBPAGE IS 3-5 SECONDS...FIRST IMPRESSIONS ARE EVERYTHING.
Reviewing our initial thoughts and views of websites- seeing how we visually respond to them within a brief moment of time.
- Clean
- Structured
- Busy
- Grided
- Minimal (colour palette)
- Freelance
- Busy
- Childlike
- Unique (layout)
- Spontaneous
- Modern
- Crisp
- Clean
- European
- Minimal
SLAVERYFOOTPRINT.ORG
- Charity
- Confusing
- Clashing typefaces- untidy
- Google colour scheme
- No standard navigation system
- Cheap
- Nasty
- In your face
- Untidy
- Messy- image vomit
- Lack of colour scheme
EVANGELCATHEDRAL.NET
- HORRIBLE intro
- WAY too many links
- Around 20 typefaces used
- Too many images
- Not suitable for the subject matter in terms of visual outcome/aesthetics
- Diagonal navigation is confusing
- Animation is confusing- should be used minimally
LINGSCARS.COM
- Colour scheme is nasty
- Ridiculous animations
- So many typefaces I cannot count them
- Very difficult to navigate
WEB STANDARDS
- Font
- Colour
- Size
99% websites scroll vertically (as mice used to not be able to scroll horizontally)
-RESEARCHING WEBSITES THAT ARE UNIQUE, AND "BREAK" WITH WEB STANDARDS... see my Design Context blog for further examples and research-
CONTENT NEEDED ON A WEBPAGE
HOME
WORK
ABOUT
CONTACT
DON'T put too many examples of work in an online portfolio- it's off putting, maximum of 10?
WEBSAFE FONTS
(Font families)
- Verdana, Geneva, Sans Serif
- Georgia, Times New Roman, Times, Serif
- Courier New, Courier, Serif
- Arial, Helvetica, Sans Serif
- Tahoma, Geneva, Sans Serif
- Trebuchet MS, Arial, Helvetica, Sans Serif
- Arial Black, Gadget, Sans Serif
- Times New Roman, Times, Serif
- Palantino Linotype, Book Antiqua, Palatino, Serif
- Lucida Sans Unicode, Lucida Grande, Sans Serif
- MS Serif, New York, Serif
- Lucida console, monaco, Serif
- Comic Sans MS, Serif
Custom fonts can be used by introducing web safe images (with text) and uploading- although these cannot be copied or searched in search engines, therefore, will consequently receive less traffic and views than through websafe font usage.
WEBSAFE COLOURS
View in Photoshop (colour picker, check 'only web colours' box)
HEX/HEXIDECIMAL CODE to specify colours
Use Adobe Kuler (click button) to search Hex code swatches
SCREEN RATIOS
800 x 600 will fit onto ANY screen
Eg, could go higher ration dependent on the audience/their viewing output- eg, 27" iMac= 1024 x 768 ratio.
In commercial work, ensure you have copyright to ALL images- use getty and istock, or, preferably, you own images and work.
FOR LIVE WEBSITES
REGISTER NAME for Freelance company (check name, TM, etc)
Need to purchase...
Based in the UK (suitable office hours if you need to contact in regards to online problems)
123 reg
- HOSTING
one.com- 5GB package (website should be around 5MB!)
Space on the internet to upload content (what you need for a website to be "live")
Buy unlimited bandwidth (people that visit your website each month)
FTP- File transfer protocol (can upload through dreamweaver to web hosting with ease)
TASKS FOR EASTER
For next session
- Find as many examples of websites that inspire our own designs, make notes of what's effective- design details, etc.
- Start designing your own websites, structure, notes, site maps
AT LEAST 3 VARIATIONS OF YOUR OWN DESIGNS
No comments:
Post a Comment