Student Showcase: News Site Mockup: Version 2

We will showcase your version 2 news 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]

Point, Line, and Shape

The elements of design are the basic components used as part of any composition. They are the objects to be arranged, the constituent parts used to create the composition itself. In most situations the elements of design build upon one another, the former element helping to create the latter.

Point

A point is an element that has position, but no extension. It is a single mark in space with a precise, but limited, location. Alone it can provide a powerful relation between negative and positive space, but when grouped with other points the Gestalt grouping principal of closure tends to kick in and the brain compulsively connects the points together. Line or form is a natural result of multiple points in space.

By definition we can’t actually draw a point, since to see one would require it have dimensions. What we can draw is a dot. In fact dots are the building blocks of everything else. Any other mark we make can be seen as one or more dots in combination. Every shape, form, mass, or blob with a recognizable center is essentially a dot regardless of its size. Focal points can be interpreted as large dots.

Point Multiple points in space Closure
Dot Multiple dots in space Closure

 

Creating Focal Points in Your Web Design

Line

A line is an element characterized by length and direction. Lines create contours and form, and are often used to convey a specific kind of feeling or point to an important feature in a design. Lines are also used to create perspective, and dominant directional lines are often adopted to create a sense of continuance in a composition. In addition, lines that are grouped together often create a sense of value, density or texture.

Organic line Rigid line Differing line weights
Organic Rigid Differing weights

 

Adding Depth with Pixel Perfect Line Work

Shape (and Form)

The simplest definition of shape is a closed contour, an element defined by its perimeter. The three basic shapes are: circle, rectangle (square) and triangle. Form is the shape and structure of a dimensional element within a given composition. Form can be both two-dimensional and three-dimensional and can be realistic, abstract or somewhere in between. The terms form and shape are often used synonymously, which is why they are both included here. In reality, form is derived from the combination of point, line and shape.

A closed contour Dimensional forms
Contour Dimensional

 

25 Examples of Geometrical Shape Usage in Web Design

 

Next week, we will look at the elements Pattern and Texture.

Preproduction: Storyboards

Clients sometimes don’t really “get” wireframes, which is why it’s a good idea to present them with the next step, a storyboard, instead.

A storyboard, otherwise called concept art, is a drawing used to visualize your design in its entirety. It gives you a chance to see how colors interact with one another, how your navigational system looks, how your visual metaphor plays out, and whether content is presented in the best way possible—without getting into code.

Instead of creating an elaborate mockup in Photoshop, or a preliminary layout in XHTML and CSS, you can save a lot of time and effort to draw one or more storyboards so that you and your client can grasp what the site might look like.

If your client needs changes or a whole new layout after viewing the storyboard(s), it’s a simple matter to draw up a new storyboard or two. Storyboards have more detail than your wireframes, but are not as highly detailed as the final site will be.

How to create a storyboard:

  1. Again, draw a rectangle on your paper which approximates the proportions of a browser window.
  2. Select one of your successful wireframe layouts.
  3. Drawing cleanly and carefully, outline the major page elements.
  4. Use horizontal lines or the label “text appears here” to indicate where text will go.
  5. Use boxes with crossed diagonal lines or simple outlines to indicate image placement.
  6. Sketch in logos, icons, headings, and navigation buttons.
  7. Add color with colored pencils, crayons or markers.

Allow your client to draw right on your storyboard—encourage them to give you as much feedback as possible. Ideally, you will provide them with two or more storyboards. Make sure that each storyboard meets your client’s needs, but that they are different enough to give them a choice.

Student Work

Workshop Storyboard Storyboard StoryBoard Workshop

Project 2: Workshop Site, Version 1

Group tutorials are popular learning tools. These tutorials are commonly known as workshops, and they occur on a particular date and a particular location. They are one of many kinds of events.

Your workshop home page should get the visitor interested and provide enough information for them to find out what the session is for. Also let them know when and where it’s happening, how much the tickets cost, and what the best way to buy them is.

Please read the following article from .NET magazine:

website build-off: workshop sites

 

NET magazine article web buildoff workshop website

View the Layouts

Click an image to see it full-size.

example 1 workshop site example 2 workshop site example workshop site 3

Required Home Page Elements

Now create a mockup of a workshop site in Photoshop. No actual HTML or CSS coding is required, but you will need to create all of your own typography. Keep in mind the special requirements of encoding a site layout. This week you will create Version 1. Next week, you will revise and improve your first version after hearing feedback from peers and your instructor; this will be Version 2.

Start by deciding what type of workshop you are advertising and who your audience will be. It should be a single day event. Sketch up your three wireframes as described in week 2 (you will not turn these in this time), and then create a storyboard to turn in this week. Then design the home page in Photoshop. Be sure to include the following elements:

  • No wider than 1000px.
  • Clearly defined page content areas (e.g. site id, navigation, breaking news)
  • Navigation to the main sections of the site, including a link back to Home
  • Footer
  • Name of the workshop
  • Slogan or other descriptive text
  • Workshop time and date
  • Workshop location
  • Price of tickets and some kind of purchase button (“call to action”)
  • Typography which organizes the content and creates a visual heirarchy
  • One or more images that support your workshop theme
  • Each individual image and text block (of live type) is on a separate layer

Optional Home Page Elements

  • Blurbs about the instructors or speakers
  • Sponsor name
  • What you’ll learn
  • Who should attend
  • Related future workshops
  • Special offer(s)
  • Social media icons/feed

Instructor Example

instructor example of workshop site home page
Click for a larger version.

Student Work

Workshop Mockup Workshop Mockup Workshop Mockup Workshop Mockup

Relevant Article

35 Inspiring Design and Development Related Event Websites