SlideShare a Scribd company logo
1 of 47
Download to read offline
PRESENTS
POINTS vs PIXELS
dribbble or not dribbble?
A presentation by ilan Dray | www.inkod-hypera.com
How dribbble helps us
as studio?
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?
“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
ENJOY THE PIXELS!
THE DIGITAL MEDIA REVOLUTION
ON OUR REAL AUDIENCE
MEDIA CHANGED
THE PIXELS TOO
The Devices
Endless and in constant evolution. The design need to fit the media.




                                                                          Teens
                                                                         Tablets
                Pre-college
                Digital TV
                                                        Internet
                                                        iPhone                     Male
                                                                                   Lumia
                                                         savvy
                                    Head of
                                    Laptops
      iPad                         community
     Young                                                             Android
                                                                       Religious
                    Gadgets
                     Female
                    & Robots                        Investors
                                                   Computers
The Technology
Endless and in constant evolution. The design need to fit the technology.




               Augmented                                               Teens
                                                                      HD / 4K
               Pre-college
                 Reality                                Internet
                                                       The Cloud                Male
                                                                                Retina
                                                         savvy
                                    Head of
                                     Touch
                                   community
                                    Screens
     Young
      SDK                                                            Virtual
                                                                    Religious
                    Hologram                                         Worlds
                     Female                             Open
                    Unity 3D                         Investors
                                                       Source
The Designs
Endless and in constant evolution. The design need to fit itself.




                                                                         Teens
                                                                        GUI / UX
                Pre-college
                Responsive
                                                           Internet
                                                            Human
                                                            savvy
                                                          Interface                Male
                                                                                   Native
                                     Head of
                                   Skeuomorph
                                    community
      Young
      WOW
                                                                      Religious
                                                                      Minimalism

                      Female
                      Pie Nav                        Crowd source
                                                      Investors
                                                       / Freebies
SKEUOMORPHISM BY E. DEINER
ORIGINAL DESIGN HIGH RES.
HUMAN INTERFACES
PRINCIPLES
http://bit.ly/139YBHC (iPhone SDK) | http://bit.ly/yYIbH3 (Android) | http://bit.ly/VBFa4V (Windows Mobile)




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.
http://bit.ly/139YBHC (iPhone SDK) | http://bit.ly/yYIbH3 (Android) | http://bit.ly/VBFa4V (Windows Mobile)




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 :)
http://bit.ly/12NLGvP




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.
http://bit.ly/12NLGvP




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.
Native concept design for
        ynet HD app. to maximize
        the iPad tablet features
        and user experience .




RICH BRAND EXPERIENCE
http://bit.ly/RmZJ8i | http://bit.ly/TwJrIh (iOS Drawing Concepts)




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!
http://bit.ly/XtjvON (Labguru app.)




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.
Users expect a beautiful
                           appearance that promises
                           fun and encourages
                           discovery so let’s them
                           discover & play.




GAMIFICATION IS THE WORD
Create a clean and
                            purposeful experience by
                            leaving only the most
                            relevant elements on
                            screen.




MINIMALIFE THE EXPERIENCE
MAXIMALIFE CALL TO ACTIONS
http://cinemacity.cz




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.
Using gestures gives
                          people a greater affinity
                          for, and sense of control
                          over, the objects they see
                          onscreen.




PYROTECHNICS FOR WOW FX
http://bit.ly/RPIRlT (Wondervoice app.)




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.
www.mindlab-group.com




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!
People physically interact
                      with realistic onscreen
                      objects, in many cases
                      operating them as if they
                      were real-world objects.




REAL LIVE METAPHORS
www.inkod-hypera.com




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!
SAVE LIFE!
OPEN YOUR EYES…
FIND YOURSELF…
SOFT OR HARD…
KEEP SAFE :)
BE REAL, BE PRO!
THANK
THANK
YOU.



Inkod-hypera.com

More Related Content

What's hot

Designing for the iPad
Designing for the iPadDesigning for the iPad
Designing for the iPadusabilitynj
 
Learning interactions on mobile slideshare
Learning interactions on mobile   slideshareLearning interactions on mobile   slideshare
Learning interactions on mobile slideshareRaptivity
 
20110916 social business agenda
20110916 social business agenda20110916 social business agenda
20110916 social business agendaFlávio Mendes
 
The Future of User Interfaces
The Future of User InterfacesThe Future of User Interfaces
The Future of User InterfacesJason Mesut
 
New media trends dec2011 lite
New media trends dec2011 liteNew media trends dec2011 lite
New media trends dec2011 liteTarryn Abrahams
 
DSE2011 Presentation S29
DSE2011 Presentation S29DSE2011 Presentation S29
DSE2011 Presentation S29Stephen Randall
 
