Website  DesignA  Crash  Course.  Part  2.  

Monique  Sherre,monique@boxcarmarke4ng.com

Tech  PapersDue  Jan  18  and  Feb  1.  You  will  submit  them  by  pos4ng  online  for  the  class  (and  the  internet  at  large).  h,p://www.ccsp.sfu.ca/wp-­‐login.php

Add new post > category Student Presentations & Papers

Each  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  you're  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/ 2

When  &  Why  Do  We  Re-­‐Design

• BoxcarMarke4ng.com  —  no  mobile• Raincoast.com  —  aesthe4c  update• ABCBookWorld.com  —  legacy  CMS• NewSite.com  —  new  company,  new  project

3

1st  Part  of  Web  Design  WorkflowStage  1:  Where  to  start?• Client:  Kick-­‐off  MeeDng  >  CreaDve  brief  • Research:  current  site  review,  compeDtor  sites,  persona,  analyDcs  • Proposal,  CosDng  &  Scope  Document• ExperDse  required

Stage  2:  What’s  Involved• Content  architecture• Wireframes  &  Page  elements• Asset  collecDon• Keyword  research• Client:  agreement  on  direcDon,  branding,  personas

Stage  3:  What’s  It  Going  to  Look  Like• Design  mockups

4

We’re  going  to  talk  about  Design  &  Technology  Tasks  Today

• Design  comps  are  commonly  created  as  PSD  files  (layered)

• A  programmer  (or  the  designer)  converts  the  PSD  into  HTML  and  CSS

5

6

Before  That...I  Want  to  Fill  in  the  Blanks

• How  do  you  get  a  domain  name?• How  do  you  get  hos4ng?• How  do  you  install  WordPress,  another  CMS  or  upload  your  HTML  &  CSS  files?  

7

How  Do  You  Get  a  Domain  Name• yoursite.com

• URLs  are  purchase  from  a  Registrar.  

• .com  or  .ca  is  approx.  $11/yr

• This  process  is  called  “domain  registra4on”

• Use  NameCheap.com,  avoid  GoDaddy.com

• WhoisGuard  protects  your  registra4on  info

• SSL  is  secure  socket  layer  and  required  for  ecommerce  sites.  You  can  purchase  these  cer4ficates  through  the  registrar  and  assign  it  to  the  domain  in  ques4on

• DNS  is  domain  name  system  and  is  a  series  of  seangs  that  map  domain  names  to  IP  addresses.  Think  of  DNS  as  the  phone  book  of  the  web.

• Avoid  having  the  same  company  as  a  registrar  and  host

8

Finding  an  Available  Name• Make  sure  your  domain  name  is  available  but  also  that  a  similar  username  is  

available  on  social  media.  

• Namechk.com  —  checks  username  and  URL

• Domain  Name  Generators  can  help  for  unique  names

• For  personal  sites,  consider  using  your  name

9

How  to  Get  HosDng?• Bluehost.com  is  good  for  WordPress,  also  Dreamhost.com

• Look  for  high  GB  or  unlimited  Hos4ng  Space,  unlimited  file  transfer

• This  is  Shared  HosLng—the  most  common,  and  cheapest.  Also  means  a  black-­‐hat  site  could  go  rogue  on  your  server  and  impact  your  website

• Managed  HosLng  is  like  WordPress.com  (you  don’t  do  any  upgrades  yourself)

• VPS  HosLng  (virtual  private  server)  is  like  a  dedicated  server  but  cheaper,  eg.  Linode.com.  Good  for  pros  who  need  root  access  to  make  adjustments  to  system  sogware

• Dedicated  Server  is  completely  customizable,  only  for  your  site.  eg.  Rackspace.com

• Cloud  HosLng  is  pay  as  you  go,  eg  Amazon  EC2

10

How  to  Install  WordPress• Hosts  like  Bluehost.com  have  a  1-­‐click  process

• If  you  are  self  installing,  you  need  access  to  your  web  server  via  FTP  login  (login  details  from  the  host),  a  text  editor  (TextWrangler)  and  an  FTP  client  (FileZilla).  

• Follow  the  famous  5-­‐minute  install  processh,p://codex.wordpress.org/Installing_WordPress

• Which  includes  crea4ng  a  database  and  user  with  full  admin  access,  usually  through  the  control  panel  (it’s  easier  to  create  the  database  some4mes  than  to  find  your  login  info  for  the  host)

• Pick  a  very  simple  theme,  which  you  can  then  customize,  i.e.,  Twenty  Twelve  theme  is  a  responsive  theme  that  looks  great  on  any  device

• (We’ll  discuss  customizing  themes  next  week  with  Chris4ne)

11

12

Source:  Don’t  Make  Me  Think  by  Steve  Krug

Design  Piaalls

13

Source:  Don’t  Make  Me  Think  by  Steve  Krug

Good  Design• Good  Design  is  dependent  on  Good  Content  and  Good  Technology.  

• So  all  3  groups  need  to  work  together  because  if  we  have  good  content,  if  we  have  a  good  website  concept  with  layout  and  graphics  that  support  the  content,  and  if  we  have  good  structured  HTML  and  CSS  -­‐-­‐  only  then  do  we  have  a  good  website.

• A  good  designer  works  not  only  on  the  graphics  and  colour  pale,e,  but  needs  to  understand  how  to  organize  their  PSD  file  so  that  a  programmer  can  easily  convert  it  to  HTML  and  CSS,  but  they  also  need  to  understand  the  content  role  of  SEO,  copywri4ng  and  marke4ng  tools.  

