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