Mashable.com how-tech-will-transform-the-traditional-classroom
Mashable.com how-tech-will-transform-the-traditional-classroomMashable.com how-tech-will-transform-the-traditional-classroom
Mashable.com how-tech-will-transform-the-traditional-classroomTL Lee
 
Eleven Digital Trends to Watch in 2011
Eleven Digital Trends to Watch in 2011Eleven Digital Trends to Watch in 2011
Eleven Digital Trends to Watch in 2011Edelman Digital
 
Big M Conference - Future Mobile Innovations
Big M Conference - Future Mobile InnovationsBig M Conference - Future Mobile Innovations
Big M Conference - Future Mobile InnovationsPaul Golding
 
Mobile, Mobile, Mobile
Mobile, Mobile, MobileMobile, Mobile, Mobile
Mobile, Mobile, MobilePaul Golding
 
Catch the moment overview
Catch the moment overviewCatch the moment overview
Catch the moment overviewdevonm11
 
White Paper Part 2 Interactive Dooh Experience
White Paper Part 2 Interactive Dooh ExperienceWhite Paper Part 2 Interactive Dooh Experience
White Paper Part 2 Interactive Dooh ExperienceStephen Randall
 
Connected Objects are natural born storyteller (IoT_Now)
Connected Objects are natural born storyteller (IoT_Now)Connected Objects are natural born storyteller (IoT_Now)
Connected Objects are natural born storyteller (IoT_Now)Leandro Agro'
 
DMA North: Making mobile marketing work
DMA North: Making mobile marketing workDMA North: Making mobile marketing work
DMA North: Making mobile marketing workRachel Aldighieri
 
Moglue GMIC Presentation Application
Moglue GMIC Presentation ApplicationMoglue GMIC Presentation Application
Moglue GMIC Presentation Applicationmoglue
 
Connecting Technology for Great Experiences - How does QML and Web fit together?
Connecting Technology for Great Experiences - How does QML and Web fit together?Connecting Technology for Great Experiences - How does QML and Web fit together?
Connecting Technology for Great Experiences - How does QML and Web fit together?Kenneth Rohde Christiansen
 
Mobile Developer's Dilemma
Mobile Developer's DilemmaMobile Developer's Dilemma
Mobile Developer's DilemmaPaul Golding
 
Coco Reader System for University
Coco Reader System for UniversityCoco Reader System for University
Coco Reader System for UniversityEisho Akiyama
 

What's hot (20)

Designing for the iPad
Designing for the iPadDesigning for the iPad
Designing for the iPad
 
Learning interactions on mobile slideshare
Learning interactions on mobile   slideshareLearning interactions on mobile   slideshare
Learning interactions on mobile slideshare
 
20110916 social business agenda
20110916 social business agenda20110916 social business agenda
20110916 social business agenda
 
The Future of User Interfaces
The Future of User InterfacesThe Future of User Interfaces
The Future of User Interfaces
 
New media trends dec2011 lite
New media trends dec2011 liteNew media trends dec2011 lite
New media trends dec2011 lite
 
DSE2011 Presentation S29
DSE2011 Presentation S29DSE2011 Presentation S29
DSE2011 Presentation S29
 
Mashable.com how-tech-will-transform-the-traditional-classroom
Mashable.com how-tech-will-transform-the-traditional-classroomMashable.com how-tech-will-transform-the-traditional-classroom
Mashable.com how-tech-will-transform-the-traditional-classroom
 
Eleven Digital Trends to Watch in 2011
Eleven Digital Trends to Watch in 2011Eleven Digital Trends to Watch in 2011
Eleven Digital Trends to Watch in 2011
 
Big M Conference - Future Mobile Innovations
Big M Conference - Future Mobile InnovationsBig M Conference - Future Mobile Innovations
Big M Conference - Future Mobile Innovations
 
Mobile, Mobile, Mobile
Mobile, Mobile, MobileMobile, Mobile, Mobile
Mobile, Mobile, Mobile
 
Natural user interface
Natural user interfaceNatural user interface
Natural user interface
 
Catch the moment overview
Catch the moment overviewCatch the moment overview
Catch the moment overview
 
White Paper Part 2 Interactive Dooh Experience
White Paper Part 2 Interactive Dooh ExperienceWhite Paper Part 2 Interactive Dooh Experience
White Paper Part 2 Interactive Dooh Experience
 
Connected Objects are natural born storyteller (IoT_Now)
Connected Objects are natural born storyteller (IoT_Now)Connected Objects are natural born storyteller (IoT_Now)
Connected Objects are natural born storyteller (IoT_Now)
 
DMA North: Making mobile marketing work
DMA North: Making mobile marketing workDMA North: Making mobile marketing work
DMA North: Making mobile marketing work
 
Exponential design
Exponential designExponential design
Exponential design
 
