Slides for the presentation given in Fekra'17 on 2/2/2017 These slides talking about design for web and mobile, Jakob Nielsen, Jony Ive, Usability and User Experience, UI/UX, Responsive Vs. Adaptive design, Current design schools, Material design, Android and iOS

1. Design for web
(and mobile)
Presented to you by:
Shady Selim
2/2/2017

2. 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

3. 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

4. Usability
3 Benefits:
1. Saving your visitors loyalty
2. Increasing web sites revenue and improving ROI
3. SEO

5. “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

6. Father of usability
Jakob Nielsen
 Heuristic evaluation
 Heuristic estimation
 Cognitive walkthrough
 Pluralistic walkthrough
 Feature inspection
 Consistency inspection
 Standards inspection
 Formal usability

7. Apple lead designer
Jonathan “Jony” Ive
 MacBook Pro
 iMac
 MacBook Air
 Mac mini
 iPod
 iPod Touch
 iPhone
 iPad
 iPad Mini
 Apple Watch
 iOS

8. Usability and UX
 Are they are different?
 UI/UX
 This is the 2016 new up trend

10. Unilever
$211 million
$100 million
$1 million

11. How to get the idea
 Search for the design business
 Get client branding materials
 Get client preferences
 Research, research, research
 Dribbble
 Behance
 Pinterest
 Template websites
 Design Awards websites
 Design forums and communities

12. 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/

13. Mobile First Era
 Think mobile
 Start Mobile, then bigger

14. Responsive Vs. Adaptive
 Advantages
 Disadvantage
 Which type is best fit for which solution?

15. Tools
 Wire frames
 Blueprint
 Prototype

16. Adobe Kuler

17. Material palette generator

18. 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/

19. Current design schools
 Material
 Modern
 Invisible buttons
 Sprites
 Platform dependent design

20. 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”

21. 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

22. Q&A

23. 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/

24. 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/