Cecilia Huster, Senior UX Designer

Arabic Web DesignCecilia Huster

25 September 2008

Cecilia Huster, Senior UX Designer 2

Overview

• Page Layout: headers, HTML elements, images

• Alphabet and numbers

• Examples

• Tools and resources

Cecilia Huster, Senior UX Designer 3

Layout Best Practices: Mirroring

Start on the right, move to the left.

For every element, at every level.

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

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

١ ٠ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩

0 1 2 3 4 5 6 7 8 9

Cecilia Huster, Senior UX Designer 6

Masthead

Horizontal navigation

English on left Arabic on right

Mirrored drop down

Cecilia Huster, Senior UX Designer 7

Article pageWestern Arabic numbers for

Arabic Date

Right-aligned English text

Cecilia Huster, Senior UX Designer 8

Shopping Basket

Check out button

Delete Subtotals in 2 currencies DescriptionQuantity Price

Save orderContinue Shopping

Basket summary

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

Cecilia Huster, Senior UX Designer 10

Thank you

• Original slides at www.ceciliahuster.com