web and mobile ui design

33
Great For: Art Galleries and Exhibitions POP Displays Restaurant Menus Possible Applications: Artist Statement and Bio Slideshows Curatorial notes Video or audio interviews Tours of the artist studio Purchase inquiries Try Tag Now! Download the Tag app at http://gettag.mobi QARDZ.net

Upload: chilee

Post on 21-Jun-2015

360 views

Category:

Technology


3 download

DESCRIPTION

Examples of finished web and mobile site prototypes.

TRANSCRIPT

Page 1: Web and Mobile UI Design

Connect the analogwith the digitalwith QR codes

Print them on your caption cards, menus or product info cards and give the customer access to more information on their mobile devices.

Great For:

Art Galleries and Exhibitions

POP Displays

Restaurant Menus

Possible Applications:

Artist Statement and Bio

Slideshows

Curatorial notes

Video or audio interviews

Tours of the artist studio

Purchase inquiries

Try Tag Now!

Download the Tag appat http://gettag.mobi

QARDZ.net

Page 2: Web and Mobile UI Design

Save on the cost of printing hundreds or thousands of postcards when a

single code on a caption card links to a mobile website that can include a

wealth of additional content:

At gallery events, viewers can scan your caption card, and

connect with additional content and

contact information:

QARDZ.net

Page 3: Web and Mobile UI Design

Connect the analogwith the digitalwith QR codes

Print them on your caption cards, menus or product info cards and give the customer access to more information on their mobile devices.

Great For:

Art Galleries and Exhibitions

POP Displays

Restaurant Menus

Possible Applications:

Artist Statement and Bio

Slideshows

Curatorial notes

Video or audio interviews

Tours of the artist studio

Purchase inquiries

Contact:

Lee Barry

Qardz.net

c/o Object Design + Media

P.O. Box A3914

Chicago, IL 60690

[email protected] Tag Now!

Download the Tag appat http://gettag.mobi

QARDZ.net

Page 4: Web and Mobile UI Design

Save on the cost of printing hundreds or thousands of postcards when a single code on a caption card links to a mobile website that can include a wealth of addi-tional content:

At gallery events, viewers can scan your caption card, and

connect with additional content and

contact information:

Artist Statement and Bio

Slideshows

Curatorial notes

Video or audio interviews

Tours of the artist studio

Purchase inquiries

QARDZ.net

Page 5: Web and Mobile UI Design

Blog ForumParticipateAboutHome

HOME

Sign Up

Page 6: Web and Mobile UI Design

Blog Forum

Sign In | Register

ParticipateAboutHome

When you can't find certainty, seek likelihood or probability.

http://www.fortunart.net/xxxx.htmlhttp://www.cafe-restaurant.com/xxxx.html

Logo

When you can't �nd certainty, seek likelihood or probability.

Front of the fortune, with QR code:

Back of the fortune, with URLs and/or business logo or other branding:

Electronic Fortune Cookie FortunesUsing free scanning software with your smartphone, you scan the QR code printed on the Fortune which directs you to the art Fortune.

The fortunes can contain any kind of digital media. They are essentially little web apes that can link to audio video, �ash and so on.

QR Codes Explained

A QR code (short for Quick Response) is a speci�c matrix barcode (or two-dimensional code), readable by dedicated QR bar-code readers and camera phones. The code consists of black modules arranged in a square pattern on a white background. The information encoded can be text, URL or other data.

Common in Japan, where it was created by Toyota subsidiary Denso-Wave in 1994, the QR code is one of the most popular types of two-dimensional barcodes. QR is the abbreviation for Quick Response, as the creator intended the code to allow its contents to be decoded at high speed.[1]

The technology has seen a large uptake in Japan and South Korea. However, in the West there has been a slower adoption of QR codes. [more...]

ABOUT

SCAN THIS CODE WITHYOUR SMARTPHONE

Page 7: Web and Mobile UI Design

Blog ForumParticipateAboutHome

