Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Demystifying The Web

•Download as PPT, PDF•
•
Loft Creative
Loft Creative

This Presentation was conducted at The Woo Big Fat Marketing Day by Andy Jones, our Strategic Director in August 2010.

1 of 35
Demystifying the Web
The Loft Group We do everything you could ever need from a creative agency, and we do it very well indeed.
Me… Technical Team Leader @ The Loft Group BSc. Internet Computing Web Design Web Development Search Engine Optimisation Project Management
What I will show you today Basic Terminology What you need to start a website The Website Design & Development Processes Understanding your audience Managing your own website Launching your website Also brushing lightly on: Search Engine Optimisation Blogging Social Media
Basic Terminology Domain Name : the address where your website will be located, eg. www.theloftgroup.com.au Hosting : a space on the internet where your address points to. This ‘web space’ allows end users to access your website and also provides you with email accounts.
Basic Terminology continued Server : like the waiter who delivers your meal at a restaurant, the data needs to be served to your computer when you visit a website. Your ‘web space’ is located on a hosting server. Browser : the program you use to visit websites. Eg. Internet Explorer, Firefox, Safari, Chrome, Opera.
Basic Terminology continued Browser :
Basic Terminology continued HTML : the code that holds a website together and renders all imagery and information in your browser. Hyper-text Markup Language. Image : Like your digital camera, website graphics are contained in individual files .
Basic Terminology continued Image continued : .jpeg/.jpg = Joint Picture Experts Group – compression groups similar colours .gif = Graphics Interchange Format – stores individual colours and transparency .png = Portable Network Graphics – in a nutshell PNG combines .jpg and .gif technologies
Basic Terminology continued Search Engine : The tool you use to locate information on the internet, eg. Google, Bing, Yahoo! www : The World-wide Web
How these components interact
What Do I Need to Start a Website? Web Designer Web Developer – Loft do both Corporate Identity – colours & logo Content!!! Textual information, images, etc.
What Do I Need to Start a Website? Rough content layout (sitemap / menu) Special requirements / features eCommerce functionality (selling products online) Photo Galleries Content Management System Etc.
What Do I Need to Start a Website? Rough Sitemap
The Website Design Process 1. Set your goals : Explain what you want to achieve – “I want my website to generate revenue!” 2. Set your Objectives : Explain your objectives – “I want to break into the jewellery industry and sell more jewels.”
The Website Design Process 3. Research your Target Audience : Get an idea of what your visitors want to see. Research your competitors. 4. Look and Feel : Explain the persona you want to convey – Contemporary / Unique / Chic / Modern / Sophisticated? Highlight examples you like, but don’t rip-off an existing design!
The Website Design Process 5. Identity : Explain how you want your corporate identity to be used. 6. Scenarios : Explain which elements are most important to your target audience’s experience.
The Website Design Process 6. Scenario Example:
The Website Design Process Present your Sitemap : Articulate structure. These steps help your web designer to enhance the visibility of areas you wish to emphasise and helps to arrange visual elements.
The Website Design Process These guidelines will better aid you with materialising your ideas and help you speak the same language as your web designer. Design Proofs will be more accurate.
The Website Development Process Development revolves around: Usability Accessibility And Compliance
The Website Development Process Usability revolves around consistency Navigation must be the same throughout website Links must be represented in the same fashion eg. underlined Text based sitemap should a user need quick access to info Logo must link back to homepage Text Colour / contrast / font used – black on white = strongest User Feedback mechanisms – contact form Test the site on real people!
The Website Development Process Accessibility revolves around catering for vision and hearing impaired users Images, animations and embedded audio must have textual equivalents Explain importance to your developer. Some find the topic does not relate to them, but imagine being deaf and captions failing during your favourite television programme.
The Website Development Process Compliance revolves around combining Usability and Accessibility The details are a little technical, however; Search Engines favour compliant code Compliant code makes it easier for the vision impaired to use your website
Understanding Your Audience Provide the right content! Perform demographical research, adjust content. Poll existing or prospective clientele -> insight! Example: old user -> text content instead of multimedia Conservative audience = formal copy Liberal / Young audience = less formal copy Cater for the majority eg. Skateboarders -> Punk Rock
Godlike Privileges - CMS What is a CMS? Content Management System Not scary! Loft creates solutions based on your pre-existing knowledge. Feel empowered! It’s easy and convenient to perform regular updates!
Godlike Privileges - CMS CMS Loft Example A basic CMS Interface. For those familiar with MS Word, editing your website is an absolute breeze!
Godlike Privileges - CMS CMS Loft Example Artwork layer is separated from the content layer so that the shaded area is only controlled by the CMS. There’s no way you can impact your website artwork
Search Engine Optimisation What is SEO? Making your website more visible to search engines Work with the search engines, don’t try to trick them! Search Engines only leak enough info to help SEOers
What is a blog? Why should I blog? Abbr. -> web log = blog! Online journal, a record of thoughts / business announcements Search engines love fresh content. New content -> recrawl -> higher rankings.
What is Social Media? Social Media = Twitter, Facebook, Linked In Linked from your website, and vice versa Social Media is powerful because it engages people in your brand. Better understand your target audience and promote your business.
Launching your website Review all content and functionality prior to launch. Your developer will provide you with a demonstration link before your site goes live. Promote your website: Search Engines Links on related websites Sponsored listings Competitions via Social Media – free service/product to winner Get creative, suggest some ideas to your developer!
The Loft Group Corporate Identity and Brand Management Website Design and Development Application Development Graphic Design Print Management Photography
Notable Projects The Lost Battlefield http:// www.thelostbattlefield.com.au One Man Epic http:// www.onemanepic.com Horizon Power Intranet (Western Power)
Thank you Disclaimer: The content and design layouts discussed in this presentation are not to be used by third parties.

