Student Showcase: Workshop Site Mockup: Version 2

We will showcase your version 2 workshop site home page layouts in class. Tell us a bit about what you’ve improved over version 1. Then we will seek feedback from your classmates. [5-10 minutes per student]

Pattern & Texture

Using pattern and texture to your website design adds visual interest and realism to your layout. It can help create a visual metaphor and build unity of design throughout your site.

Using Patterns and Textures in Web Design: 20 Great Examples


Pattern means a theme of recurring events or objects. In visual design, the term refers to a repeating collection of colors, lines, shapes and/or forms. The repetition tends to be regular.

Subtle Patterns

Squidfingers Patterns

ColourLovers Patterns

To obtain a background pattern from ColourLovers:

  • Use Firefox to locate the page for the individual pattern you want to use.
  • Click on the thumbnail image of the pattern to view the pattern within a large window.
  • Right-click on the pattern and select View Background Image.
  • Right-click on the pattern image and select Save Image As…
  • Navigate to where you want to save the image, rename it if you like (but leave the file extension as .png,) and click Save,


Texture means the feel, appearance, or consistency of a surface or a substance. In visual design, it refers to an area that has the illusion of a tactile quality of some kind—like you can imagine how it would feel to touch it.

CG Textures


Preproduction: Mood Boards

A mood board is a type of poster design that may consist of images, text, and samples of objects that express the mood of a future design piece. Designers use mood boards to develop their design concepts and to communicate to other members of the design team. Mood boards are often used by graphic and web designers to enable them to illustrate visually the direction of style which they are pursuing.

Mood boards can be arranged in a variety of ways, from loose collages to formal, organized layouts.

mood board example 1 mood board example 2

Why Mood Boards Matter

17 Inspiring Moodboards

Movie Site: Project 3, Version 1

Invent a new movie in a particular genre (movies fall into different categories called genres. You can see examples of different movie genres at Netflix.) Decide who will star in the movie. Develop a mood board prior to creating your mockup in Photoshop.

Consider including trailers and other video clips to engage visitors. Encourage them to find show times and buy tickets online.

Please read the following article from .NET magazine:

website build-off: movie sites

NET magazine article web buildoff movie website

View the Layouts

Click an image to see it full-size.

example 1 movie site example 2 movie site example movie site 3

Required Home Page Elements

  • Movie title
  • Name(s) of starring actor(s)
  • Site navigation
  • Imagery
  • Social media links
  • Name of the production company and copyright
  • Use of pattern and/or texture

Optional Home Page Elements

  • Tagline
  • Review quote(s)
  • MPAA Rating
  • Trailer with media controls
  • Date of release
  • Awards
  • Extended list of cast and crew (no Lorem ipsum—use real text)