COAP:COAP-3150 - week 3: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 3150</categorytree>


==Design specifications==
==Design specifications==
; Analyzing needs analysis results
or analyzing needs analysis results
; [[Card sorting]]  
===[[Card sorting]]===
* ''generative''— gathering user input on the organization and labeling of content  
* ''generative''— gathering user input on the organization and labeling of content  
* ''evaluative''-determining whether people can correctly find things in an organizational structure we’ve created<ref>[http://www.uxmatters.com/mt/archives/2011/06/comparing-user-research-methods-for-information-architecture.php Comparing User Research Methods for Information Architecture :: UXmatters]</ref>
* ''evaluative''-determining whether people can correctly find things in an organizational structure we’ve created<ref>[http://www.uxmatters.com/mt/archives/2011/06/comparing-user-research-methods-for-information-architecture.php Comparing User Research Methods for Information Architecture :: UXmatters]</ref>
* ''open'' (no categories) vs ''closed'' (predefined categories) <ref>[http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide Card sorting: a definitive guide] - Boxes and Arrows: The design behind the design</ref>
* ''open'' (no categories) vs ''closed'' (predefined categories) <ref>[http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide Card sorting: a definitive guide] - Boxes and Arrows: The design behind the design</ref>
* In class activity - find and sort information on your site
* In class activity - find and sort information on your site
; Designing information
===Designing information===
* Sitemap planning - [[Information architecture]]
* Sitemap planning - [[Information architecture]]
* Designing navigation
* Designing navigation
* Site and file structure
* Site and file structure


===Tools for site planning===
==Tools for site planning==
* Standalone (to install locally)
===Standalone (to install locally)===
** [http://freemind.sourceforge.net/wiki/index.php/Main_Page Freemind]
* [http://freemind.sourceforge.net/wiki/index.php/Main_Page Freemind]
** [http://vue.uit.tufts.edu/ VUE]
* [http://vue.uit.tufts.edu/ VUE]
** [http://www.xmind.net/ XMind]
* [http://www.xmind.net/ XMind]


* Web applications (on line)
===Web applications (on line)===
** [https://cacoo.com/ Cacoo]
* [https://cacoo.com/ Cacoo]
** [http://www.mindmeister.com/ Mindmeister]
* [http://www.mindmeister.com/ Mindmeister]
** [http://www.gliffy.com/ Gliffy]
* [http://www.gliffy.com/ Gliffy]


===Readings===
==Readings==
* [http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/ Planning And Implementing Website Navigation] - Smashing Magazine
* [http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/ Planning And Implementing Website Navigation] - Smashing Magazine
* [http://www.useit.com/alertbox/20040719.html Card Sorting: How Many Users to Test (Jakob Nielsen's Alertbox)]
* [http://www.useit.com/alertbox/20040719.html Card Sorting: How Many Users to Test (Jakob Nielsen's Alertbox)]
Line 30: Line 31:
<references/>
<references/>


==Layouts and grids==
Grid systems and used to organize layouts in print and web pages. Grids are made of horizontal baseline grids and separations and vertical columns and spacing between columns and margins.
* [http://designfestival.com/grid-theory/ Grid Theory]
* [http://www.thegridsystem.org/ The Grid System]


===Tools===
* [http://960.gs/ 960 grid system] - grid templates for Photoshop (among others) to place as layers.
* [http://modulargrid.org/#app Modular grid app] - CS5 plugin or web application and option to export result
* [http://fluidbaselinegrid.com/ Fluid baseline grid] - for designing fluid CSS-based grids
* [http://www.viget.com/inspire/free-psd-design-templates/ LAYOUT & STYLEGUIDE TEMPLATES: YOUR NEW BFFs] - Photoshop layout templates
* [http://www.guideguide.me/ GuideGuide] - panel plugin for Photoshop CS4+
; Further reading
* [http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/ Grid design basics: Grids for Web page layouts] - Dev.Opera
* [http://www.smashingmagazine.com/2011/11/09/establishing-your-grid-in-photoshop/ Establishing Your Grid In Photoshop]
* [http://designfestival.com/designing-for-the-web-templates-and-grid-systems/ Designing for the Web: Templates and Grid Systems]: Design Festival -
----
* Assignment – building site information architecture  
* Assignment – building site information architecture  


[[Category:COAP 3150]]
[[Category:COAP 3150]]

Latest revision as of 19:45, 26 October 2016

COAP 3150
COAP:COAP-3150
COAP:COAP-3150 - week 1
COAP:COAP-3150 - week 2
COAP:COAP-3150 - week 3
COAP:COAP-3150 - week 4
COAP:COAP-3150 - week 5
COAP:COAP-3150 - week 6
Design processes and models
Typography
Web design principles

Design specifications

or analyzing needs analysis results

Card sorting

  • generative— gathering user input on the organization and labeling of content
  • evaluative-determining whether people can correctly find things in an organizational structure we’ve created[1]
  • open (no categories) vs closed (predefined categories) [2]
  • In class activity - find and sort information on your site

Designing information

Tools for site planning

Standalone (to install locally)

Web applications (on line)

Readings

References
  1. ↑ Comparing User Research Methods for Information Architecture :: UXmatters
  2. ↑ Card sorting: a definitive guide - Boxes and Arrows: The design behind the design


  • Assignment – building site information architecture
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3150_-_week_3&oldid=60783"