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 P...
What I will show you today Basic Terminology What you need to start a website The Website Design & Development Processes U...
Basic Terminology Domain Name : the address where your website will be located, eg.  www.theloftgroup.com.au Hosting : a s...
Basic Terminology continued Server :  like the waiter who delivers your meal at a restaurant, the data needs to be served ...
Basic Terminology continued Browser :
Basic Terminology continued HTML :  the code that holds a website together and renders all imagery and information in your...
Basic Terminology continued Image continued : .jpeg/.jpg = Joint Picture Experts Group – compression groups similar colour...
Basic Terminology continued Search Engine :  The tool you use to locate information on the internet, eg. Google, Bing, Yah...
How these components interact
What Do I Need to Start a Website? Web Designer Web Developer – Loft do both Corporate Identity – colours & logo  Content!...
What Do I Need to Start a Website? Rough content layout (sitemap / menu) Special requirements / features eCommerce functio...
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!”...
The Website Design Process 3. Research your Target Audience : Get an idea of what your visitors want to see. Research your...
The Website Design Process 5. Identity : Explain how you want your corporate identity to be used. 6.  Scenarios : Explain ...
The Website Design Process 6.  Scenario Example:
The Website Design Process <ul><li>Present your Sitemap :  </li></ul><ul><li>Articulate structure. </li></ul><ul><li>These...
The Website Design Process These guidelines will better aid you with materialising your ideas and help you speak the same ...
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...
The Website Development Process Accessibility revolves around catering for vision and hearing impaired users Images, anima...
The Website Development Process Compliance revolves around combining Usability and Accessibility The details are a little ...
Understanding Your Audience Provide the right content! Perform demographical research, adjust content. Poll existing or pr...
Godlike Privileges - CMS What is a CMS? Content Management System Not scary! Loft creates solutions based on your pre-exis...
Godlike Privileges - CMS CMS Loft Example A basic CMS Interface. For those familiar with  MS Word, editing your  website i...
Godlike Privileges - CMS CMS Loft Example Artwork layer is separated from the content layer so that the shaded area is onl...
Search Engine Optimisation What is SEO? Making your website more visible to search engines Work with the search engines, d...
What is a blog? Why should I blog? Abbr. -> web log = blog! Online journal, a record of thoughts / business announcements ...
What is Social Media? Social Media = Twitter, Facebook, Linked In Linked from your website, and vice versa Social Media is...
Launching your website Review all content and functionality prior to launch. Your developer will provide you with a demons...
The Loft Group Corporate Identity and Brand Management Website Design and Development Application Development Graphic Desi...
Notable Projects The Lost Battlefield  http:// www.thelostbattlefield.com.au One Man Epic  http:// www.onemanepic.com Hori...
Thank you Disclaimer:  The content and design layouts discussed in this presentation are not to be used by third parties.
Upcoming SlideShare
Loading in …5
×

Demystifying The Web

1,100 views

Published on

Demystifying the web isn’t about learning how to code or design. It’s about understanding what’s involved in design, development and Search Engine Optimisation. With your new found understanding, you’ll be able to communicate your ideas with creative agencies, become involved in the process and avoid common mistakes.

A taste of things to come:

o What you need before you commence your web project

o What all the acronyms stand for and what they mean

o Current trends in web design and development

o Materialising your ideas

o The design process

o The development process

o Usability

o Accessibility

o Compliance

o Understanding your audience

o Copywriting for the Web

o Content Management Systems (CMS)

o Why you should blog

o Launching your website!

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

Demystifying The Web

  1. 1. Demystifying the Web
  2. 2. The Loft Group We do everything you could ever need from a creative agency, and we do it very well indeed.
  3. 3. Me… Technical Team Leader @ The Loft Group BSc. Internet Computing Web Design Web Development Search Engine Optimisation Project Management
  4. 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. 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. 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.
  7. 7. Basic Terminology continued Browser :
  8. 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. 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. 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
  11. 11. How these components interact
  12. 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. 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. 14. What Do I Need to Start a Website? Rough Sitemap
  15. 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. 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. 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. 18. The Website Design Process 6. Scenario Example:
  19. 19. The Website Design Process <ul><li>Present your Sitemap : </li></ul><ul><li>Articulate structure. </li></ul><ul><li>These steps help your web designer to enhance the visibility of areas you wish to emphasise and helps to arrange visual elements. </li></ul>
  20. 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. 21. The Website Development Process Development revolves around: Usability Accessibility And Compliance
  22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 33. The Loft Group Corporate Identity and Brand Management Website Design and Development Application Development Graphic Design Print Management Photography
  34. 34. Notable Projects The Lost Battlefield http:// www.thelostbattlefield.com.au One Man Epic http:// www.onemanepic.com Horizon Power Intranet (Western Power)
  35. 35. Thank you Disclaimer: The content and design layouts discussed in this presentation are not to be used by third parties.

×