1. Introduction to Web Design Web Design Concepts Joe Griffin

2.  Design Concepts  Coding HTML & CSS  Search Engine Optimisation (SEO)  Domain Names & Hosting  Wordpress – Not just for blogging Course Overview Introduction to Web Design - Joe Griffin - WCFE'142

3. What forms the Online Presence? Introduction to Web Design - Joe Griffin - WCFE'143

4. Online Presence Introduction to Web Design - Joe Griffin - WCFE'144 Website Frontend: HTML/CSS Backend: Wordpress Metrics SEO PPC/CPM Visuals YouTube, Vimeo, Pinterest etc Social Facebook, Twitter, LinkedIn

5. Online Presence Introduction to Web Design - Joe Griffin - WCFE'145 Website Frontend: HTML/CSS Backend: Wordpress Metrics SEO PPC/CPM Visuals YouTube, Vimeo, Pinterest etc Social Facebook, Twitter, LinkedIn

6. Online Presence Introduction to Web Design - Joe Griffin - WCFE'146 Website Frontend: HTML/CSS Backend: Wordpress Metrics SEO PPC/CPM Visuals YouTube, Vimeo, Pinterest etc Social Facebook, Twitter, LinkedIn

7. Online Presence Introduction to Web Design - Joe Griffin - WCFE'147 Website Frontend: HTML/CSS Backend: Wordpress Metrics SEO PPC/CPM Visuals YouTube, Vimeo, Pinterest etc Social Facebook, Twitter, LinkedIn

8. Online Presence Introduction to Web Design - Joe Griffin - WCFE'148 Website Frontend: HTML/CSS Backend: Wordpress Metrics SEO PPC/CPM Visuals YouTube, Vimeo, Pinterest etc Social Facebook, Twitter, LinkedIn

9. Here comes the science bit.....kinda Introduction to Web Design - Joe Griffin - WCFE'149

10. How the Web Works - Overview Introduction to Web Design - Joe Griffin - WCFE'1410 Server Client www.google.com 209.85.154.254 Cloud

11. How the Web Works - Browsers Introduction to Web Design - Joe Griffin - WCFE'1411  Not all browsers display sites in the same way - Small Differences  Working towards standardisation  Ask about “Cross Browser Compatibility”

12. How the Web Works – HTML & CSS Introduction to Web Design - Joe Griffin - WCFE'1412  HTML  Code that sites are written in – Structure  CSS  Code that sites are coloured in - Wallpaper

13. How the Web Works - Cookies Introduction to Web Design - Joe Griffin - WCFE'1413

14.  Shop Window for products and services  24/7 365 days a year  Global Reach  Gives credibility  Offers online support for customers  Provides a way for people to contact you Introduction to Web Design - Joe Griffin - WCFE'1414 Why do you need a website?

15.  Brochure  Blog  E-Commerce Introduction to Web Design - Joe Griffin - WCFE'1415 Types of Website

16.  How long is a piece of string?!  Need to understand what the client wants from the website, do they want a CMS? Do they want e-commerce? What about the promotion of the site?  30:70  30% of costs on site development  70% of costs on related (promotion, metrics etc.) Introduction to Web Design - Joe Griffin - WCFE'1416 How much does a website cost?

17. Let’s build a website! Introduction to Web Design - Joe Griffin - WCFE'1417

18. Let’s build a website! Introduction to Web Design - Joe Griffin - WCFE'1418

19. The Design Team Front End Designer Information Architect Project Manager Programmer Graphic Designer Introduction to Web Design - Joe Griffin - WCFE'1419

20. Then there’s you! Front End Developer Graphic Designer User Experience (UX) Information Architect (IA) Programmer Project Manager Introduction to Web Design - Joe Griffin - WCFE'1420

21.  Domain/Hosting  Bespoke/Theme-based  Content Management System (CMS)  Information Architecture (IA)  User Experience (UX)  Search Engine Optimisation (SEO)  Metrics Introduction to Web Design - Joe Griffin - WCFE'1421 Let’s build a website

22.  In basic terms, a domain name is the name used to find a website online http://www.mysite.com .com – Free for anyone to use, worldwide appeal .ie – Registered with IEDR, used in Ireland Introduction to Web Design - Joe Griffin - WCFE'1422 What’s in a name? Domain Name

23.  Websites do not just float around the ‘cloud’  Websites are files stored on a Web Server  Web Server must be connected to the Internet 24/7  Paid Hosting or Self Hosting? Introduction to Web Design - Joe Griffin - WCFE'1423 Getting the site online - Hosting

24. Introduction to Web Design - Joe Griffin - WCFE'1424 Bespoke Design

25. Advantages:  Easy Setup  Good Support System Disadvantages  Similarity with other sites  Could a competitor have the same website? Introduction to Web Design - Joe Griffin - WCFE'1425 Template Based

