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


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


Online Presence

5


Metrics

SEOPPC/CPM


Pinterest etc

SocialFaceboo



Online Presence

6


Metrics

SEOPPC/CPM


Pinterest etc

SocialFaceboo



Online Presence

7


Metrics

SEOPPC/CPM


Pinterest etc

SocialFaceboo



Online Presence

8


Metrics

SEOPPC/CPM


Pinterest etc

SocialFaceboo



Here comes the science bit.....kinda


How the Web Works - Overview

Server

Client

www.google.com

209.85.154.254

Cloud


How the Web Works - Browsers

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

HTML Code that sites are

written in – Structure

CSS Code that sites are

coloured in - Wallpaper


How the Web Works - Cookies


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?


Brochure

Blog

E-Commerce

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

How much does a website cost?


Let’s build a website!


The Design Team

Front End Designer

Information Architect

Project ManagerProgrammer

Graphic Designer


Then there’s you!

Front End Developer

Graphic Designer

User Experience (UX)

Information Architect (IA)

Programmer

Project Manager


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


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


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


Bespoke Design


Advantages: Easy Setup Good Support System

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

Template Based


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

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)

Content Management


Information Architecture



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




http://www.sitepoint.com/article/usability-blunders-big-players


Contact vs. Get in Touch

Home vs. HOME



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

1. Keyword research Synonyms Customer Phrases Qualifiers



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



3. On-page SEO Page Titles Page Headings

4. Link Building High & Low Quality Links

5. Analytics What pages are users looking at?



“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

http://www.google.ie/analytics/

http://www.statcounter.com/


Metrics


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?


D’oh indeed!

Responsive Design

Websites resize depending on device

Example: http

://www.joegriffin.ie

http://www.joegriffin.ie/

http://www.joegriffin.ie/


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

http://www.lingscars.com/

http://www.arngren.net/

http://www.ingenfeld.de/

Lets look @ some BAD sites!

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

http://www.lingscars.com/

http://www.arngren.net/

http://www.ingenfeld.de/


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

http://playgroundinc.com/

Let’s look @ Design Trends 2014







Lets look @ some Modern sites


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


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


Design Toolkit – Text Editor


Design Toolkit – Graphics Editor


Design Toolkit - Browsers

Installations of Internet Explorer, Mozilla Firefox and Google Chrome, allows you to test for cross-browser compatibility


Design Toolkit – Stock Photos


Design Toolkit – Design Sites


http://www.w3schools.com/

Free HTML/CSS/Javascript etc Tutorials

Design Toolkit – W3Schools Tutorials



introduction to web design web design concepts joe griffin

Documents

linkedin slide

design team

online presence introduction

cloud slide

wallpaper slide

website cost

htmlcss backend

social facebook