semiotics // final crit // 2.27

in class
final crit on web pages. we'll view all work on the large monitor from my laptop.
receive new project.

homework

read the following

- “a general summary of aristotle’s appeals” (yes, it's fairly redundant, but stick with it)

- “type & image” (on my reserve shelf) pp 117–121, 130–135

using the resources listings, search for at least three examples of each appeal to bring in for class. i'd prefer that the examples be from design-oriented publications such as graphic design books from the library, design magazines, etc. 

bring printed reproductions of your examples to next class. we will be isolating visual elements using analog materials and annotating them, so think about what materials might be useful for doing that. posed as a question, "how might you physically set apart an element of a design composition, yet still view it in the larger context?" and "how might you label or annotate an element of a design composition using physical means?" 

semiotics // website production // 2.25

in class
more muse tutorials.

how to upload your site to the kcai servers.


if time allows
- desk crits
- continue with muse site production

homework
finalize site production and upload the final to your server space.

prepare for crit.

final crit structure
live websites will be presented on the large monitor, presented from my laptop with a web browser.

each student will have seven minutes max: 2 min for presentation and 5 for peer feedback. order will be random, so be prepared to go at any time you are called.

students will present in front of the class, addressing the following areas:
- how you personally see semiotics as being relevant to graphic design practice (or not, if you don't see the relevance).
- the most significant idea(s) you learned about semiotics – what ideas are impacting your work right now
- how your page is organized and why you organized it that way. explaining the obvious is fine here. it's important to be able to articulate even the simplest ideas clearly.

remember you only have 2 minutes.
remember you need to address the above areas, not spend two minutes on how you made the background blue.

semiotics // website production // 2.20

in class
quickly review design sketches. determine a single direction to pursue.

muse demos

homework

refine design sketches as needed. produce any necessary graphic elements in photoshop at actual size, 72dpi, rgb color mode. save files as follows:
- layered psd files for button graphics with rollover states
- .png files with transparent backgrounds for non-square or shadowed images where the background color needs to show through
- .jpg files for photographic images with no transparency

begin working in muse. set up your sitemap, develop your master page elements (navigation), and start laying out your semiotics page.


resources
lynda.com muse tutorials: you can check out two-week subscriptions to this website from the library. there are over five hours worth of info here.

muse tutorial page on adobe.com. lots of useful info here. 

semiotics // website resources // 2.18

a few sites from last year's junior information architecture class. this will help you get a sense of what's possible with muse.

look at these from the perspective of interaction and technical "how to" – what kinds of animations, rollovers, links, etc, are possible using muse? think about how they apply to what you hope to do.

patrick drake
great "single page" navigational scrolling idea, and a great mix of vertical scrolling details and left/right navigation to view each shirt.

mckenzie marston
great use of expanding/contracting elements (select "roster" > "history"), and a good looking slideshow (select "roster" > "my hall of fame")

ivan alonso
nice subtle image rollovers, plus enlarged view of each object when clicked.

keaton reeder
some static elements, like navigation and background, while other elements are scrolling.

jessica rojas
nice horizontal scrolling. content scrolls while nav and title remain static, or "pinned" in position.

jessi wilson
nice and simple animated gif on the home page. resized rollover images.

collin rausch
nice record cover rollovers and an interesting little record-grid navigation in the lower right corner.

erika goering
the "infographs" section has images that slide open when you click the typography.

abby carr
nothing technically flashy at all. no tricks. just solid structure / layout and strong design sensibility

semiotics // website design // 2.18

in class
small group crits on wireframes – select a direction for design phase.

refine wireframes. post finished wireframes (home pg and interior pg) to your blog. 

homework
wireframe refinement as needed: develop a high-fidelity wireframe for your home page and interior page and post to your blog. you can design it in illustrator or render by hand. 

page designs: based on your single wireframe for your interior page (semiotics content), produce four tight (and distinctly different looking) design sketches indicating type, color, and image choices. don't worry about the homepage layout right now.

page size: 1000 pixels wide by 600

typefaces: we will be accessing typekit fonts eventually, so take a look at those and work with type that's in the ballpark of what you want to use (ex: a bold slab at 60 pt or an italic serif at 18 pt)

spend about 45 min on each sketch.

muse: start your trial subscription by clicking here. select the “join and download” option. *note: you will have to create an adobe i.d. if you don’t already have one.

semiotics // website // further reading

some resources to augment the lecture:

great slideshow on wireframing here.

wikipedia defines a wireframe.

"35 excellent wireframing resources" from smashing magazine.
more than you ever wanted to know, right?

semiotics // website design // 2.13

in class

desk crits: review content development/editing of your writing and basic image selections.  

wireframing lecture/demo.

homework

1. develop 4 different layouts for the basic "theory" page of your site. 

- don't forget all of the major "content buckets" you'll need. 

- include a global site navigation that allows easy movement between four to five info areas. 

- this page will house all of the content you are currently developing, and will be one of three or four theories you'll have on your site. 

- the layout should be flexible enough to accommodate variations in information, but retain an overall uniformity from page to page. 

2. develop  4 different layouts for a home page that include the following:

- global site navigation that matches the interior page mentioned above.

- website title

- brief introductory text

- space for an image to be added later

semiotics // website! // 2.11

in class:
review your 8 studies of anchorage and relay in small groups.

“design theories” website
design a simple, easy-to-understand and easy-to-navigate website for a parental figure (your audience) that explains, verbally and through visual examples, the theories you are learning in class. sections of the site will be broken up according to each theory, with a simple introduction page.

you will begin this exercise by developing and editing your content for the "semiotics" section.
the content requirements are as follows:

1. theory name and overview description; clear, concise, and in your own words

2. definitions of the following; clear, concise and in your own words: semiotics, semantics, pragmatics, sign, signified, signifier, icon, index, symbol, paradigm, syntagm, code, polysemy, connotation, denotation, anchorage, relay

3. include at a minimum one visual example illustrating each of the following: icon, index, symbol, paradigm, syntagm, connotation and/or denotation, anchorage, relay.

overall requirements
• use work already started during the original studies/assignments. making improvements is fine.
• select artifacts that are not only correct examples of each theory, but also showcase a breadth/elevation in visual criticism and aesthetic sensitivity.
• give proper credit where credit is due (where you found artifacts, who it's by)
• produce everything digitally (however, refined analog methods can certainly be incorporated!)
• prioritize the content and clarity of communication, but do not overlook form.


homework:
content development
- gather and refine your existing writing and add content as necessary
- gather and refine the visuals you've made to support the writing (this can be somewhat ongoing. final visuals are not all due by next class, but make progress)
- remember your audience

semiotics // coding // 2.6

in-class
review changed connotations (small groups). In partners, neatly list the new denotative and connotative attributes for each study (Total 5, plus original = 6). Post to blogs.

Brainstorming
In partners, select a few signs (found during previous projects). For each, brainstorm (via mindmap) a range of new signs that, when added to the original, will anchor and relay the meaning.

homework
anchorage and relay 
Test out various sign combinations (via quick thumbnails) that you discovered during the brainstorming exercise. Select the best thumbnails to realize. Isolate signs as needed.
• Tools: analog and digital.
• Total 8 studies (= 2 studies per combination, see below). Approx 20 min/study.
• Print each to fit nicely on 8.5x11.

Combinations:
1. Anchor the sign with type (add a single word or sentence).
2. Anchor the sign with “image” (found or made photo, illustration, logo, etc).
3. Relay the sign with type.
4. Relay the sign with image.

Read the following and record notes and thoughts to your blog.
• Type & Image by Meggs, pages 41, 62-65 (available on my reserve shelf at the library)
• Intertextuality (start at “Roland Barthes introduced...” about halfway down, stop at Levi-Strauss)
• The Language of Advertising

semiotics // creating meaning // 2.4

in-class:
share examples, lecture – semiotics part 2

Semantic Annotations
Select three of your examples that constitute a wide range of approaches, and properly identify and describe (label) the icons, indexes, symbols, paradigms, syntagms, signified/signifiers, connotations/denotations and pragmatics* found in each example.
• Tools: analog and/or digital
• Document to your blogs.

*Pragmatics studies the ways in which context — the relationship of the author, audience, value, intent, environment, channel, time period, etc. — contributes to meaning.

homework:
Changing Connotations
1. Select 1 of your signs.
2. Crop, isolate or re-frame the sign if needed. Visually alter the sign (using analog and digital methods) in order to convey the new set of connotations.
• Tools: open
• 1 sign x 5 connotations = 5 studies total (Approx 30 min/each).
• Scale and fit each consistently on a separate 8.5x11. Print.

Select from these connotations:
fresh, handmade, naive, drab, official, simple, friendly, retro, loved, high tech, mystical, independent, young, healthy, ironic, natural, calm, luxurious, artistic, adorable, clean, old-fashioned, casual, rigid, mass produced, scary, confusing, whimsical, [optional: come up with a few of your own.]

3. Read the following and record notes and thoughts to your blog. define the following terms in your own words: denotation, connotation, anchorage, relay
• Visible Signs by Crow, pages 52-57, 70-75 [available as e-book from the library]
• Type & Image by Meggs, pages 14-15, 58-59 [available on the right sidebar]

semiotics // annotations // 1.30

in-class:
share/review safari

Annotate Safari
Correctly identify and label the following signs found therein – icon, index, symbol, paradigm, syntagm, signified/signifier. Tools: analog methods (e.g. stickies, pencil, highlighter, etc). Note: labeling should be thorough, insightful and clear.

homework:
Finalize today’s in-class assignment. Document to your blogs.

Found Artifacts
Find existing samples of graphic design that best exemplify the signs listed above (plus connotation, denotation). You will be annotating them next class.
• Select from the design artifacts list.
• Bring physical, hard copies for review. Total 6.

project 1 // semiotics // 1.28

IN CLASS:
lecture 1 – intro to semiotics

Find: Studio Safari
With a partner tag (via labeled sticky notes) the various signs around studio. Be prepared to share your findings.

HOMEWORK:
Find: Street Safari
Thoroughly and accurately document (panorama style) one city block that is graphically rich (you will be labeling the signs next class). Approx 1 hr
• Tool: photography or drawing.
• Print and tile pages together for review. Approx 1 hr

Read
• Visible Signs by Crow, page 7–8, 12-17, 22–23, 30–33, 39–41 [available as an e-book from the library]
• Visual Communication by Baldwin, page 34-37 [also available as an e-book]

define
the following in a blog post, in your own words:
 • semiotics, sign, signifier, signified, icon, index, symbol, syntagm, paradigm, code, polysemy