Tech 802: Web Design Part 1

423 views
397 views

Published on

A crash course in web design.

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

No Downloads
Views
Total views
423
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tech 802: Web Design Part 1

  1. 1. Website  Design A  Crash  CourseMonique  Sherre,monique@boxcarmarke4ng.com
  2. 2. When  &  Why  Do  We  Re-­‐Design• no  mobile  —  BoxcarMarke6ng.com• aesthe6c  update  —  Raincoast.com• legacy  CMS  —  ABCBookWorld.com• new  company,  new  project  —  NewSite.com 2
  3. 3. Who  or  What  Is  Involved? Purpose Visitor   Content   Needs &  SEO Analy4cs,     Design Website   Behaviour,   Conversions Redesign Programming: Domain   CSS,  Plugins,   name,   Func4onality hos4ng,  email Maintenance 3
  4. 4. Who  or  What  Is  Involved? Content   Purpose &  SEO Visitor   Needs Analy4cs,    Design Behaviour,   Website   Conversions Redesign Programming: Domain   CSS,  Plugins,   name,   Func4onality hos4ng,  email Maintenance 4
  5. 5. Roles  are  shi;ing• What  is  a  marke>ng  func>on?• What  is  a  design  func>on?• What  is  a  technical  func>on?• Who  is  responsible  for  these  func>ons? – Website  design – Website  maintenance – Video,  audio,  ebook,  app  produc>on – Asset  management – ONIX  file  genera>on,  distribu>on – SEO – Domains,  email,  server  setup
  6. 6. Every  Marketer  Should  Be  Technical• h,p://www.seomoz.org/blog/every-­‐marketer-­‐should-­‐be-­‐technical• Whether  you’re  a  marketer,  designer,  editor,  developing  technical  skills  gives  you   the  ability  to  communicate  be,er  with  everyone  in  your  organiza4on.  If  you  know   whats  possible,  then  youll  know  what  to  ask  for  when  you  work  with  developers,   IT,  and  analysts.  And  in  many  cases,  youll  be  able  to  just  do  the  work  yourself. 6
  7. 7. Doing  a  Redesign:  The  Big  PictureStage  1:  Where  to  start?• Client:  Kick-­‐off  Mee6ng  >  Crea6ve  brief  • Research:  current  site  review,  compe6tor  sites,   persona,  analy6cs  • Proposal,  Cos6ng  &  Scope  Document• Exper6se  required 7
  8. 8. The  Big  PictureStage  2:  What’s  Involved• Content  architecture• Wireframes  &  Page  elements• Asset  collec6on• SEO  (social  cues,  external  cues,  on-­‐page  cues);   keyword  &  audience  research• Client:  agreement  on  direc6on,  branding,   personas 8
  9. 9. The  Big  PictureStage  3:  What’s  It  Going  to  Look  Like• Naviga6on  &  content  for  key  pages• Design  mockups• Review  func6onality  requirements• Client:  sign  off  on  design 9
  10. 10. The  Big  PictureStage  4:  How  is  it  going  to  work?• HTML,  CSS,  Plug-­‐ins  and  other  programming• Content  migra6on• URLs• Backup  exis6ng  site• Secondary  profiles  (smm)• Tes6ng  &  QA• Client:  Tes6ng  &  QA 10
  11. 11. The  Big  PictureStage  5:  When  does  it  go  live?• Migrate  from  dev  site  to  live  server• 301  redirects• Analy6cs• Final  Tes6ng  &  QA• Client:  Final  review 11
  12. 12. The  Big  PictureStage  6:  What’s  le@• Training  docs• Closing  doc• Client:  Sign  off  on  closing  doc• Code  guarantee• Post-­‐launch  checklist  (pages  indexed,  ranking,   errors) 12
  13. 13. No>ce  there  are  5  weeks  in  the   tech  project?1.  Kick-­‐off,  crea6ve  brief,  compe6tor  reviews2.  Content  architecture,  wireframes,  SEO3.  Design  &  Func6onality4.  Programming,  add-­‐ons,  smm  setup5.  Migra6on,  tes6ng  (prototype  presenta6on)6.  Documenta6on,  training
  14. 14. 14
  15. 15. 15
  16. 16. Who  or  What  Is  Involved? Purpose Visitor   Content   Needs &  SEO Analy4cs,     Design Website   Behaviour,   Conversions Redesign Programming: Domain   CSS,  Plugins,   name,   Func4onality hos4ng,  email Maintenance 16
  17. 17. Purpose Content   Visitor   &  SEO Needs Design Website   Redesign Analy>cs,     Behaviour,   Conversions Roles  &  Perspec>ves Domain  Programming name,  hos>ng,   Content  /  :CSS,  Plugins,   email Design:  How  it   Technology:  How  Func>onality MarkeEng:  How   Maintenance looks it  works it’s  organized Feelings  to  evoke,   Conversions;   Tech  exper>se,   Business  needs aesthe>cs,  branding,   audience,  product,   maintenance style service  assump>ons Tech  skill,   Tasks,  topics,  needs/ Expecta>ons,   func>onality   Personas aesthe>cs,  branding wants,  page   expecta>ons,   elements usability Features,  pla_orm,   CompeEtor  sites Style,  layout Naviga>on,  content func>onality Images,  text,  video,   logos,  brand  colours,   audio,  site  logins,   FTP,  CPanel,  DB,   Assets style  guides content  migra>on   registrar plan
  18. 18. Content  (Marke>ng)  TasksContent  Architecture  (InformaEon  Architecture)• Users:  who  are  they,  what  informa>on  they  are  seeking  (I  need  /  I   want),  how  they  behave – Personas  &  User  Needs,  Task  Analysis,  Usability  Tes4ng,  Documen4ng  User   Experience  Requirements• Content:  volume,  formats,  metadata,  structure,  organiza>on – Indexing  &  Cataloguing,  Metadata,  Site  Architecture,  Wri4ng,  Content   Management,  Naviga4on  &  Labelling• Context:  business  model,  business  values,  resources  (and  resource   constraints) – Defining  Business  Needs,  Project  Management  &  Client  Management,  Project   Scope  &  Technical  Requirements 18
  19. 19. Design  Tasks  (Users,  Content,  Context)Users,  Content,  Context  =  Who,  What,  Why• Determine  business  branding  needs  (context)• Determine  what  elements  are  available:  logo,  brand  colours?   (content)• Iden>fy  layout  op>ons,  compe>tor  approaches  (users,   content,  context)• Work  with  Informa>on  Architecture  to  develop  wireframes   (content)• Understand  on-­‐page  elements  required,  persona  needs  (users,   content)• Test  ini>al  structure  with  users  (design  nav  elements,   homepage,  key  interior  pages)  and  re-­‐evaluate   19
  20. 20. Technology  Tasks• Determine  technical  requirements,  features,  scope  (context)• Iden>fy  pla_orm  op>ons,  compe>tor  approaches  (context)• Review  Informa>on  Architecture  and  Wireframes  for   func>onality,  features,  scope  (content,  context)• Present  pla_orm  solu>on,  scope  plug-­‐ins,  integra>on   requirements  (users,  content,  context)• Google  Analy>cs  and  Webmaster  tools  already  installed  on   exis>ng  site?  Bing  Webmaster  tools?  (users)• URLs,  hos>ng,  server  staying  same?  (content)• Design  >  HTML,  CSS  >  CMS  (content)• Tes>ng  and  QA  (users,  content) 20
  21. 21. On  Wed:  Tech  ProjectContent  Group  (Jelena,  Sophie,  Mike,  KC,  Laura)1. Content  needs2. Compe>tor  sites3. Personas4. Marke>ng  plan  (Discoverability—SEO  &  Analy>cs,  Promo>ons—SMM)Design  Group  (Braden,  Natalie,  MacKenzie,  Duany)5. Iden>ty  needs,  Branding6. Scope  doc7. Wireframes8. Design  compsTechnology  Group  (Lee,  Lauren,  Kim,  Angelina,  Jaspring)9. Technology  needs10. Pla_orm  op>ons11. Tool  integra>ons12. Coding  the  prototype
  22. 22. Resources  you  already  haveMarkeEng  Plan 1. Audience:  Who  is  it  for? 2. Hook:  What  makes  it  great?   3. So  What:  Why  should/do  people  care? 4. Goals:  Will  they  care  enough  to  do  X? 5. Strategy:  How  will  I  nudge  them  to  do  X? 6. Tools:  What  tac>cs,  technology  or  tools  will  I  use?   7. Metrics:  How  will  I  measure  success?Persona  Worksheet 22
  23. 23. Resources  you  need:  Project  Brief• Iden>fy  client/organiza>on:  what  they  do  and  why• Iden>fy  business  goals  of  site;  business  needs  the  site   needs  to  address• Iden>fy  target  audience  and  needs• Determine  features,  func>onality  or  informa>on  to   be  provided  via  the  site• Describe  how  users  with  interact  with  the  site  to   meet  their  needs  (user  flow  scenarios)• Consider  what  types  of  site  structure  are  appropriate 23
  24. 24. What  should  be  in  a  Project  Brief?• Client  Info• Audience  Info• Brand  Info• Content  Info• Features  &  Scope• Time  &  Budget• Technology  Requirements 24
  25. 25. Wednesday•  Alan  will  be  here  to  talk  about  the  tech  project•  Monique  will  ask  your  brief  quesEons  so  within  your  groups  you  can  be  taking   notes•  As  a  class,  you’ll  have  a  chance  to  ask  further  ques4ons•  Post-­‐Alan  we’ll  walk  through  each  week  and  deliverables  using  the  stages   discussed  today  as  a  guideline•  The  weekly  assignments  are  specific  to  group.  You’ll  have  Thurs  to  work  on  it,  and   assignments  are  due  Fri  at  9  (noon  is  your  buffer)• Each  week  you’ll  assign  a  project  manager  who’ll  do  a  weekly  report,  much  like  the   book  project• There  is  a  peer  review  on  the  18th  and  Feb  1st,  which  is  a  chance  for  you  to   individually  note  any  highlights  or  lowlights  so  we  can  adjust• Tech  papers  are  due  those  dates  as  well 25
  26. 26. Tech  PapersDue  Jan  18  and  Feb  1.  You  will  submit  them  by  pos4ng  online  for  the  class  (and  the  internet  at  large).   New post > category Student Presentations & PapersEach  paper  will  be  reviewed—online—by  one  of  your  classmates  before  the  following  Friday.  i.e.,  you  will  each  write  two  papers  and  comment  on  two  papers  (1-­‐2  paragraphs  of  intelligent  commentary).  The  choice  of  the  exact  topics  is  yours,  however,  the  paper  topics  need  to  be  related  to  the  topics  listed  in  the  syllabus  and  cleared  and/or  nego4ated  with  Monique  in  advance.  Papers  should  be  roughly  1500–2000  words  (about  5  pages  single  spaced  in  Word—but  youre  going  to  post  them  to  the  CCSP  website  with  links  and  references),  and  take  a  clear  posi4on  on  the  topic.  You  can  see  examples  of  previous  years  here:h,p://tkbr.ccsp.sfu.ca/pub802/papers-­‐september/h,p://tkbr.ccsp.sfu.ca/pub802/papers-­‐2/h,p://tkbr.ccsp.sfu.ca/pub802/papers-­‐3/ 26
  27. 27. Tomorrow:• Work  in  the  lab   – Install  wordpress – Work  on  por_olio  (about  page)• Design/Tech  focus• Wed:  please  sit  together  in  your  groups  so  you   can  coordinate/collaborate  during  the  chat   with  Alan 27
  28. 28. See  you  in  the  lab  tomorrow

×