ann marion portfolio – wireframes/ flow diagrams ...ann marion portfolio – wireframes/ flow...
Post on 05-Jul-2020
5 Views
Preview:
TRANSCRIPT
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 1
Wireframe – Dartmouth Polytrauma Conference – Dec 3-6, 2006 – HOME PAGEhttp://engineering.dartmouth.edu/polytrauma/
HOME CONFERENCE RESEARCH SPONSORS CONTACT
Banner Graphic
Dartmouth Polytrauma Conference 2006HomeAbout
CommitteesBackground
AssumptionsProgram
PreparationTraveling to Hanover
Local AccommodationsContact Us
Appendix
Content
Download Brochure
Download Registration
Footer –Dartmouth Home About Thayer School Home Koop InstituteDartmouth MedicalSchool
Dartmouth-HitchcockMedical Center
White River Junction VAMC Dartmouth College
Copyright 2006 Trustees of Dartmouth College
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 2
Wireframe – Dartmouth C.Everett Koop Timeline – Nov, 2006 – Second Page Designshttp://www.dartmouth.edu/~engs13/koop_timeline/
C. Everett Koop ~ Timeline ~ Prototype ~ HOME ABOUT
Growing Up
Brooklyn
Education
Years
Pediatric
Surgeon
Surgeon
General
Koop
Institute
1916-1933 1937-1941 1941-1981 1981-1989 1989>>FUTURE
PAGE TITLE: Koop Insitute -- << Past << Present >> FutureArchival Photo Box
LABEL
LINKS TO SOURCES for Photos
Archival Photo Box
LABEL
LINKS TO SOURCES for Photos
Content
Link to Visit the Koop Insitute
Footer –Dartmouth Home About ENGS13 Home Koop Timeline Home Koop Institute contactDartmouth Med School Dartmouth-Hitchcock
Medical CenterWhite River Junction VAMC Dartmouth College
Copyright © 2006 Trustees of Dartmouth CollegeNovember 2, 2006 - First Draft
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 3
Wireframe – Dartmouth Engs Coursehttp://www.dartmouth.edu/~engs13/
ENGS 13 HOME PAGE Banner Graphic Professor Rosen- Robbie
06F, 07F: 2A
Faculty & TA’s CONTENTLecture Schedule Course Theme PosterReadings/Slides/Videos Course Theme Poster Label & Photo Credit
Papers TITLE of CourseExams SUBTITLE of CourseLink to BlackboardPrerequisite: None.Distributive: TAS.Offered: 06F: 2AInstructors: Rosen, RobbieFilene Auditorium (Moore)
COURSE DESCRIPTION
Spring 2006 Course: http://www.dartmouth.edu/~engs05/Special Interest: Medical Disaster Conference Report (Dartmouth: June 13-15, 2001)RETURN TO ENGINEERING SCHOOL COURSE LISTINGS:http://www.thayer.dartmouth.edu/thayer/academicsadmissions/undergrad-courses.html
updated 9-20-06
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 4
Flow Diagram – simple flow diagram for Brandeis Peer to Peer Application prototypehttp://www.demo.cs.brandeis.edu/pr/edutech.html
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 5Flow Diagram – final Dynamic Diagrams/ Student Advantage Information ArchitectureCurrent version: http://navisite.collegeclub.com/channels/academics/?hhcid=140&d=media
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 6Storyboards – BeingMeta http://www.beingmeta.com/
Original BabelVision Demo page: minimal formatting/ no instructions
Phase 1: Reviewed & Tested Every page on existing site and demo, making screen shot of each step. Compiled Report ofScreen Shot Storyboard Sequence with discussion, analysis, recommendations and questions for proprietor computer scientistand advisory team. Review Competitors and List Features Pros and Cons.
Wireframe Recommendation for Home Page:Logo/Link Image? Announcement Image? Logo/Link
Description? Instruction? New SearchActive area
Includes: Expert Button, other modes,Typing Field, HTML instructions or Links to Other Versions of Interface
Bottom of page: About Links, copyright
Specifications for Working Draft Duplicate Version of BeingMeta site with applications was set up both at BeingMeta using CVS
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 7Storyboards – BeingMeta – Menubar/InstructionsPhase 2: Create First Level Navigation Menu Bar on top of every page
1. If you click on MORE you get the DEMO.The DEMO starts without hintsPROPOSE: Insert an Information Page before the DEMO.2. need a password?2.B Include information how to get signed up for demo [email K.Haase?]3. Long Wait for some searches as is not optimized yet as a final product such as Google that has been pre-computed over a
week (how does Google work, double check).
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 8Storyboards – BeingMeta – SubMenubar/Instructions
Phase 3: Add Submenu Navigation Bar every page with added instructions
Paste-up in Photoshop with recommendations for inserting new Sub Menu plus new set of Instructions.Recommendations for improved function of BabelVision software and integration with BRICO software.
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 9
Storyboards – BeingMeta – Develop Consistent Demos & ExamplesRefine feedback for Scoring Success of Search
Create Demo Sequences around interestingsearches such as Urban, Busy, Cities, AerialViews, Milan
Prepared Report and Canned On-Line Sequencefor Live Demos to Potential Clients
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 10
Storyboards – BeingMeta – Chart of selected pages
BeingMeta Home
Index.html
Team
Team.fdxml
Technology
Technology.fdxml
About Babelvision
BabelVision.fdxml
Login
Login.fdxml
Demo page 1
Index.fdxml
Demo page 2
Refine.fdxml
Demo page 3
findimage.fdxml
Demo page 4
image.fdxml
Demo page 5
similar.fdxml
Demo page 6Utilizes BRICO
editmetadata.fdxml
Demo page 7Utilizes BRICO
concept.fdxml
New Application Examples: September 2004 to January 2005
Sept-Nov 2004Create NewMetaDataConceptnewconcept.fdxml
Create NewWord
newname.fdxml
Add New Picture
Addimages.fdxml
BBC News Example
Addimages.fdxmlJanuary 28, 2005
Create Google Demo
News and Publications
Home Page
Add - news link- Google Demo link
News Page
News.fdxml
Demo BabelVision onGoogle data
Googleplus.fdxml
Storyboards – BeingMeta – Develop Consistent Demos & ExamplesAdd New Navigation for Create-New-Concept/more Clean-up of Fonts/Integrate BRICO
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 11
Refine page showing final state New completed findsimilar page
Final step involved creating demos for potential clients
On-line news publication using BBC News
Google example – using BabelVision instead of Google for a Google Search• Add Demo Button on first page of BabelVision demo page
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 12
Screen Design - Dynamic Diagrams / Student Advantage – Original Sitehttp://www.studentadvantage.com/discountcard/
Screen from Original Student Advantage site shows existing Branding and available screen real estate
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 13
Screen Design Mock-ups - Dynamic Diagrams / Student Advantage - First Design -Good example sources shown to client for discussion and approval of different concepts.
First Design drew on “AmericanMemory” website at the Library of
Congress.
This design took up too much screen realestate.
Example of on-going emailcommunication over specificationsfor screen real estate, held with StudentAdvantage Marketing, IT, ISP.
Low-end black & white screen shot marked up inPhotoshop with errors. Text reads:“FirstResearch.com could appear belowFirstResearch.com as shown or other cornersecond pages” “Banner Ad on Second Pagepushes content over on pageAlternative Location of Ad takes up less space.”
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 14
Screen Design- Dynamic Diagrams / Student Advantage - Final Design – Home Page
Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 15
Screen Design- Dynamic Diagrams / Student Advantage - Final Design – Second Page
Dynamic Diagrams /Student Advantage
Design, InformationArchitecture, andImplementation of Phase1 took place within 9months,
Project Manager/LeadDesigner/InformationArchitect
top related