Introduction to Web Design Web Design Concepts Joe Griffin

 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

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

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

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

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

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

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

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

How the Web Works - Overview Introduction to Web Design - Joe Griffin - WCFE'1410 Server Client Cloud

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”

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

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

 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?

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

 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?

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

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

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

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

 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

 In basic terms, a domain name is the name used to find a website online .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

 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

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

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

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

 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

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

Introduction to Web Design - Joe Griffin - WCFE'1429

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

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)

Introduction to Web Design - Joe Griffin - WCFE'1432

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

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

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)

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)

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)

 “How many hits has your site had?? “ “Ummmm ”  How to determine whether you actually DO have an online PRESENCE  Google Analytics -  Statcounter – Introduction to Web Design - Joe Griffin - WCFE'1438 Metrics

Introduction to Web Design - Joe Griffin - WCFE'1439

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?

D’oh indeed! Introduction to Web Design - Joe Griffin - WCFE'1441 Responsive Design  Websites resize depending on device Example: 

    Lets some BAD sites! Introduction to Web Design - Joe Griffin - WCFE'1442

 trends/ trends/  Introduction to Web Design - Joe Griffin - WCFE'1443 Let’s Design Trends 2014

Lets some Modern sites Introduction to Web Design - Joe Griffin - WCFE'1444

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

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

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

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

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

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

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

  Free HTML/CSS/Javascript etc Tutorials Design Toolkit – W3Schools Tutorials Introduction to Web Design - Joe Griffin - WCFE'1452