Download presentation
Presentation is loading. Please wait.
Published byMelvyn Evans Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.