Bruno Ribeiro | Cal Poly | Spring 2020 | GRC 338: Web Development and Content Management
GRC 338: Resources

Example of Design principles examples submission

Just like you, I have a design principle assigned to me. This is an example of how I can succinctly present it using both the book theory and my own words:

Prototyping

Packaging space claim prototypes made by Marker Maker Creative using PU foam.

Wireframe of a schedule webpage, by Carrie Beyer.

High fidelity prototype of a schedule webpage, by Carrie Beyer.

 

According to the book, prototyping is “the creation of simple, incomplete models or mockups of a design”. There are different kinds of prototyping; they are used for different purpose during the design process. These space claim prototypes—made by Marker Maker Creative using PU foam—are examples of throwaway prototype, make it possible to learn quickly what the packaging shape will look like once it’s done.

The second example is a wireframe for a web page, designed by the student Carrie Beyer. Wireframes are concept prototypes. This approach helps communicate the concepts to others, reveals design requirements and problems, and allows for evaluation by a target audience. The key point to choose what’s the best prototype is to decide on what needs to be learned next.

Name convention

  1. The word group, followed by your group number.
  2. A hyphen() (again, not underscore).
  3. Number 1 for the physical example; or 2 for the web example.
  4. An optional sequencial lowercase letter, in case you have additional images for the same example.

group1-1.png (physical example)
group1-2a.png (web example, first image)
group1-2b.png (web example, second image)


But what if I was in a group with Iteration instead?

Iteration

Six sketches for the NBC logo, by Tom Geismar‎ and Ivan Chermayeff.

NBC logo, designed by Tom Geismar‎ and Ivan Chermayeff.

Redesign of the Nielsen Norman Group homepage.

 

According to the book authors, design iteration is “the expected iteration that occurs when exploring, testing, and refining design concepts. Each cycle in the design process narrows the wide range of possibilities until the design conforms to the design requirements.” The first example is a series of sketches made by ‎Tom Geismar‎ and Ivan Chermayeff for the NBC logo. These sketches make it clear that, instead of falling in love with their first idea, Geismar and Chermayeff explored different options for the peacock logo before deciding which would work best for the problem at hand.

The second example shows two different high‑fidelity layouts for the redesign of the Nielsen Norman Group homepage, done in‑house. Even though, we can look at those two options and see them as equally valuable, it can be assumed that the Nielsen Norman Group had established clear criteria to evaluate each iteration before the design could be considered complete.

Using the proper name convention, my files will be named:

group2-1a.png (physical example, first image)
group2-1b.png (physical example, second image)
group2-2.png (web example)

Last update on 30 March 2020, at 10:26 AM.