More Related Content

Demystifying The Web

  • 2. The Loft Group We do everything you could ever need from a creative agency, and we do it very well indeed.
  • 3. Me… Technical Team Leader @ The Loft Group BSc. Internet Computing Web Design Web Development Search Engine Optimisation Project Management
  • 4. What I will show you today Basic Terminology What you need to start a website The Website Design & Development Processes Understanding your audience Managing your own website Launching your website Also brushing lightly on: Search Engine Optimisation Blogging Social Media
  • 5. Basic Terminology Domain Name : the address where your website will be located, eg. www.theloftgroup.com.au Hosting : a space on the internet where your address points to. This ‘web space’ allows end users to access your website and also provides you with email accounts.
  • 6. Basic Terminology continued Server : like the waiter who delivers your meal at a restaurant, the data needs to be served to your computer when you visit a website. Your ‘web space’ is located on a hosting server. Browser : the program you use to visit websites. Eg. Internet Explorer, Firefox, Safari, Chrome, Opera.
  • 8. Basic Terminology continued HTML : the code that holds a website together and renders all imagery and information in your browser. Hyper-text Markup Language. Image : Like your digital camera, website graphics are contained in individual files .
  • 9. Basic Terminology continued Image continued : .jpeg/.jpg = Joint Picture Experts Group – compression groups similar colours .gif = Graphics Interchange Format – stores individual colours and transparency .png = Portable Network Graphics – in a nutshell PNG combines .jpg and .gif technologies
  • 10. Basic Terminology continued Search Engine : The tool you use to locate information on the internet, eg. Google, Bing, Yahoo! www : The World-wide Web
  • 12. What Do I Need to Start a Website? Web Designer Web Developer – Loft do both Corporate Identity – colours & logo Content!!! Textual information, images, etc.
  • 13. What Do I Need to Start a Website? Rough content layout (sitemap / menu) Special requirements / features eCommerce functionality (selling products online) Photo Galleries Content Management System Etc.
  • 14. What Do I Need to Start a Website? Rough Sitemap
  • 15. The Website Design Process 1. Set your goals : Explain what you want to achieve – “I want my website to generate revenue!” 2. Set your Objectives : Explain your objectives – “I want to break into the jewellery industry and sell more jewels.”
  • 16. The Website Design Process 3. Research your Target Audience : Get an idea of what your visitors want to see. Research your competitors. 4. Look and Feel : Explain the persona you want to convey – Contemporary / Unique / Chic / Modern / Sophisticated? Highlight examples you like, but don’t rip-off an existing design!
  • 17. The Website Design Process 5. Identity : Explain how you want your corporate identity to be used. 6. Scenarios : Explain which elements are most important to your target audience’s experience.
  • 18. The Website Design Process 6. Scenario Example:
  • 19. The Website Design Process Present your Sitemap : Articulate structure. These steps help your web designer to enhance the visibility of areas you wish to emphasise and helps to arrange visual elements.
  • 20. The Website Design Process These guidelines will better aid you with materialising your ideas and help you speak the same language as your web designer. Design Proofs will be more accurate.
  • 21. The Website Development Process Development revolves around: Usability Accessibility And Compliance
  • 22. The Website Development Process Usability revolves around consistency Navigation must be the same throughout website Links must be represented in the same fashion eg. underlined Text based sitemap should a user need quick access to info Logo must link back to homepage Text Colour / contrast / font used – black on white = strongest User Feedback mechanisms – contact form Test the site on real people!
  • 23. The Website Development Process Accessibility revolves around catering for vision and hearing impaired users Images, animations and embedded audio must have textual equivalents Explain importance to your developer. Some find the topic does not relate to them, but imagine being deaf and captions failing during your favourite television programme.
  • 24. The Website Development Process Compliance revolves around combining Usability and Accessibility The details are a little technical, however; Search Engines favour compliant code Compliant code makes it easier for the vision impaired to use your website
  • 25. Understanding Your Audience Provide the right content! Perform demographical research, adjust content. Poll existing or prospective clientele -> insight! Example: old user -> text content instead of multimedia Conservative audience = formal copy Liberal / Young audience = less formal copy Cater for the majority eg. Skateboarders -> Punk Rock
  • 26. Godlike Privileges - CMS What is a CMS? Content Management System Not scary! Loft creates solutions based on your pre-existing knowledge. Feel empowered! It’s easy and convenient to perform regular updates!
  • 27. Godlike Privileges - CMS CMS Loft Example A basic CMS Interface. For those familiar with MS Word, editing your website is an absolute breeze!
  • 28. Godlike Privileges - CMS CMS Loft Example Artwork layer is separated from the content layer so that the shaded area is only controlled by the CMS. There’s no way you can impact your website artwork
  • 29. Search Engine Optimisation What is SEO? Making your website more visible to search engines Work with the search engines, don’t try to trick them! Search Engines only leak enough info to help SEOers
  • 30. What is a blog? Why should I blog? Abbr. -> web log = blog! Online journal, a record of thoughts / business announcements Search engines love fresh content. New content -> recrawl -> higher rankings.
  • 31. What is Social Media? Social Media = Twitter, Facebook, Linked In Linked from your website, and vice versa Social Media is powerful because it engages people in your brand. Better understand your target audience and promote your business.
  • 32. Launching your website Review all content and functionality prior to launch. Your developer will provide you with a demonstration link before your site goes live. Promote your website: Search Engines Links on related websites Sponsored listings Competitions via Social Media – free service/product to winner Get creative, suggest some ideas to your developer!
  • 33. The Loft Group Corporate Identity and Brand Management Website Design and Development Application Development Graphic Design Print Management Photography
  • 34. Notable Projects The Lost Battlefield http:// www.thelostbattlefield.com.au One Man Epic http:// www.onemanepic.com Horizon Power Intranet (Western Power)
  • 35. Thank you Disclaimer: The content and design layouts discussed in this presentation are not to be used by third parties.