The document discusses various topics related to web design trends and technologies. It provides an agenda for learning key elements of good web design, technologies used to build websites like HTML, CSS and JavaScript, highlights current design trends defining modern sites, and suggests developing a toolkit to analyze other sites.

1. Web Design Trends
Image

2. Agenda:
• Learn the key elements of good Web Design
• Understand various technologies used to build quality Web sites
• Highlight web design trends and techniques that are defining modern
website design
• Develop a toolkit filled with a variety of tools to help you analyze
other sites to help build fresh, new Web sites.

3. HTML – Markup Language
CSS -
Web design is the process of
creating websites. It includes webpage layout,
content production, and graphic design.
Soure: https://goo.gl/GwNrzj
HTML defines the structure of content.
CSS defines the look and feel of content.
JavaScript controls the behavior of content.

4. Key Elements of Good Web Design
• Strong, vivid color scheme
• Good use of white space
Source: https://goo.gl/7un1dV

5. White Space
https://www.apple.com https://www.amazon.com

6. Key Elements of Good Web Design
• Strong, vivid color scheme
• Good use of white space
• Meaningful Calls-to-Action
Source: https://goo.gl/7un1dV

7. Calls-to-Action
www.spcollege.edu/lr

8. Key Elements of Good Web Design
• Strong, vivid color scheme
• Good use of white space
• Meaningful Calls-to-Action
• Clean and lightweight coding
• Think about and design for the user
• Design for mobile first (responsiveness)
Source: https://goo.gl/7un1dV

9. By 2019, more than ten
billion mobile devices will
exchange 35 quintillion (1
followed by 18 zeros) bytes
of information each month!
Source: http://goo.gl/cfiS8u

10. Key Elements of Good Web Design
• Strong, vivid color scheme
• Good use of white space
• Meaningful Calls-to-Action
• Clean and lightweight coding
• Think about and design for the user
• Design for mobile first (responsiveness)
• Search Engine Optimization (SEO)
• Speed Optimization!
Source: https://goo.gl/7un1dV

11. More info: https://goo.gl/3KqeFR
Optimize Website Speed

12. Source: https://www.w3.org/WAI/intro/usable
Web Accessibility Evaluation Tools List: https://www.w3.org/WAI/ER/tools

13. • Require a certain browser/plugin
• Use a cumbersome URL
• Annoy or distract the user
• Make the user login to interact with the site
• Set a low timeout threshold
• Design a lousy layout/navigation
• Horrible or no search capability
• Not mobile optimized
• Utilize cumbersome two-factor authentication or annoying reCAPTCHA
Key Elements of Bad Web Design
Source: https://goo.gl/U1AyUY

15. • Require a certain browser/plugin
• Use a cumbersome URL
• Annoy or distract the user
• Make the user login to interact with the site
• Set a low timeout threshold
• Design a lousy layout/navigation
• Horrible or no search capability
• Not mobile optimized
• Utilize cumbersome two-factor authentication or annoying reCAPTCHA
• Dead or outdated links/content
• Make it difficult to contact you
• Don't apply operating system or application patches
• GDPR Compliance?
Key Elements of Bad Web Design
Source: https://goo.gl/U1AyUY

16. Slides/audio: https://goo.gl/Ugfnxp
GDPR Compliant WordPress Plugins: https://goo.gl/msqTjs

17. Examples of “Bad” Web Design
See more at the One Terabyte of Kilobyte Age http://blog.geocities.institute

18. UX (User Experience) vs UI (User Interface)
Source: https://goo.gl/VHXD2P

19. Understand various technologies used to
build quality Web sites

20. .com

21. HTML – Markup Language
CSS -
Soure: https://goo.gl/GwNrzj
HTML defines the structure of content.
CSSdefines the look and feel of content.
JavaScriptcontrols the behavior of content.

22. <article>
<aside>
<audio>
<bdi>
<canvas>
<command>
<datalist>
<details>
<embed>
<figcaption>
<figure>
<footer>
<header>
<hgroup>
<keygen>
<mark>
<meter>
<nav>
<output>
<progress>
<rp>
<rt>
<ruby>
<section>
<source>
<summary>
<time>
<track>
<video>
<wbr>
http://www.w3schools.com/html/html5_new_elements.asp
http://www.w3schools.com/tags/
The <form> element can now include other attributes. <Input type=”email” required>
-- we used to have to do this with JavaScript etc. More info: http://bit.ly/10fNijL
Elements

23. Inspect HTML
elements to see
how it was built.
https://bjork.com

24. New CSS Features That Are Changing Web Design
Read at https://goo.gl/EdUth1

25. Site: https://goo.gl/tJBgvQ

26. 18 Best Creative JavaScript Examples
Source: https://goo.gl/urJxd2

