Narrates the process of redesigning a Web site, illustrating the various skills required.

1. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
The Web Design Process
The Case of amicscatering.com
Bruce Clary, McPherson College, McPherson, Kansas

3. ation
elebr
C

4. ation
elebr
C
ming
Welco

5. ation
elebr
C
Warm
ming
Welco

6. ation
elebr
C
Sunny
Warm
ming
Welco

12. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Creative Thinker & Researcher

13. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Creative Thinker & Researcher
•
Interview client

14. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Creative Thinker & Researcher
•
•
Interview client
Spend time on the scene

15. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Creative Thinker & Researcher
•
•
•
Interview client
Spend time on the scene
Seek out ideas & inspiration

16. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Creative Thinker & Researcher
•
•
•
•
Interview client
Spend time on the scene
Seek out ideas & inspiration
Sketch!

17. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
From the Interview
Anne’s Redesign Keywords

18. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
From the Interview
Anne’s Redesign Keywords
•
“Old World”

19. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
From the Interview
Anne’s Redesign Keywords
•
•
“Old World”
“Spanish street garden”

20. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
From the Interview
Anne’s Redesign Keywords
•
•
•
“Old World”
“Spanish street garden”
More mature, sophisticated, adult

25. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Art Director and Graphic Designer

26. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Art Director and Graphic Designer
•
PSD comps

40. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Information & Interface Designer

41. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Information & Interface Designer

42. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Information & Interface Designer

43. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Writer and Editor

44. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Writer and Editor
•
Edit and suggest revisions for all copy provided
by client

45. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Writer and Editor
•
Edit and suggest revisions for all copy provided
by client
•
Write captions for the 68 photos that make up
the galleries

46. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Front-end Coder

47. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Front-end Coder

48. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Front-end Coder

49. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Scripter

50. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Scripter
•
Flash for homepage slideshow

51. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Scripter
•
•
Flash for homepage slideshow
JavaScript (jQuery “Lightbox 2”) for popup pix
on interior pages

52. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Multimedia producer

53. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Multimedia producer
•
Six photo shoots; over 400 pix to yield
approximately 45 new photos

54. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Multimedia producer
•
Six photo shoots; over 400 pix to yield
approximately 45 new photos
•
Scan and edit 35 snapshots provided by client

55. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Multimedia producer
•
Six photo shoots; over 400 pix to yield
approximately 45 new photos
•
•
Scan and edit 35 snapshots provided by client
Old site featured two-and-half-minute audio
slideshow

58. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Putting it all together

59. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Putting it all together
http://www.amicscatering.com