Notes for Design Process By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 3 Franklin is “quoted” as saying this all over the Internet, but there is no authoritative source Duplessis, Joseph-Siffred. Benjamin Franklin. c. 1785. National Portrait Gallery. Wikipedia, The Free Encyclopedia. Wikimedia Foundation. Web. 23 Aug 2022. https://en.wikipedia.org/wiki/File:Joseph_Siffrein_Duplessis_-_Benjamin_Franklin_-_Google_Art_Project.jpg. Public domain. ## Slide 4 Gardner, Alexander. Abraham Lincoln. 8 Nov 1863. Mead Art Museum. Wikipedia, The Free Encyclopedia. Wikimedia Foundation. Web. 1 Sep 2020. https://en.wikipedia.org/wiki/File:Abraham_Lincoln_O-77_matte_collodion_print.jpg. Public domain. ## Slide 9 Specific people are not stakeholders; people act within roles ## Slide 18 WOCinTech Chat. “wocintech stock - 43 | Women of Color in Tech stock images t… | WOCinTech Chat | Flickr”. Flickr, 13 Mar 2016, https://www.flickr.com/photos/wocintechchat/25167658624/. Web. 23 Aug 2022. Credit: #WOCinTech Chat, wocintechchat.com Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by converting from JPEG to WebP. ## Slide 20 Alvesgaspar. “File:Chicago 2007-4.jpg”. Wikipedia, The Free Encyclopedia, Nov 2007, https://en.wikipedia.org/wiki/File:Chicago_2007-4.jpg. Web. 23 Aug 2022. Licensed CC BY-SA 3.0: https://creativecommons.org/licenses/by-sa/3.0/. ## Slide 21 “Project Management Professional (PMP)”. Project Management Institute, https://www.pmi.org/certifications/project-management-pmp. Web. 1 Feb 2022. ## Slide 22 Child, Benjamin. “Minimalist boardroom”. Unsplash, 13 May 2015, https://unsplash.com/photos/GWe0dlVD9e0. Web. 6 Sep 2016. Licensed from Unsplash: https://unsplash.com/license. ## Slide 24 sturti. “The Thinker Stock Photo - Download Image Now - 30-39 Years, 40-49 Years, Adult - iStock”. iStock, 13 Oct 2008, https://www.istockphoto.com/photo/the-thinker-gm173763174-7453780. Web. Licensed 9 May 2009. Modified by reversing. Andres. “Woman having a great idea”. Can Stock Photo, 20 June 2013, https://www.canstockphoto.com/woman-having-a-great-idea-14146427.html. Web. 10 June 2015. Licensed 10 June 2015. Modified by cropping. ## Slide 25 sturti. “The Thinker Stock Photo - Download Image Now - 30-39 Years, 40-49 Years, Adult - iStock”. iStock, 13 Oct 2008, https://www.istockphoto.com/photo/the-thinker-gm173763174-7453780. Web. Licensed 9 May 2009. Modified by reversing. Andres. “Woman having a great idea”. Can Stock Photo, 20 June 2013, https://www.canstockphoto.com/woman-having-a-great-idea-14146427.html. Web. 10 June 2015. Licensed 10 June 2015. Modified by cropping. ## Slide 26 Theme Photos [@themephotos]. “Graphic designer working on a Macbook laptop using a trackpad, color charts and markers”. Unsplash, 25 Oct 2019, https://unsplash.com/photos/CGpifH3FjOA. Web. 23 Aug 2022. Licensed from Unsplash: https://unsplash.com/license. ## Slide 30 Hannah Olinger [@hannaholinger]. “Journaling Over Coffee”. Unsplash, 6 Feb 2018, https://unsplash.com/photos/8eSrC43qdro. Web. 23 Aug 2022. Licensed from Unsplash: https://unsplash.com/license. ## Slide 32 Creative Commons. “Get Creative!”. Creative Commons, 2002, https://creativecommons.org/about/videos/get-creative/. Web. 1 Jan 2004. Licensed CC BY-NC-SA 1.0: https://creativecommons.org/licenses/by-nc-sa/1.0/. ## Slide 33 Spiske, Markus. “Colorful code”. Unsplash, 13 Mar 2017, https://unsplash.com/photos/8OyKWQgBsKQ. Web. 4 May 2018. Licensed from Unsplash: https://unsplash.com/license. ## Slide 36 NATO E-3A Component. “U.S. Air Force Master Sgt. John Biery, a quality assurance inspector for the E-3A Component Logistics Wing, over looks maintenance personnel and crew chiefs as they prepare an AWACS for take-off March 14, 2013, at NATO Air Base Geilenkirchen. Sergeant Biery, a native of Cumberland, Maryland, is responsible for ensuring Component personnel follow all quality and safety standards while conducting operations on the flightline. (NATO Photo by Staff Sgt. R. Michael Longoria)”. Wikimedia Commons, 14 Mar 2013, https://commons.wikimedia.org/wiki/File:Quality_Assurance_%288557586654%29.jpg. Web. 23 Aug 2022. Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by converting to WebP. ## Slide 48 Carlson: https://twitter.com/CodeWisdom/status/1107703310549729281 Reddit: https://www.reddit.com/r/PHP/comments/12o9dz/weeks_of_coding_can_save_you_hours_of_planning/ ## Slide 65 Gordiyenko, Svetlana. “Website Development Process: Full Guide in 7 Steps”. XB Software, 14 Dec 2015, https://xbsoftware.com/blog/website-development-process-full-guide/. Web. 27 Jan 2022. Fair use. ## Slide 66 Regina777. “File:Sitemap google.jpg”. Wikimedia Commons, 29 Oct 2006, https://en.wikipedia.org/wiki/File:Sitemap_google.jpg. Web. 27 Jan 2022. ## Slide 68 Workflowy student discount: https://workflowy.zendesk.com/hc/en-us/articles/4415135177108-Discounts-for-education-non-profits ## Slide 75 “Introduction to Checkvist”. Checkvist, https://checkvist.com/checklists/856228-introduction-to-checkvist. Web. 30 Oct 2022. ## Slide 76 “Introduction to Checkvist”. Checkvist, https://checkvist.com/checklists/856228-introduction-to-checkvist. Web. 30 Oct 2022. ## Slide 77 “Introduction to Checkvist”. Checkvist, https://checkvist.com/checklists/856228-introduction-to-checkvist. Web. 30 Oct 2022. ## Slide 78 “Introduction to Checkvist”. Checkvist, https://checkvist.com/checklists/856228-introduction-to-checkvist. Web. 30 Oct 2022. ## Slide 80 “Workflowy for Students”. Workflowy, https://workflowy.com/students/. Web. 31 Oct 2022. ## Slide 81 “Workflowy for Students”. Workflowy, https://workflowy.com/students/. Web. 31 Oct 2022. ## Slide 82 “Workflowy for Students”. Workflowy, https://workflowy.com/students/. Web. 31 Oct 2022. ## Slide 83 “Workflowy for Students”. Workflowy, https://workflowy.com/students/. Web. 31 Oct 2022. ## Slide 84 “Workflowy templates”. Workflowy, https://workflowy.com/templates/. Web. 31 Oct 2022. ## Slide 85 “2022 Goals + Review - Workflowy”. Workflowy, https://workflowy.com/s/2022-goals-review/uH4qzRJpdsXsf3y6. Web. 31 Oct 2022. ## Slide 86 “Creative brief - Workflowy”. Workflowy, https://workflowy.com/s/creative-brief/hdlJclZW6fCnl0D4. Web. 31 Oct 2022. ## Slide 87 “Video production brief - Workflowy”. Workflowy, https://workflowy.com/s/video-production-bri/7LquFcZQyhtVyP57. Web. 31 Oct 2022. ## Slide 88 “Customer journey map - Workflowy”. Workflowy, https://workflowy.com/s/customer-journey-map/Q2ced6jZPM58yuY0. Web. 31 Oct 2022. ## Slide 89 “Tactical design critique - Workflowy”. Workflowy, https://workflowy.com/s/tactical-design-crit/ezq19OTC8sgaXWuw. Web. 31 Oct 2022. ## Slide 90 “User persona - Workflowy”. Workflowy, https://workflowy.com/s/creative-brief/hdlJclZW6fCnl0D4. Web. 31 Oct 2022. ## Slide 92 Mac App Store. 31 Oct 2022. ## Slide 93 Schnaidt, Robin. “OutlineEdit 3”. OutlineEdit 3, 2022, https://outlineedit.com. Web. 31 Oct 2022. ## Slide 94 Mac App Store. 31 Oct 2022. ## Slide 95 Schnaidt, Robin. “OutlineEdit 3”. OutlineEdit 3, 2022, https://outlineedit.com. Web. 31 Oct 2022. ## Slide 110 “Thermal heating solutions for process and comfort heating applications | Indeeco”. Indeeco, 2016, https://indeeco.com. Web. 19 May 2020. ## Slide 111 Granneman, Scott. “Herbert West Landscaping”. ## Slide 115 “Introductory Student Memberships | Geochemical Society”. Geochemical Society, 20 Jan 2022, https://www.geochemsoc.org/programs/ism. Web. 1 Feb 2022. ## Slide 116 “Calendar | ISSL”. Independent Schools of St. Louis, 6 July 2021, https://independentschools.org/events. Web. 1 Feb 2022. ## Slide 117 “Myths about Financial Aid | ISSL”. Independent Schools of St. Louis, 13 July 2021, https://independentschools.org/affordability/myths-about-financial-aid. Web. 1 Feb 2022. ## Slide 118 “Cases | ACLU of New Jersey”. ACLU of New Jersey, https://www.aclu-nj.org/cases. Web. 1 Feb 2022. ## Slide 119 “Cases | ACLU of New Jersey”. ACLU of New Jersey, https://www.aclu-nj.org/cases. Web. 1 Feb 2022. ## Slide 120 “Cases | ACLU of New Jersey”. ACLU of New Jersey, https://www.aclu-nj.org/cases. Web. 1 Feb 2022. ## Slide 127 Marcotte, Ethan. “Responsive Web Design”. A List Apart, 25 May 2010, http://alistapart.com/article/responsive-web-design. Web. 15 May 2014. ## Slide 128 Emphasis added Wikipedia contributors. “Responsive web design”. Wikipedia, The Free Encyclopedia, 8 July 2022, https://en.wikipedia.org/wiki/Responsive_web_design. Web. 24 Aug. 2022. ## Slide 129 “Home | Saint Louis Zoo”. Saint Louis Zoo, 20 Apr 2016, http://www.stlzoo.org. Web. 20 Apr 2016. ## Slide 130 The Saint Louis Zoo, before becoming responsive “Home | Saint Louis Zoo”. Saint Louis Zoo, 2 Feb 2014, https://stlzoo.org. Web. 4 Feb 2014. ## Slide 131 The Saint Louis Zoo, after becoming responsive “Home | Saint Louis Zoo”. Saint Louis Zoo, 2 Feb 2014, https://stlzoo.org. Web. 4 Feb 2014. ## Slide 132 StatCounter. “Operating System Market Share Worldwide”. Statcounter Global Stats, https://gs.statcounter.com/os-market-share. Web. 21 January 2022. * 2021: https://gs.statcounter.com/os-market-share/all/worldwide/2021 * 2020: https://gs.statcounter.com/os-market-share/all/worldwide/2020 * 2019: https://gs.statcounter.com/os-market-share/all/worldwide/2019 * 2018: https://gs.statcounter.com/os-market-share/all/worldwide/2018 * 2017: https://gs.statcounter.com/os-market-share/all/worldwide/2017 * 2016: https://gs.statcounter.com/os-market-share/all/worldwide/2016 * 2015: https://gs.statcounter.com/os-market-share/all/worldwide/2015 * 2014: https://gs.statcounter.com/os-market-share/all/worldwide/2014 * 2013: https://gs.statcounter.com/os-market-share/all/worldwide/2013 * 2012: https://gs.statcounter.com/os-market-share/all/worldwide/2012 * 2011: https://gs.statcounter.com/os-market-share/all/worldwide/2011 * 2010: https://gs.statcounter.com/os-market-share/all/worldwide/2010 * 2009: https://gs.statcounter.com/os-market-share/all/worldwide/2009 ## Slide 134 WebSanity. “Bootstrap 3 Grid Reference”. CodePen, 8 May 2014, http://codepen.io/websanity/pen/toiHp. Web. 20 May 2014. ## Slide 137 Fontbonne University ## Slide 146 https://en.wikipedia.org/wiki/Software_framework ## Slide 150 Otto, Mark, Jacob Thornton, and Bootstrap contributors. “Bootstrap · The most popular HTML, CSS, and JS library in the world”. Bootstrap, 5 Oct 2021, https://getbootstrap.com. Web. 1 Feb 2022. ## Slide 151 Wikipedia contributors. “Bootstrap (front-end framework)”. Wikipedia, The Free Encyclopedia, 7 Aug. 2022, https://en.wikipedia.org/w/index.php?title=Bootstrap_(front-end_framework)&oldid=1102889777. Web. 24 Aug. 2022. ## Slide 152 Alibaba, Bloomberg, Coursera, Docker, Intel, Mint, Spotify, Udemy, Walmart: Tripathy, Ashutosh. “What companies use the Bootstrap framework?”. Quora, 2019, https://www.quora.com/What-companies-use-the-Bootstrap-framework/answer/Ashutosh-Tripathy-10. Web. 24 Aug 2022. Apple Maps Connect, Duolingo, Instacart, LinkedIn, Lyft, Mastercard, Snap, Spotify, Udemy, Upwork, Vogue: Samuel, Ajayi Abimbola. “Top 10 Big Companies Using Bootstrap”. Career Karma, 5 Aug 2022, https://careerkarma.com/blog/companies-that-use-bootstrap/. Web. 24 Aug 2022. Apple Maps Connect, Forbes, Fox News, Lee, Reuters: “Inspiring Bootstrap Based Website Examples”. BootstrapDash, 5 Nov 2021, https://www.bootstrapdash.com/blog/beautiful-bootstrap-websites. Web. 24 Aug 2022. Envato, Etsy, WhatsApp: “Websites using Bootstrap - Wappalyzer”. Wappalyzer, https://www.wappalyzer.com/technologies/ui-frameworks/bootstrap. Web. 24 Aug 2022. LinkedIn, Lyft, Spotify, Udemy: Andrieiev, Sasha. “What companies use the Bootstrap framework?”. Quora, 2021, https://www.quora.com/What-companies-use-the-Bootstrap-framework/answer/Sasha-Andrieiev. Web. 24 Aug 2022. ## Slide 156 Bootstrap 3’s bootstrap.css was ~7000 lines ## Slide 157 “Introduction · Bootstrap v5.1”. Bootstrap, 9 Oct 2021, https://getbootstrap.com/docs/5.1/getting-started/introduction/. Web. 1 Feb 2022. ## Slide 158 “Breadcrumb · Bootstrap v5.1”. Bootstrap, 4 Jan 2022, https://getbootstrap.com/docs/5.1/components/breadcrumb/. Web. 1 Feb 2022. ## Slide 159 “Navbar · Bootstrap v5.1”. Bootstrap, 19 Oct 2021, https://getbootstrap.com/docs/5.1/components/navbar/. Web. 1 Feb 2022. ## Slide 161 “Images · Bootstrap v5.1”. Bootstrap, 27 June 2022, https://getbootstrap.com/docs/5.1/content/images/. Web. 24 Aug 2022. ## Slide 162 “Images · Bootstrap v5.1”. Bootstrap, 27 June 2022, https://getbootstrap.com/docs/5.1/content/images/. Web. 24 Aug 2022. ## Slide 163 “Images · Bootstrap v5.1”. Bootstrap, 27 June 2022, https://getbootstrap.com/docs/5.1/content/images/. Web. 24 Aug 2022. ## Slide 164 “Borders · Bootstrap v5.1”. Bootstrap, 6 June 2022, https://getbootstrap.com/docs/5.1/utilities/borders/#border-radius. Web. 24 Aug 2022. ## Slide 165 “Borders · Bootstrap v5.1”. Bootstrap, 6 June 2022, https://getbootstrap.com/docs/5.1/utilities/borders/#border-radius. Web. 24 Aug 2022. ## Slide 167 “Home | Saint Louis Zoo”. Saint Louis Zoo, 28 Jan 2022, https://www.stlzoo.org. Web. 1 Feb 2022. ## Slide 168 “Thermal heating solutions for process and comfort heating applications | Indeeco”. Indeeco, 2016, https://indeeco.com. Web. 19 May 2020. ## Slide 169 “Home | Veterans For Peace”. Veterans For Peace, 27 Jan 2022, https://www.veteransforpeace.org. Web. 1 Feb 2022 ## Slide 181 O’Toole, Garson. “A Work of Art Is Never Finished, Merely Abandoned – Quote Investigator”. Quote Investigator, 7 Mar 2021, https://quoteinvestigator.com/2019/03/01/abandon/. Web. 24 Aug 2022. Manuel, Henri. Paul Valéry photographié par Henri Manuel, 14,6 x 10 cm, vers 1925. c. 1925. Expertissim. Wikipedia, The Free Encyclopedia. Wikimedia Foundation. Web. 20 Mar 2019. https://en.wikipedia.org/wiki/File:Paul_Val%C3%A9ry_-_photo_Henri_Manuel.jpg. ## Slide 182 “Paul Valery Quotes”. BrainyQuote.com. BrainyMedia Inc, 24 Aug 2022, https://www.brainyquote.com/quotes/paul_valery_161779. Web. 24 Aug 2022. Manuel, Henri. Paul Valéry photographié par Henri Manuel, 14,6 x 10 cm, vers 1925. c. 1925. Expertissim. Wikipedia, The Free Encyclopedia. Wikimedia Foundation. Web. 20 Mar 2019. https://en.wikipedia.org/wiki/File:Paul_Val%C3%A9ry_-_photo_Henri_Manuel.jpg. ## Slide 185 Niyazz. “South And North Pole And All Things Related”. Can Stock Photo, https://www.canstockphoto.com/south-and-north-pole-and-all-things-19726616.html. Web. 24 Aug 2022. Licensed 24 Aug 2022 from Can Stock Photo. Modified by converting to WebP. ## Slide 190 Diagram by R. Scott Granneman ## Slide 191 Furness, John. “A Website Designed”. Tacit Business Services, 2011, http://tacitbusiness.com.au/wordpress/wp-content/uploads/2013/09/A-Web-Site-Designed.pdf. Web. 25 Jan 2022. Fair use.