Web Design Trends: 2018 Edition
•Download as PPTX, PDF•
5 likes•2,944 views
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.
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (20)
Similar to Web Design Trends: 2018 Edition
Similar to Web Design Trends: 2018 Edition (20)
More from St. Petersburg College
More from St. Petersburg College (20)
Recently uploaded
Recently uploaded (20)
Web Design Trends: 2018 Edition
- 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
- 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
- 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
- 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
- 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
- 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
- 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.”
- 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
- 49. Develop a toolkit filled with a variety of tools to help you analyze other sites to help build fresh, new Web sites.
- 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.)
- 61. Contact me!