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

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 5

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 10

Specific people are not stakeholders; people act within roles

## Slide 19

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 21

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 22

“Project Management Professional (PMP)”. Project Management Institute, https://www.pmi.org/certifications/project-management-pmp. Web. 1 Feb 2022.

## Slide 23

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 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

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

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 31

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 33

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 34

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 37

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 49

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 66

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 67

Regina777. “File:Sitemap google.jpg”. Wikimedia Commons, 29 Oct 2006, https://en.wikipedia.org/wiki/File:Sitemap_google.jpg. Web. 27 Jan 2022.

## Slide 69

Workflowy student discount: https://workflowy.zendesk.com/hc/en-us/articles/4415135177108-Discounts-for-education-non-profits

## 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 79

“Introduction to Checkvist”. Checkvist, https://checkvist.com/checklists/856228-introduction-to-checkvist. Web. 30 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 for Students”. Workflowy, https://workflowy.com/students/. Web. 31 Oct 2022.

## Slide 85

“Workflowy templates”. Workflowy, https://workflowy.com/templates/. Web. 31 Oct 2022.

## Slide 86

“2022 Goals + Review - Workflowy”. Workflowy, https://workflowy.com/s/2022-goals-review/uH4qzRJpdsXsf3y6. Web. 31 Oct 2022.

## Slide 87

“Creative brief - Workflowy”. Workflowy, https://workflowy.com/s/creative-brief/hdlJclZW6fCnl0D4. Web. 31 Oct 2022.

## Slide 88

“Video production brief - Workflowy”. Workflowy, https://workflowy.com/s/video-production-bri/7LquFcZQyhtVyP57. Web. 31 Oct 2022.

## Slide 89

“Customer journey map - Workflowy”. Workflowy, https://workflowy.com/s/customer-journey-map/Q2ced6jZPM58yuY0. Web. 31 Oct 2022.

## Slide 90

“Tactical design critique - Workflowy”. Workflowy, https://workflowy.com/s/tactical-design-crit/ezq19OTC8sgaXWuw. Web. 31 Oct 2022.

## Slide 91

“User persona - Workflowy”. Workflowy, https://workflowy.com/s/creative-brief/hdlJclZW6fCnl0D4. Web. 31 Oct 2022.

## Slide 93

Mac App Store. 31 Oct 2022. 

## Slide 94

Schnaidt, Robin. “OutlineEdit 3”. OutlineEdit 3, 2022, https://outlineedit.com. Web. 31 Oct 2022.

## Slide 95

Mac App Store. 31 Oct 2022.

## Slide 96

Schnaidt, Robin. “OutlineEdit 3”. OutlineEdit 3, 2022, https://outlineedit.com. Web. 31 Oct 2022.

## Slide 111

“Thermal heating solutions for process and comfort heating applications | Indeeco”. Indeeco, 2016, https://indeeco.com. Web. 19 May 2020.

## Slide 112

Granneman, Scott. “Herbert West Landscaping”. 

## Slide 116

“Introductory Student Memberships | Geochemical Society”. Geochemical Society, 20 Jan 2022, https://www.geochemsoc.org/programs/ism. Web. 1 Feb 2022.

## Slide 117

“Calendar | ISSL”. Independent Schools of St. Louis, 6 July 2021, https://independentschools.org/events. Web. 1 Feb 2022. 

## Slide 118

“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 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 121

“Cases | ACLU of New Jersey”. ACLU of New Jersey, https://www.aclu-nj.org/cases. Web. 1 Feb 2022.

## Slide 128

Marcotte, Ethan. “Responsive Web Design”. A List Apart, 25 May 2010, http://alistapart.com/article/responsive-web-design. Web. 15 May 2014. 

## Slide 129

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 130

“Home | Saint Louis Zoo”. Saint Louis Zoo, 20 Apr 2016, http://www.stlzoo.org. Web. 20 Apr 2016.

## Slide 131

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 132

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 133

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 135

WebSanity. “Bootstrap 3 Grid Reference”. CodePen, 8 May 2014, http://codepen.io/websanity/pen/toiHp. Web. 20 May 2014.

## Slide 138

Fontbonne University

## Slide 147

https://en.wikipedia.org/wiki/Software_framework

## Slide 151

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 152

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 153

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 157

Bootstrap 4’s CSS was ~9000 lines

Bootstrap 3’s CSS was ~7000 lines

## Slide 158

“Introduction · Bootstrap v5.1”. Bootstrap, 9 Oct 2021, https://getbootstrap.com/docs/5.1/getting-started/introduction/. Web. 1 Feb 2022.

## Slide 159

“Breadcrumb · Bootstrap v5.1”. Bootstrap, 4 Jan 2022, https://getbootstrap.com/docs/5.1/components/breadcrumb/. Web. 1 Feb 2022.

## Slide 160

“Navbar · Bootstrap v5.1”. Bootstrap, 19 Oct 2021, https://getbootstrap.com/docs/5.1/components/navbar/. Web. 1 Feb 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

“Images · Bootstrap v5.1”. Bootstrap, 27 June 2022, https://getbootstrap.com/docs/5.1/content/images/. 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 166

“Borders · Bootstrap v5.1”. Bootstrap, 6 June 2022, https://getbootstrap.com/docs/5.1/utilities/borders/#border-radius. Web. 24 Aug 2022.

## Slide 168

“Home | Saint Louis Zoo”. Saint Louis Zoo, 28 Jan 2022, https://www.stlzoo.org. Web. 1 Feb 2022.

## Slide 169

“Thermal heating solutions for process and comfort heating applications | Indeeco”. Indeeco, 2016, https://indeeco.com. Web. 19 May 2020.

## Slide 170

“Home | Veterans For Peace”. Veterans For Peace, 27 Jan 2022, https://www.veteransforpeace.org. Web. 1 Feb 2022 

## Slide 182

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 183

“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 186

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 191

Diagram by R. Scott Granneman

## Slide 192

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 193

Slides: https://granneman.com/downloads/web-dev/Design-Process.pdf

Notes: https://granneman.com/downloads/web-dev/Design-Process.txt

## Slide 194

https://www.granneman.com/presentations/all-presentations