Introduction to Web Design Web Design Concepts Joe Griffin.
-
Upload
melvyn-evans -
Category
Documents
-
view
229 -
download
5
Transcript of Introduction to Web Design Web Design Concepts Joe Griffin.
![Page 1: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/1.jpg)
Introduction to Web Design
Web Design Concepts
Joe Griffin
![Page 2: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/3.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 3
What forms the Online Presence?
![Page 4: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/9.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 9
Here comes the science bit.....kinda
![Page 10: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/10.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 10
How the Web Works - Overview
Server
Client
www.google.com
209.85.154.254
Cloud
![Page 11: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/11.jpg)
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”
![Page 12: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/12.jpg)
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
![Page 13: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/13.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 13
How the Web Works - Cookies
![Page 14: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/14.jpg)
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?
![Page 15: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/15.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 15
Brochure
Blog
E-Commerce
Types of Website
![Page 16: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/16.jpg)
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?
![Page 17: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/17.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 17
Let’s build a website!
![Page 18: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/18.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 18
Let’s build a website!
![Page 19: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/19.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 19
The Design Team
Front End Designer
Information Architect
Project ManagerProgrammer
Graphic Designer
![Page 20: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/23.jpg)
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
![Page 24: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/24.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 24
Bespoke Design
![Page 25: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/25.jpg)
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
![Page 26: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/26.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 26
Hire a Web Developer to customise the template to suit your brand.
Hybrid – Edited Template
![Page 27: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/27.jpg)
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
![Page 28: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/28.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 28
Information Architecture
![Page 29: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/29.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 29
![Page 30: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/30.jpg)
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
![Page 31: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/31.jpg)
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)
![Page 32: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/32.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 32
User Experience (UX)
![Page 33: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/33.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 33
User Experience (UX)
![Page 34: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/34.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 34
Contact vs. Get in Touch
Home vs. HOME
User Experience (UX)
![Page 35: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/35.jpg)
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)
![Page 36: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/36.jpg)
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)
![Page 37: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/37.jpg)
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)
![Page 38: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/38.jpg)
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
![Page 39: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/39.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 39
Metrics
![Page 40: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/40.jpg)
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?
![Page 41: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/41.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 41
D’oh indeed!
Responsive Design
Websites resize depending on device
Example: http
://www.joegriffin.ie
![Page 42: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/42.jpg)
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!
![Page 43: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/43.jpg)
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
![Page 44: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/44.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 44
Lets look @ some Modern sites
![Page 45: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/45.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 45
Web Design ToolkitSome tools that are handy to have in the armoury!
![Page 46: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/46.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 46
Draw a picture…..it’ll last longer!
![Page 47: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/47.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 47
Design Toolkit – Text Editor
![Page 48: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/48.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 48
Design Toolkit – Graphics Editor
![Page 49: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/49.jpg)
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
![Page 50: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/50.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 50
Design Toolkit – Stock Photos
![Page 51: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/51.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 51
Design Toolkit – Design Sites
![Page 52: Introduction to Web Design Web Design Concepts Joe Griffin.](https://reader037.fdocuments.us/reader037/viewer/2022102713/56649e0c5503460f94af50bf/html5/thumbnails/52.jpg)
Introduction to Web Design - Joe Griffin - WCFE'14 52
http://www.w3schools.com/
Free HTML/CSS/Javascript etc Tutorials
Design Toolkit – W3Schools Tutorials