Presentation is loading. Please wait.

Presentation is loading. Please wait.

INFO 330 Forward Engineering Project Physical Design.

Similar presentations


Presentation on theme: "INFO 330 Forward Engineering Project Physical Design."— Presentation transcript:

1 INFO 330 Forward Engineering Project Physical Design

2 The Project Logical Design Figure it out 2.Physical Design 2.Build it

3 Logical Design User studies Info model Funnel design Page design

4 1.Physical Design Database design 2.Page Prototypes 3.Templates 4.Code spec

5 KNOW THE USER AND INFO

6 Michelle Whats 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 Info type: Cool Car Content -Only most basic car facts -Lots of info on styling -Lots of media -Stories and anecdotes -Logistics not statistics Controlled vocab Cool Car name street1 street2 (o) city state zip phone email facebookURL (o) rating (0) shortDescription (basic rt) longDescription (full rt) Dealer 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 ? name shortDescription (basic rt) longDescription (full rt) features extras (o) personalityTraits bestUses whoOwnsOne (o) media stories (o) price Basic Rich Text p b i u 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 Full Rich Text p ul ol media b, i, u, Inline link (e or i) in p, li

9 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 Hierarchy Index Association Sequence Index Sequence Index Association Hierarchy Index (car) Sequence Association Cars by type Cars like this one Other dealers with this car Features Personality trait Uses Owners Price Car name Steps to buying a car Cars we want you to see Top Dealers Index search results Index (dealer) Zip City Name Full text Index Car.longDesc Dealer.longDesc Access Structure Logical Model

10 IMPLEMENT THE INFO

11 Data model

12 DESIGN THE EXPERIENCE

13 Dealer Funnel car Google, FB posts, Ads on other sites car Car at dealer car Car at dealer Drive one Buy one Flow Conversion Success!! Landing

14 Michelles Journey Im unsure of what car I want I am on the trail of the car I want I found one I want You made me even more confused I lost the scent I cant decide I dont trust the dealer I cant decide I dont trust the dealer What I see helps me I found some good cars

15 The Car For You Site Landing Page (Car full view) World Google Page Rank Partial View Ad Facebook Post Faceted Search Result Sequence Associations by car attributes Faceted Search Result Sequence Associations by car attributes Drive one What I see helps me Price sort Location sort Other cars at dealer Price sort Location sort Other cars at dealer I found good car models Car-Dealer Page My type of cars is for sale around here I want this car I trust this dealer I want this car I trust this dealer My Cars Page I found some good cars and dealers I want this car I trust this dealer I want this car I trust this dealer Likes Viewed Saved Search Associations by car attributes Likes Viewed Saved Search Associations by car attributes

16 IMPLEMENT THE EXPERIENCE

17 qiuxian-ed.blogspot.com www.inovdesigns.com jonas.follesoe.no 37signals.com www.mikehill33.com Prototypes From logical to physical

18 Wireframes – half way to physical

19 www.smashingmagazine.com Prototype Facets - Wireframes X X X

20 www.smashingmagazine.com Prototype Facets – Page proto X X X

21 Deliverable- Page Prototypes Done in HTML (at what ever level you can) – Dont 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/

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 dont 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 – Ill 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


Download ppt "INFO 330 Forward Engineering Project Physical Design."

Similar presentations


Ads by Google