This document summarizes a presentation on web design and user experience design. It begins with introducing common terms related to web design. It then discusses the evolution of the web from the 1990s to today. It outlines the five planes of user experience design according to Jesse James Garrett: strategy, scope, structure, skeleton and surface. Examples and tools for each plane are provided. More common terms related to web development, content management systems and how websites are built are defined. Takeaways focus on how the web is evolving with new technologies, the importance of user experience design and resources for learning more.

1. WEB DESIGN
DESIGN FOR THE WEB
Shaheed Bhagat Singh College, University Of Delhi
17 January 2019

2. AGENDA
• Introduction to common terms
• Evolution of the web & where we are today
• Elements of user experience design for the web
• More common terms
• Your web presence
• Q & A
17 January 2019Shaheed Bhagat Singh College, University of Delhi
2

3. INTRODUCTION TO COMMON TERMS
Internet Web
>
17 January 2019Shaheed Bhagat Singh College, University of Delhi
3
Interconnected networks Network of content

4. INTRODUCTION TO COMMON TERMS
Client Server
17 January 2019Shaheed Bhagat Singh College, University of Delhi
4
http
“Web pages”
a.k.a the browser that you use to access the content The computer on which content is stored

5. INTRODUCTION TO COMMON TERMS
Website Web application
17 January 2019Shaheed Bhagat Singh College, University of Delhi
5
Primarily defined by content
Consume data
Defined by interaction with user
Manipulate data

6. THE EVOLUTION OF THE WEB (1990 – 2018)
• 1990 - 95: Early movers
• 1995 - 2000:The Dot Com Bubble, Mobile technology
• 2000 - 2005: Consolidation, open-source CMS
• 2007 - : Smartphones, Social media
• 2009 - : Fourth Industrial Revolution (term coined in 2016)
17 January 2019Shaheed Bhagat Singh College, University of Delhi
6

7. THE EVOLUTION OF THE WEB (1990 – 2018)
17 January 2019Shaheed Bhagat Singh College, University of Delhi
7
1995 – early 2000s
Plain text, static
First generation technologies
2003 – 2010
“Web 2.0” / Rich Internet Application
Dynamic, user generated content
2010 –
“Responsive Web”
“User Experience”

8. USER EXPERIENCE
"User experience" encompasses all aspects of the end-
user's interaction with the company, its services, and its
products.
– Don Norman, Jacob Nielsen
17 January 2019Shaheed Bhagat Singh College, University of Delhi
8

9. ELEMENTS OF USER EXPERIENCE
Defined by Jesse James Garrett
Five planes: Strategy, Scope, Structure,
Skeleton, Surface
Original diagram from 30 March 2000:
http://www.jjg.net/elements/pdf/elements.p
df
17 January 2019Shaheed Bhagat Singh College, University of Delhi
9

10. STRATEGY
• The “why” of the website
• What does the customer need?
• What are our objectives?
Tools:
User research (Surveys, Interviews, Card
Sorting), Personas, Empathy Mapping
17 January 2019Shaheed Bhagat Singh College, University of Delhi
10
Persona: Image credit - Get Response

11. SCOPE
• From strategy, to requirements
• What features and content can the site offer, that
meets our goals as well as those of the user?
• Which features are priority?
Tools
Competitor research, Customer Journey Mapping
17 January 2019Shaheed Bhagat Singh College, University of Delhi
11
Customer Journey Map: Image source - NNGroup

12. STRUCTURE
• From scope / requirements, fitting the pieces
to form a whole
• How will the user interact with the site’s
functionality?
• How will the content be categorized?
Tools:
Use case diagrams, flowcharts, architecture
diagram
17 January 2019Shaheed Bhagat Singh College, University of Delhi
12
Information Architecture: Image source - NNGroup

13. SKELETON
• From structure to specific aspects of
user interface, navigation & information
design
• Making intangible structure concrete
Tools:
Wireframe, Sitemaps
17 January 2019Shaheed Bhagat Singh College, University of Delhi
13
Wireframe: Image credit – Market8

