Introduction

Why this eBook?

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, Graphic Design and Media Program. It was written with the Pressbooks authoring platform hosted by the Library at the Toronto Metropolitan University 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.

The eBook links to several related demonstrations sites hosted by GitHub at rich-adams.net > GRC 365.

What’s the Web?

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, Sir Timothy Berners-Lee. Sir Timothy is a computer scientist who in 1989 worked for the 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–Switzerland border. It comprises 24 member states.

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.

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.

The web is standardized by the World Wide Web Consortium, w3.org. of which Tim Berners-Lee is the Emeritus Director.

Components of a Web Page

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:

• HTML, hypertext markup language, tags provide the structure of the page, analogous to the tent.
• CSS, cascading style sheets, provide the appearance of the tags.
• JavaScript, the programming language for the web, creates interactivity.

The 5 W’s of Web Design

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

1. Who. 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.

2. What. We don’t know what equipment our readers have (computer, operating system, fonts, monitor, browser, window size, …), 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.

font-family: Helvetica, Arial, Roboto, sans-serif;

3. Where. 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.

4. Width. 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.

5. Wait! 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.

Web Designers and Web Developers

The graphics industry generally recognizes two types of specialists who do web work — web designers and web developers. ChatGPT was asked, “What is the difference between web designers and web developers?” Here is its answer:

The main difference between a web designer and a web developer is their focus in building a website.

Web Designer

A web designer focuses on the look and user experience of a website. Their job is to make the site visually appealing and easy to use.

Typical responsibilities include:

• Designing page layouts and color schemes

• Choosing fonts, images, and graphics

• Creating wireframes or mockups

• Ensuring good user experience (UX) and user interface (UI) design

• Designing responsive layouts for phones and tablets

Common tools:

• Design software (such as Figma, Adobe XD, Photoshop)

• Sometimes basic HTML and CSS

Web Developer

A web developer focuses on building and programming the website so it actually works.

Typical responsibilities include:

• Writing code to create the website

• Building site functionality (forms, menus, logins, databases)

• Connecting websites to servers and databases

• Making sure the site loads quickly and works across browsers

Common technologies:

• HTML

• CSS

• JavaScript

• Frameworks and server-side languages

Simple Way to Think About It

• Web Designer → How the website looks and feels

• Web Developer → How the website works

Example

If a company is building a website:

• The designer decides where the navigation menu goes, what colors to use, and how the page is laid out.

• The developer writes the code that makes the menu open, the buttons work, and the pages load.

Many professionals today work as both, often called a front-end developer or web designer/developer.

If you’d like, I can also explain the three main types of web developers (front-end, back-end, and full-stack), which is something that often comes up in job interviews.

Interview Questions

ChatGPT was asked to “List the top 10 interview questions a web designer may be asked when applying for a job.”

Here are 10 common interview questions a web designer may be asked when applying for a job:

1. Can you tell us about yourself and your experience in web design?
   Interviewers want a brief overview of your background, skills, and projects.

2. Can you show us your portfolio and walk us through one or two projects?
   They want to understand your design process, decisions, and results.

3. What design tools and software do you use most often?
   Examples might include design tools, prototyping tools, or code editors.

4. How do you approach designing a website from start to finish?
   This evaluates your workflow, such as research, wireframing, prototyping, and testing.

5. How do you ensure your designs are responsive and mobile-friendly?
   Employers want to know how you handle different screen sizes and devices.

6. How do you balance visual design with usability and accessibility?
   This question checks your understanding of user experience and inclusive design.

7. How do you handle feedback or criticism from clients or team members?
   Interviewers want to see your collaboration and communication skills.

8. What is your experience with HTML, CSS, and JavaScript?
   Many web design roles require at least some front-end development knowledge.

9. How do you stay current with web design trends and technologies?
   They want to know if you keep learning and improving your skills.

10. Can you describe a challenging project and how you solved the problem?
    This shows your problem-solving ability and real-world experience.

If you’d like, I can also show you:

• 10 strong example answers to these questions, or

• Questions YOU should ask the interviewer (which can really impress employers).

Smart Questions to Ask the Interviewer

ChatGPT was asked to follow up with its suggestion about questions to ask the interviewer.

1. “Can you describe the typical workflow for a web design project here?”
   Shows you care about process and teamwork.

2. “How do designers and developers collaborate on projects?”
   Helps you understand team dynamics and shows you value collaboration.

3. “What are the most important skills or qualities you’re looking for in this role?”
   Gives you insight into what they value—and lets you tailor your responses.

4. “What does success look like in this position after the first 3–6 months?”
   Shows you’re thinking about performance and long-term contribution.

5. “Can you tell me about the team I’d be working with?”
   Demonstrates interest in people and workplace culture.

6. “What tools and technologies does your design team use?”
   Helps you understand expectations and workflow.

7. “How do you handle feedback and revisions during the design process?”
   Shows maturity and openness to critique.

8. “Are there opportunities for learning or professional development?”
   Indicates you want to grow and improve.

9. “What are some current challenges the design team is facing?”
   Positions you as someone ready to solve problems.

10. “What are the next steps in the hiring process?”
    A simple but important question that shows professionalism and interest.