web design talk

8/22/2019 Web Design Talk

1/40

Intelligent (Web) DesignIntelligent (Web) Design


2/40

THE STATE OF AFFAIRSTHE STATE OF AFFAIRS

Graphic design on the corporate web isGraphic design on the corporate web islargely bland, passionless, andlargely bland, passionless, and

unengaging.unengaging.

Why is this?Why is this?


3/40

It is the constant mantra of todaysIt is the constant mantra of todays

usability expert that a site requiresusability expert that a site requiresmore than frontmore than front--end style toend style to

succeed.succeed.

The usability experts got togetherThe usability experts got together

and basically dismissed largeand basically dismissed large

elements of creative web designelements of creative web designcompletely.completely.

They declared rigorous siteThey declared rigorous site--buildingbuildinglaws rather than the merelaws rather than the mere

guidelines they claim to offer.guidelines they claim to offer.


4/40

Corporations became very wary ofCorporations became very wary of

bad usability.bad usability.

The bad mentality that the web isThe bad mentality that the web is

only big enough for a few types ofonly big enough for a few types ofsites has been persistent. After all,sites has been persistent. After all,

why reinvent the wheel?why reinvent the wheel?

To dismiss frontTo dismiss front--end design as mereend design as mere

icing is to jeopardize the success oficing is to jeopardize the success of

any site.any site.


5/40

The Solution: Personal PassionThe Solution: Personal Passion

In order to move beyond a conservative,In order to move beyond a conservative,copycat style, you must look beyond thecopycat style, you must look beyond theinbred corporate web to the personal sitesinbred corporate web to the personal sites

of todays leading web designers.of todays leading web designers.Visitors should be able to feel your sites.Visitors should be able to feel your sites.

The web is not a database. It is aThe web is not a database. It is acommunications mediumcommunications medium..


6/40

The purposes of this talk are to:The purposes of this talk are to:

Discuss the design process that will helpDiscuss the design process that will help

you to design a valuableyou to design a valuablewebsite/interface/service.website/interface/service.

Outline dos and don'ts.Outline dos and don'ts.

Discuss graphic design concepts thatDiscuss graphic design concepts that

will help improve the aesthetics of yourwill help improve the aesthetics of your

projects.projects.

Point you in the right direction forPoint you in the right direction for

further help.further help.

Help you toHelp you to t h i n k c r i t i ca l l y a b o u t t h i n k c r i t i ca l l y a b o u t w e b s i t e s a n d i n t e r a c t i v e se r v i c e s .w e b s i t e s a n d i n t e r a c t i v e se r v i c e s .


7/40

Web DesignWeb Design

Coming Up:Coming Up:

The design processThe design process Intelligent designIntelligent design

Important considerationsImportant considerations Beware FlashBeware Flash

Dos and dontsDos and donts


8/40

The Design ProcessThe Design Process

Stages:Stages:

Develop the concept. Its here at theDevelop the concept. Its here at thebeginning of the project that you havebeginning of the project that you haveto answer some critical questions.to answer some critical questions.

Design phase: choosing technologiesDesign phase: choosing technologiesthat make sense for the project,that make sense for the project,gathering content.gathering content.

Production. Combine content effectivelyProduction. Combine content effectivelyinto a comprehensive interfaceinto a comprehensive interface

Testing & Redesign Testing & Redesign


9/40

Time ConsiderationsTime Considerations

Everything about designing and producingEverything about designing and producing

an interactive project takes time:an interactive project takes time: time to learn what works on the webtime to learn what works on the web

time to learn the tools of site productiontime to learn the tools of site production

time to produce the finished producttime to produce the finished product

Achieving a good design isAchieving a good design is HARD!HARD! ItItdoesnt come naturally to most, and youdoesnt come naturally to most, and you

wont get it first time.wont get it first time.


10/40

Identify PurposeIdentify Purpose

Target the problem you want theTarget the problem you want the

website/interactive service to solve.website/interactive service to solve. Be problem specific. The better youBe problem specific. The better you

are at defining the desired target,are at defining the desired target,

the better youll be at developing athe better youll be at developing asolution that works, and recognizingsolution that works, and recognizingwhen it doesnt work.when it doesnt work.

Choose the right delivery method.Choose the right delivery method.Why the Web?Why the Web?


11/40

Identify AudienceIdentify Audience

You need to determine the audience youYou need to determine the audience you

are targeting so that you can make yourare targeting so that you can make yourdesign solution as relevant anddesign solution as relevant and