14. SURFACE
• Visual design of the interface elements,
text, graphics, navigation
• Brand identity, colours, typography
Tools:
Digital tools (Sketch, Figma, InVision Studio,
Adobe XD, Photoshop, Illustrator)
17 January 2019Shaheed Bhagat Singh College, University of Delhi
14

15. USER TESTING
• Test out the design with real users.
• Hand over the prototype to the user
and observe behavior
• Best done at wireframe stage, so that
quick corrections can be made be done
Tools
Paper prototyping
Digital tools (Sketch, Figma, InVision Studio,
Adobe XD)
17 January 2019Shaheed Bhagat Singh College, University of Delhi
15
Image source: Sitepoint

16. MORE COMMON TERMS
Web Design Web Development
17 January 2019Shaheed Bhagat Singh College, University of Delhi
16
Definition & visualisation Implementation

17. MORE COMMON TERMS
Web Development
17 January 2019Shaheed Bhagat Singh College, University of Delhi
17
Webpage
(as part of website
and/or
web application)
Client-side
(Front-end)
Server-side
(Back-end)
HTML
CSS
JavaScript
APIs
SQL
PHP
ASP
Python
https://www.w3schools.com/whatis/default.asp
Client Server

18. MORE COMMON TERMS
Content
17 January 2019Shaheed Bhagat Singh College, University of Delhi
18
Management System

19. HOW THE WORLD BUILDS WEBSITES
• WordPress (free) 51%
• Wix (paid) 7%
• Joomla (free) 4%
• Squarespace (paid) 4%
• Weebly (paid) 2%
Source: https://websitesetup.org/
17 January 2019Shaheed Bhagat Singh College, University of Delhi
19

20. YOUR WEB PRESENCE
• Domain Name free* / yearly fee
• Web Hosting free* / yearly fee
• Content (Web Pages, Scripts) free / paid
• Software (FTP client / CMS) free
• Social Media integration mostly free
* T & C apply
17 January 2019Shaheed Bhagat Singh College, University of Delhi
20

21. DOMAIN NAME
17 January 2019Shaheed Bhagat Singh College, University of Delhi
21
https://www.google.com/
google.com
http://www.kasturika.wordpress.com/
kasturika.wordpress.com
https://kasturika.blog/
kasturika.blog
Protocol Subdomain Top-level domain (TLD)Domain
Protocol Subdomain TLDDomainSubdomain
Protocol TLDDomain

22. WEB HOSTING
• Server
• Storage space
• Email
• Database
• cPanel
• Website builder / pre-installed CMS
• Compatibility with other technologies
• SSL
• Tech support
17 January 2019Shaheed Bhagat Singh College, University of Delhi
22

23. TAKEAWAYS
• Fourth Industrial Revolution is already underway – blurring of lines between content
and application, greater integration with physical world.
• Web Design: mostly DIY, replaced by CMS
• Web Development: constantly evolving tech landscape – what you learn today will
likely be replaced very soon – be prepared!
• User Experience: Holistic approach towards end user’s experience, where web is one
of the touchpoints
• UX/UI has been around for a long time, gaining importance in India now
• Design degree good, but industry exposure & portfolio are key
17 January 2019Shaheed Bhagat Singh College, University of Delhi
23

24. UX RESOURCES
• Nielsen Norman Group https://www.nngroup.com/articles/
• Interaction Design Foundation (open source library)
https://www.interaction-design.org/literature
• Smashing Magazine https://www.smashingmagazine.com/
• A List Apart https://alistapart.com/
• UX Collective https://uxdesign.cc/
17 January 2019Shaheed Bhagat Singh College, University of Delhi
24

25. RELATED
Interactive session on
Responsive Web Design
at Ideafarms:
https://www.slideshare.net/Ideafarm
s/responsive-web-design-43778493
17 January 2019Shaheed Bhagat Singh College, University of Delhi
25

26. 17 January 2019Shaheed Bhagat Singh College, University of Delhi
26
I am a member of the Interaction Design Foundation, the
world’s largest UX Design learning community.
Get 3 months of free membership to learn UX Design!
Use this referral link:
https://www.interaction-design.org/invite?r=kasturika