Navigation Menu+

Lesson 3.4
Aesthetics and CSS

Lesson 3.4
Aesthetics and CSS


LEARNING GOAL: The Basics of CSS

Students will be able to construct multi-page websites using Internal Links and External CSS.

Click Here to View the Learning Goal and Scale


OVERVIEW:

lesson3-4_aestheticsAfter looking at font, text, and color over the last two lessons, you should be noticing a simple theme: CSS is about making websites look good. Color cannot be random. Images cannot be random. Text cannot be random. Every single thing you put into a website has to be there for a reason.

So when something is pleasing to the eye, we say that it has good aesthetics. To focus on the aesthetics of a website means that you are concerned about the beauty of each page and whether someone will enjoy what they see when they look at your design.

Sometimes focusing on the beauty of a page can be difficult when you’re still trying to wrap your brain around coding with HTML and CSS, but after doing a few different designs on your own and with the teacher, a lot of the coding should now be coming to you more naturally. Today, we’ll try to build an aesthetically pleasing website and learn a few more ways to make our site look more attractive.


SCHEDULE (85 MINUTES):


PART 1: CLASS DISCUSSION – Aesthetic Foundations

Click here to show/hide contents

hakonwiumlieTopic #1 – A New Message from Hakon Wium Lie

“Today, placing a page on the Web is no longer just a matter of posting some text and hoping someone stumbles across it… a page needs to attract and stimulate as well as inform. It needs to stand out among the enormous and rapidly growing repertoire (or, collection) of pages that make up the Web.” (Hakon Wium Lie, Cascading Style Sheets: Designing for the Web)

What does he mean? Using 30-30-60, consider how this quote applies to what we’re learning.

*Refer to the “minimums.com”

Topic #2 – CSS Review Questions (Lesson 3.1, 3.2, & 3.3)

1. Why was the CSS language originally created?

2. What is an internal link?

3. Explain the difference between text and font.

4. What are monochromatic colors?

5. What is a color palette?

Topic #3Aesthetics: A Definition

Aesthetics has to do with the way something looks. If we find something pleasing to the eye, we say it has good aesthetics (smooth, monochromatic colors + soft shape contrast). If we find something hard to look at, we say it has bad aesthetics (bright, contradictory colors + equal shapes).

But aesthetics applies to more than just web design. Just consider the Mercedes Benz. What comes to mind when you think of a Mercedes?

Topic #4From Simple Design to Aesthetic Design

Your ability to design a web page is now fairly strong. But your ability to design a page that is also visually or aesthetically pleasing may be a little weaker. The difference between just being a designer and being someone who can design something visually appealing is how much time you are willing to spend. Those who invest a lot into their designs will almost always produce something beautiful.

Topic #5Aesthetics is Personal

Good designers can be trend setters. They lose sleep trying to make their design the absolute best. And when they produce something beautiful, others want to copy their work. Click here to look at the difference between the Hyundai Genesis (on the left) and the Mercedes Benz C Class (on the right). One company set the bar extremely high while the other company just copied the first design to make it seem like their car was just as good. Which company set the bar?

Important Quote: “It’s very personal because you’re creating something that is going to exist. Everyone is going to have an opinion about it.”

*A Web Designer’s Example

Topic #6White Space & Focal Points

When you start designing a website, one of the first things you have to think about is what will be on your page. And once you know what will be on your page, how can you get people to look at it? White Space refers to empty or unused space on a page that helps draw attention to a focal point. And the focal point is whatever you want people to notice first on a page. In other words, the focal point is whatever people see first (a really big font, a creative image, a large box) because there is enough white space around it.

For example, a school yearbook is always full of images and text, but how do we draw attention to the best, or most important things on the page? Click here to see some yearbook samples.

Topic #7Aesthetic Textures & Patterns

texturedemo3In web design, any appearance of a rough or raised surface is often called texture. Sometimes, texture can also lead to patterns, which are repeated designs. For example, below are two textures without patterns and two textures with patterns.

Texture without a Pattern #1

Texture without a Pattern #2

Texture with a Pattern #1

Texture with a Pattern #2

These are just a few samples of texture. You can Google textures (just like abstracts) or you can create your own.

Go into your IMAGES folder to create a new subfolder called “texture” and then either find some textures on Google or create a few of your own to add in your folder. Take about 5 minutes to fill up your “texture” folder with texture.


PART 2: DAILY DESIGN – Building a 3-Page Website

Click here to show/hide contents

During this design, you will be building a three-page website with different images, colors, and maybe even some textures. But this design will take us the rest of the class period. Follow the directions below to get started. As soon as everyone has completed Step 10, you will receive further instructions.

Step 1: Go to your “css” folder and create a new subfolder called “demo3”.

Step 2: Open Notepad++ and close down any of the files you had open from the last class.

Step 3: Now create four new files in Notepad++ and save them as index.html, history.html, contact.html, and china.css in your “demo3” folder.

Step 4: In your index.html file, copy/paste this code.

Step 5: In your history.html file, copy/paste this code.

Step 6: In your contact.html file, copy/paste this code.

Step 7: In your china.css file, copy/paste this code.

Step 8: Save your work, then open up your “index.html” with Chrome or Firefox.

Step 9: Create a split screen (half Notepad++ and half Chrome/Firefox).

Step 10: In Notepad++, go to your china.css file and wait for the teacher.

As a class, we will all build a three-page website with some organized, creative text and font styles. If there is time after we build this three-page website, you might be given some additional challenges (adding a fourth page, changing the text color from page to page, etc).


RESET WORKSTATIONS (2-3 Minutes)

Translate »