Web Design and Development

Welcome to the World of Web Design!

Ever wondered how your favorite websites are built? Whether you’re scrolling through a social media feed or looking up facts for a project, someone had to design and develop those pages. In this chapter, we are going to learn how to move from being a user (someone who uses the web) to a creator (someone who builds the web).

Don't worry if you aren't a "tech genius" yet! Building a website is just like building a Lego set or drawing a map. We’ll take it one step at a time.

1. UI vs. UX: The "Look" and the "Feel"

Before we touch any code, we need to understand the two most important parts of web design: User Interface (UI) and User Experience (UX).

What is User Interface (UI)?

Think of UI as the surface of the website. It is everything you can see and touch. This includes the buttons, the colors, the fonts, and the images.
Analogy: If a website were a car, the UI would be the color of the paint, the shape of the steering wheel, and the leather on the seats.

What is User Experience (UX)?

UX is how a person feels when they use the website. Is it easy to find the "Home" button? Does the page load quickly? Is it confusing or simple?
Analogy: If a website were a car, the UX is how smoothly the car drives and how easy it is to reach the pedals.

Quick Review:

UI = The Look (Buttons, colors, layout).
UX = The Feel (Ease of use, speed, logic).

Key Takeaway: A great website needs both! A beautiful website (good UI) that is impossible to navigate (bad UX) will make users frustrated and they will leave.

2. The Building Blocks: HTML and CSS

To build a website, we usually use two main languages. Think of these as the Skeleton and the Clothing of your webpage.

HTML (HyperText Markup Language)

HTML is the structure of the page. It tells the computer where the headings go, where the paragraphs are, and where to put images. Without HTML, there is no website!

Common HTML Tags:
- <h1>: A big main heading.
- <p>: A paragraph of text.
- <img>: A tag to show a picture.

CSS (Cascading Style Sheets)

CSS is the style. It tells the HTML what color to be, how big the text should be, and where to move things on the screen. CSS makes the "skeleton" look pretty.

Memory Aid: HTML is for House (the walls and floor). CSS is for Curtains (the decoration).

Did you know? You can see the HTML of any website by right-clicking on a page and selecting "View Page Source." It might look messy, but it’s just a big list of instructions!

3. Planning Your Website: Wireframes

Professional designers never start by coding. They start by planning. We do this using a Wireframe.

A wireframe is a simple drawing (usually just black and white lines) that shows where things will go on the page. It’s like a blueprint for a house.

Why make a wireframe?
1. It helps you decide on the layout before you waste time coding.
2. It makes it easy to show your ideas to other people.
3. It helps you focus on usability (where buttons are) rather than colors.

Step-by-Step Wireframing:
1. Draw a rectangle (your screen).
2. Draw boxes where the images will go (usually with an "X" through them).
3. Use lines to represent text.
4. Draw buttons where the user needs to click.

Key Takeaway: Plan first, code second! A good wireframe saves hours of fixing mistakes later.

4. Site Navigation and Structure

How do users get from page A to page B? This is called Navigation. If your website has many pages, you need a Site Map.

A Site Map is a diagram that shows how pages are linked together. Most websites use a Hierarchical Structure:

- Home Page (The top level)
- Categories (About Us, Products, Contact)
- Sub-pages (Specific details under each category)

Common Mistake to Avoid: Don't bury important information too deep! A user should be able to find what they need in three clicks or less. This is often called the "Three-Click Rule."

5. Designing for Everyone (Accessibility)

In MYP Design, we care about all users. Accessibility means making sure people with disabilities (like those who can't see colors well or have trouble using a mouse) can still use your site.

Simple Accessibility Tips:
- High Contrast: Don't use light yellow text on a white background. It's too hard to read!
- Large Text: Ensure the font is big enough for everyone to see.
- Alt-Text: Always add a text description to your images so screen-readers can describe them to visually impaired users.

Quick Review Box:

1. HTML = Structure.
2. CSS = Style.
3. Wireframe = Blueprint plan.
4. Navigation = How users move through the site.
5. Accessibility = Making the site usable for everyone.

6. Summary: The Web Design Process

Don't worry if this seems like a lot! Just remember the flow of the Design Cycle as it applies to websites:

1. Inquiry: Who is my audience? What do they need?
2. Developing: Create a Site Map and draw Wireframes.
3. Creating: Write the HTML and CSS to build the site.
4. Evaluating: Test the site. Do the links work? Is it easy to use?

Final Encouragement: Your first website won't be perfect, and that's okay! Even the world's most famous websites started as simple ideas. The more you practice "speaking" to the computer with HTML and CSS, the easier it will become.