Moglue GMIC Presentation Application
Moglue GMIC Presentation ApplicationMoglue GMIC Presentation Application
Moglue GMIC Presentation Application
 
Connecting Technology for Great Experiences - How does QML and Web fit together?
Connecting Technology for Great Experiences - How does QML and Web fit together?Connecting Technology for Great Experiences - How does QML and Web fit together?
Connecting Technology for Great Experiences - How does QML and Web fit together?
 
Mobile Developer's Dilemma
Mobile Developer's DilemmaMobile Developer's Dilemma
Mobile Developer's Dilemma
 
Coco Reader System for University
Coco Reader System for UniversityCoco Reader System for University
Coco Reader System for University
 

Similar to Dribbble inkod 2013

Sencha touch in the wild
Sencha touch in the wildSencha touch in the wild
Sencha touch in the wildcarr
 
The Future of Mobile by Andy Grignon
The Future of Mobile by Andy GrignonThe Future of Mobile by Andy Grignon
The Future of Mobile by Andy GrignonStartup Grind
 
Overcoming Barriers to Adopting a Mobile or Tablet App
Overcoming Barriers to Adopting a Mobile or Tablet AppOvercoming Barriers to Adopting a Mobile or Tablet App
Overcoming Barriers to Adopting a Mobile or Tablet AppGuideOne Mobile
 
Introduction to Mobile Development
Introduction to Mobile DevelopmentIntroduction to Mobile Development
Introduction to Mobile DevelopmentFoteini Valeonti
 
Web 2.0 Technologies and Information Services
Web 2.0 Technologies and Information ServicesWeb 2.0 Technologies and Information Services
Web 2.0 Technologies and Information ServicesYasar Tonta
 
Republica Berlin 14 april 2010
Republica Berlin 14 april 2010Republica Berlin 14 april 2010
Republica Berlin 14 april 2010Marc René Gardeya
 
Nowlab Introduction 20120822 En
Nowlab Introduction 20120822 EnNowlab Introduction 20120822 En
Nowlab Introduction 20120822 EnJaesang Han
 
HTML5 or Native Apps: Which Will it Be?
HTML5 or Native Apps: Which Will it Be?HTML5 or Native Apps: Which Will it Be?
HTML5 or Native Apps: Which Will it Be?jwhatcott
 
K hive final presentation
K hive final presentationK hive final presentation
K hive final presentationAmber Krishan
 
LocalSocial Overview Q409v3
LocalSocial Overview Q409v3LocalSocial Overview Q409v3
LocalSocial Overview Q409v3Sean O'Sullivan
 
Wif, Interactive design international festival, programme
Wif, Interactive design international festival, programmeWif, Interactive design international festival, programme
Wif, Interactive design international festival, programmeWif
 
Entrepreneurship in virtual worlds nov3
Entrepreneurship in virtual worlds nov3Entrepreneurship in virtual worlds nov3
Entrepreneurship in virtual worlds nov3Robin Teigland
 
Saiful Hidayat Santri Indigo Pondok Gontor Ponorogo Internet Dan It Sebagai...
Saiful Hidayat Santri Indigo Pondok Gontor Ponorogo   Internet Dan It Sebagai...Saiful Hidayat Santri Indigo Pondok Gontor Ponorogo   Internet Dan It Sebagai...
Saiful Hidayat Santri Indigo Pondok Gontor Ponorogo Internet Dan It Sebagai...Saiful Hidayat
 
Presentation
PresentationPresentation
PresentationTony Vo
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
 

Similar to Dribbble inkod 2013 (20)

Sencha touch in the wild
Sencha touch in the wildSencha touch in the wild
Sencha touch in the wild
 
The Future of Mobile by Andy Grignon
The Future of Mobile by Andy GrignonThe Future of Mobile by Andy Grignon
The Future of Mobile by Andy Grignon
 
Overcoming Barriers to Adopting a Mobile or Tablet App
Overcoming Barriers to Adopting a Mobile or Tablet AppOvercoming Barriers to Adopting a Mobile or Tablet App
Overcoming Barriers to Adopting a Mobile or Tablet App
 
Introduction to Mobile Development
Introduction to Mobile DevelopmentIntroduction to Mobile Development
Introduction to Mobile Development
 
Web 2.0 Technologies and Information Services
Web 2.0 Technologies and Information ServicesWeb 2.0 Technologies and Information Services
Web 2.0 Technologies and Information Services
 
Republica Berlin 14 april 2010
Republica Berlin 14 april 2010Republica Berlin 14 april 2010
Republica Berlin 14 april 2010
 
Thai IT Delegation to Japan 2012
Thai IT Delegation to Japan 2012Thai IT Delegation to Japan 2012
Thai IT Delegation to Japan 2012
 
