Embed Size (px)
Citation preview
Design for web
(and mobile)
Presented to you by:
Shady Selim
2/2/2017
Index
Speaker BIO
Usability
“Don’t Let me think”
Father of usability
Apple lead designer
Usability and UX
Unilever
How to get the idea
Design check tools
Mobile First Era
Responsive Vs. Adaptive
Tools
Current design schools
Is JS necessary?
Last advice
Q&A
Speaker BIO
Technology Savvy, web and mobile evangelist, entrepreneur, and pubic
speaker.
In the IT field since 2000
Had my first Master in CS in 2011, with thesis titled “Usability - The key for
success or failure of web projects”
My second Master in Business Administration in 2017
Worked for Nokia, Microsoft, IBM, and Google
Now leading the Google Developer Group Helwan Chapter
Usability
3 Benefits:
1. Saving your visitors loyalty
2. Increasing web sites revenue and improving ROI
3. SEO
“Don’t let me think”
“People won’t use Web Sites if they can’t find their way around it”
Steve Krug
By making the web site user and reader friendly with clear navigation and well
structured content, this will encourage web visitors revisits
Terry Sullivan
Father of usability
Jakob Nielsen
Heuristic evaluation
Heuristic estimation
Cognitive walkthrough
Pluralistic walkthrough
Feature inspection
Consistency inspection
Standards inspection
Formal usability
Apple lead designer
Jonathan “Jony” Ive
MacBook Pro
iMac
MacBook Air
Mac mini
iPod
iPod Touch
iPhone
iPad
iPad Mini
Apple Watch
iOS
Usability and UX
Are they are different?
UI/UX
This is the 2016 new up trend
Unilever
$211 million
$100 million
$1 million
How to get the idea
Search for the design business
Get client branding materials
Get client preferences
Research, research, research
Dribbble
Behance
Template websites
Design Awards websites
Design forums and communities
Design check tools
http://responsivedesignchecker.com/
http://www.websiteresponsivetest.com/
http://ami.responsivedesign.is/
http://www.uxcheck.co/
http://www.intuitionhq.com/
http://fivesecondtest.com/
http://usabilitytools.com/
https://www.clicktale.com/
http://verifyapp.com/
Mobile First Era
Think mobile
Start Mobile, then bigger
Responsive Vs. Adaptive
Advantages
Disadvantage
Which type is best fit for which solution?
Tools
Wire frames
Blueprint
Prototype
Adobe Kuler
Material palette generator
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac
pellentesque magna. Donec id elementum ex. Morbi id dolor at lorem congue
vulputate. Mauris ullamcorper lectus mauris, et ullamcorper erat
pellentesque et. Aliquam maximus diam non nulla faucibus, id scelerisque dui
rutrum. Nulla vel vestibulum erat, eu blandit neque. Vivamus rhoncus nisl at
ex lobortis hendrerit.
http://www.lipsum.com/
Current design schools
Material
Modern
Invisible buttons
Sprites
Platform dependent design
Is JS necessary?
If you are in Egypt, then “Yes”
You need to learn:
Slicing
HTML
CSS
JavaScript
Bootstrap
LESS
SESS
“Might be Angular or React”
Last advice:
Be user centric
Quality before everything
Take your time
Your are not Mark or Bill Gates
Read
Read
Read
Watch and learn
A/B testing
Make sure it is readable
Accessibility proof
Q&A
Thank You
@dr_Shady_Selim
https://www.linkedin.com/in/shadyselim
https://plus.google.com/u/0/101719250614896511853
https://about.me/shady.selim
http://www.slideshare.net/bagaa/
References http://www.grin.com/en/e-book/196416/usability-the-key-for-success-or-
failure-of-web-projects
https://www.nngroup.com/people/jakob-nielsen/
https://en.wikipedia.org/wiki/Jakob_Nielsen_(usability_consultant)
https://en.wikipedia.org/wiki/Jonathan_Ive
http://www.apple.com/pr/bios/jonathan-ive.html
https://visualhierarchy.co/blog/usability-vs-user-experience/
http://www.businessinsider.com/heres-how-much-the-worlds-most-iconic-
logos-cost-companies-2013-3?op=1/#centure-100-million-12
http://usabilitygeek.com/user-experience-ux-tools/
https://color.adobe.com/create/color-wheel/
https://www.materialpalette.com/green/light-green
http://www.lipsum.com/
