Ed Field<br />E: 	edfield@diginomarketing.comT: 	1890-927-800Intl: 	+353-61-620-147W: 	www.DiginoMarketing.com<br />
Best Practice Web Design<br />Enterprise Ireland<br />22nd April 2010<br />
By which we mean.....best practice website research, strategy, planning, functional design, user testing, graphic design, ...
Digino: The direct digital marketing experts<br />Maximise online sales. Minimise costs.<br /><ul><li>  Discover online op...
  Full team to implement and manage
  Continuous development and optimisation</li></li></ul><li>Who we work with<br />We deliver the most value for clients wh...
There is a need to generate a high volume of online sales or online leads</li></li></ul><li>5 steps to create an effective...
Tactics without strategy is the noise before defeat<br />Sun Tzu<br />
Seth Godin<br />The right strategy makes any tactic work better. The right strategy puts less pressure on executing your t...
1. Research, Strategy & The PlanThe most important step <br />
1. Research, Strategy & Plan<br />Company<br />How well do you present yourself – remember : garbage in, garbage out, <br ...
2. Content<br />Text, images, graphics & video<br />Major element of the project<br />Tips:<br />Short, clear, digestible,...
3. Design functional<br />Personas - user centered design<br />User journeys - information architecture<br />User testing<...
3. Design functional – persona’s<br />
Homepage<br />Course Directory<br />Faculty (x5)<br />The Campus<br />Course List<br />A-Z<br />Faculty<br />Main Page<br ...
The Campus<br />Campus<br />Main Page<br />Why Choose<br />IC?<br />Location<br />Facilities<br />Accommodation<br />Stude...
Homepage<br />Course Directory<br />Faculty (x5)<br />The Campus<br />Course List<br />A-Z<br />Faculty<br />Main Page<br ...
The Campus<br />Campus<br />Main Page<br />Why Choose<br />IC?<br />Location<br />Facilities<br />Accommodation<br />Stude...
3. Design functional – wireframe<br />
3. Design functional – wireframe<br />
3. Design functional – wireframe<br />
3. Design functional – wireframe<br />
3. Design functional – wireframe<br />
4. Graphic design<br />Moodboards– rough ideas<br />Concept templates – design applied to wireframes <br />Final templates...
Moodboard<br />Moodboard<br />
Design concept<br />
5. Build <br />Use 3rdparty applications where possible – enormous arrays of free and low cost solutions available<br />Co...
5 steps – review<br />Research, Strategy & Plan: including 3C’s<br />Content: text, images, graphics & video <br />Functio...
A few quick points....<br /><ul><li> The people: responsibility/resources/skills/
Timeframe: from 3 months
The budget: planning from €3K, design & build from €7K.....  but good to budget as a complete marketing program </li></li>...
Sample breakdown by resources required<br />
Websites – Some before and afters to show what can be achieved<br />
New site – Preview: http://www.diginomarketing.com/clients/irishferries/site/index-ie-uk.asp<br />
New site: http://www.cfmanufacturinggroup.com<br />
5 steps to create an effective website<br />Research, Strategy & Plan: including 3C’s<br />Content: text, images, graphics...
Upcoming SlideShare
Loading in …5
×

Best Practice Web Design - Athlone 22.04.10

2,638 views

Published on

Presentation given by Ed Field, MD of Digino at the Enterprise Ireland "Using the Internet to Compete in International Markets" event in Athlone - 22nd April 2010