27. Crazy List of Technologies Used in Creating Websites
• Prototyping (Sketch, Invision)
• Designing (Photoshop or Illustrator or Sketch)
• Planning (Asana)
• Web server network (Apache, Nginx, Node.JS)
• Database (PostgreSQL, MySQL)
• Web Markup (HTML)
• Style sheets (CSS)
• Dynamic updating (JavaScript)
• Backend language generating the markup (PHP, Python,
Java, Ruby, JavaScript etc.)
• Front end framework (jQuery, React, Vue)
• Web framework (Laravel, WordPress, Drupal,
Django, Ruby on Rails)
• Networking (TCP/IP)
• Domain name resolution (DNS)
• Web server OS (Linux or Windows Server)
• Analytics (Google Analytics)
• Marketing (Facebook, Google AdWords, etc.)
• Customer Service and Quality Control (ZenDesk,
HotJar)
• Version control (git)
• Version control hosting (Beanstalk)
• Payment integration (Stripe)
• Telephone integration (Twilio)
• Email integration (postman, sendmail, Mandrill)
• CDN or proxy caching (CloudFlare, varnish)
• Cloud computing (Amazon AWS, Microsoft Azure)
• Templating (e.g. Jinja)
Source: https://goo.gl/egvds4

28. Highlight web design trends and techniques
that are defining modern website design

29. Web design trends to watch (2014 version)
• Fonts with personality
• Flat design
• Large hero areas quickly killing sliders
• Focus on mobile!
• Videos in place of text
• Long scrolling sites
• Simple color schemes
• Simplified content
• Dropping the sidebar
• Manipulated imagery
• Extras (e.g., parallax scrolling, HTML5 timed animation etc.)
Source: http://goo.gl/RdKqa8

30. Web design trends to watch (2018 version)
Check out some of these beautiful award-winning websites: https://goo.gl/n1KNGy
Source: https://goo.gl/hZ6bkW
• Drop shadows & depth (www.algolia.com)
• Color schemes (egwineco.com)
• Particle backgrounds (heystack.is)
• Mobile first (www.g-star.com)
• Custom illustrations (www.stride.com)
• Big, bold typography (www.femmefatale.paris)
• Broken grid layouts (dada-data.net)
• Integrated animations (www.zendesk.com)
• Dynamic gradients (www.symodd.com)

31. Source: http://goo.gl/UQ94d
Responsive Web Design
adapts to a webpage’s layout by using fluid,
proportion-based grids, flexible images, and CSS3
media queries.

32. https://getbootstrap.com
Examples: https://goo.gl/MkFvXK
Learn: https://www.w3schools.com/bootstrap

33. Innovative design: https://crypton.trading
https://visual.ly/

35. Websites that design themselves!
thegrid.io

36. Gamification
“involves applying game design
thinking to non-game applications to
make them more fun and engaging.”
Source: gamification.org

37. Activate Your Users!
Captain Up helps you reward your users with
points, badges and levels for exploring your site
and sharing it with their friends!
.com

38. Gamifyied our Gaming Club Website!

39. Version 2018082800, Last Updated Tue Aug 28 07:07:01 2018 UTC
Top-Level Domains

40. Source: https://goo.gl/XCWHhQ
Top-Level Domains

41. WebGL (Web Graphics Library) is a JavaScript API for
rendering interactive 3D and 2D graphics within any
compatible web browser without the use of plug-ins.
Source: https://goo.gl/UdqnLV
https://get.webgl.org

42. WebVR
Image source: https://goo.gl/mZ14xU
https://webvr.info

43. A-FrameA web framework for building virtual reality experiences
https://aframe.io

44. .com
https://gurivr.com/stories/create
GuriVR is actually the A-Frame library. Let’s try an
“intuitive, straightforward way to set up VR
experiences through an editor interface.”

45. https://glitch.com

46. Adding AR Features to Chrome’s Desktop Browsers!
Source: https://goo.gl/vopDg6

47. Adding AR Features in Mobile Chrome Browsers!
“The unique power of AR is to blend digital content with the real world” so
we can “surf the web, find a model, place it in our room to see just how
large it truly is, and physically walk around it.”
~ Reza Ali and Josh Carpenter, Google’s Daydream WebXR team Source: https://goo.gl/vopDg6

48. ARKit (iOS)https://developer.apple.com/arkit/
Follow: https://twitter.com/madewithARKit

49. Develop a toolkit filled with a variety of tools to help you
analyze other sites to help build fresh, new Web sites.

50. https://trends.builtwith.com
.com

51. Chrome Developer Tools

52. http://getfirebug.com/

53. http://www.gwtproject.org/
Google Web Toolkit

54. http://foundation.zurb.com/

55. http://www.opera.com/developer

56. https://mixedreality.mozilla.org

57. http://www.lovelyui.com/ http://www.lovelyui.com

58. https://www.canva.com
Allows everyone to create
beautiful designs.

59. Other tools to check out …
• Kompozer - web authoring system that combines web file management and easy-
to-use WYSIWYG web page editing.
• Dripple – a place to discover, and explore design.
• Dropbox, Droplr, Google Drive etc.
• JS Bin - renders Javascript, HTML and CSS code snippets live in your browser.
• GitHub – a collaboration/code review/code management tool for open source
projects.
• DiffChecker – discover text differences between two blocks of text.
• XAMPP – an Apache distribution containing MySQL, PHP and Perl. Testing
environment.
• 85 Responsive Web Design Tools compiled by Mashable.com.
• Browser extensions (e.g., WhatFont, ColorZilla, Live HTTP Headers, User Agent
Switcher, Link Checker, Window Resizer, Web Developer Toolbar, MeasureIt, Pixlr
Editor etc.)

60. .com/cmairn
.net/chadmairn

61. Contact me!