Inquire about how to submit culinary, visual art, writing, music or video to be included in a fortune series, or if you are a restauranteur, cafe owner or bakery, how to advertise in various Fortune Series.

Zen KoansAesop’s FablesItalian ArtFrench ArtAncient Greek Art

Culinary Art

URL:

Visual Art Fortunes/Axioms

Painting/Illustration PhotographyCulinary Art/Confection Writing Music Film/Video

Music Video

Upload Sample File

Submit

Promote your work in fortunes

Series in progress

ItalianFrenchGreek

Ethnic Fortune Cookies

Your medium(s)

Painting/Illustration PhotographyCulinary Art/Confection Writing Music Film/Video

Your medium(s)

Art Print Seller ArtistRestaurant/Cafe Musician Filmmaker

Business Category:

Your Name:

Your Email:

Subject:

I want to submit:

PARTICIPATECross-promote your restaurant, cafe or bakery with participating artists and musicians.

Page 8: Web and Mobile UI Design

Blog ForumParticipateAboutHome

BLOG

QR Codes Explained

A QR code (short for Quick Response) is a speci�c matrix barcode (or two-dimensional code), readable by dedicated QR bar-code readers and camera phones. The code consists of black modules arranged in a square pattern on a white background. The information encoded can be text, URL or other data.

Common in Japan, where it was created by Toyota subsidiary Denso-Wave in 1994, the QR code is one of the most popular types of two-dimensional barcodes. QR is the abbreviation for Quick Response, as the creator intended the code to allow its contents to be decoded at high speed.[1]

The technology has seen a large uptake in Japan and South Korea. However, in the West there has been a slower adoption of QR codes. [more...]

Page 9: Web and Mobile UI Design

WeatherWearApp for tablet and mobile devices that correlates real-time weather data with clothing items and outfits.

Lee BarryObject Design + MediaP.O. Box A3914Chicago IL [email protected]

Developer:

Weather Decision Technologies, Inc.201 David L. Boren Blvd. Suite 270Norman, OK 73072

Proposal For:

Copyright © 2010, Lee Barry. All rights reserved.CONFIDENTIAL

Page 10: Web and Mobile UI Design

WeatherWearApp for tablet and mobile devices that correlates real-time weather data with clothing items and outfits.

Copyright © 2010, Lee Barry. All rights reserved.CONFIDENTIAL

Core Features

• Links to weather data for zip code• App has generic set of outfits that get mapped over generic male/fe

male body shape• On-line clothing retailers place ads and provide virtual ‘outfits’ or

clothing items• iPad app and website to manage settings, set wardrobe reminders,

dowload and share clothing items

The App comes with stock items and outfits, but custom sets can also be downloaded and shared with other users. This allows users to ‘try on’ items that they may purchased on-line through participating retailers.

Target Market

Target market would be primarily female digital natives >21 that shop on-line for clothing. Possible teen market. Heavy social mediaintegration.

Pricing

The WeatherWear App would be free of charge, and makes a profit by selling ads placed primarily by on-line retailers.

Items and Outfits

Participating on-line clothiers provide graphic assets per set pixel dimen-sions and file types. Users can download individual items.

Page 11: Web and Mobile UI Design

WeatherWearApp for tablet and mobile devices that correlates real-time weather data with clothing items and outfits.

Copyright © 2010, Lee Barry. All rights reserved.CONFIDENTIAL

Out�ts Send Reminders Weather Music/Sounds

Out�t: Hate Chicago 1 (Casual)

Ads

Weather Forecast

Twitter Feed

WeatherWear SettingsUsername

November 2, 2010

Rain/Snow

35H / 22LE/NE 25

Logout

Current Date

Weather Summary

Outfit

Scroll for more outfits

Weather Feed

Twitter Feed

Ad Feeds

Page 12: Web and Mobile UI Design

WeatherWearApp for tablet and mobile devices that correlates real-time weather data with clothing items and outfits.