26.  Hire a Web Developer to customise the template to suit your brand. Introduction to Web Design - Joe Griffin - WCFE'1426 Hybrid – Edited Template

27.  A Website requires ongoing work – tweaking etc.  It becomes inefficient to hire a Web Developer to make small changes here and there.  Content should be easily updateable by Site Admins – Content Management System (CMS) Introduction to Web Design - Joe Griffin - WCFE'1427 Content Management

28. Information Architecture Introduction to Web Design - Joe Griffin - WCFE'1428

29. Introduction to Web Design - Joe Griffin - WCFE'1429

30. User Experience (UX) Introduction to Web Design - Joe Griffin - WCFE'1430  What was the first thing that you saw?  F-Pattern – the way users view your site

31. The way a person feels about using something Some Examples:  Hidden Links  Complicated Registration Process  Popups  Content Overlayering Introduction to Web Design - Joe Griffin - WCFE'1431 User Experience (UX)

32. Introduction to Web Design - Joe Griffin - WCFE'1432

33. User Experience (UX) Introduction to Web Design - Joe Griffin - WCFE'1433

34. Contact vs. Get in Touch Homevs.HOME Introduction to Web Design - Joe Griffin - WCFE'1434 User Experience (UX)

35. SEO is the process of improving a website's visibility in Search Engine result pages 1.Keyword research  Synonyms  Customer Phrases  Qualifiers Introduction to Web Design - Joe Griffin - WCFE'1435 Search Engine Optimisation (SEO)

36. 2.Search engine friendly site development  No duplicate content  No flash  Sitemap  Valid Code  Speed Introduction to Web Design - Joe Griffin - WCFE'1436 Search Engine Optimisation (SEO)

37. 3.On-page SEO  Page Titles  Page Headings 4.Link Building  High & Low Quality Links 5.Analytics  What pages are users looking at? Introduction to Web Design - Joe Griffin - WCFE'1437 Search Engine Optimisation (SEO)

38.  “How many hits has your site had?? “ “Ummmm................”  How to determine whether you actually DO have an online PRESENCE  Google Analytics - http://www.google.ie/analytics/http://www.google.ie/analytics/  Statcounter – http://www.statcounter.comhttp://www.statcounter.com Introduction to Web Design - Joe Griffin - WCFE'1438 Metrics

39. Introduction to Web Design - Joe Griffin - WCFE'1439

40. So we have a website.... Introduction to Web Design - Joe Griffin - WCFE'1440 The new website looks great and you’ve clearly spent a lot of time on it. One question.....how does it look on Android or iPhone?

41. D’oh indeed! Introduction to Web Design - Joe Griffin - WCFE'1441 Responsive Design  Websites resize depending on device Example:  http://www.joegriffin.ie http://www.joegriffin.ie

42.  http://www.angelfire.com/super/badwebs/ http://www.angelfire.com/super/badwebs/  http://www.lingscars.com/ http://www.lingscars.com/  http://www.arngren.net/ http://www.arngren.net/  http://www.ingenfeld.de/ http://www.ingenfeld.de/ Lets look @ some BAD sites! Introduction to Web Design - Joe Griffin - WCFE'1442

43.  http://justcreative.com/2014/01/21/2014-web-design- trends/ http://justcreative.com/2014/01/21/2014-web-design- trends/  http://playgroundinc.com/ http://playgroundinc.com/ Introduction to Web Design - Joe Griffin - WCFE'1443 Let’s look @ Design Trends 2014

44. Lets look @ some Modern sites Introduction to Web Design - Joe Griffin - WCFE'1444

45. Web Design Toolkit Some tools that are handy to have in the armoury! Introduction to Web Design - Joe Griffin - WCFE'1445

46. Draw a picture…..it’ll last longer! Introduction to Web Design - Joe Griffin - WCFE'1446

47. Design Toolkit – Text Editor Introduction to Web Design - Joe Griffin - WCFE'1447

48. Design Toolkit – Graphics Editor Introduction to Web Design - Joe Griffin - WCFE'1448

49. Design Toolkit - Browsers Installations of Internet Explorer, Mozilla Firefox and Google Chrome, allows you to test for cross- browser compatibility Introduction to Web Design - Joe Griffin - WCFE'1449

50. Design Toolkit – Stock Photos Introduction to Web Design - Joe Griffin - WCFE'1450

51. Design Toolkit – Design Sites Introduction to Web Design - Joe Griffin - WCFE'1451

52.  http://www.w3schools.com/ http://www.w3schools.com/  Free HTML/CSS/Javascript etc Tutorials Design Toolkit – W3Schools Tutorials Introduction to Web Design - Joe Griffin - WCFE'1452