Demystifying The Web

Loft Creative
Loft CreativeLoft Creative
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 ,[object Object],[object Object],[object Object]
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.
1 von 35

Más contenido relacionado

Was ist angesagt?(20)

Principle of a good web designPrinciple of a good web design
Principle of a good web design
Santosh V72 views
Web designWeb design
Web design
katetreess817 views
Web designingWeb designing
Web designing
Divya Uppal369 views
Intro to Web Marketing - sites, SEO and social mediaIntro to Web Marketing - sites, SEO and social media
Intro to Web Marketing - sites, SEO and social media
Pixel/Point Press Digital Marketing660 views
Basic SEO Structural IssuesBasic SEO Structural Issues
Basic SEO Structural Issues
R2integrated490 views
Wordpress SEOWordpress SEO
Wordpress SEO
BeFound1.5K views
Accessibility, SEO and Joomla Accessibility, SEO and Joomla
Accessibility, SEO and Joomla
JoomlaDay Australia601 views
Web design brief templateWeb design brief template
Web design brief template
Uğur Çelenk13.2K views
SEO Seminar IndianapolisSEO Seminar Indianapolis
SEO Seminar Indianapolis
Cirrus ABS900 views
The Art of Web Design, 101The Art of Web Design, 101
The Art of Web Design, 101
kellyhousholder955 views
Editorial SEO StrategyEditorial SEO Strategy
Editorial SEO Strategy
Rob Flaherty1.7K views
Website CreationWebsite Creation
Website Creation
Ignited Way25 views
On page seo ppt On page seo ppt
On page seo ppt
PRAJNAPARAMITAJENA6313 views
Generate Leads and Sales with a Sales FunnelGenerate Leads and Sales with a Sales Funnel
Generate Leads and Sales with a Sales Funnel
JoomlaDay Australia1K views

Similar a Demystifying The Web(20)

Essay On How To Improve Your WebsiteEssay On How To Improve Your Website
Essay On How To Improve Your Website
Cheap Custom Written Papers Glenville7 views
Digital MarketingDigital Marketing
Digital Marketing
Digipro India886 views
Easy Web DesignEasy Web Design
Easy Web Design
Noah Boswell545 views
Uktisw websites-distrUktisw websites-distr
Uktisw websites-distr
Jan Klin & Associates486 views
Substance151 Best Web PracticesSubstance151 Best Web Practices
Substance151 Best Web Practices
substance151570 views
Building SEO Friendly WebsitesBuilding SEO Friendly Websites
Building SEO Friendly Websites
GoLaunchMarketing702 views
Building an Online PresenceBuilding an Online Presence
Building an Online Presence
Renée Nesseth43 views
Mkt460 Week3Mkt460 Week3
Mkt460 Week3
Michael Germano257 views
Short Essay On BlogShort Essay On Blog
Short Essay On Blog
Lucy Nader4 views
Digital MarketingDigital Marketing
Digital Marketing
Atul Sharma182 views
Digital marketingDigital marketing
Digital marketing
piegonmedia359 views

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.
  • 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.