{"id":4,"date":"2026-01-10T15:50:13","date_gmt":"2026-01-10T20:50:13","guid":{"rendered":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/?p=4"},"modified":"2026-03-16T22:18:56","modified_gmt":"2026-03-17T02:18:56","slug":"introduction","status":"publish","type":"front-matter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/front-matter\/introduction\/","title":{"raw":"Introduction","rendered":"Introduction"},"content":{"raw":"<h2>Why this eBook?<\/h2>\r\nThis eBook was written specifically for the online course, GRC 365 Web and User Interface Design, at the University of Nevada at Las Vegas (UNLV), Department of Art, <a href=\"https:\/\/www.unlv.edu\/art\/academic-programs\/graphic-design-program\" target=\"_blank\" rel=\"noopener\">Graphic Design and Media Program<\/a>. It was written with the <a href=\"https:\/\/pressbooks.com\" target=\"_blank\" rel=\"noopener\">Pressbooks<\/a> authoring platform hosted by the Library at the <a href=\"https:\/\/torontomu.ca\" target=\"_blank\" rel=\"noopener\">Toronto Metropolitan University<\/a> in Canada. As of this draft, the book has not yet been reviewed by a librarian for accessibility and copyright requirements, therefore has not yet been officially published.\r\n\r\nThe eBook links to several related demonstrations sites hosted by GitHub at rich-adams.net &gt; <a href=\"https:\/\/r3adams.github.io\/grc365\/grc365.html\" target=\"_blank\" rel=\"noopener\">GRC 365<\/a>.\r\n<h2>What's the Web?<\/h2>\r\nMany users may assume that a major technology like the World Wide Web (WWW) must have been invented by a large organization, like a research foundation, government agency, or university. In fact, the web is generally attributed to one individual, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Tim_Berners-Lee\">Sir Timothy Berners-Lee<\/a>. Sir Timothy is a computer scientist who in 1989 worked for the<span> European Organization for Nuclear Research, known as CERN. According to Wikipedia, CERN is an intergovernmental organization that operates the largest particle physics laboratory in the world. Established in 1954, it is based in Meyrin, a western suburb of Geneva, on the France\u2013Switzerland border. It comprises 24 member states.<\/span><span> <\/span>\r\n\r\nVarious scientists from around the world visit the CERN laboratory to perform experiments with the particle collider. The impetus for the Web was that, in 1989, multiple scientists were looking for a way to share data conveniently. Tim Berners-Lee came up with the idea of placing the data on a server and formatting it with the hypertext markup language (HTML) for screens, allowing scientists to read it.\r\n\r\nThink of all the famous billionaires who made their money from the Web. Tim Berners-Lee, on the other hand, was knighted by Queen Elizabeth for his contributions to technology.\r\n\r\nThe web is standardized by the World Wide Web Consortium, <a href=\"https:\/\/www.w3.org\">w3.org<\/a>. of which Tim Berners-Lee is the Emeritus Director.\r\n<h2>Components of a Web Page<\/h2>\r\nWeb pages include three components. Think of a large party tent. The tent has a structure, poles and ropes that hold up the canvas covering. The tent covering may be colored or painted or have posters positioned around it. And it may have interactive features like entrances, exits, signs, and guides. Following this analogy:\r\n<ul>\r\n \t<li>HTML, hypertext markup language, tags provide the structure of the page, analogous to the tent.<\/li>\r\n \t<li>CSS, cascading style sheets, provide the appearance of the tags.<\/li>\r\n \t<li>JavaScript, the programming language for the web, creates interactivity.<\/li>\r\n<\/ul>\r\n<h2>The 5 W\u2019s of Web Design<\/h2>\r\nThe 5 W's of Web Design was originally conceived as a mildly humorous way to help designers transition from the fixed dimensions of print to the freedom of screens.\r\n\r\n<strong>1. Who.<\/strong> We never know who will be looking at our site (unless it's password-protected), but we would like everyone to feel welcome and to be able to navigate and use the site. A good example is accessibility for the visually impaired, which can be addressed by ensuring high contrast, large type, and sufficiently large images.\r\n\r\n<strong>2. What.<\/strong> We don't know what equipment our readers have (computer, operating system, fonts, monitor, browser, window size, \u2026), but we can adapt to different platforms, e.g., by including a \"font stack,\" a list of preferred fonts; and by implementing responsive design, which provides instructions for displaying web pages and elements on various size monitors.\r\n<div style=\"border: 1px solid darkgray;background: whitesmoke;padding: 24px;margin: 24px auto\">\r\n\r\nExample of a font stack listing multiple alternatives in order of preference, and concluding with a generic font specification (others include serif, cursive, and fantasy):\r\n<pre><strong>font-family: Helvetica, Arial, Roboto, sans-serif;<\/strong><\/pre>\r\n<\/div>\r\n<strong>3. Where.<\/strong> We don't know where our readers came from, but we don't want them to leave (or at least, loose track of) our site. This can be compensated by setting links to open in a new tab by adding the \"target='blank'\" attribute to link tags.\r\n\r\n<strong>4. Width.<\/strong> In web design we are not limited to the physical dimension of paper and are free to design for a multitude of screen widths. Design for width and let the length handle itself. This assumes that readers don't mind scrolling up and down but may find it more awkward to scroll sideways, especially when reading large blocks of text.\r\n\r\n<strong>5. Wait!<\/strong> Don't overdesign by using too many fonts, colors, repeating animations, or other complex design elements. Let the author, artist, photographer, poet, merchant, and other publishers show through.\r\n<h2>Web Designers and Web Developers<\/h2>\r\nThe graphics industry generally recognizes two types of specialists who do web work \u2014 web designers and web developers. ChatGPT was asked, \"What is the difference between web designers and web developers?\" Here is its answer:\r\n<p data-start=\"0\" data-end=\"112\">The main difference between a <strong data-start=\"30\" data-end=\"46\">web designer<\/strong> and a <strong data-start=\"53\" data-end=\"70\">web developer<\/strong> is their <strong data-start=\"80\" data-end=\"111\">focus in building a website<\/strong>.<\/p>\r\n\r\n<h3 data-section-id=\"uug9ub\" data-start=\"114\" data-end=\"130\">Web Designer<\/h3>\r\n<p data-start=\"131\" data-end=\"273\">A <strong data-start=\"133\" data-end=\"149\">web designer<\/strong> focuses on the <strong data-start=\"165\" data-end=\"193\">look and user experience<\/strong> of a website. Their job is to make the site visually appealing and easy to use.<\/p>\r\n<p data-start=\"275\" data-end=\"308\">Typical responsibilities include:<\/p>\r\n\r\n<ul data-start=\"309\" data-end=\"561\">\r\n \t<li data-section-id=\"1yqy61c\" data-start=\"309\" data-end=\"353\">\r\n<p data-start=\"311\" data-end=\"353\">Designing page layouts and color schemes<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"tu4kze\" data-start=\"354\" data-end=\"394\">\r\n<p data-start=\"356\" data-end=\"394\">Choosing fonts, images, and graphics<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1bmf5v3\" data-start=\"395\" data-end=\"429\">\r\n<p data-start=\"397\" data-end=\"429\">Creating wireframes or mockups<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"uuv02v\" data-start=\"430\" data-end=\"507\">\r\n<p data-start=\"432\" data-end=\"507\">Ensuring good <strong data-start=\"446\" data-end=\"470\">user experience (UX)<\/strong> and <strong data-start=\"475\" data-end=\"498\">user interface (UI)<\/strong> design<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"x3vrwp\" data-start=\"508\" data-end=\"561\">\r\n<p data-start=\"510\" data-end=\"561\">Designing responsive layouts for phones and tablets<\/p>\r\n<\/li>\r\n<\/ul>\r\n<p data-start=\"563\" data-end=\"576\">Common tools:<\/p>\r\n\r\n<ul data-start=\"577\" data-end=\"662\">\r\n \t<li data-section-id=\"3xanq\" data-start=\"577\" data-end=\"631\">\r\n<p data-start=\"579\" data-end=\"631\">Design software (such as Figma, Adobe XD, Photoshop)<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1k9pjxx\" data-start=\"632\" data-end=\"662\">\r\n<p data-start=\"634\" data-end=\"662\">Sometimes basic HTML and CSS<\/p>\r\n<\/li>\r\n<\/ul>\r\n<h3 data-section-id=\"6e2mgw\" data-start=\"664\" data-end=\"681\">Web Developer<\/h3>\r\n<p data-start=\"682\" data-end=\"775\">A <strong data-start=\"684\" data-end=\"701\">web developer<\/strong> focuses on <strong data-start=\"713\" data-end=\"741\">building and programming<\/strong> the website so it actually works.<\/p>\r\n<p data-start=\"777\" data-end=\"810\">Typical responsibilities include:<\/p>\r\n\r\n<ul data-start=\"811\" data-end=\"1021\">\r\n \t<li data-section-id=\"1p05feo\" data-start=\"811\" data-end=\"847\">\r\n<p data-start=\"813\" data-end=\"847\">Writing code to create the website<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"j3m9hs\" data-start=\"848\" data-end=\"911\">\r\n<p data-start=\"850\" data-end=\"911\">Building site functionality (forms, menus, logins, databases)<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"zw3rv2\" data-start=\"912\" data-end=\"958\">\r\n<p data-start=\"914\" data-end=\"958\">Connecting websites to servers and databases<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"i2ves0\" data-start=\"959\" data-end=\"1021\">\r\n<p data-start=\"961\" data-end=\"1021\">Making sure the site loads quickly and works across browsers<\/p>\r\n<\/li>\r\n<\/ul>\r\n<p data-start=\"1023\" data-end=\"1043\">Common technologies:<\/p>\r\n\r\n<ul data-start=\"1044\" data-end=\"1120\">\r\n \t<li data-section-id=\"2kjzv9\" data-start=\"1044\" data-end=\"1054\">\r\n<p data-start=\"1046\" data-end=\"1054\"><strong data-start=\"1046\" data-end=\"1054\">HTML<\/strong><\/p>\r\n<\/li>\r\n \t<li data-section-id=\"d7c8qz\" data-start=\"1055\" data-end=\"1064\">\r\n<p data-start=\"1057\" data-end=\"1064\"><strong data-start=\"1057\" data-end=\"1064\">CSS<\/strong><\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1x7t8uz\" data-start=\"1065\" data-end=\"1081\">\r\n<p data-start=\"1067\" data-end=\"1081\"><strong data-start=\"1067\" data-end=\"1081\">JavaScript<\/strong><\/p>\r\n<\/li>\r\n \t<li data-section-id=\"gte00u\" data-start=\"1082\" data-end=\"1120\">\r\n<p data-start=\"1084\" data-end=\"1120\">Frameworks and server-side languages<\/p>\r\n<\/li>\r\n<\/ul>\r\n<h3 data-section-id=\"bx5mak\" data-start=\"1122\" data-end=\"1154\">Simple Way to Think About It<\/h3>\r\n<ul data-start=\"1155\" data-end=\"1253\">\r\n \t<li data-section-id=\"845smz\" data-start=\"1155\" data-end=\"1209\">\r\n<p data-start=\"1157\" data-end=\"1209\"><strong data-start=\"1157\" data-end=\"1207\">Web Designer \u2192 How the website looks and feels<\/strong><\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1pyaa70\" data-start=\"1210\" data-end=\"1253\">\r\n<p data-start=\"1212\" data-end=\"1253\"><strong data-start=\"1212\" data-end=\"1253\">Web Developer \u2192 How the website works<\/strong><\/p>\r\n<\/li>\r\n<\/ul>\r\n<h3 data-section-id=\"16zgw4u\" data-start=\"1255\" data-end=\"1266\">Example<\/h3>\r\n<p data-start=\"1267\" data-end=\"1302\">If a company is building a website:<\/p>\r\n\r\n<ul data-start=\"1303\" data-end=\"1515\">\r\n \t<li data-section-id=\"po09qh\" data-start=\"1303\" data-end=\"1411\">\r\n<p data-start=\"1305\" data-end=\"1411\">The <strong data-start=\"1309\" data-end=\"1321\">designer<\/strong> decides where the navigation menu goes, what colors to use, and how the page is laid out.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1nc9l30\" data-start=\"1412\" data-end=\"1515\">\r\n<p data-start=\"1414\" data-end=\"1515\">The <strong data-start=\"1418\" data-end=\"1431\">developer<\/strong> writes the <strong data-start=\"1443\" data-end=\"1451\">code<\/strong> that makes the menu open, the buttons work, and the pages load.<\/p>\r\n<\/li>\r\n<\/ul>\r\n<p data-start=\"1517\" data-end=\"1629\">Many professionals today work as <strong data-start=\"1550\" data-end=\"1558\">both<\/strong>, often called a <strong data-start=\"1575\" data-end=\"1598\">front-end developer<\/strong> or <strong data-start=\"1602\" data-end=\"1628\">web designer\/developer<\/strong>.<\/p>\r\n<p data-start=\"1631\" data-end=\"1804\" data-is-last-node=\"\" data-is-only-node=\"\">If you'd like, I can also explain the <strong data-start=\"1669\" data-end=\"1745\">three main types of web developers (front-end, back-end, and full-stack)<\/strong>, which is something that often comes up in job interviews.<\/p>\r\n\r\n<h2 data-start=\"1631\" data-end=\"1804\">Interview Questions<\/h2>\r\n<p data-start=\"0\" data-end=\"99\">ChatGPT was asked to \"List the top 10 interview questions a web designer may be asked when applying for a job.\"<\/p>\r\n<p data-start=\"0\" data-end=\"99\">Here are <strong data-start=\"9\" data-end=\"42\">10 common interview questions<\/strong> a <strong data-start=\"45\" data-end=\"61\">web designer<\/strong> may be asked when applying for a job:<\/p>\r\n\r\n<ol data-start=\"101\" data-end=\"1621\">\r\n \t<li data-section-id=\"vfuqd4\" data-start=\"101\" data-end=\"255\">\r\n<p data-start=\"104\" data-end=\"255\"><strong data-start=\"104\" data-end=\"173\">Can you tell us about yourself and your experience in web design?<\/strong><br data-start=\"173\" data-end=\"176\" \/>Interviewers want a brief overview of your background, skills, and projects.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"phxm66\" data-start=\"257\" data-end=\"409\">\r\n<p data-start=\"260\" data-end=\"409\"><strong data-start=\"260\" data-end=\"335\">Can you show us your portfolio and walk us through one or two projects?<\/strong><br data-start=\"335\" data-end=\"338\" \/>They want to understand your design process, decisions, and results.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"3iy30v\" data-start=\"411\" data-end=\"549\">\r\n<p data-start=\"414\" data-end=\"549\"><strong data-start=\"414\" data-end=\"471\">What design tools and software do you use most often?<\/strong><br data-start=\"471\" data-end=\"474\" \/>Examples might include design tools, prototyping tools, or code editors.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"szgc1\" data-start=\"551\" data-end=\"711\">\r\n<p data-start=\"554\" data-end=\"711\"><strong data-start=\"554\" data-end=\"619\">How do you approach designing a website from start to finish?<\/strong><br data-start=\"619\" data-end=\"622\" \/>This evaluates your workflow, such as research, wireframing, prototyping, and testing.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"c0w92u\" data-start=\"713\" data-end=\"865\">\r\n<p data-start=\"716\" data-end=\"865\"><strong data-start=\"716\" data-end=\"786\">How do you ensure your designs are responsive and mobile-friendly?<\/strong><br data-start=\"786\" data-end=\"789\" \/>Employers want to know how you handle different screen sizes and devices.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"npwsqm\" data-start=\"867\" data-end=\"1026\">\r\n<p data-start=\"870\" data-end=\"1026\"><strong data-start=\"870\" data-end=\"940\">How do you balance visual design with usability and accessibility?<\/strong><br data-start=\"940\" data-end=\"943\" \/>This question checks your understanding of user experience and inclusive design.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1nity0h\" data-start=\"1028\" data-end=\"1179\">\r\n<p data-start=\"1031\" data-end=\"1179\"><strong data-start=\"1031\" data-end=\"1104\">How do you handle feedback or criticism from clients or team members?<\/strong><br data-start=\"1104\" data-end=\"1107\" \/>Interviewers want to see your collaboration and communication skills.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1rc8pak\" data-start=\"1181\" data-end=\"1325\">\r\n<p data-start=\"1184\" data-end=\"1325\"><strong data-start=\"1184\" data-end=\"1243\">What is your experience with HTML, CSS, and JavaScript?<\/strong><br data-start=\"1243\" data-end=\"1246\" \/>Many web design roles require at least some front-end development knowledge.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1agd9nc\" data-start=\"1327\" data-end=\"1469\">\r\n<p data-start=\"1330\" data-end=\"1469\"><strong data-start=\"1330\" data-end=\"1398\">How do you stay current with web design trends and technologies?<\/strong><br data-start=\"1398\" data-end=\"1401\" \/>They want to know if you keep learning and improving your skills.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"2yb6rt\" data-start=\"1471\" data-end=\"1621\">\r\n<p data-start=\"1475\" data-end=\"1621\"><strong data-start=\"1475\" data-end=\"1549\">Can you describe a challenging project and how you solved the problem?<\/strong><br data-start=\"1549\" data-end=\"1552\" \/>This shows your problem-solving ability and real-world experience.<\/p>\r\n<\/li>\r\n<\/ol>\r\n<p data-start=\"1623\" data-end=\"1660\">If you'd like, I can also show you:<\/p>\r\n\r\n<ul data-start=\"1661\" data-end=\"1802\" data-is-last-node=\"\" data-is-only-node=\"\">\r\n \t<li data-section-id=\"d5r6rp\" data-start=\"1661\" data-end=\"1717\">\r\n<p data-start=\"1663\" data-end=\"1717\"><strong data-start=\"1663\" data-end=\"1711\">10 strong example answers to these questions<\/strong>, or<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"na0bit\" data-start=\"1718\" data-end=\"1802\" data-is-last-node=\"\">\r\n<p data-start=\"1720\" data-end=\"1802\" data-is-last-node=\"\"><strong data-start=\"1720\" data-end=\"1764\">Questions YOU should ask the interviewer<\/strong> (which can really impress employers).<\/p>\r\n<\/li>\r\n<\/ul>\r\n<h3 data-section-id=\"ctb4h1\" data-start=\"215\" data-end=\"260\">Smart Questions to Ask the Interviewer<\/h3>\r\nChatGPT was asked to follow up with its suggestion about questions to ask the interviewer.\r\n<ol data-start=\"262\" data-end=\"1602\">\r\n \t<li data-section-id=\"11qxcxe\" data-start=\"262\" data-end=\"387\">\r\n<p data-start=\"265\" data-end=\"387\"><strong data-start=\"265\" data-end=\"339\">\u201cCan you describe the typical workflow for a web design project here?\u201d<\/strong><br data-start=\"339\" data-end=\"342\" \/>Shows you care about process and teamwork.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1rkb6pz\" data-start=\"389\" data-end=\"529\">\r\n<p data-start=\"392\" data-end=\"529\"><strong data-start=\"392\" data-end=\"454\">\u201cHow do designers and developers collaborate on projects?\u201d<\/strong><br data-start=\"454\" data-end=\"457\" \/>Helps you understand team dynamics and shows you value collaboration.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1ruwie4\" data-start=\"531\" data-end=\"700\">\r\n<p data-start=\"534\" data-end=\"700\"><strong data-start=\"534\" data-end=\"620\">\u201cWhat are the most important skills or qualities you\u2019re looking for in this role?\u201d<\/strong><br data-start=\"620\" data-end=\"623\" \/>Gives you insight into what they value\u2014and lets you tailor your responses.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"gkuwyz\" data-start=\"702\" data-end=\"856\">\r\n<p data-start=\"705\" data-end=\"856\"><strong data-start=\"705\" data-end=\"783\">\u201cWhat does success look like in this position after the first 3\u20136 months?\u201d<\/strong><br data-start=\"783\" data-end=\"786\" \/>Shows you\u2019re thinking about performance and long-term contribution.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1xihwlr\" data-start=\"858\" data-end=\"978\">\r\n<p data-start=\"861\" data-end=\"978\"><strong data-start=\"861\" data-end=\"918\">\u201cCan you tell me about the team I\u2019d be working with?\u201d<\/strong><br data-start=\"918\" data-end=\"921\" \/>Demonstrates interest in people and workplace culture.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"dzpgw1\" data-start=\"980\" data-end=\"1096\">\r\n<p data-start=\"983\" data-end=\"1096\"><strong data-start=\"983\" data-end=\"1043\">\u201cWhat tools and technologies does your design team use?\u201d<\/strong><br data-start=\"1043\" data-end=\"1046\" \/>Helps you understand expectations and workflow.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"6w1pjp\" data-start=\"1098\" data-end=\"1220\">\r\n<p data-start=\"1101\" data-end=\"1220\"><strong data-start=\"1101\" data-end=\"1174\">\u201cHow do you handle feedback and revisions during the design process?\u201d<\/strong><br data-start=\"1174\" data-end=\"1177\" \/>Shows maturity and openness to critique.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1t9d0g6\" data-start=\"1222\" data-end=\"1341\">\r\n<p data-start=\"1225\" data-end=\"1341\"><strong data-start=\"1225\" data-end=\"1296\">\u201cAre there opportunities for learning or professional development?\u201d<\/strong><br data-start=\"1296\" data-end=\"1299\" \/>Indicates you want to grow and improve.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"8vap\" data-start=\"1343\" data-end=\"1466\">\r\n<p data-start=\"1346\" data-end=\"1466\"><strong data-start=\"1346\" data-end=\"1411\">\u201cWhat are some current challenges the design team is facing?\u201d<\/strong><br data-start=\"1411\" data-end=\"1414\" \/>Positions you as someone ready to solve problems.<\/p>\r\n<\/li>\r\n \t<li data-section-id=\"1qq3ygp\" data-start=\"1468\" data-end=\"1602\">\r\n<p data-start=\"1472\" data-end=\"1602\"><strong data-start=\"1472\" data-end=\"1524\">\u201cWhat are the next steps in the hiring process?\u201d<\/strong><br data-start=\"1524\" data-end=\"1527\" \/>A simple but important question that shows professionalism and interest.<\/p>\r\n<\/li>\r\n<\/ol>","rendered":"<h2>Why this eBook?<\/h2>\n<p>This eBook was written specifically for the online course, GRC 365 Web and User Interface Design, at the University of Nevada at Las Vegas (UNLV), Department of Art, <a href=\"https:\/\/www.unlv.edu\/art\/academic-programs\/graphic-design-program\" target=\"_blank\" rel=\"noopener\">Graphic Design and Media Program<\/a>. It was written with the <a href=\"https:\/\/pressbooks.com\" target=\"_blank\" rel=\"noopener\">Pressbooks<\/a> authoring platform hosted by the Library at the <a href=\"https:\/\/torontomu.ca\" target=\"_blank\" rel=\"noopener\">Toronto Metropolitan University<\/a> in Canada. As of this draft, the book has not yet been reviewed by a librarian for accessibility and copyright requirements, therefore has not yet been officially published.<\/p>\n<p>The eBook links to several related demonstrations sites hosted by GitHub at rich-adams.net &gt; <a href=\"https:\/\/r3adams.github.io\/grc365\/grc365.html\" target=\"_blank\" rel=\"noopener\">GRC 365<\/a>.<\/p>\n<h2>What&#8217;s the Web?<\/h2>\n<p>Many users may assume that a major technology like the World Wide Web (WWW) must have been invented by a large organization, like a research foundation, government agency, or university. In fact, the web is generally attributed to one individual, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Tim_Berners-Lee\">Sir Timothy Berners-Lee<\/a>. Sir Timothy is a computer scientist who in 1989 worked for the<span> European Organization for Nuclear Research, known as CERN. According to Wikipedia, CERN is an intergovernmental organization that operates the largest particle physics laboratory in the world. Established in 1954, it is based in Meyrin, a western suburb of Geneva, on the France\u2013Switzerland border. It comprises 24 member states.<\/span><span> <\/span><\/p>\n<p>Various scientists from around the world visit the CERN laboratory to perform experiments with the particle collider. The impetus for the Web was that, in 1989, multiple scientists were looking for a way to share data conveniently. Tim Berners-Lee came up with the idea of placing the data on a server and formatting it with the hypertext markup language (HTML) for screens, allowing scientists to read it.<\/p>\n<p>Think of all the famous billionaires who made their money from the Web. Tim Berners-Lee, on the other hand, was knighted by Queen Elizabeth for his contributions to technology.<\/p>\n<p>The web is standardized by the World Wide Web Consortium, <a href=\"https:\/\/www.w3.org\">w3.org<\/a>. of which Tim Berners-Lee is the Emeritus Director.<\/p>\n<h2>Components of a Web Page<\/h2>\n<p>Web pages include three components. Think of a large party tent. The tent has a structure, poles and ropes that hold up the canvas covering. The tent covering may be colored or painted or have posters positioned around it. And it may have interactive features like entrances, exits, signs, and guides. Following this analogy:<\/p>\n<ul>\n<li>HTML, hypertext markup language, tags provide the structure of the page, analogous to the tent.<\/li>\n<li>CSS, cascading style sheets, provide the appearance of the tags.<\/li>\n<li>JavaScript, the programming language for the web, creates interactivity.<\/li>\n<\/ul>\n<h2>The 5 W\u2019s of Web Design<\/h2>\n<p>The 5 W&#8217;s of Web Design was originally conceived as a mildly humorous way to help designers transition from the fixed dimensions of print to the freedom of screens.<\/p>\n<p><strong>1. Who.<\/strong> We never know who will be looking at our site (unless it&#8217;s password-protected), but we would like everyone to feel welcome and to be able to navigate and use the site. A good example is accessibility for the visually impaired, which can be addressed by ensuring high contrast, large type, and sufficiently large images.<\/p>\n<p><strong>2. What.<\/strong> We don&#8217;t know what equipment our readers have (computer, operating system, fonts, monitor, browser, window size, \u2026), but we can adapt to different platforms, e.g., by including a &#8220;font stack,&#8221; a list of preferred fonts; and by implementing responsive design, which provides instructions for displaying web pages and elements on various size monitors.<\/p>\n<div style=\"border: 1px solid darkgray;background: whitesmoke;padding: 24px;margin: 24px auto\">\n<p>Example of a font stack listing multiple alternatives in order of preference, and concluding with a generic font specification (others include serif, cursive, and fantasy):<\/p>\n<pre><strong>font-family: Helvetica, Arial, Roboto, sans-serif;<\/strong><\/pre>\n<\/div>\n<p><strong>3. Where.<\/strong> We don&#8217;t know where our readers came from, but we don&#8217;t want them to leave (or at least, loose track of) our site. This can be compensated by setting links to open in a new tab by adding the &#8220;target=&#8217;blank'&#8221; attribute to link tags.<\/p>\n<p><strong>4. Width.<\/strong> In web design we are not limited to the physical dimension of paper and are free to design for a multitude of screen widths. Design for width and let the length handle itself. This assumes that readers don&#8217;t mind scrolling up and down but may find it more awkward to scroll sideways, especially when reading large blocks of text.<\/p>\n<p><strong>5. Wait!<\/strong> Don&#8217;t overdesign by using too many fonts, colors, repeating animations, or other complex design elements. Let the author, artist, photographer, poet, merchant, and other publishers show through.<\/p>\n<h2>Web Designers and Web Developers<\/h2>\n<p>The graphics industry generally recognizes two types of specialists who do web work \u2014 web designers and web developers. ChatGPT was asked, &#8220;What is the difference between web designers and web developers?&#8221; Here is its answer:<\/p>\n<p data-start=\"0\" data-end=\"112\">The main difference between a <strong data-start=\"30\" data-end=\"46\">web designer<\/strong> and a <strong data-start=\"53\" data-end=\"70\">web developer<\/strong> is their <strong data-start=\"80\" data-end=\"111\">focus in building a website<\/strong>.<\/p>\n<h3 data-section-id=\"uug9ub\" data-start=\"114\" data-end=\"130\">Web Designer<\/h3>\n<p data-start=\"131\" data-end=\"273\">A <strong data-start=\"133\" data-end=\"149\">web designer<\/strong> focuses on the <strong data-start=\"165\" data-end=\"193\">look and user experience<\/strong> of a website. Their job is to make the site visually appealing and easy to use.<\/p>\n<p data-start=\"275\" data-end=\"308\">Typical responsibilities include:<\/p>\n<ul data-start=\"309\" data-end=\"561\">\n<li data-section-id=\"1yqy61c\" data-start=\"309\" data-end=\"353\">\n<p data-start=\"311\" data-end=\"353\">Designing page layouts and color schemes<\/p>\n<\/li>\n<li data-section-id=\"tu4kze\" data-start=\"354\" data-end=\"394\">\n<p data-start=\"356\" data-end=\"394\">Choosing fonts, images, and graphics<\/p>\n<\/li>\n<li data-section-id=\"1bmf5v3\" data-start=\"395\" data-end=\"429\">\n<p data-start=\"397\" data-end=\"429\">Creating wireframes or mockups<\/p>\n<\/li>\n<li data-section-id=\"uuv02v\" data-start=\"430\" data-end=\"507\">\n<p data-start=\"432\" data-end=\"507\">Ensuring good <strong data-start=\"446\" data-end=\"470\">user experience (UX)<\/strong> and <strong data-start=\"475\" data-end=\"498\">user interface (UI)<\/strong> design<\/p>\n<\/li>\n<li data-section-id=\"x3vrwp\" data-start=\"508\" data-end=\"561\">\n<p data-start=\"510\" data-end=\"561\">Designing responsive layouts for phones and tablets<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"563\" data-end=\"576\">Common tools:<\/p>\n<ul data-start=\"577\" data-end=\"662\">\n<li data-section-id=\"3xanq\" data-start=\"577\" data-end=\"631\">\n<p data-start=\"579\" data-end=\"631\">Design software (such as Figma, Adobe XD, Photoshop)<\/p>\n<\/li>\n<li data-section-id=\"1k9pjxx\" data-start=\"632\" data-end=\"662\">\n<p data-start=\"634\" data-end=\"662\">Sometimes basic HTML and CSS<\/p>\n<\/li>\n<\/ul>\n<h3 data-section-id=\"6e2mgw\" data-start=\"664\" data-end=\"681\">Web Developer<\/h3>\n<p data-start=\"682\" data-end=\"775\">A <strong data-start=\"684\" data-end=\"701\">web developer<\/strong> focuses on <strong data-start=\"713\" data-end=\"741\">building and programming<\/strong> the website so it actually works.<\/p>\n<p data-start=\"777\" data-end=\"810\">Typical responsibilities include:<\/p>\n<ul data-start=\"811\" data-end=\"1021\">\n<li data-section-id=\"1p05feo\" data-start=\"811\" data-end=\"847\">\n<p data-start=\"813\" data-end=\"847\">Writing code to create the website<\/p>\n<\/li>\n<li data-section-id=\"j3m9hs\" data-start=\"848\" data-end=\"911\">\n<p data-start=\"850\" data-end=\"911\">Building site functionality (forms, menus, logins, databases)<\/p>\n<\/li>\n<li data-section-id=\"zw3rv2\" data-start=\"912\" data-end=\"958\">\n<p data-start=\"914\" data-end=\"958\">Connecting websites to servers and databases<\/p>\n<\/li>\n<li data-section-id=\"i2ves0\" data-start=\"959\" data-end=\"1021\">\n<p data-start=\"961\" data-end=\"1021\">Making sure the site loads quickly and works across browsers<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"1023\" data-end=\"1043\">Common technologies:<\/p>\n<ul data-start=\"1044\" data-end=\"1120\">\n<li data-section-id=\"2kjzv9\" data-start=\"1044\" data-end=\"1054\">\n<p data-start=\"1046\" data-end=\"1054\"><strong data-start=\"1046\" data-end=\"1054\">HTML<\/strong><\/p>\n<\/li>\n<li data-section-id=\"d7c8qz\" data-start=\"1055\" data-end=\"1064\">\n<p data-start=\"1057\" data-end=\"1064\"><strong data-start=\"1057\" data-end=\"1064\">CSS<\/strong><\/p>\n<\/li>\n<li data-section-id=\"1x7t8uz\" data-start=\"1065\" data-end=\"1081\">\n<p data-start=\"1067\" data-end=\"1081\"><strong data-start=\"1067\" data-end=\"1081\">JavaScript<\/strong><\/p>\n<\/li>\n<li data-section-id=\"gte00u\" data-start=\"1082\" data-end=\"1120\">\n<p data-start=\"1084\" data-end=\"1120\">Frameworks and server-side languages<\/p>\n<\/li>\n<\/ul>\n<h3 data-section-id=\"bx5mak\" data-start=\"1122\" data-end=\"1154\">Simple Way to Think About It<\/h3>\n<ul data-start=\"1155\" data-end=\"1253\">\n<li data-section-id=\"845smz\" data-start=\"1155\" data-end=\"1209\">\n<p data-start=\"1157\" data-end=\"1209\"><strong data-start=\"1157\" data-end=\"1207\">Web Designer \u2192 How the website looks and feels<\/strong><\/p>\n<\/li>\n<li data-section-id=\"1pyaa70\" data-start=\"1210\" data-end=\"1253\">\n<p data-start=\"1212\" data-end=\"1253\"><strong data-start=\"1212\" data-end=\"1253\">Web Developer \u2192 How the website works<\/strong><\/p>\n<\/li>\n<\/ul>\n<h3 data-section-id=\"16zgw4u\" data-start=\"1255\" data-end=\"1266\">Example<\/h3>\n<p data-start=\"1267\" data-end=\"1302\">If a company is building a website:<\/p>\n<ul data-start=\"1303\" data-end=\"1515\">\n<li data-section-id=\"po09qh\" data-start=\"1303\" data-end=\"1411\">\n<p data-start=\"1305\" data-end=\"1411\">The <strong data-start=\"1309\" data-end=\"1321\">designer<\/strong> decides where the navigation menu goes, what colors to use, and how the page is laid out.<\/p>\n<\/li>\n<li data-section-id=\"1nc9l30\" data-start=\"1412\" data-end=\"1515\">\n<p data-start=\"1414\" data-end=\"1515\">The <strong data-start=\"1418\" data-end=\"1431\">developer<\/strong> writes the <strong data-start=\"1443\" data-end=\"1451\">code<\/strong> that makes the menu open, the buttons work, and the pages load.<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"1517\" data-end=\"1629\">Many professionals today work as <strong data-start=\"1550\" data-end=\"1558\">both<\/strong>, often called a <strong data-start=\"1575\" data-end=\"1598\">front-end developer<\/strong> or <strong data-start=\"1602\" data-end=\"1628\">web designer\/developer<\/strong>.<\/p>\n<p data-start=\"1631\" data-end=\"1804\" data-is-last-node=\"\" data-is-only-node=\"\">If you&#8217;d like, I can also explain the <strong data-start=\"1669\" data-end=\"1745\">three main types of web developers (front-end, back-end, and full-stack)<\/strong>, which is something that often comes up in job interviews.<\/p>\n<h2 data-start=\"1631\" data-end=\"1804\">Interview Questions<\/h2>\n<p data-start=\"0\" data-end=\"99\">ChatGPT was asked to &#8220;List the top 10 interview questions a web designer may be asked when applying for a job.&#8221;<\/p>\n<p data-start=\"0\" data-end=\"99\">Here are <strong data-start=\"9\" data-end=\"42\">10 common interview questions<\/strong> a <strong data-start=\"45\" data-end=\"61\">web designer<\/strong> may be asked when applying for a job:<\/p>\n<ol data-start=\"101\" data-end=\"1621\">\n<li data-section-id=\"vfuqd4\" data-start=\"101\" data-end=\"255\">\n<p data-start=\"104\" data-end=\"255\"><strong data-start=\"104\" data-end=\"173\">Can you tell us about yourself and your experience in web design?<\/strong><br data-start=\"173\" data-end=\"176\" \/>Interviewers want a brief overview of your background, skills, and projects.<\/p>\n<\/li>\n<li data-section-id=\"phxm66\" data-start=\"257\" data-end=\"409\">\n<p data-start=\"260\" data-end=\"409\"><strong data-start=\"260\" data-end=\"335\">Can you show us your portfolio and walk us through one or two projects?<\/strong><br data-start=\"335\" data-end=\"338\" \/>They want to understand your design process, decisions, and results.<\/p>\n<\/li>\n<li data-section-id=\"3iy30v\" data-start=\"411\" data-end=\"549\">\n<p data-start=\"414\" data-end=\"549\"><strong data-start=\"414\" data-end=\"471\">What design tools and software do you use most often?<\/strong><br data-start=\"471\" data-end=\"474\" \/>Examples might include design tools, prototyping tools, or code editors.<\/p>\n<\/li>\n<li data-section-id=\"szgc1\" data-start=\"551\" data-end=\"711\">\n<p data-start=\"554\" data-end=\"711\"><strong data-start=\"554\" data-end=\"619\">How do you approach designing a website from start to finish?<\/strong><br data-start=\"619\" data-end=\"622\" \/>This evaluates your workflow, such as research, wireframing, prototyping, and testing.<\/p>\n<\/li>\n<li data-section-id=\"c0w92u\" data-start=\"713\" data-end=\"865\">\n<p data-start=\"716\" data-end=\"865\"><strong data-start=\"716\" data-end=\"786\">How do you ensure your designs are responsive and mobile-friendly?<\/strong><br data-start=\"786\" data-end=\"789\" \/>Employers want to know how you handle different screen sizes and devices.<\/p>\n<\/li>\n<li data-section-id=\"npwsqm\" data-start=\"867\" data-end=\"1026\">\n<p data-start=\"870\" data-end=\"1026\"><strong data-start=\"870\" data-end=\"940\">How do you balance visual design with usability and accessibility?<\/strong><br data-start=\"940\" data-end=\"943\" \/>This question checks your understanding of user experience and inclusive design.<\/p>\n<\/li>\n<li data-section-id=\"1nity0h\" data-start=\"1028\" data-end=\"1179\">\n<p data-start=\"1031\" data-end=\"1179\"><strong data-start=\"1031\" data-end=\"1104\">How do you handle feedback or criticism from clients or team members?<\/strong><br data-start=\"1104\" data-end=\"1107\" \/>Interviewers want to see your collaboration and communication skills.<\/p>\n<\/li>\n<li data-section-id=\"1rc8pak\" data-start=\"1181\" data-end=\"1325\">\n<p data-start=\"1184\" data-end=\"1325\"><strong data-start=\"1184\" data-end=\"1243\">What is your experience with HTML, CSS, and JavaScript?<\/strong><br data-start=\"1243\" data-end=\"1246\" \/>Many web design roles require at least some front-end development knowledge.<\/p>\n<\/li>\n<li data-section-id=\"1agd9nc\" data-start=\"1327\" data-end=\"1469\">\n<p data-start=\"1330\" data-end=\"1469\"><strong data-start=\"1330\" data-end=\"1398\">How do you stay current with web design trends and technologies?<\/strong><br data-start=\"1398\" data-end=\"1401\" \/>They want to know if you keep learning and improving your skills.<\/p>\n<\/li>\n<li data-section-id=\"2yb6rt\" data-start=\"1471\" data-end=\"1621\">\n<p data-start=\"1475\" data-end=\"1621\"><strong data-start=\"1475\" data-end=\"1549\">Can you describe a challenging project and how you solved the problem?<\/strong><br data-start=\"1549\" data-end=\"1552\" \/>This shows your problem-solving ability and real-world experience.<\/p>\n<\/li>\n<\/ol>\n<p data-start=\"1623\" data-end=\"1660\">If you&#8217;d like, I can also show you:<\/p>\n<ul data-start=\"1661\" data-end=\"1802\" data-is-last-node=\"\" data-is-only-node=\"\">\n<li data-section-id=\"d5r6rp\" data-start=\"1661\" data-end=\"1717\">\n<p data-start=\"1663\" data-end=\"1717\"><strong data-start=\"1663\" data-end=\"1711\">10 strong example answers to these questions<\/strong>, or<\/p>\n<\/li>\n<li data-section-id=\"na0bit\" data-start=\"1718\" data-end=\"1802\" data-is-last-node=\"\">\n<p data-start=\"1720\" data-end=\"1802\" data-is-last-node=\"\"><strong data-start=\"1720\" data-end=\"1764\">Questions YOU should ask the interviewer<\/strong> (which can really impress employers).<\/p>\n<\/li>\n<\/ul>\n<h3 data-section-id=\"ctb4h1\" data-start=\"215\" data-end=\"260\">Smart Questions to Ask the Interviewer<\/h3>\n<p>ChatGPT was asked to follow up with its suggestion about questions to ask the interviewer.<\/p>\n<ol data-start=\"262\" data-end=\"1602\">\n<li data-section-id=\"11qxcxe\" data-start=\"262\" data-end=\"387\">\n<p data-start=\"265\" data-end=\"387\"><strong data-start=\"265\" data-end=\"339\">\u201cCan you describe the typical workflow for a web design project here?\u201d<\/strong><br data-start=\"339\" data-end=\"342\" \/>Shows you care about process and teamwork.<\/p>\n<\/li>\n<li data-section-id=\"1rkb6pz\" data-start=\"389\" data-end=\"529\">\n<p data-start=\"392\" data-end=\"529\"><strong data-start=\"392\" data-end=\"454\">\u201cHow do designers and developers collaborate on projects?\u201d<\/strong><br data-start=\"454\" data-end=\"457\" \/>Helps you understand team dynamics and shows you value collaboration.<\/p>\n<\/li>\n<li data-section-id=\"1ruwie4\" data-start=\"531\" data-end=\"700\">\n<p data-start=\"534\" data-end=\"700\"><strong data-start=\"534\" data-end=\"620\">\u201cWhat are the most important skills or qualities you\u2019re looking for in this role?\u201d<\/strong><br data-start=\"620\" data-end=\"623\" \/>Gives you insight into what they value\u2014and lets you tailor your responses.<\/p>\n<\/li>\n<li data-section-id=\"gkuwyz\" data-start=\"702\" data-end=\"856\">\n<p data-start=\"705\" data-end=\"856\"><strong data-start=\"705\" data-end=\"783\">\u201cWhat does success look like in this position after the first 3\u20136 months?\u201d<\/strong><br data-start=\"783\" data-end=\"786\" \/>Shows you\u2019re thinking about performance and long-term contribution.<\/p>\n<\/li>\n<li data-section-id=\"1xihwlr\" data-start=\"858\" data-end=\"978\">\n<p data-start=\"861\" data-end=\"978\"><strong data-start=\"861\" data-end=\"918\">\u201cCan you tell me about the team I\u2019d be working with?\u201d<\/strong><br data-start=\"918\" data-end=\"921\" \/>Demonstrates interest in people and workplace culture.<\/p>\n<\/li>\n<li data-section-id=\"dzpgw1\" data-start=\"980\" data-end=\"1096\">\n<p data-start=\"983\" data-end=\"1096\"><strong data-start=\"983\" data-end=\"1043\">\u201cWhat tools and technologies does your design team use?\u201d<\/strong><br data-start=\"1043\" data-end=\"1046\" \/>Helps you understand expectations and workflow.<\/p>\n<\/li>\n<li data-section-id=\"6w1pjp\" data-start=\"1098\" data-end=\"1220\">\n<p data-start=\"1101\" data-end=\"1220\"><strong data-start=\"1101\" data-end=\"1174\">\u201cHow do you handle feedback and revisions during the design process?\u201d<\/strong><br data-start=\"1174\" data-end=\"1177\" \/>Shows maturity and openness to critique.<\/p>\n<\/li>\n<li data-section-id=\"1t9d0g6\" data-start=\"1222\" data-end=\"1341\">\n<p data-start=\"1225\" data-end=\"1341\"><strong data-start=\"1225\" data-end=\"1296\">\u201cAre there opportunities for learning or professional development?\u201d<\/strong><br data-start=\"1296\" data-end=\"1299\" \/>Indicates you want to grow and improve.<\/p>\n<\/li>\n<li data-section-id=\"8vap\" data-start=\"1343\" data-end=\"1466\">\n<p data-start=\"1346\" data-end=\"1466\"><strong data-start=\"1346\" data-end=\"1411\">\u201cWhat are some current challenges the design team is facing?\u201d<\/strong><br data-start=\"1411\" data-end=\"1414\" \/>Positions you as someone ready to solve problems.<\/p>\n<\/li>\n<li data-section-id=\"1qq3ygp\" data-start=\"1468\" data-end=\"1602\">\n<p data-start=\"1472\" data-end=\"1602\"><strong data-start=\"1472\" data-end=\"1524\">\u201cWhat are the next steps in the hiring process?\u201d<\/strong><br data-start=\"1524\" data-end=\"1527\" \/>A simple but important question that shows professionalism and interest.<\/p>\n<\/li>\n<\/ol>\n","protected":false},"author":6,"menu_order":1,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"front-matter-type":[12],"contributor":[],"license":[],"class_list":["post-4","front-matter","type-front-matter","status-publish","hentry","front-matter-type-introduction"],"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/front-matter\/4","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/front-matter"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/types\/front-matter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":18,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/front-matter\/4\/revisions"}],"predecessor-version":[{"id":133,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/front-matter\/4\/revisions\/133"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/front-matter\/4\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/media?parent=4"}],"wp:term":[{"taxonomy":"front-matter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/front-matter-type?post=4"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/contributor?post=4"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/license?post=4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}