1. Cecilia Huster, Senior UX Designer Arabic Web Design Cecilia Huster 25 September 2008

2. Cecilia Huster, Senior UX Designer 2 Overview Page Layout: headers, HTML elements, images Alphabet and numbers Examples Tools and resources

3. Cecilia Huster, Senior UX Designer 3 Layout Best Practices: Mirroring Start on the right, move to the left. For every element, at every level.

4. Cecilia Huster, Senior UX Designer 4 Alphabet Impure Abjad (consonant-only alphabet) –Some vowels symbols –28 basic letters No distinction between UPPER and lower case Cursive –most letters are connected Mixing Arabic and Latin script is very common

5. Cecilia Huster, Senior UX Designer 5 Numbers Eastern Arabic –right to left –Indian origin Western Arabic: –left to right –phone numbers, dates, prices –based on Eastern Arabic ٠١٢٣٤٥٦٧٨٩ 0123456789

6. Cecilia Huster, Senior UX Designer 6 Masthead Horizontal navigation English on left Arabic on right Mirrored drop down

7. Cecilia Huster, Senior UX Designer 7 Article page Western Arabic numbers for Arabic Date Right-aligned English text

8. Cecilia Huster, Senior UX Designer 8 Shopping Basket Check out button Delete Subtotals in 2 currencies Description QuantityPrice Save order Continue Shopping Basket summary

9. Cecilia Huster, Senior UX Designer 9 Tools Adobe Creative Suite Middle East Version –letter spacing and justification –ligatures, vowel signs –page, paragraph and footnote numbering –Arabic, Farsi or Hindi digits Tasmeem –typography and calligraphy –plug-in for Adobe products

10. Cecilia Huster, Senior UX Designer 10 Thank you Original slides at www.ceciliahuster.comwww.ceciliahuster.com