introduction to web design web design concepts joe griffin

Introduction to Web Design

Web Design Concepts

Joe Griffin

Introduction to Web Design - Joe Griffin - WCFE'14 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'14 3

What forms the Online Presence?

Introduction to Web Design - Joe Griffin - WCFE'14

Online Presence

4

Website Frontend: HTML/CSS Backend: Wordpress

Metrics

SEOPPC/CPM

VisualsYouTube, Vimeo,

Pinterest etc

SocialFaceboo

k, Twitter, LinkedIn

Introduction to Web Design - Joe Griffin - WCFE'14

Online Presence

5

Website Frontend: HTML/CSS Backend: Wordpress

Metrics

SEOPPC/CPM

VisualsYouTube, Vimeo,

Pinterest etc

SocialFaceboo

k, Twitter, LinkedIn

Introduction to Web Design - Joe Griffin - WCFE'14

Online Presence

6

Website Frontend: HTML/CSS Backend: Wordpress

Metrics

SEOPPC/CPM

VisualsYouTube, Vimeo,

Pinterest etc

SocialFaceboo

k, Twitter, LinkedIn

Introduction to Web Design - Joe Griffin - WCFE'14

Online Presence

7

Website Frontend: HTML/CSS Backend: Wordpress

Metrics

SEOPPC/CPM

VisualsYouTube, Vimeo,

Pinterest etc

SocialFaceboo

k, Twitter, LinkedIn

Introduction to Web Design - Joe Griffin - WCFE'14

Online Presence

8

Website Frontend: HTML/CSS Backend: Wordpress

Metrics

SEOPPC/CPM

VisualsYouTube, Vimeo,

Pinterest etc

SocialFaceboo

k, Twitter, LinkedIn

Introduction to Web Design - Joe Griffin - WCFE'14 9

Here comes the science bit.....kinda

Introduction to Web Design - Joe Griffin - WCFE'14 10

How the Web Works - Overview

Server

Client

www.google.com

209.85.154.254

Cloud

Introduction to Web Design - Joe Griffin - WCFE'14 11

How the Web Works - Browsers

Not all browsers display sites in the same way -Small Differences

Working towards standardisation

Ask about “Cross Browser Compatibility”

Introduction to Web Design - Joe Griffin - WCFE'14 12

How the Web Works – HTML & CSS

HTML Code that sites are

written in – Structure

CSS Code that sites are

coloured in - Wallpaper

Introduction to Web Design - Joe Griffin - WCFE'14 13

How the Web Works - Cookies

Introduction to Web Design - Joe Griffin - WCFE'14 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

Why do you need a website?

Introduction to Web Design - Joe Griffin - WCFE'14 15

Brochure

Blog

E-Commerce

Types of Website

Introduction to Web Design - Joe Griffin - WCFE'14 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.)

How much does a website cost?

Introduction to Web Design - Joe Griffin - WCFE'14 17

Let’s build a website!

Introduction to Web Design - Joe Griffin - WCFE'14 18

Let’s build a website!

Introduction to Web Design - Joe Griffin - WCFE'14 19

The Design Team

Front End Designer

Information Architect

Project ManagerProgrammer

Graphic Designer

Introduction to Web Design - Joe Griffin - WCFE'14 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'14 21

Domain/Hosting Bespoke/Theme-based Content Management System (CMS) Information Architecture (IA) User Experience (UX) Search Engine Optimisation (SEO) Metrics

Let’s build a website

Introduction to Web Design - Joe Griffin - WCFE'14 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

What’s in a name? Domain Name

Introduction to Web Design - Joe Griffin - WCFE'14 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?

Getting the site online - Hosting

Introduction to Web Design - Joe Griffin - WCFE'14 24

Bespoke Design

Introduction to Web Design - Joe Griffin - WCFE'14 25

Advantages: Easy Setup Good Support System

Disadvantages Similarity with other sites Could a competitor have the same website?

Template Based

Introduction to Web Design - Joe Griffin - WCFE'14 26

Hire a Web Developer to customise the template to suit your brand.

Hybrid – Edited Template

Introduction to Web Design - Joe Griffin - WCFE'14 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)

Content Management

Introduction to Web Design - Joe Griffin - WCFE'14 28

Information Architecture

Introduction to Web Design - Joe Griffin - WCFE'14 29

Introduction to Web Design - Joe Griffin - WCFE'14 30

User Experience (UX)

What was the first thing that you saw?

F-Pattern – the way users view your site

Introduction to Web Design - Joe Griffin - WCFE'14 31

The way a person feels about using something

Some Examples:

Hidden Links Complicated Registration Process Popups Content Overlayering

User Experience (UX)

Introduction to Web Design - Joe Griffin - WCFE'14 32

User Experience (UX)

Introduction to Web Design - Joe Griffin - WCFE'14 33

User Experience (UX)

Introduction to Web Design - Joe Griffin - WCFE'14 34

Contact vs. Get in Touch

Home vs. HOME

User Experience (UX)

Introduction to Web Design - Joe Griffin - WCFE'14 35

SEO is the process of improving a website's visibility in Search Engine result pages

1. Keyword research Synonyms Customer Phrases Qualifiers

Search Engine Optimisation (SEO)

Introduction to Web Design - Joe Griffin - WCFE'14 36

2. Search engine friendly site development No duplicate content No flash Sitemap Valid Code Speed

Search Engine Optimisation (SEO)

Introduction to Web Design - Joe Griffin - WCFE'14 37

3. On-page SEO Page Titles Page Headings

4. Link Building High & Low Quality Links

5. Analytics What pages are users looking at?

Search Engine Optimisation (SEO)

Introduction to Web Design - Joe Griffin - WCFE'14 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/

Statcounter – http://www.statcounter.com

Metrics

Introduction to Web Design - Joe Griffin - WCFE'14 39

Metrics

Introduction to Web Design - Joe Griffin - WCFE'14 40

So we have a website....

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?

Introduction to Web Design - Joe Griffin - WCFE'14 41

D’oh indeed!

Responsive Design

Websites resize depending on device

Example: http

://www.joegriffin.ie

Introduction to Web Design - Joe Griffin - WCFE'14 42

http://www.angelfire.com/super/badwebs/

http://www.lingscars.com/

http://www.arngren.net/

http://www.ingenfeld.de/

Lets look @ some BAD sites!

Introduction to Web Design - Joe Griffin - WCFE'14 43

http://justcreative.com/2014/01/21/2014-web-design-trends/

http://playgroundinc.com/

Let’s look @ Design Trends 2014

Introduction to Web Design - Joe Griffin - WCFE'14 44

Lets look @ some Modern sites

Introduction to Web Design - Joe Griffin - WCFE'14 45

Web Design ToolkitSome tools that are handy to have in the armoury!

Introduction to Web Design - Joe Griffin - WCFE'14 46

Draw a picture…..it’ll last longer!

Introduction to Web Design - Joe Griffin - WCFE'14 47

Design Toolkit – Text Editor

Introduction to Web Design - Joe Griffin - WCFE'14 48

Design Toolkit – Graphics Editor

Introduction to Web Design - Joe Griffin - WCFE'14 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'14 50

Design Toolkit – Stock Photos

Introduction to Web Design - Joe Griffin - WCFE'14 51

Design Toolkit – Design Sites

Introduction to Web Design - Joe Griffin - WCFE'14 52

http://www.w3schools.com/

Free HTML/CSS/Javascript etc Tutorials

Design Toolkit – W3Schools Tutorials