mobile app design process

12
Image Selector for CMS — Liferay Excersice — [email protected] .JPG .PNG .GIF

Upload: pablo-v

Post on 23-Jul-2016

219 views

Category:

Documents


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Mobile App Design Process

Image Selector for CMS — Liferay Excersice —

[email protected]

.JPG .PNG.GIF

Page 2: Mobile App Design Process

UPLOAD IMAGE FILES

CMS app

(From Gallery, URL, Camera or Dropbox).

.JPG .PNG.GIF

Creating an Image Selector for a CMS.

Load from URL flowCreating an Image Selector for a CMS. 1.

Mobile Version

.JPG

Page 3: Mobile App Design Process

Creating an Image Selector for a CMS.

Creating an Image Selector for a CMS. 2.

Mobile Version

UPLOAD IMAGE FILES FROM:

.JPG .PNG.GIF

GALLERY

CMS app

CAMERA

URL

DROPBOX

Page 4: Mobile App Design Process

Creating an Image Selector for a CMS.

Creating an Image Selector for a CMS. 3.

Mobile Version

Image URL

Paste URL here…

CMS app

Image Preview

Page 5: Mobile App Design Process

Creating an Image Selector for a CMS.

Creating an Image Selector for a CMS. 4.

Mobile Version

Image URL

http://www.liferay.com/logo.jpg

OKCMS app

Image Uploaded! Image Uploaded!

Page 6: Mobile App Design Process

— The Process —

Page 7: Mobile App Design Process

6Step 2. WireframingPaper & Pencil

Page 8: Mobile App Design Process

6Step 1. Information Architecture

Moleskine/Sharpies/HB pencil

Page 9: Mobile App Design Process

Step 3. Visual DesignPhotoshop & Sketch

6

Page 10: Mobile App Design Process

Step 4. PrototypingMarvel/Invission/ or so…

6

Page 11: Mobile App Design Process

6Step 5. TesrtingMobile Phone/Devices & Desktop

Page 12: Mobile App Design Process

[email protected]

— Thanks : ) —