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).
LEARNING GOAL #3: The Basics of CSS
Students will be able to construct multi-page websites using Internal Links and External CSS.
PART 1: DAILY DESIGNRead More
- If you were here during Lesson 3.4, Skip to the Green Bar.
- If you were NOT here during Lesson 3.4, Follow Steps 1-10.
- 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
- …You have 40 minutes to complete a three page website…
…Fill it in with the following five elements…
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.
- GRADING RUBRIC
Three Page Website has been Completed with ALL Five Elements.
Three Page Website has been Mostly Completed with 3-4 Elements.
Three Page Website only has 2 Elements Applied.
Three Page Website only has 1 Element Applied.
Three Page Website has no Elements Applied.
PART 2: DESIGN PRINCIPLESRead More
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
*Practice Removing Stylesheets through the Inspect Element*
Topic #2 – Review Questions
- Explain the difference between internal and external links.
- Explain the difference between text and font.
- When we say that a design is pleasing to the eye, this is known as good _______________.
- What exactly is a color palette?
- Explain the meaning of white space and focal points, but also explain how these two things are related.
Topic #3 – Design Concepts
- Begin with a Newspaper and a Blank Paper
- The F Pattern
The Process of Reading Text from Top to Bottom, Left to Right
- Above the Fold
Putting the best, most attention grabbing content at the top of the page.
- Symmetrical & Asymmetrical Design
When the sides of a design are mostly the same (symmetrical) or very different (asymmetrical).
- Visual Hierarchy
Arranging content in terms of importance, making some elements stand out more than others.
- Usability & Functionality
How easy a website is for a person to use and how functional the designer made it.
Topic #4 – Design Principles
The obvious difference between elements of size, color, shape, etc.
When the basic design stays the same, even while the content changes.
The process of arranging content in straight lines.
The nearness of different, but related things.
Topic #5 – Wireframing
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).
So now comes the fun part. Think of a band or musician or a singer that you absolutely love. Imagine that the people who work with this band/musician/singer 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?
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.