Backgrounds + Design Basics
Exodus 35:35
“[YAH] has filled them with skill to do all the work...” HCSB
Focus: Using backgrounds and basic design principles to make your website look polished and professional.
What We Will Learn
Today we will work on the overall look and feel of your website. A good website should not only work correctly, it should also be visually appealing and easy to read.
We will practice using:
- Colors: Choose colors that work well together and match the purpose of your website.
- Background Colors: Use background colors to separate different sections of your page.
- Gradients: Blend two or more colors together to create an interesting background.
- Background Images: Add images behind sections without making your text difficult to read.
- Contrast: Make sure text stands out clearly from its background.
- Consistency: Use the same colors, fonts, button styles, and design choices throughout your website.
- Spacing: Give text, images, and buttons enough room so your page does not feel crowded.
Design Rule: Keep It Simple
More design does not always mean better design. Every color, image, font, and effect should have a purpose.
Ask yourself:
Can visitors easily read my page?
Do my colors work well together?
Does my website look consistent?
Is anything distracting from the important information?
Their practice page should include:
- A page title
- At least 3 photos
- At least one text box
- A background or design element
- Photos arranged in an organized layout
Encourage students to experiment with moving, resizing, cropping, and arranging their elements.
In-Class Activity: Style Your Home Page
Open the Home page you have been building.
Today, your goal is to begin turning it from a basic webpage into a designed website.
Work on your:
- Header/Hero Section
Choose a background color, gradient, or image. Make sure your heading is easy to read. - Page Colors
Choose a small color palette for your website. Try to stick with about 2 to 4 main colors. - Sections
Use backgrounds to help separate different parts of your Home page. - Text
Check your font sizes, alignment, spacing, and contrast. - Buttons
Make sure the buttons you created last week match the rest of your website. - Overall Design
Look at the entire page. Does everything feel like it belongs to the same website?
Design Challenge
Before class ends, show your Home page to a classmate.
Have them answer:
What catches your attention first?
Is anything difficult to read?
Do the colors work well together?
What is one thing you would change?
Use their feedback to make at least one improvement.
Homework:
Finish your Home page draft.
Your Home page should include the content and features we have practiced so far, including sections, text, images, buttons, links, and intentional background/design choices.
Remember: YAH gave people creativity and skill in Exodus 35:35. Good design is not about adding everything you can. It is about using your skills thoughtfully and doing your work with purpose.