Published in: Business
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,638
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
67
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Best Practice Web Design - Athlone 22.04.10

  1. 1.
  2. 2. Ed Field<br />E: edfield@diginomarketing.comT: 1890-927-800Intl: +353-61-620-147W: www.DiginoMarketing.com<br />
  3. 3. Best Practice Web Design<br />Enterprise Ireland<br />22nd April 2010<br />
  4. 4. By which we mean.....best practice website research, strategy, planning, functional design, user testing, graphic design, copywriting, seo, image selection, build and snagging!!!<br />
  5. 5. Digino: The direct digital marketing experts<br />Maximise online sales. Minimise costs.<br /><ul><li> Discover online opportunities, set strategy
  6. 6. Full team to implement and manage
  7. 7. Continuous development and optimisation</li></li></ul><li>Who we work with<br />We deliver the most value for clients where:<br /><ul><li>Digital marketing and especially search marketing are a crucial part of their business
  8. 8. There is a need to generate a high volume of online sales or online leads</li></li></ul><li>5 steps to create an effective website<br />Research, Strategy & Plan: including 3C’s<br />Content: text, images, graphics & video <br />Functional design: wireframes, functional spec, user testing<br />Graphic design: concepts, templates, graphics <br />Build: 3rd parties, code, snagging<br />
  9. 9. Tactics without strategy is the noise before defeat<br />Sun Tzu<br />
  10. 10. Seth Godin<br />The right strategy makes any tactic work better. The right strategy puts less pressure on executing your tactics perfectly.<br />
  11. 11. 1. Research, Strategy & The PlanThe most important step <br />
  12. 12. 1. Research, Strategy & Plan<br />Company<br />How well do you present yourself – remember : garbage in, garbage out, <br />Audit our current online presence – website, analytics, search engine visibility<br />Customers<br />Ask our customers how they use the net<br />What does our market need online? What is the market searching for online? Use Google’s keyword tool.<br />Where are our customers online? What sites are used?<br />Understand online trends in our sector<br />Competitors<br />Audit our competitors online presence<br />Examine our sector in others markets e.g. UK & US<br />Examine related industries that are strong online. <br />
  13. 13. 2. Content<br />Text, images, graphics & video<br />Major element of the project<br />Tips:<br />Short, clear, digestible, keyword rich, benefit laden, call to action<br />Pyramid structure: headline, intro, more detail, additional information <br />Who is the copywriter?<br />
  14. 14. 3. Design functional<br />Personas - user centered design<br />User journeys - information architecture<br />User testing<br />Wireframes<br />Can be represented by journey maps, wireframes,functional specification document, prototype.....<br />
  15. 15. 3. Design functional – persona’s<br />
  16. 16. Homepage<br />Course Directory<br />Faculty (x5)<br />The Campus<br />Course List<br />A-Z<br />Faculty<br />Main Page<br />Staff Profiles<br />Directory<br />Main Page<br />Campus<br />Main Page<br />Why Choose<br />IC?<br />Course<br />Suggestion<br />Tool (Proposed)<br />Faculty News<br />Location<br />Student Type<br />(eg Undergrad)<br />x4 avg<br />Course Index<br />(Student type<br />eg Undergrad)<br />x4 avg<br />Faculty Media<br />Facilities<br />Testimonials<br />Accommodation<br />Study Type<br />(eg full or <br />part time)<br />x2<br />Course Page<br />(eg LL.B Law)<br />x10 avg<br />Career Advisor<br />(Proposed)<br />Student Life<br />Generic Pages<br />About Us<br />Contact Us<br />Apply Online<br />Current<br />Students<br />Sitemap<br />News<br />Careers<br />1: Overview<br />New Courses<br />3. Design functional – user journey<br />
  17. 17. The Campus<br />Campus<br />Main Page<br />Why Choose<br />IC?<br />Location<br />Facilities<br />Accommodation<br />Student Life<br />2: User Journeys. Student (a) Knows What Student Type They Are<br />Homepage<br />Course Directory<br />Faculty (x5)<br />Course List<br />A-Z<br />Faculty<br />Main Page<br />Staff Profiles<br />Directory<br />Main Page<br />Course<br />Suggestion<br />Tool (Proposed)<br />Faculty News<br />Student Type<br />(eg Undergrad)<br />x4 avg<br />Course Index<br />(Student type<br />eg Undergrad)<br />x4 avg<br />Faculty Media<br />New Courses<br />Testimonials<br />Study Type<br />(eg full or <br />part time)<br />x2<br />Course Page<br />(eg LL.B Law)<br />x10 avg<br />Career Advisor<br />(Proposed)<br />Generic Pages<br />About Us<br />Contact Us<br />Apply Online<br />Current<br />Students<br />Sitemap<br />News<br />Careers<br />3. Design functional – user journey<br />
  18. 18. Homepage<br />Course Directory<br />Faculty (x5)<br />The Campus<br />Course List<br />A-Z<br />Faculty<br />Main Page<br />Staff Profiles<br />Directory<br />Main Page<br />Campus<br />Main Page<br />Why Choose<br />IC?<br />Course<br />Suggestion<br />Tool (Proposed)<br />Faculty News<br />Location<br />Student Type<br />(eg Undergrad)<br />x4 avg<br />Course Index<br />(Student type<br />eg Undergrad)<br />x4 avg<br />Faculty Media<br />Facilities<br />Testimonials<br />Accommodation<br />Study Type<br />(eg full or <br />part time)<br />x2<br />Course Page<br />(eg LL.B Law)<br />x10 avg<br />Career Advisor<br />(Proposed)<br />Student Life<br />Generic Pages<br />About Us<br />Contact Us<br />Apply Online<br />Current<br />Students<br />Sitemap<br />News<br />Careers<br />2: User Journeys. Student (b) Knows What Faculty They Are Looking For<br />New Courses<br />3. Design functional – user journey<br />
  19. 19. The Campus<br />Campus<br />Main Page<br />Why Choose<br />IC?<br />Location<br />Facilities<br />Accommodation<br />Student Life<br />2: User Journeys. Student (c) Doesn’t Know What They Want To Do<br />Homepage<br />Course Directory<br />Faculty (x5)<br />Course List<br />A-Z<br />Faculty<br />Main Page<br />Staff Profiles<br />Directory<br />Main Page<br />Course<br />Suggestion<br />Tool (Proposed)<br />Faculty News<br />Student Type<br />(eg Undergrad)<br />x4 avg<br />Course Index<br />(Student type<br />eg Undergrad)<br />x4 avg<br />Faculty Media<br />New Courses<br />Testimonials<br />Study Type<br />(eg full or <br />part time)<br />x2<br />Course Page<br />(eg LL.B Law)<br />x10 avg<br />Career Advisor<br />(Proposed)<br />Generic Pages<br />About Us<br />Contact Us<br />Apply Online<br />Current<br />Students<br />Sitemap<br />News<br />Careers<br />3. Design functional – user journey<br />
  20. 20. 3. Design functional – wireframe<br />
  21. 21. 3. Design functional – wireframe<br />
  22. 22. 3. Design functional – wireframe<br />
  23. 23. 3. Design functional – wireframe<br />
  24. 24. 3. Design functional – wireframe<br />
  25. 25. 4. Graphic design<br />Moodboards– rough ideas<br />Concept templates – design applied to wireframes <br />Final templates – from which all pages are based<br />Additional graphics elements – to style and enrich all key pages<br />
  26. 26. Moodboard<br />Moodboard<br />
  27. 27. Design concept<br />
  28. 28. 5. Build <br />Use 3rdparty applications where possible – enormous arrays of free and low cost solutions available<br />Code – ensure best practice coding is used<br />CMS – if needed, we recommend WordPress<br />Snagging – site to be fully snagged by provider before client completes their detailed review<br /> Avoid getting a shell where you add the content and images!!<br />
  29. 29. 5 steps – review<br />Research, Strategy & Plan: including 3C’s<br />Content: text, images, graphics & video <br />Functional design: wireframes, functional spec, user testing<br />Graphic design: concepts, templates, graphics <br />Build: 3rd parties, code, snagging<br />
  30. 30.
  31. 31. A few quick points....<br /><ul><li> The people: responsibility/resources/skills/
  32. 32. Timeframe: from 3 months
  33. 33. The budget: planning from €3K, design & build from €7K..... but good to budget as a complete marketing program </li></li></ul><li>Budgets – the full picture<br />
  34. 34. Sample breakdown by resources required<br />
  35. 35. Websites – Some before and afters to show what can be achieved<br />
  36. 36.
  37. 37. New site – Preview: http://www.diginomarketing.com/clients/irishferries/site/index-ie-uk.asp<br />
  38. 38.
  39. 39. New site: http://www.cfmanufacturinggroup.com<br />
  40. 40.
  41. 41.
  42. 42.
  43. 43.
  44. 44.
  45. 45.
  46. 46.
  47. 47.
  48. 48. 5 steps to create an effective website<br />Research, Strategy & Plan: including 3C’s<br />Content: text, images, graphics & video <br />Functional design: wireframes, functional spec, user testing<br />Graphic design: concepts, templates, graphics <br />Build: 3rd parties, code, snagging<br />
  49. 49.
  50. 50. Ed Field<br />E: edfield@diginomarketing.comT: 1890-927-800Intl: +353-61-620-147W: www.DiginoMarketing.com<br />

×