aesthetically compelling to your particularaesthetically compelling to your particular

viewers as possible.viewers as possible. Youll also need some practical informationYoull also need some practical information

about the equipment your audience usesabout the equipment your audience uses

to connect to the Web.to connect to the Web.


12/40

Shaping the SolutionShaping the Solution

If your client needs to improve brand awareness,If your client needs to improve brand awareness,then your strategy will be to ensure that visitorsthen your strategy will be to ensure that visitors

leave the site with the knowledge that yourleave the site with the knowledge that yourclients brand is equal to or better than theclients brand is equal to or better than thecompetition.competition.

For a nonprofit organization, or even for theFor a nonprofit organization, or even for the

customer support division of a forcustomer support division of a for--profit business,profit business,the environment you design will be different stillthe environment you design will be different still one that ensures that the information andone that ensures that the information andresources that your visitors seek are easilyresources that your visitors seek are easily

available.available. A lw a y s d e s i g n w i t h a g o a l i n m i n d . D o n t g e t A lw a y s d e s i g n w i t h a g o a l i n m i n d . D o n t g e t

c a r r i e d a w a y i n a e s t h e t i c f l u f f , a n d ca r r i e d a w a y i n a e s t h e t i c f l u f f , a n d o r n a m e n t a l i r r e l e v a n ce .o r n a m e n t a l i r r e l e v a n c e .


13/40

Shaping and ReshapingShaping and Reshaping

You cant just design a site, hand it overYou cant just design a site, hand it over

to your clients, and walk away.to your clients, and walk away. Built into your site should be a way ofBuilt into your site should be a way of

assessing whether you are attracting theassessing whether you are attracting the

audience you want to reach, and whetheraudience you want to reach, and whetherthey are getting your message.they are getting your message.

Be flexible from the start.Be flexible from the start.

Make simple prototypes. Run yourMake simple prototypes. Run your

creations by your group members/peers.creations by your group members/peers.


14/40

The Other Kind of ContentThe Other Kind of Content

The clients message isnt the only contentThe clients message isnt the only content

thats important to the website. Webthats important to the website. Webvisitors are not a captive audience.visitors are not a captive audience. YouYou

must grab their attention!must grab their attention!

In exchange for the time they spend atIn exchange for the time they spend atyour site or using your service, visitorsyour site or using your service, visitors

want information they can apply, toolswant information they can apply, tools

they can use, beauty they can enjoy,they can use, beauty they can enjoy,games they can play, freebies they cangames they can play, freebies they can

download, or links to other interestingdownload, or links to other interesting

sites they can visit.sites they can visit.


15/40

Technology Is Not ContentTechnology Is Not Content

It can be tempting to show off yourIt can be tempting to show off your

upup--toto--thethe--minute technologicalminute technologicalprowess by embellishing a serviceprowess by embellishing a servicewith bells and whistles.with bells and whistles.

Too many bells and whistles canToo many bells and whistles canmake a sites content harder to getmake a sites content harder to getto.to.

Nothing you build into theNothing you build into theexperience should dilute orexperience should dilute or

detract from your project goals.detract from your project goals.


16/40

What Technology Can DoWhat Technology Can Do

Motion, sound, interactivity, and theMotion, sound, interactivity, and the

standard wellstandard well--designed staticdesigned staticgraphics, can help engage visitors ingraphics, can help engage visitors in

your site, and can also help themyour site, and can also help them

remember it.remember it.

Technology, when used intelligently,Technology, when used intelligently,

can reinforce your message, orcan reinforce your message, orpresent information in new andpresent information in new and

interesting ways.interesting ways.


17/40

Matching the Technology to theMatching the Technology to the

AudienceAudience HighHigh--tech audiencetech audience highhigh--techtech

website with all the latest gadgetswebsite with all the latest gadgetsand plugins.and plugins.

General audienceGeneral audience

tried and testedtried and testedtechnologies. Using the latesttechnologies. Using the latest

technology could isolate your sitetechnology could isolate your site

from visitors who arenfrom visitors who arent wellt wellequipped to experience it.equipped to experience it.


18/40

Other TechnologicalOther Technological

ConsiderationsConsiderations User computer connection andUser computer connection and

processor speeds.processor speeds. Screen size.Screen size.

Browser version.Browser version. HTML tag issues.HTML tag issues.


19/40

Beware FlashBeware Flash Macromedia Flash is a wonderful graphical toolMacromedia Flash is a wonderful graphical tool

