Design for Web and Mobile
-
Upload
shady-selim -
Category
Technology
-
view
266 -
download
0
Transcript of Design for Web and Mobile
![Page 1: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/1.jpg)
Design for web
(and mobile)
Presented to you by:
Shady Selim
2/2/2017
![Page 2: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/2.jpg)
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
![Page 3: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/3.jpg)
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
![Page 4: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/4.jpg)
Usability
3 Benefits:
1. Saving your visitors loyalty
2. Increasing web sites revenue and improving ROI
3. SEO
![Page 5: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/5.jpg)
“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
![Page 6: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/6.jpg)
Father of usability
Jakob Nielsen
Heuristic evaluation
Heuristic estimation
Cognitive walkthrough
Pluralistic walkthrough
Feature inspection
Consistency inspection
Standards inspection
Formal usability
![Page 7: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/7.jpg)
Apple lead designer
Jonathan “Jony” Ive
MacBook Pro
iMac
MacBook Air
Mac mini
iPod
iPod Touch
iPhone
iPad
iPad Mini
Apple Watch
iOS
![Page 8: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/8.jpg)
Usability and UX
Are they are different?
UI/UX
This is the 2016 new up trend
![Page 9: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/9.jpg)
![Page 10: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/10.jpg)
Unilever
$211 million
$100 million
$1 million
![Page 11: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/11.jpg)
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
![Page 12: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/12.jpg)
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/
![Page 13: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/13.jpg)
Mobile First Era
Think mobile
Start Mobile, then bigger
![Page 14: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/14.jpg)
Responsive Vs. Adaptive
Advantages
Disadvantage
Which type is best fit for which solution?
![Page 15: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/15.jpg)
Tools
Wire frames
Blueprint
Prototype
![Page 16: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/16.jpg)
Adobe Kuler
![Page 17: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/17.jpg)
Material palette generator
![Page 18: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/18.jpg)
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/
![Page 19: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/19.jpg)
Current design schools
Material
Modern
Invisible buttons
Sprites
Platform dependent design
![Page 20: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/20.jpg)
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”
![Page 21: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/21.jpg)
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
![Page 22: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/22.jpg)
Q&A
![Page 23: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/23.jpg)
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/
![Page 24: Design for Web and Mobile](https://reader031.fdocuments.us/reader031/viewer/2022022419/58a199561a28ab97118b628f/html5/thumbnails/24.jpg)
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/