Design Principles and CSS
Design Principles and CSS
LEARNING GOAL: The Basics of CSS
Students will be able to construct multi-page websites using Internal Links and External CSS.
Successful web designers are not just good at using HTML or CSS, but they are also good at applying web design principles to make their designs look aesthetically pleasing to the eye.
Most of the ideas that web designers use to make their sites look good come from the way newspapers have always set up their designs. For example, newspapers are set up on long, broadsheet papers that are folded in half and newspaper editors know that the best stuff has to be above the fold where readers will see it right away. Designers also make sure their pages have repetition (repeating elements from page to page), proximity (grouping of similar items), and alignment (putting items in line with each other).
During this lesson, you will not be coding. You will simply be taking some time to consider how a good website might be laid out. And if the weather is good, you’ll even get a chance to go outside.
SCHEDULE (85 MINUTES):
CLASS DISCUSSION & SKETCHES – Principles of Web Design
Topic #1 – A New Message from Hakon Wium Lie
“It is important that HTML pages can be displayed even if the style sheet is not taken into account. CSS was designed with this in mind, and all content remains visible even if the style sheet is ignored. This is because of the fundamental principles of style sheets: the separation of content and presentation. By only describing the presentation of documents, all the content of the documents are available even if the style sheets are ignored.”
(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.
*Practice Removing Stylesheets through the Inspect Element
Topic #2 – CSS Review Questions (Lesson 3.1, 3.2, 3.3, & 3.4)
1. Explain the difference between internal and external links.
2. Explain the difference between text and font.
3. When we say that a design is pleasing to the eye, this is known as good _______________.
4. What exactly is a color palette?
5. Explain the meaning of white space and focal points, but also explain how these two things are related.
Topic #3 – A Definition-Heavy Lesson
Most of our lessons have had a few key terms and a few ideas that you needed to remember for Quarter Quiz #3. But this lesson will be heavy on terms and definitions. In other words, there will be a lot of terms and a lot of definitions to remember. That means you might need to study a little harder when quiz time comes so that you don’t mix up these words and definitions. Pay close attention because we will be talking about some of the most important ideas in web design.
Topic #4 – Web Design Principles
The more we talk about style, the more you should realize that a good design takes a lot of planning, a lot of time, and a lot of patience. But how will you know if you have a good design? Are your sections organized? Is your text easy to read? Is your color palette soft on the eyes or a little too intense? Will someone know what your website is about the moment they look at it? And when you finish your design, will your opinion of your own design be more important than someone else’s opinion? Consider this great article on the principles of effective web design.
Topic #5 – Above the Fold
Almost everything we read today, including books and magazines, are now online. We read more on a screen than we read from anywhere else. But that doesn’t mean books or newspapers have gone away. In fact, many of the same ideas and principles that apply to a printed newspaper are some of the same ideas and principles that apply to the design of a website.
For example, newspapers are printed on a broadsheet, which is a long, vertical page. One of the reasons newspapers were printed on these long pages was because about 300 years ago, governments required printing companies to pay an extra tax for every page they printed. Instead of printing daily news on regular size pages, printing companies decided to make longer pages where they could put more information. After printing, the newspapers would be folded in half so that they could be displayed on a shelf.
Over time, newspaper publishers learned that readers would only buy a newspaper if the paper itself looked interesting. In order to make a paper attractive, editors would put their best articles and most attention-grabbing headlines on the top half of the front page, an idea that came to be known as above the fold. And today, that idea still applies. Web designers always try to put their best, most attention-grabbing headlines or images within the first 600 pixels of height, otherwise also known as above the fold (where the bottom of the browser window ends and someone has to scroll down for more).
When you turn from page to page in a newspaper or a magazine, there are a few things that stay the same. Usually the information at the top and the bottom stays the same and only the content between the top and bottom is what changes. If everything on the page changed, a reader might think that they are no longer looking at the same newspaper. This is called repetition because the basic design stays the same even while the content changes. Think of our class website and how the left bar is consistent. If that navigation bar were to change or go away, you may have a difficult time navigating through the website.
You may also notice that with a newspaper, left and right columns are neatly lined up as well as the top and bottom margins. Even though a newspaper has several different articles on one page, there seems to be an invisible line that keeps them all together. The process of arranging content in straight lines is called alignment. You can remember the word because it even sounds like “a line.”
In addition to repetition and alignment, newspapers also do a good job grouping different kinds of information in certain areas of a page. For example, if you click on the newspaper above, you’ll see the front page of The New York Times on the day after the September 11 attacks. Whoever set up the design for this front page decided to place all of the images together, but between two columns full of text. This was not an accident. Whoever arranged the content on this page made important decisions about something called proximity. Proximity is the nearness of different, but related things. All of the images in the NYT example are different, but they have to do with the same thing, so they are near to each other and not spread out.
Topic #7 – Symmetrical & Asymmetrical Design
In mathematics, we learn that symmetrical shapes are the same on both sides. If you draw a line through the middle of a circle, both sides will be equal. If you draw a line through the middle of a square, both sides will be equal. But we also learn that the opposite is true. A shape that does not have equal sides is called asymmetrical. An uneven trapezoid would not have equal sides. An obtuse triangle would not have equal sides. In case you forgot all about symmetry, maybe this second grade symmetry worksheet will jog your memory.
In the same way, websites can also be symmetrical or asymmetrical. The only difference is that with a website, symmetry might not be as perfect or exact. The display of information on a symmetrical website is almost the same on both sides, but the display of information on an asymmetrical website usually leans toward the left or the right. If you consider the design of Google’s home page and draw a line through the middle of it, do you basically see the same thing on both sides? And when you start looking at search results, do the pages still have equal sides? How about our class website? Is it symmetrical or asymmetrical? What about our school website?
Topic #8 – Visual Hierarchy
Web design is all about the way you display or communicate information in a visual way. People look at websites and either they understand the information or not. So one of the ways a web designer can improve their visual communication is to emphasize certain elements more than others. Visual Hierarchy is the process of influencing someone’s eyes to move from one thing to the next. In a moment, we will Google a website and you will be asked to consider the first three things you saw in the order that you saw them. If the pattern is similar across the class, then the design was successful with visual hierarchy.
Topic #9 – Usability and Functionality
Imagine that a friend told you about a really interesting new website that she designed about rabbits and bunnies. You respect your friend and decide to go take a look. But when you went to her website, one of the links was broken (it took you nowhere), two of the images didn’t show up, and the colors were so intense that you had a hard time reading the text. In other words, you had a hard time using the website because certain parts of the site did not function like they were supposed to. Usability is a word that describes how a visitor experiences or uses a website (and whether they have a good or bad experience). Functionality is a word that describes whether all the parts of a website actually work (links, images, forms, etc).
Topic #10 – Layouts & Wireframes (WD1 & WD2)
If and when you know the purpose of your website, one of the most important things to consider is what kinds of things you want to have on your pages and how those things will be arranged. For example, will you have a logo? And if so, will it be centered at the top, off to the left, in a corner, or somewhere else? Where will your navigation links be located and what will they look like?
A Wireframe is basically a sketch or a drawing that shows the arrangement of page content (sections, elements, etc). This is more about setting up a skeleton of what elements will be on your site and in what arrangement. Once you have a wireframe in place, you can then create a layout, which includes a more specific drawing of what you want your pages to look like (logos, images, text, content).
[Explore Accounts on Figma if Necessary]
So now comes the fun part. Think of a movie that you absolutely love. Imagine that the people who made that movie asked you to design them a website. What elements would you sketch in your wireframe? What designs would you make for your layout? What text would you have on your main page? What would the navigation links say and what would they look like? You will receive a clipboard with a ruler, a pencil, and three sheets of paper.
If weather is good, we will go outside and sketch our wireframes and our layouts. If weather is not good, we will do the same activity inside. But this is not a group or partner challenge. You are to find a quiet spot where no one will disturb you and you will not disturb anyone else.