building scida

29
Kollin Zoltán WIAD Budapest 2013 Building Scida

Upload: zoltan-kollin

Post on 16-Jun-2015

1.159 views

Category:

Documents


1 download

DESCRIPTION

Wireframing and designing an e-book library management app. (Presented at World IA Day Budapest, 2013)

TRANSCRIPT

Page 1: Building Scida

Kollin ZoltánWIAD Budapest 2013

Building Scida

Page 2: Building Scida
Page 3: Building Scida

$119$69$79$139 $139

Page 4: Building Scida

Copying books to your Kindle

Page 5: Building Scida

What it feels like:

Page 6: Building Scida

Calibre for Mac

Page 7: Building Scida

What it feels like:

Page 8: Building Scida

What it should feel like:

Page 9: Building Scida
Page 10: Building Scida

Mail

Finder

Page 11: Building Scida

iTunes

Page 12: Building Scida

iTunes

Details

ListNav.

Toolbar

Page 13: Building Scida

Organizing books

Page 14: Building Scida
Page 15: Building Scida

Home

Library

iTunes

Kindle

Shelves

Categories

Playlists

Collections

Page 16: Building Scida

iTunes

Kindle

Playlists

Collections

Home

Library

iTunes

Kindle

Shelves

Categories

Playlists

Collections

iTunes

Kindle

Page 17: Building Scida

Functionality

Page 18: Building Scida

E-book formats

EPUB Mobipocket

DJVU / DOC / FB2 / HTML LIT / LRF / PDB

Page 19: Building Scida

Library managementConverting e-booksSupporting KindleSupporting Nook, Sony Reader, etc.Meta info editRead booksSend books to KindleSyncing KindleDownloading newsOnline access to books...

Page 20: Building Scida

Library management

Supporting Kindle

Meta info edit

Send books to Kindle

Library managementConverting e-booksSupporting KindleSupporting Nook, Sony Reader, etc.Meta info editRead booksSend books to KindleSyncing KindleDownloading newsOnline access to books...

Page 21: Building Scida

Wireframes

Page 22: Building Scida
Page 23: Building Scida

Iterations, iterations, iterations

Page 24: Building Scida

Graphic design

Page 25: Building Scida
Page 26: Building Scida
Page 27: Building Scida

Little big details

Page 28: Building Scida

Prototyping! ! ! }).m

ouseup(f

unction(

){

! ! ! ! var $tar

get = $(

this).pa

rent();

! ! ! ! //var $t

arget =

$(".tags

").child

ren().eq

(0);

! ! ! ! $target.

removeCl

ass("cli

cked");

! ! ! ! var orig

Position

= $targ

et.offse

t();

! ! ! ! $target

! ! ! ! ! .clone()

! ! ! ! ! .css({

! ! ! ! ! ! "positio

n": "abs

olute",

! ! ! ! ! ! "left":

origPosi

tion.lef

t,

! ! ! ! ! ! "top": o

rigPosit

ion.top,

! ! ! ! ! ! "z-index

": 1

! ! ! ! ! })

! ! ! ! ! .appendT

o(docume

nt.body)

! ! ! ! ! .fadeOut

(700, fu

nction()

{ $(thi

s).remov

e(); });

! ! ! ! $target

! ! ! ! ! .css({

! ! ! ! ! ! "visibil

ity": "h

idden",

! ! ! ! ! ! "text-wr

ap": "no

ne",

! ! ! ! ! ! "float":

"left",

! ! ! ! ! ! "overflo

w": "hid

den"