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

The educational technology and digital learning wiki
Jump to navigation Jump to search
No edit summary
 
(14 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>
==Part I==
====[[Grids]]====
====Wireframes and mockups====
Wireframes are sketches of web page layouts and interfaces. They can be made using a variety of tools, from pencil and paper to sophisticated software, to sketch out the organization of a web page and its features.


;Online tools
==Design specifications==
* [http://wireframemockups.com wireframemockups.com] - also produces code for creating working [[Web prototyping software |prototypes]]
or analyzing needs analysis results
* [http://www.gliffy.com/ Gliffy], [http://creately.com] - sketching online
===[[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<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>
* In class activity - find and sort information on your site
===Designing information===
* Sitemap planning - [[Information architecture]]
* Designing navigation
* Site and file structure


;Template and kits
==Tools for site planning==
[http://www.jankoatwarpspeed.com Free Sketching & Wireframing Kit] to use with Illustrator or Photoshop or other vector-based drawing or image editing software.
===Standalone (to install locally)===
* [http://freemind.sourceforge.net/wiki/index.php/Main_Page Freemind]
* [http://vue.uit.tufts.edu/ VUE]
* [http://www.xmind.net/ XMind]


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


See also
==Readings==
* [[Web wireframe]] article for more tools and software (some commercial)
* [http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/ Planning And Implementing Website Navigation] - Smashing Magazine
* Further reading on [[Web_prototyping_software#Introductions_and_further_reading |web prototyping]]
* [http://www.useit.com/alertbox/20040719.html Card Sorting: How Many Users to Test (Jakob Nielsen's Alertbox)]
* [[Information architecture]]
;References
<references/>


==Part II==
===Design specifications===
====card sorting====
====designing information====
====sitemap planning====
====designing navigation====
====site/file structure====


----
* 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"