Stanford University

Exercise: negative space

Let's put some spunk back into Cal State Fullerton's English department's old webpage.

Let's practice

We'll hone our skills with handling negative space by stripping away parts of a homepage to create a cleaner, less cluttered feel.

Materials

To start this section, download the materials. In the folder exercise, you'll find the index.html page that we will be working with.

Cleaning up

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 english_files directory.

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).

Additional tasks

If you completed the first exercise quickly and have time so spare we have some additional ideas for redesigning.

Moodboards

Create a moodboard to reflect your creative vision. Find inspiration from Behance, Dribbble, Awwwards, Niice, Pinterest, Google, etc. and collect it in a Keynote, Powerpoint, Sketch, or other doc.

(The example below uses visuals from academic websites, books, posters, author pages, etc. and was created using Keynote.)

Color

Now we will redesign the CSF English Department page in terms of the color choices. You might have noticed some wonky colors in the materials/english.html file.

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 materials/english_files/247.css directly.

A helpful resource is Adobe Color, which helps you find colors that go well together.

Typefaces

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.

For some inspiring ways to combine fonts, take a look at websites like Medium that make cool choices, design sites like Behance, or typeface websites like Fontpair.

typography.com

All exercises adapted from Ishita Prasad's materials for CS247 Fall 2015-16.