for enhancing your project when used properly.for enhancing your project when used properly.

Unfortunately, Flash is one of the most abusedUnfortunately, Flash is one of the most abusedtechnologies out there (see examples later).technologies out there (see examples later).

As one of my favorite web design authorsAs one of my favorite web design authorssuccinctly put it:succinctly put it:

What happened was that Flash came along, andWhat happened was that Flash came along, andall these punk teen designers abandoned userall these punk teen designers abandoned user--

friendly interfaces to run amuck in a swamp offriendly interfaces to run amuck in a swamp ofwhirling polygonal irrelevance.whirling polygonal irrelevance. CurtCurtCloningerCloninger


20/40

MetaphorMetaphor Establish a unified metaphor for your projectEstablish a unified metaphor for your project

site/service.site/service.

Once the concept has been developed, its timeOnce the concept has been developed, its time

to design the frontto design the front--end that youll use to deliverend that youll use to deliverthe sites content to its visitors.the sites content to its visitors.

If your site design uses a metaphor, it willIf your site design uses a metaphor, it willprovide a sort of physical reality for the mentalprovide a sort of physical reality for the mental

space that visitors inhabit while they are there.space that visitors inhabit while they are there. Consider not only how well the metaphor willConsider not only how well the metaphor will

work to carry your message and appeal to yourwork to carry your message and appeal to your

audience, but also whether the metaphor is oneaudience, but also whether the metaphor is oneyoull be able to use consistently throughout theyoull be able to use consistently throughout thesite.site.


21/40

PersonalityPersonality

Your service will need its own uniqueYour service will need its own unique

identity and personality for it toidentity and personality for it tostand out.stand out.

Will the delivery of your informationWill the delivery of your informationbe funny, techy, hip, grungy, orbe funny, techy, hip, grungy, or

formal?formal?

Whatever you choose,Whatever you choose, bebeconsistent.consistent.


22/40

StyleStyle One of the most important contributors toOne of the most important contributors to

the flavor of your design is its stylethe flavor of your design is its style itsits

layout, graphics, typefaces, colors, and solayout, graphics, typefaces, colors, and so

on.on.

The layout of the site needs to be flexibleThe layout of the site needs to be flexible

enough to support changing content andenough to support changing content anddifferent media types.different media types.

Make use of dimensionalityMake use of dimensionality the humanthe human

world isnt flat.world isnt flat. Try to match your metaphor with yourTry to match your metaphor with your

style.style.


23/40

Site OrganizationSite Organization

Most people approach a website with twoMost people approach a website with twoquestions in mind: Whats here for me? And howquestions in mind: Whats here for me? And how

do I get to it?do I get to it? When you organize the information in a Web site,When you organize the information in a Web site,

youll feel the tension between wanting to makeyoull feel the tension between wanting to make

lots of options available on the surface so visitorslots of options available on the surface so visitorsdont have to do a lot of digging, and wanting todont have to do a lot of digging, and wanting togive visitors a head start on sorting out whatsgive visitors a head start on sorting out whatsimportant.important.

In general there should be no more than 6 to 10In general there should be no more than 6 to 10main options available onmain options available on--screen at one time.screen at one time.


24/40

Guide The UserGuide The User

Create a path of least resistance for theCreate a path of least resistance for theuser. No one knows better than theuser. No one knows better than thedesigner the best way to experience thedesigner the best way to experience thesite.site.

Make this golden path obvious to usersMake this golden path obvious to userswithout forcing them into a linearwithout forcing them into a linearpresentation.presentation.

Create a storyboard.Create a storyboard. Ask yourselfAsk yourselfwhether the content or organizationwhether the content or organizationcan be simplified, made more intuitivecan be simplified, made more intuitiveor powerful.or powerful.


25/40

Gathering AssetsGathering Assets The next step in the process of developing theThe next step in the process of developing the

project is to determine where you will get the allproject is to determine where you will get the allcontent, orcontent, or assetsassets (all the text, visual, and audio(all the text, visual, and audioelements).elements).

As you gather some materials and plan to createAs you gather some materials and plan to createor buy others, it will be important to set standardor buy others, it will be important to set standardfor the way the assets will look and sound, andfor the way the assets will look and sound, and

how everything will be approved, processed,how everything will be approved, processed,delivered, and backed up.delivered, and backed up.

To end up with a cohesive Web site, itsTo end up with a cohesive Web site, itsimportant toimportant to establish clear standards forestablish clear standards for

contentcontent, and make sure everyone understands, and make sure everyone understandsand follows them.and follows them.

Make assetMake asset--gathering a group activity.gathering a group activity.


26/40

Keeping the Goal in MindKeeping the Goal in Mind

As your project is assembled,As your project is assembled,remember to stay focused onremember to stay focused on

communicating what the visitorcommunicating what the visitorneeds to take away from the site andneeds to take away from the site andon making the visit as positive anon making the visit as positive an

experience as possible.experience as possible. If youre in doubt how far to pushIf youre in doubt how far to push

the technology and your capabilitiesthe technology and your capabilitieswith it, keep in mind that simplicitywith it, keep in mind that simplicityis often best.is often best.


27/40

The Creative Process&

Graphics Design Techniques

L i F d i


28/40

Laying a FoundationLaying a Foundation Once an overall metaphor or style has beenOnce an overall metaphor or style has been

determined for a particular project, thedetermined for a particular project, thebackground becomes the visual foundation for allbackground becomes the visual foundation for allof the other graphics.of the other graphics.

Whether the interactive experience is going to beWhether the interactive experience is going to befriendly, highfriendly, high--tech, or surreal is determined intech, or surreal is determined inlarge part by the background graphics.large part by the background graphics.

There are almost no limits to the imagery, style,There are almost no limits to the imagery, style,and techniques that can be used to create aand techniques that can be used to create abackground.background.

Tiled patters or simplified graphics with largeTiled patters or simplified graphics with largeareas of flat color take advantage of losslessareas of flat color take advantage of losslesscompression technologies using runcompression technologies using run--lengthlength--encoding in the file formats such as GIF and PNG.encoding in the file formats such as GIF and PNG.

D t U d ti t T tD t U d ti t T t


29/40

Dont Underestimate TextDont Underestimate Text

Text and its wide range of typefaces can be aText and its wide range of typefaces can be avery powerful tool in establishing a look for yourvery powerful tool in establishing a look for yoursite.site.

Dont automatically assume that you have toDont automatically assume that you have tohave lots of images.have lots of images.

Text can be made quite versatile. Use graphicsText can be made quite versatile. Use graphicsprograms to incorporate special typefaces, textprograms to incorporate special typefaces, text

orientations, dimensional effects, and coloring.orientations, dimensional effects, and coloring. Use keywords that help deliver your message.Use keywords that help deliver your message.

The user will naturally be drawn to them.The user will naturally be drawn to them.

If you can combine an intelligent use of textIf you can combine an intelligent use of textgraphics with contrast and color, youll be well ongraphics with contrast and color, youll be well onyour way to an attractive solution.your way to an attractive solution.

CC t t P


30/40

Content PurposeContent Purpose For every graphic or special visual page element youFor every graphic or special visual page element youincorporate into your design (e.g. icons, logos, flashincorporate into your design (e.g. icons, logos, flash

elements) ask yourself:elements) ask yourself: What message does thisWhat message does thiselement convey? What is its purpose on theelement convey? What is its purpose on thepage?page?

If you find yourself dropping in lots of random clipart,If you find yourself dropping in lots of random clipart,unlabelled or nonunlabelled or non--functional graphics, stop and slapfunctional graphics, stop and slapyourself.yourself.

Everything you incorporate into your pages shouldEverything you incorporate into your pages shouldsend a message, and promote consistency with thesend a message, and promote consistency with therest of the design.rest of the design.

Avoid ornamental embellishments that add no valueAvoid ornamental embellishments that add no valueto your site and just slow the experience for the userto your site and just slow the experience for the user

as they wait to download it.as they wait to download it.

A S


31/40

Asset SourcesAsset Sources One of the biggest challenges in creating aOne of the biggest challenges in creating a

large interactive project is how to createlarge interactive project is how to create

all of the stunning visuals you need toall of the stunning visuals you need to

communicate ideas.communicate ideas. Creative combinations of stock photos andCreative combinations of stock photos and

digital clip art can be invaluable.digital clip art can be invaluable.

Develop your graphics by adapting imagesDevelop your graphics by adapting images

you find online.you find online.

If you are up to it, create all your ownIf you are up to it, create all your owngraphics using Photoshop, Fireworks andgraphics using Photoshop, Fireworks and

other tools like digital cameras.other tools like digital cameras.


32/40

Graphics TechniquesGraphics Techniques

If you are creating your own graphics,If you are creating your own graphics,consider using the following techniques toconsider using the following techniques to

enhance the visuals in your projects:enhance the visuals in your projects: ShadowingShadowing

Beveling, & EmbossingBeveling, & Embossing

Color gradients, Lighting EffectsColor gradients, Lighting Effects FilteringFiltering

Motion trailsMotion trails

BlurringBlurring Stroke effectsStroke effects

RolloversRollovers


33/40

Other Graphics IdeasOther Graphics Ideas

Fit text to paths.Fit text to paths.

Use text as a mask on other images.Use text as a mask on other images. Punch out shapes from other graphics.Punch out shapes from other graphics.

Use texturing on lines.Use texturing on lines.

Group similar elements.Group similar elements. Use vibrant colors & contrasts.Use vibrant colors & contrasts.

Combine B&W elements with bright solidCombine B&W elements with bright solidcolor for a stunning effect.color for a stunning effect.

Combine text with images.Combine text with images.


34/40

Other Design RemindersOther Design Reminders


35/40

The Navigational InterfaceThe Navigational Interface

The navigational interface should fit theThe navigational interface should fit themetaphor you decided upon.metaphor you decided upon.

The navigational interface should be almostThe navigational interface should be almosttransparent, and should not obstruct thetransparent, and should not obstruct theinformation the user is trying to reach.information the user is trying to reach.

The interface should always indicate the currentThe interface should always indicate the currentlocation of the user, and should provide methodslocation of the user, and should provide methodsof retracing their steps.of retracing their steps.

The interface links should be descriptive if theyThe interface links should be descriptive if they

have a text component, and any icons usedhave a text component, and any icons usedshould reflect the destination page content.should reflect the destination page content.


36/40

The Role of The HomepageThe Role of The Homepage Establishes the purpose and message ofEstablishes the purpose and message of

the site.the site.

Reveals the main navigational categories.Reveals the main navigational categories. Sets the tone and style for the rest of theSets the tone and style for the rest of the

site.site.

Initiates the metaphor.Initiates the metaphor.

NOTE: avoid unnecessary splash pagesNOTE: avoid unnecessary splash pages

they often add absolutely nothing to thethey often add absolutely nothing to thesite.site.


37/40

Communicate withCommunicate with clarityclarity. If you are. If you are

ambiguous you will lose your audience.ambiguous you will lose your audience. Use aUse a common syntaxcommon syntax andand clearclear

imageryimagery and symbols that your audienceand symbols that your audience

will be familiar with.will be familiar with. Maintain design and contentMaintain design and content consistencyconsistency..

Take advantage ofTake advantage ofcontrastcontrast..

Strive to make your designStrive to make your design uncluttereduncluttered..

Remember the Web is aRemember the Web is a dynamicdynamic

communicationcommunication

medium with manymedium with many

possibilities for informationpossibilities for informationrepresentation.representation.

Use the visitorsUse the visitors sensessenses to draw them in.to draw them in.


38/40

Other Project TipsOther Project Tips

Schedule weekly 2Schedule weekly 2--hour group meetingshour group meetingsto discuss the project progress, design,to discuss the project progress, design,

pending tasks, project roles, technicalpending tasks, project roles, technicalissues. Come with questions and ideas forissues. Come with questions and ideas foryour peers.your peers.

Use prototyping to evaluate multipleUse prototyping to evaluate multiplepossible designs, and get feedback frompossible designs, and get feedback fromthe whole team.the whole team.

If you are coding parts of your project,If you are coding parts of your project,use Concurrent Versioning System (CVS)use Concurrent Versioning System (CVS)to solve version issues within yourto solve version issues within yourdevelopment team, and to streamlinedevelopment team, and to streamlinebackups and module checkouts.backups and module checkouts.


39/40

Extra HelpExtra Help

See the course website forSee the course website for

references & books.references & books. See either Prof. Barrett or myself forSee either Prof. Barrett or myself for

project design advice.project design advice.

Visit IS for help with setting upVisit IS for help with setting up

servers on mit.eduservers on mit.edu


40/40

Thinking Critically About Websites &Thinking Critically About Websites &Interactive ServicesInteractive Services

(class discussion of sites)(class discussion of sites)
http://web.mit.edu/21w785/www/sites.htmlhttp://web.mit.edu/21w785/www/sites.htmlhttp://web.mit.edu/21w785/www/sites.htmlhttp://web.mit.edu/21w785/www/sites.htmlhttp://web.mit.edu/21w785/www/sites.htmlhttp://web.mit.edu/21w785/www/sites.html

web design talk

Documents