Copyright © 2010, Lee Barry. All rights reserved.CONFIDENTIAL

Out�ts Send Reminders Weather Music

WeatherWear SettingsUsernameRain/Snow

35H / 22LE/NE 25

Ads

Weather Forecast

Twitter Feed

Out�ts Items List View/Icon View Download Out�ts

Casual 1

Work 1 Saturday Sunday

Out�ts Send Reminders Weather Music

WeatherWear SettingsUsername

November 2, 2010

Rain/Snow

35H / 22LE/NE 25

Ads

Weather Forecast

Twitter Feed

Logout

Access on-line retailers such as Boutiques.com, Net-A-Porter, Wet Seal and Polyvore

Download items and outfit graphics to add to your WW library/closet

Click icons to choose outfits or items

Set options for push notifications to e-mail and phone

Create playlists based on weather data, using your own collection of music and sounds

Page 13: Web and Mobile UI Design

WeatherWearApp for tablet and mobile devices that correlates real-time weather data with clothing items and outfits.

Copyright © 2010, Lee Barry. All rights reserved.CONFIDENTIAL

Out�ts Send Reminders Weather Music

WeatherWear SettingsUsernameRain/Snow

35H / 22LE/NE 25

Ads

Weather Forecast

Twitter Feed

Out�ts Download Out�ts

Casual 1

Out�ts Send Reminders Weather Music

WeatherWear SettingsUsername

November 2, 2010

Rain/Snow

35H / 22LE/NE 25

Ads

Weather Forecast

Twitter Feed

Logout

Page 14: Web and Mobile UI Design
Page 15: Web and Mobile UI Design

Home Settings

Ago i

Home Settings

Ago i

Latitude: +41.889458 / Longitude: -87.794822

Page 16: Web and Mobile UI Design

Home Settings

Ago i

Latitude: +41.889458 / Longitude: -87.794822

View History

Mark/Edit Location

Page 17: Web and Mobile UI Design

Home Settings

Ago i

History

SW Corner Washington & LaSalle

10 days ago

100 Years Ago

Random Reunion

Former site of Chicago Stock Exchange

It is no mere accident that in the 1880s Chicago produced a group of architects, now known as the “First Chicago School...

2 old high school friends bumped into each other. They hadn’t seen each other in over 40 years.

October 12, 1910

October 2, 2010

Page 18: Web and Mobile UI Design

Home Settings

Ago i

History

SW Corner Washington & LaSalle

It is no mere accident that in the 1880s Chicago produced a group of architects, now known as the “First Chicago School,” whose work would have a profound effect upon architecture. Within a decade after the fire of 1871, Chicago was a boomtown. By 1890 it had a population of more than a million people and had surpassed Philadelphia to become the second-largest metropolis in the United States. The value of land in the Loop soared. Quickly, the low buildings constructed just after the fire were seen as an inefficient use of valuable space. Chicago was ready to experiment with daring solutions. The city that had stood at the center of innovations like the Pullman sleeping car, the McCormick reaper, and mail-order retailing would now be the place where the tall office building would be perfected. One of the keys to this development was the invention of the elevator.

Page 19: Web and Mobile UI Design

Home Settings

Ago i

Current Location

Mark/Edit Location

Upload

Now

Draft

What:

Private

Page 20: Web and Mobile UI Design

Home Settings

Ago i

Current Location

Edit Location

Now

Done

Page 21: Web and Mobile UI Design

Home Settings

Ago i

Settings

Page 22: Web and Mobile UI Design
Page 23: Web and Mobile UI Design
Page 24: Web and Mobile UI Design
Page 25: Web and Mobile UI Design
Page 26: Web and Mobile UI Design
Page 27: Web and Mobile UI Design
Page 28: Web and Mobile UI Design
Page 29: Web and Mobile UI Design
Page 30: Web and Mobile UI Design
Page 31: Web and Mobile UI Design
Page 32: Web and Mobile UI Design
Page 33: Web and Mobile UI Design