1 / 0

INFO 330

INFO 330. Forward Engineering Project Physical Design. The Project. Logical Design Figure it out Physical Design Build it. Logical Design. User studies Info model Funnel design Page design. Physical Design. Database design Page Prototypes Templates Code spec.

pancho
Download Presentation

INFO 330

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. INFO 330

    Forward Engineering Project Physical Design
  2. The Project Logical Design Figure it out Physical Design Build it
  3. Logical Design User studies Info model Funnel design Page design
  4. Physical Design Database design Page Prototypes Templates Code spec
  5. Know the User and info
  6. MichelleWhat’s the coolest car for me? Info need: What kinds of cars are there? How do you buy a car? What do my friends think? What car suits my personality? What can I afford ? Info behavior: Ask my friends & family Look at a lot of cars and think Google for certain cars Look at lots of pictures/videos Info type: Cool Car Only most basic car facts Lots of info on styling Lots of media Stories and anecdotes Make it easy to share Logistics not statistics Chatty and friendly style
  7. Design the info
  8. Info Type Logical Model Cool Car Controlled vocab name shortDescription (basic rt) longDescription (full rt) features extras (o) personalityTraits bestUses whoOwnsOne (o) media stories (o) price Info need: What kinds of cars are there? How do you buy a car? What do my friends think? What car suits my personality? What can I afford ? Dealer name street1 street2 (o) city state zip phone email facebookURL (o) rating (0) shortDescription (basic rt) longDescription (full rt) Info type: Cool Car Content Only most basic car facts Lots of info on styling Lots of media Stories and anecdotes Logistics not statistics Basic Rich Text p b i u Full Rich Text p ul ol media b, i, u, Inline link (e or i) in p, li
  9. Access Structure Logical Model Hierarchy Info need: What kinds of cars are there? How do you buy a car? What do my friends think? What car suits my personality? What can I afford ? Cars by type Hierarchy Association Sequence Index (car) Index Association Features Personality trait Uses Owners Price Car name Index Info behavior: Ask my friends & family Look at a lot of cars and think Google for certain cars Look at lots of pictures/videos Association Sequence Index Index (dealer) Association Zip City Name Sequence Association Cars like this one Other dealers with this car Steps to buying a car Cars we want you to see Top Dealers Index search results Full text Index Car.longDesc Dealer.longDesc
  10. Implement the info
  11. Data model
  12. Design the Experience
  13. Dealer Funnel Landing car Success!! Conversion Flow car car Car at dealer car Car at dealer car Car at dealer Drive one Buy one car Google, FB posts, Ads on other sites Car at dealer car Car at dealer Drive one car Car at dealer Car at dealer car car car
  14. Michelle’s Journey I’m unsure of what car I want What I see helps me I am on the trail of the car I want I found some good cars I found one I want You made me even more confused I lost the scent I can’t decide I don’t trust the dealer
  15. World Google Page Rank Partial View Ad Facebook Post The Car For You Site What I see helps me Likes Viewed Saved Search Associations by car attributes Landing Page (Car full view) My type of cars is for sale around here Faceted Search Result Sequence Associations by car attributes Car-Dealer Page I found good car models I want this car I trust this dealer I want this car I trust this dealer I found some good cars and dealers My Cars Page Price sort Location sort Other cars at dealer Drive one
  16. Implement the experience
  17. Prototypes qiuxian-ed.blogspot.com www.inovdesigns.com From logical to physical 37signals.com jonas.follesoe.no www.mikehill33.com
  18. Wireframes – half way to physical
  19. Prototype Facets - Wireframes X X X www.smashingmagazine.com
  20. Prototype Facets – Page proto X X X www.smashingmagazine.com
  21. Deliverable- Page Prototypes Done in HTML (at what ever level you can) Don’t sweat browser compatibility (say which one) At least your two info type full-view pages Visual As close to a real look and feel as you can CSS for styling Functional As much UI behavior as you can make happen JS for behavior Content As much real content as you can find/create One full item of each type As much about other items to make the prototype real(ish)
  22. http://twitter.github.io/bootstrap/ http://twitter.github.io/bootstrap/
  23. What should happen between wireframes and page design You get real about the design you are able to create You add lots to the info/data model You find access structures that don’t fit but need to You drop stuff that seemed so good You come to grips with screen real estate You spend a lot of time on stuff that seemed trivial in the wireframes
  24. Deliverable: Controlled Vocabularies In Word or Excel At least three At least two sources on the web that help you construct the list The list Flat lists Hierarchical lists (taxonomies) Used in your page prototypes
  25. Next week No class Monday I’ll record the lecture Templates Break your page prototypes into Page level templates Area level templates Turn mock-up content into template commands Code spec Queries Logic Functions for features
  26. My Page Prototype
More Related