PRESENTS

dribbble or not dribbble? POINTS vs PIXELS

A presentation by ilan Dray | www.inkod-hypera.com

Dribbble is a source of inspiration but we love to use it as a platform to inspire.

It help us to be more creative just by knowing what already exist and standards.

We get feedbacks from the worldwide pro designers community.

How dribbble helps us as studio?

We rebound and play social by giving and getting cool freebies, tips and tricks.

Great brainstorming platform for sharing your progress or dilemmas about design.

Powerful tool to find new talents and to promote yourself with live statistics.

How dribbble helps us as studio?

How dribbble helps us as studio?

“What we find in dribbble stay in dribbble.”

“If it’s in dribbble, so it’s already dépassé and it’s really means that our design need to be different.” Ilan Dray

ON OUR REAL AUDIENCE THE DIGITAL MEDIA REVOLUTION

ENJOY THE PIXELS!

THE PIXELS TOO MEDIA CHANGED

Pre-college

Head of community

Internet savvy

Religious

Investors Female

Young

Teens

Male

The Devices Endless and in constant evolution. The design need to fit the media.

iPad Laptops

iPhone

Android

Tablets

Computers

Lumia

Gadgets & Robots

Digital TV

Pre-college

Head of community

Internet savvy

Religious

Investors Female

Young

Teens

Male

The Technology Endless and in constant evolution. The design need to fit the technology.

SDK

Touch Screens

The Cloud

Virtual Worlds

HD / 4K

Open Source

Retina

Hologram Unity 3D

Augmented Reality

Pre-college

Head of community

Internet savvy

Religious

Investors Female

Young

Teens

Male

The Designs Endless and in constant evolution. The design need to fit itself.

WOW Skeuomorph

Human Interface

Minimalism

GUI / UX

Crowd source / Freebies

Native

Pie Nav

Responsive

SKEUOMORPHISM BY E. DEINER

ORIGINAL DESIGN HIGH RES.

PRINCIPLES HUMAN INTERFACES

The size count ... High Resolution Display

Retina Display & other HD resolutions: Starting with the iPhone 4,

Apple incorporated the Retina

Display into its devices.

Resolutions and screen densities

are different for other platform such

Android or Microsoft mobile.

(Windows Mobile) V4http://bit.ly/VBFa(Android) | 3http://bit.ly/yYIbH(iPhone SDK) | YBHC139http://bit.ly/

Trendy look vs. Class & style Aesthetic Integrity

Golden Rule for Mobile Design: Read the SDK (Software Development Kit :)

Understand the platform that you design for.

Be neat in your design and consistent,

by taking the advantages of the standards

and paradigms people are comfortable with.

Innovation is great, but not at the expense

of the user experience.

Try not to reinvent the wheel :)

(Windows Mobile) V4http://bit.ly/VBFa(Android) | 3http://bit.ly/yYIbH(iPhone SDK) | YBHC139http://bit.ly/

Pixel perfect this is the point! Basic Design rules

Native app design:

iOS apps that feels as though

they were designed expressly for

the device. Fitting well on the device

screen resolution, proportions and

responds to the gestures

intuitively.

NLGvP12http://bit.ly/

From pixel to the point… First tip of the day

Golden Rule for HD display:

Oppositely to dribbble…

Design at 1x then import at 2x

with maximum vector elements

snapped to the exact pixel and

use points as unit for fonts with

size only multiple of 2.

NLGvP12http://bit.ly/

RICH BRAND EXPERIENCE

Native concept design for

ynet HD app. to maximize

the iPad tablet features

and user experience .

God is in the details More with less…

High Resolution VS. Minimalism:

Providing high-quality graphics not only

makes your app look good, but it also makes

your app look like a natural extension to

the rest of the system.

But create a clean and purposeful experience

by leaving only the most relevant elements on screen.

Let’s the users explore what they love!

(iOS Drawing Concepts) http://bit.ly/TwJrIh| i8http://bit.ly/RmZJ

Touch me baby Direct Manipulation for more engagement

Golden Rule:

The rule is that you design your app

taking also in consideration it’s a multi-

touch interface .

Using gesture makes feel a great sense of

control . Use gyro and other sensors of the

device to interact with the objects.

Make it looks like in the real world.

(Labguru app.) http://bit.ly/XtjvON

GAMIFICATION IS THE WORD

Users expect a beautiful

appearance that promises

fun and encourages

discovery so let’s them

discover & play.

MINIMALIFE THE EXPERIENCE

Create a clean and

purposeful experience by

leaving only the most

relevant elements on

screen.

MAXIMALIFE CALL TO ACTIONS

Fast and fluid Bring life to the experience, create a sense of continuity and tell a story through meaningful use of motion.

Be alive and think motion: Phone apps need to focus on simple, quick-use scenarios. Since people use phones while they're "on the go," you need to design your app accordingly.

http://cinemacity.cz

PYROTECHNICS FOR WOW FX

Using gestures gives

people a greater affinity

for, and sense of control

over, the objects they see

onscreen.

Give SFX* feedbacks People expect immediate feedback when they operate a control, and they appreciate status updates during lengthy operations.

Special Effects *

Motion & Sound Design: Subtle animation can give people meaningful feedback and helps clarify the results of their actions.

(Wondervoice app.) http://bit.ly/RPIRlT

Get mum feedbacks Get maximum feedbacks of anyone around you … because this media is accessible to everyone and feedbacks always welcome.

If my Algerian mum

know how to use it …

so for sure it’s

a great GUI!

group.com-www.mindlab

REAL LIVE METAPHORS

People physically interact

with realistic onscreen

objects, in many cases

operating them as if they

were real-world objects.

Create world revolution is not only a game. I invite you to share your knowledge, be creative and authentically digital to make this world a better place

“To give someone a piece of your heart, is worth more than all the wealth in the world.” Michael Jackson

Enjoy Life!

hypera.com-www.inkod

SAVE LIFE!

OPEN YOUR EYES…

FIND YOURSELF…

SOFT OR HARD…

KEEP SAFE :)

BE REAL, BE PRO!

THANK

THANK YOU.

Inkod-hypera.com