WEB D

ESIGN &

DEVELOPM

ENT

ST

RO

L L I NG

TH

RO

UG

H…

WHAT IS???

• Web design (Designers)• Look and feel• Graphic Design• HTML, CSS, JavaScript• Create UI & UX

• Web Development (builders)• Inner workings• Competent in programming languages• Develops the UX (above)

BEST PRACTICES/PRINCIPLES

Usability and utility (not visual design) determine the success or failure of website.

• Understand Users’ habits• Appreciate quality and credibility• They don’t read, they scan• Impatient & insist on instant

gratification• Follow their own intuition (they stick to

what they find useful)• Want to have control (no pop up

windows, expect to have usual buttons in the usual places)

AND THE PRACTICES INCLUDE..

1. Don’t make users think (let it be self explanatory)

MORE PRACTICES…

2. Users patience (Ensure few requirements and fewer barriers) The less action is required from users to test a service, the more likely a random

visitor is to actually try it out.

3. Focus user’s attention (through the use of Bold fonts, images, videos) Focusing users’ attention to specific areas of the site with a moderate use of visual

elements can help your visitors to get from point A to point B without thinking of how it actually is supposed to be done.

4. Strive for feature exposure (through steps/transitions) Clearly showing users what functions are available is a fundamental principle of

successful user interface design.

5. Effective writing (brief content & good typography)

6. Strive for Simplicity

7. Use of white space (improves scanning of content, less clutter)

8. Conventions aren’t that bad

9. Test early and test often (TETO Principle)

WEB DESIGN AND DEVELOPMENT

Insight: Much of the work is repetitive. Following a detailed website design and development process can speed up your work and help your client understand your role in the project.

1. Planning Requirements analysis Project Charter (documentation of the process above) Site Map Contracts & Role Definition Site Requirements outlined

WEB DESIGN & DEVELOPMENT

2. Design Wireframes (Sketches) Mock-ups (Photoshop) Review & Approval Cycle Slicing & Coding to XHTML/CSS/Javascript

3. Development (Coding & Populating of Content) Build Development Framework Template Creation for special occasions Develop and test special features & interactivity Populate content Test & Re-test everything

WEB DESIGN & DEVELOPMENT

4. Launch Polishing Transfer to live server Testing using online tools Browser Compatibility Cross checking

5. Post Launch Hand off to client Provide documentation and source files Project close documentation (client sign off)

SECURITY

1. Levels of security Server Security Website Security

THANK YOU