Website Design. A Crash Course. Monique Sherre, [email protected]

Transcription

1 Website Design A Crash Course Monique Sherre, [email protected]

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 Who or What Is Involved? Content & SEO Design Programming: CSS, Plugins, Func4onality Purpose Website Redesign Maintenance Visitor Needs Analy4cs, Behaviour, Conversions Domain name, hos4ng, 3

4 Who or What Is Involved? Content & SEO Purpose Visitor Needs Design Website Redesign Analy4cs, Behaviour, Conversions Programming: CSS, Plugins, Func4onality Maintenance Domain name, hos4ng, 4

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, , server setup

6 Every Marketer Should Be Technical h,p:// 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 what's possible, then you'll know what to ask for when you work with developers, IT, and analysts. And in many cases, you'll be able to just do the work yourself. 6

7 Doing a Redesign: The Big Picture Stage 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 The Big Picture Stage 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 The Big Picture Stage 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 The Big Picture Stage 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 The Big Picture Stage 5: When does it go live? Migrate from dev site to live server 301 redirects Analy6cs Final Tes6ng & QA Client: Final review 11

12 The Big Picture Stage 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 No>ce there are 5 weeks in the tech project? 1. Kick- off, crea6ve brief, compe6tor reviews 2. Content architecture, wireframes, SEO 3. Design & Func6onality 4. Programming, add- ons, smm setup 5. Migra6on, tes6ng (prototype presenta6on) 6. Documenta6on, training

14 14

15 15

16 Who or What Is Involved? Content & SEO Design Programming: CSS, Plugins, Func4onality Purpose Website Redesign Maintenance Visitor Needs Analy4cs, Behaviour, Conversions Domain name, hos4ng, 16

17 Content & SEO Purpose Visitor Needs Design Website Redesign Analy>cs, Behaviour, Conversions Roles & Perspec>ves Programming :CSS, Plugins, Func>onality Maintenance Domain name, hos>ng, Design: How it looks Content / MarkeEng: How it s organized Technology: How it works Business needs Feelings to evoke, aesthe>cs, branding, style Conversions; audience, product, service assump>ons Tech exper>se, maintenance Personas Expecta>ons, aesthe>cs, branding Tasks, topics, needs/ wants, page elements Tech skill, func>onality expecta>ons, usability CompeEtor sites Style, layout Naviga>on, content Features, pla_orm, func>onality Assets logos, brand colours, style guides Images, text, video, audio, site logins, content migra>on plan FTP, CPanel, DB, registrar

18 Content (Marke>ng) Tasks Content 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 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 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 On Wed: Tech Project Content Group (Jelena, Sophie, Mike, KC, Laura) 1. Content needs 2. Compe>tor sites 3. Personas 4. Marke>ng plan (Discoverability SEO & Analy>cs, Promo>ons SMM) Design Group (Braden, Natalie, MacKenzie, Duany) 5. Iden>ty needs, Branding 6. Scope doc 7. Wireframes 8. Design comps Technology Group (Lee, Lauren, Kim, Angelina, Jaspring) 9. Technology needs 10. Pla_orm op>ons 11. Tool integra>ons 12. Coding the prototype

22 Resources you already have MarkeEng 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 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 What should be in a Project Brief? Client Info Audience Info Brand Info Content Info Features & Scope Time & Budget Technology Requirements 24

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 Tech Papers Due 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 & 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 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/ 26

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 See you in the lab tomorrow