CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

The Web Design Process
The Case of amicscatering.com

Bruce Clary, McPherson...
ation
elebr
C
ation
elebr
C

ming
Welco
ation
elebr
C

Warm

ming
Welco
ation
elebr
C

Sunny

Warm

ming
Welco
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Creative Thinker & Researcher
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Creative Thinker & Researcher
•

Interview client
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Creative Thinker & Researcher
•
•

Interview client
Spend time on the scene
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Creative Thinker & Researcher
•
•
•

Interview client
Spend time on the scen...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Creative Thinker & Researcher
•
•
•
•

Interview client
Spend time on the sc...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

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

From the Interview
Anne’s Redesign Keywords

•

“Old World”
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

From the Interview
Anne’s Redesign Keywords

•
•

“Old World”
“Spanish stree...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

From the Interview
Anne’s Redesign Keywords

•
•
•

“Old World”
“Spanish str...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Art Director and Graphic Designer
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Art Director and Graphic Designer
•

PSD comps
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Information & Interface Designer
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Information & Interface Designer
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Information & Interface Designer
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Writer and Editor
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Writer and Editor
•

Edit and suggest revisions for all copy provided
by cli...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Writer and Editor
•

Edit and suggest revisions for all copy provided
by cli...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Front-end Coder
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Front-end Coder
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Front-end Coder
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Scripter
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Scripter
•

Flash for homepage slideshow
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Scripter
•
•

Flash for homepage slideshow
JavaScript (jQuery “Lightbox 2”) ...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Multimedia producer
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Multimedia producer
•

Six photo shoots; over 400 pix to yield
approximately...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Multimedia producer
•

Six photo shoots; over 400 pix to yield
approximately...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Multimedia producer
•

Six photo shoots; over 400 pix to yield
approximately...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Putting it all together
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Putting it all together
http://www.amicscatering.com
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
The Web Design Process: A Case Study
Upcoming SlideShare
Loading in …5
×

The Web Design Process: A Case Study

1,335 views

Published on

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

Published in: Education, Design, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,335
On SlideShare
0
From Embeds
0
Number of Embeds
608
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

The Web Design Process: A Case Study

  1. 1. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION The Web Design Process The Case of amicscatering.com Bruce Clary, McPherson College, McPherson, Kansas
  2. 2. ation elebr C
  3. 3. ation elebr C ming Welco
  4. 4. ation elebr C Warm ming Welco
  5. 5. ation elebr C Sunny Warm ming Welco
  6. 6. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Creative Thinker & Researcher
  7. 7. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Creative Thinker & Researcher • Interview client
  8. 8. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Creative Thinker & Researcher • • Interview client Spend time on the scene
  9. 9. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Creative Thinker & Researcher • • • Interview client Spend time on the scene Seek out ideas & inspiration
  10. 10. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Creative Thinker & Researcher • • • • Interview client Spend time on the scene Seek out ideas & inspiration Sketch!
  11. 11. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION From the Interview Anne’s Redesign Keywords
  12. 12. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION From the Interview Anne’s Redesign Keywords • “Old World”
  13. 13. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION From the Interview Anne’s Redesign Keywords • • “Old World” “Spanish street garden”
  14. 14. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION From the Interview Anne’s Redesign Keywords • • • “Old World” “Spanish street garden” More mature, sophisticated, adult
  15. 15. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Art Director and Graphic Designer
  16. 16. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Art Director and Graphic Designer • PSD comps
  17. 17. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Information & Interface Designer
  18. 18. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Information & Interface Designer
  19. 19. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Information & Interface Designer
  20. 20. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Writer and Editor
  21. 21. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Writer and Editor • Edit and suggest revisions for all copy provided by client
  22. 22. 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
  23. 23. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Front-end Coder
  24. 24. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Front-end Coder
  25. 25. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Front-end Coder
  26. 26. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Scripter
  27. 27. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Scripter • Flash for homepage slideshow
  28. 28. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Scripter • • Flash for homepage slideshow JavaScript (jQuery “Lightbox 2”) for popup pix on interior pages
  29. 29. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Multimedia producer
  30. 30. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Multimedia producer • Six photo shoots; over 400 pix to yield approximately 45 new photos
  31. 31. 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
  32. 32. 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
  33. 33. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Putting it all together
  34. 34. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Putting it all together http://www.amicscatering.com

×