Nowlab Introduction 20120822 En
Nowlab Introduction 20120822 EnNowlab Introduction 20120822 En
Nowlab Introduction 20120822 En
 
E mental Health Conference - Presentations
E mental Health Conference - PresentationsE mental Health Conference - Presentations
E mental Health Conference - Presentations
 
Chris elmitt
Chris elmittChris elmitt
Chris elmitt
 
HTML5 or Native Apps: Which Will it Be?
HTML5 or Native Apps: Which Will it Be?HTML5 or Native Apps: Which Will it Be?
HTML5 or Native Apps: Which Will it Be?
 
GKIM Credentials
GKIM CredentialsGKIM Credentials
GKIM Credentials
 
K hive final presentation
K hive final presentationK hive final presentation
K hive final presentation
 
LocalSocial Overview Q409v3
LocalSocial Overview Q409v3LocalSocial Overview Q409v3
LocalSocial Overview Q409v3
 
Wif, Interactive design international festival, programme
Wif, Interactive design international festival, programmeWif, Interactive design international festival, programme
Wif, Interactive design international festival, programme
 
Xapstr
XapstrXapstr
Xapstr
 
Entrepreneurship in virtual worlds nov3
Entrepreneurship in virtual worlds nov3Entrepreneurship in virtual worlds nov3
Entrepreneurship in virtual worlds nov3
 
Saiful Hidayat Santri Indigo Pondok Gontor Ponorogo Internet Dan It Sebagai...
Saiful Hidayat Santri Indigo Pondok Gontor Ponorogo   Internet Dan It Sebagai...Saiful Hidayat Santri Indigo Pondok Gontor Ponorogo   Internet Dan It Sebagai...
Saiful Hidayat Santri Indigo Pondok Gontor Ponorogo Internet Dan It Sebagai...
 
Presentation
PresentationPresentation
Presentation
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers
 

Dribbble inkod 2013

  • 1.
  • 3. POINTS vs PIXELS dribbble or not dribbble? A presentation by ilan Dray | www.inkod-hypera.com
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. How dribbble helps us as studio? 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.
  • 13. 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.
  • 14. 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
  • 15. ENJOY THE PIXELS! THE DIGITAL MEDIA REVOLUTION ON OUR REAL AUDIENCE
  • 17. The Devices Endless and in constant evolution. The design need to fit the media. Teens Tablets Pre-college Digital TV Internet iPhone Male Lumia savvy Head of Laptops iPad community Young Android Religious Gadgets Female & Robots Investors Computers
  • 18. The Technology Endless and in constant evolution. The design need to fit the technology. Augmented Teens HD / 4K Pre-college Reality Internet The Cloud Male Retina savvy Head of Touch community Screens Young SDK Virtual Religious Hologram Worlds Female Open Unity 3D Investors Source
  • 19. The Designs Endless and in constant evolution. The design need to fit itself. Teens GUI / UX Pre-college Responsive Internet Human savvy Interface Male Native Head of Skeuomorph community Young WOW Religious Minimalism Female Pie Nav Crowd source Investors / Freebies
  • 23.
  • 24. http://bit.ly/139YBHC (iPhone SDK) | http://bit.ly/yYIbH3 (Android) | http://bit.ly/VBFa4V (Windows Mobile) 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.
  • 25. http://bit.ly/139YBHC (iPhone SDK) | http://bit.ly/yYIbH3 (Android) | http://bit.ly/VBFa4V (Windows Mobile) 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 :)
  • 26.
  • 27. http://bit.ly/12NLGvP 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.
  • 28. http://bit.ly/12NLGvP 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.
  • 29. Native concept design for ynet HD app. to maximize the iPad tablet features and user experience . RICH BRAND EXPERIENCE
  • 30. http://bit.ly/RmZJ8i | http://bit.ly/TwJrIh (iOS Drawing Concepts) 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!
  • 31. http://bit.ly/XtjvON (Labguru app.) 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.
  • 32. Users expect a beautiful appearance that promises fun and encourages discovery so let’s them discover & play. GAMIFICATION IS THE WORD
  • 33. Create a clean and purposeful experience by leaving only the most relevant elements on screen. MINIMALIFE THE EXPERIENCE
  • 35. http://cinemacity.cz 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.
  • 36. Using gestures gives people a greater affinity for, and sense of control over, the objects they see onscreen. PYROTECHNICS FOR WOW FX
  • 37. http://bit.ly/RPIRlT (Wondervoice app.) 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.
  • 38. www.mindlab-group.com 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!
  • 39. People physically interact with realistic onscreen objects, in many cases operating them as if they were real-world objects. REAL LIVE METAPHORS
  • 40. www.inkod-hypera.com 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!
  • 46. BE REAL, BE PRO!