About

There was also a well. Miss Spink and Miss Forcible made a point of telling Coraline how dangerous the well was, on the first day Coraline's family moved in, and warned her to be sure she kept away from it. So Coraline set off to explore for it, so that she knew where it was, to keep away from it properly.

She found it on the third day, in an overgrown meadow beside the tennis court, behind a clump of trees -- a low brick circle almost hidden in the high grass. The well had been covered up by wooden boards, to stop anyone falling in. There was asmall knot-hole in one of the boards, and Coraline spent an afternoon dropping pebbles and acorns through the hole, and waiting, and counting, until she heard the plop as they hit the water, far below.

Coraline also explored for animals. She found a hedgehog, and a snake-skin (but no snake), and a rock that looked just like a frog, and a toad that looked just like a rock.

There was also a haughty black cat, who would sit on walls and tree stumps, and watch her; but would slip away if ever she went over to try to play with it.

That was how she spent her first two weeks in the house -- exploring the garden and the grounds.

Work

Lemonade Hipster preview

Personal Page

Lemonade Hipster

The second iteration of the personal page project. Still just as simple, with just as much filler text. This one has a tab system for the assignments, to explain each one with sections on the side for what technology was used and any challenges that were encoutered while completely the assignment.


The Basics

You will create a home page which includes a list to all the assignments.

You will create an HTML page that includes all the content in a proper arrangement in preparation for creating a CSS layout. The page should be placed in your webdesignfolder and named index.html. The link on the first page of this syllabus should lead to this file. You should include:

  • A title in the title bar.
  • One image.
  • Your name.
  • A navigation scheme for the assignments: you should use “#” in place of the not-yet-completed links.
  • You also may include basic links to social media.
  • Other background information.
  • The text and the links should be formatted using an external CSS page.
All About the Visuals

All About the Visuals

Manic

/ˈmanik/ . ajd
Showing wild and apparently deranged
excitement and energy.

frenetically busy; frantic.


The Basics

You will be assigned a state of being.

Create a home page and a second page (other links need not work), using all the techniques learned so far during the semester, that represents that state of being. You are strongly encouraged to consideran appropriate navigation scheme, create a clear focal point, and use absolute positioning. Your choice of color and typography selections will be considered in grading.

You should “invent” appropriate text, if necessary. Think big. Think bold.

The first page should be different from the second page, with the first page specifically aimed at attracting attention.

  • Effective application of the “state of being.”
  • Presence of a title
  • Correct HTML/CSS
  • Aesthetic choices:
    • Font choice
    • Color choice
    • A clear focal point.
  • Creation of a reasonably complex layout (multiple divisions/content areas), although there may be exceptions to this expectation.
  • Creativity
  • Working links between the first and second page.
All About the Visuals

Business 1-Page Site

--Business Name--

--blurb--


The Basics

Students will create a responsive web page following the model of a catalog-based business. The page will include a text (and possibly image) based logo and at least six images, along with text added to the images (in Photoshop, or not). A header (and title) must be included, as must (non-working) links to at least six pages within the site (that should not be created.)

Color choice, typography, and simplicity/appropriateness of images will be considered in grading. The HTML should validate with an external CSS file. The site must be responsive and the transitions will be considered. The menu should also collapse to a pull-out style at the smallest size.

All About the Visuals

Case Study Client Project

--Client--

--blurb--


The Basics

You must write up a design document with the following information:

  1. A title of the site, with the design team listed. This is to be written up like a business document, with clearly marked headings, a table of contents, and perfect grammar/usage.
  2. A paragraph describing the purpose of the site
  3. A paragraph describing the audience of the site, leading to:
    • The definition of two to three personas that represent the typical users of the site.
  4. A preliminary mockup (including the home page and one additional page) made in Axure. Screen shots are expected and must include information about color and font choices. (A working Axure site would be acceptable.)
  5. The information architecture of the site.
  6. The results of a usability testing (4 participants) that tests the design in terms of 3 common interactions with the site (task analysis).
  7. A competitive analysis with two similar sites.
  8. Suggestions moving forward on adapting the initial design to the development phase of the project.

Then, the team must at least 6 pages of the site, which considers the design documents and its suggestions.

The project will be determined by:

  • An appropriate design for the selected “client”
  • A sophisticated and consistent design for the entire site
  • Easy-to-use and logical navigation
  • Application of good design principles
  • A responsive design
  • Effective use of images, color and typefaces
  • Well written content with a consideration of SEO principles and the inclusion of Google Analytics
All About the Visuals

Personal Page Redux

--Site Name--

Basically a portfolio site.


The Basics

You will create the finished site (from the first project of the semester), with a reasonably complex, “non-Word” layout.

  • Create an assignment page using HTML and CSS.
  • Make sure you include a title in the title bar, at least one image, your name (perhaps as a logo), and a navigation scheme for the assignments: you should use “#” in place of the not-yet-completed links.
  • You also may include basic links to social media and other background information.
  • The links should include some sort of rollover effect.

Your grade will be determined by:

  • Technical competence (everything appears that should)
  • Presence of a title
  • Correct HTML/CSS
  • Links with rollovers
  • Aesthetic choices:
    • Legible text
    • Non-clashing colors
    • Reasonable used of space (items line up)
    • A clear focal point.
  • Creativity
  • Appropriateness to purpose
  • The use of CSS Grid Layout (and perhaps Flexbox)