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