Design for Web and Mobile

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

Pinterest

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/