Let's put some spunk back into Cal State Fullerton's English department's old webpage.
We'll hone our skills with handling negative space by stripping away parts of a homepage to create a cleaner, less cluttered feel.
To start this section, download the materials. In the folder
exercise, you'll find the
index.html page that we will be working with.
We'll practice our skills with handling negative space by stripping away parts of the homepage to create a cleaner, less cluttered feel. Remember, negative space might be empty, but it's not meaningless: it helps define structure and call out important parts of a page.
There are two ways you can do this: open
index.html in your Chrome browser, and then hit
View > Developer > Developer Tools . From here, you can directly delete parts of the website and edit the CSS. This is easy and quick, but won't let you save your edits—so don't hit reload! Alternatively, you can edit the CSS directly in the css files under the
If you edit the CSS, you can try
display:none (the page acts as if the element doesn't exist), or
visibility:hidden (the page acts as if the element is still there, but invisible).
If you completed the first exercise quickly and have time so spare we have some additional ideas for redesigning.
(The example below uses visuals from academic websites, books, posters, author pages, etc. and was created using Keynote.)
Now we will redesign the CSF English Department page in terms of the color choices. You might have noticed some wonky colors in the
You'll be changing these colors to convey the concept you defined in your moodboard and create a strong aesthetic. As before, you can edit colors through the Developer Tools in your Chrome browser, or edit the CSS of
A helpful resource is Adobe Color, which helps you find colors that go well together.
Now we'll practice editing typefaces. Make a copy of this mockup of the content of the CSF website (File > Make a Copy).
Then, in your copy, edit the typefaces and styling to achieve something a little more aesthetically pleasing and readable.
You have full access to the Google Fonts catalog in Google Drive. At the bottom of the dropdown for selecting a font, you'll see a "More Fonts" button, which takes you to this catalog. You can also play around with the fonts directly on the Google Fonts website.
All exercises adapted from Ishita Prasad's materials for CS247 Fall 2015-16.