UX/UI Workflow

Page 1

.GIF

.JPG

.PNG

My UI/UX Design Workflow — Image Selector for CMS —

https://www.behance.net/pablovecorta


Mobile Version Load from URL flow CMS app

UPLOAD IMAGE FILES

.GIF

.JPG

.PNG

.JPG

(From Gallery, URL, Camera or Dropbox).

Creating an Image Selector for a CMS.

2.


Mobile Version Load from URL flow CMS app

.GIF

.JPG

.PNG

UPLOAD IMAGE FILES FROM: GALLERY

CAMERA

URL

DROPBOX

Creating an Image Selector for a CMS.

3.


Mobile Version Load from URL flow CMS app

Image URL Paste URL here‌

Image Preview

Creating an Image Selector for a CMS.

4.


Mobile Version Load from URL flow CMS app

OK

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

Image Uploaded!

Creating an Image Selector for a CMS.

5.


— The Process —

6.


Step 1. Information Architecture Moleskine/Sharpies/HB pencil

7. 6


Step 2. Wireframing Paper & Pencil

8. 6


Step 3. Visual Design Photoshop & Sketch

9.


Step 4. Prototyping Marvel/Invission/ or so‌

10.


Step 5. Tesrting Mobile Phone/Devices & Desktop

6 11.


Protanopia (Affects about 2.5% of males)

Deuteranopia (Affects about 5% of males)

Tritanopia (Affects about %0.5 of males)

Step 6. Accesibility Testing Color Blindness testing

6 12


— Thanks : ) —

pablovinias@gmail.com


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.