quote

"I believe that when people talk about solving problems with technology, what they're usually talking about is solving problems with design...which is to say, the application of psychology in a visual & functional context."

Jason Kottke

{Point of View} Design Build Out and Presentation

in class

• short discussion of design mark-up and planning for production
• demo: linking/integrating video & flash/image size
• studio time

homework

• refine and build-out your design to present all phases of interaction and presentation of content
• create an ordered PDF of your design for critique on Wednesday

{Point of View} Designin' and Refinin'

Wednesday, 24 February

in class

• start: 3 person group crits, 30 minutes. discussion points:
  1. is the interaction/navigation understandable for the viewer
  2. are the visual metaphors/design appropriate and interesting
  3. is is beautiful and useful
  4. is supplemental information used in the design, does it bring deeper understanding to the content
• place presentations on my drop box
• studio time: design refinement

homework

• design refinements: make it beautiful, useful & engaging
• read Richard Saul Wurman: Point of View 

{Point of View} Crit & Design Development

Friday, 19 February

in class

• crit design directions
• studio tyme

homework

• develop preferred design direction:
  1. revise layout based on crit
  2. build out interaction steps in photoshop
  3. put into an ordered progression and make PDF to present on Wednesday
  
• build out personal landing page and upload to subdomain

{Point of View} & [CSS Demos] 4

Wednesday, 17 February
in class

• CSS Demo 4: MAGIC!
• making PDFs from PSD JPGs, OMG
• studio time

homework

• develop your essay layout directions  
• prep for Friday group crit (project PDFs of JPGs in Univers)
• try to build your personal landing page in Dreamweaver and upload to your subdomain

{Point of View} Designing in Photoshop

Friday 12 February

in class

• CSS Demo 3
• studio time

homework

• beginning design in Photohop (see below)
• build the basic structure of your landing page in Dreamweaver

For this project we will be designing the web layouts exclusively in Photoshop. There are many reasons why, but the main one is WYSIWYG. Photoshop is a bitmap based program and we are working on the screen and for the screen. Getting used to laying out in multiple programs will also train your adaptability and flexibility. So do it. Diagrams and other vector exclusive elements should be done in a combination of Illustrator & Photoshop.

Based on your wireframes, begin designing your essay comparisons. Start with a screenshot of a browser as demonstrated in class. This will serve as a window to contextualize what you are designing. Your design will grow as you add text and elements. Be sure to group related items in Layer Groups to make organizing, moving and editing more efficient. Extend your frame as needed with Image/Canvas Size. 

Typography Choose from the following typefaces for this project:

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Read this short, excellent article on Web Typography: http://informationarchitects.jp/the-web-is-all-about-typography-period/

Begin 3 different design directions in Adobe Photoshop. Upload images of your progress to your blog.

{Point of View} & [CSS Demos] 2

in class

• CSS Demo 2
• studio time

homework

• continue development of all points in last homework assignment

{Point of View} & [CSS Demos]

Friday 5 February

in class

• CSS Demo 1

homework

• continue development of {Point of View} layouts
• design a landing page in Photoshop (see below)
• begin building your landing page in Dreamweaver with basic DIV containers, try to get the basic framework built

In photoshop, layout a page to serve as the homepage, or landing page (index.html) to your subdomain. Don't overwork this layout! If you spend more than an hour designing it, you've gone too far. Make it a simple framework we can expand upon in the next weeks. It's just a vehicle to apply your tech-learning as we demo. Define separate areas in your design that will contain the following:

• your name & profession
• 2 work examples
• one paragraph about you
• one self-portrait (you define what this means)
• an area to contain links to work examples

An example.

{Point of View) Schedule Feb 3

Wednesday 3 February

in class

• about CSS, CSS demo
• about chrome and screen size
• about wireframes

homework

• create 6-9 wireframe sketches, take the 3 most interesting and create a "tight" wireframe in Illustrator, post sketches and Illustrator PDFs to blog
• continue research and diagram sketching

On Friday class is only one hour long due to Steve Frykholm talk, 1:30-2:30 deskcrits CSS demo.

{Point of View} Wireframes

"A website wireframe (also "web wire frame", "web wireframe", "web wireframing") is a basic visual guide used in web design to suggest the layout of fundamental elements in the interface." 

Wireframing is an indispensable step in the website design process. By planning with sitemaps and wireframes the designer can speak with clients and developers using a common, simple visual language. Once agreeing upon content and structure, presenting your designs becomes much easier as you've built upon agreed organizational methods. It aids in the design process by giving you a framework and scaffold on which to begin designing. There's no set ways and many tools for wireframing, I start with pencil sketches and then make Illustrator wireframes to present.

Read the concise Wikipedia entry on wireframes and create your own wireframes to plan how you will layout your essays. Approach each wireframe from a different structural perspective. Sketch them out first, then create Adobe Illustrator versions of the 3 you think are best. Create a simple understandable legend to codify areas, for example simple boxes to represent areas of content, color or gray scale coding of outlines or areas can help you differentiate content and define hierarchy.

Include the following:

• authors
• titles
• text (do not put the actual text in, can be: white space/lines/bars/grey areas)
• diagrams
• other supplemental content (can be broken down by type, i.e. /bio/commentary/critique/points for/points against/photo/video)
• buttons (if you foresee any hiding and revealing of content)

Check out some good wireframing methods here on this aptly named blog, Wireframes:

http://wireframes.linowski.ca/2009/02/whiteboard-wireframes/

{Point of View} Supplemental Assets

Continue researching and collecting information about both of our authors: activities, history, work examples, etc. You will be integrating this related content in your designs in context with the text as diagrams, illustrations, video, quotes, etc.. It can support or contradict their positions in the essays. It can even be related content that solely supports your viewpoint on the ideas in the text.

This material will help to contextualize the writings for the audience. We approach reading (and everything else we encounter) armed only with our personal knowledge and biases.

supplemental assets can be

• biographical text
• other text about the same subject
• text about the author (publication in the editors case)
• screenshots & photographs of author work or examples of both modernism and post-modernism
• images
• sound
• video