Top Banner
The Web Design Process The Case of amicscatering.com Bruce Clary, McPherson College, McPherson, Kansas CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
59
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Jeremy Gleason Iscope Digital - Web Design

The Web Design ProcessThe Case of amicscatering.com

Bruce Clary, McPherson College, McPherson, Kansas

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 2: Jeremy Gleason Iscope Digital - Web Design
Page 3: Jeremy Gleason Iscope Digital - Web Design

Celebration

Page 4: Jeremy Gleason Iscope Digital - Web Design

Celebration

Welcoming

Page 5: Jeremy Gleason Iscope Digital - Web Design

WarmCelebration

Welcoming

Page 6: Jeremy Gleason Iscope Digital - Web Design

WarmCelebration

WelcomingSunny

Page 7: Jeremy Gleason Iscope Digital - Web Design
Page 8: Jeremy Gleason Iscope Digital - Web Design
Page 9: Jeremy Gleason Iscope Digital - Web Design
Page 10: Jeremy Gleason Iscope Digital - Web Design
Page 11: Jeremy Gleason Iscope Digital - Web Design
Page 12: Jeremy Gleason Iscope Digital - Web Design

Creative Thinker & Researcher

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 13: Jeremy Gleason Iscope Digital - Web Design

Creative Thinker & Researcher

• Interview client

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 14: Jeremy Gleason Iscope Digital - Web Design

Creative Thinker & Researcher

• Interview client• Spend time on the scene

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 15: Jeremy Gleason Iscope Digital - Web Design

Creative Thinker & Researcher

• Interview client• Spend time on the scene• Seek out ideas & inspiration

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 16: Jeremy Gleason Iscope Digital - Web Design

Creative Thinker & Researcher

• Interview client• Spend time on the scene• Seek out ideas & inspiration• Sketch!

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 17: Jeremy Gleason Iscope Digital - Web Design

From the InterviewAnne’s Redesign Keywords

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 18: Jeremy Gleason Iscope Digital - Web Design

From the InterviewAnne’s Redesign Keywords

• “Old World”

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 19: Jeremy Gleason Iscope Digital - Web Design

From the InterviewAnne’s Redesign Keywords

• “Old World”• “Spanish street garden”

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 20: Jeremy Gleason Iscope Digital - Web Design

From the InterviewAnne’s Redesign Keywords

• “Old World”• “Spanish street garden”• More mature, sophisticated, adult

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 21: Jeremy Gleason Iscope Digital - Web Design
Page 22: Jeremy Gleason Iscope Digital - Web Design
Page 23: Jeremy Gleason Iscope Digital - Web Design
Page 24: Jeremy Gleason Iscope Digital - Web Design
Page 25: Jeremy Gleason Iscope Digital - Web Design

Art Director and Graphic Designer

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 26: Jeremy Gleason Iscope Digital - Web Design

• PSD comps

Art Director and Graphic Designer

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 27: Jeremy Gleason Iscope Digital - Web Design
Page 28: Jeremy Gleason Iscope Digital - Web Design
Page 29: Jeremy Gleason Iscope Digital - Web Design
Page 30: Jeremy Gleason Iscope Digital - Web Design
Page 31: Jeremy Gleason Iscope Digital - Web Design
Page 32: Jeremy Gleason Iscope Digital - Web Design
Page 33: Jeremy Gleason Iscope Digital - Web Design
Page 34: Jeremy Gleason Iscope Digital - Web Design
Page 35: Jeremy Gleason Iscope Digital - Web Design
Page 36: Jeremy Gleason Iscope Digital - Web Design
Page 37: Jeremy Gleason Iscope Digital - Web Design
Page 38: Jeremy Gleason Iscope Digital - Web Design
Page 39: Jeremy Gleason Iscope Digital - Web Design
Page 40: Jeremy Gleason Iscope Digital - Web Design

Information & Interface Designer

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 41: Jeremy Gleason Iscope Digital - Web Design

Information & Interface Designer

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 42: Jeremy Gleason Iscope Digital - Web Design

Information & Interface Designer

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 43: Jeremy Gleason Iscope Digital - Web Design

Writer and Editor

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 44: Jeremy Gleason Iscope Digital - Web Design

• Edit and suggest revisions for all copy provided by client

Writer and Editor

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 45: Jeremy Gleason Iscope Digital - Web Design

• Edit and suggest revisions for all copy provided by client

• Write captions for the 68 photos that make up the galleries

Writer and Editor

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 46: Jeremy Gleason Iscope Digital - Web Design

Front-end Coder

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 47: Jeremy Gleason Iscope Digital - Web Design

Front-end Coder

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 48: Jeremy Gleason Iscope Digital - Web Design

Front-end Coder

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 49: Jeremy Gleason Iscope Digital - Web Design

Scripter

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 50: Jeremy Gleason Iscope Digital - Web Design

• Flash for homepage slideshow

Scripter

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 51: Jeremy Gleason Iscope Digital - Web Design

• Flash for homepage slideshow• JavaScript (jQuery “Lightbox 2”) for popup pix

on interior pages

Scripter

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 52: Jeremy Gleason Iscope Digital - Web Design

Multimedia producer

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 53: Jeremy Gleason Iscope Digital - Web Design

• Six photo shoots; over 400 pix to yield approximately 45 new photos

Multimedia producer

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 54: Jeremy Gleason Iscope Digital - Web Design

• Six photo shoots; over 400 pix to yield approximately 45 new photos

• Scan and edit 35 snapshots provided by client

Multimedia producer

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 55: Jeremy Gleason Iscope Digital - Web Design

• 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

Multimedia producer

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 56: Jeremy Gleason Iscope Digital - Web Design
Page 57: Jeremy Gleason Iscope Digital - Web Design
Page 58: Jeremy Gleason Iscope Digital - Web Design

Putting it all together

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Page 59: Jeremy Gleason Iscope Digital - Web Design

http://www.amicscatering.com

Putting it all together

CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION