today, october 4 th 2017 - web design | smu certificate …€¦ · experience the process used by...
TRANSCRIPT
TODAY,OCTOBER4TH 2017� Learnabout…
� Me
� Capstone
� You
� LearnabouttheCapstoneWebsiteProject(CWP)
� Processofbringingawebsitetotheweb
� StatementofWork,Proposals,CreativeBrief,Wireframes,andSitemaps
� AdobeCreativeCloud,Assets,andLibraries
� OverviewofDreamweaverTutorialassignment
Questions,[email protected]/Text(949)460-3771
ABOUTKARENDAMWIJK� Teaching:MonroeCountyCommunityCollege(inMichigan)from2006-2008;
GraphicDesignConcepts,andPhotoshopGraphics.� Teaching:SMUCAPECertificateProgramssinceMarch2016:WebDesign;“Web
GraphicsandInterfaceDesign”and“Capstone.”GraphicDesign;“Photoshop”and“Acrobat.”
� Corporate:Instructionaldesign,graphic/printdesign,webdesign,video/audiodirection,teammanagement:YamahaMotorsportsHQ,JohnnyRocketsHQ,andViverae (employeehealthmgmt.companyinDallas).
� Agency:Flashanimationandwebgraphicdesign:MediaGenesis(GM,Chrysler,Dodge,Scion,Kia),IgniteHealth(iLasik,Merck,andotherhealthbrands).
� Freelance: 10+yrs,full-timeLLCAugust2014:Currentcontractsinthehealthcare/medicalfield;UTSouthwestern,SmartBeat,andQuestMedical.
� Personal:BAAinGraphicDesign2006,MastersdegreeinEducationalTechnology2018.Ihavean1yearolddaughternamedEvie.
Questions,[email protected]/Text(949)460-3771
ABOUTWEBDESIGNCAPSTONE� Experiencetheprocessusedbyprofessionalfreelancersanddesign
firmstocreateprofessionalqualitywebsites� You’lllearnaboutAdobeCreativeCloud’ssoftwaretodevelopwebsites
� LearnDreamweaverandPhotoshop(forweb!)
� Followasimplified4-stepprocessofbringingawebsitetotheweb� Publishawebsitewithinthecontextofasimulatedreal-worldweb
designproject� Tobeusedasasamplewebsiteinyourportfolio
� Syllabuswithdetailsoneachclasscanbedownloadedatwww.KarenDamwijk.com/capstone
Questions,[email protected]/Text(949)460-3771
ABOUTWEBDESIGNCAPSTONE� MeetonlineusingZoomat6:30pm
� October4thand18th
� November1stand15th
� Meeton-campusat6:30pm� December6thinroom101E
� Ifyoucannotattendon-campusonthisdate,thereisanalternativeoptionwewilldiscussatalaterdate.
Questions,[email protected]/Text(949)460-3771
ABOUTWEBDESIGNCAPSTONE� Ifyoucannotattendanonlineclass,e-mailmesoIknowtosendyou
thelinktoviewtherecordedmeeting� Workatyourownpace—assignmentsduefrequently,sostayontrack!� Success=workthroughDreamweavertutorials,andaskinstructorfor
specifichelpwithaproblemoradesiredfeatureinyourwebsitetoreceivecustomizedfeedbackintheformoftutorials,videos,processsteps,code,etc.
� Opencommunicationwithmethroughourpersonalemailthread
Questions,[email protected]/Text(949)460-3771
ABOUTYOU
Questions,[email protected]/Text(949)460-3771
� Respondtomyemail(sentonMonday)orsendanewemailto:[email protected]
� Subject:“[YourName]:CapstoneFall2017”� Tellmetwothings:
1. Yourfavoriteclassorinstructoryou’vehadintheprogramsofarandwhy
2. YourfeelingsaboutusingDreamweavertocodeawebsite:
� You’refamiliarwithDreamweaveralready
� Readytolearnsomethingnew!
� Notsohappybecauseyou’vealreadybeentaughttocodeinanotherprogramandyoudon’twanttohavetolearn*another*softwareJ
� Otherfeelings...
Anyquestionsyet?
CAPSTONEWEBSITEPROJECTYouwillselecta“client”todesignawebsiteforasyourfinalclassproject,andintendedtobeasamplewebsiteforyourportfolio
Foodtruck
Winebar
Hairsalon
CAPSTONEWEBSITEPROJECT
� Chooseatypeofcompany:� Foodtruck� Winebar� Hairsalon
� Makeupacompanynamesoyoumaywanttoresearchavailabledomains
� Ifyoualreadyhaveawebsitewithaccesstohostingyoucanhostat:“yourname.com/companyname”
Questions,[email protected]/Text(949)460-3771
� Youcanalsobuy“yourname.com”orsomethingyouwilluseagain
� Wewilllearnaboutdomains,hosting,FTPaccess,andsettingupasiteinDreamweaverinClass3
Due Assignment DeliverablesOct.10st CWP1.WebsitePlan AprofessionalStatementofWorkoraWebProposal(yourchoice,seeexampleson
www.KarenDamwijk.com/capstone) thatoutlineswebsitetimeline,deliverables,scopeofwork,andcost.ItcanbedesignedwithyourfavoriteAdobesoftwareorinWord/Pagesonaprofessionallookingletterhead/template.
Oct.17th CWP2.Sitemap,Wireframe,andWebDesignProposalPresentation
Sitemap(5pts),Wireframe(5pts)presentedinamockWebDesignProposalPresentationusingZoom(5pts).Youwillrecord aformal,3to5-minutewebproposalforyourclient.Itisexpectedthatyourunthepresentationlikeaprofessional,contractedwebdesignerproposingawebsitetotheirclient.YouwillregisterforafreeaccountonZoomandintroduceyourself(usingvideo/webcam)thenpresenttherequireddeliverables(usingscreensharing)andanythingadditional(logoideas,websitesofcompetitors,etc.).Therecordedpresentationshouldbesavedtoyourcomputer(local)andthenuploadedtoDropboxoranotheronlinestorageaccountandalinkemailedwithdeliverables:• Sitemap;themaporoutlineofallpagesshowingpagesyou’llcompletevs.
proposed/futurepages(designedinBalsalmiq,Microsoft, orAdobesoftware)• HomepageWireframe;one low-fidelitywireframedesignedinPhotoshop
showingcontentareassuchasmenu, heroimage,blocksoftext,buttons,etc.
CAPSTONEWEBSITEPROJECT
Due Assignment DeliverablesOct.31st CWP3.Create
WebpagesDesignyourwebsiteinPhotoshopusingArtboards.Ataminimum, designthegraphiclayoutof theHomepageinbothwebandmobileversionsisrequired.ExportArtboardsasasinglePDF.
Nov. 21st CWP4.PublishWebsite
Purchaseadomainand1monthofhosting(ifyouhaven’tpurchased“yourname.com”youmaydosoforthisproject,andifyoualreadyhaveFTPaccesstoawebsite,youcansetupyourCWPatafolder/subdomain),andsetuptheFTPinDreamweavertopublishcomingsoonorHomepage(ataminimum,uploadablankindex.html withyourname/companyasthepagetitleorah1header).
Dec.6th CWP5.PresentWebsite
Ahomepage(10pts)andatleastonemorepagewithcontent(10pts),andacontactpage/form(10pts).Ashort5-minute,verbalpresentation(10pts).
CAPSTONEWEBSITEPROJECT
http://amberbydesign.com/grape/index.html http://lustywino.com/
WEBDESIGNPROCESSCovering2stepsofour4-stepprocesstobringawebsitetotheweb.
WEBSITEPROCESS
1. Plan2. Wireframe3. Create4. Publish
WEBSITEPROCESS,STEPONE…?
� Intro.toWebDesignyoulearnedaboutthewebsiteprocessbeginningwith“DefiningtheProject.”
� Thediscoveryphasebeginswithakick-offmeetinginwhichtheprojectisofficiallystarted.
� ResearchandFeedback;competitivelandscape,theaudience,thegoals.
� ClientSurvey—Pg 22-23inyour“introtowebdesign”coursemanual
“CANYOUMAKEMEAWEBSITE?”� Takethetimetoidentifyiftheproject
andtheclientisagood"fit"foryouandyourcompany
� Doingresearchupfrontwillsaveyoutime/money/relationshipsintheend
� Takingprojectsisatwowaystreet:youhavetheabilitytopickandchooseclientsandprojects
Isthetimeworththemoney?
Somethingtobuildyourportfolio?
Areimportantrelationshipsat
stake?
ACCEPTINGACLIENT/PROJECTScreeningtheClientandtheProject� Q:Howdoyouknowifclientsareseriousor'justlooking'?� Q:Howdoyouscreenclientssoyou’renotjustdoingworkforfree?
THEGOODCLIENTAgoodclienthassomeofthefollowingattributes:� GoalOriented:focusedonbigpicture� Answersquestionnaireinclear&detailedmanner� SuppliesaRequestforProposal(RFP),oroutlineofgoalsandscope� UnderstandstheWebenvironmentandprocess� Clientissomeonewhogivesfinalsign-offandapproval� Hasa"team"approach� Getsyoucontentontime� Ispartofthesolutioninsteadoftheproblem
THEBAD NOTSOIDEALCLIENTSomethingstowatchoutfor:� Usually…family,friends,yourbestfriend’smother,oryourfriend’swife� A‘getitupquick’attitude,unrealisticschedulerequests� Askstocreateademosite,justtogetsomethingupASAP� Smallbudget,swiftdeadline� NounderstandingofWebdevelopmentprocess� Isamiddleman,andnotfinalapproval� Doesn'tknowwhatthecontentshouldbe
COMMUNICATIONISKEY
HowmanyF’scanyoufindinthephraseabove?
COMMUNICATIONISKEY
Theansweris6!
COMMUNICATIONISKEY� Communicationiskeytoavoidfutureproblems� Manageexpectationsfortheclient� Useaclientsurvey/questionnairetodefineobjectives� Proposal:Initialdocumentto‘kick-off’project� StatementofWork:Acontracttoclearlydefineworkingrelationship� CreativeBrief:Adeliverableonceworkbeginstoplanawebsite
PROPOSAL
� Proposal(informal andformal)� ClientNeeds,ClientGoals,
ClientObjectives,GoalsandObjectives
� RecommendedSolution,RecommendedStrategy,Benefits
� FeeSummary,FeeSchedule,ProjectPricing
� CalltoAction,NextSteps,andContactInformation
Outlinesbudget,timing,andscopeoftheprojectinabriefmanner.
STATEMENTOFWORK
� StatementofWork(orContract)� Objectives(thewhy)� Scope(thehow andwhat –
deliverables,notoptions)� CreativeBrief� Domainandhostingsetup� Pagesforwebsite(listpages)� Featuresforwebsite(forms,
widgets,slideshow,plug-in)
� Schedule� Price� Keyassumptions
� Clientprovideddesignerwithacompletelistofrequirementsforthewebsite.
� “Legalstuff”� Acceptance
Re-statesthecontentsoftheproposalwithagreedterms.
CREATIVEBRIEF
� CreativeBrief� Summary(purpose,goals,objective)� Competition,targetaudience� Brandstyle,tone,orotherdesignnotes� Schedule,duedates,andmilestones� Budget(thealreadyapprovedcost)
Adeliverableusedforprojectmanagementwithgoalsandvisionofwebsite.
CLIENTSURVEY
� YouwillreceiveaClientSurveythatwillgivedetailsaboutthecompany’swebsiteneedsforyoutobuildyourSoW orProposal
� IMPORTANT:Sendmeanemailbytheendoftheweekwithyourselectedcompanyandwhatyouhavenamedit
OTHEREXAMPLES� Exampleswillbeavailableon
www.KarenDamwijk.com/capstone
� CWP1DueTuesday,Oct10th� StatementofWorkoraWeb
Proposal(yourchoice)� Itcanbedesignedwithyourfavorite
AdobesoftwareorinWord/Pagesonaprofessionallookingletterhead/template
WEBSITEPROCESSSTEPTWO
1. Plan2. Wireframe3. Create4. Publish
WEBSITEPROCESSSTEPTWO� Intro.toWebDesignyoulearnedaboutSitemapsandWireframeson
page33and35incoursemanual� Sitemap;theoutlineofallpagestobeusedasabasisfor
navigation/menus.� Determineshowmanypages� Howpagesrelateandlinktooneanother
� Wireframe;sketchedorgraphicdesignsofallmainpagesandcontentareas.
SITEMAP(CWP2DELIVERABLE)� UseBalsamiq,Word,or PowerPoint(orAdobesoftware)tocreateaquick
sitemapNeedstohavetheminimumof3pagesrequiredforyourwebsite� Addmorepagestobuildoutthesitemap– showfuture/proposedpages
� InPowerpoint:Insert>SmartArt>Hierarchy
� https://docs.balsamiq.com/desktop/sitemaps/
Home
Locations
RequesttheTruck
Food Menu
Catering
AdvanceOrdering
OurStory
Careers
WIREFRAME(CWP2DELIVERABLE)� HomepageWireframe;onelow-fidelity
wireframedesignedinPhotoshopshowingcontentareassuchasmenu,heroimage,blocksoftext,buttons,etc.
� Wireframing isn’tjustcreatingasketchofyourideasoyoucanhanditoff
� It’satimegetfeedback,andinvolveothersindesignandUI/UXdecisions
� Free/paidwireframesoftwareappslikeBalsamiq,AdobePhotoshop,AdobeIllustrator,andAdobeXD
https://www.youtube.com/watch?v=VhYYqzX294s
LOWFIDELITYWIREFRAME
LOWFIDELITYVS.HIGHFIDELITY
USINGPHOTOSHOPFORWIREFRAMES� Familiartoolstocreateshapesin
wireframesandwebsitedesign� Saveandre-usecolors,fonts,UI/UX
icons,shapes,etc.withCCLibraries� UseArtboards* withpresetsforcountless
sizesofmobile,tablets,orwebbrowsers� EasytoexportartboardstoonePDF or
individualJPG/PNGs� UsingtheDevicePreviewfeatureto
quicklypreviewdesignsoniOSdevices*
� Turnalo-fiwireframeintohigh-fidelitywebpageinthesamesoftware
WIREFRAMING//CCLIBRARIES
� CreativeCloudLibrariesallowyoutosyncandstoreyourelements/graphics/assets
� YoucanaccessLibrariesonlineandfrom“Window>Library”inPhotoshop,Illustrator,andMuse
� Youcan“collaborate”andtoenteranemailaddressandshareyourLibrarywithanotherCreativeClouduseror“sharelink”tosendalinktodownloadandusethesameelementsinthelibrary
DidyouuseCreativeCloudLibrariesintheWDprogramyet?
WIREFRAMING//CCLIBRARIESWhyCreateaLibrary?� CreateCommonUserInterface
elementsinonedocument� Provideconsistencyand
professionalisminfuturewireframes
� Expediteyourworkflow—increasesspeedofcreatingawireframe
� Reduceneedfor3rdpartysoftwareorwebtools
� FreeUIKitsareavailableunderMarketAssetstodownloadtoaLibraryanduseinPhotoshop
WIREFRAMING//CCLIBRARIESBuildingtheLibrary� Assetthumbnailsareorganizedby
categoryinyourlibrary� Graphics,Colors,CharacterStyles,ü Clickonelementsyoudesignedthat
areontheartboard/canvasü InyourLibrary:
ü AddGraphicü AddCharacterStyleü AddColors
ü AddButtonwithandw/outtextü Right-clicktoRenameelements
WIREFRAMINGGettingStartedinPhotoshop� File>New� Presetfor“WebMostCommon”� Check“Artboards”nexttodimensions� OpenLayers,Libraries,andProperties� InLayers,clickonArtboard� InProperties,resizetheHeightasneeded
WIREFRAMING
� Window>Swatches� UseGrayscalecolors
� Usetoolstocreateelements� Ellipse(L)
� Rectangle(M)
� Line(\)
� SquareandRectangle(bothwithX)� Groupitems(CommandG)
� Wideformentryrectangle(lightergray)� RoundedRectangle(darkestgray)
BuildingtheWireframe
WIREFRAMINGBuildingtheWireframe� TextTool(T)� Type“BUTTON”andragontopofthe
roundedrectangle� Groupitems(CommandG)
� Type“HEADLINE”� (16ptand20ptHelvetica)
� 1—2sentencesofLoremIpsm� GenerateandCopy-pastefrom:
� www.lipsum.com
� REMINDER:SAVEYOURFILEOFTEN!
DREAMWEAVERTUTORIALASSIGNMENT
DREAMWEAVERTUTORIALVIDEOS
Questions,[email protected]/Text(949)460-3771
� DownloadTutorialsfromclasswebsite� Fourparts,dueSundays� Oneweekapart
Points DueDate5555
Oct15thOct22ndOct29thNov5th
DREAMWEAVERTUTORIALVIDEOS
Questions,[email protected]/Text(949)460-3771
� Watch20-30minutesofvideo(s)� Answer5questiondirectlyfrom
thevideo(notfromyourknowledgeofthesubjectalready)
� Addyournametothetop,typeyouranswersafterthequestions,(saveasaPDFifyoudon’thaveWord),
� Emaildocumentinouroriginalemailthreadbyorbeforeduedate
LOOKINGAHEAD...
Week Dates1 October4– 10 LiveonlineclassOctober4th at6:30pm.Decideonyourfictitiousclient
(winebar,hairsalon,orfoodtruck)andbeginyourCapstoneWebsiteProjectandemailmetoreceiveaClientSurvey.CWP1,dueTuesday,October10th.
2 October11– 17 PracticeandrecordyourWebDesignProposalPresentation.DreamweaverTutorial1,dueSunday,October15th. CWP2,dueTuesday,October17th.
3 October18– 24 LiveonlineclassOctober18th at6:30pm.DreamweaverTutorial2isdueSunday,October22nd.Beginthecreativeprocesstogatherassetsandmakedecisionsforyourwebsiteaboutimages,buttons,colors,fonts,etc.BeginCWP3bydesigningyourwebpagesinPhotoshopusingaWebPresetdocumentsizeandArtboards.
4 October25– 31 DreamweaverTutorial3isdueSunday,October29th.FinishCWP3 bycreatingyourmultiplepagesand/ormobileversions,andExportArtboardsasaPDFandemailbyTuesday,October31st.