Notes for Design Process By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 2 Slides: https://granneman.com/downloads/web-dev/Design-Process.pdf Notes: https://granneman.com/downloads/web-dev/Design-Process.txt ## Slide 3 https://www.granneman.com/presentations/all-presentations ## Slide 4 Hey, Jono. “Plan ahead”. Sketchplanations, 25 Dec. 2022, https://sketchplanations.com/plan-ahead. Web. 20 Jan. 2025. Licensed CC BY-NC 4.0: https://creativecommons.org/licenses/by-nc/4.0/. ## Slide 5 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 6 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 11 Specific people are not stakeholders; people act within roles ## Slide 20 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 22 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 23 “Project Management Professional (PMP)”. Project Management Institute, https://www.pmi.org/certifications/project-management-pmp. Web. 1 Feb 2022. ## Slide 24 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 26 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 27 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 28 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 32 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 34 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 35 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 38 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 50 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 67 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 68 Regina777. “File:Sitemap google.jpg”. Wikimedia Commons, 29 Oct 2006, https://en.wikipedia.org/wiki/File:Sitemap_google.jpg. Web. 27 Jan 2022. ## Slide 70 Workflowy student discount: https://workflowy.zendesk.com/hc/en-us/articles/4415135177108-Discounts-for-education-non-profits ## 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 79 “Introduction to Checkvist”. Checkvist, https://checkvist.com/checklists/856228-introduction-to-checkvist. Web. 30 Oct 2022. ## Slide 80 “Introduction to Checkvist”. Checkvist, https://checkvist.com/checklists/856228-introduction-to-checkvist. Web. 30 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 for Students”. Workflowy, https://workflowy.com/students/. Web. 31 Oct 2022. ## Slide 85 “Workflowy for Students”. Workflowy, https://workflowy.com/students/. Web. 31 Oct 2022. ## Slide 86 “Workflowy templates”. Workflowy, https://workflowy.com/templates/. Web. 31 Oct 2022. ## Slide 87 “2022 Goals + Review - Workflowy”. Workflowy, https://workflowy.com/s/2022-goals-review/uH4qzRJpdsXsf3y6. Web. 31 Oct 2022. ## Slide 88 “Creative brief - Workflowy”. Workflowy, https://workflowy.com/s/creative-brief/hdlJclZW6fCnl0D4. Web. 31 Oct 2022. ## Slide 89 “Video production brief - Workflowy”. Workflowy, https://workflowy.com/s/video-production-bri/7LquFcZQyhtVyP57. Web. 31 Oct 2022. ## Slide 90 “Customer journey map - Workflowy”. Workflowy, https://workflowy.com/s/customer-journey-map/Q2ced6jZPM58yuY0. Web. 31 Oct 2022. ## Slide 91 “Tactical design critique - Workflowy”. Workflowy, https://workflowy.com/s/tactical-design-crit/ezq19OTC8sgaXWuw. Web. 31 Oct 2022. ## Slide 92 “User persona - Workflowy”. Workflowy, https://workflowy.com/s/creative-brief/hdlJclZW6fCnl0D4. 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 96 Mac App Store. 31 Oct 2022. ## Slide 97 Schnaidt, Robin. “OutlineEdit 3”. OutlineEdit 3, 2022, https://outlineedit.com. Web. 31 Oct 2022. ## Slide 112 “Thermal heating solutions for process and comfort heating applications | Indeeco”. Indeeco, 2016, https://indeeco.com. Web. 19 May 2020. ## Slide 113 Granneman, Scott. “Herbert West Landscaping”. ## Slide 117 “Introductory Student Memberships | Geochemical Society”. Geochemical Society, 20 Jan 2022, https://www.geochemsoc.org/programs/ism. Web. 1 Feb 2022. ## Slide 118 “Calendar | ISSL”. Independent Schools of St. Louis, 6 July 2021, https://independentschools.org/events. Web. 1 Feb 2022. ## Slide 119 “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 120 “Cases | ACLU of New Jersey”. ACLU of New Jersey, https://www.aclu-nj.org/cases. Web. 1 Feb 2022. ## Slide 121 “Cases | ACLU of New Jersey”. ACLU of New Jersey, https://www.aclu-nj.org/cases. Web. 1 Feb 2022. ## Slide 122 “Cases | ACLU of New Jersey”. ACLU of New Jersey, https://www.aclu-nj.org/cases. Web. 1 Feb 2022. ## Slide 129 Marcotte, Ethan. “Responsive Web Design”. A List Apart, 25 May 2010, http://alistapart.com/article/responsive-web-design. Web. 15 May 2014. ## Slide 130 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 131 “Home | Saint Louis Zoo”. Saint Louis Zoo, 20 Apr 2016, http://www.stlzoo.org. Web. 20 Apr 2016. ## Slide 132 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 133 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 134 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 136 https://en.wikipedia.org/wiki/Software_framework ## Slide 140 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 141 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 142 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 146 Bootstrap 4’s CSS was ~9000 lines Bootstrap 3’s CSS was ~7000 lines ## Slide 147 “Introduction · Bootstrap v5.1”. Bootstrap, 9 Oct 2021, https://getbootstrap.com/docs/5.1/getting-started/introduction/. Web. 1 Feb 2022. ## Slide 148 “Breadcrumb · Bootstrap v5.1”. Bootstrap, 4 Jan 2022, https://getbootstrap.com/docs/5.1/components/breadcrumb/. Web. 1 Feb 2022. ## Slide 149 “Navbar · Bootstrap v5.1”. Bootstrap, 19 Oct 2021, https://getbootstrap.com/docs/5.1/components/navbar/. Web. 1 Feb 2022. ## Slide 151 “Images · Bootstrap v5.1”. Bootstrap, 27 June 2022, https://getbootstrap.com/docs/5.1/content/images/. Web. 24 Aug 2022. ## Slide 152 “Images · Bootstrap v5.1”. Bootstrap, 27 June 2022, https://getbootstrap.com/docs/5.1/content/images/. Web. 24 Aug 2022. ## Slide 153 “Images · Bootstrap v5.1”. Bootstrap, 27 June 2022, https://getbootstrap.com/docs/5.1/content/images/. Web. 24 Aug 2022. ## Slide 154 “Borders · Bootstrap v5.1”. Bootstrap, 6 June 2022, https://getbootstrap.com/docs/5.1/utilities/borders/#border-radius. Web. 24 Aug 2022. ## Slide 155 “Borders · Bootstrap v5.1”. Bootstrap, 6 June 2022, https://getbootstrap.com/docs/5.1/utilities/borders/#border-radius. Web. 24 Aug 2022. ## Slide 157 “Home | Saint Louis Zoo”. Saint Louis Zoo, 28 Jan 2022, https://www.stlzoo.org. Web. 1 Feb 2022. ## Slide 158 “Thermal heating solutions for process and comfort heating applications | Indeeco”. Indeeco, 2016, https://indeeco.com. Web. 19 May 2020. ## Slide 159 “Home | Veterans For Peace”. Veterans For Peace, 27 Jan 2022, https://www.veteransforpeace.org. Web. 1 Feb 2022 ## Slide 171 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 172 “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 175 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 179 Diagram by R. Scott Granneman ## Slide 180 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. ## Slide 181 Slides: https://granneman.com/downloads/web-dev/Design-Process.pdf Notes: https://granneman.com/downloads/web-dev/Design-Process.txt ## Slide 182 https://www.granneman.com/presentations/all-presentations