After 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.
LEARNING GOAL #3: The Basics of CSS
Students will be able to construct multi-page websites using Internal Links and External CSS.
“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)
minimums.com
Topic #2 – Quick Review
Why was the CSS language originally created?
What is an internal link?
Explain the difference between text and font.
What are monochromatic colors?
What is a color palette?
What two protocols did Vinton Cerf create for the Internet and what do they do?
Topic #3 – Aesthetics: 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. Consider the Mercedes Benz. What comes to mind when you think of a Mercedes?
Topic #4 – From Simple to Aesthetic
Your ability to design a web page should now be 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 #5 – Aesthetics 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 #6 – White 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 #7 – Aesthetic Textures
In 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.
These are just a few samples of texture. You can Google textures (just like abstracts) or you can create your own.
Go into your “img” folder and create a new subfolder called “txt” 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 various textures (some you make, some you find).
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: 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.
Step 9: Create a split screen.
Step 10: In Notepad++, go to your china.css file, then go help out another student (especially your team).
THIS IS A GRADED ASSIGNMENT
Your job over the next two Daily Designs (today and next class) is to complete this design. Right now, it is empty. It has no color, no images, no links, no information. Your job is to finish it and make it more interesting. You need to focus on completing the following five elements.
IMAGES – Find and insert at least four relevant images onto the “index.html” page and possibly more on other pages.
COLOR PALETTE – Pull appropriate colors from one of your images and apply a 3-5 color palette to the “style.css” file.
HISTORY CONTENT – Dig up some history about the Great Wall of China and copy/paste some of it into your “history.html” page.
SOURCE LINKS – Provide two links to two sources that you used for your content.
EMBEDDED MAP – Find a map to some random location on the Great Wall of China and embed that map onto your “contact.html” page.
A – Three Page Website has been Completed with ALL Five Elements.
(Images, Color Palette, History Content, External Source Links for History, Embedded Map for Contact)
B – Three Page Website has been Mostly Completed with 3-4 Elements.
(Images, Color Palette, History Content, External Source Links for History, Embedded Map for Contact)
C – Three Page Website only has 2 Elements Applied.
(Images, Color Palette, History Content, External Source Links for History, Embedded Map for Contact)
D – Three Page Website only has 1 Element Applied.
(Images, Color Palette, History Content, External Source Links for History, Embedded Map for Contact)
F – Three Page Website has no Elements Applied.
(Images, Color Palette, History Content, External Source Links for History, Embedded Map for Contact)
After 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.
Topic #1 – A Message from Hakon Wium Lie
Topic #7 – Aesthetic Textures