Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Decoding Digital
Week Two: Design & Implementation
1www.symphony3.com
How to engage with us by webinar
We want you to get the most out of the program by asking questions, giving
your feedback,...
LinkedIn Group
www.symphony3.com 3
Webinar Schedule
www.symphony3.com 4
Week 1: Developing a digital strategy (Tuesday 3rd Feb)
Hangout: LinkedIn (Thursday 5...
Last Week
• We looked at Oz Crafters’ business model and how it may be affected by digital
• We completed a SWOT analysis ...
This Week
• This week we will focus on the design and implementation of a responsive,
eCommerce website for OzCrafters.
• ...
OzCrafters’ Finished Product
www.symphony3.com 7
The Website Brief
Things to include:
• Introduction/overview
– Provide an introduction to your business and the project – ...
The Website Brief
• Functional Requirements (Functional Spec)
– What are the functional tasks the website needs to be able...
Project Plan
www.symphony3.com 10
Choosing an agency
Things to consider & look for:
• Understanding of your business requirements
• Use of software that is ...
Choosing an agency
www.symphony3.com 12
Creating a Sitemap
• A sitemap outlines the structure of your website
• One way to think of this will be to imagine the ma...
Creating a site map
www.symphony3.com 14
Creating a site map
www.symphony3.com 15
Creating a sitemap – Card Sorting
www.symphony3.com 16
• https://www.youtube.com/watch?v=FTzHeYPB9c8
Developing a wireframe
• A wireframe maps the layout of your website home page
• Key things to consider for your home page...
Wireframe
www.symphony3.com 18
Digital Wireframing
www.symphony3.com 19
• We think a whiteboard (or piece of paper) is a good starting point for developi...
Design & Usability Trends
• Design is constantly changing
• Expect your site to need an update at least every 3-4 years
Tr...
‘Make it big’
http://bellroy.com/live-life-outside
www.symphony3.com 21
Flat Design & UI
www.symphony3.com 22
Tiles
www.symphony3.com 23
Map Integration
www.symphony3.com 24
Logos & Branding – Freelancing Tools
Design & Logos
• Fiverr https://www.fiverr.com/ (screengrab)
• Freelancer https://www...
Logos & Branding – Freelancing Tools
www.symphony3.com 26
Choosing a CMS
• You need to build your website on a content management system that matches
your needs and budget
• For sm...
Choosing a CMS
Each business is different
• Develop a functional spec for your business
• Trial various CMSs before buying...
Choosing a CMS
www.symphony3.com 29
The Decision Matrix
http://bua-tools.com/decision_matrix/index.php
Use the decision matrix to select your
– CMS
– Develope...
Have your say
Tweet your questions with the hashtag: #DigitalVic
Tweet us at @Symphony3Think
Contact us at: https://www.fa...
Summary
• Map out your website requirements in a website brief
• Choose the right CMS – use the decision matrix
• Choose a...
Google Hangout: Thursday 12:30pm
• The Google Hangout will take place 12:30pm this Thursday, February 12
• Ask your questi...
Nächste SlideShare
Wird geladen in …5
×

Decoding Digital Week 2: Design & Implementation

649 Aufrufe

Veröffentlicht am

In week two we discussed how businesses can go about designing and implementing a website. We look at a website brief, choosing and CMS and website design.

Veröffentlicht in: Business
  • Als Erste(r) kommentieren

Decoding Digital Week 2: Design & Implementation

  1. 1. Decoding Digital Week Two: Design & Implementation 1www.symphony3.com
  2. 2. How to engage with us by webinar We want you to get the most out of the program by asking questions, giving your feedback, telling us your stories and participating in opinion polls. • Questions box • Polls • Twitter – We will be answering questions during the session on Twitter. Contact us directly at @Symphony3Think and/or use the hashtag #DigitalVic www.symphony3.com 2
  3. 3. LinkedIn Group www.symphony3.com 3
  4. 4. Webinar Schedule www.symphony3.com 4 Week 1: Developing a digital strategy (Tuesday 3rd Feb) Hangout: LinkedIn (Thursday 5th) Week 2: Design & implementation (Tuesday 10th Feb) Hangout: Facebook (Thursday 12th Feb) Week 3: Launching and marketing the business (Tuesday 17th Feb) Hangout: Twitter (Thursday 19th Feb) Week 4: Evaluation and continuous improvement (Tuesday 24th Feb) Hangout: Google Analytics (Thursday 26th Feb)
  5. 5. Last Week • We looked at Oz Crafters’ business model and how it may be affected by digital • We completed a SWOT analysis and their point of difference • We developed customer personas for two of the business’s key target markets • We mapped out the customer journey for each of these personas • We highlighted our digital weaknesses with the digital diagnostic • We created a one page plan with the digital actions that need to take place in the next 6 months: – Develop a fully functional eCommerce website – Build a search presence through SEO activities – Take manual processes online to reduce costs – Promote brand awareness with digital marketing techniques www.symphony3.com 5
  6. 6. This Week • This week we will focus on the design and implementation of a responsive, eCommerce website for OzCrafters. • Topics covered will include: – Writing a website brief to outline the functional and design requirements (for internal use or external use by a developer) – Developing an online brand – Choosing the most appropriate Content Management System for your business (CMS) – The key features your website should include and key things to consider – How to manage the design and development process • We have create a live site for OzCrafters on Business Catalyst, which we will use to show you how some of the functionality can be managed www.symphony3.com 6
  7. 7. OzCrafters’ Finished Product www.symphony3.com 7
  8. 8. The Website Brief Things to include: • Introduction/overview – Provide an introduction to your business and the project – what is your vision? • Business requirements – What are the business outcomes your hoping to achieve by building this website? E.g. Online sales, greater brand awareness, Ebook downloads? • Target Market – Who are the audiences you want to attract to the website? Use your customer personas developed in week one. • Design requirements – Do you have an existing logo, colour palate, style guide? – What do you envisage the website to look and feel like? – Site layout and structure www.symphony3.com 8
  9. 9. The Website Brief • Functional Requirements (Functional Spec) – What are the functional tasks the website needs to be able to complete? – What CMS will the site be built on? – Will the site require eCommerce? – What actions will users need to complete? (Go back to your customer journeys!) • Timeline – When is the website due to launch? – What are the key milestones on the lead up to launch? www.symphony3.com 9
  10. 10. Project Plan www.symphony3.com 10
  11. 11. Choosing an agency Things to consider & look for: • Understanding of your business requirements • Use of software that is not proprietary • Social proof • The right fit of expertise for your business • Cost • Location • Accountability & support • ‘Have a beer’ test – is it someone you can partner with? www.symphony3.com 11
  12. 12. Choosing an agency www.symphony3.com 12
  13. 13. Creating a Sitemap • A sitemap outlines the structure of your website • One way to think of this will be to imagine the main menu navigation of your site • Don’t over-complicate your site map, keep it simple where possible • Try using post-it notes, and refine your site map until you have a structure that is efficient and makes sense. • Seek an independent opinion. www.symphony3.com 13
  14. 14. Creating a site map www.symphony3.com 14
  15. 15. Creating a site map www.symphony3.com 15
  16. 16. Creating a sitemap – Card Sorting www.symphony3.com 16 • https://www.youtube.com/watch?v=FTzHeYPB9c8
  17. 17. Developing a wireframe • A wireframe maps the layout of your website home page • Key things to consider for your home page include: – Your logo (top left) – Site navigation – Search box – Accessibility – Contact button and/or phone number – Large image/slider/video – Social media integration – Blog/News – Key message/brand philosophy – Product features – Testimonials www.symphony3.com 17
  18. 18. Wireframe www.symphony3.com 18
  19. 19. Digital Wireframing www.symphony3.com 19 • We think a whiteboard (or piece of paper) is a good starting point for developing your wireframe • However, some people prefer to develop their wireframes digitally. • Mashable – 10 Free Wireframing Tools for Designers http://mashable.com/2010/07/15/wireframing-tools/ • We have also used: – Google Docs (Images) – https://wireframe.cc/ (free) – http://www.mockflow.com/ (paid)
  20. 20. Design & Usability Trends • Design is constantly changing • Expect your site to need an update at least every 3-4 years Trends for 2015: http://www.sitepoint.com/big-web-design-trends-for-2015/ www.symphony3.com 20
  21. 21. ‘Make it big’ http://bellroy.com/live-life-outside www.symphony3.com 21
  22. 22. Flat Design & UI www.symphony3.com 22
  23. 23. Tiles www.symphony3.com 23
  24. 24. Map Integration www.symphony3.com 24
  25. 25. Logos & Branding – Freelancing Tools Design & Logos • Fiverr https://www.fiverr.com/ (screengrab) • Freelancer https://www.freelancer.com.au/ • 99 Designs http://99designs.com.au/ Templates • BC Gurus https://www.bcgurus.com/templates • Tribevita http://www.tribevita.com/ www.symphony3.com 25
  26. 26. Logos & Branding – Freelancing Tools www.symphony3.com 26
  27. 27. Choosing a CMS • You need to build your website on a content management system that matches your needs and budget • For small businesses the following systems are popular: – >$2000 (Low cost/free): Wordpress, Wix, Weebly, Squarespace, Shopify, Big Commerce – $3000 - $15,000: Adobe Business Catalyst, Wordpress, Magento, Joomla – $15000+ For more complex sites: Sitecore, Drupal, DotNetNuke • http://www.business.vic.gov.au/marketing-sales-and-online/online-business-and- technology/setting-up-an-online-presence/questions-to-ask-my-web-developer www.symphony3.com 27
  28. 28. Choosing a CMS Each business is different • Develop a functional spec for your business • Trial various CMSs before buying Should be self-managed: • Editing of pages • Ability to create forms • Ability to sell products • Blogs Also consider non-technical issues • Support community around the product • Good support people and material? • Can your provider become a trusted adviser to your business on digital? www.symphony3.com 28
  29. 29. Choosing a CMS www.symphony3.com 29
  30. 30. The Decision Matrix http://bua-tools.com/decision_matrix/index.php Use the decision matrix to select your – CMS – Developer/Designer/Agency www.symphony3.com 30
  31. 31. Have your say Tweet your questions with the hashtag: #DigitalVic Tweet us at @Symphony3Think Contact us at: https://www.facebook.com/Symphony3 Email us at: decodingdigital@symphony3.com www.symphony3.com 31
  32. 32. Summary • Map out your website requirements in a website brief • Choose the right CMS – use the decision matrix • Choose an agency that will be a strong partner • Managing your website doesn’t have to be hard! • Get your content structure right www.symphony3.com 32
  33. 33. Google Hangout: Thursday 12:30pm • The Google Hangout will take place 12:30pm this Thursday, February 12 • Ask your questions on – Twitter using #DigitalVic – Decoding Digital LinkedIn Group – Email (at least one hour in advance): decodingdigital@symphony3.com www.symphony3.com 33

×