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

The educational technology and digital learning wiki
Jump to navigation Jump to search
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{under construction}}
<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'' vs ''evaluative''<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>
* ''generative''— gathering user input on the organization and labeling of content
* 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>
* ''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>
* In class activity - find and sort information
* ''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>
; Designing information
* In class activity - find and sort information on your site
* Sitemap planning
===Designing information===
* 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]


===Further reading===
==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)]
* [[Information architecture]]
;References
;References
<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 18: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"