14

Quick  Walkthrough  of  a  Redesign

15

Pre-­‐2009  —>  2009  Redesign

Sketch  >  Wireframe  >  Design

16

17

Branding  &  Tagline

Nav  Wrapper

Sidebar

Content

Footer

18

19

20

21

22

23

ChrisDne’s  going  to  help  us  next  week

In  the  meanDme,  we  need  to  install  WordPress

Solo  or  in  Partners?  

Local  or  Web  Host?

Local:  Mamp  or  Xamp  is  installed  on  your  computer  -­‐  h,p://www.mamp.info/en/index.html  (Macs)  -­‐  h,p://www.apachefriends.org/en/xampp-­‐windows.html  (PC)

Web  Host:  I  recommend  bluehost,  dreamhost,  webnames...  anything  but  Godaddy.  

Next,  install  WordPress  so  we  can  then:-­‐  Upload  themes-­‐  Upload  plugins-­‐  Go  through  all  the  seangs

24

Local• STEP  1:  DOWNLOAD.  

•  Mamp  or  Xamp  is  installed  on  your  computer  -­‐  h,p://www.mamp.info/en/index.html  (Macs)  -­‐  h,p://www.apachefriends.org/en/xampp-­‐windows.html  (PC)•  Download  WordPress:  h,p://wordpress.org/download/

• STEP  2:  CREATE  DATABASE  &  USER  Launch  MAMP  applica4on  from  your  computer-­‐  Follow  install  hdp://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP-­‐  If  web  hos4ng:  h,p://codex.wordpress.org/Installing_WordPress  -­‐  OR  see  below

• Click  on  phpMyAdmin  >  Databases  >  Create  database• wordpress  is  a  good  databasename  (DB_NAME)

• click  the  person/lock  icon  to  specify  privileges

• Add  user.  wordpress  can  be  used  for  wordpressusername  (DB_USER)• Host  =  localhost

• Password  should  be  difficult  to  guess  (DB_PASSWORD)

• All  privileges 25

Local  (conDnued)• STEP  3:  SET  UP  wp-­‐config.php

– Unzip  WordPress,  rename  wp-­‐config-­‐sample.php  to  wp-­‐config.php  then  open  in  text  editor

– Enter  database  informa4on  from  the  previous  step  under  the  sec4on  //  **  MySQL  seangs

– Use  the  online  generator  to  create  your  security  keys:  h,ps://api.wordpress.org/secret-­‐key/1.1/salt/

• STEP  4:  UPLOAD  FILES

– Move  the  “wordpress”  folder  and  all  its  contents  to  the  “htdocs”  folder  in  MAMP  so  the  folder  structure  is  MAMP  >  htdocs  >  wordpress

• STEP  5:  RUN  THE  INSTALL  SCRIPT

– Go  to  h,p://localhost:8888/wordpress/

– Complete  the  seangs  and  click  install

26

Now  Login  &  Experiment-­‐  Go  through  the  admin  and  poke  around  at  everything-­‐  Create  a  few  blog  posts-­‐  Create  a  few  pages-­‐  Add  images

-­‐  Upload  themes  (Ac4vate  Twenty  Eleven  theme,  try  Customizing  it)-­‐  Upload  plugins-­‐  Go  through  all  the  seangs

-­‐-­‐>  Get  very  familiar  with  the  admin.  Chris4ne  won't  have  4me  to  go  through  this  in  class.  -­‐-­‐>  Search  for  tutorials  on  “customizing  wp  themes”  or  “PSD  to  HTML  tutorials”  

27

HosDng  WP• You  can  develop  the  site  on  your  local  host,  then  install  wp  on  your  web  host  and  

use  the  export/import  func4on  to  migrate  the  site  from  your  local  host  to  the  live  web  host

• Or  you  can  develop  directly  on  your  web  host.  

• Follow  the  same  instruc4ons  but  – STEP  4:  UPLOAD  FILES,  use  gp  to  upload  the  wordpress  folder  to  the  root  

directory  of  your  website  (h,p://domain.com)

– STEP  5:  RUN  INSTALL,  go  to  h,p://domain.com/wp-­‐admin/install.php

28

Assignment:  Move  Forward• Start  customizing  your  WordPress  install  and  show  me  where  you’ve  go_en  to  on  Monday.• AlternaDvely,  if  you  have  a  site  you’re  working  on,  let  me  know  about  it  and  what  your  next  steps  are.  • Or  if  you’d  like  to  start  planning  your  poraolio  site  (or  thinking  about  the  ABCBookWorld  project),  here  are  

a  few  places  to  start:

Content1. Users  (Personas):  Who  are  they,  what  info  are  they  seeking?2. Content:  What  should  be  there?  How  should  you  structure  it  (Nav,  Site  Arch)?  3. Context:  What  do  you  need/want  the  site  to  do  for  you?  Who  do  you  compete  against?4. MarkeDng:  How  will  people  find  your  site?  (Discoverability—SEO  &  AnalyDcs,  PromoDons—SMM)

Design5. IdenDty  needs,  Branding,  Colours6. Scope:  What’s  in  /  out  for  Phase  1?7. Wireframes:  sketch  it  out8. Design  comps:  layered  PSD

Technology9. Technology  needs:  domain  name?  hosDng?  email?10. Plaaorm  opDons:  Wordpress?11. Tool  integraDons:  Social  Media?12. Coding  the  prototype:  Find  a  template,  follow  a  tutorial,  create  a  working  prototype

See  you  tomorrow!

• Meet  Alan  Twigg

30